diff --git a/changelog.md b/changelog.md index ee61a77..b181acc 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## 2025-12-29 - 3.5.1 - fix(dees-appui-view) +remove DeesAppuiView component, its demo, documentation snippet, and related exports + +- Deleted component implementation: ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts +- Deleted demo file: ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts +- Removed index re-export: ts_web/elements/00group-appui/dees-appui-view/index.ts (deleted) and removed export from ts_web/elements/00group-appui/index.ts +- Removed documentation section for DeesAppuiView from readme.md +- Breaking change: any consumers using the component or its public API (selectTab, getMenuItems, getTabs) must be migrated to alternate components/approach + ## 2025-12-29 - 3.5.0 - feat(theme,interfaces) Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly diff --git a/readme.md b/readme.md index 467d9fd..c4703ee 100644 --- a/readme.md +++ b/readme.md @@ -775,23 +775,6 @@ Professional application bar component with hierarchical menus, breadcrumb navig - **User Account Section** - Avatar with status indicator - **Accessibility** - Full ARIA support with menubar roles -#### `DeesAppuiView` -View wrapper component for single-view layouts with internal tabs. - -```typescript - {}, content: html`
General settings
` }, - { key: 'Security', iconName: 'lucide:shield', action: () => {}, content: html`
Security settings
` } - ] - }} - .paddingPx=${16} // Default padding for tab content -> -``` - #### `DeesAppuiTabs` Reusable tab component with horizontal/vertical layout support. @@ -1234,14 +1217,6 @@ interface IMenuItem { badgeVariant?: 'default' | 'success' | 'warning' | 'error'; } -// Extended tab interface for views with content -interface IViewTab extends IMenuItem { - content?: TemplateResult | (() => TemplateResult); - useSlotName?: boolean; - slotName?: string; - paddingPx?: number; -} - // Menu group interface for organized menus interface IMenuGroup { name: string; diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index fe72340..e1a6baf 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.5.0', + version: '3.5.1', 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-appui/dees-appui-view/dees-appui-view.demo.ts b/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts deleted file mode 100644 index b68349b..0000000 --- a/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { html } from '@design.estate/dees-element'; - -export const demoFunc = () => html` - console.log('Overview tab'), - content: html`
Overview Content
` - }, - { - key: 'details', - iconName: 'lucide:fileText', - action: () => console.log('Details tab'), - content: html`
Details Content
` - } - ], - menuItems: [ - { key: 'General', action: () => console.log('General') }, - { key: 'Advanced', action: () => console.log('Advanced') }, - ] - }} - > -`; diff --git a/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts b/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts deleted file mode 100644 index 52f203a..0000000 --- a/ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts +++ /dev/null @@ -1,180 +0,0 @@ -import * as interfaces from '../../interfaces/index.js'; - -import { - DeesElement, - type TemplateResult, - property, - customElement, - html, - css, - cssManager, - state, -} from '@design.estate/dees-element'; - -import '../dees-appui-tabs/dees-appui-tabs.js'; -import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js'; -import { demoFunc } from './dees-appui-view.demo.js'; -import { themeDefaultStyles } from '../../00theme.js'; - -export interface IViewTab extends interfaces.IMenuItem { - content?: TemplateResult | (() => TemplateResult); - useSlotName?: boolean; - slotName?: string; - paddingPx?: number; -} - -export interface IAppView { - id: string; - name: string; - description?: string; - iconName?: string; - tabs: IViewTab[]; - menuItems?: interfaces.IMenuItem[]; -} - -@customElement('dees-appui-view') -export class DeesAppuiView extends DeesElement { - public static demo = demoFunc; - - // INSTANCE - @property({ type: Object }) - accessor viewConfig: IAppView; - - @state() - accessor selectedTab: IViewTab | null = null; - - @state() - accessor tabs: DeesAppuiTabs; - - @property({ type: Number }) - accessor paddingPx: number = 16; - - public static styles = [ - themeDefaultStyles, - cssManager.defaultStyles, - css` - /* TODO: Migrate hardcoded values to --dees-* CSS variables */ - :host { - display: block; - position: relative; - width: 100%; - height: 100%; - background: #161616; - } - - .view-container { - position: relative; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - } - - .view-header { - background: #000000; - border-bottom: 1px solid #333; - flex-shrink: 0; - } - - .view-content { - flex: 1; - position: relative; - overflow: hidden; - } - - .tab-content { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: auto; - opacity: 0; - transition: opacity 0.2s; - } - - .tab-content.active { - opacity: 1; - } - - dees-appui-tabs { - height: 60px; - } - `, - ]; - - public render(): TemplateResult { - if (!this.viewConfig) { - return html`
No view configuration provided
`; - } - - return html` -
-
- this.handleTabSelect(e)} - > -
-
- ${this.viewConfig.tabs.map((tab) => { - const isActive = tab === this.selectedTab; - const content = typeof tab.content === 'function' ? tab.content() : tab.content; - const padding = tab.paddingPx ?? this.paddingPx; - return html` -
- ${content - ? content - : tab.useSlotName - ? html`` - : ''} -
- `; - })} -
-
- `; - } - - async firstUpdated() { - this.tabs = this.shadowRoot.querySelector('dees-appui-tabs'); - - if (this.viewConfig?.tabs?.length > 0) { - this.selectedTab = this.viewConfig.tabs[0]; - } - } - - private handleTabSelect(e: CustomEvent) { - this.selectedTab = e.detail.tab; - - // Re-emit the event with view context - this.dispatchEvent(new CustomEvent('view-tab-select', { - detail: { - view: this.viewConfig, - tab: e.detail.tab - }, - bubbles: true, - composed: true - })); - } - - // Public methods for external control - public selectTab(tabKey: string) { - const tab = this.viewConfig.tabs.find(t => t.key === tabKey); - if (tab) { - this.selectedTab = tab; - if (this.tabs) { - this.tabs.selectedTab = tab; - } - } - } - - public getMenuItems(): interfaces.IMenuItem[] { - return this.viewConfig?.menuItems || []; - } - - public getTabs(): IViewTab[] { - return this.viewConfig?.tabs || []; - } -} \ No newline at end of file diff --git a/ts_web/elements/00group-appui/dees-appui-view/index.ts b/ts_web/elements/00group-appui/dees-appui-view/index.ts deleted file mode 100644 index 613865c..0000000 --- a/ts_web/elements/00group-appui/dees-appui-view/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dees-appui-view.js'; diff --git a/ts_web/elements/00group-appui/index.ts b/ts_web/elements/00group-appui/index.ts index 150a331..d1aba56 100644 --- a/ts_web/elements/00group-appui/index.ts +++ b/ts_web/elements/00group-appui/index.ts @@ -7,4 +7,3 @@ export * from './dees-appui-mainmenu/index.js'; export * from './dees-appui-secondarymenu/index.js'; export * from './dees-appui-profiledropdown/index.js'; export * from './dees-appui-tabs/index.js'; -export * from './dees-appui-view/index.js';