CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

use svelte class directive for conditional classes

Browse Source
This commit is contained in:
bytedream 2023-08-25 18:49:03 +02:00
parent 29f4f0c497
commit 4f99847d62
4 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -29,6 +29,7 @@
"svelte": "^4.0.5", "svelte": "^4.0.5",
"svelte-check": "^3.4.3", "svelte-check": "^3.4.3",
"svelte-heros-v2": "^0.9.3", "svelte-heros-v2": "^0.9.3",
"svelte-multicssclass": "^2.1.1",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.0.0", "typescript": "^5.0.0",
@ -4870,6 +4871,12 @@
"svelte": "^3.19.0 || ^4.0.0-next.0" "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": { "node_modules/svelte-preprocess": {
"version": "5.0.4", "version": "5.0.4",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",

1
package.json
View File

@ -28,6 +28,7 @@
"svelte": "^4.0.5", "svelte": "^4.0.5",
"svelte-check": "^3.4.3", "svelte-check": "^3.4.3",
"svelte-heros-v2": "^0.9.3", "svelte-heros-v2": "^0.9.3",
"svelte-multicssclass": "^2.1.1",
"tailwindcss": "^3.3.3", "tailwindcss": "^3.3.3",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.0.0", "typescript": "^5.0.0",

8
src/lib/components/Input/Input.svelte
View File

@ -33,11 +33,9 @@
{/if} {/if}
<div class="flex items-center"> <div class="flex items-center">
<input <input
class={type === 'checkbox' class:checkbox={type === 'checkbox'}
? 'checkbox' class:input,input-bordered,w-[100%],sm:max-w-[16rem]={type !== 'checkbox'}
: `input input-bordered w-[100%] sm:max-w-[16rem] ${ class:pr-11={initialType === 'password'}
initialType === 'password' ? 'pr-11' : ''
}`}
{id} {id}
{name} {name}
{type} {type}

8
vite.config.ts
View File

@ -1,8 +1,14 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config'; import { defineConfig } from 'vitest/config';
import { multicssclass } from 'svelte-multicssclass';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()], plugins: [
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
multicssclass(),
sveltekit()
],
test: { test: {
include: ['src/**/*.{test,spec}.{ts,js}'] include: ['src/**/*.{test,spec}.{ts,js}']
} }