Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 25cbf9bfdd | |||
| 4d8ba1fefc | |||
| 42317459ff | |||
| 932db338c6 | |||
| bc4b87b83a | |||
| eb055e7214 | |||
| c55eb948fe | |||
| 35779209ea |
26
changelog.md
26
changelog.md
@@ -1,5 +1,31 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-03-18 - 3.49.0 - feat(dataview-statusobject)
|
||||
add last updated footer to status object and refresh demo data
|
||||
|
||||
- Render a bottom bar that shows the status object's lastUpdated timestamp when available.
|
||||
- Adjust detail row padding to keep spacing consistent with the new footer layout.
|
||||
- Update demo status objects to include lastUpdated examples for current, hourly, and daily timestamps.
|
||||
- Bump @tsclass/tsclass from ^9.3.0 to ^9.5.0.
|
||||
|
||||
## 2026-03-14 - 3.48.5 - fix(repo)
|
||||
no changes to commit
|
||||
|
||||
|
||||
## 2026-03-14 - 3.48.4 - fix(storage-browser)
|
||||
rename S3-specific storage browser interfaces to generic storage types
|
||||
|
||||
- Replaces IS3DataProvider, IS3Object, and IS3ChangeEvent with generic storage interface names across storage browser components
|
||||
- Updates demo provider naming and user-facing demo text from S3 browser to Storage browser
|
||||
- Aligns interface and utility comments with storage-agnostic terminology
|
||||
|
||||
## 2026-03-14 - 3.48.3 - fix(dataview)
|
||||
rename dees-s3-browser exports and custom elements to dees-storage-browser
|
||||
|
||||
- Replaces the dees-s3-browser module path with dees-storage-browser in dataview exports
|
||||
- Renames the main custom element from dees-s3-browser to dees-storage-browser
|
||||
- Renames related columns, keys, preview, demo, interfaces, and utility entry points under the new storage-browser module
|
||||
|
||||
## 2026-03-12 - 3.48.2 - fix(repo)
|
||||
no changes to commit
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@design.estate/dees-catalog",
|
||||
"version": "3.48.2",
|
||||
"version": "3.49.0",
|
||||
"private": false,
|
||||
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
||||
"main": "dist_ts_web/index.js",
|
||||
@@ -33,7 +33,7 @@
|
||||
"@tiptap/extension-typography": "^2.23.0",
|
||||
"@tiptap/extension-underline": "^2.23.0",
|
||||
"@tiptap/starter-kit": "^2.23.0",
|
||||
"@tsclass/tsclass": "^9.3.0",
|
||||
"@tsclass/tsclass": "^9.5.0",
|
||||
"apexcharts": "^5.10.3",
|
||||
"highlight.js": "11.11.1",
|
||||
"ibantools": "^4.5.1",
|
||||
|
||||
52
pnpm-lock.yaml
generated
52
pnpm-lock.yaml
generated
@@ -60,8 +60,8 @@ importers:
|
||||
specifier: ^2.23.0
|
||||
version: 2.27.2
|
||||
'@tsclass/tsclass':
|
||||
specifier: ^9.3.0
|
||||
version: 9.3.0
|
||||
specifier: ^9.5.0
|
||||
version: 9.5.0
|
||||
apexcharts:
|
||||
specifier: ^5.10.3
|
||||
version: 5.10.3
|
||||
@@ -1867,8 +1867,8 @@ packages:
|
||||
'@tsclass/tsclass@4.4.4':
|
||||
resolution: {integrity: sha512-YZOAF+u+r4u5rCev2uUd1KBTBdfyFdtDmcv4wuN+864lMccbdfRICR3SlJwCfYS1lbeV3QNLYGD30wjRXgvCJA==}
|
||||
|
||||
'@tsclass/tsclass@9.3.0':
|
||||
resolution: {integrity: sha512-KD3oTUN3RGu67tgjNHgWWZGsdYipr1RUDxQ9MMKSgIJ6oNZ4q5m2rg0ibrgyHWkAjTPlHVa6kHP3uVOY+8bnHw==}
|
||||
'@tsclass/tsclass@9.5.0':
|
||||
resolution: {integrity: sha512-HwMVwkrBnEFMjwOsMkGwWN/q+XEczSpf4a/PBAXgkDdV6sXdxAMFXUH1tW8Y5ecuvXFYMvFry4X57MCCT7Dm8A==}
|
||||
|
||||
'@tybys/wasm-util@0.10.1':
|
||||
resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
|
||||
@@ -3750,6 +3750,10 @@ packages:
|
||||
os: [darwin, linux, win32, freebsd, openbsd, netbsd, sunos, android]
|
||||
hasBin: true
|
||||
|
||||
tagged-tag@1.0.0:
|
||||
resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
|
||||
engines: {node: '>=20'}
|
||||
|
||||
tar-fs@3.1.2:
|
||||
resolution: {integrity: sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw==}
|
||||
|
||||
@@ -3833,6 +3837,10 @@ packages:
|
||||
resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
|
||||
engines: {node: '>=16'}
|
||||
|
||||
type-fest@5.4.4:
|
||||
resolution: {integrity: sha512-JnTrzGu+zPV3aXIUhnyWJj4z/wigMsdYajGLIYakqyOW1nPllzXEJee0QQbHj+CTIQtXGlAjuK0UY+2xTyjVAw==}
|
||||
engines: {node: '>=20'}
|
||||
|
||||
typed-query-selector@2.12.1:
|
||||
resolution: {integrity: sha512-uzR+FzI8qrUEIu96oaeBJmd9E7CFEiQ3goA5qCVgc4s5llSubcfGHq9yUstZx/k4s9dXHVKsE35YWoFyvEqEHA==}
|
||||
|
||||
@@ -4072,7 +4080,7 @@ snapshots:
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
'@push.rocks/webrequest': 4.0.5
|
||||
'@push.rocks/webstore': 2.0.20
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
lit: 3.3.2
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
@@ -4578,7 +4586,7 @@ snapshots:
|
||||
'@tiptap/extension-typography': 2.27.2(@tiptap/core@2.27.2(@tiptap/pm@2.27.2))
|
||||
'@tiptap/extension-underline': 2.27.2(@tiptap/core@2.27.2(@tiptap/pm@2.27.2))
|
||||
'@tiptap/starter-kit': 2.27.2
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
apexcharts: 5.10.3
|
||||
highlight.js: 11.11.1
|
||||
ibantools: 4.5.1
|
||||
@@ -5571,7 +5579,7 @@ snapshots:
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smartunique': 3.0.9
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- aws-crt
|
||||
@@ -5597,7 +5605,7 @@ snapshots:
|
||||
'@push.rocks/smartjson': 5.2.0
|
||||
'@push.rocks/smartpath': 6.0.0
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
mongodb: 6.21.0(socks@2.8.7)
|
||||
transitivePeerDependencies:
|
||||
- '@aws-sdk/credential-providers'
|
||||
@@ -5618,7 +5626,7 @@ snapshots:
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- react
|
||||
@@ -5690,7 +5698,7 @@ snapshots:
|
||||
'@push.rocks/smartstream': 3.4.0
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smartunique': 3.0.9
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
transitivePeerDependencies:
|
||||
- aws-crt
|
||||
|
||||
@@ -5742,7 +5750,7 @@ snapshots:
|
||||
'@push.rocks/smarttime': 4.2.3
|
||||
'@push.rocks/smartunique': 3.0.9
|
||||
'@push.rocks/taskbuffer': 3.5.0
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
mongodb: 6.21.0(socks@2.8.7)
|
||||
transitivePeerDependencies:
|
||||
- '@aws-sdk/credential-providers'
|
||||
@@ -5770,7 +5778,7 @@ snapshots:
|
||||
'@push.rocks/smartenv': 6.0.0
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrust': 1.3.1
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
acme-client: 5.4.0
|
||||
minimatch: 10.2.4
|
||||
transitivePeerDependencies:
|
||||
@@ -5809,7 +5817,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/smartfeed@1.4.0':
|
||||
dependencies:
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
fast-xml-parser: 4.5.4
|
||||
|
||||
'@push.rocks/smartfile-interfaces@1.0.7': {}
|
||||
@@ -5951,7 +5959,7 @@ snapshots:
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smarttime': 4.2.3
|
||||
'@push.rocks/webrequest': 4.0.5
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
|
||||
'@push.rocks/smartmanifest@2.0.2': {}
|
||||
|
||||
@@ -6109,7 +6117,7 @@ snapshots:
|
||||
'@push.rocks/smartpuppeteer': 2.0.5(typescript@5.9.3)
|
||||
'@push.rocks/smartserve': 2.0.1
|
||||
'@push.rocks/smartunique': 3.0.9
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
pdf-lib: 1.17.1
|
||||
pdf2json: 4.0.2
|
||||
transitivePeerDependencies:
|
||||
@@ -6191,7 +6199,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@push.rocks/smartpath': 6.0.0
|
||||
'@push.rocks/smartrust': 1.3.1
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
|
||||
'@push.rocks/smartserve@2.0.1':
|
||||
dependencies:
|
||||
@@ -6221,7 +6229,7 @@ snapshots:
|
||||
'@push.rocks/smartxml': 2.0.0
|
||||
'@push.rocks/smartyaml': 3.0.4
|
||||
'@push.rocks/webrequest': 4.0.5
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
'@tsclass/tsclass': 9.5.0
|
||||
|
||||
'@push.rocks/smartspawn@3.0.3':
|
||||
dependencies:
|
||||
@@ -7009,9 +7017,9 @@ snapshots:
|
||||
dependencies:
|
||||
type-fest: 4.41.0
|
||||
|
||||
'@tsclass/tsclass@9.3.0':
|
||||
'@tsclass/tsclass@9.5.0':
|
||||
dependencies:
|
||||
type-fest: 4.41.0
|
||||
type-fest: 5.4.4
|
||||
|
||||
'@tybys/wasm-util@0.10.1':
|
||||
dependencies:
|
||||
@@ -9264,6 +9272,8 @@ snapshots:
|
||||
|
||||
systeminformation@5.31.3: {}
|
||||
|
||||
tagged-tag@1.0.0: {}
|
||||
|
||||
tar-fs@3.1.2:
|
||||
dependencies:
|
||||
pump: 3.0.4
|
||||
@@ -9373,6 +9383,10 @@ snapshots:
|
||||
|
||||
type-fest@4.41.0: {}
|
||||
|
||||
type-fest@5.4.4:
|
||||
dependencies:
|
||||
tagged-tag: 1.0.0
|
||||
|
||||
typed-query-selector@2.12.1: {}
|
||||
|
||||
typescript@5.9.3: {}
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.48.2',
|
||||
version: '3.49.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -50,6 +50,7 @@ export const demoFunc = () => html` <style>
|
||||
.statusObject=${{
|
||||
id: '1',
|
||||
name: 'API Gateway Service',
|
||||
lastUpdated: Date.now(),
|
||||
combinedStatus: 'ok',
|
||||
combinedStatusText: 'All systems operational',
|
||||
details: [
|
||||
@@ -89,6 +90,7 @@ export const demoFunc = () => html` <style>
|
||||
.statusObject=${{
|
||||
id: '2',
|
||||
name: 'PostgreSQL Cluster',
|
||||
lastUpdated: Date.now() - 3600000,
|
||||
combinedStatus: 'partly_ok',
|
||||
combinedStatusText: 'Minor issues detected',
|
||||
details: [
|
||||
@@ -128,6 +130,7 @@ export const demoFunc = () => html` <style>
|
||||
.statusObject=${{
|
||||
id: '3',
|
||||
name: 'CI/CD Pipeline',
|
||||
lastUpdated: Date.now() - 86400000,
|
||||
combinedStatus: 'not_ok',
|
||||
combinedStatusText: 'Build failure',
|
||||
details: [
|
||||
|
||||
@@ -128,7 +128,7 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
grid-template-columns: 48px auto;
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
|
||||
transition: background-color 0.15s ease;
|
||||
padding-right: 16px;
|
||||
padding: 0 16px;
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
@@ -148,7 +148,7 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
.detail .detailsText .label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
@@ -159,6 +159,28 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bottomBar {
|
||||
position: relative;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bottomBar .statusLabel {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -209,6 +231,11 @@ export class DeesDataviewStatusobject extends DeesElement {
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<div class="bottomBar">
|
||||
<div class="statusLabel">${this.statusObject?.lastUpdated
|
||||
? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}`
|
||||
: ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import type { IS3DataProvider, IS3Object } from './interfaces.js';
|
||||
import './dees-s3-browser.js';
|
||||
import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
|
||||
import './dees-storage-browser.js';
|
||||
|
||||
// Mock in-memory S3 data provider for demo purposes
|
||||
class MockS3DataProvider implements IS3DataProvider {
|
||||
// Mock in-memory storage data provider for demo purposes
|
||||
class MockStorageDataProvider implements IStorageDataProvider {
|
||||
private objects: Map<string, { content: string; contentType: string; size: number; lastModified: string }> = new Map();
|
||||
|
||||
constructor() {
|
||||
const now = new Date().toISOString();
|
||||
// Seed with sample data
|
||||
this.objects.set('documents/readme.md', {
|
||||
content: btoa('# Welcome\n\nThis is a demo S3 browser.\n'),
|
||||
content: btoa('# Welcome\n\nThis is a demo Storage browser.\n'),
|
||||
contentType: 'text/markdown',
|
||||
size: 42,
|
||||
lastModified: now,
|
||||
@@ -59,9 +59,9 @@ class MockS3DataProvider implements IS3DataProvider {
|
||||
});
|
||||
}
|
||||
|
||||
async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }> {
|
||||
async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }> {
|
||||
const pfx = prefix || '';
|
||||
const objects: IS3Object[] = [];
|
||||
const objects: IStorageObject[] = [];
|
||||
const prefixes = new Set<string>();
|
||||
|
||||
for (const [key, data] of this.objects) {
|
||||
@@ -148,9 +148,9 @@ export const demoFunc = () => html`
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<dees-s3-browser
|
||||
.dataProvider=${new MockS3DataProvider()}
|
||||
<dees-storage-browser
|
||||
.dataProvider=${new MockStorageDataProvider()}
|
||||
.bucketName=${'demo-bucket'}
|
||||
></dees-s3-browser>
|
||||
></dees-storage-browser>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,26 +1,26 @@
|
||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import { demoFunc } from './dees-s3-browser.demo.js';
|
||||
import type { IS3DataProvider, IS3ChangeEvent } from './interfaces.js';
|
||||
import './dees-s3-columns.js';
|
||||
import './dees-s3-keys.js';
|
||||
import './dees-s3-preview.js';
|
||||
import { demoFunc } from './dees-storage-browser.demo.js';
|
||||
import type { IStorageDataProvider, IStorageChangeEvent } from './interfaces.js';
|
||||
import './dees-storage-columns.js';
|
||||
import './dees-storage-keys.js';
|
||||
import './dees-storage-preview.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-s3-browser': DeesS3Browser;
|
||||
'dees-storage-browser': DeesStorageBrowser;
|
||||
}
|
||||
}
|
||||
|
||||
type TViewType = 'columns' | 'keys';
|
||||
|
||||
@customElement('dees-s3-browser')
|
||||
export class DeesS3Browser extends DeesElement {
|
||||
@customElement('dees-storage-browser')
|
||||
export class DeesStorageBrowser extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
public static demoGroups = ['Data View'];
|
||||
|
||||
@property({ type: Object })
|
||||
public accessor dataProvider: IS3DataProvider | null = null;
|
||||
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||
|
||||
@property({ type: String })
|
||||
public accessor bucketName: string = '';
|
||||
@@ -30,7 +30,7 @@ export class DeesS3Browser extends DeesElement {
|
||||
* Pass a function that takes a callback and returns an unsubscribe function.
|
||||
*/
|
||||
@property({ type: Object })
|
||||
public accessor onChangeEvent: ((callback: (event: IS3ChangeEvent) => void) => (() => void)) | null = null;
|
||||
public accessor onChangeEvent: ((callback: (event: IStorageChangeEvent) => void) => (() => void)) | null = null;
|
||||
|
||||
@state()
|
||||
private accessor viewType: TViewType = 'columns';
|
||||
@@ -288,12 +288,12 @@ export class DeesS3Browser extends DeesElement {
|
||||
}
|
||||
|
||||
try {
|
||||
this.changeUnsubscribe = this.onChangeEvent((event: IS3ChangeEvent) => {
|
||||
this.changeUnsubscribe = this.onChangeEvent((event: IStorageChangeEvent) => {
|
||||
this.handleChange(event);
|
||||
});
|
||||
this.isStreamConnected = true;
|
||||
} catch (error) {
|
||||
console.warn('[S3Browser] Failed to subscribe to changes:', error);
|
||||
console.warn('[StorageBrowser] Failed to subscribe to changes:', error);
|
||||
this.isStreamConnected = false;
|
||||
}
|
||||
}
|
||||
@@ -306,7 +306,7 @@ export class DeesS3Browser extends DeesElement {
|
||||
this.isStreamConnected = false;
|
||||
}
|
||||
|
||||
private handleChange(event: IS3ChangeEvent) {
|
||||
private handleChange(event: IStorageChangeEvent) {
|
||||
this.recentChangeCount++;
|
||||
this.refreshKey++;
|
||||
}
|
||||
@@ -395,24 +395,24 @@ export class DeesS3Browser extends DeesElement {
|
||||
<div class="main-view">
|
||||
${this.viewType === 'columns'
|
||||
? html`
|
||||
<dees-s3-columns
|
||||
<dees-storage-columns
|
||||
.dataProvider=${this.dataProvider}
|
||||
.bucketName=${this.bucketName}
|
||||
.currentPrefix=${this.currentPrefix}
|
||||
.refreshKey=${this.refreshKey}
|
||||
@key-selected=${this.handleKeySelected}
|
||||
@navigate=${this.handleNavigate}
|
||||
></dees-s3-columns>
|
||||
></dees-storage-columns>
|
||||
`
|
||||
: html`
|
||||
<dees-s3-keys
|
||||
<dees-storage-keys
|
||||
.dataProvider=${this.dataProvider}
|
||||
.bucketName=${this.bucketName}
|
||||
.currentPrefix=${this.currentPrefix}
|
||||
.refreshKey=${this.refreshKey}
|
||||
@key-selected=${this.handleKeySelected}
|
||||
@navigate=${this.handleNavigate}
|
||||
></dees-s3-keys>
|
||||
></dees-storage-keys>
|
||||
`}
|
||||
</div>
|
||||
|
||||
@@ -423,12 +423,12 @@ export class DeesS3Browser extends DeesElement {
|
||||
@mousedown=${this.startPreviewResize}
|
||||
></div>
|
||||
<div class="preview-panel">
|
||||
<dees-s3-preview
|
||||
<dees-storage-preview
|
||||
.dataProvider=${this.dataProvider}
|
||||
.bucketName=${this.bucketName}
|
||||
.objectKey=${this.selectedKey}
|
||||
@object-deleted=${this.handleObjectDeleted}
|
||||
></dees-s3-preview>
|
||||
></dees-storage-preview>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import type { IS3DataProvider, IS3Object, IColumn } from './interfaces.js';
|
||||
import type { IStorageDataProvider, IStorageObject, IColumn } from './interfaces.js';
|
||||
import { getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
|
||||
|
||||
// FileSystem API types for drag-and-drop folder support
|
||||
@@ -25,14 +25,14 @@ interface FileSystemDirectoryReader {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-s3-columns': DeesS3Columns;
|
||||
'dees-storage-columns': DeesStorageColumns;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-s3-columns')
|
||||
export class DeesS3Columns extends DeesElement {
|
||||
@customElement('dees-storage-columns')
|
||||
export class DeesStorageColumns extends DeesElement {
|
||||
@property({ type: Object })
|
||||
public accessor dataProvider: IS3DataProvider | null = null;
|
||||
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||
|
||||
@property({ type: String })
|
||||
public accessor bucketName: string = '';
|
||||
@@ -1,19 +1,19 @@
|
||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import type { IS3DataProvider, IS3Object } from './interfaces.js';
|
||||
import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
|
||||
import { formatSize, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-s3-keys': DeesS3Keys;
|
||||
'dees-storage-keys': DeesStorageKeys;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-s3-keys')
|
||||
export class DeesS3Keys extends DeesElement {
|
||||
@customElement('dees-storage-keys')
|
||||
export class DeesStorageKeys extends DeesElement {
|
||||
@property({ type: Object })
|
||||
public accessor dataProvider: IS3DataProvider | null = null;
|
||||
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||
|
||||
@property({ type: String })
|
||||
public accessor bucketName: string = '';
|
||||
@@ -25,7 +25,7 @@ export class DeesS3Keys extends DeesElement {
|
||||
public accessor refreshKey: number = 0;
|
||||
|
||||
@state()
|
||||
private accessor allKeys: IS3Object[] = [];
|
||||
private accessor allKeys: IStorageObject[] = [];
|
||||
|
||||
@state()
|
||||
private accessor prefixes: string[] = [];
|
||||
@@ -1,18 +1,18 @@
|
||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import type { IS3DataProvider } from './interfaces.js';
|
||||
import type { IStorageDataProvider } from './interfaces.js';
|
||||
import { formatSize, getFileName } from './utilities.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-s3-preview': DeesS3Preview;
|
||||
'dees-storage-preview': DeesStoragePreview;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-s3-preview')
|
||||
export class DeesS3Preview extends DeesElement {
|
||||
@customElement('dees-storage-preview')
|
||||
export class DeesStoragePreview extends DeesElement {
|
||||
@property({ type: Object })
|
||||
public accessor dataProvider: IS3DataProvider | null = null;
|
||||
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||
|
||||
@property({ type: String })
|
||||
public accessor bucketName: string = '';
|
||||
@@ -1,6 +1,6 @@
|
||||
export * from './dees-s3-browser.js';
|
||||
export * from './dees-s3-columns.js';
|
||||
export * from './dees-s3-keys.js';
|
||||
export * from './dees-s3-preview.js';
|
||||
export * from './dees-storage-browser.js';
|
||||
export * from './dees-storage-columns.js';
|
||||
export * from './dees-storage-keys.js';
|
||||
export * from './dees-storage-preview.js';
|
||||
export * from './interfaces.js';
|
||||
export { formatSize, formatCount, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
|
||||
@@ -1,15 +1,15 @@
|
||||
/**
|
||||
* S3 Data Provider interface - implement this to connect the S3 browser to your backend
|
||||
* Storage Data Provider interface - implement this to connect the storage browser to your backend
|
||||
*/
|
||||
|
||||
export interface IS3Object {
|
||||
export interface IStorageObject {
|
||||
key: string;
|
||||
size?: number;
|
||||
lastModified?: string;
|
||||
isPrefix?: boolean;
|
||||
}
|
||||
|
||||
export interface IS3ChangeEvent {
|
||||
export interface IStorageChangeEvent {
|
||||
type: 'add' | 'modify' | 'delete';
|
||||
key: string;
|
||||
bucket: string;
|
||||
@@ -17,8 +17,8 @@ export interface IS3ChangeEvent {
|
||||
lastModified?: Date;
|
||||
}
|
||||
|
||||
export interface IS3DataProvider {
|
||||
listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }>;
|
||||
export interface IStorageDataProvider {
|
||||
listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; prefixes: string[] }>;
|
||||
getObject(bucket: string, key: string): Promise<{ content: string; contentType: string; size: number; lastModified: string }>;
|
||||
putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean>;
|
||||
deleteObject(bucket: string, key: string): Promise<boolean>;
|
||||
@@ -30,7 +30,7 @@ export interface IS3DataProvider {
|
||||
|
||||
export interface IColumn {
|
||||
prefix: string;
|
||||
objects: IS3Object[];
|
||||
objects: IStorageObject[];
|
||||
prefixes: string[];
|
||||
selectedItem: string | null;
|
||||
width: number;
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Shared utilities for S3 browser components
|
||||
* Shared utilities for Storage browser components
|
||||
*/
|
||||
|
||||
export interface IMoveValidation {
|
||||
@@ -3,4 +3,4 @@ export * from './dees-dataview-codebox/index.js';
|
||||
export * from './dees-dataview-statusobject/index.js';
|
||||
export * from './dees-table/index.js';
|
||||
export * from './dees-statsgrid/index.js';
|
||||
export * from './dees-s3-browser/index.js';
|
||||
export * from './dees-storage-browser/index.js';
|
||||
|
||||
Reference in New Issue
Block a user