feat(dees-settings): add dees-settings layout component for displaying read-only settings with footer actions
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import './dees-settings.js';
|
||||
import type { ISettingsField, ISettingsAction } from './dees-settings.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
const acmeFields: ISettingsField[] = [
|
||||
{ key: 'email', label: 'Account email', value: 'admin@example.com' },
|
||||
{ key: 'status', label: 'Status', value: 'enabled' },
|
||||
{ key: 'mode', label: 'Mode', value: 'production' },
|
||||
{ key: 'autoRenew', label: 'Auto-renew', value: 'on' },
|
||||
{ key: 'threshold', label: 'Renewal threshold', value: '30 days' },
|
||||
];
|
||||
|
||||
const acmeActions: ISettingsAction[] = [
|
||||
{ name: 'Edit', action: () => console.log('Edit clicked') },
|
||||
];
|
||||
|
||||
const emptyActions: ISettingsAction[] = [
|
||||
{ name: 'Configure', action: () => console.log('Configure clicked') },
|
||||
];
|
||||
|
||||
const multiActions: ISettingsAction[] = [
|
||||
{ name: 'Reset', action: () => console.log('Reset clicked') },
|
||||
{ name: 'Edit', action: () => console.log('Edit clicked') },
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
${css`
|
||||
.demoBox {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
max-width: 600px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<div class="demoBox">
|
||||
<dees-settings
|
||||
.heading=${'ACME Settings'}
|
||||
.settingsFields=${acmeFields}
|
||||
.actions=${acmeActions}
|
||||
></dees-settings>
|
||||
|
||||
<dees-settings
|
||||
.heading=${'ACME Settings'}
|
||||
.description=${'No ACME configuration yet. Click Configure to set up automated TLS certificate issuance.'}
|
||||
.actions=${emptyActions}
|
||||
></dees-settings>
|
||||
|
||||
<dees-settings
|
||||
.heading=${'Server Config'}
|
||||
.settingsFields=${[
|
||||
{ key: 'host', label: 'Hostname', value: 'proxy.example.com' },
|
||||
{ key: 'port', label: 'Port', value: '443' },
|
||||
]}
|
||||
.actions=${multiActions}
|
||||
></dees-settings>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
196
ts_web/elements/00group-layout/dees-settings/dees-settings.ts
Normal file
196
ts_web/elements/00group-layout/dees-settings/dees-settings.ts
Normal file
@@ -0,0 +1,196 @@
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import { demoFunc } from './dees-settings.demo.js';
|
||||
import { cssGeistFontFamily } from '../../00fonts.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import '../../00group-layout/dees-tile/dees-tile.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-settings': DeesSettings;
|
||||
}
|
||||
}
|
||||
|
||||
export interface ISettingsField {
|
||||
key: string;
|
||||
label: string;
|
||||
value: string | TemplateResult;
|
||||
}
|
||||
|
||||
export interface ISettingsAction {
|
||||
name: string;
|
||||
action: () => void | Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* dees-settings — a read-only settings display tile with modal-style footer actions.
|
||||
*
|
||||
* Renders a dees-tile with a heading, a grid of label/value fields,
|
||||
* and a footer action bar. When an action is clicked the component
|
||||
* dispatches a `settings-action` CustomEvent with the action name.
|
||||
*/
|
||||
@customElement('dees-settings')
|
||||
export class DeesSettings extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroups = ['Layout'];
|
||||
|
||||
@property({ type: String })
|
||||
accessor heading: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
accessor description: string = '';
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor settingsFields: ISettingsField[] = [];
|
||||
|
||||
@property({ attribute: false })
|
||||
accessor actions: ISettingsAction[] = [];
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: ${cssGeistFontFamily};
|
||||
}
|
||||
|
||||
.settingsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 12px 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.settingsField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.fieldLabel {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--dees-color-text-muted);
|
||||
}
|
||||
|
||||
.fieldValue {
|
||||
font-size: 13px;
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.settingsDescription {
|
||||
padding: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--dees-color-text-muted);
|
||||
}
|
||||
|
||||
.bottomButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottomButtons .bottomButton {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottomButtons .bottomButton:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.bottomButtons .bottomButton:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.bottomButtons .bottomButton:active {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
|
||||
}
|
||||
|
||||
.bottomButtons .bottomButton.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bottomButtons .bottomButton.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.bottomButtons .bottomButton.primary:active {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.15)', 'hsl(213.1 93.9% 67.8% / 0.15)')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
const hasFields = this.settingsFields.length > 0;
|
||||
const hasActions = this.actions.length > 0;
|
||||
|
||||
return html`
|
||||
<dees-tile .heading=${this.heading}>
|
||||
${hasFields
|
||||
? html`
|
||||
<div class="settingsGrid">
|
||||
${this.settingsFields.map(
|
||||
(field) => html`
|
||||
<div class="settingsField">
|
||||
<span class="fieldLabel">${field.label}</span>
|
||||
<span class="fieldValue">${field.value}</span>
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="settingsDescription">${this.description}</div>
|
||||
`}
|
||||
${hasActions
|
||||
? html`
|
||||
<div slot="footer" class="bottomButtons">
|
||||
${this.actions.map(
|
||||
(actionArg, index) => html`
|
||||
<div
|
||||
class="bottomButton ${index === this.actions.length - 1 ? 'primary' : ''}"
|
||||
@click=${() => actionArg.action()}
|
||||
>
|
||||
${actionArg.name}
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
}
|
||||
1
ts_web/elements/00group-layout/dees-settings/index.ts
Normal file
1
ts_web/elements/00group-layout/dees-settings/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './dees-settings.js';
|
||||
@@ -5,5 +5,6 @@ export * from './dees-heading/index.js';
|
||||
export * from './dees-label/index.js';
|
||||
export * from './dees-pagination/index.js';
|
||||
export * from './dees-panel/index.js';
|
||||
export * from './dees-settings/index.js';
|
||||
export * from './dees-stepper/index.js';
|
||||
export * from './dees-tile/index.js';
|
||||
|
||||
Reference in New Issue
Block a user