Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 42317459ff | |||
| 932db338c6 | |||
| bc4b87b83a | |||
| eb055e7214 | |||
| c55eb948fe | |||
| 35779209ea |
18
changelog.md
18
changelog.md
@@ -1,5 +1,23 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 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)
|
## 2026-03-12 - 3.48.2 - fix(repo)
|
||||||
no changes to commit
|
no changes to commit
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@design.estate/dees-catalog",
|
"name": "@design.estate/dees-catalog",
|
||||||
"version": "3.48.2",
|
"version": "3.48.5",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
"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",
|
"main": "dist_ts_web/index.js",
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@design.estate/dees-catalog',
|
name: '@design.estate/dees-catalog',
|
||||||
version: '3.48.2',
|
version: '3.48.5',
|
||||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
import { html } from '@design.estate/dees-element';
|
import { html } from '@design.estate/dees-element';
|
||||||
import type { IS3DataProvider, IS3Object } from './interfaces.js';
|
import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
|
||||||
import './dees-s3-browser.js';
|
import './dees-storage-browser.js';
|
||||||
|
|
||||||
// Mock in-memory S3 data provider for demo purposes
|
// Mock in-memory storage data provider for demo purposes
|
||||||
class MockS3DataProvider implements IS3DataProvider {
|
class MockStorageDataProvider implements IStorageDataProvider {
|
||||||
private objects: Map<string, { content: string; contentType: string; size: number; lastModified: string }> = new Map();
|
private objects: Map<string, { content: string; contentType: string; size: number; lastModified: string }> = new Map();
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
const now = new Date().toISOString();
|
const now = new Date().toISOString();
|
||||||
// Seed with sample data
|
// Seed with sample data
|
||||||
this.objects.set('documents/readme.md', {
|
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',
|
contentType: 'text/markdown',
|
||||||
size: 42,
|
size: 42,
|
||||||
lastModified: now,
|
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 pfx = prefix || '';
|
||||||
const objects: IS3Object[] = [];
|
const objects: IStorageObject[] = [];
|
||||||
const prefixes = new Set<string>();
|
const prefixes = new Set<string>();
|
||||||
|
|
||||||
for (const [key, data] of this.objects) {
|
for (const [key, data] of this.objects) {
|
||||||
@@ -148,9 +148,9 @@ export const demoFunc = () => html`
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="demo-container">
|
<div class="demo-container">
|
||||||
<dees-s3-browser
|
<dees-storage-browser
|
||||||
.dataProvider=${new MockS3DataProvider()}
|
.dataProvider=${new MockStorageDataProvider()}
|
||||||
.bucketName=${'demo-bucket'}
|
.bucketName=${'demo-bucket'}
|
||||||
></dees-s3-browser>
|
></dees-storage-browser>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -1,26 +1,26 @@
|
|||||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||||
import { themeDefaultStyles } from '../../00theme.js';
|
import { themeDefaultStyles } from '../../00theme.js';
|
||||||
import { demoFunc } from './dees-s3-browser.demo.js';
|
import { demoFunc } from './dees-storage-browser.demo.js';
|
||||||
import type { IS3DataProvider, IS3ChangeEvent } from './interfaces.js';
|
import type { IStorageDataProvider, IStorageChangeEvent } from './interfaces.js';
|
||||||
import './dees-s3-columns.js';
|
import './dees-storage-columns.js';
|
||||||
import './dees-s3-keys.js';
|
import './dees-storage-keys.js';
|
||||||
import './dees-s3-preview.js';
|
import './dees-storage-preview.js';
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'dees-s3-browser': DeesS3Browser;
|
'dees-storage-browser': DeesStorageBrowser;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
type TViewType = 'columns' | 'keys';
|
type TViewType = 'columns' | 'keys';
|
||||||
|
|
||||||
@customElement('dees-s3-browser')
|
@customElement('dees-storage-browser')
|
||||||
export class DeesS3Browser extends DeesElement {
|
export class DeesStorageBrowser extends DeesElement {
|
||||||
public static demo = demoFunc;
|
public static demo = demoFunc;
|
||||||
public static demoGroups = ['Data View'];
|
public static demoGroups = ['Data View'];
|
||||||
|
|
||||||
@property({ type: Object })
|
@property({ type: Object })
|
||||||
public accessor dataProvider: IS3DataProvider | null = null;
|
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||||
|
|
||||||
@property({ type: String })
|
@property({ type: String })
|
||||||
public accessor bucketName: 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.
|
* Pass a function that takes a callback and returns an unsubscribe function.
|
||||||
*/
|
*/
|
||||||
@property({ type: Object })
|
@property({ type: Object })
|
||||||
public accessor onChangeEvent: ((callback: (event: IS3ChangeEvent) => void) => (() => void)) | null = null;
|
public accessor onChangeEvent: ((callback: (event: IStorageChangeEvent) => void) => (() => void)) | null = null;
|
||||||
|
|
||||||
@state()
|
@state()
|
||||||
private accessor viewType: TViewType = 'columns';
|
private accessor viewType: TViewType = 'columns';
|
||||||
@@ -288,12 +288,12 @@ export class DeesS3Browser extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
this.changeUnsubscribe = this.onChangeEvent((event: IS3ChangeEvent) => {
|
this.changeUnsubscribe = this.onChangeEvent((event: IStorageChangeEvent) => {
|
||||||
this.handleChange(event);
|
this.handleChange(event);
|
||||||
});
|
});
|
||||||
this.isStreamConnected = true;
|
this.isStreamConnected = true;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn('[S3Browser] Failed to subscribe to changes:', error);
|
console.warn('[StorageBrowser] Failed to subscribe to changes:', error);
|
||||||
this.isStreamConnected = false;
|
this.isStreamConnected = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -306,7 +306,7 @@ export class DeesS3Browser extends DeesElement {
|
|||||||
this.isStreamConnected = false;
|
this.isStreamConnected = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleChange(event: IS3ChangeEvent) {
|
private handleChange(event: IStorageChangeEvent) {
|
||||||
this.recentChangeCount++;
|
this.recentChangeCount++;
|
||||||
this.refreshKey++;
|
this.refreshKey++;
|
||||||
}
|
}
|
||||||
@@ -395,24 +395,24 @@ export class DeesS3Browser extends DeesElement {
|
|||||||
<div class="main-view">
|
<div class="main-view">
|
||||||
${this.viewType === 'columns'
|
${this.viewType === 'columns'
|
||||||
? html`
|
? html`
|
||||||
<dees-s3-columns
|
<dees-storage-columns
|
||||||
.dataProvider=${this.dataProvider}
|
.dataProvider=${this.dataProvider}
|
||||||
.bucketName=${this.bucketName}
|
.bucketName=${this.bucketName}
|
||||||
.currentPrefix=${this.currentPrefix}
|
.currentPrefix=${this.currentPrefix}
|
||||||
.refreshKey=${this.refreshKey}
|
.refreshKey=${this.refreshKey}
|
||||||
@key-selected=${this.handleKeySelected}
|
@key-selected=${this.handleKeySelected}
|
||||||
@navigate=${this.handleNavigate}
|
@navigate=${this.handleNavigate}
|
||||||
></dees-s3-columns>
|
></dees-storage-columns>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<dees-s3-keys
|
<dees-storage-keys
|
||||||
.dataProvider=${this.dataProvider}
|
.dataProvider=${this.dataProvider}
|
||||||
.bucketName=${this.bucketName}
|
.bucketName=${this.bucketName}
|
||||||
.currentPrefix=${this.currentPrefix}
|
.currentPrefix=${this.currentPrefix}
|
||||||
.refreshKey=${this.refreshKey}
|
.refreshKey=${this.refreshKey}
|
||||||
@key-selected=${this.handleKeySelected}
|
@key-selected=${this.handleKeySelected}
|
||||||
@navigate=${this.handleNavigate}
|
@navigate=${this.handleNavigate}
|
||||||
></dees-s3-keys>
|
></dees-storage-keys>
|
||||||
`}
|
`}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -423,12 +423,12 @@ export class DeesS3Browser extends DeesElement {
|
|||||||
@mousedown=${this.startPreviewResize}
|
@mousedown=${this.startPreviewResize}
|
||||||
></div>
|
></div>
|
||||||
<div class="preview-panel">
|
<div class="preview-panel">
|
||||||
<dees-s3-preview
|
<dees-storage-preview
|
||||||
.dataProvider=${this.dataProvider}
|
.dataProvider=${this.dataProvider}
|
||||||
.bucketName=${this.bucketName}
|
.bucketName=${this.bucketName}
|
||||||
.objectKey=${this.selectedKey}
|
.objectKey=${this.selectedKey}
|
||||||
@object-deleted=${this.handleObjectDeleted}
|
@object-deleted=${this.handleObjectDeleted}
|
||||||
></dees-s3-preview>
|
></dees-storage-preview>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ''}
|
: ''}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||||
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
||||||
import { themeDefaultStyles } from '../../00theme.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';
|
import { getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
|
||||||
|
|
||||||
// FileSystem API types for drag-and-drop folder support
|
// FileSystem API types for drag-and-drop folder support
|
||||||
@@ -25,14 +25,14 @@ interface FileSystemDirectoryReader {
|
|||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'dees-s3-columns': DeesS3Columns;
|
'dees-storage-columns': DeesStorageColumns;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('dees-s3-columns')
|
@customElement('dees-storage-columns')
|
||||||
export class DeesS3Columns extends DeesElement {
|
export class DeesStorageColumns extends DeesElement {
|
||||||
@property({ type: Object })
|
@property({ type: Object })
|
||||||
public accessor dataProvider: IS3DataProvider | null = null;
|
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||||
|
|
||||||
@property({ type: String })
|
@property({ type: String })
|
||||||
public accessor bucketName: string = '';
|
public accessor bucketName: string = '';
|
||||||
@@ -1,19 +1,19 @@
|
|||||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||||
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
|
||||||
import { themeDefaultStyles } from '../../00theme.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';
|
import { formatSize, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'dees-s3-keys': DeesS3Keys;
|
'dees-storage-keys': DeesStorageKeys;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('dees-s3-keys')
|
@customElement('dees-storage-keys')
|
||||||
export class DeesS3Keys extends DeesElement {
|
export class DeesStorageKeys extends DeesElement {
|
||||||
@property({ type: Object })
|
@property({ type: Object })
|
||||||
public accessor dataProvider: IS3DataProvider | null = null;
|
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||||
|
|
||||||
@property({ type: String })
|
@property({ type: String })
|
||||||
public accessor bucketName: string = '';
|
public accessor bucketName: string = '';
|
||||||
@@ -25,7 +25,7 @@ export class DeesS3Keys extends DeesElement {
|
|||||||
public accessor refreshKey: number = 0;
|
public accessor refreshKey: number = 0;
|
||||||
|
|
||||||
@state()
|
@state()
|
||||||
private accessor allKeys: IS3Object[] = [];
|
private accessor allKeys: IStorageObject[] = [];
|
||||||
|
|
||||||
@state()
|
@state()
|
||||||
private accessor prefixes: string[] = [];
|
private accessor prefixes: string[] = [];
|
||||||
@@ -1,18 +1,18 @@
|
|||||||
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
|
||||||
import { themeDefaultStyles } from '../../00theme.js';
|
import { themeDefaultStyles } from '../../00theme.js';
|
||||||
import type { IS3DataProvider } from './interfaces.js';
|
import type { IStorageDataProvider } from './interfaces.js';
|
||||||
import { formatSize, getFileName } from './utilities.js';
|
import { formatSize, getFileName } from './utilities.js';
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
'dees-s3-preview': DeesS3Preview;
|
'dees-storage-preview': DeesStoragePreview;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement('dees-s3-preview')
|
@customElement('dees-storage-preview')
|
||||||
export class DeesS3Preview extends DeesElement {
|
export class DeesStoragePreview extends DeesElement {
|
||||||
@property({ type: Object })
|
@property({ type: Object })
|
||||||
public accessor dataProvider: IS3DataProvider | null = null;
|
public accessor dataProvider: IStorageDataProvider | null = null;
|
||||||
|
|
||||||
@property({ type: String })
|
@property({ type: String })
|
||||||
public accessor bucketName: string = '';
|
public accessor bucketName: string = '';
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
export * from './dees-s3-browser.js';
|
export * from './dees-storage-browser.js';
|
||||||
export * from './dees-s3-columns.js';
|
export * from './dees-storage-columns.js';
|
||||||
export * from './dees-s3-keys.js';
|
export * from './dees-storage-keys.js';
|
||||||
export * from './dees-s3-preview.js';
|
export * from './dees-storage-preview.js';
|
||||||
export * from './interfaces.js';
|
export * from './interfaces.js';
|
||||||
export { formatSize, formatCount, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.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;
|
key: string;
|
||||||
size?: number;
|
size?: number;
|
||||||
lastModified?: string;
|
lastModified?: string;
|
||||||
isPrefix?: boolean;
|
isPrefix?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IS3ChangeEvent {
|
export interface IStorageChangeEvent {
|
||||||
type: 'add' | 'modify' | 'delete';
|
type: 'add' | 'modify' | 'delete';
|
||||||
key: string;
|
key: string;
|
||||||
bucket: string;
|
bucket: string;
|
||||||
@@ -17,8 +17,8 @@ export interface IS3ChangeEvent {
|
|||||||
lastModified?: Date;
|
lastModified?: Date;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IS3DataProvider {
|
export interface IStorageDataProvider {
|
||||||
listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }>;
|
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 }>;
|
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>;
|
putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean>;
|
||||||
deleteObject(bucket: string, key: string): Promise<boolean>;
|
deleteObject(bucket: string, key: string): Promise<boolean>;
|
||||||
@@ -30,7 +30,7 @@ export interface IS3DataProvider {
|
|||||||
|
|
||||||
export interface IColumn {
|
export interface IColumn {
|
||||||
prefix: string;
|
prefix: string;
|
||||||
objects: IS3Object[];
|
objects: IStorageObject[];
|
||||||
prefixes: string[];
|
prefixes: string[];
|
||||||
selectedItem: string | null;
|
selectedItem: string | null;
|
||||||
width: number;
|
width: number;
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* Shared utilities for S3 browser components
|
* Shared utilities for Storage browser components
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export interface IMoveValidation {
|
export interface IMoveValidation {
|
||||||
@@ -3,4 +3,4 @@ export * from './dees-dataview-codebox/index.js';
|
|||||||
export * from './dees-dataview-statusobject/index.js';
|
export * from './dees-dataview-statusobject/index.js';
|
||||||
export * from './dees-table/index.js';
|
export * from './dees-table/index.js';
|
||||||
export * from './dees-statsgrid/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