@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.
@@ -1,10 +1,10 @@
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";
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
- dispatch("upload-file", { path: joinPaths(item.path, item.name) });
18
+ dispatch('upload-file', { path: joinPaths(item.path, item.name) });
19
19
  }
20
20
  function createDirectory() {
21
- dispatch("create-directory", { path: joinPaths(item.path, item.name) });
21
+ dispatch('create-directory', { path: joinPaths(item.path, item.name) });
22
22
  }
23
23
  function handleDragEnter(event) {
24
- event.preventDefault();
25
- event.stopPropagation();
26
- dragoverIndex++;
24
+ event.preventDefault();
25
+ event.stopPropagation();
26
+ dragoverIndex++;
27
27
  }
28
28
  function handleDrop(event) {
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);
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
- event.preventDefault();
40
- event.stopPropagation();
41
- dragoverIndex--;
39
+ event.preventDefault();
40
+ event.stopPropagation();
41
+ dragoverIndex--;
42
42
  }
43
43
  function handleDragEnd(event) {
44
- event.preventDefault();
45
- event.stopPropagation();
46
- dragoverIndex = 0;
44
+ event.preventDefault();
45
+ event.stopPropagation();
46
+ dragoverIndex = 0;
47
47
  }
48
48
  function handleDragOver(event) {
49
- event.preventDefault();
50
- event.stopPropagation();
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>/* eslint-disable */
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 calc(var(--file-explorer-default-spacing) * 0.5);
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 { SvelteComponent } from "svelte";
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<void>;
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 SvelteComponent<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
26
+ export default class FileExplorerDirectoryColumn extends SvelteComponentTyped<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
29
27
  }
30
28
  export {};
@@ -1,8 +1,8 @@
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";
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
- dispatch("upload-file", { path: joinPaths(item.path, item.name) });
14
+ dispatch('upload-file', { path: joinPaths(item.path, item.name) });
15
15
  }
16
16
  function createDirectory() {
17
- dispatch("create-directory", { path: joinPaths(item.path, item.name) });
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>{child.name}</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>/* eslint-disable */
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 calc(var(--file-explorer-default-spacing) * 0.5);
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 { SvelteComponent } from "svelte";
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 SvelteComponent<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
23
+ export default class FileExplorerDirectoryIndex extends SvelteComponentTyped<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
26
24
  }
27
25
  export {};
@@ -1,11 +1,11 @@
1
- <script>import { FileExplorerDisplayMode } from "../index.js";
2
- import { Icon } from "@securancy/svelte-components";
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
- columns: "fa-columns-3",
8
- index: "fa-grid"
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>/* eslint-disable */
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 calc(var(--file-explorer-default-spacing) * 0.5);
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 { SvelteComponent } from "svelte";
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 SvelteComponent<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
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 "@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";
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 = "cccc FF";
12
+ const fileDateFormat = 'cccc FF';
13
13
  let filePreview;
14
14
  let extension;
15
15
  $: refresh(fileItem);
16
16
  async function refresh(_fileItem) {
17
- filePreview = await getFilePreview(_fileItem).catch((error) => {
18
- console.error(error);
19
- return void 0;
20
- });
21
- extension = getExtension(_fileItem.name);
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>/* eslint-disable */
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 calc(var(--file-explorer-default-spacing) * 0.5);
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 { SvelteComponent } from "svelte";
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 SvelteComponent<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
21
+ export default class FileExplorerFileDetailColumn extends SvelteComponentTyped<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
24
22
  }
25
23
  export {};
@@ -1,43 +1,45 @@
1
- <script>import { Icon } from "@securancy/svelte-components";
2
- import { imageExtensions, videoExtensions } from "../utilities/index.js";
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 = "default";
4
+ export let size = 'default';
5
5
  let iconClass;
6
6
  $: iconClass = determineIconString(extension);
7
7
  function determineIconString(_extension) {
8
- if (imageExtensions.includes(_extension)) return "fa-file-image";
9
- if (videoExtensions.includes(_extension)) return "fa-file-video";
10
- switch (_extension) {
11
- case "pdf": {
12
- return "fa-file-pdf";
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>/* eslint-disable */
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 calc(var(--file-explorer-default-spacing) * 0.5);
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 { SvelteComponent } from "svelte";
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 SvelteComponent<FileIconProps, FileIconEvents, FileIconSlots> {
15
+ export default class FileIcon extends SvelteComponentTyped<FileIconProps, FileIconEvents, FileIconSlots> {
18
16
  }
19
17
  export {};
@@ -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 calc(var(--file-explorer-default-spacing) * 0.5);
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
  }
@@ -1,8 +1,8 @@
1
1
  export type FileSystemItem = FileItem | DirectoryItem;
2
- type FileSystemItemProperties = {
2
+ interface FileSystemItemProperties {
3
3
  name: string;
4
4
  path: string;
5
- };
5
+ }
6
6
  export type FileItem = {
7
7
  type: 'file';
8
8
  } & FileSystemItemProperties;
@@ -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;