@upsoftware_tech/svarium 1.0.8 → 1.0.9

package/package.json

@@ -5,7 +5,7 @@
         "email": "info@upSoftware.tech",
         "url": "https://upsoftware.tech"
     },
-    "version": "1.0.8",
+    "version": "1.0.9",
     "type": "module",
     "files": [
         "dist",
@@ -65,6 +65,7 @@
         "vue-draggable-plus": "^0.6.1",
         "vue-input-otp": "^0.3.2",
         "vue-sonner": "^2.0.9",
+        "vue3-colorpicker": "^2.3.0",
         "ziggy-js": "^2.6.0"
     }
 }

package/src/lib/appearance.ts

@@ -5,6 +5,7 @@ type AppearanceLike = {
 	fontSize?: unknown;
 	textColor?: unknown;
 	fontColor?: unknown;
+	textDecoration?: unknown;
 	bgColor?: unknown;
 	borderWidth?: unknown;
 	borderRadius?: unknown;
@@ -81,6 +82,7 @@ const fontColorToClass: Record<string, string> = {
 	fuchsia: 'text-fuchsia-500',
 	pink: 'text-pink-500',
 	rose: 'text-rose-500',
+	primary: 'text-primary',
 	white: 'text-white',
 	black: 'text-black',
 };
@@ -231,6 +233,44 @@ function appendTextColor(
 	style.color = raw;
 }
 
+function appendTextDecoration(
+	value: unknown,
+	classTokens: string[],
+	style: Record<string, string>,
+): void {
+	const raw = value !== undefined && value !== null ? String(value).trim() : '';
+	if (raw === '') {
+		return;
+	}
+
+	const normalized = raw.toLowerCase();
+	const tokens = normalized.split(/\s+/).map((token) => token.trim()).filter(Boolean);
+	const utilityTokens = new Set([
+		'underline',
+		'overline',
+		'line-through',
+		'no-underline',
+		'decoration-solid',
+		'decoration-double',
+		'decoration-dotted',
+		'decoration-dashed',
+		'decoration-wavy',
+		'decoration-auto',
+		'decoration-from-font',
+	]);
+
+	if (tokens.length > 0) {
+		const allUtilities = tokens.every((token) => utilityTokens.has(token) || token.startsWith('decoration-'));
+
+		if (allUtilities) {
+			classTokens.push(...tokens);
+			return;
+		}
+	}
+
+	style.textDecoration = raw;
+}
+
 function appendBackgroundColor(
 	value: unknown,
 	classTokens: string[],
@@ -669,6 +709,7 @@ function normalizeAppearance(appearance: AppearanceLike): {
 	const { light: lightTextColor, dark: darkTextColor } = getColorParts(textColorValue);
 	appendTextColor(lightTextColor, classTokens, style);
 	appendTextColor(darkTextColor, classTokens, style, true);
+	appendTextDecoration(appearance.textDecoration, classTokens, style);
 
 	const { light: lightBgColor, dark: darkBgColor } = getColorParts(appearance.bgColor);
 	appendBackgroundColor(lightBgColor, classTokens, style);
@@ -700,6 +741,7 @@ function normalizeAppearance(appearance: AppearanceLike): {
 	delete nextAppearance.fontSize;
 	delete nextAppearance.textColor;
 	delete nextAppearance.fontColor;
+	delete nextAppearance.textDecoration;
 	delete nextAppearance.bgColor;
 	delete nextAppearance.borderWidth;
 	delete nextAppearance.borderRadius;
@@ -740,6 +782,14 @@ export function normalizeNodeProps(nodeProps: Record<string, any>): Record<strin
 			resolved.class = combinedClass.join(' ');
 		}
 
+		const appearanceStyle = (normalized.appearance as AppearanceLike).style;
+		if (appearanceStyle !== undefined && appearanceStyle !== null && appearanceStyle !== '') {
+			resolved.style = mergeStyle(
+				resolved.style,
+				appearanceStyle as Record<string, string>,
+			);
+		}
+
 		resolved.style = mergeStyle(resolved.style, normalized.style);
 		resolved.appearance = normalized.appearance;
 	}

package/src/pages/Auth/Method.vue

@@ -1,5 +1,9 @@
 <template>
-	<BlockFormLoginMethodVerification :verification-methods="verificationMethods" :session="session" />
+	<BlockFormLoginMethodVerification
+		:verification-methods="verificationMethods"
+		:session="session"
+		:type="type"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -9,11 +13,13 @@ import { AuthLayout, BlockFormLoginMethodVerification } from '@upsoftware_tech/s
 interface Props {
 	verificationMethods?: VerificationMethod[] | Record<string, VerificationMethod>;
 	session: string;
+	type?: string;
 }
 
 withDefaults(defineProps<Props>(), {
 	verificationMethods: () => [],
 	session: '',
+	type: 'login',
 });
 
 defineOptions({

package/src/pages/Auth/Register.vue

@@ -0,0 +1,76 @@
+<template>
+	<component :is="resolvedLayout">
+		<BlockPageRegister v-bind="props" />
+	</component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { AuthLayout, BlockPageRegister, PanelLayout } from '@upsoftware_tech/svarium';
+
+interface RegisterFieldOption {
+	value: string | number | boolean;
+	label: string;
+}
+
+interface RegisterField {
+	name: string;
+	type?: string;
+	label?: string;
+	placeholder?: string;
+	hint?: string;
+	required?: boolean;
+	autocomplete?: string;
+	value?: string | number | boolean;
+	options?: RegisterFieldOption[];
+}
+
+interface Props {
+	title?: string;
+	subtitle?: string;
+	loginLabel?: string;
+	loginLinkLabel?: string;
+	loginLink?: string;
+	submitLabel?: string;
+	action?: string;
+	layout?: string;
+	schema?: Record<string, any>[];
+	fields?: RegisterField[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: 'Create account',
+	subtitle: 'Fill in the form to create your account',
+	loginLabel: 'Already have an account?',
+	loginLinkLabel: 'Sign in',
+	loginLink: 'panel.auth.login',
+	submitLabel: 'Create account',
+	action: 'panel.auth.register.set',
+	layout: 'AuthLayout',
+	fields: () => [
+		{ name: 'email', type: 'email', label: 'Email address', required: true, autocomplete: 'email' },
+		{ name: 'password', type: 'password', label: 'Password', required: true, autocomplete: 'new-password' },
+		{
+			name: 'password_confirmation',
+			type: 'password',
+			label: 'Confirm password',
+			required: true,
+			autocomplete: 'new-password',
+		},
+	],
+});
+
+const resolvedLayout = computed(() => {
+	const key = (props.layout ?? 'AuthLayout').trim();
+
+	if (key === 'PanelLayout') {
+		return PanelLayout;
+	}
+
+	if (key === 'AuthLayout') {
+		return AuthLayout;
+	}
+
+	return key || AuthLayout;
+});
+</script>

package/src/pages/Svarium.vue

@@ -1,6 +1,10 @@
 <template>
+    <Head>
+        <link v-if="seo?.canonical" rel="canonical" :href="seo.canonical" />
+        <meta v-if="seo?.robots" name="robots" :content="seo.robots" />
+    </Head>
     <pre class="hidden">{{ tree }}</pre>
-    <main class="flex bg-slate-100 dark:bg-slate-950 h-screen">
+    <main class="bg-slate-100 dark:bg-slate-950">
         <template v-if="Array.isArray(tree)">
             <component
                 :is="renderNode(node)"
@@ -17,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { usePage } from '@inertiajs/vue3';
+import { Head, usePage } from '@inertiajs/vue3';
 import { computed, h, isRef, ref, resolveComponent, watch } from 'vue';
 import { Toaster } from 'vue-sonner';
 import { toast } from 'vue-sonner';
@@ -64,11 +68,44 @@ function updateModelValue(modelContext: any, value: any): void {
     emit('update:modelValue', value);
 }
 
+function shouldRenderVueIf(value: any): boolean {
+    if (typeof value === 'boolean') {
+        return value;
+    }
+
+    if (typeof value === 'number') {
+        return value !== 0;
+    }
+
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+
+        if (normalized === '' || normalized === 'false' || normalized === '0' || normalized === 'null' || normalized === 'undefined') {
+            return false;
+        }
+
+        return true;
+    }
+
+    if (value === null || value === undefined) {
+        return false;
+    }
+
+    return Boolean(value);
+}
+
 function renderNode(node: any, modelContext?: any) {
     if (!node || typeof node !== 'object') {
         return null;
     }
 
+    const rawNodeProps = node.props && typeof node.props === 'object' ? node.props : {};
+    if (Object.prototype.hasOwnProperty.call(rawNodeProps, 'vIf')) {
+        if (!shouldRenderVueIf(rawNodeProps.vIf)) {
+            return null;
+        }
+    }
+
     const componentName = node.component ?? node.type;
 
     if (!componentName) {
@@ -78,10 +115,29 @@ function renderNode(node: any, modelContext?: any) {
 
     const component = resolveComponent(componentName);
     const slots: Record<string, (...args: any[]) => any> = {};
-
-    if (Array.isArray(node.children) && node.children.length) {
-        slots.default = () => node.children.map((child: any) => renderNode(child, modelContext));
-    }
+    const nodeProps = { ...(node.props ?? {}) };
+    delete nodeProps.vIf;
+    const slotPlacementRaw =
+        nodeProps.__slotPlacement && typeof nodeProps.__slotPlacement === 'object'
+            ? nodeProps.__slotPlacement
+            : {};
+
+    delete nodeProps.__slotPlacement;
+
+    const resolveSlotContext = (slotProps: any = {}, fallbackModelContext: any = modelContext) => {
+        const hasSlotModel =
+            Object.prototype.hasOwnProperty.call(slotProps, 'modelValue') ||
+            Object.prototype.hasOwnProperty.call(slotProps, 'tab');
+
+        return hasSlotModel || typeof slotProps?.updateModelValue === 'function'
+            ? {
+                  value: slotProps?.modelValue ?? slotProps?.tab ?? resolveModelValue(fallbackModelContext),
+                  update: slotProps?.updateModelValue,
+              }
+            : (slotProps?.model ?? fallbackModelContext);
+    };
+
+    const slotContentMap: Record<string, any[]> = {};
 
     if (node.slots && !Array.isArray(node.slots)) {
         for (const [name, content] of Object.entries(node.slots)) {
@@ -89,28 +145,180 @@ function renderNode(node: any, modelContext?: any) {
                 continue;
             }
 
+            slotContentMap[name] = content;
             slots[name] = (slotProps: any = {}) => {
-                const hasSlotModel =
-                    Object.prototype.hasOwnProperty.call(slotProps, 'modelValue') ||
-                    Object.prototype.hasOwnProperty.call(slotProps, 'tab');
-
-                const slotModelContext =
-                    hasSlotModel || typeof slotProps?.updateModelValue === 'function'
-                        ? {
-                              value: slotProps?.modelValue ?? slotProps?.tab ?? resolveModelValue(modelContext),
-                              update: slotProps?.updateModelValue,
-                          }
-                        : (slotProps?.model ?? modelContext);
-
+                const slotModelContext = resolveSlotContext(slotProps);
                 return content.map((child: any) => renderNode(child, slotModelContext));
             };
         }
     }
 
+    const renderDefaultChildren = (slotProps: any = {}) => {
+        if (!Array.isArray(node.children) || node.children.length === 0) {
+            return [];
+        }
+
+        const slotModelContext = resolveSlotContext(slotProps);
+        return node.children.map((child: any) => renderNode(child, slotModelContext));
+    };
+
+    type PlacedSlot = {
+        slotName: string;
+        anchor: 'header' | 'footer';
+        position: 'before' | 'after';
+        priority: number | null;
+        order: number;
+    };
+
+    const placedSlots: PlacedSlot[] = [];
+    let placementFallbackOrder = 0;
+
+    for (const [slotName, config] of Object.entries(slotPlacementRaw as Record<string, any>)) {
+        if (!Array.isArray(slotContentMap[slotName])) {
+            continue;
+        }
+
+        const anchor = String(config?.anchor ?? 'header').toLowerCase();
+        const position = String(config?.position ?? 'after').toLowerCase();
+        const normalizedAnchor: 'header' | 'footer' = anchor === 'footer' ? 'footer' : 'header';
+        const normalizedPosition: 'before' | 'after' = position === 'before' ? 'before' : 'after';
+
+        let normalizedPriority: number | null = null;
+        const rawPriority = config?.priority;
+        if (typeof rawPriority === 'number' && Number.isFinite(rawPriority)) {
+            normalizedPriority = rawPriority;
+        } else if (typeof rawPriority === 'string' && rawPriority.trim() !== '' && Number.isFinite(Number(rawPriority))) {
+            normalizedPriority = Number(rawPriority);
+        }
+
+        const rawOrder = config?.order;
+        let normalizedOrder = placementFallbackOrder;
+        if (typeof rawOrder === 'number' && Number.isFinite(rawOrder)) {
+            normalizedOrder = rawOrder;
+        } else if (typeof rawOrder === 'string' && rawOrder.trim() !== '' && Number.isFinite(Number(rawOrder))) {
+            normalizedOrder = Number(rawOrder);
+        }
+        placementFallbackOrder += 1;
+
+        placedSlots.push({
+            slotName,
+            anchor: normalizedAnchor,
+            position: normalizedPosition,
+            priority: normalizedPriority,
+            order: normalizedOrder,
+        });
+    }
+
+    const sortPlacedSlots = (items: PlacedSlot[]): string[] => {
+        return [...items]
+            .sort((a, b) => {
+                const aHasPriority = a.priority !== null;
+                const bHasPriority = b.priority !== null;
+
+                if (aHasPriority && bHasPriority) {
+                    if (a.priority !== b.priority) {
+                        return (a.priority as number) - (b.priority as number);
+                    }
+
+                    return a.order - b.order;
+                }
+
+                if (aHasPriority !== bHasPriority) {
+                    return aHasPriority ? -1 : 1;
+                }
+
+                return a.order - b.order;
+            })
+            .map((item) => item.slotName);
+    };
+
+    const beforeHeader = sortPlacedSlots(
+        placedSlots.filter((item) => item.anchor === 'header' && item.position === 'before'),
+    );
+    const afterHeader = sortPlacedSlots(
+        placedSlots.filter((item) => item.anchor === 'header' && item.position === 'after'),
+    );
+    const beforeFooter = sortPlacedSlots(
+        placedSlots.filter((item) => item.anchor === 'footer' && item.position === 'before'),
+    );
+    const afterFooter = sortPlacedSlots(
+        placedSlots.filter((item) => item.anchor === 'footer' && item.position === 'after'),
+    );
+
+    const placedSlotNames = new Set(placedSlots.map((item) => item.slotName));
+
+    if (placedSlotNames.size > 0) {
+        for (const slotName of placedSlotNames) {
+            delete slots[slotName];
+        }
+    }
+
+    const renderPlacedSlotNames = (slotNames: string[], slotProps: any = {}) => {
+        const slotModelContext = resolveSlotContext(slotProps);
+        const rendered: any[] = [];
+
+        for (const slotName of slotNames) {
+            const content = slotContentMap[slotName];
+            if (!Array.isArray(content) || content.length === 0) {
+                continue;
+            }
+
+            rendered.push(...content.map((child: any) => renderNode(child, slotModelContext)));
+        }
+
+        return rendered;
+    };
+
+    const hasMainHeader = !placedSlotNames.has('header') && Array.isArray(slotContentMap.header) && slotContentMap.header.length > 0;
+    const hasMainFooter = !placedSlotNames.has('footer') && Array.isArray(slotContentMap.footer) && slotContentMap.footer.length > 0;
+    const hasMainBody = !placedSlotNames.has('body') && Array.isArray(slotContentMap.body) && slotContentMap.body.length > 0;
+
+    const headerSlotOrder = [...beforeHeader, ...(hasMainHeader ? ['header'] : []), ...afterHeader];
+    const footerSlotOrder = [...beforeFooter, ...(hasMainFooter ? ['footer'] : []), ...afterFooter];
+
+    const hasStructuredSlots =
+        placedSlots.length > 0 || hasMainHeader || hasMainFooter || hasMainBody;
+
+    if (hasStructuredSlots) {
+        slots.header = (slotProps: any = {}) => renderPlacedSlotNames(headerSlotOrder, slotProps);
+        slots.footer = (slotProps: any = {}) => renderPlacedSlotNames(footerSlotOrder, slotProps);
+        slots.body = (slotProps: any = {}) => {
+            if (hasMainBody) {
+                return renderPlacedSlotNames(['body'], slotProps);
+            }
+
+            return renderDefaultChildren(slotProps);
+        };
+        if (placedSlots.length > 0) {
+            slots.default = (slotProps: any = {}) => {
+                const rendered: any[] = [];
+
+                rendered.push(...renderPlacedSlotNames(headerSlotOrder, slotProps));
+                if (hasMainBody) {
+                    rendered.push(...renderPlacedSlotNames(['body'], slotProps));
+                } else {
+                    rendered.push(...renderDefaultChildren(slotProps));
+                }
+                rendered.push(...renderPlacedSlotNames(footerSlotOrder, slotProps));
+
+                return rendered;
+            };
+        } else if (Array.isArray(node.children) && node.children.length) {
+            slots.default = (slotProps: any = {}) => renderDefaultChildren(slotProps);
+        }
+    } else if (Array.isArray(node.children) && node.children.length) {
+        slots.default = (slotProps: any = {}) => renderDefaultChildren(slotProps);
+    }
+
+    const normalizedProps = normalizeNodeProps(nodeProps);
+    if (Object.prototype.hasOwnProperty.call(normalizedProps, 'appearance')) {
+        delete normalizedProps.appearance;
+    }
+
     return h(
         component,
         {
-            ...normalizeNodeProps(node.props ?? {}),
+            ...normalizedProps,
             modelValue: resolveModelValue(modelContext),
             'onUpdate:modelValue': (value: any) => {
                 updateModelValue(modelContext, value);
@@ -130,6 +338,10 @@ type FlashMessages = {
 
 const page = usePage();
 const lastFlashFingerprint = ref('');
+const seo = computed(() => {
+    const currentPage = page as unknown as { props?: { seo?: Record<string, any> } };
+    return currentPage.props?.seo ?? {};
+});
 
 const flash = computed<FlashMessages>(() => {
     const currentPage = page as unknown as { flash?: unknown; props?: { flash?: unknown } };