diff --git a/changelog.md b/changelog.md index d60bfae..2f87006 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-04-07 - 3.67.0 - feat(dees-table) +improve inline cell editors with integrated input styling and auto-open dropdowns + +- add a visually integrated mode to dees-input-text and dees-input-dropdown for table cell editing +- auto-open dropdown editors when a table cell enters edit mode +- refine table editing cell outline and dropdown value matching for inline editors + ## 2026-04-07 - 3.66.0 - feat(dees-table) add virtualized row rendering for large tables and optimize table rendering performance diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 7edb860..8605f60 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.66.0', + version: '3.67.0', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-dataview/dees-table/dees-table.ts b/ts_web/elements/00group-dataview/dees-table/dees-table.ts index f8533b9..af8e962 100644 --- a/ts_web/elements/00group-dataview/dees-table/dees-table.ts +++ b/ts_web/elements/00group-dataview/dees-table/dees-table.ts @@ -2023,6 +2023,10 @@ export class DeesTable extends DeesElement { '.editingCell dees-input-tags' ) as any; el?.focus?.(); + // Dropdown editors should auto-open so the user can pick immediately. + if (el?.tagName === 'DEES-INPUT-DROPDOWN') { + el.updateComplete?.then(() => el.toggleSelectionBox?.()); + } }); } @@ -2090,8 +2094,13 @@ export class DeesTable extends DeesElement { case 'dropdown': { const options = (col.editorOptions?.options as any[]) ?? []; const selected = - options.find((o: any) => (o?.option ?? o?.key ?? o) === value) ?? null; + options.find((o: any) => { + if (o == null) return false; + if (typeof o === 'string') return o === raw; + return o.key === raw || o.option === raw; + }) ?? null; return html`) => { @@ -2121,6 +2130,7 @@ export class DeesTable extends DeesElement { case 'text': default: return html` onTextCommit(e.target)} @keydown=${(e: KeyboardEvent) => this.__handleEditorKey(e, item, col)} diff --git a/ts_web/elements/00group-dataview/dees-table/styles.ts b/ts_web/elements/00group-dataview/dees-table/styles.ts index fc23de1..1df8fe3 100644 --- a/ts_web/elements/00group-dataview/dees-table/styles.ts +++ b/ts_web/elements/00group-dataview/dees-table/styles.ts @@ -386,6 +386,11 @@ export const tableStyles: CSSResult[] = [ } td.editingCell { padding: 0; + outline: 2px solid ${cssManager.bdTheme( + 'hsl(222.2 47.4% 51.2% / 0.6)', + 'hsl(217.2 91.2% 59.8% / 0.6)' + )}; + outline-offset: -2px; } td.editingCell .innerCellContainer { padding: 0; diff --git a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts index 23bef22..d769eb2 100644 --- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts +++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts @@ -46,6 +46,12 @@ export class DeesInputDropdown extends DeesInputBase { }) accessor enableSearch: boolean = true; + @property({ + type: Boolean, + reflect: true, + }) + accessor vintegrated: boolean = false; + @state() accessor isOpened = false; @@ -126,6 +132,36 @@ export class DeesInputDropdown extends DeesInputBase { .selectedBox.open::after { transform: translateY(-50%) rotate(180deg); } + + /* Visually integrated mode: shed chrome to blend into a host component + (e.g. a dees-table cell in edit mode). */ + :host([vintegrated]) dees-label { + display: none; + } + :host([vintegrated]) .maincontainer { + height: 40px; + } + :host([vintegrated]) .selectedBox { + height: 40px; + line-height: 40px; + padding: 0 32px 0 16px; + font-size: 13px; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + transition: none; + } + :host([vintegrated]) .selectedBox:hover:not(.disabled), + :host([vintegrated]) .selectedBox:focus-visible { + border: none; + box-shadow: none; + background: transparent; + } + :host([vintegrated]) .selectedBox::after { + right: 12px; + opacity: 0.6; + } `, ]; diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts index 8d1ba0e..5d71441 100644 --- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts +++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts @@ -57,6 +57,12 @@ export class DeesInputText extends DeesInputBase { @property({}) accessor validationFunction!: (value: string) => boolean; + @property({ + type: Boolean, + reflect: true, + }) + accessor vintegrated: boolean = false; + public static styles = [ themeDefaultStyles, ...DeesInputBase.baseStyles, @@ -194,6 +200,36 @@ export class DeesInputText extends DeesInputBase { border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')}; box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')}; } + + /* Visually integrated mode: shed chrome to blend into a host component + (e.g. a dees-table cell in edit mode). */ + :host([vintegrated]) dees-label, + :host([vintegrated]) .validationContainer { + display: none; + } + :host([vintegrated]) .maincontainer { + height: 40px; + } + :host([vintegrated]) input { + height: 40px; + line-height: 24px; + padding: 0 16px; + font-size: 13px; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; + transition: none; + } + :host([vintegrated]) input:hover:not(:disabled):not(:focus), + :host([vintegrated]) input:focus { + border: none; + box-shadow: none; + background: transparent; + } + :host([vintegrated]) .showPassword { + display: none; + } `, ];