mirror of
https://github.com/garraflavatra/rolens.git
synced 2025-07-16 21:14:05 +00:00
Many at once - this seems a good time to commit
This commit is contained in:
@ -11,14 +11,20 @@
|
||||
export let activePath = [];
|
||||
export let level = 0;
|
||||
export let striped = true;
|
||||
export let hideObjectIndicators = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let childrenOpen = {};
|
||||
let _items = [];
|
||||
|
||||
$: _items = objectToArray(items).map(item => {
|
||||
item.children = objectToArray(item.children);
|
||||
return item;
|
||||
});
|
||||
$: refresh(hideObjectIndicators, items);
|
||||
|
||||
function refresh(hideObjectIndicators, items) {
|
||||
_items = objectToArray(items).map(item => {
|
||||
item.children = objectToArray(item.children);
|
||||
return item;
|
||||
});
|
||||
}
|
||||
|
||||
function objectToArray(obj) {
|
||||
if (Array.isArray(obj)) {
|
||||
@ -56,7 +62,7 @@
|
||||
}
|
||||
|
||||
function doubleClick(itemKey) {
|
||||
toggleChildren(itemKey, false);
|
||||
// toggleChildren(itemKey, false);
|
||||
dispatch('trigger', { level, itemKey });
|
||||
}
|
||||
|
||||
@ -67,17 +73,20 @@
|
||||
|
||||
function formatValue(value) {
|
||||
if (Array.isArray(value)) {
|
||||
return '[...]';
|
||||
}
|
||||
if (typeof value === 'object') {
|
||||
return '{...}';
|
||||
}
|
||||
if (value === undefined || value === null) {
|
||||
return '';
|
||||
return hideObjectIndicators ? '' : '[...]';
|
||||
}
|
||||
if (typeof value === 'number' || typeof value === 'boolean') {
|
||||
return String(value);
|
||||
}
|
||||
if ((value === undefined) || (value === null)) {
|
||||
return '';
|
||||
}
|
||||
if (new Date(value).toString() !== 'Invalid Date') {
|
||||
return new Date(value);
|
||||
}
|
||||
if (typeof value === 'object') {
|
||||
return hideObjectIndicators ? '' : '{...}';
|
||||
}
|
||||
if (String(value).length <= 1000) {
|
||||
return value;
|
||||
}
|
||||
@ -118,6 +127,7 @@
|
||||
{#if item.children && childrenOpen[item[key]]}
|
||||
<svelte:self
|
||||
{columns}
|
||||
{hideObjectIndicators}
|
||||
{key}
|
||||
{striped}
|
||||
path={[ ...path, item[key] ]}
|
||||
@ -150,7 +160,7 @@
|
||||
}
|
||||
|
||||
td .value {
|
||||
height: 2.1ex;
|
||||
height: 15px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
export let key = 'id';
|
||||
export let activePath = [];
|
||||
export let striped = true;
|
||||
export let hideObjectIndicators = false;
|
||||
</script>
|
||||
|
||||
<div class="grid">
|
||||
@ -24,7 +25,16 @@
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<GridItems {items} {columns} {key} {striped} bind:activePath on:select on:trigger />
|
||||
<GridItems
|
||||
{items}
|
||||
{columns}
|
||||
{key}
|
||||
{striped}
|
||||
{hideObjectIndicators}
|
||||
bind:activePath
|
||||
on:select
|
||||
on:trigger
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
58
frontend/src/components/icon.svelte
vendored
58
frontend/src/components/icon.svelte
vendored
@ -2,28 +2,36 @@
|
||||
export let name = '';
|
||||
</script>
|
||||
|
||||
{#if name === 'radio'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-radio"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg>
|
||||
{:else if name === 'chev-l'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
||||
{:else if name === 'chev-r'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
||||
{:else if name === 'chev-d'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
{:else if name === 'db'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
|
||||
{:else if name === 'x'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
{:else if name === '+'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
{:else if name === '-'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
{:else if name === 'reload'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||||
{:else if name === 'clipboard'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
|
||||
{:else if name === 'edit'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
{:else if name === 'check'}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
||||
{/if}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
{#if name === 'radio'}
|
||||
<circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
|
||||
{:else if name === 'chev-l'}
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
{:else if name === 'chev-r'}
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
{:else if name === 'chev-d'}
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
{:else if name === 'db'}
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
|
||||
{:else if name === 'x'}
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
{:else if name === '+'}
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
{:else if name === '-'}
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
{:else if name === 'reload'}
|
||||
<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
||||
{:else if name === 'clipboard'}
|
||||
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||||
{:else if name === 'edit'}
|
||||
<path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||||
{:else if name === 'check'}
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||
{:else if name === 'list'}
|
||||
<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
|
||||
{:else if name === 'table'}
|
||||
<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
|
||||
{:else if name === 'cog'}
|
||||
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
@ -26,12 +26,13 @@
|
||||
|
||||
function keydown(event) {
|
||||
if ((event.key === 'Escape') && (level === numberOfModalsOpen)) {
|
||||
event.preventDefault();
|
||||
show = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown|preventDefault={keydown} />
|
||||
<svelte:window on:keydown={keydown} />
|
||||
|
||||
{#if show}
|
||||
<div class="modal outer" on:mousedown|self={() => show = false} transition:fade>
|
||||
@ -94,7 +95,6 @@
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
@ -114,6 +114,9 @@
|
||||
.content.padded {
|
||||
padding: 1rem;
|
||||
}
|
||||
header + .content.padded {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1rem;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
export let data = [];
|
||||
export let key = '_id';
|
||||
export let activePath = [];
|
||||
export let hideObjectIndicators = false;
|
||||
|
||||
const columns = [
|
||||
{ key: 'key', label: 'Key' },
|
||||
@ -76,4 +77,5 @@
|
||||
bind:activePath
|
||||
{columns}
|
||||
{items}
|
||||
{hideObjectIndicators}
|
||||
/>
|
||||
|
||||
@ -23,14 +23,9 @@
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.tabs {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.tabs ul {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
.tabs li {
|
||||
@ -41,11 +36,13 @@
|
||||
width: 100%;
|
||||
padding: 0.7rem 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-right: none;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
}
|
||||
.tabs li:last-child button {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
.tabs li.active button {
|
||||
color: #fff;
|
||||
background-color: #00008b;
|
||||
|
||||
Reference in New Issue
Block a user