@toolbox-web/grid 1.27.2 → 1.28.0

package/lib/plugins/tooltip/TooltipPlugin.d.ts

@@ -0,0 +1,52 @@
+import { GridElement, PluginManifest, BaseGridPlugin } from '../../core/plugin/base-plugin';
+import { TooltipConfig } from './types';
+/**
+ * Tooltip Plugin for tbw-grid
+ *
+ * Shows styled popover tooltips when header or cell text overflows its
+ * container. Uses the Popover API with CSS anchor positioning for
+ * consistent themed appearance across light and dark modes.
+ *
+ * ## Installation
+ *
+ * ```ts
+ * import { TooltipPlugin } from '@toolbox-web/grid/plugins/tooltip';
+ * ```
+ *
+ * @example Default — auto-tooltip on overflow
+ * ```ts
+ * grid.gridConfig = {
+ *   plugins: [new TooltipPlugin()],
+ * };
+ * ```
+ *
+ * @example Header-only tooltips
+ * ```ts
+ * grid.gridConfig = {
+ *   plugins: [new TooltipPlugin({ cell: false })],
+ * };
+ * ```
+ *
+ * @example Per-column overrides
+ * ```ts
+ * grid.gridConfig = {
+ *   columns: [
+ *     { field: 'name', cellTooltip: (ctx) => `${ctx.row.first} ${ctx.row.last}` },
+ *     { field: 'actions', cellTooltip: false },
+ *     { field: 'revenue', headerTooltip: 'Total revenue in USD (before tax)' },
+ *   ],
+ *   plugins: [new TooltipPlugin()],
+ * };
+ * ```
+ *
+ * @category Plugins
+ */
+export declare class TooltipPlugin extends BaseGridPlugin<TooltipConfig> {
+    #private;
+    readonly name = "tooltip";
+    readonly styles: string;
+    static readonly manifest: PluginManifest<TooltipConfig>;
+    attach(grid: GridElement): void;
+    detach(): void;
+    afterRender(): void;
+}

package/lib/plugins/tooltip/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tooltip Plugin Entry Point
+ * Re-exports plugin class and types for tree-shakeable imports.
+ *
+ * @module Plugins/Tooltip
+ */
+export { TooltipPlugin } from './TooltipPlugin';
+export type { TooltipConfig } from './types';

package/lib/plugins/tooltip/index.js

@@ -0,0 +1,2 @@
+function t(t,e){return`[tbw-grid${t?`#${t}`:""}${e?`:${e}`:""}]`}function e(e,o,r,i){return`${t(r,i)} ${e}: ${o}\n\n  → More info: ${function(t){return`https://toolboxjs.com/grid/errors#${t.toLowerCase()}`}(e)}`}const o=/* @__PURE__ */new Set(["script","iframe","object","embed","form","input","button","textarea","select","link","meta","base","style","template","slot","portal","frame","frameset","applet","noscript","noembed","plaintext","xmp","listing"]),r=/^on\w+$/i,i=/* @__PURE__ */new Set(["href","src","action","formaction","data","srcdoc","xlink:href","poster","srcset"]),n=/^\s*(javascript|vbscript|data|blob):/i;function s(t){if(!t||"string"!=typeof t)return"";if(-1===t.indexOf("<"))return t;const e=document.createElement("template");return e.innerHTML=t,function(t){const e=[],s=t.querySelectorAll("*");for(const l of s){const t=l.tagName.toLowerCase();if(o.has(t)){e.push(l);continue}if("svg"===t||"http://www.w3.org/2000/svg"===l.namespaceURI){if(Array.from(l.attributes).some(t=>r.test(t.name)||"href"===t.name||"xlink:href"===t.name)){e.push(l);continue}}const s=[];for(const e of l.attributes){const t=e.name.toLowerCase();r.test(t)?s.push(e.name):(i.has(t)&&n.test(e.value)||"style"===t&&/expression\s*\(|javascript:|behavior\s*:/i.test(e.value))&&s.push(e.name)}s.forEach(t=>l.removeAttribute(t))}e.forEach(t=>t.remove())}(e.content),e.innerHTML}const l='<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>',a={expand:"▶",collapse:"▼",sortAsc:"▲",sortDesc:"▼",sortNone:"⇅",submenuArrow:"▶",dragHandle:"⋮⋮",toolPanel:"☰",filter:l,filterActive:l,print:"🖨️"};class p{static dependencies;static manifest;aliases;version="undefined"!=typeof __GRID_VERSION__?__GRID_VERSION__:"dev";styles;cellRenderers;headerRenderers;cellEditors;grid;config;userConfig;#t;get defaultConfig(){return{}}constructor(t={}){this.userConfig=t}attach(t){this.#t?.abort(),this.#t=new AbortController,this.grid=t,this.config={...this.defaultConfig,...this.userConfig}}detach(){this.#t?.abort(),this.#t=void 0}getPlugin(t){return this.grid?.getPlugin(t)}emit(t,e){this.grid?.dispatchEvent?.(new CustomEvent(t,{detail:e,bubbles:!0}))}emitCancelable(t,e){const o=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});return this.grid?.dispatchEvent?.(o),o.defaultPrevented}on(t,e){this.grid?._pluginManager?.subscribe(this,t,e)}off(t){this.grid?._pluginManager?.unsubscribe(this,t)}emitPluginEvent(t,e){this.grid?._pluginManager?.emitPluginEvent(t,e)}requestRender(){this.grid?.requestRender?.()}requestColumnsRender(){this.grid?.requestColumnsRender?.()}requestRenderWithFocus(){this.grid?.requestRenderWithFocus?.()}requestAfterRender(){this.grid?.requestAfterRender?.()}requestVirtualRefresh(){this.grid?.requestVirtualRefresh?.()}get rows(){return this.grid?.rows??[]}get sourceRows(){return this.grid?.sourceRows??[]}get columns(){return this.grid?.columns??[]}get visibleColumns(){return this.grid?._visibleColumns??[]}get gridElement(){return this.grid?._hostElement}get disconnectSignal(){return this.#t?.signal??this.grid?.disconnectSignal}get gridIcons(){const t=this.grid?.gridConfig?.icons??{};return{...a,...t}}get isAnimationEnabled(){const t=this.grid?.effectiveConfig?.animation?.mode??"reduced-motion";if(!1===t||"off"===t)return!1;if(!0===t||"on"===t)return!0;const e=this.gridElement;if(e){return"0"!==getComputedStyle(e).getPropertyValue("--tbw-animation-enabled").trim()}return!0}get animationDuration(){const t=this.gridElement;if(t){const e=getComputedStyle(t).getPropertyValue("--tbw-animation-duration").trim(),o=parseInt(e,10);if(!isNaN(o))return o}return 200}resolveIcon(t,e){return void 0!==e?e:this.gridIcons[t]}setIcon(t,e){"string"==typeof e?t.innerHTML=s(e):e instanceof HTMLElement&&(t.innerHTML="",t.appendChild(e.cloneNode(!0)))}warn(o,r){void 0!==r?console.warn(e(o,r,this.gridElement.id,this.name)):console.warn(`${t(this.gridElement.id,this.name)} ${o}`)}throwDiagnostic(t,o){throw new Error(e(t,o,this.gridElement.id,this.name))}}function c(t){return t.scrollWidth>t.clientWidth}function d(){return"function"==typeof HTMLElement.prototype?.showPopover}class h extends p{name="tooltip";styles='@layer tbw-plugins{.tbw-tooltip-popover{margin:0;padding:var(--tbw-tooltip-padding, var(--tbw-spacing-sm, .375rem) var(--tbw-spacing-md, .5rem));background:var(--tbw-tooltip-bg, light-dark(#333338, #484850));color:var(--tbw-tooltip-fg, light-dark(#f5f5f5, #f0f0f0));border:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-radius:var(--tbw-tooltip-radius, var(--tbw-border-radius, .25rem));box-shadow:none;filter:var(--tbw-tooltip-shadow, drop-shadow(0 4px 4px rgba(0, 0, 0, .45)));font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-tooltip-font-size, var(--tbw-font-size-sm, .9285em));max-width:var(--tbw-tooltip-max-width, 300px);white-space:pre-line;word-wrap:break-word;overflow-wrap:break-word;pointer-events:none;z-index:10001}.tbw-tooltip-popover:after{content:"";position:absolute;width:var(--tbw-tooltip-arrow-size, 14px);height:var(--tbw-tooltip-arrow-size, 14px);left:var(--tbw-tooltip-arrow-offset, 16px);background:inherit;pointer-events:none}.tbw-tooltip-popover:not(.tbw-tooltip-above):after{top:calc(var(--tbw-tooltip-arrow-size, 14px) / -2);transform:rotate(45deg);border-top:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-left:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72))}.tbw-tooltip-popover.tbw-tooltip-above:after{bottom:calc(var(--tbw-tooltip-arrow-size, 14px) / -2);transform:rotate(45deg);border-bottom:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72));border-right:1px solid var(--tbw-tooltip-border, light-dark(#222226, #6a6a72))}@supports (anchor-name: --test){.tbw-tooltip-popover{position-anchor:--tbw-tooltip-anchor;top:calc(anchor(bottom) + 11px);left:anchor(left);position-try-fallbacks:--tbw-tooltip-flip-above}@position-try --tbw-tooltip-flip-above{top:auto;bottom:calc(anchor(top) + 11px)}}}';static manifest={ownedProperties:[{property:"cellTooltip",level:"column",description:'the "cellTooltip" column property'},{property:"headerTooltip",level:"column",description:'the "headerTooltip" column property'}],configRules:[]};#e=null;#o=null;#r=!1;get#i(){return!1!==this.config.header}get#n(){return!1!==this.config.cell}attach(t){super.attach(t)}detach(){this.#s(),this.#e?.remove(),this.#e=null,this.#r=!1,super.detach()}afterRender(){this.#l(),this.#a()}#l(){if(this.#e)return;const t=document.createElement("div");t.className="tbw-tooltip-popover",t.setAttribute("popover","hint"),t.style.overflow="visible",t.style.margin="0",document.body.appendChild(t),this.#e=t}#p(t,e){if(this.#e){if(this.#c(),t.style.setProperty("anchor-name","--tbw-tooltip-anchor"),this.#o=t,this.#e.textContent=e,d())try{this.#e.showPopover()}catch{}"undefined"!=typeof CSS&&!0===CSS.supports?.("anchor-name","--test")?requestAnimationFrame(()=>this.#d(t)):this.#h(t)}}#s(){if(this.#e){if(d())try{this.#e.hidePopover()}catch{}this.#e.classList.remove("tbw-tooltip-above")}this.#c()}#c(){this.#o&&(this.#o.style.removeProperty("anchor-name"),this.#o=null)}#h(t){if(!this.#e)return;const e=t.getBoundingClientRect();this.#e.style.position="fixed",this.#e.style.left=`${e.left}px`;window.innerHeight-e.bottom<80?(this.#e.style.top="",this.#e.style.bottom=window.innerHeight-e.top+11+"px",this.#e.classList.add("tbw-tooltip-above")):(this.#e.style.top=`${e.bottom+11}px`,this.#e.style.bottom="",this.#e.classList.remove("tbw-tooltip-above"))}#d(t){if(!this.#e)return;const e=t.getBoundingClientRect(),o=this.#e.getBoundingClientRect();this.#e.classList.toggle("tbw-tooltip-above",o.bottom<=e.top)}#a(){if(this.#r)return;const t=this.gridElement?.querySelector(".tbw-grid-root");t&&(this.#r=!0,t.addEventListener("mouseover",t=>this.#u(t),{signal:this.disconnectSignal}),t.addEventListener("mouseout",t=>this.#f(t),{signal:this.disconnectSignal}))}#u(t){const e=t.target;if(!e?.closest)return;const o=e.closest('[part~="header-cell"]');if(o&&this.#i)return void this.#b(o);const r=e.closest("[data-row][data-col]");r&&this.#n&&this.#g(r)}#f(t){const e=t.target;if(!e?.closest)return;const o=e.closest('[part~="header-cell"], [data-row][data-col]');if(!o)return;const r=t.relatedTarget;r&&o.contains(r)||this.#s()}#b(t){const e=parseInt(t.getAttribute("data-col")??"-1",10);if(e<0)return;const o=this.visibleColumns[e];if(!o)return;const r=function(t,e){const o=t.headerTooltip;if(!1===o)return null;if("string"==typeof o)return o;if("function"==typeof o)return o({column:t,value:t.header??t.field});const r=e.querySelector("span:first-child")??e;return c(r)&&r.textContent?.trim()||null}(o,t);r&&this.#p(t,r)}#g(t){const e=parseInt(t.getAttribute("data-row")??"-1",10),o=parseInt(t.getAttribute("data-col")??"-1",10);if(e<0||o<0)return;const r=this.visibleColumns[o];if(!r)return;const i=this.rows[e],n=i?.[r.field],s=function(t,e,o,r){const i=t.cellTooltip;if(!1===i)return null;if("string"==typeof i)return i;if("function"==typeof i)return i({value:r,row:o,column:t,field:t.field});return c(e)&&e.textContent?.trim()||null}(r,t,i,n);s&&this.#p(t,s)}}export{h as TooltipPlugin};
+//# sourceMappingURL=index.js.map