fix(FilePreview): added class identifiers

N00nDay · Oct 4, 2023 · 246150c · 246150c
1 parent ac1dd26
commit 246150c
Show file tree

Hide file tree

Showing 19 changed files with 33 additions and 22 deletions.
diff --git a/src/lib/components/file-preview/Action.svelte b/src/lib/components/file-preview/Action.svelte
@@ -6,7 +6,8 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'text-xs mb-0 text-secondary-content';
+	const defaultClass =
+		'text-xs mb-0 text-secondary-content stwui-file-preview-item-upload-content-action';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Avatar.svelte b/src/lib/components/file-preview/Avatar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext, onMount } from 'svelte/internal';
+	import { setContext, onMount } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import Placeholder from './Placeholder.svelte';
 	import { get_current_component } from 'svelte/internal';
@@ -19,10 +19,11 @@
 	let failed = false;
 	let loading = true;
 
-	const srcClass = 'inline-block absolute';
-	const srcContainerClass = 'inline-block relative align-middle';
+	const srcClass = 'inline-block absolute stwui-file-preview-item-leading-avatar';
+	const srcContainerClass =
+		'inline-block relative align-middle stwui-file-preview-item-leading-avatar-wrapper';
 	const initialClass =
-		'inline-flex items-center justify-center align-middle bg-default text-default-content';
+		'inline-flex items-center justify-center align-middle bg-default text-default-content stwui-file-preview-item-leading-avatar';
 	const xsClass = 'h-6 w-6';
 	const smClass = 'h-8 w-8';
 	const mdClass = 'h-10 w-10';

diff --git a/src/lib/components/file-preview/Complete.svelte b/src/lib/components/file-preview/Complete.svelte
@@ -9,7 +9,8 @@
 	import { close } from '../../icons';
 	import Icon from '../icon';
 
-	const defaultClass = 'absolute inset-0 flex items-center justify-center';
+	const defaultClass =
+		'absolute inset-0 flex items-center justify-center stwui-file-preview-item-extra-complete';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Description.svelte b/src/lib/components/file-preview/Description.svelte
@@ -7,7 +7,7 @@
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
-		'text-xs mb-0 text-secondary-content text-ellipsis overflow-hidden whitespace-nowrap';
+		'text-xs mb-0 text-secondary-content text-ellipsis overflow-hidden whitespace-nowrap stwui-file-preview-item-file-content-description';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Extra.svelte b/src/lib/components/file-preview/Extra.svelte
@@ -8,7 +8,7 @@
 
 	export let placement: 'start' | 'center' | 'end' = 'start';
 
-	const defaultClass = 'ml-3 flex justify-end flex-shink';
+	const defaultClass = 'ml-3 flex justify-end flex-shink stwui-file-preview-item-extra';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Failed.svelte b/src/lib/components/file-preview/Failed.svelte
@@ -9,7 +9,8 @@
 	import { upload } from '../../icons';
 	import Icon from '../icon';
 
-	const defaultClass = 'absolute inset-0 flex items-center justify-center';
+	const defaultClass =
+		'absolute inset-0 flex items-center justify-center stwui-file-preview-item-extra-failed';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/FileContent.svelte b/src/lib/components/file-preview/FileContent.svelte
@@ -6,7 +6,8 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'ml-3 flex-col flex flex-grow w-full overflow-hidden';
+	const defaultClass =
+		'ml-3 flex-col flex flex-grow w-full overflow-hidden stwui-file-preview-item-file-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/FilePreview.svelte b/src/lib/components/file-preview/FilePreview.svelte
@@ -15,6 +15,8 @@
 	const borderedClass = 'border border-border';
 
 	$: finalClass = twMerge(
+		'stwui-file-preview',
+
 		divided ? dividedClass : false,
 		bordered ? borderedClass : false,
 

diff --git a/src/lib/components/file-preview/Item.svelte b/src/lib/components/file-preview/Item.svelte
@@ -9,7 +9,7 @@
 
 	const bordered: boolean = getContext('list-bordered');
 
-	const defaultClass = 'flex py-4';
+	const defaultClass = 'flex py-4 stwui-file-preview-item';
 	const borderedClass = 'px-3';
 
 	$: finalClass = twMerge(

diff --git a/src/lib/components/file-preview/Leading.svelte b/src/lib/components/file-preview/Leading.svelte
@@ -7,7 +7,7 @@
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
-		'h-10 w-10 rounded-full bg-default text-default-content flex items-center justify-center';
+		'h-10 w-10 rounded-full bg-default text-default-content flex items-center justify-center stwui-file-preview-item-leading';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Loader.svelte b/src/lib/components/file-preview/Loader.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'button-loader';
+	const defaultClass = 'button-loader stwui-file-preview-loader';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Pending.svelte b/src/lib/components/file-preview/Pending.svelte
@@ -8,7 +8,8 @@
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 	import Loader from './Loader.svelte';
 
-	const defaultClass = 'absolute inset-0 flex items-center justify-center';
+	const defaultClass =
+		'absolute inset-0 flex items-center justify-center stwui-file-preview-item-extra-pending';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Placeholder.svelte b/src/lib/components/file-preview/Placeholder.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { getContext } from 'svelte/internal';
+	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import Icon from '../icon/Icon.svelte';
 	import { account } from '../../icons';
@@ -17,7 +17,7 @@
 	const placeholder: boolean = getContext('list-avatar-placeholder');
 
 	const defaultClass =
-		'absolute text-content inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-default';
+		'absolute text-content inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-default stwui-file-preview-item-leading-avatar-placeholder';
 	const circleClass = 'rounded-full';
 	const roundedClass = 'rounded-md';
 

diff --git a/src/lib/components/file-preview/Progress.svelte b/src/lib/components/file-preview/Progress.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div
-	class="h-5 w-5 inline-flex items-center justify-center overflow-hidden rounded-full bottom-5 left-5"
+	class="h-5 w-5 inline-flex items-center justify-center overflow-hidden rounded-full bottom-5 left-5 stwui-file-preview-progress"
 >
 	<svg class="rotate-[-90deg] origin-center h-5 w-5">
 		<circle

diff --git a/src/lib/components/file-preview/Rejected.svelte b/src/lib/components/file-preview/Rejected.svelte
@@ -9,7 +9,8 @@
 	import { alert_circle } from '../../icons';
 	import Icon from '../icon';
 
-	const defaultClass = 'absolute inset-0 flex items-center justify-center';
+	const defaultClass =
+		'absolute inset-0 flex items-center justify-center stwui-file-preview-item-extra-rejected';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Status.svelte b/src/lib/components/file-preview/Status.svelte
@@ -6,7 +6,8 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'text-xs font-semibold text-content';
+	const defaultClass =
+		'text-xs font-semibold text-content stwui-file-preview-item-upload-content-status';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Title.svelte b/src/lib/components/file-preview/Title.svelte
@@ -7,7 +7,7 @@
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
-		'text-xs font-semibold text-content text-ellipsis overflow-hidden whitespace-nowrap';
+		'text-xs font-semibold text-content text-ellipsis overflow-hidden whitespace-nowrap stwui-file-preview-item-file-content-title';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/UploadContent.svelte b/src/lib/components/file-preview/UploadContent.svelte
@@ -7,7 +7,7 @@
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
-		'ml-3 flex flex-grow justify-start items-end flex-col w-full overflow-hidden';
+		'ml-3 flex flex-grow justify-start items-end flex-col w-full overflow-hidden stwui-file-preview-item-upload-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-preview/Uploading.svelte b/src/lib/components/file-preview/Uploading.svelte
@@ -10,7 +10,8 @@
 
 	export let progress: number | undefined = undefined;
 
-	const defaultClass = 'absolute inset-0 flex items-center justify-center';
+	const defaultClass =
+		'absolute inset-0 flex items-center justify-center stwui-file-preview-item-extra-uploading';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>