SearSuite
← All packages

@searsuite/sear-plugin-web-sheet-tabbar

Web workbook Sheet tabs and Sheet-structure commands.

Tab and status models

classSheetBottomBarAdapter
class SheetBottomBarAdapter<TTarget, TOptions>

Platform-neutral lifecycle contract for a complete bottom-bar renderer.

constructorSheetBottomBarAdapter<TTarget, TOptions>(): SheetBottomBarAdapter<TTarget, TOptions>
propertyreadonly symbol: symbolstatic
methoddestroy(): void
methodmount(target: TTarget, options?: TOptions): void
classSheetStatusBarAdapter
class SheetStatusBarAdapter<TTarget>

Platform-neutral lifecycle contract for a sheet status-bar renderer.

constructorSheetStatusBarAdapter<TTarget>(): SheetStatusBarAdapter<TTarget>
propertyreadonly symbol: symbolstatic
methoddestroy(): void
methodmount(target: TTarget, model: SheetStatusBarModel): void
methodupdate(model: SheetStatusBarModel): void
classSheetTabBarAdapter
class SheetTabBarAdapter<TTarget>

Platform-neutral lifecycle contract for a sheet tab-bar renderer.

constructorSheetTabBarAdapter<TTarget>(): SheetTabBarAdapter<TTarget>
propertyreadonly symbol: symbolstatic
methoddestroy(): void
methodmount(target: TTarget, model: SheetTabBarModel): void
methodupdate(model: SheetTabBarModel): void
interfaceSearWebBottomBarCreateSheetStateInput

Input passed when the bottom bar needs a new sheet payload.

propertyreadonly index: number

Destination index in WorkbookDocumentState.sheets.

propertyreadonly name: string

User-facing sheet name generated for the workbook command.

propertyreadonly sheetId: string

Stable sheet id generated for the workbook command.

interfaceSearWebBottomBarWorkbookBinding

Workbook binding used by SearWebBottomBar.

propertyreadonly createSheetState?: (input: SearWebBottomBarCreateSheetStateInput): SheetDocumentState

Creates the initial SheetDocumentState for a newly added sheet.

propertyreadonly editor: WorkbookEditor

Workbook editor whose command bus owns sheet-list actions.

interfaceSheetTabBarItem

Stable sheet item data shared by all tab-bar renderers.

propertyreadonly active: boolean
propertyreadonly color?: string
propertyreadonly id: string
propertyreadonly name: string

Web controls

classSearWebBottomBar
class SearWebBottomBar extends SheetBottomBarAdapter<HTMLElement, SearWebBottomBarMountOptions>

Browser DOM implementation of the bottom sheet tab/status bar.

constructorSearWebBottomBar(platform: Platform): SearWebBottomBar

Constructs a bottom bar adapter bound to one platform.

propertyreadonly symbol: typeof symbolstatic

DI token for resolving the browser bottom bar adapter.

methoddestroy(): void
methodmount(target: HTMLElement, options?: SearWebBottomBarMountOptions): void
classWebSheetStatusBar
class WebSheetStatusBar extends SheetStatusBarAdapter<HTMLElement>

Browser DOM adapter for the status and zoom segment of the bottom bar.

constructorWebSheetStatusBar(): WebSheetStatusBar
methoddestroy(): void
methodmount(target: HTMLElement, model: SheetStatusBarModel): void
methodupdate(model: SheetStatusBarModel): void
Inherited members 1

Inherited from SheetStatusBarAdapter.

classWebSheetTabBar
class WebSheetTabBar extends SheetTabBarAdapter<HTMLElement>

Browser DOM adapter for the sheet tabs segment of the bottom bar.

constructorWebSheetTabBar(): WebSheetTabBar
methoddestroy(): void
methodmount(target: HTMLElement, model: SheetTabBarModel): void
methodupdate(model: SheetTabBarModel): void
Inherited members 1

Inherited from SheetTabBarAdapter.

interfaceSearWebBottomBarMountOptions

Mount options for the browser bottom bar.

propertyreadonly statusBar?: SheetStatusBarAdapter<HTMLElement>

Optional status adapter. Hosts may provide a custom implementation.

propertyreadonly statusText?: string

Status text shown at the right edge.

propertyreadonly tabBar?: SheetTabBarAdapter<HTMLElement>

Optional tabs adapter. Hosts may provide a custom implementation.

propertyreadonly workbook?: SearWebBottomBarWorkbookBinding

Optional workbook binding. Without it, the bottom bar renders the static replica.

propertyreadonly zoomText?: string

Zoom label shown in the bottom bar.

variableSHEET_BOTTOM_BAR_CSS
SHEET_BOTTOM_BAR_CSS: "\n.sear-sheet-bottom-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 36px;\n padding: 0 10px 0 12px;\n border: 1px solid rgba(23, 26, 29, 0.08);\n border-bottom: 0;\n border-radius: 0;\n background: #f6f7fa;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);\n color: rgba(23, 24, 28, 0.78);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", Arial, sans-serif;\n font-size: 12px;\n line-height: 1;\n user-select: none;\n}\n\n.sear-sheet-bottom-bar button {\n border: 0;\n appearance: none;\n font: inherit;\n color: inherit;\n}\n\n.sear-sheet-bottom-bar__tabs-panel,\n.sear-sheet-bottom-bar__status-panel {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.sear-sheet-bottom-bar__tabs-panel {\n gap: 8px;\n min-width: 0;\n flex: 1 1 auto;\n}\n\n.sear-sheet-bottom-bar__status-panel {\n gap: 6px;\n margin-left: auto;\n}\n\n.sear-sheet-bottom-bar__icon-button,\n.sear-sheet-bottom-bar__grid,\n.sear-sheet-bottom-bar__zoom-button,\n.sear-sheet-bottom-bar__add {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n cursor: default;\n}\n\n.sear-sheet-bottom-bar__icon-button {\n width: 22px;\n height: 22px;\n color: #79829a;\n}\n\n.sear-sheet-bottom-bar__add {\n width: 22px;\n height: 22px;\n color: #7a8297;\n}\n\n.sear-sheet-bottom-bar__tabs {\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n overflow-x: auto;\n scrollbar-width: none;\n}\n\n.sear-sheet-bottom-bar__tabs::-webkit-scrollbar {\n display: none;\n}\n\n.sear-sheet-bottom-bar__tab {\n min-width: 74px;\n max-width: 160px;\n height: 28px;\n padding: 0 12px;\n border-radius: 6px;\n background: rgba(255, 255, 255, 0.66);\n box-shadow: 0 1px 2px rgba(23, 26, 29, 0.04);\n color: rgba(23, 24, 28, 0.72);\n font-size: 13px;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-top: 2px solid var(--sear-sheet-tab-color, transparent);\n}\n\n.sear-sheet-bottom-bar__tab--active {\n background: #fff;\n color: #256cfb;\n font-weight: 600;\n}\n\n.sear-sheet-bottom-bar__tab--drop-before {\n box-shadow: inset 3px 0 #256cfb;\n}\n\n.sear-sheet-bottom-bar__tab--drop-after {\n box-shadow: inset -3px 0 #256cfb;\n}\n\n.sear-sheet-bottom-bar__rename {\n min-width: 74px;\n max-width: 160px;\n width: 120px;\n height: 28px;\n padding: 0 8px;\n border: 1px solid #256cfb;\n border-radius: 4px;\n background: #fff;\n color: #17181c;\n font: inherit;\n user-select: text;\n}\n\n.sear-sheet-bottom-bar__context-menu {\n position: fixed;\n z-index: 10000;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 150px;\n padding: 5px;\n border: 1px solid #d9dce2;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 5px 18px rgba(23, 26, 29, 0.14);\n color: #17181c;\n font-size: 13px;\n}\n\n.sear-sheet-bottom-bar__context-menu button {\n border: 0;\n border-radius: 4px;\n padding: 7px 10px;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n cursor: pointer;\n}\n\n.sear-sheet-bottom-bar__context-menu button:hover,\n.sear-sheet-bottom-bar__context-menu button:focus-visible {\n background: #eef3ff;\n}\n\n.sear-sheet-bottom-bar__context-menu button:disabled {\n opacity: 0.45;\n cursor: default;\n}\n\n.sear-sheet-bottom-bar__context-menu span {\n padding: 7px 10px;\n line-height: 1.4;\n}\n\n.sear-sheet-bottom-bar__status {\n color: rgba(23, 24, 28, 0.48);\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.sear-sheet-bottom-bar__grid {\n width: 22px;\n height: 22px;\n color: #7182ac;\n}\n\n.sear-sheet-bottom-bar__divider {\n width: 1px;\n height: 20px;\n margin: 0 4px 0 6px;\n background: rgba(23, 26, 29, 0.08);\n}\n\n.sear-sheet-bottom-bar__zoom-button {\n width: 22px;\n height: 22px;\n color: rgba(23, 24, 28, 0.86);\n}\n\n.sear-sheet-bottom-bar__zoom-value {\n min-width: 46px;\n color: rgba(23, 24, 28, 0.86);\n font-size: 13px;\n font-weight: 500;\n text-align: center;\n white-space: nowrap;\n}\n\n.sear-sheet-bottom-bar svg {\n display: block;\n flex: 0 0 14px;\n width: 14px;\n height: 14px;\n}\n\n.sear-sheet-bottom-bar button:hover {\n background: rgba(23, 26, 29, 0.05);\n border-radius: 5px;\n}\n\n.sear-sheet-bottom-bar__tab:hover {\n background: #fff;\n}\n\n.sear-sheet-bottom-bar__toast {\n position: fixed;\n bottom: 24px;\n left: 50%;\n z-index: 10000;\n padding: 9px 16px;\n border-radius: 6px;\n background: rgba(54, 55, 56, 0.96);\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);\n color: #fff;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", Arial, sans-serif;\n font-size: 13px;\n line-height: 18px;\n pointer-events: none;\n transform: translateX(-50%);\n}\n"

CSS injected by SearWebBottomBar for the browser sheet bottom bar.