odant-work 1.0.1 → 1.0.2

package/$server/$folder/handlers/pages/form/$handler/form.js

@@ -69,6 +69,104 @@ ODA({is: 'work-form',
                 from { opacity: 0; }
                 to { opacity: 1; }
             }
+            .form-tabs-bar {
+                @apply --horizontal;
+                @apply --no-flex;
+                align-items: center;
+                gap: 4px;
+                max-width: 62vw;
+                overflow-x: auto;
+                scrollbar-width: thin;
+            }
+            .form-tab {
+                @apply --horizontal;
+                @apply --no-flex;
+                align-items: center;
+                gap: 5px;
+                max-width: 220px;
+                height: 24px;
+                padding: 2px 8px;
+                font-size: 12px;
+                font-weight: 500;
+                border: 1px solid var(--border-color, #b8b7ae);
+                border-radius: 4px;
+                background: light-dark(#e9e8df, #262830);
+                color: light-dark(#333, #cbd5e1);
+                cursor: pointer;
+                user-select: none;
+                box-sizing: border-box;
+                transition: background 0.12s ease, border-color 0.12s ease;
+            }
+            .form-tab:hover:not(.active) {
+                background: light-dark(#f3f5fa, #30333d);
+            }
+            .form-tab.active {
+                background: light-dark(#ffffff, #1b1c20);
+                color: light-dark(#111, #f8fafc);
+                border-color: light-dark(#4f6bed, #60a5fa);
+                font-weight: 700;
+                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+            }
+            .form-tab .tab-label {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .form-tab .tab-close {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 15px;
+                height: 15px;
+                margin-left: 2px;
+                border-radius: 3px;
+                font-size: 13px;
+                line-height: 1;
+                opacity: 0.7;
+            }
+            .form-tab .tab-close:hover {
+                opacity: 1;
+                background: rgba(220, 38, 38, 0.16);
+                color: #dc2626;
+            }
+            .obj-footer-actions {
+                @apply --horizontal;
+                @apply --no-flex;
+                align-items: center;
+                gap: 6px;
+            }
+            button.obj-footer-btn {
+                @apply --horizontal;
+                @apply --no-flex;
+                @apply --content;
+                align-items: center;
+                justify-content: center;
+                gap: 5px;
+                min-height: 24px;
+                padding: 3px 12px;
+                font-size: 12.5px;
+                font-weight: 600;
+                border: 1px solid var(--border-color);
+                border-radius: 3px;
+                cursor: pointer;
+                user-select: none;
+                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+            }
+            button.obj-footer-btn.primary {
+                font-weight: 700;
+                min-width: 58px;
+            }
+            button.obj-footer-btn.icon-only {
+                padding: 3px 7px;
+            }
+            button.obj-footer-btn:hover:not(:disabled) {
+                border-color: var(--accent-color);
+                background: var(--accent-soft);
+            }
+            button.obj-footer-btn:disabled {
+                opacity: 0.45;
+                cursor: default;
+            }
         </style>
         <div ~show="!fullScreen" accent-invert slot="header" shadow horizontal flex style="padding: 2px; gap: 4px; align-items: center;">
             <div center flex horizontal style="overflow: hidden; flex-wrap: balance; gap: 4px; margin: 4px;">
@@ -110,7 +208,7 @@ ODA({is: 'work-form',
                         </div>
                         <div id="tools" raised no-flex horizontal style="min-height: 32px; align-items: center; gap: 8px; border-bottom: 1px solid;">
                             <item-node
-                                ~for="formViews"
+                                ~for="visibleFormViews"
                                 :$item="$for.item"
                                 :hide-label="view?.id !== $for.item.id"
                                 :icon-size
@@ -143,10 +241,23 @@ ODA({is: 'work-form',
             </div>
         </div>
         <div id="formFooter" slot="footer" ~show="hasFooter" header horizontal no-flex style="justify-items: space-between; align-items: center; padding: 4px 8px; min-height: 34px; gap: 6px; box-sizing: border-box; border-top: 1px solid var(--border-color);">
-            <item-tools id="mainTools" :$item :state-version="focusedStateVersion" filter="service" ::tool-items="mainToolItems" @tools-changed="onToolsListChanged('mainToolItems', $event)" show-labels></item-tools>
             <item-tools id="focusedTools" focused-only :target-item="focusedItem" :fallback-item="fallbackFocusedItem" :$item="focusedItem" :state-version="focusedStateVersion" filter="service" ::tool-items="focusedToolItems" @tools-changed="onToolsListChanged('focusedToolItems', $event)" show-labels></item-tools>
             <slot name="footer-left"></slot>
             <div flex></div>
+            <div class="obj-footer-actions" ~if="isObjectViewActive">
+                <button type="button" class="obj-footer-btn primary" ~if="view_control?.canSave" :disabled="view_control?.busy" @tap="onObjectOk()">OK</button>
+                <button type="button" class="obj-footer-btn icon-only" ~if="view_control?.canSave" :disabled="view_control?.busy" title="Сохранить" @tap="onObjectSave()">
+                    <oda-icon icon="icons:save" icon-size="16"></oda-icon>
+                </button>
+                <button type="button" class="obj-footer-btn" :disabled="view_control?.busy" @tap="onObjectClose()">Закрыть</button>
+            </div>
+            <div class="form-tabs-bar" ~if="formTabs?.length > 1">
+                <div class="form-tab" ~for="formTabs" ~class="{active: activeTabKey === $for.item.key}" :title="$for.item.label" @tap="activateTab($for.item)">
+                    <oda-icon ~if="$for.item.icon" :icon="$for.item.icon" icon-size="15"></oda-icon>
+                    <span class="tab-label">{{$for.item.label}}</span>
+                    <span class="tab-close" ~if="$for.item.closable" title="Закрыть вкладку" @tap.stop="closeTab($for.item, $event)">×</span>
+                </div>
+            </div>
             <div no-flex horizontal ~show="dialog" style="gap: 6px;">
                 <oda-button info-invert icon="icons:check" :icon-size @tap="ok" label="OK"></oda-button>
                 <oda-button icon="icons:close" :icon-size @tap="cancel" label="Отмена"></oda-button>
@@ -293,7 +404,10 @@ ODA({is: 'work-form',
         }
     },
     async ready() {
-        window.execute ??= ($item, nav) => {
+        window.execute = ($item, nav) => {
+            if ($item && $item.type !== '$handler') {
+                return this.openInForm($item, nav);
+            }
             const short = $item?.short || $item?.path || '';
             if (nav && short)
                 this._saveNav(short, nav);
@@ -302,11 +416,11 @@ ODA({is: 'work-form',
                 return;
             }
             let url = short + '/';
-            if ($item.type !== '$handler')
-                url += '~/handlers/pages/' + ($item.page || 'form') + '/'
+            if ($item?.type !== '$handler')
+                url += '~/handlers/pages/' + ($item?.page || 'form') + '/'
             url = encodeURI(url);
             window.open(url, url)
-        }
+        };
         // для закрытия вкладки браузера (form без explorer)
         if (window.parent !== window)
             window.close = () => {
@@ -379,6 +493,12 @@ ODA({is: 'work-form',
             return [];
         return this.loadFormViews($item, role);
     },
+    get visibleFormViews() {
+        const views = this.formViews;
+        if (!Array.isArray(views))
+            return [];
+        return views.filter(v => !(v?.DATA?.hiddenInViewList || v?.hiddenInViewList) || v?.id === this.view?.id);
+    },
     async loadFormViews($item, role) {
         try {
             const root = await $item.fetch('handlers', { path: '//form', role });
@@ -436,14 +556,23 @@ ODA({is: 'work-form',
                 this._savePath = ($class?.short || this.$item?.short) + '/' + this.localName + (this.$saveKey ? '[' + this.$saveKey + ']' : '');
 
                 await n.ensureRole?.();
+                if (this._switchingTab)
+                    return;
                 const nav = this._takeNav(n.short || n.path);
-                if (nav)
+                if (nav) {
+                    if (nav.view === 'objects' && nav.id)
+                        nav.view = 'object';
                     this._pendingNav = nav;
+                }
                 const view_name = nav?.view || this.host.default_view || n?.form || this.host.view_name;
                 this.view ||= await this.resolveView(view_name);
             }
         }
     },
+    formTabs: [],
+    activeTabKey: '',
+    _newObjSeq: 0,
+    _switchingTab: false,
     topMainToolItems: [],
     topFocusedToolItems: [],
     mainToolItems: [],
@@ -451,11 +580,16 @@ ODA({is: 'work-form',
     hasSlottedToolbar: false,
     focusedStateVersion: 0,
     fallbackFocusedItem: null,
+    get isObjectViewActive() {
+        return Boolean(this.view?.id === 'object' || this.view_control?.isObjectView);
+    },
     get hasToolbar() {
+        if (this.view?.allowTools === false || this.view?.DATA?.allowTools === false)
+            return false;
         return Boolean(this.topMainToolItems?.length || this.topFocusedToolItems?.length || this.hasSlottedToolbar);
     },
     get hasFooter() {
-        return Boolean(this.dialog || this.mainToolItems?.length || this.focusedToolItems?.length);
+        return Boolean(this.dialog || this.isObjectViewActive || this.focusedToolItems?.length || (this.formTabs?.length > 1));
     },
     _checkToolbarSlots() {
         const names = ['tool-left', 'tool-center', 'tool-right'];
@@ -471,7 +605,7 @@ ODA({is: 'work-form',
         this.async(() => this._wakeBars(), 5);
     },
     _wakeBars() {
-        for (const sel of ['#formToolbar', '#topMainTools', '#topFocusedTools', '#formFooter', '#mainTools', '#focusedTools']) {
+        for (const sel of ['#formToolbar', '#topMainTools', '#topFocusedTools', '#formFooter', '#focusedTools']) {
             const node = this.$?.(sel);
             if (node) {
                 if (node[R]?.states)
@@ -486,7 +620,7 @@ ODA({is: 'work-form',
         this.fallbackFocusedItem = vc.fallbackFocusedItem || null;
         this.focusedItem = vc.$focusedItem !== undefined ? vc.$focusedItem : (vc.focusedItem || null);
         this.focusedStateVersion++;
-        for (const [sel, isFocused] of [['#topMainTools', false], ['#topFocusedTools', true], ['#mainTools', false], ['#focusedTools', true]]) {
+        for (const [sel, isFocused] of [['#topMainTools', false], ['#topFocusedTools', true], ['#focusedTools', true]]) {
             const t = this.$?.(sel);
             if (t) {
                 t.$item = this.$item;
@@ -622,6 +756,224 @@ ODA({is: 'work-form',
         this.host.view_name = handler.id;
         this.view = handler;
     },
+    _computeTabKey($item, viewId, nav = null) {
+        const short = $item?.short || $item?.path || '';
+        if (viewId === 'object') {
+            const objKey = nav?.id ? `id:${nav.id}` : nav?.copyFrom ? `copy:${nav.copyFrom}` : `new:${nav?._seq || (++this._newObjSeq)}`;
+            if (nav && !nav.id && !nav.copyFrom && !nav._seq)
+                nav._seq = Number(objKey.slice(4));
+            return `${short}::object::${objKey}`;
+        }
+        return `${short}::${viewId || ''}`;
+    },
+    _computeTabLabel($item, viewHandler, nav = null) {
+        if (nav?.label)
+            return String(nav.label);
+        const rawLabel = $item?.DATA?.label || $item?.label || $item?.id || ($item?.short || '').split('/').pop() || 'Форма';
+        const code = ($item?.short || $item?.path || '').split('/').pop() || '';
+        const isAcc = $item?.type === '$account' || /^\d+(?:\.\d+)?$/.test(code);
+        const itemTitle = (isAcc && code && !String(rawLabel).startsWith(code + ' ') && String(rawLabel) !== code)
+            ? `${code} ${rawLabel}`
+            : String(rawLabel);
+        return itemTitle;
+    },
+    _ensureCurrentTab(viewHandler = this.view, nav = null) {
+        if (!this.$item || !viewHandler)
+            return null;
+        const viewId = viewHandler.id || '';
+        const list = Array.isArray(this.formTabs) ? [...this.formTabs] : [];
+        if (list.length === 0) {
+            const key = this._computeTabKey(this.$item, viewId, nav);
+            const rootTab = {
+                key,
+                $item: this.$item,
+                viewId,
+                view: viewHandler,
+                nav: nav || null,
+                label: this._computeTabLabel(this.$item, viewHandler, nav),
+                icon: viewHandler.DATA?.icon || viewHandler.icon || this.$item.icon || 'icons:dashboard',
+                closable: false,
+            };
+            this.formTabs = [rootTab];
+            this.activeTabKey = key;
+            return rootTab;
+        }
+        let cur = list.find(t => t.key === this.activeTabKey);
+        if (cur && cur.$item === this.$item && cur.viewId !== 'object' && viewId !== 'object') {
+            const newKey = this._computeTabKey(this.$item, viewId, nav);
+            if (cur.key !== newKey && !list.some(t => t.key === newKey)) {
+                cur.key = newKey;
+                this.activeTabKey = newKey;
+            }
+            cur.viewId = viewId;
+            cur.view = viewHandler;
+            cur.icon = viewHandler.DATA?.icon || viewHandler.icon || this.$item.icon || cur.icon;
+            this.formTabs = [...list];
+        }
+        return cur || list[0];
+    },
+    updateActiveTabLabel(newLabel) {
+        if (!newLabel || !Array.isArray(this.formTabs))
+            return;
+        const list = [...this.formTabs];
+        const cur = list.find(t => t.key === this.activeTabKey);
+        if (cur && cur.label !== newLabel) {
+            cur.label = String(newLabel);
+            this.formTabs = list;
+        }
+    },
+    async openInForm(targetItem, rawNav = null) {
+        if (!targetItem)
+            return;
+        await targetItem.ensureRole?.();
+        const nav = rawNav && typeof rawNav === 'object' ? { ...rawNav } : {};
+        if (nav.view === 'objects' && nav.id) {
+            nav.view = 'object';
+        }
+        // Зафиксируем текущую (начальную) вкладку перед открытием дочерней
+        this._ensureCurrentTab(this.view);
+
+        const prevItem = this.$item;
+        this._switchingTab = true;
+        this.$item = targetItem;
+        this._switchingTab = false;
+
+        const targetViewName = nav.view || targetItem.form || '';
+        const viewHandler = await this.resolveView(targetViewName);
+        if (!viewHandler) {
+            this._switchingTab = true;
+            this.$item = prevItem;
+            this._switchingTab = false;
+            return;
+        }
+        const viewId = viewHandler.id;
+        const key = this._computeTabKey(targetItem, viewId, nav);
+        const list = Array.isArray(this.formTabs) ? [...this.formTabs] : [];
+        let tab = list.find(t => t.key === key);
+        if (!tab) {
+            tab = {
+                key,
+                $item: targetItem,
+                viewId,
+                view: viewHandler,
+                nav,
+                label: this._computeTabLabel(targetItem, viewHandler, nav),
+                icon: viewHandler.DATA?.icon || viewHandler.icon || targetItem.icon || 'icons:dashboard',
+                closable: list.length > 0,
+            };
+            list.push(tab);
+            this.formTabs = list;
+        }
+        else {
+            tab.nav = nav;
+            tab.view = viewHandler;
+            if (nav.label)
+                tab.label = String(nav.label);
+            this.formTabs = list;
+        }
+        await this.activateTab(tab, nav);
+    },
+    async activateTab(tab, explicitNav = null) {
+        if (!tab || !tab.$item)
+            return;
+        this.activeTabKey = tab.key;
+        if (this.$item !== tab.$item) {
+            this._switchingTab = true;
+            this.$item = tab.$item;
+            this._switchingTab = false;
+        }
+        const viewHandler = tab.view || await this.resolveView(tab.viewId);
+        if (!viewHandler)
+            return;
+        tab.view = viewHandler;
+        if (explicitNav)
+            this._pendingNav = explicitNav;
+        if (this.view === viewHandler) {
+            await this._mountActiveView(viewHandler);
+        }
+        else {
+            this.view = viewHandler;
+        }
+    },
+    async closeTab(tab, e) {
+        e?.stopPropagation?.();
+        const list = Array.isArray(this.formTabs) ? [...this.formTabs] : [];
+        const idx = list.findIndex(t => t.key === tab?.key);
+        if (idx <= 0)
+            return;
+        const targetTab = list[idx];
+        const ctrl = targetTab.control || this.controls[targetTab.key];
+        if (ctrl && typeof ctrl.isDirty === 'function' && ctrl.isDirty()) {
+            if (typeof ctrl.confirmClose === 'function') {
+                const canClose = await ctrl.confirmClose();
+                if (!canClose)
+                    return;
+            }
+        }
+        if (ctrl && this.contains(ctrl))
+            this.removeChild(ctrl);
+        delete this.controls[targetTab.key];
+        list.splice(idx, 1);
+        this.formTabs = list;
+        if (this.activeTabKey === targetTab.key && list.length) {
+            const nextTab = list[Math.max(0, idx - 1)];
+            await this.activateTab(nextTab);
+        }
+    },
+    async closeActiveTab(reloadPrevious = false) {
+        const list = Array.isArray(this.formTabs) ? [...this.formTabs] : [];
+        const idx = list.findIndex(t => t.key === this.activeTabKey);
+        if (idx <= 0)
+            return;
+        const targetTab = list[idx];
+        const ctrl = targetTab.control || this.controls[targetTab.key];
+        if (ctrl && this.contains(ctrl))
+            this.removeChild(ctrl);
+        delete this.controls[targetTab.key];
+        list.splice(idx, 1);
+        this.formTabs = list;
+        const nextTab = list[Math.max(0, idx - 1)];
+        if (nextTab) {
+            await this.activateTab(nextTab);
+            if (reloadPrevious && nextTab.control && typeof nextTab.control.reload === 'function') {
+                await nextTab.control.reload();
+            }
+        }
+    },
+    async onObjectOk() {
+        const vc = this.view_control;
+        if (!vc)
+            return;
+        if (typeof vc.saveAndClose === 'function') {
+            await vc.saveAndClose();
+            return;
+        }
+        if (typeof vc.save === 'function') {
+            const ok = await vc.save();
+            if (!ok)
+                return;
+        }
+        await this.closeActiveTab(true);
+    },
+    async onObjectSave() {
+        const vc = this.view_control;
+        if (!vc)
+            return;
+        if (typeof vc.saveAndStay === 'function') {
+            await vc.saveAndStay();
+            return;
+        }
+        await vc.save?.();
+    },
+    async onObjectClose() {
+        const list = Array.isArray(this.formTabs) ? this.formTabs : [];
+        const cur = list.find(t => t.key === this.activeTabKey);
+        if (cur && cur.closable) {
+            await this.closeTab(cur);
+            return;
+        }
+        await this.close();
+    },
     ok(e) {
         alert('ok')
     },
@@ -629,72 +981,79 @@ ODA({is: 'work-form',
         alert('cancel')
     },
     controls: {},
-    view: {
-        async set(n) {
-            if (!n) return;
-            let el = this.controls[n.id];
+    async _mountActiveView(n) {
+        if (!n) return;
+        const nav = this._pendingNav || this._takeNav(this.$item?.short || this.$item?.path);
+        const curTab = this._ensureCurrentTab(n, nav);
+        const cacheKey = curTab?.key || `${this.$item?.short || ''}::${n.id}`;
+        let el = curTab?.control || this.controls[cacheKey];
+        for (let id in this.controls) {
+            let old = this.controls[id];
+            if (old !== el && this.contains(old))
+                this.removeChild(old);
+        }
+        if (!el) {
+            const ext = String(this.$item?.ext || '').toLowerCase();
+            const is = (n.id === 'file' && ext) ? `item-file-${ext}` : `item-${n.id}`;
+            await n.importView(is);
+            if (this.view !== n)
+                return;
+            if (!customElements.get(is)) {
+                console.error(`[work-form] вид '${n.id}' не зарегистрирован как <${is}>`);
+                return;
+            }
+            el = curTab?.control || this.controls[cacheKey];
+            if (!el) {
+                el = ODA.createComponent(is, { $item: this.$item, $context: this.$item, slot: 'main', $handler: n });
+                el.$form = this;
+                this.controls[cacheKey] = el;
+                this.controls[n.id] = el;
+                if (curTab)
+                    curTab.control = el;
+            }
             for (let id in this.controls) {
                 let old = this.controls[id];
                 if (old !== el && this.contains(old))
                     this.removeChild(old);
             }
-            if (!el) {
-                const ext = String(this.$item?.ext || '').toLowerCase();
-                const is = (n.id === 'file' && ext) ? `item-file-${ext}` : `item-${n.id}`;
-                await n.importView(is);
-                if (this.view !== n)
-                    return;
-                if (!customElements.get(is)) {
-                    // Вид не зарегистрирован под нужным тегом — создавать элемент
-                    // бессмысленно: он останется пустым (как на скриншоте).
-                    console.error(`[work-form] вид '${n.id}' не зарегистрирован как <${is}>`);
-                    return;
-                }
-                // Сеттер асинхронный: пока грузился модуль, параллельный вызов (роль, повторный $item)
-                // мог уже создать это представление — второй экземпляр не нужен.
-                el = this.controls[n.id];
-                if (!el) {
-                    el = ODA.createComponent(is, { $item: this.$item, $context: this.$item, slot: 'main', $handler: n });
-                    el.$form = this;
-                    this.controls[n.id] = el;
-                }
-                for (let id in this.controls) {
-                    let old = this.controls[id];
-                    if (old !== el && this.contains(old))
-                        this.removeChild(old);
-                }
-                if (!el.isConnected)
-                    this.appendChild(el);
-            }
-            else if (!el.isConnected)
+            if (!el.isConnected)
                 this.appendChild(el);
-            el.$form = this;
-            for (const oldSlotEl of [
-                ...this.querySelectorAll('[slot="tool-left"], [slot="tool-center"], [slot="tool-right"], [slot="footer-left"]'),
-                ...(this.$?.('#formToolbar')?.querySelectorAll?.('[data-toolbar-widget]') || []),
-            ]) {
-                if (oldSlotEl._ownerView && oldSlotEl._ownerView !== el)
-                    oldSlotEl.remove();
-            }
-            this.view_control = el;
+        }
+        else if (!el.isConnected)
+            this.appendChild(el);
+        el.$form = this;
+        if (curTab)
+            curTab.control = el;
+        for (const oldSlotEl of [
+            ...this.querySelectorAll('[slot="tool-left"], [slot="tool-center"], [slot="tool-right"], [slot="footer-left"]'),
+            ...(this.$?.('#formToolbar')?.querySelectorAll?.('[data-toolbar-widget]') || []),
+        ]) {
+            if (oldSlotEl._ownerView && oldSlotEl._ownerView !== el)
+                oldSlotEl.remove();
+        }
+        this.view_control = el;
+        if (n.allowTools !== false && n.DATA?.allowTools !== false)
             el.mountToolbarSlots?.(this);
-            this._checkToolbarSlots();
-            this.syncFromView(el);
-            this.host.view_name = n.id;
-            const nav = this._pendingNav || this._takeNav(this.$item?.short || this.$item?.path);
-            if (nav && typeof el?.applyNav === 'function') {
-                this._pendingNav = null;
-                Promise.resolve(el.applyNav(nav)).catch(err => console.error(err));
+        this._checkToolbarSlots();
+        this.syncFromView(el);
+        this.host.view_name = n.id;
+        if (nav && typeof el?.applyNav === 'function') {
+            this._pendingNav = null;
+            Promise.resolve(el.applyNav(nav)).catch(err => console.error(err));
+        }
+        try {
+            const exp = window.top?.explorer || window.parent?.explorer;
+            const cons = exp?.$?.('#consultant') || exp?.$?.('item-consultant');
+            if (cons) {
+                const ctx = this.buildConsultantContext();
+                cons.activeFormContext = ctx;
+                cons.activeFormSummary = ctx;
             }
-            try {
-                const exp = window.top?.explorer || window.parent?.explorer;
-                const cons = exp?.$?.('#consultant') || exp?.$?.('item-consultant');
-                if (cons) {
-                    const ctx = this.buildConsultantContext();
-                    cons.activeFormContext = ctx;
-                    cons.activeFormSummary = ctx;
-                }
-            } catch { /* ignore */ }
+        } catch { /* ignore */ }
+    },
+    view: {
+        async set(n) {
+            await this._mountActiveView(n);
         }
     },
     $listeners: {

package/$server/$folder/lib/tools/tools.js

@@ -159,6 +159,10 @@ export default {
         const vc = host?.view_control;
         const filter = this.filter;
         const focusedOnly = this.focusedOnly;
+        if (filter === 'button' && (host?.view?.allowTools === false || host?.view?.DATA?.allowTools === false)) {
+            this._setTools([]);
+            return;
+        }
         const rawTarget = this.targetItem;
         const isMulti = Array.isArray(rawTarget) && rawTarget.length > 1;
         const singleTarget = Array.isArray(rawTarget) ? (rawTarget[0] || null) : rawTarget;
@@ -276,7 +280,7 @@ export default {
             tool.$handler.execute(e);
             return;
         }
-        if (tool.type === '$handler' && target && window.execute) {
+        if (tool.type === '$handler' && target && (typeof host?.openInForm === 'function' || window.execute)) {
             const nav = typeof vc?.buildDrilldownNav === 'function'
                 ? vc.buildDrilldownNav(tool.id, target)
                 : {
@@ -287,7 +291,10 @@ export default {
                     packetsKey: vc?.packetsKey || '',
                     unit: vc?.unit || '',
                 };
-            window.execute(target, nav);
+            if (typeof host?.openInForm === 'function')
+                host.openInForm(target, nav);
+            else
+                window.execute(target, nav);
             return;
         }
         if (typeof tool.execute === 'function')