design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 16:29:19 +00:00
parent 65aa9f3c06
commit 3e81f54e99
5 changed files with 492 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ts_web/elements/dees-input-checkbox.demo.ts
View File

@ -275,11 +275,11 @@ export const demoFunc = () => html`
<dees-input-checkbox <dees-input-checkbox
.label=${'Feature toggle'} .label=${'Feature toggle'}
.value=${false} .value=${false}
@changeSubject=${(event) => { @changeSubject=${(event: CustomEvent) => {
const output = document.querySelector('#checkbox-output'); const output = document.querySelector('#checkbox-output');
if (output && event.detail) { if (output && event.detail) {
const isChecked = event.detail.getValue(); const isChecked = event.detail.getValue();
output.textContent = \`Feature is \${isChecked ? 'enabled' : 'disabled'}\`; output.textContent = `Feature is ${isChecked ? 'enabled' : 'disabled'}`;
} }
}} }}
></dees-input-checkbox> ></dees-input-checkbox>
@ -287,11 +287,11 @@ export const demoFunc = () => html`
<dees-input-checkbox <dees-input-checkbox
.label=${'Debug mode'} .label=${'Debug mode'}
.value=${false} .value=${false}
@changeSubject=${(event) => { @changeSubject=${(event: CustomEvent) => {
const output = document.querySelector('#debug-output'); const output = document.querySelector('#debug-output');
if (output && event.detail) { if (output && event.detail) {
const isChecked = event.detail.getValue(); const isChecked = event.detail.getValue();
output.textContent = \`Debug mode: \${isChecked ? 'ON' : 'OFF'}\`; output.textContent = `Debug mode: ${isChecked ? 'ON' : 'OFF'}`;
} }
}} }}
></dees-input-checkbox> ></dees-input-checkbox>

115
ts_web/elements/dees-input-fileupload.ts
View File

@ -68,7 +68,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
:host { :host {
position: relative; position: relative;
display: block; display: block;
color: ${cssManager.bdTheme('#333', '#ccc')}; color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
} }
.hidden { .hidden {
@ -83,16 +83,16 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
.maincontainer { .maincontainer {
position: relative; position: relative;
border-radius: 8px; border-radius: 6px;
padding: 16px; padding: 16px;
background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')}; background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
color: ${cssManager.bdTheme('#333', '#ccc')}; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')}; border: 1px solid ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
transition: all 0.2s ease; transition: all 0.15s ease;
} }
.maincontainer:hover { .maincontainer:hover {
border-color: ${cssManager.bdTheme('#ccc', '#444')}; border-color: ${cssManager.bdTheme('hsl(215 20.2% 55.1%)', 'hsl(215 20.2% 45.1%)')};
} }
:host([disabled]) .maincontainer { :host([disabled]) .maincontainer {
@ -102,69 +102,69 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
} }
:host([validationState="invalid"]) .maincontainer { :host([validationState="invalid"]) .maincontainer {
border-color: #e74c3c; border-color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
} }
:host([validationState="valid"]) .maincontainer { :host([validationState="valid"]) .maincontainer {
border-color: #27ae60; border-color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
} }
:host([validationState="warn"]) .maincontainer { :host([validationState="warn"]) .maincontainer {
border-color: #f39c12; border-color: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
} }
.maincontainer::after { .maincontainer::after {
top: 2px; top: 1px;
right: 2px; right: 1px;
left: 2px; left: 1px;
bottom: 2px; bottom: 1px;
transform: scale3d(0.98, 0.9, 1); transform: scale3d(0.98, 0.95, 1);
position: absolute; position: absolute;
content: ''; content: '';
display: block; display: block;
border: 2px dashed transparent; border: 2px dashed transparent;
border-radius: 6px; border-radius: 5px;
transition: all 0.3s ease; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none; pointer-events: none;
background: transparent; background: transparent;
} }
.maincontainer.dragOver { .maincontainer.dragOver {
border-color: ${cssManager.bdTheme('#0084ff', '#0084ff')}; border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
background: ${cssManager.bdTheme('#f0f8ff', '#001933')}; background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.05)', 'hsl(213.1 93.9% 67.8% / 0.05)')};
} }
.maincontainer.dragOver::after { .maincontainer.dragOver::after {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
border: 2px dashed ${cssManager.bdTheme('#0084ff', '#0084ff')}; border: 2px dashed ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
} }
.uploadButton { .uploadButton {
position: relative; position: relative;
padding: 12px 24px; padding: 10px 20px;
background: ${cssManager.bdTheme('#0084ff', '#0084ff')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 7.8%)')};
color: white; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 6px; border-radius: 6px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.15s ease;
border: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
line-height: 20px;
} }
.uploadButton:hover { .uploadButton:hover {
background: ${cssManager.bdTheme('#0073e6', '#0073e6')}; background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
transform: translateY(-1px); border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
box-shadow: 0 2px 8px rgba(0, 132, 255, 0.3);
} }
.uploadButton:active { .uploadButton:active {
transform: translateY(0); background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 11%)')};
} }
.uploadButton dees-icon { .uploadButton dees-icon {
@ -181,21 +181,21 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
.uploadCandidate { .uploadCandidate {
display: grid; display: grid;
grid-template-columns: 40px 1fr auto; grid-template-columns: 40px 1fr auto;
background: ${cssManager.bdTheme('#ffffff', '#2a2a2a')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 16.8%)')};
padding: 12px; padding: 12px;
text-align: left; text-align: left;
border-radius: 6px; border-radius: 6px;
color: ${cssManager.bdTheme('#333', '#ccc')}; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
cursor: default; cursor: default;
transition: all 0.2s; transition: all 0.15s ease;
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.uploadCandidate:hover { .uploadCandidate:hover {
background: ${cssManager.bdTheme('#f5f5f5', '#333')}; background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(215 20.2% 20.8%)')};
border-color: ${cssManager.bdTheme('#ccc', '#444')}; border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
} }
.uploadCandidate .icon { .uploadCandidate .icon {
@ -203,19 +203,19 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20px; font-size: 20px;
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
} }
.uploadCandidate.image-file .icon { .uploadCandidate.image-file .icon {
color: #4CAF50; color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
} }
.uploadCandidate.pdf-file .icon { .uploadCandidate.pdf-file .icon {
color: #f44336; color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
} }
.uploadCandidate.doc-file .icon { .uploadCandidate.doc-file .icon {
color: #2196F3; color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
} }
.uploadCandidate .info { .uploadCandidate .info {
@ -235,7 +235,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
.uploadCandidate .filesize { .uploadCandidate .filesize {
font-size: 12px; font-size: 12px;
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
} }
.uploadCandidate .actions { .uploadCandidate .actions {
@ -254,13 +254,13 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.15s ease;
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
} }
.remove-button:hover { .remove-button:hover {
background: ${cssManager.bdTheme('#fee', '#4a1c1c')}; background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
color: ${cssManager.bdTheme('#e74c3c', '#ff6b6b')}; color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
} }
.clear-all-button { .clear-all-button {
@ -271,36 +271,37 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
.clear-all-button button { .clear-all-button button {
background: none; background: none;
border: none; border: none;
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
transition: all 0.2s; transition: all 0.15s ease;
} }
.clear-all-button button:hover { .clear-all-button button:hover {
background: ${cssManager.bdTheme('#fee', '#4a1c1c')}; background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
color: ${cssManager.bdTheme('#e74c3c', '#ff6b6b')}; color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
} }
.validation-message { .validation-message {
font-size: 12px; font-size: 13px;
margin-top: 4px; margin-top: 6px;
color: #e74c3c; color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
line-height: 1.5;
} }
.drop-hint { .drop-hint {
text-align: center; text-align: center;
padding: 40px 20px; padding: 40px 20px;
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
font-size: 14px; font-size: 14px;
} }
.drop-hint dees-icon { .drop-hint dees-icon {
font-size: 48px; font-size: 48px;
margin-bottom: 16px; margin-bottom: 16px;
opacity: 0.3; opacity: 0.2;
} }
.image-preview { .image-preview {
@ -311,10 +312,10 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
} }
.description-text { .description-text {
font-size: 12px; font-size: 13px;
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
margin-top: 4px; margin-top: 6px;
line-height: 1.4; line-height: 1.5;
} }
`, `,
]; ];

284
ts_web/elements/dees-input-quantityselector.demo.ts
View File

@ -15,25 +15,146 @@ export const demoFunc = () => html`
.shopping-grid { .shopping-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px; gap: 20px;
} }
.product-card { .product-card {
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px;
overflow: hidden;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
}
.product-card:hover {
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
}
.product-image {
width: 100%;
height: 180px;
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
}
.product-content {
padding: 16px; padding: 16px;
background: ${cssManager.bdTheme('#fff', '#2a2a2a')}; display: flex;
border-radius: 4px; flex-direction: column;
box-shadow: 0 2px 4px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')}; gap: 12px;
flex: 1;
}
.product-header {
display: flex;
flex-direction: column;
gap: 4px;
}
.product-category {
font-size: 12px;
font-weight: 500;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
text-transform: uppercase;
letter-spacing: 0.05em;
} }
.product-name { .product-name {
font-size: 16px;
font-weight: 600; font-weight: 600;
margin-bottom: 8px; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
line-height: 1.4;
}
.product-description {
font-size: 13px;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
line-height: 1.5;
flex: 1;
} }
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 12px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
}
.product-price { .product-price {
color: #1976d2; display: flex;
flex-direction: column;
gap: 2px;
}
.price-current {
font-size: 20px;
font-weight: 600;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
}
.price-original {
font-size: 14px;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
text-decoration: line-through;
}
.in-stock {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
margin-top: 8px;
}
.in-stock dees-icon {
font-size: 14px;
}
.cart-summary {
margin-top: 24px;
padding: 20px;
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
border-radius: 8px;
}
.cart-summary-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px; margin-bottom: 16px;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
}
.cart-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
margin-top: 16px;
border-top: 2px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
font-size: 18px;
font-weight: 600;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
} }
`} `}
</style> </style>
@ -53,36 +174,141 @@ export const demoFunc = () => html`
></dees-input-quantityselector> ></dees-input-quantityselector>
</dees-panel> </dees-panel>
<dees-panel .title=${'Shopping Cart'} .subtitle=${'Product cards with quantity selectors'}> <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
const updateCartSummary = () => {
const qty1 = (elementArg.querySelector('#headphones-qty') as any)?.getValue() || 0;
const qty2 = (elementArg.querySelector('#mouse-qty') as any)?.getValue() || 0;
const qty3 = (elementArg.querySelector('#keyboard-qty') as any)?.getValue() || 0;
const price1 = 349.99 * qty1;
const price2 = 99.99 * qty2;
const price3 = 79.99 * qty3;
const total = price1 + price2 + price3;
const summary = elementArg.querySelector('#cart-summary-content');
if (summary) {
summary.innerHTML = `
${qty1 > 0 ? `<div class="cart-item">
<span>Sony WH-1000XM5 (${qty1})</span>
<span>$${price1.toFixed(2)}</span>
</div>` : ''}
${qty2 > 0 ? `<div class="cart-item">
<span>Logitech MX Master 3S (${qty2})</span>
<span>$${price2.toFixed(2)}</span>
</div>` : ''}
${qty3 > 0 ? `<div class="cart-item">
<span>Keychron K2 (${qty3})</span>
<span>$${price3.toFixed(2)}</span>
</div>` : ''}
${total === 0 ? '<div class="cart-item" style="text-align: center; color: #999;">Your cart is empty</div>' : ''}
<div class="cart-total">
<span>Total</span>
<span>$${total.toFixed(2)}</span>
</div>
`;
}
};
// Initial update
setTimeout(updateCartSummary, 100);
// Set up listeners
elementArg.querySelectorAll('dees-input-quantityselector').forEach(selector => {
selector.addEventListener('changeSubject', updateCartSummary);
});
}}>
<div class="shopping-grid"> <div class="shopping-grid">
<div class="product-card"> <div class="product-card">
<div class="product-name">Premium Headphones</div> <div class="product-image">
<div class="product-price">$199.99</div> <dees-icon .iconName=${'lucide:headphones'}></dees-icon>
<dees-input-quantityselector </div>
.label=${'Quantity'} <div class="product-content">
.layoutMode=${'horizontal'} <div class="product-header">
.value=${1} <div class="product-category">Audio</div>
></dees-input-quantityselector> <div class="product-name">Sony WH-1000XM5 Wireless Headphones</div>
</div>
<div class="product-description">
Industry-leading noise canceling with Auto NC Optimizer
</div>
<div class="in-stock">
<dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
In Stock
</div>
<div class="product-footer">
<div class="product-price">
<span class="price-current">$349.99</span>
<span class="price-original">$399.99</span>
</div>
<dees-input-quantityselector
id="headphones-qty"
.value=${1}
></dees-input-quantityselector>
</div>
</div>
</div> </div>
<div class="product-card"> <div class="product-card">
<div class="product-name">Wireless Mouse</div> <div class="product-image">
<div class="product-price">$49.99</div> <dees-icon .iconName=${'lucide:mouse-pointer'}></dees-icon>
<dees-input-quantityselector </div>
.label=${'Quantity'} <div class="product-content">
.layoutMode=${'horizontal'} <div class="product-header">
.value=${2} <div class="product-category">Accessories</div>
></dees-input-quantityselector> <div class="product-name">Logitech MX Master 3S</div>
</div>
<div class="product-description">
Performance wireless mouse with ultra-fast scrolling
</div>
<div class="in-stock">
<dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
In Stock
</div>
<div class="product-footer">
<div class="product-price">
<span class="price-current">$99.99</span>
</div>
<dees-input-quantityselector
id="mouse-qty"
.value=${2}
></dees-input-quantityselector>
</div>
</div>
</div> </div>
<div class="product-card"> <div class="product-card">
<div class="product-name">USB-C Cable</div> <div class="product-image">
<div class="product-price">$19.99</div> <dees-icon .iconName=${'lucide:keyboard'}></dees-icon>
<dees-input-quantityselector </div>
.label=${'Quantity'} <div class="product-content">
.layoutMode=${'horizontal'} <div class="product-header">
.value=${1} <div class="product-category">Keyboards</div>
></dees-input-quantityselector> <div class="product-name">Keychron K2 Wireless Mechanical Keyboard</div>
</div>
<div class="product-description">
Compact 75% layout with hot-swappable switches
</div>
<div class="in-stock">
<dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
In Stock
</div>
<div class="product-footer">
<div class="product-price">
<span class="price-current">$79.99</span>
<span class="price-original">$94.99</span>
</div>
<dees-input-quantityselector
id="keyboard-qty"
.value=${1}
></dees-input-quantityselector>
</div>
</div>
</div>
</div>
<div class="cart-summary">
<h3 class="cart-summary-title">Order Summary</h3>
<div id="cart-summary-content">
<!-- Content will be dynamically updated -->
</div> </div>
</div> </div>
</dees-panel> </dees-panel>

124
ts_web/elements/dees-input-quantityselector.ts
View File

@ -32,48 +32,91 @@ export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySe
} }
.quantity-container { .quantity-container {
transition: all 0.1s; transition: all 0.15s ease;
font-size: 14px; font-size: 14px;
display: grid; display: inline-flex;
grid-template-columns: 33% 34% 33%; align-items: center;
text-align: center; background: transparent;
background: ${cssManager.bdTheme('#fafafa', '#222222')}; height: 40px;
line-height: 40px; padding: 0;
padding: 0px; min-width: 120px;
min-width: 110px; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
color: ${cssManager.bdTheme('#666', '#CCC')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border: 1px solid ${cssManager.bdTheme('#CCC', '#444')}; border-radius: 6px;
border-radius: 4px; overflow: hidden;
} }
.quantity-container.disabled { .quantity-container.disabled {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
.quantity-container:hover { .quantity-container:hover:not(.disabled) {
color: ${cssManager.bdTheme('#333', '#fff')}; border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
border-color: ${cssManager.bdTheme('#999', '#666')};
} }
.minus { .quantity-container:focus-within {
padding-left: 5px; border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
} box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
.plus {
padding-right: 5px;
} }
.selector { .selector {
text-align: center; flex: 0 0 40px;
font-size: 20px; height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
position: relative;
} }
.selector:hover { .selector:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
}
.selector:active {
background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 11%)')};
}
.selector.minus {
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
}
.selector.plus {
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
} }
.quantity { .quantity {
flex: 1;
text-align: center; text-align: center;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.006em;
}
/* Keyboard navigation focus styles */
.selector:focus {
outline: none;
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
z-index: 1;
}
/* Min value state */
.quantity-container[data-min="true"] .selector.minus {
opacity: 0.3;
cursor: not-allowed;
}
.quantity-container[data-min="true"] .selector.minus:hover {
background: transparent;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
} }
`, `,
@ -82,11 +125,38 @@ export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySe
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<div class="input-wrapper"> <div class="input-wrapper">
<dees-label .label=${this.label}></dees-label> ${this.label ? html`<dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>` : ''}
<div class="quantity-container ${this.disabled ? 'disabled' : ''}"> <div
<div class="selector minus" @click="${() => {this.decrease();}}">-</div> class="quantity-container ${this.disabled ? 'disabled' : ''}"
<div class="quantity">${this.value}</div> data-min="${this.value <= 0}"
<div class="selector plus" @click="${() => {this.increase();}}">+</div> >
<div
class="selector minus"
@click="${() => {this.decrease();}}"
tabindex="${this.disabled ? '-1' : '0'}"
@keydown="${(e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.decrease();
}
}}"
role="button"
aria-label="Decrease quantity"
>−</div>
<div class="quantity" aria-live="polite" aria-atomic="true">${this.value}</div>
<div
class="selector plus"
@click="${() => {this.increase();}}"
tabindex="${this.disabled ? '-1' : '0'}"
@keydown="${(e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.increase();
}
}}"
role="button"
aria-label="Increase quantity"
>+</div>
</div> </div>
</div> </div>
`; `;

126
ts_web/elements/dees-input-tags.ts
View File

@ -53,7 +53,7 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
css` css`
:host { :host {
display: block; display: block;
font-family: 'Geist Sans', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
} }
.input-wrapper { .input-wrapper {
@ -64,44 +64,51 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
padding: 8px; padding: 6px 10px;
min-height: 40px; min-height: 40px;
background: ${cssManager.bdTheme('#fafafa', '#222222')}; background: transparent;
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333333')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px; border-radius: 6px;
transition: all 0.2s ease; transition: all 0.15s ease;
cursor: text; cursor: text;
} }
.tags-container:hover:not(.disabled) {
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
}
.tags-container:focus-within { .tags-container:focus-within {
border-color: ${cssManager.bdTheme('#0069f2', '#0084ff')}; border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 105, 242, 0.1)', 'rgba(0, 132, 255, 0.2)')}; box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
} }
.tags-container.disabled { .tags-container.disabled {
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')}; background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
cursor: not-allowed; cursor: not-allowed;
opacity: 0.6; opacity: 0.5;
} }
.tag { .tag {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 8px; padding: 2px 8px;
background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; background: ${cssManager.bdTheme('hsl(215 20.2% 65.1% / 0.2)', 'hsl(215 20.2% 35.1% / 0.2)')};
color: ${cssManager.bdTheme('#1976d2', '#90caf9')}; color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
border-radius: 16px; border: 1px solid ${cssManager.bdTheme('hsl(215 20.2% 65.1% / 0.3)', 'hsl(215 20.2% 35.1% / 0.3)')};
font-size: 14px; border-radius: 4px;
line-height: 1.2; font-size: 13px;
font-weight: 500;
line-height: 18px;
user-select: none; user-select: none;
animation: tagAppear 0.2s ease; animation: tagAppear 0.15s cubic-bezier(0.4, 0, 0.2, 1);
} }
@keyframes tagAppear { @keyframes tagAppear {
from { from {
transform: scale(0.8); transform: scale(0.95);
opacity: 0; opacity: 0;
} }
to { to {
@ -114,21 +121,23 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 16px; width: 14px;
height: 16px; height: 14px;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
margin-left: 2px; margin-left: 2px;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s ease;
color: ${cssManager.bdTheme('hsl(215.3 25% 46.7%)', 'hsl(217.9 10.6% 54.9%)')};
} }
.tag-remove:hover { .tag-remove:hover {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')}; background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.08)')};
color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
} }
.tag-remove dees-icon { .tag-remove dees-icon {
width: 12px; width: 10px;
height: 12px; height: 10px;
} }
.tag-input { .tag-input {
@ -139,12 +148,13 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
outline: none; outline: none;
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
color: ${cssManager.bdTheme('#333', '#fff')}; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
padding: 4px; padding: 2px 4px;
line-height: 20px;
} }
.tag-input::placeholder { .tag-input::placeholder {
color: ${cssManager.bdTheme('#999', '#666')}; color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
} }
.tag-input:disabled { .tag-input:disabled {
@ -162,44 +172,64 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
left: 0; left: 0;
right: 0; right: 0;
margin-top: 4px; margin-top: 4px;
background: ${cssManager.bdTheme('#ffffff', '#222222')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333333')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px; border-radius: 6px;
box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')}; box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
z-index: 1000; z-index: 1000;
} }
.suggestion { .suggestion {
padding: 8px 12px; padding: 6px 10px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.15s ease;
color: ${cssManager.bdTheme('#333', '#fff')}; font-size: 14px;
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
} }
.suggestion:hover, .suggestion:hover {
.suggestion.highlighted { background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
background: ${cssManager.bdTheme('#f5f5f5', '#333333')};
} }
.suggestion.highlighted { .suggestion.highlighted {
background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
} }
/* Validation styles */ /* Validation styles */
.validation-message { .validation-message {
color: #d32f2f; color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
font-size: 12px; font-size: 13px;
margin-top: 4px; margin-top: 6px;
min-height: 16px; line-height: 1.5;
} }
/* Description styles */ /* Description styles */
.description { .description {
color: ${cssManager.bdTheme('#666', '#999')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
font-size: 12px; font-size: 13px;
margin-top: 4px; margin-top: 6px;
line-height: 1.5;
}
/* Scrollbar styling */
.suggestions-dropdown::-webkit-scrollbar {
width: 8px;
}
.suggestions-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.suggestions-dropdown::-webkit-scrollbar-thumb {
background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 4px;
}
.suggestions-dropdown::-webkit-scrollbar-thumb:hover {
background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
} }
`, `,
]; ];