lapikit 0.7.0 → 0.7.1

package/dist/directives.js

@@ -0,0 +1,128 @@
+/**
+ * Svelte refuses the class: and style: directives on a component. On a <kit:...> tag, Lili turns them
+ * into the s-class_ / s-style_ props the components already handle:
+ *   class:active          -> s-class_active={active}
+ *   class:gap={4}         -> s-class_gap={4}         (the component gives the class gap-4)
+ *   style:opacity={0}     -> s-style_opacity={0}
+ *   style:color="red"     -> s-style_color="red"
+ * A directive with a modifier (style:color|important) is left as it is: Svelte reports it.
+ */
+const identifier = /^[A-Za-z_$][\w$]*$/;
+const nameEnd = /[\s=/>]/;
+/** End index (exclusive) of the string starting at `start` (a quote or a backtick) */
+function skipString(source, start) {
+    const quote = source[start];
+    let i = start + 1;
+    while (i < source.length) {
+        const ch = source[i];
+        if (ch === '\\') {
+            i += 2;
+            continue;
+        }
+        if (ch === quote)
+            return i + 1;
+        // ${ ... } inside a template literal can hold braces and strings
+        if (quote === '`' && ch === '$' && source[i + 1] === '{') {
+            i = skipBraces(source, i + 1);
+            continue;
+        }
+        i++;
+    }
+    return source.length;
+}
+/** End index (exclusive) of the {...} expression starting at `start`, nested braces and strings included */
+function skipBraces(source, start) {
+    let depth = 0;
+    let i = start;
+    while (i < source.length) {
+        const ch = source[i];
+        if (ch === '"' || ch === "'" || ch === '`') {
+            i = skipString(source, i);
+            continue;
+        }
+        if (ch === '{')
+            depth++;
+        else if (ch === '}') {
+            depth--;
+            if (depth === 0)
+                return i + 1;
+        }
+        i++;
+    }
+    return source.length;
+}
+/** End index (exclusive) of an attribute value starting at `start` ({expr}, "text", 'text' or bare) */
+function skipValue(source, start) {
+    const ch = source[start];
+    if (ch === '{')
+        return skipBraces(source, start);
+    if (ch === '"' || ch === "'")
+        return skipString(source, start);
+    let i = start;
+    while (i < source.length && !/[\s/>]/.test(source[i]))
+        i++;
+    return i;
+}
+/**
+ * Rewrites the class: and style: directives of the attributes of a tag (everything after its name).
+ * The values of the other attributes are skipped, so a "class:" inside a string or an expression is kept.
+ */
+export function rewriteDirectives(attributes) {
+    let output = '';
+    let i = 0;
+    while (i < attributes.length) {
+        const ch = attributes[i];
+        // A value (string or expression) of another attribute: copied as it is
+        if (ch === '"' || ch === "'") {
+            const end = skipString(attributes, i);
+            output += attributes.slice(i, end);
+            i = end;
+            continue;
+        }
+        if (ch === '{') {
+            const end = skipBraces(attributes, i);
+            output += attributes.slice(i, end);
+            i = end;
+            continue;
+        }
+        const startsAttribute = i === 0 || /\s/.test(attributes[i - 1]);
+        const kind = attributes.startsWith('class:', i)
+            ? 'class'
+            : attributes.startsWith('style:', i)
+                ? 'style'
+                : undefined;
+        if (!startsAttribute || !kind) {
+            output += ch;
+            i++;
+            continue;
+        }
+        const nameStart = i + kind.length + 1;
+        let end = nameStart;
+        while (end < attributes.length && !nameEnd.test(attributes[end]))
+            end++;
+        const name = attributes.slice(nameStart, end);
+        // No name, or a modifier: left to Svelte
+        if (!name || name.includes('|')) {
+            output += ch;
+            i++;
+            continue;
+        }
+        const prop = `s-${kind}_${name}`;
+        if (attributes[end] === '=') {
+            const valueEnd = skipValue(attributes, end + 1);
+            output += `${prop}=${attributes.slice(end + 1, valueEnd)}`;
+            i = valueEnd;
+        }
+        else if (identifier.test(name)) {
+            // Shorthand: class:active uses the variable active
+            output += `${prop}={${name}}`;
+            i = end;
+        }
+        else {
+            // A shorthand needs a variable name (class:my-class has none): left to Svelte
+            output += attributes.slice(i, end);
+            i = end;
+        }
+    }
+    return output;
+}

package/dist/escaping.js

@@ -1,3 +1,4 @@
+import { rewriteDirectives } from './directives.js';
 export const decodeSourceMap = (content, componentInfo) => {
     const importedComponents = new Map();
     const parts = [];
@@ -89,7 +90,9 @@ export const decodeSourceMap = (content, componentInfo) => {
         }
         if (isKnown) {
             importedComponents.set(info.name, info.ref);
-            parts.push(`<${info.name}${content.slice(nameEnd, tagEnd + 1)}`);
+            // class: / style: are refused by Svelte on a component: they become s-class_ / s-style_ props
+            parts.push(`<${info.name}${rewriteDirectives(content.slice(nameEnd, tagEnd + 1))}`);
+            changed = true;
             changed = true;
         }
         else {

package/dist/html-mapped.js

@@ -1,3 +1,4 @@
+import { useClassName, useStyles } from './utils/components.js';
 /**
  * Computes a string of class names based on the provided sClass and classDirectiveProps.
  * @param sClass - The s-class property which can be a string, array, or object.
@@ -5,48 +6,7 @@
  * @returns A string of class names.
  */
 export function computeSClasses(sClass, classDirectiveProps) {
-    const classes = [];
-    // s-class string
-    if (typeof sClass === 'string' && sClass) {
-        classes.push(sClass);
-    }
-    // s-class array
-    if (Array.isArray(sClass)) {
-        for (const value of sClass) {
-            if (typeof value === 'string' && value) {
-                classes.push(value);
-            }
-        }
-    }
-    // s-class object
-    if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
-        const entries = Object.entries(sClass);
-        if (entries.length > 0) {
-            for (const [key, value] of entries) {
-                if (value === true) {
-                    classes.push(key);
-                }
-                else if (typeof value === 'string' && value) {
-                    classes.push(value);
-                }
-            }
-        }
-    }
-    // s-class_xxx
-    const classEntries = Object.entries(classDirectiveProps);
-    if (classEntries.length > 0) {
-        for (const [key, value] of classEntries) {
-            // Use slice instead of replace for better performance (8 = 's-class_'.length)
-            const base = key.slice(8);
-            if (value === true) {
-                classes.push(base);
-            }
-            else if (typeof value === 'string' && value) {
-                classes.push(`${base}${value}`);
-            }
-        }
-    }
-    return classes.join(' ');
+    return useClassName({ sClass, classProps: classDirectiveProps });
 }
 /**
  * Computes a string of style declarations based on the provided sStyle and styleDirectiveProps.
@@ -55,28 +15,7 @@ export function computeSClasses(sClass, classDirectiveProps) {
  * @returns A string of style declarations.
  */
 export function computeSStyles(sStyle, styleDirectiveProps) {
-    const styles = [];
-    if (sStyle && typeof sStyle === 'object') {
-        const entries = Object.entries(sStyle);
-        if (entries.length > 0) {
-            for (const [key, value] of entries) {
-                if (value) {
-                    styles.push(`${key}: ${value}`);
-                }
-            }
-        }
-    }
-    const styleEntries = Object.entries(styleDirectiveProps);
-    if (styleEntries.length > 0) {
-        for (const [key, value] of styleEntries) {
-            // Use slice instead of replace for better performance (8 = 's-style_'.length)
-            const base = key.slice(8);
-            if (value) {
-                styles.push(`${base}: ${value}`);
-            }
-        }
-    }
-    return styles.join('; ');
+    return useStyles({ sStyle, styleProps: styleDirectiveProps });
 }
 /**
  * Makes component props by separating s-class and s-style directives from other props.
@@ -95,7 +34,8 @@ export function makeComponentProps(props) {
         else if (key.startsWith('s-style_')) {
             styleProps[key] = value;
         }
-        else if (!key.startsWith('s-class') && !key.startsWith('s-style')) {
+        else if (key !== 's-class' && key !== 's-style') {
+            // Only the exact s-class / s-style are left out: a prop like s-classic is kept
             restProps[key] = value;
         }
     }

package/dist/labs/sheet/sheet.svelte

@@ -4,8 +4,7 @@
 	 * @description A simple sheet component for experimentation for developers Lapikit. Please don't use it in production.
 	 */
 
-	import { useClassName, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs, useElevation } from '../../utils';
 
 	let {
 		class: className,
@@ -13,37 +12,72 @@
 		children,
 		's-class': sClass,
 		's-style': sStyle,
+		elevation,
+		rounded,
+		active,
 		...rest
 	} = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs('kit-sheet', { className, sClass, styleAttr, sStyle }, rest)
 	);
 
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-sheet',
-			className,
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
+	let elevationState = $derived(useElevation(elevation));
 </script>
 
-<div class={componentClass} style={componentStyle} {...restProps}>
+<div
+	class={attrs.class}
+	style={attrs.style}
+	data-rounded={rounded}
+	data-elevation={elevationState.base}
+	data-elevation-hover={elevationState.hover}
+	data-elevation-active={elevationState.active}
+	data-active={active}
+	{...attrs.rest}
+>
 	{@render children()}
 </div>
 
-<style>
-	.kit-sheet {
-		border: 1px solid rgb(0, 0, 0);
-	}
-</style>
+<style>.kit-sheet {
+  display: flex;
+  background-color: var(--kit-color-surface-1);
+  color: var(--kit-color-text);
+  border-radius: var(--kit-sheet-radius);
+}
+
+.kit-sheet[data-active=true] {
+  background: var(--kit-color-accent);
+  color: var(--kit-on-accent);
+}
+
+/** 
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+.kit-sheet[data-rounded=none] {
+  --kit-sheet-radius: var(--kit-shape-none);
+}
+
+.kit-sheet[data-rounded=xs] {
+  --kit-sheet-radius: var(--kit-shape-xs);
+}
+
+.kit-sheet[data-rounded=sm] {
+  --kit-sheet-radius: var(--kit-shape-sm);
+}
+
+.kit-sheet[data-rounded=md] {
+  --kit-sheet-radius: var(--kit-shape-md);
+}
+
+.kit-sheet[data-rounded=lg] {
+  --kit-sheet-radius: var(--kit-shape-lg);
+}
+
+.kit-sheet[data-rounded=xl] {
+  --kit-sheet-radius: var(--kit-shape-xl);
+}
+
+.kit-sheet[data-rounded=full] {
+  --kit-sheet-radius: var(--kit-shape-full);
+}</style>

package/dist/labs/sheet/sheet.svelte.d.ts

@@ -2,6 +2,9 @@ declare const Sheet: import("svelte").Component<{
     class: any;
     style: any;
     children: any;
+    elevation: any;
+    rounded: any;
+    active: any;
 } & Record<string, any>, {}, "">;
 type Sheet = ReturnType<typeof Sheet>;
 export default Sheet;

package/dist/utils/components.d.ts

@@ -1,20 +1,30 @@
-import type { ElevationProps, ElevationState, useClassNameProps, useStylesProps } from '../@types';
+import type { ComponentAttrs, ElevationProps, ElevationState, PropValue, SStyleProp, useClassNameProps, useStylesProps } from '../@types';
+import type { ClassValue } from 'svelte/elements';
+/**
+ * The classes of the s-class_xxx directives (class:xxx on a kit tag):
+ * - true gives the name (class:active -> active);
+ * - a number or a text gives the name and the value, joined by a dash (class:gap={4} -> gap-4),
+ *   without a dash when the name ends or the value starts with a separator (- _ : / .):
+ *   s-class_gap-={4}, s-class_variant="-primary" and s-class_state=":active" keep working;
+ * - false, null, undefined and '' give nothing.
+ */
+export declare function directiveClasses(classProps: Record<string, PropValue> | undefined): string[];
 /**
  * useClassName - Utility to compute class names for a component.
  * @param baseClass - The base class name for the component.
- * @param className - Additional class names as a string.
+ * @param className - Additional class names: a string or an array of strings.
  * @param sClass - The s-class property which can be a string, array, or object.
  * @param classProps - An object containing s-class_xxx directives.
- * @returns A computed class string.
+ * @returns A computed class string: no extra spaces, no duplicates, in the order of the inputs.
  */
 export declare function useClassName({ baseClass, className, sClass, classProps }?: useClassNameProps): string;
 export declare function useIsInteractive(props: Record<string, unknown>, tag: string, interactiveTags: readonly string[], interactive?: boolean): boolean;
 /**
- * useStyles - Utility to compute style declarations for a component (optimized pure function).
- * @param styleAttr - Inline style attribute as a string.
- * @param sStyle - The s-style property which is an object of style key-value pairs.
+ * useStyles - Utility to compute style declarations for a component (pure function).
+ * @param styleAttr - Inline style attribute as a string (raw CSS, kept as it is).
+ * @param sStyle - The s-style property: an object of property / value pairs (camelCase or kebab-case).
  * @param styleProps - An object containing s-style_xxx directives.
- * @returns A computed style string.
+ * @returns A computed style string; the style attribute comes last, so it wins.
  */
 export declare function useStyles({ styleAttr, sStyle, styleProps }?: useStylesProps): string;
 /**
@@ -24,3 +34,21 @@ export declare function useStyles({ styleAttr, sStyle, styleProps }?: useStylesP
  * @returns An object with `base`, `hover` and `active` keys, `undefined` when not provided.
  */
 export declare function useElevation(elevation?: ElevationProps | null): ElevationState;
+/**
+ * useComponentAttrs - The class, style and other attributes of a labs component, in one call.
+ *
+ * The class is left to Svelte (clsx): class and s-class follow the same rules as class on an element,
+ * a string, an array, or an object whose keys are added when their value is truthy
+ * ({ active: isActive } -> active). The s-class_xxx directives (class:xxx on a kit tag) keep their
+ * rule: class:gap={4} -> gap-4.
+ *
+ * @param baseClass - The class of the component ('kit-btn-v2'), '' for none.
+ * @param props - The class, s-class, style and s-style props of the component.
+ * @param rest - The rest of the props: the s-class_xxx / s-style_xxx directives are taken out of it.
+ */
+export declare function useComponentAttrs(baseClass: string, { className, sClass, styleAttr, sStyle }: {
+    className?: ClassValue;
+    sClass?: ClassValue;
+    styleAttr?: string;
+    sStyle?: SStyleProp;
+}, rest: Record<string, unknown>): ComponentAttrs;