@milaboratories/uikit 2.9.0 → 2.10.0

package/dist/components/PlTextArea/PlTextArea.vue.js

@@ -3,7 +3,7 @@
 import { defineComponent as E, useSlots as S, ref as v, computed as a, onMounted as $, createElementBlock as s, openBlock as o, createElementVNode as n, createCommentVNode as i, normalizeClass as C, withDirectives as N, createVNode as q, createBlock as g, unref as d, toDisplayString as c, withCtx as D, renderSlot as b, vModelText as M } from "vue";
 
 import j from "../PlTooltip/PlTooltip.vue.js";
-import H from "../../utils/DoubleContour.vue2.js";
+import H from "../../utils/DoubleContour.vue.js";
 
 import { useLabelNotch as P } from "../../utils/useLabelNotch.js";
 import { useValidation as T } from "../../utils/useValidation.js";

package/dist/components/PlTextField/PlTextField.vue.js

@@ -3,7 +3,7 @@
 import { defineComponent as I, mergeModels as N, useSlots as $, useModel as O, ref as h, reactive as T, computed as i, createElementBlock as d, openBlock as a, createElementVNode as p, createCommentVNode as n, normalizeClass as j, withDirectives as z, createVNode as L, createBlock as f, unref as c, toDisplayString as m, withCtx as U, renderSlot as E, vModelDynamic as A, withModifiers as V } from "vue";
 import G from "../../assets/images/required.svg.js";
 import { getErrorMessage as H } from "../../helpers/error.js";
-import J from "../../utils/DoubleContour.vue2.js";
+import J from "../../utils/DoubleContour.vue.js";
 
 import { useLabelNotch as K } from "../../utils/useLabelNotch.js";
 import { useValidation as Q } from "../../utils/useValidation.js";

package/dist/layout/PlBlockPage/PlBlockPage.vue.d.ts

@@ -1,6 +1,16 @@
 import { PlPlaceholderProps } from '../PlPlaceholder';
 /** Root block page component */
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
+    subtitle?: string;
+} & {
+    /**
+     * Page title (won't be displayed if `title` slot is also provided)
+     */
+    title?: string;
+    /**
+     * Text to display when subtitle is empty
+     */
+    subtitlePlaceholder?: string;
     /**
      * If `true` body gutters are removed
      */
@@ -9,7 +19,19 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      * If defined, a loading overlay is displayed on the page body (over all default slot content)
      */
     bodyLoading?: PlPlaceholderProps["variant"] | PlPlaceholderProps;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:subtitle": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    subtitle?: string;
+} & {
+    /**
+     * Page title (won't be displayed if `title` slot is also provided)
+     */
+    title?: string;
+    /**
+     * Text to display when subtitle is empty
+     */
+    subtitlePlaceholder?: string;
     /**
      * If `true` body gutters are removed
      */
@@ -18,7 +40,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
      * If defined, a loading overlay is displayed on the page body (over all default slot content)
      */
     bodyLoading?: PlPlaceholderProps["variant"] | PlPlaceholderProps;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}> & Readonly<{
+    "onUpdate:subtitle"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    teleportTarget: HTMLDivElement;
+}, HTMLDivElement>, {
     title?(_: {}): any;
     'after-title'?(_: {}): any;
     append?(_: {}): any;

package/dist/layout/PlBlockPage/PlBlockPage.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlBlockPage.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"names":[],"mappings":"AA0EA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAuC,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGhG,gCAAgC;;IAK9B;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;IAPhE;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;mBAoFvC,GAAG;2BACK,GAAG;oBACV,GAAG;qBACF,GAAG;;AAlGhC,wBA4IK;AASL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlBlockPage.vue.d.ts","sourceRoot":"","sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"names":[],"mappings":"AA+IA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,kBAAkB,EAAuC,MAAM,kBAAkB,CAAC;AAGhG,gCAAgC;;eA8CnB,MAAM;;IAzCjB;;OAEG;YACK,MAAM;IACd;;OAEG;0BACmB,MAAM;IAC5B;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;;;eA0BrD,MAAM;;IAzCjB;;OAEG;YACK,MAAM;IACd;;OAEG;0BACmB,MAAM;IAC5B;;OAEG;oBACa,OAAO;IACvB;;OAEG;kBACW,kBAAkB,CAAC,SAAS,CAAC,GAAG,kBAAkB;;;;;;mBAiIvC,GAAG;2BACK,GAAG;oBACV,GAAG;qBACD,GAAG;;AAvJjC,wBAsMK;AAgBL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/layout/PlBlockPage/PlBlockPage.vue.js

@@ -1,61 +1,10 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".pl-block-page{--pl-block-page-body-padding: var(--main-spacing, 24px);padding:var(--container-spacing);background-color:var(--bg-elevated-01);height:100%;max-width:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}.pl-block-page.noBodyGutters{--pl-block-page-body-padding: 0}.pl-block-page__title{height:80px;display:flex;align-items:center;gap:12px;padding:20px 24px;min-width:0;max-width:100%}.pl-block-page__title__default{flex:1;min-width:0;max-width:100%;margin:0;color:var(--txt-01);display:flex;flex-direction:row;align-items:center;gap:12px}.pl-block-page__title__default>span{font-size:28px;font-weight:500;line-height:36px;letter-spacing:-.56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;display:inline-block}.pl-block-page__title__append{margin-left:auto;display:flex;align-items:center;gap:2px}.pl-block-page__title__append__teleport{display:flex;align-items:center;gap:2px}.pl-block-page__body{max-width:100%;display:flex;flex-direction:column;gap:var(--gap-v);padding:var(--pl-block-page-body-padding);--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-block-page__body::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-block-page__body::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-block-page__body::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as u, useSlots as m, computed as v, createElementBlock as o, openBlock as l, normalizeClass as f, createElementVNode as t, unref as d, withDirectives as c, renderSlot as s, createVNode as y, normalizeProps as g, guardReactiveProps as b, vShow as h, normalizeStyle as k } from "vue";
-import { PlBlockPageTitleTeleportId as P } from "./PlBlockPageTitleTeleportId.js";
-
-import { PL_PLACEHOLDER_TEXTS as B } from "../PlPlaceholder/index.js";
-import L from "../PlPlaceholder/PlPlaceholder.vue.js";
-const T = {
-  key: 0,
-  class: "pl-block-page__title"
-}, E = { class: "pl-block-page__title__default" }, S = { class: "pl-block-page__title__append" }, A = ["id"], G = { key: 1 }, N = { class: "pl-block-page__body" }, $ = {
-  name: "PlBlockPage"
-}, R = /* @__PURE__ */ u({
-  ...$,
-  props: {
-    noBodyGutters: { type: Boolean },
-    bodyLoading: {}
-  },
-  setup(a) {
-    const p = m(), n = a, i = v(() => typeof n.bodyLoading == "string" ? { variant: n.bodyLoading, ...B.LOADING } : n.bodyLoading), r = (e) => {
-      e.removeAttribute("title"), e.clientWidth < e.scrollWidth && e.setAttribute("title", e.innerText);
-    }, _ = {
-      mounted: r,
-      updated: r
-    };
-    return (e, w) => (l(), o("div", {
-      class: f(["pl-layout-component pl-block-page", { noBodyGutters: a.noBodyGutters }])
-    }, [
-      d(p).title ? (l(), o("div", T, [
-        t("div", E, [
-          c((l(), o("span", null, [
-            s(e.$slots, "title")
-          ])), [
-            [_]
-          ]),
-          s(e.$slots, "after-title")
-        ]),
-        t("div", S, [
-          t("div", {
-            id: d(P),
-            class: "pl-block-page__title__append__teleport"
-          }, null, 8, A),
-          s(e.$slots, "append")
-        ])
-      ])) : (l(), o("div", G)),
-      t("div", N, [
-        c(y(d(L), g(b(i.value)), null, 16), [
-          [h, i.value]
-        ]),
-        t("div", {
-          style: k({ display: i.value ? "none" : "contents" })
-        }, [
-          s(e.$slots, "default")
-        ], 4)
-      ])
-    ], 2));
-  }
-});
+import o from "./PlBlockPage.vue2.js";
+import s from "./PlBlockPage.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const e = {
+  $style: s
+}, m = /* @__PURE__ */ t(o, [["__cssModules", e]]);
 export {
-  R as default
+  m as default
 };
 //# sourceMappingURL=PlBlockPage.vue.js.map

package/dist/layout/PlBlockPage/PlBlockPage.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBlockPage.vue.js","sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Root block page component */\nexport default {\n  name: 'PlBlockPage',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, useSlots } from 'vue';\nimport { PlBlockPageTitleTeleportId } from './PlBlockPageTitleTeleportId';\nimport './pl-block-page.scss';\nimport { PL_PLACEHOLDER_TEXTS, PlPlaceholder, type PlPlaceholderProps } from '../PlPlaceholder';\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n  /**\n   * If `true` body gutters are removed\n   */\n  noBodyGutters?: boolean;\n  /**\n   * If defined, a loading overlay is displayed on the page body (over all default slot content)\n   */\n  bodyLoading?: PlPlaceholderProps['variant'] | PlPlaceholderProps;\n}>();\n\nconst loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {\n  if (typeof props.bodyLoading === 'string') {\n    return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };\n  }\n  return props.bodyLoading;\n});\n\nconst setTitleIfNeeded = (el: HTMLElement) => {\n  el.removeAttribute('title');\n  if (el.clientWidth < el.scrollWidth) {\n    el.setAttribute('title', el.innerText);\n  }\n};\n\nconst vTextOverflownTitle = {\n  mounted: setTitleIfNeeded,\n  updated: setTitleIfNeeded,\n};\n</script>\n\n<template>\n  <div class=\"pl-layout-component pl-block-page\" :class=\"{ noBodyGutters }\">\n    <div v-if=\"slots.title\" class=\"pl-block-page__title\">\n      <div class=\"pl-block-page__title__default\">\n        <span v-text-overflown-title><slot name=\"title\" /></span>\n        <slot name=\"after-title\" />\n      </div>\n      <div class=\"pl-block-page__title__append\">\n        <div\n          :id=\"PlBlockPageTitleTeleportId\"\n          class=\"pl-block-page__title__append__teleport\"\n        />\n        <slot name=\"append\" />\n      </div>\n    </div>\n    <div v-else />\n    <div class=\"pl-block-page__body\">\n      <PlPlaceholder v-show=\"loadingPlaceholder\" v-bind=\"loadingPlaceholder\" />\n      <div :style=\"{ display: loadingPlaceholder ? 'none' : 'contents' }\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["__default__","slots","useSlots","props","__props","loadingPlaceholder","computed","PL_PLACEHOLDER_TEXTS","setTitleIfNeeded","el","vTextOverflownTitle","_createElementBlock","_normalizeClass","_unref","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_hoisted_3","PlBlockPageTitleTeleportId","_hoisted_5","_hoisted_6","_withDirectives","_createVNode"],"mappings":";;;;;;;;oKAEAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;AASA,UAAMC,IAAQC,EAAA,GAERC,IAAQC,GAWRC,IAAqBC,EAAyC,MAC9D,OAAOH,EAAM,eAAgB,WACxB,EAAE,SAASA,EAAM,aAAa,GAAGI,EAAqB,QAAA,IAExDJ,EAAM,WACd,GAEKK,IAAmB,CAACC,MAAoB;AAC5C,MAAAA,EAAG,gBAAgB,OAAO,GACtBA,EAAG,cAAcA,EAAG,eACtBA,EAAG,aAAa,SAASA,EAAG,SAAS;AAAA,IAEzC,GAEMC,IAAsB;AAAA,MAC1B,SAASF;AAAA,MACT,SAASA;AAAA,IAAA;2BAKTG,EAqBM,OAAA;AAAA,MArBD,OAAKC,EAAA,CAAC,qCAAmC,EAAA,eAAWR,EAAA,eAAa,CAAA;AAAA,IAAA;MACzDS,EAAAZ,CAAA,EAAM,SAAjBa,KAAAH,EAYM,OAZNI,GAYM;AAAA,QAXJC,EAGM,OAHNC,GAGM;AAAA,kBAFJN,EAAyD,QAAA,MAAA;AAAA,YAA5BO,EAAqBC,EAAA,QAAA,OAAA;AAAA,UAAA;;;UAClDD,EAA2BC,EAAA,QAAA,aAAA;AAAA,QAAA;QAE7BH,EAMM,OANNI,GAMM;AAAA,UALJJ,EAGE,OAAA;AAAA,YAFC,IAAIH,EAAAQ,CAAA;AAAA,YACL,OAAM;AAAA,UAAA;UAERH,EAAsBC,EAAA,QAAA,QAAA;AAAA,QAAA;kBAG1BR,EAAc,OAAAW,CAAA;AAAA,MACdN,EAKM,OALNO,GAKM;AAAA,QAJJC,EAAAC,EAAyEZ,UAAtBR,EAAA,KAAkB,CAAA,GAAA,MAAA,EAAA,GAAA;AAAA,cAA9CA,EAAA,KAAkB;AAAA,QAAA;QACzCW,EAEM,OAAA;AAAA,UAFA,oBAAkBX,EAAA,QAAkB,SAAA,YAAA;AAAA,QAAA;UACxCa,EAAQC,EAAA,QAAA,SAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"PlBlockPage.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/layout/PlBlockPage/PlBlockPage.vue2.js

@@ -1,5 +1,90 @@
-import f from "./PlBlockPage.vue.js";
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".pl-block-page{--pl-block-page-body-padding: var(--main-spacing, 24px);background-color:var(--bg-elevated-01);height:100%;max-width:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}.pl-block-page.noBodyGutters{--pl-block-page-body-padding: 0}.pl-block-page__title{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}.pl-block-page__title__default{flex:1;min-width:0;max-width:100%;margin:0;color:var(--txt-01);display:flex;flex-direction:row;align-items:center;gap:12px}.pl-block-page__title__default>span{font-size:28px;font-weight:500;line-height:36px;letter-spacing:-.56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;display:inline-block}.pl-block-page__title__append{margin-left:auto;display:flex;align-items:center;gap:2px}.pl-block-page__title__append__teleport{display:contents}.pl-block-page__body{max-width:100%;display:flex;flex-direction:column;gap:var(--gap-v);padding:var(--pl-block-page-body-padding);--thumb-color: var(--ic-02);overflow-y:auto;overflow-x:auto}.pl-block-page__body::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-block-page__body::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-block-page__body::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}")),document.head.appendChild(e)}}catch(l){console.error("vite-plugin-css-injected-by-js",l)}})();
+import { defineComponent as g, mergeModels as b, useSlots as h, useModel as k, useCssModule as P, computed as T, useTemplateRef as B, watchEffect as L, createElementBlock as o, openBlock as s, normalizeClass as i, createElementVNode as t, unref as l, createCommentVNode as E, renderSlot as r, toDisplayString as M, withDirectives as v, createVNode as y, vModelText as S, normalizeProps as C, guardReactiveProps as z, vShow as D, normalizeStyle as G } from "vue";
+import { PlBlockPageTitleTeleportTarget as N } from "./PlBlockPageTitleTeleportTarget.js";
+
+import V from "../../components/PlIcon24/PlIcon24.vue.js";
+import { PL_PLACEHOLDER_TEXTS as $ } from "../PlPlaceholder/index.js";
+import w from "../PlPlaceholder/PlPlaceholder.vue.js";
+const I = { class: "pl-block-page__title" }, R = { class: "pl-block-page__title__default" }, A = { key: 0 }, O = { key: 1 }, H = { class: "pl-block-page__title__append" }, U = ["placeholder"], X = { key: 1 }, j = { class: "pl-block-page__body" }, q = {
+  name: "PlBlockPage"
+}, Z = /* @__PURE__ */ g({
+  ...q,
+  props: /* @__PURE__ */ b({
+    title: {},
+    subtitlePlaceholder: {},
+    noBodyGutters: { type: Boolean },
+    bodyLoading: {}
+  }, {
+    subtitle: {},
+    subtitleModifiers: {}
+  }),
+  emits: ["update:subtitle"],
+  setup(p) {
+    const u = h(), e = p, n = k(p, "subtitle"), d = P(), c = T(() => typeof e.bodyLoading == "string" ? { variant: e.bodyLoading, ...$.LOADING } : e.bodyLoading), _ = B("teleportTarget");
+    return L(() => {
+      N.value = _.value;
+    }), (a, m) => (s(), o("div", {
+      class: i(["pl-layout-component pl-block-page", { noBodyGutters: e.noBodyGutters }])
+    }, [
+      l(u).title || e.title ? (s(), o("div", {
+        key: 0,
+        class: i(l(d).header)
+      }, [
+        t("div", I, [
+          t("div", R, [
+            l(u).title ? (s(), o("span", A, [
+              r(a.$slots, "title")
+            ])) : (s(), o("span", O, M(e.title), 1)),
+            r(a.$slots, "after-title")
+          ]),
+          t("div", H, [
+            t("div", {
+              ref_key: "teleportTarget",
+              ref: _,
+              class: "pl-block-page__title__append__teleport"
+            }, null, 512),
+            r(a.$slots, "append")
+          ])
+        ]),
+        n.value !== void 0 ? (s(), o("div", {
+          key: 0,
+          class: i(l(d).subtitle)
+        }, [
+          v(t("input", {
+            "onUpdate:modelValue": m[0] || (m[0] = (f) => n.value = f),
+            placeholder: e.subtitlePlaceholder
+          }, null, 8, U), [
+            [
+              S,
+              n.value,
+              void 0,
+              {
+                lazy: !0,
+                trim: !0
+              }
+            ]
+          ]),
+          y(l(V), {
+            class: i(l(d).editIcon),
+            name: "edit",
+            color: "var(--ic-02)"
+          }, null, 8, ["class"])
+        ], 2)) : E("", !0)
+      ], 2)) : (s(), o("div", X)),
+      t("div", j, [
+        v(y(l(w), C(z(c.value)), null, 16), [
+          [D, c.value]
+        ]),
+        t("div", {
+          style: G({ display: c.value ? "none" : "contents" })
+        }, [
+          r(a.$slots, "default")
+        ], 4)
+      ])
+    ], 2));
+  }
+});
 export {
-  f as default
+  Z as default
 };
 //# sourceMappingURL=PlBlockPage.vue2.js.map

package/dist/layout/PlBlockPage/PlBlockPage.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBlockPage.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"PlBlockPage.vue2.js","sources":["../../../src/layout/PlBlockPage/PlBlockPage.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Root block page component */\nexport default {\n  name: 'PlBlockPage',\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from 'vue';\nimport { PlBlockPageTitleTeleportTarget } from './PlBlockPageTitleTeleportTarget';\nimport './pl-block-page.scss';\nimport { PlIcon24 } from '../../components/PlIcon24';\nimport { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from '../PlPlaceholder';\n\nconst slots = useSlots();\n\nconst props = defineProps<{\n  /**\n   * Page title (won't be displayed if `title` slot is also provided)\n   */\n  title?: string;\n  /**\n   * Text to display when subtitle is empty\n   */\n  subtitlePlaceholder?: string;\n  /**\n   * If `true` body gutters are removed\n   */\n  noBodyGutters?: boolean;\n  /**\n   * If defined, a loading overlay is displayed on the page body (over all default slot content)\n   */\n  bodyLoading?: PlPlaceholderProps['variant'] | PlPlaceholderProps;\n}>();\n\n/** Page subtitle (editable) */\nconst subtitle = defineModel<string>('subtitle');\n\nconst styles = useCssModule();\n\nconst loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {\n  if (typeof props.bodyLoading === 'string') {\n    return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };\n  }\n  return props.bodyLoading;\n});\n\nconst teleportTarget = useTemplateRef('teleportTarget');\n\nwatchEffect(() => {\n  PlBlockPageTitleTeleportTarget.value = teleportTarget.value;\n});\n</script>\n\n<template>\n  <div class=\"pl-layout-component pl-block-page\" :class=\"{ noBodyGutters: props.noBodyGutters }\">\n    <div v-if=\"slots.title || props.title\" :class=\"styles.header\">\n      <div class=\"pl-block-page__title\">\n        <div class=\"pl-block-page__title__default\">\n          <span v-if=\"slots.title\"><slot name=\"title\" /></span>\n          <span v-else>{{ props.title }}</span>\n          <slot name=\"after-title\" />\n        </div>\n        <div class=\"pl-block-page__title__append\">\n          <div\n            ref=\"teleportTarget\"\n            class=\"pl-block-page__title__append__teleport\"\n          />\n          <slot name=\"append\" />\n        </div>\n      </div>\n      <div v-if=\"subtitle !== undefined\" :class=\"styles.subtitle\">\n        <input\n          v-model.lazy.trim=\"subtitle\"\n          :placeholder=\"props.subtitlePlaceholder\"\n        />\n        <PlIcon24 :class=\"styles.editIcon\" name=\"edit\" color=\"var(--ic-02)\" />\n      </div>\n    </div>\n    <div v-else />\n    <div class=\"pl-block-page__body\">\n      <PlPlaceholder v-show=\"loadingPlaceholder\" v-bind=\"loadingPlaceholder\" />\n      <div :style=\"{ display: loadingPlaceholder ? 'none' : 'contents' }\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.header {\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  margin-block-end: -8px;\n  gap: 2px;\n  overflow: hidden;\n}\n\n.subtitle {\n  display: flex;\n  padding-inline-end: 28px;\n\n  input {\n    anchor-name: --pl-block-page-subtitle;\n    field-sizing: content;\n    padding: 0;\n    border: none;\n    outline: none;\n    caret-color: var(--border-color-focus);\n    color: var(--txt-01);\n    font-family: Manrope;\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 28px;\n    letter-spacing: -0.2px;\n    margin-block-end: -4px;\n    max-inline-size: 100%;\n    text-overflow: ellipsis;\n\n    &::placeholder {\n      color: var(--txt-03);\n    }\n  }\n\n  .editIcon {\n    visibility: hidden;\n    position: fixed;\n    position-anchor: --pl-block-page-subtitle;\n    position-area: center inline-end;\n    inset-inline-start: 4px;\n  }\n  &:hover, &:focus-within {\n    .editIcon {\n      visibility: visible;\n    }\n  }\n}\n</style>\n"],"names":["__default__","slots","useSlots","props","__props","subtitle","_useModel","styles","useCssModule","loadingPlaceholder","computed","PL_PLACEHOLDER_TEXTS","teleportTarget","useTemplateRef","watchEffect","PlBlockPageTitleTeleportTarget","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_hoisted_2","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_toDisplayString","_hoisted_5","$event","_createVNode","PlIcon24","_hoisted_7","_hoisted_8","_withDirectives"],"mappings":";;;;;;uPAEAA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;AAUA,UAAMC,IAAQC,EAAA,GAERC,IAAQC,GAoBRC,IAAWC,KAAoB,UAAU,GAEzCC,IAASC,EAAA,GAETC,IAAqBC,EAAyC,MAC9D,OAAOP,EAAM,eAAgB,WACxB,EAAE,SAASA,EAAM,aAAa,GAAGQ,EAAqB,QAAA,IAExDR,EAAM,WACd,GAEKS,IAAiBC,EAAe,gBAAgB;AAEtD,WAAAC,EAAY,MAAM;AAChB,MAAAC,EAA+B,QAAQH,EAAe;AAAA,IACxD,CAAC,mBAICI,EA+BM,OAAA;AAAA,MA/BD,OAAKC,EAAA,CAAC,qCAAmC,EAAA,eAA0Bd,EAAM,eAAa,CAAA;AAAA,IAAA;MAC9Ee,EAAAjB,CAAA,EAAM,SAASE,EAAM,cAAhCa,EAsBM,OAAA;AAAA;QAtBkC,OAAKC,EAAEC,EAAAX,CAAA,EAAO,MAAM;AAAA,MAAA;QAC1DY,EAaM,OAbNC,GAaM;AAAA,UAZJD,EAIM,OAJNE,GAIM;AAAA,YAHQH,EAAAjB,CAAA,EAAM,cAAlBe,EAAqD,QAAAM,GAAA;AAAA,cAA5BC,EAAqBC,EAAA,QAAA,OAAA;AAAA,YAAA,YAC9CR,EAAqC,QAAAS,GAAAC,EAArBvB,EAAM,KAAK,GAAA,CAAA;AAAA,YAC3BoB,EAA2BC,EAAA,QAAA,aAAA;AAAA,UAAA;UAE7BL,EAMM,OANNQ,GAMM;AAAA,YALJR,EAGE,OAAA;AAAA,uBAFI;AAAA,cAAJ,KAAIP;AAAA,cACJ,OAAM;AAAA,YAAA;YAERW,EAAsBC,EAAA,QAAA,QAAA;AAAA,UAAA;;QAGfnB,EAAA,UAAa,eAAxBW,EAMM,OAAA;AAAA;UAN8B,OAAKC,EAAEC,EAAAX,CAAA,EAAO,QAAQ;AAAA,QAAA;YACxDY,EAGE,SAAA;AAAA,0DAFmBd,EAAQ,QAAAuB;AAAA,YAC1B,aAAazB,EAAM;AAAA,UAAA;;;cADDE,EAAA;AAAA;;gBAAX,MAAR;AAAA,gBAAa,MAAb;AAAA,cAAA;AAAA;;UAGFwB,EAAsEX,EAAAY,CAAA,GAAA;AAAA,YAA3D,OAAKb,EAAEC,EAAAX,CAAA,EAAO,QAAQ;AAAA,YAAE,MAAK;AAAA,YAAO,OAAM;AAAA,UAAA;;qBAGzDS,EAAc,OAAAe,CAAA;AAAA,MACdZ,EAKM,OALNa,GAKM;AAAA,QAJJC,EAAAJ,EAAyEX,UAAtBT,EAAA,KAAkB,CAAA,GAAA,MAAA,EAAA,GAAA;AAAA,cAA9CA,EAAA,KAAkB;AAAA,QAAA;QACzCU,EAEM,OAAA;AAAA,UAFA,oBAAkBV,EAAA,QAAkB,SAAA,YAAA;AAAA,QAAA;UACxCc,EAAQC,EAAA,QAAA,SAAA;AAAA,QAAA;;;;;"}

package/dist/layout/PlBlockPage/PlBlockPage.vue3.js

@@ -0,0 +1,13 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._header_y99r6_2{display:flex;flex-direction:column;padding:12px 24px;margin-block-end:-8px;gap:2px;overflow:hidden}._subtitle_y99r6_11{display:flex;padding-inline-end:28px}._subtitle_y99r6_11 input{anchor-name:--pl-block-page-subtitle;field-sizing:content;padding:0;border:none;outline:none;caret-color:var(--border-color-focus);color:var(--txt-01);font-family:Manrope;font-size:20px;font-weight:500;line-height:28px;letter-spacing:-.2px;margin-block-end:-4px;max-inline-size:100%;text-overflow:ellipsis}._subtitle_y99r6_11 input::placeholder{color:var(--txt-03)}._subtitle_y99r6_11 ._editIcon_y99r6_37{visibility:hidden;position:fixed;position-anchor:--pl-block-page-subtitle;position-area:center inline-end;inset-inline-start:4px}._subtitle_y99r6_11:hover ._editIcon_y99r6_37,._subtitle_y99r6_11:focus-within ._editIcon_y99r6_37{visibility:visible}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+const t = "_header_y99r6_2", e = "_subtitle_y99r6_11", s = "_editIcon_y99r6_37", _ = {
+  header: t,
+  subtitle: e,
+  editIcon: s
+};
+export {
+  _ as default,
+  s as editIcon,
+  t as header,
+  e as subtitle
+};
+//# sourceMappingURL=PlBlockPage.vue3.js.map

package/dist/layout/PlBlockPage/PlBlockPage.vue3.js.map

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

package/dist/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.d.ts

@@ -0,0 +1,2 @@
+export declare const PlBlockPageTitleTeleportTarget: import('vue').Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
+//# sourceMappingURL=PlBlockPageTitleTeleportTarget.d.ts.map

package/dist/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBlockPageTitleTeleportTarget.d.ts","sourceRoot":"","sources":["../../../src/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,8BAA8B,mFAA4B,CAAC"}

package/dist/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.js

@@ -0,0 +1,6 @@
+import { ref as e } from "vue";
+const r = e();
+export {
+  r as PlBlockPageTitleTeleportTarget
+};
+//# sourceMappingURL=PlBlockPageTitleTeleportTarget.js.map

package/dist/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlBlockPageTitleTeleportTarget.js","sources":["../../../src/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.ts"],"sourcesContent":["import { ref } from 'vue';\n\nexport const PlBlockPageTitleTeleportTarget = ref<HTMLElement | null>();\n"],"names":["PlBlockPageTitleTeleportTarget","ref"],"mappings":";AAEO,MAAMA,IAAiCC,EAAA;"}

package/dist/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.d.ts

@@ -1,2 +1,2 @@
-export declare function usePlBlockPageTitleTeleportTarget(componentName: string): import('vue').Ref<string | undefined, string | undefined>;
+export declare function usePlBlockPageTitleTeleportTarget(componentName: string): import('vue').Ref<HTMLElement | null | undefined, HTMLElement | null | undefined>;
 //# sourceMappingURL=usePlBlockPageTitleTeleportTarget.d.ts.map

package/dist/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePlBlockPageTitleTeleportTarget.d.ts","sourceRoot":"","sources":["../../../src/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.ts"],"names":[],"mappings":"AAKA,wBAAgB,iCAAiC,CAAC,aAAa,EAAE,MAAM,6DAmBtE"}
+{"version":3,"file":"usePlBlockPageTitleTeleportTarget.d.ts","sourceRoot":"","sources":["../../../src/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.ts"],"names":[],"mappings":"AAGA,wBAAgB,iCAAiC,CAAC,aAAa,EAAE,MAAM,qFAgBtE"}

package/dist/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.js

@@ -1,18 +1,17 @@
-import { ref as n, onMounted as c, onUpdated as l, nextTick as i } from "vue";
-import { PlBlockPageTitleTeleportId as s } from "./PlBlockPageTitleTeleportId.js";
-const t = "#" + s;
-function p(r) {
-  const e = n(), o = () => {
-    i(() => {
-      e.value = document.querySelector(t) ? t : void 0, e.value || console.error(
-        `[${r}] Error: 'PlBlockPage' component is missing. 
-          Ensure that you placed the components inside <PlBlockPage />.`
+import { onMounted as r, onUpdated as i, nextTick as l } from "vue";
+import { PlBlockPageTitleTeleportTarget as o } from "./PlBlockPageTitleTeleportTarget.js";
+function a(t) {
+  const e = () => {
+    l(() => {
+      o.value || console.error(
+        `[${t}] Error: Either 'PlBlockPage' component is missing or it has no title. 
+          Ensure that you placed the components inside <PlBlockPage /> with a title.`
       );
     });
   };
-  return c(o), l(o), e;
+  return r(e), i(e), o;
 }
 export {
-  p as usePlBlockPageTitleTeleportTarget
+  a as usePlBlockPageTitleTeleportTarget
 };
 //# sourceMappingURL=usePlBlockPageTitleTeleportTarget.js.map

package/dist/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePlBlockPageTitleTeleportTarget.js","sources":["../../../src/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.ts"],"sourcesContent":["import { nextTick, onMounted, onUpdated, ref } from 'vue';\nimport { PlBlockPageTitleTeleportId } from './PlBlockPageTitleTeleportId';\n\nconst selector = '#' + PlBlockPageTitleTeleportId;\n\nexport function usePlBlockPageTitleTeleportTarget(componentName: string) {\n  const target = ref<string>();\n\n  const check = () => {\n    nextTick(() => {\n      target.value = document.querySelector(selector) ? selector : undefined;\n      if (!target.value) {\n        console.error(\n          `[${componentName}] Error: 'PlBlockPage' component is missing. \n          Ensure that you placed the components inside <PlBlockPage />.`,\n        );\n      }\n    });\n  };\n\n  onMounted(check);\n  onUpdated(check);\n\n  return target;\n}\n"],"names":["selector","PlBlockPageTitleTeleportId","usePlBlockPageTitleTeleportTarget","componentName","target","ref","check","nextTick","onMounted","onUpdated"],"mappings":";;AAGA,MAAMA,IAAW,MAAMC;AAEhB,SAASC,EAAkCC,GAAuB;AACvE,QAAMC,IAASC,EAAA,GAETC,IAAQ,MAAM;AAClB,IAAAC,EAAS,MAAM;AACb,MAAAH,EAAO,QAAQ,SAAS,cAAcJ,CAAQ,IAAIA,IAAW,QACxDI,EAAO,SACV,QAAQ;AAAA,QACN,IAAID,CAAa;AAAA;AAAA,MAAA;AAAA,IAIvB,CAAC;AAAA,EACH;AAEA,SAAAK,EAAUF,CAAK,GACfG,EAAUH,CAAK,GAERF;AACT;"}
+{"version":3,"file":"usePlBlockPageTitleTeleportTarget.js","sources":["../../../src/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.ts"],"sourcesContent":["import { nextTick, onMounted, onUpdated } from 'vue';\nimport { PlBlockPageTitleTeleportTarget } from './PlBlockPageTitleTeleportTarget';\n\nexport function usePlBlockPageTitleTeleportTarget(componentName: string) {\n  const check = () => {\n    nextTick(() => {\n      if (!PlBlockPageTitleTeleportTarget.value) {\n        console.error(\n          `[${componentName}] Error: Either 'PlBlockPage' component is missing or it has no title. \n          Ensure that you placed the components inside <PlBlockPage /> with a title.`,\n        );\n      }\n    });\n  };\n\n  onMounted(check);\n  onUpdated(check);\n\n  return PlBlockPageTitleTeleportTarget;\n}\n"],"names":["usePlBlockPageTitleTeleportTarget","componentName","check","nextTick","PlBlockPageTitleTeleportTarget","onMounted","onUpdated"],"mappings":";;AAGO,SAASA,EAAkCC,GAAuB;AACvE,QAAMC,IAAQ,MAAM;AAClB,IAAAC,EAAS,MAAM;AACb,MAAKC,EAA+B,SAClC,QAAQ;AAAA,QACN,IAAIH,CAAa;AAAA;AAAA,MAAA;AAAA,IAIvB,CAAC;AAAA,EACH;AAEA,SAAAI,EAAUH,CAAK,GACfI,EAAUJ,CAAK,GAERE;AACT;"}

package/dist/utils/DoubleContour.vue3.js

@@ -1,5 +1,5 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".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(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import o from "./DoubleContour.vue2.js";
+import o from "./DoubleContour.vue.js";
 
 export {
   o as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -32,8 +32,8 @@
     "d3-axis": "^3.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "canonicalize": "~2.1.0",
-    "@platforma-sdk/model": "1.50.0",
-    "@milaboratories/helpers": "1.13.0"
+    "@milaboratories/helpers": "1.13.0",
+    "@platforma-sdk/model": "1.51.2"
   },
   "devDependencies": {
     "jsdom": "^25.0.1",
@@ -43,10 +43,10 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "typescript": "~5.6.3",
-    "@milaboratories/eslint-config": "1.0.5",
-    "@milaboratories/ts-configs": "1.2.0",
     "@milaboratories/build-configs": "1.2.1",
-    "@milaboratories/ts-builder": "1.2.1"
+    "@milaboratories/eslint-config": "1.0.5",
+    "@milaboratories/ts-builder": "1.2.1",
+    "@milaboratories/ts-configs": "1.2.0"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -6,14 +6,23 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue';
-import { PlBlockPageTitleTeleportId } from './PlBlockPageTitleTeleportId';
+import { computed, useCssModule, useSlots, useTemplateRef, watchEffect } from 'vue';
+import { PlBlockPageTitleTeleportTarget } from './PlBlockPageTitleTeleportTarget';
 import './pl-block-page.scss';
-import { PL_PLACEHOLDER_TEXTS, PlPlaceholder, type PlPlaceholderProps } from '../PlPlaceholder';
+import { PlIcon24 } from '../../components/PlIcon24';
+import { type PlPlaceholderProps, PL_PLACEHOLDER_TEXTS, PlPlaceholder } from '../PlPlaceholder';
 
 const slots = useSlots();
 
 const props = defineProps<{
+  /**
+   * Page title (won't be displayed if `title` slot is also provided)
+   */
+  title?: string;
+  /**
+   * Text to display when subtitle is empty
+   */
+  subtitlePlaceholder?: string;
   /**
    * If `true` body gutters are removed
    */
@@ -24,6 +33,11 @@ const props = defineProps<{
   bodyLoading?: PlPlaceholderProps['variant'] | PlPlaceholderProps;
 }>();
 
+/** Page subtitle (editable) */
+const subtitle = defineModel<string>('subtitle');
+
+const styles = useCssModule();
+
 const loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {
   if (typeof props.bodyLoading === 'string') {
     return { variant: props.bodyLoading, ...PL_PLACEHOLDER_TEXTS.LOADING };
@@ -31,32 +45,36 @@ const loadingPlaceholder = computed<PlPlaceholderProps | undefined>(() => {
   return props.bodyLoading;
 });
 
-const setTitleIfNeeded = (el: HTMLElement) => {
-  el.removeAttribute('title');
-  if (el.clientWidth < el.scrollWidth) {
-    el.setAttribute('title', el.innerText);
-  }
-};
+const teleportTarget = useTemplateRef('teleportTarget');
 
-const vTextOverflownTitle = {
-  mounted: setTitleIfNeeded,
-  updated: setTitleIfNeeded,
-};
+watchEffect(() => {
+  PlBlockPageTitleTeleportTarget.value = teleportTarget.value;
+});
 </script>
 
 <template>
-  <div class="pl-layout-component pl-block-page" :class="{ noBodyGutters }">
-    <div v-if="slots.title" class="pl-block-page__title">
-      <div class="pl-block-page__title__default">
-        <span v-text-overflown-title><slot name="title" /></span>
-        <slot name="after-title" />
+  <div class="pl-layout-component pl-block-page" :class="{ noBodyGutters: props.noBodyGutters }">
+    <div v-if="slots.title || props.title" :class="styles.header">
+      <div class="pl-block-page__title">
+        <div class="pl-block-page__title__default">
+          <span v-if="slots.title"><slot name="title" /></span>
+          <span v-else>{{ props.title }}</span>
+          <slot name="after-title" />
+        </div>
+        <div class="pl-block-page__title__append">
+          <div
+            ref="teleportTarget"
+            class="pl-block-page__title__append__teleport"
+          />
+          <slot name="append" />
+        </div>
       </div>
-      <div class="pl-block-page__title__append">
-        <div
-          :id="PlBlockPageTitleTeleportId"
-          class="pl-block-page__title__append__teleport"
+      <div v-if="subtitle !== undefined" :class="styles.subtitle">
+        <input
+          v-model.lazy.trim="subtitle"
+          :placeholder="props.subtitlePlaceholder"
         />
-        <slot name="append" />
+        <PlIcon24 :class="styles.editIcon" name="edit" color="var(--ic-02)" />
       </div>
     </div>
     <div v-else />
@@ -68,3 +86,54 @@ const vTextOverflownTitle = {
     </div>
   </div>
 </template>
+
+<style module>
+.header {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 24px;
+  margin-block-end: -8px;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.subtitle {
+  display: flex;
+  padding-inline-end: 28px;
+
+  input {
+    anchor-name: --pl-block-page-subtitle;
+    field-sizing: content;
+    padding: 0;
+    border: none;
+    outline: none;
+    caret-color: var(--border-color-focus);
+    color: var(--txt-01);
+    font-family: Manrope;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    letter-spacing: -0.2px;
+    margin-block-end: -4px;
+    max-inline-size: 100%;
+    text-overflow: ellipsis;
+
+    &::placeholder {
+      color: var(--txt-03);
+    }
+  }
+
+  .editIcon {
+    visibility: hidden;
+    position: fixed;
+    position-anchor: --pl-block-page-subtitle;
+    position-area: center inline-end;
+    inset-inline-start: 4px;
+  }
+  &:hover, &:focus-within {
+    .editIcon {
+      visibility: visible;
+    }
+  }
+}
+</style>

package/src/layout/PlBlockPage/PlBlockPageTitleTeleportTarget.ts

@@ -0,0 +1,3 @@
+import { ref } from 'vue';
+
+export const PlBlockPageTitleTeleportTarget = ref<HTMLElement | null>();

package/src/layout/PlBlockPage/pl-block-page.scss

@@ -1,9 +1,8 @@
-@use "../../assets/mixins.scss" as *;
+@use '../../assets/mixins.scss' as *;
 
 .pl-block-page {
   --pl-block-page-body-padding: var(--main-spacing, 24px);
 
-  padding: var(--container-spacing);
   background-color: var(--bg-elevated-01);
   height: 100%;
   max-width: 100%;
@@ -15,11 +14,9 @@
   }
 
   &__title {
-    height: 80px;
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 20px 24px;
     min-width: 0;
     max-width: 100%;
 
@@ -55,9 +52,7 @@
       gap: 2px;
 
       &__teleport {
-        display: flex;
-        align-items: center;
-        gap: 2px;
+        display: contents;
       }
     }
   }
@@ -70,4 +65,4 @@
     padding: var(--pl-block-page-body-padding);
     @include scrollbar(true, true);
   }
-}
+}

package/src/layout/PlBlockPage/usePlBlockPageTitleTeleportTarget.ts

@@ -1,18 +1,13 @@
-import { nextTick, onMounted, onUpdated, ref } from 'vue';
-import { PlBlockPageTitleTeleportId } from './PlBlockPageTitleTeleportId';
-
-const selector = '#' + PlBlockPageTitleTeleportId;
+import { nextTick, onMounted, onUpdated } from 'vue';
+import { PlBlockPageTitleTeleportTarget } from './PlBlockPageTitleTeleportTarget';
 
 export function usePlBlockPageTitleTeleportTarget(componentName: string) {
-  const target = ref<string>();
-
   const check = () => {
     nextTick(() => {
-      target.value = document.querySelector(selector) ? selector : undefined;
-      if (!target.value) {
+      if (!PlBlockPageTitleTeleportTarget.value) {
         console.error(
-          `[${componentName}] Error: 'PlBlockPage' component is missing. 
-          Ensure that you placed the components inside <PlBlockPage />.`,
+          `[${componentName}] Error: Either 'PlBlockPage' component is missing or it has no title. 
+          Ensure that you placed the components inside <PlBlockPage /> with a title.`,
         );
       }
     });
@@ -21,5 +16,5 @@ export function usePlBlockPageTitleTeleportTarget(componentName: string) {
   onMounted(check);
   onUpdated(check);
 
-  return target;
+  return PlBlockPageTitleTeleportTarget;
 }