svelte-body
Advanced tools
Comparing version
@@ -297,4 +297,45 @@ (function (global, factory) { | ||
function toVal(mix) { | ||
var k, y, str=''; | ||
if (typeof mix === 'string' || typeof mix === 'number') { | ||
str += mix; | ||
} else if (typeof mix === 'object') { | ||
if (Array.isArray(mix)) { | ||
for (k=0; k < mix.length; k++) { | ||
if (mix[k]) { | ||
if (y = toVal(mix[k])) { | ||
str && (str += ' '); | ||
str += y; | ||
} | ||
} | ||
} | ||
} else { | ||
for (k in mix) { | ||
if (mix[k]) { | ||
str && (str += ' '); | ||
str += k; | ||
} | ||
} | ||
} | ||
} | ||
return str; | ||
} | ||
function clsx () { | ||
var i=0, tmp, x, str=''; | ||
while (i < arguments.length) { | ||
if (tmp = arguments[i++]) { | ||
if (x = toVal(tmp)) { | ||
str && (str += ' '); | ||
str += x; | ||
} | ||
} | ||
} | ||
return str; | ||
} | ||
const classList = (node, classString = '') => { | ||
const classes = writable(classString.split(' ').filter(Boolean)); | ||
const classes = writable(clsx(classString).split(' ').filter(Boolean)); | ||
@@ -330,4 +371,10 @@ // When the classes store changes add the new classes | ||
if (typeof styleData == 'object') | ||
for (const [property, value] of Object.entries(styleData)) | ||
pseudoElement.style.setProperty(property, value); | ||
for (const [property, value] of Object.entries(styleData)) { | ||
// Do a setProperty in case it's a CSS variable | ||
if (property.startsWith('--')) { | ||
pseudoElement.style.setProperty(property, value); | ||
} else { | ||
pseudoElement.style[property] = value; | ||
} | ||
} | ||
@@ -334,0 +381,0 @@ // Combine body's existing styles with computed ones |
{ | ||
"name": "svelte-body", | ||
"version": "1.2.4", | ||
"version": "1.3.5", | ||
"description": "Apply styles to the body in routes! Designed to work with Svelte Kit and Routify.", | ||
@@ -28,3 +28,3 @@ "main": "./dist/index.js", | ||
"dev:build": "rollup -c -w", | ||
"dev:docs": "cd docs && npm run dev" | ||
"dev:dev": "cd dev && npm run dev" | ||
}, | ||
@@ -34,2 +34,3 @@ "devDependencies": { | ||
"@rollup/plugin-node-resolve": "^13.0.0", | ||
"clsx": "^1.1.1", | ||
"npm-run-all": "^4.1.5", | ||
@@ -44,2 +45,2 @@ "prettier-plugin-svelte": "^2.4.0", | ||
} | ||
} | ||
} |
@@ -51,2 +51,17 @@ # Svelte Body | ||
For Class, you can pass a combination of string, object, and array of both of these. Literally anything that can be passed to [class](https://github.com/lukeed/clsx). | ||
```svelte | ||
<script> | ||
import { classList } from 'svelte-body'; | ||
let isBlue = true; | ||
</script> | ||
<Body class="red green blue" /> | ||
<Body class={{ red: true, blue: isBlue }} /> | ||
<Body class={['red', isBlue && 'blue']} /> | ||
<Body class={[ 'red', { blue: isBlue } ]} /> | ||
``` | ||
# Actions | ||
@@ -63,3 +78,6 @@ | ||
<svelte:body use:classList={"red green blue"}> | ||
<svelte:body use:classList={"red green blue"} /> | ||
<svelte:body use:classList={{ red: true, blue: isBlue }} /> | ||
<svelte:body use:classList={['red', isBlue && 'blue']} /> | ||
<svelte:body use:classList={[ 'red', { blue: isBlue } ]} /> | ||
``` | ||
@@ -74,3 +92,3 @@ | ||
<svelte:body use:style={"background-color: blue;"}> | ||
<svelte:body use:style={"background-color: blue;"} /> | ||
``` | ||
@@ -77,0 +95,0 @@ |
import { writable, get } from 'svelte/store'; | ||
import clsx from 'clsx'; | ||
export const classList = (node, classString = '') => { | ||
const classes = writable(classString.split(' ').filter(Boolean)); | ||
const classes = writable(clsx(classString).split(' ').filter(Boolean)); | ||
@@ -35,4 +36,10 @@ // When the classes store changes add the new classes | ||
if (typeof styleData == 'object') | ||
for (const [property, value] of Object.entries(styleData)) | ||
pseudoElement.style.setProperty(property, value); | ||
for (const [property, value] of Object.entries(styleData)) { | ||
// Do a setProperty in case it's a CSS variable | ||
if (property.startsWith('--')) { | ||
pseudoElement.style.setProperty(property, value); | ||
} else { | ||
pseudoElement.style[property] = value; | ||
} | ||
} | ||
@@ -39,0 +46,0 @@ // Combine body's existing styles with computed ones |
/// <reference types="svelte" /> | ||
import { Properties } from 'csstype'; | ||
// Copied from `clsx` to remove it from dependencies | ||
export type ClassValue = | ||
| ClassArray | ||
| ClassDictionary | ||
| string | ||
| number | ||
| null | ||
| boolean | ||
| undefined; | ||
export interface ClassDictionary { | ||
[id: string]: any; | ||
} | ||
export interface ClassArray extends Array<ClassValue> {} | ||
declare module 'csstype' { | ||
@@ -14,2 +30,4 @@ interface Properties { | ||
* | ||
* You can pass a string or object, or an array of combination of these. Literally anything that [clsx](https://github.com/lukeed/clsx) accepts. | ||
* | ||
* @example | ||
@@ -20,5 +38,10 @@ * | ||
* import { classList } from 'svelte-body'; | ||
* | ||
* let isBlue = true; | ||
* </script> | ||
* | ||
* <svelte:body use:classList={"red green blue"}> | ||
* <svelte:body use:classList={{ red: true, blue: isBlue }}> | ||
* <svelte:body use:classList={['red', isBlue && 'blue']}> | ||
* <svelte:body use:classList={[ 'red', { blue: isBlue } ]}> | ||
*``` | ||
@@ -31,3 +54,3 @@ * | ||
node: HTMLElement, | ||
classString: string, | ||
classString: ClassValue, | ||
): { update: () => void; destroy: () => void }; | ||
@@ -46,11 +69,2 @@ | ||
* <svelte:body use:style={"background-color: blue;"}> | ||
*``` | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* <script> | ||
* import { style } from 'svelte-body'; | ||
* </script> | ||
* | ||
* <svelte:body use:style={{ backgroundColor: 'blue' }}> | ||
@@ -57,0 +71,0 @@ *``` |
/// <reference types="svelte" /> | ||
import { SvelteComponentTyped } from 'svelte'; | ||
import { Properties } from 'csstype'; | ||
import { ClassValue } from './actions.d'; | ||
export interface BodyProps { | ||
/** | ||
* A string of styles (style="" on a HTML element) | ||
* Svelte action to add style on `body`. style can either be a string or an object. | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* <script> | ||
* import { style } from 'svelte-body'; | ||
* </script> | ||
* | ||
* <svelte:body use:style={"background-color: blue;"}> | ||
* <svelte:body use:style={{ backgroundColor: 'blue' }}> | ||
*``` | ||
*/ | ||
@@ -12,7 +24,24 @@ style?: string | Properties; | ||
/** | ||
* A string of class names (class="" on a HTML element) | ||
* Svelte action to change class on `body` | ||
* | ||
* You can pass a string or object, or an array of combination of these. Literally anything that [clsx](https://github.com/lukeed/clsx) accepts. | ||
* | ||
* @example | ||
* | ||
*```svelte | ||
* <script> | ||
* import { classList } from 'svelte-body'; | ||
* | ||
* let isBlue = true; | ||
* </script> | ||
* | ||
* <svelte:body use:classList={"red green blue"}> | ||
* <svelte:body use:classList={{ red: true, blue: isBlue }}> | ||
* <svelte:body use:classList={['red', isBlue && 'blue']}> | ||
* <svelte:body use:classList={[ 'red', { blue: isBlue } ]}> | ||
*``` | ||
*/ | ||
class?: string; | ||
class?: ClassValue; | ||
} | ||
export default class Body extends SvelteComponentTyped<BodyProps, {}, {}> {} |
export { default as Body } from './Body.svelte'; | ||
export * from './actions.d'; | ||
export { classList, style } from './actions.d'; |
Sorry, the diff of this file is not supported yet
37626
13.1%1037
14.71%109
19.78%8
14.29%