lapikit 0.3.6 → 0.3.7

package/dist/labs/components/btn/btn.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { useClassName, useStyles } from './btn.svelte.js';
+	import { splitSyntheticProps } from '../../utils/index.js';
+
+	let {
+		class: className,
+		style: styleAttr,
+		children,
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	} = $props();
+
+	let { classDirectiveProps, styleDirectiveProps, regularProps } = $derived(
+		splitSyntheticProps(rest as Record<string, unknown>)
+	);
+
+	let finalClass = $derived(
+		useClassName({
+			baseClass: 'kit-button',
+			className,
+			sClass,
+			classDirectiveProps
+		}).value
+	);
+
+	let finalStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleDirectiveProps
+		}).value
+	);
+</script>
+
+<button class={finalClass} style={finalStyle} {...regularProps}>
+	{@render children()}
+</button>
+
+<style>
+	.kit-btn {
+		border: 1px solid rgb(0, 0, 0);
+	}
+</style>

package/dist/labs/components/btn/btn.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const Btn: import("svelte").Component<{
+    class: any;
+    style: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type Btn = ReturnType<typeof Btn>;
+export default Btn;

package/dist/labs/components/btn/btn.svelte.js

@@ -0,0 +1,71 @@
+export function useClassName({ baseClass = '', className, sClass, classDirectiveProps } = {}) {
+    return {
+        get value() {
+            const classes = [];
+            if (baseClass) {
+                classes.push(baseClass);
+            }
+            if (typeof sClass === 'string' && sClass) {
+                classes.push(sClass);
+            }
+            if (Array.isArray(sClass)) {
+                for (const value of sClass) {
+                    if (typeof value === 'string' && value) {
+                        classes.push(value);
+                    }
+                }
+            }
+            if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
+                Object.entries(sClass).forEach(([key, value]) => {
+                    if (value === true) {
+                        classes.push(key);
+                    }
+                    else if (typeof value === 'string' && value) {
+                        classes.push(value);
+                    }
+                });
+            }
+            if (classDirectiveProps) {
+                Object.entries(classDirectiveProps).forEach(([key, value]) => {
+                    const base = key.replace('s-class_', '');
+                    if (value === true) {
+                        classes.push(base);
+                    }
+                    else if (typeof value === 'string' && value) {
+                        classes.push(`${base}${value}`);
+                    }
+                });
+            }
+            if (className) {
+                classes.push(className);
+            }
+            return classes.filter(Boolean).join(' ');
+        }
+    };
+}
+export function useStyles({ styleAttr, sStyle, styleDirectiveProps } = {}) {
+    return {
+        get value() {
+            const styles = [];
+            if (sStyle && typeof sStyle === 'object') {
+                Object.entries(sStyle).forEach(([key, value]) => {
+                    if (value) {
+                        styles.push(`${key}: ${value}`);
+                    }
+                });
+            }
+            if (styleDirectiveProps) {
+                Object.entries(styleDirectiveProps).forEach(([key, value]) => {
+                    const base = key.replace('s-style_', '');
+                    if (value) {
+                        styles.push(`${base}: ${value}`);
+                    }
+                });
+            }
+            if (styleAttr) {
+                styles.push(styleAttr);
+            }
+            return styles.filter(Boolean).join('; ');
+        }
+    };
+}

package/dist/labs/components/index.d.ts

@@ -1 +1 @@
-export { default as KitBtn } from './button/button.svelte';
+export { default as KitBtn } from './btn/btn.svelte';

package/dist/labs/components/index.js

@@ -1,2 +1,2 @@
 // components
-export { default as KitBtn } from './button/button.svelte';
+export { default as KitBtn } from './btn/btn.svelte';

package/dist/labs/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './props.js';

package/dist/labs/utils/index.js

@@ -0,0 +1 @@
+export * from './props.js';

package/dist/labs/utils/props.d.ts

@@ -0,0 +1,15 @@
+export type SClassProp = string | string[] | Record<string, boolean | string> | undefined;
+export type SStyleProp = Record<string, boolean | string> | undefined;
+export declare function splitSyntheticProps(allProps: Record<string, unknown>): {
+    classDirectiveProps: {
+        [k: string]: unknown;
+    };
+    styleDirectiveProps: {
+        [k: string]: unknown;
+    };
+    regularProps: {
+        [k: string]: unknown;
+    };
+};
+export declare function computeSClasses(sClass: SClassProp, classDirectiveProps: Record<string, unknown>): string;
+export declare function computeSStyles(sStyle: SStyleProp, styleDirectiveProps: Record<string, unknown>): string;

package/dist/labs/utils/props.js

@@ -0,0 +1,60 @@
+export function splitSyntheticProps(allProps) {
+    const classDirectiveProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => key.startsWith('s-class_')));
+    const styleDirectiveProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => key.startsWith('s-style_')));
+    const regularProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => !key.startsWith('s-class') && !key.startsWith('s-style')));
+    return { classDirectiveProps, styleDirectiveProps, regularProps };
+}
+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)) {
+        Object.entries(sClass).forEach(([key, value]) => {
+            if (value === true) {
+                classes.push(key);
+            }
+            else if (typeof value === 'string' && value) {
+                classes.push(value);
+            }
+        });
+    }
+    // s-class_xxx
+    Object.entries(classDirectiveProps).forEach(([key, value]) => {
+        const base = key.replace('s-class_', '');
+        if (value === true) {
+            classes.push(base);
+        }
+        else if (typeof value === 'string' && value) {
+            classes.push(`${base}${value}`);
+        }
+    });
+    return classes.join(' ');
+}
+export function computeSStyles(sStyle, styleDirectiveProps) {
+    const styles = [];
+    if (sStyle && typeof sStyle === 'object') {
+        Object.entries(sStyle).forEach(([key, value]) => {
+            if (value) {
+                styles.push(`${key}: ${value}`);
+            }
+        });
+    }
+    Object.entries(styleDirectiveProps).forEach(([key, value]) => {
+        const base = key.replace('s-style_', '');
+        if (value) {
+            styles.push(`${base}: ${value}`);
+        }
+    });
+    return styles.join('; ');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.3.6",
+	"version": "0.3.7",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"

package/dist/labs/components/button/button.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	let { children, ...rest } = $props();
-</script>
-
-<button {...rest}>
-	{@render children()}
-</button>
-
-<style>
-	button {
-		padding: 0.5em 1em;
-		border: none;
-		border-radius: 4px;
-		background-color: #007bff;
-		color: white;
-		cursor: pointer;
-		font-size: 1em;
-		transition: background-color 0.3s ease;
-	}
-
-	button:hover {
-		background-color: #0056b3;
-	}
-</style>

package/dist/labs/components/button/button.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const Button: import("svelte").Component<{
-    children: any;
-} & Record<string, any>, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;