From 4f99847d62dcf084ecdf0fe1893ce5e925e18b22 Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Fri, 25 Aug 2023 18:49:03 +0200
Subject: [PATCH] use svelte class directive for conditional classes

---
 package-lock.json                     | 7 +++++++
 package.json                          | 1 +
 src/lib/components/Input/Input.svelte | 8 +++-----
 vite.config.ts                        | 8 +++++++-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76ceb48..ba5d22a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
 				"svelte-heros-v2": "^0.9.3",
+				"svelte-multicssclass": "^2.1.1",
 				"tailwindcss": "^3.3.3",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
@@ -4870,6 +4871,12 @@
 				"svelte": "^3.19.0 || ^4.0.0-next.0"
 			}
 		},
+		"node_modules/svelte-multicssclass": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/svelte-multicssclass/-/svelte-multicssclass-2.1.1.tgz",
+			"integrity": "sha512-orKylsKQ4reqHQ87nmB4oCPGgut4V/ysT/cZHksOPEzxyBpuiLrP3NkDAn0wIDATrBld/UuDOtKz8L0P7SYl0Q==",
+			"dev": true
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.0.4",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",
diff --git a/package.json b/package.json
index ce80a88..faaaf7a 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"svelte-heros-v2": "^0.9.3",
+		"svelte-multicssclass": "^2.1.1",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
diff --git a/src/lib/components/Input/Input.svelte b/src/lib/components/Input/Input.svelte
index e28a8ff..7fb1573 100644
--- a/src/lib/components/Input/Input.svelte
+++ b/src/lib/components/Input/Input.svelte
@@ -33,11 +33,9 @@
 			{/if}
 			<div class="flex items-center">
 				<input
-					class={type === 'checkbox'
-						? 'checkbox'
-						: `input input-bordered w-[100%] sm:max-w-[16rem] ${
-								initialType === 'password' ? 'pr-11' : ''
-						  }`}
+					class:checkbox={type === 'checkbox'}
+					class:input,input-bordered,w-[100%],sm:max-w-[16rem]={type !== 'checkbox'}
+					class:pr-11={initialType === 'password'}
 					{id}
 					{name}
 					{type}
diff --git a/vite.config.ts b/vite.config.ts
index c1c4797..7f7aa60 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import { multicssclass } from 'svelte-multicssclass';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		multicssclass(),
+		sveltekit()
+	],
 	test: {
 		include: ['src/**/*.{test,spec}.{ts,js}']
 	}