@securancy/file-explorer 1.0.6 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FileExplorer.svelte +128 -105
- package/dist/components/FileExplorer.svelte.d.ts +8 -10
- package/dist/components/FileExplorerBreadcrumb.svelte +21 -14
- package/dist/components/FileExplorerBreadcrumb.svelte.d.ts +2 -4
- package/dist/components/FileExplorerCreateDirectory.svelte +25 -23
- package/dist/components/FileExplorerCreateDirectory.svelte.d.ts +2 -4
- package/dist/components/FileExplorerDirectory.svelte +22 -18
- package/dist/components/FileExplorerDirectory.svelte.d.ts +2 -4
- package/dist/components/FileExplorerDirectoryColumn.svelte +39 -35
- package/dist/components/FileExplorerDirectoryColumn.svelte.d.ts +3 -5
- package/dist/components/FileExplorerDirectoryIndex.svelte +20 -14
- package/dist/components/FileExplorerDirectoryIndex.svelte.d.ts +2 -4
- package/dist/components/FileExplorerDisplayModeSwitcher.svelte +14 -10
- package/dist/components/FileExplorerDisplayModeSwitcher.svelte.d.ts +2 -4
- package/dist/components/FileExplorerFileDetailColumn.svelte +23 -18
- package/dist/components/FileExplorerFileDetailColumn.svelte.d.ts +2 -4
- package/dist/components/FileIcon.svelte +47 -41
- package/dist/components/FileIcon.svelte.d.ts +2 -4
- package/dist/file-explorer.pcss +10 -3
- package/dist/models/file-item.d.ts +2 -2
- package/dist/utilities/file-utilities.d.ts +0 -1
- package/dist/utilities/file-utilities.js +7 -7
- package/package.json +20 -32
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<script>import { createEventDispatcher } from
|
|
2
|
-
import {} from
|
|
3
|
-
import { resize, ResizeDirections } from
|
|
4
|
-
import { Icon, Popover, PopoverItem } from
|
|
5
|
-
import { getExtension, getItemHref } from
|
|
6
|
-
import FileIcon from
|
|
7
|
-
import { joinPaths } from
|
|
1
|
+
<script>import { createEventDispatcher } from 'svelte';
|
|
2
|
+
import {} from '..';
|
|
3
|
+
import { resize, ResizeDirections } from '@securancy/svelte-utilities';
|
|
4
|
+
import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
|
|
5
|
+
import { getExtension, getItemHref } from '../utilities/index.js';
|
|
6
|
+
import FileIcon from './FileIcon.svelte';
|
|
7
|
+
import { joinPaths } from '../utilities/index.js';
|
|
8
8
|
const dispatch = createEventDispatcher();
|
|
9
9
|
export let item;
|
|
10
10
|
export let sticky = false;
|
|
@@ -12,42 +12,42 @@ export let routePrefix;
|
|
|
12
12
|
export let canEdit;
|
|
13
13
|
export let translations;
|
|
14
14
|
export let activeFileItem;
|
|
15
|
-
let dragoverIndex = 0;
|
|
15
|
+
let dragoverIndex = 0; // Incremented/decremented when entering/leaving a child element of the column
|
|
16
16
|
let innerWidth = 0;
|
|
17
17
|
function addItem() {
|
|
18
|
-
|
|
18
|
+
dispatch('upload-file', { path: joinPaths(item.path, item.name) });
|
|
19
19
|
}
|
|
20
20
|
function createDirectory() {
|
|
21
|
-
|
|
21
|
+
dispatch('create-directory', { path: joinPaths(item.path, item.name) });
|
|
22
22
|
}
|
|
23
23
|
function handleDragEnter(event) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
event.stopPropagation();
|
|
26
|
+
dragoverIndex++;
|
|
27
27
|
}
|
|
28
28
|
function handleDrop(event) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
event.stopPropagation();
|
|
31
|
+
dragoverIndex = 0;
|
|
32
|
+
const eventData = { path: joinPaths(item.path, item.name) };
|
|
33
|
+
if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
|
|
34
|
+
eventData.files = event.dataTransfer.files;
|
|
35
|
+
}
|
|
36
|
+
dispatch('upload-file', eventData);
|
|
37
37
|
}
|
|
38
38
|
function handleDragLeave(event) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
event.preventDefault();
|
|
40
|
+
event.stopPropagation();
|
|
41
|
+
dragoverIndex--;
|
|
42
42
|
}
|
|
43
43
|
function handleDragEnd(event) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
event.stopPropagation();
|
|
46
|
+
dragoverIndex = 0;
|
|
47
47
|
}
|
|
48
48
|
function handleDragOver(event) {
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
event.preventDefault();
|
|
50
|
+
event.stopPropagation();
|
|
51
51
|
}
|
|
52
52
|
</script>
|
|
53
53
|
|
|
@@ -115,8 +115,7 @@ function handleDragOver(event) {
|
|
|
115
115
|
</div>
|
|
116
116
|
</div>
|
|
117
117
|
|
|
118
|
-
<style
|
|
119
|
-
/**
|
|
118
|
+
<style>/**
|
|
120
119
|
* Media queries and devices
|
|
121
120
|
*/
|
|
122
121
|
/**
|
|
@@ -176,7 +175,7 @@ function handleDragOver(event) {
|
|
|
176
175
|
z-index: 1;
|
|
177
176
|
}
|
|
178
177
|
.file-explorer__column::after {
|
|
179
|
-
content:
|
|
178
|
+
content: "";
|
|
180
179
|
position: absolute;
|
|
181
180
|
inset: 0;
|
|
182
181
|
pointer-events: none;
|
|
@@ -223,7 +222,7 @@ function handleDragOver(event) {
|
|
|
223
222
|
margin-left: auto;
|
|
224
223
|
}
|
|
225
224
|
.file-explorer__search {
|
|
226
|
-
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0
|
|
225
|
+
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
|
|
227
226
|
}
|
|
228
227
|
.file-explorer__list {
|
|
229
228
|
margin-bottom: var(--file-explorer-default-spacing);
|
|
@@ -361,6 +360,12 @@ function handleDragOver(event) {
|
|
|
361
360
|
.file-explorer__file-icon--large :global(i) {
|
|
362
361
|
font-size: var(--file-explorer-preview-icon-size);
|
|
363
362
|
}
|
|
363
|
+
.file-explorer__file-name {
|
|
364
|
+
min-width: 0;
|
|
365
|
+
}
|
|
366
|
+
.file-explorer__file-name--directory-index {
|
|
367
|
+
word-break: break-word;
|
|
368
|
+
}
|
|
364
369
|
.file-explorer__text--semi-bold {
|
|
365
370
|
font-weight: var(--file-explorer-text-semi-bold);
|
|
366
371
|
}
|
|
@@ -371,5 +376,4 @@ function handleDragOver(event) {
|
|
|
371
376
|
min-height: 50px;
|
|
372
377
|
height: 100%;
|
|
373
378
|
font-size: 25px;
|
|
374
|
-
}
|
|
375
|
-
</style>
|
|
379
|
+
}</style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
import type { UploadFileEvent } from './FileExplorer.svelte';
|
|
3
3
|
import { type DirectoryItem, type DocumentTranslations, type FileSystemItem } from '..';
|
|
4
4
|
import type { CreateDirectoryEvent } from './FileExplorer.svelte';
|
|
@@ -12,19 +12,17 @@ declare const __propDef: {
|
|
|
12
12
|
activeFileItem: FileSystemItem | undefined;
|
|
13
13
|
};
|
|
14
14
|
events: {
|
|
15
|
-
'scroll-back': CustomEvent<
|
|
15
|
+
'scroll-back': CustomEvent<undefined>;
|
|
16
16
|
'upload-file': CustomEvent<UploadFileEvent>;
|
|
17
17
|
'create-directory': CustomEvent<CreateDirectoryEvent>;
|
|
18
18
|
} & {
|
|
19
19
|
[evt: string]: CustomEvent<any>;
|
|
20
20
|
};
|
|
21
21
|
slots: {};
|
|
22
|
-
exports?: {} | undefined;
|
|
23
|
-
bindings?: string | undefined;
|
|
24
22
|
};
|
|
25
23
|
export type FileExplorerDirectoryColumnProps = typeof __propDef.props;
|
|
26
24
|
export type FileExplorerDirectoryColumnEvents = typeof __propDef.events;
|
|
27
25
|
export type FileExplorerDirectoryColumnSlots = typeof __propDef.slots;
|
|
28
|
-
export default class FileExplorerDirectoryColumn extends
|
|
26
|
+
export default class FileExplorerDirectoryColumn extends SvelteComponentTyped<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
|
|
29
27
|
}
|
|
30
28
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<script>import FileIcon from
|
|
2
|
-
import { createEventDispatcher } from
|
|
3
|
-
import { resize, ResizeDirections } from
|
|
4
|
-
import { Icon, Popover, PopoverItem } from
|
|
5
|
-
import { getExtension, getItemHref, joinPaths } from
|
|
1
|
+
<script>import FileIcon from './FileIcon.svelte';
|
|
2
|
+
import { createEventDispatcher } from 'svelte';
|
|
3
|
+
import { resize, ResizeDirections } from '@securancy/svelte-utilities';
|
|
4
|
+
import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
|
|
5
|
+
import { getExtension, getItemHref, joinPaths } from '../utilities/index.js';
|
|
6
6
|
const dispatch = createEventDispatcher();
|
|
7
7
|
export let item;
|
|
8
8
|
export let routePrefix;
|
|
@@ -11,10 +11,10 @@ export let canEdit;
|
|
|
11
11
|
export let activeFileItem;
|
|
12
12
|
let innerWidth = 0;
|
|
13
13
|
function addItem() {
|
|
14
|
-
|
|
14
|
+
dispatch('upload-file', { path: joinPaths(item.path, item.name) });
|
|
15
15
|
}
|
|
16
16
|
function createDirectory() {
|
|
17
|
-
|
|
17
|
+
dispatch('create-directory', { path: joinPaths(item.path, item.name) });
|
|
18
18
|
}
|
|
19
19
|
</script>
|
|
20
20
|
|
|
@@ -62,7 +62,9 @@ function createDirectory() {
|
|
|
62
62
|
{:else}
|
|
63
63
|
<FileIcon extension={getExtension(child.name)} size="grid" />
|
|
64
64
|
{/if}
|
|
65
|
-
<span
|
|
65
|
+
<span class="file-explorer__file-name file-explorer__file-name--directory-index">
|
|
66
|
+
{child.name}
|
|
67
|
+
</span>
|
|
66
68
|
</a>
|
|
67
69
|
{:else}
|
|
68
70
|
<p class="file-explorer__message">
|
|
@@ -74,8 +76,7 @@ function createDirectory() {
|
|
|
74
76
|
</div>
|
|
75
77
|
{/if}
|
|
76
78
|
|
|
77
|
-
<style
|
|
78
|
-
/**
|
|
79
|
+
<style>/**
|
|
79
80
|
* Media queries and devices
|
|
80
81
|
*/
|
|
81
82
|
/**
|
|
@@ -135,7 +136,7 @@ function createDirectory() {
|
|
|
135
136
|
z-index: 1;
|
|
136
137
|
}
|
|
137
138
|
.file-explorer__column::after {
|
|
138
|
-
content:
|
|
139
|
+
content: "";
|
|
139
140
|
position: absolute;
|
|
140
141
|
inset: 0;
|
|
141
142
|
pointer-events: none;
|
|
@@ -182,7 +183,7 @@ function createDirectory() {
|
|
|
182
183
|
margin-left: auto;
|
|
183
184
|
}
|
|
184
185
|
.file-explorer__search {
|
|
185
|
-
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0
|
|
186
|
+
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
|
|
186
187
|
}
|
|
187
188
|
.file-explorer__list {
|
|
188
189
|
margin-bottom: var(--file-explorer-default-spacing);
|
|
@@ -320,6 +321,12 @@ function createDirectory() {
|
|
|
320
321
|
.file-explorer__file-icon--large :global(i) {
|
|
321
322
|
font-size: var(--file-explorer-preview-icon-size);
|
|
322
323
|
}
|
|
324
|
+
.file-explorer__file-name {
|
|
325
|
+
min-width: 0;
|
|
326
|
+
}
|
|
327
|
+
.file-explorer__file-name--directory-index {
|
|
328
|
+
word-break: break-word;
|
|
329
|
+
}
|
|
323
330
|
.file-explorer__text--semi-bold {
|
|
324
331
|
font-weight: var(--file-explorer-text-semi-bold);
|
|
325
332
|
}
|
|
@@ -330,5 +337,4 @@ function createDirectory() {
|
|
|
330
337
|
min-height: 50px;
|
|
331
338
|
height: 100%;
|
|
332
339
|
font-size: 25px;
|
|
333
|
-
}
|
|
334
|
-
</style>
|
|
340
|
+
}</style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
import type { DirectoryItem, DocumentTranslations, FileSystemItem } from '../index.js';
|
|
3
3
|
import type { CreateDirectoryEvent, UploadFileEvent } from './FileExplorer.svelte';
|
|
4
4
|
declare const __propDef: {
|
|
@@ -16,12 +16,10 @@ declare const __propDef: {
|
|
|
16
16
|
[evt: string]: CustomEvent<any>;
|
|
17
17
|
};
|
|
18
18
|
slots: {};
|
|
19
|
-
exports?: {} | undefined;
|
|
20
|
-
bindings?: string | undefined;
|
|
21
19
|
};
|
|
22
20
|
export type FileExplorerDirectoryIndexProps = typeof __propDef.props;
|
|
23
21
|
export type FileExplorerDirectoryIndexEvents = typeof __propDef.events;
|
|
24
22
|
export type FileExplorerDirectoryIndexSlots = typeof __propDef.slots;
|
|
25
|
-
export default class FileExplorerDirectoryIndex extends
|
|
23
|
+
export default class FileExplorerDirectoryIndex extends SvelteComponentTyped<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
|
|
26
24
|
}
|
|
27
25
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<script>import { FileExplorerDisplayMode } from
|
|
2
|
-
import { Icon } from
|
|
1
|
+
<script>import { FileExplorerDisplayMode } from '../index.js';
|
|
2
|
+
import { Icon } from '@securancy/svelte-components';
|
|
3
3
|
export let displayMode;
|
|
4
4
|
export let translations;
|
|
5
5
|
let modes = Object.values(FileExplorerDisplayMode);
|
|
6
6
|
const modeIcons = {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
columns: 'fa-columns-3',
|
|
8
|
+
index: 'fa-grid',
|
|
9
9
|
};
|
|
10
10
|
</script>
|
|
11
11
|
|
|
@@ -25,8 +25,7 @@ const modeIcons = {
|
|
|
25
25
|
{/each}
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
|
-
<style
|
|
29
|
-
/**
|
|
28
|
+
<style>/**
|
|
30
29
|
* Media queries and devices
|
|
31
30
|
*/
|
|
32
31
|
/**
|
|
@@ -86,7 +85,7 @@ const modeIcons = {
|
|
|
86
85
|
z-index: 1;
|
|
87
86
|
}
|
|
88
87
|
.file-explorer__column::after {
|
|
89
|
-
content:
|
|
88
|
+
content: "";
|
|
90
89
|
position: absolute;
|
|
91
90
|
inset: 0;
|
|
92
91
|
pointer-events: none;
|
|
@@ -133,7 +132,7 @@ const modeIcons = {
|
|
|
133
132
|
margin-left: auto;
|
|
134
133
|
}
|
|
135
134
|
.file-explorer__search {
|
|
136
|
-
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0
|
|
135
|
+
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
|
|
137
136
|
}
|
|
138
137
|
.file-explorer__list {
|
|
139
138
|
margin-bottom: var(--file-explorer-default-spacing);
|
|
@@ -271,6 +270,12 @@ const modeIcons = {
|
|
|
271
270
|
.file-explorer__file-icon--large :global(i) {
|
|
272
271
|
font-size: var(--file-explorer-preview-icon-size);
|
|
273
272
|
}
|
|
273
|
+
.file-explorer__file-name {
|
|
274
|
+
min-width: 0;
|
|
275
|
+
}
|
|
276
|
+
.file-explorer__file-name--directory-index {
|
|
277
|
+
word-break: break-word;
|
|
278
|
+
}
|
|
274
279
|
.file-explorer__text--semi-bold {
|
|
275
280
|
font-weight: var(--file-explorer-text-semi-bold);
|
|
276
281
|
}
|
|
@@ -296,5 +301,4 @@ input[type="radio"] {
|
|
|
296
301
|
}
|
|
297
302
|
input[type="radio"]:checked + :global(i) {
|
|
298
303
|
color: var(--file-explorer-action-primary-color);
|
|
299
|
-
}
|
|
300
|
-
</style>
|
|
304
|
+
}</style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
import { type DocumentTranslations, FileExplorerDisplayMode } from '../index.js';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
@@ -9,12 +9,10 @@ declare const __propDef: {
|
|
|
9
9
|
[evt: string]: CustomEvent<any>;
|
|
10
10
|
};
|
|
11
11
|
slots: {};
|
|
12
|
-
exports?: {} | undefined;
|
|
13
|
-
bindings?: string | undefined;
|
|
14
12
|
};
|
|
15
13
|
export type FileExplorerDisplayModeSwitcherProps = typeof __propDef.props;
|
|
16
14
|
export type FileExplorerDisplayModeSwitcherEvents = typeof __propDef.events;
|
|
17
15
|
export type FileExplorerDisplayModeSwitcherSlots = typeof __propDef.slots;
|
|
18
|
-
export default class FileExplorerDisplayModeSwitcher extends
|
|
16
|
+
export default class FileExplorerDisplayModeSwitcher extends SvelteComponentTyped<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
|
|
19
17
|
}
|
|
20
18
|
export {};
|
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
<script>import { Card, Icon } from
|
|
2
|
-
import FileIcon from
|
|
3
|
-
import { resize, ResizeDirections } from
|
|
4
|
-
import { formatBytes, getExtension, isImage } from
|
|
5
|
-
import { DateTime } from
|
|
6
|
-
import { createEventDispatcher } from
|
|
1
|
+
<script>import { Card, Icon } from '@securancy/svelte-components';
|
|
2
|
+
import FileIcon from './FileIcon.svelte';
|
|
3
|
+
import { resize, ResizeDirections } from '@securancy/svelte-utilities';
|
|
4
|
+
import { formatBytes, getExtension, isImage } from '../utilities/index.js';
|
|
5
|
+
import { DateTime } from 'luxon';
|
|
6
|
+
import { createEventDispatcher } from 'svelte';
|
|
7
7
|
export let fileItem;
|
|
8
8
|
export let getFilePreview;
|
|
9
9
|
export let translations;
|
|
10
10
|
export let canEdit;
|
|
11
11
|
const dispatch = createEventDispatcher();
|
|
12
|
-
const fileDateFormat =
|
|
12
|
+
const fileDateFormat = 'cccc FF';
|
|
13
13
|
let filePreview;
|
|
14
14
|
let extension;
|
|
15
15
|
$: refresh(fileItem);
|
|
16
16
|
async function refresh(_fileItem) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
filePreview = await getFilePreview(_fileItem)
|
|
18
|
+
.catch((error) => {
|
|
19
|
+
console.error(error);
|
|
20
|
+
return undefined;
|
|
21
|
+
});
|
|
22
|
+
extension = getExtension(_fileItem.name);
|
|
22
23
|
}
|
|
23
24
|
</script>
|
|
24
25
|
|
|
@@ -86,8 +87,7 @@ async function refresh(_fileItem) {
|
|
|
86
87
|
</div>
|
|
87
88
|
</div>
|
|
88
89
|
|
|
89
|
-
<style
|
|
90
|
-
/**
|
|
90
|
+
<style>/**
|
|
91
91
|
* Media queries and devices
|
|
92
92
|
*/
|
|
93
93
|
/**
|
|
@@ -147,7 +147,7 @@ async function refresh(_fileItem) {
|
|
|
147
147
|
z-index: 1;
|
|
148
148
|
}
|
|
149
149
|
.file-explorer__column::after {
|
|
150
|
-
content:
|
|
150
|
+
content: "";
|
|
151
151
|
position: absolute;
|
|
152
152
|
inset: 0;
|
|
153
153
|
pointer-events: none;
|
|
@@ -194,7 +194,7 @@ async function refresh(_fileItem) {
|
|
|
194
194
|
margin-left: auto;
|
|
195
195
|
}
|
|
196
196
|
.file-explorer__search {
|
|
197
|
-
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0
|
|
197
|
+
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
|
|
198
198
|
}
|
|
199
199
|
.file-explorer__list {
|
|
200
200
|
margin-bottom: var(--file-explorer-default-spacing);
|
|
@@ -332,6 +332,12 @@ async function refresh(_fileItem) {
|
|
|
332
332
|
.file-explorer__file-icon--large :global(i) {
|
|
333
333
|
font-size: var(--file-explorer-preview-icon-size);
|
|
334
334
|
}
|
|
335
|
+
.file-explorer__file-name {
|
|
336
|
+
min-width: 0;
|
|
337
|
+
}
|
|
338
|
+
.file-explorer__file-name--directory-index {
|
|
339
|
+
word-break: break-word;
|
|
340
|
+
}
|
|
335
341
|
.file-explorer__text--semi-bold {
|
|
336
342
|
font-weight: var(--file-explorer-text-semi-bold);
|
|
337
343
|
}
|
|
@@ -342,5 +348,4 @@ async function refresh(_fileItem) {
|
|
|
342
348
|
min-height: 50px;
|
|
343
349
|
height: 100%;
|
|
344
350
|
font-size: 25px;
|
|
345
|
-
}
|
|
346
|
-
</style>
|
|
351
|
+
}</style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
import type { DocumentTranslations, FileItem, FilePreview } from '..';
|
|
3
3
|
import type { DeleteFileEvent } from './FileExplorer.svelte';
|
|
4
4
|
declare const __propDef: {
|
|
@@ -14,12 +14,10 @@ declare const __propDef: {
|
|
|
14
14
|
[evt: string]: CustomEvent<any>;
|
|
15
15
|
};
|
|
16
16
|
slots: {};
|
|
17
|
-
exports?: {} | undefined;
|
|
18
|
-
bindings?: string | undefined;
|
|
19
17
|
};
|
|
20
18
|
export type FileExplorerFileDetailColumnProps = typeof __propDef.props;
|
|
21
19
|
export type FileExplorerFileDetailColumnEvents = typeof __propDef.events;
|
|
22
20
|
export type FileExplorerFileDetailColumnSlots = typeof __propDef.slots;
|
|
23
|
-
export default class FileExplorerFileDetailColumn extends
|
|
21
|
+
export default class FileExplorerFileDetailColumn extends SvelteComponentTyped<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
|
|
24
22
|
}
|
|
25
23
|
export {};
|
|
@@ -1,43 +1,45 @@
|
|
|
1
|
-
<script>import { Icon } from
|
|
2
|
-
import { imageExtensions, videoExtensions } from
|
|
1
|
+
<script>import { Icon } from '@securancy/svelte-components';
|
|
2
|
+
import { imageExtensions, videoExtensions } from '../utilities/index.js';
|
|
3
3
|
export let extension;
|
|
4
|
-
export let size =
|
|
4
|
+
export let size = 'default';
|
|
5
5
|
let iconClass;
|
|
6
6
|
$: iconClass = determineIconString(extension);
|
|
7
7
|
function determineIconString(_extension) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
if (imageExtensions.includes(_extension))
|
|
9
|
+
return 'fa-file-image';
|
|
10
|
+
if (videoExtensions.includes(_extension))
|
|
11
|
+
return 'fa-file-video';
|
|
12
|
+
switch (_extension) {
|
|
13
|
+
case 'pdf': {
|
|
14
|
+
return 'fa-file-pdf';
|
|
15
|
+
}
|
|
16
|
+
case 'doc':
|
|
17
|
+
case 'docx': {
|
|
18
|
+
return 'fa-file-word';
|
|
19
|
+
}
|
|
20
|
+
case 'xls':
|
|
21
|
+
case 'xlsx': {
|
|
22
|
+
return 'fa-file-spreadsheet';
|
|
23
|
+
}
|
|
24
|
+
case 'ppt':
|
|
25
|
+
case 'pptx': {
|
|
26
|
+
return 'fa-file-powerpoint';
|
|
27
|
+
}
|
|
28
|
+
case 'csv': {
|
|
29
|
+
return 'fa-file-csv';
|
|
30
|
+
}
|
|
31
|
+
case 'txt': {
|
|
32
|
+
return 'fa-file-lines';
|
|
33
|
+
}
|
|
34
|
+
case 'zip':
|
|
35
|
+
case 'tar':
|
|
36
|
+
case 'rar': {
|
|
37
|
+
return 'fa-file-zipper';
|
|
38
|
+
}
|
|
39
|
+
default: {
|
|
40
|
+
return 'fa-file';
|
|
41
|
+
}
|
|
13
42
|
}
|
|
14
|
-
case "doc":
|
|
15
|
-
case "docx": {
|
|
16
|
-
return "fa-file-word";
|
|
17
|
-
}
|
|
18
|
-
case "xls":
|
|
19
|
-
case "xlsx": {
|
|
20
|
-
return "fa-file-spreadsheet";
|
|
21
|
-
}
|
|
22
|
-
case "ppt":
|
|
23
|
-
case "pptx": {
|
|
24
|
-
return "fa-file-powerpoint";
|
|
25
|
-
}
|
|
26
|
-
case "csv": {
|
|
27
|
-
return "fa-file-csv";
|
|
28
|
-
}
|
|
29
|
-
case "txt": {
|
|
30
|
-
return "fa-file-lines";
|
|
31
|
-
}
|
|
32
|
-
case "zip":
|
|
33
|
-
case "tar":
|
|
34
|
-
case "rar": {
|
|
35
|
-
return "fa-file-zipper";
|
|
36
|
-
}
|
|
37
|
-
default: {
|
|
38
|
-
return "fa-file";
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
43
|
}
|
|
42
44
|
</script>
|
|
43
45
|
|
|
@@ -53,8 +55,7 @@ function determineIconString(_extension) {
|
|
|
53
55
|
{/if}
|
|
54
56
|
{/if}
|
|
55
57
|
|
|
56
|
-
<style
|
|
57
|
-
/**
|
|
58
|
+
<style>/**
|
|
58
59
|
* Media queries and devices
|
|
59
60
|
*/
|
|
60
61
|
/**
|
|
@@ -114,7 +115,7 @@ function determineIconString(_extension) {
|
|
|
114
115
|
z-index: 1;
|
|
115
116
|
}
|
|
116
117
|
.file-explorer__column::after {
|
|
117
|
-
content:
|
|
118
|
+
content: "";
|
|
118
119
|
position: absolute;
|
|
119
120
|
inset: 0;
|
|
120
121
|
pointer-events: none;
|
|
@@ -161,7 +162,7 @@ function determineIconString(_extension) {
|
|
|
161
162
|
margin-left: auto;
|
|
162
163
|
}
|
|
163
164
|
.file-explorer__search {
|
|
164
|
-
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0
|
|
165
|
+
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
|
|
165
166
|
}
|
|
166
167
|
.file-explorer__list {
|
|
167
168
|
margin-bottom: var(--file-explorer-default-spacing);
|
|
@@ -299,6 +300,12 @@ function determineIconString(_extension) {
|
|
|
299
300
|
.file-explorer__file-icon--large :global(i) {
|
|
300
301
|
font-size: var(--file-explorer-preview-icon-size);
|
|
301
302
|
}
|
|
303
|
+
.file-explorer__file-name {
|
|
304
|
+
min-width: 0;
|
|
305
|
+
}
|
|
306
|
+
.file-explorer__file-name--directory-index {
|
|
307
|
+
word-break: break-word;
|
|
308
|
+
}
|
|
302
309
|
.file-explorer__text--semi-bold {
|
|
303
310
|
font-weight: var(--file-explorer-text-semi-bold);
|
|
304
311
|
}
|
|
@@ -309,5 +316,4 @@ function determineIconString(_extension) {
|
|
|
309
316
|
min-height: 50px;
|
|
310
317
|
height: 100%;
|
|
311
318
|
font-size: 25px;
|
|
312
|
-
}
|
|
313
|
-
</style>
|
|
319
|
+
}</style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
4
|
extension: string;
|
|
@@ -8,12 +8,10 @@ declare const __propDef: {
|
|
|
8
8
|
[evt: string]: CustomEvent<any>;
|
|
9
9
|
};
|
|
10
10
|
slots: {};
|
|
11
|
-
exports?: {} | undefined;
|
|
12
|
-
bindings?: string | undefined;
|
|
13
11
|
};
|
|
14
12
|
export type FileIconProps = typeof __propDef.props;
|
|
15
13
|
export type FileIconEvents = typeof __propDef.events;
|
|
16
14
|
export type FileIconSlots = typeof __propDef.slots;
|
|
17
|
-
export default class FileIcon extends
|
|
15
|
+
export default class FileIcon extends SvelteComponentTyped<FileIconProps, FileIconEvents, FileIconSlots> {
|
|
18
16
|
}
|
|
19
17
|
export {};
|
package/dist/file-explorer.pcss
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
2
1
|
@import url("@securancy/svelte-components/styles/custom-media.pcss");
|
|
3
2
|
|
|
4
3
|
.file-explorer {
|
|
@@ -64,7 +63,7 @@
|
|
|
64
63
|
}
|
|
65
64
|
|
|
66
65
|
&::after {
|
|
67
|
-
content:
|
|
66
|
+
content: "";
|
|
68
67
|
position: absolute;
|
|
69
68
|
inset: 0;
|
|
70
69
|
pointer-events: none;
|
|
@@ -121,7 +120,7 @@
|
|
|
121
120
|
}
|
|
122
121
|
|
|
123
122
|
&__search {
|
|
124
|
-
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0
|
|
123
|
+
padding: calc(var(--file-explorer-default-spacing) * 0.5) calc(var(--file-explorer-default-spacing) * 0.5) 0;
|
|
125
124
|
}
|
|
126
125
|
|
|
127
126
|
&__list {
|
|
@@ -292,6 +291,14 @@
|
|
|
292
291
|
}
|
|
293
292
|
}
|
|
294
293
|
|
|
294
|
+
&__file-name {
|
|
295
|
+
min-width: 0;
|
|
296
|
+
|
|
297
|
+
&--directory-index {
|
|
298
|
+
word-break: break-word;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
|
|
295
302
|
&__text--semi-bold {
|
|
296
303
|
font-weight: var(--file-explorer-text-semi-bold);
|
|
297
304
|
}
|
|
@@ -5,6 +5,5 @@ export declare const imageExtensions: string[];
|
|
|
5
5
|
export declare const videoExtensions: string[];
|
|
6
6
|
export declare function isImage(path: string): boolean;
|
|
7
7
|
export declare function formatBytes(bytes: number, decimals?: number): string;
|
|
8
|
-
export declare function formatBytesParts(bytes: number, decimals?: number): [number, string];
|
|
9
8
|
export declare function joinPaths(...paths: string[]): string;
|
|
10
9
|
export declare function pathsEqual(path1: string, path2: string): boolean;
|