@upsoftware_tech/svarium 1.0.7 → 1.0.9

package/src/lib/block.ts

@@ -0,0 +1,51 @@
+export const GRID_COLS = {
+    default: { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4', 5: 'grid-cols-5', 6: 'grid-cols-6', 7: 'grid-cols-7', 8: 'grid-cols-8', 9: 'grid-cols-9', 10: 'grid-cols-10', 11: 'grid-cols-11', 12: 'grid-cols-12' },
+    sm: { 1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-4', 5: 'sm:grid-cols-5', 6: 'sm:grid-cols-6', 7: 'sm:grid-cols-7', 8: 'sm:grid-cols-8', 9: 'sm:grid-cols-9', 10: 'sm:grid-cols-10', 11: 'sm:grid-cols-11', 12: 'sm:grid-cols-12' },
+    md: { 1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 5: 'md:grid-cols-5', 6: 'md:grid-cols-6', 7: 'md:grid-cols-7', 8: 'md:grid-cols-8', 9: 'md:grid-cols-9', 10: 'md:grid-cols-10', 11: 'md:grid-cols-11', 12: 'md:grid-cols-12' },
+    lg: { 1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4', 5: 'lg:grid-cols-5', 6: 'lg:grid-cols-6', 7: 'lg:grid-cols-7', 8: 'lg:grid-cols-8', 9: 'lg:grid-cols-9', 10: 'lg:grid-cols-10', 11: 'lg:grid-cols-11', 12: 'lg:grid-cols-12' },
+    xl: { 1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3', 4: 'xl:grid-cols-4', 5: 'xl:grid-cols-5', 6: 'xl:grid-cols-6', 7: 'xl:grid-cols-7', 8: 'xl:grid-cols-8', 9: 'xl:grid-cols-9', 10: 'xl:grid-cols-10', 11: 'xl:grid-cols-11', 12: 'xl:grid-cols-12' },
+    xxl: { 1: '2xl:grid-cols-1', 2: '2xl:grid-cols-2', 3: '2xl:grid-cols-3', 4: '2xl:grid-cols-4', 5: '2xl:grid-cols-5', 6: '2xl:grid-cols-6', 7: '2xl:grid-cols-7', 8: '2xl:grid-cols-8', 9: '2xl:grid-cols-9', 10: '2xl:grid-cols-10', 11: '2xl:grid-cols-11', 12: '2xl:grid-cols-12' }
+} as const;
+
+const GAPS = { 0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 8: '8', 10: '10', 12: '12' } as const;
+
+const generateGapMap = (prefix: string = 'gap') => ({
+    default: { 0: `${prefix}-0`, 1: `${prefix}-1`, 2: `${prefix}-2`, 3: `${prefix}-3`, 4: `${prefix}-4`, 5: `${prefix}-5`, 6: `${prefix}-6`, 8: `${prefix}-8`, 10: `${prefix}-10`, 12: `${prefix}-12` },
+    sm: { 0: `sm:${prefix}-0`, 1: `sm:${prefix}-1`, 2: `sm:${prefix}-2`, 3: `sm:${prefix}-3`, 4: `sm:${prefix}-4`, 5: `sm:${prefix}-5`, 6: `sm:${prefix}-6`, 8: `sm:${prefix}-8`, 10: `sm:${prefix}-10`, 12: `sm:${prefix}-12` },
+    md: { 0: `md:${prefix}-0`, 1: `md:${prefix}-1`, 2: `md:${prefix}-2`, 3: `md:${prefix}-3`, 4: `md:${prefix}-4`, 5: `md:${prefix}-5`, 6: `md:${prefix}-6`, 8: `md:${prefix}-8`, 10: `md:${prefix}-10`, 12: `md:${prefix}-12` },
+    lg: { 0: `lg:${prefix}-0`, 1: `lg:${prefix}-1`, 2: `lg:${prefix}-2`, 3: `lg:${prefix}-3`, 4: `lg:${prefix}-4`, 5: `lg:${prefix}-5`, 6: `lg:${prefix}-6`, 8: `lg:${prefix}-8`, 10: `lg:${prefix}-10`, 12: `lg:${prefix}-12` },
+    xl: { 0: `xl:${prefix}-0`, 1: `xl:${prefix}-1`, 2: `xl:${prefix}-2`, 3: `xl:${prefix}-3`, 4: `xl:${prefix}-4`, 5: `xl:${prefix}-5`, 6: `xl:${prefix}-6`, 8: `xl:${prefix}-8`, 10: `xl:${prefix}-10`, 12: `xl:${prefix}-12` },
+    xxl: { 0: `2xl:${prefix}-0`, 1: `2xl:${prefix}-1`, 2: `2xl:${prefix}-2`, 3: `2xl:${prefix}-3`, 4: `2xl:${prefix}-4`, 5: `2xl:${prefix}-5`, 6: `2xl:${prefix}-6`, 8: `2xl:${prefix}-8`, 10: `2xl:${prefix}-10`, 12: `2xl:${prefix}-12` }
+});
+
+export const GRID_GAPS = generateGapMap('gap');
+export const GRID_GAPS_X = generateGapMap('gap-x');
+export const GRID_GAPS_Y = generateGapMap('gap-y');
+
+
+export type BreakpointValues = { default?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number; };
+
+
+function resolveClasses(map: any, values?: BreakpointValues): string[] {
+    if (!values) return [];
+    const classes: string[] = [];
+
+    (Object.keys(map) as Array<keyof BreakpointValues>).forEach(bp => {
+        const val = values[bp];
+        if (val !== undefined && map[bp]?.[val as any]) {
+            classes.push(map[bp][val as any]);
+        }
+    });
+
+    return classes;
+}
+
+export function getGridStyles(props: { cols?: BreakpointValues, gap?: BreakpointValues, gapX?: BreakpointValues, gapY?: BreakpointValues }): string {
+    return [
+        ...resolveClasses(GRID_COLS, props.cols),
+        ...resolveClasses(GRID_GAPS, props.gap),
+        ...resolveClasses(GRID_GAPS_X, props.gapX),
+        ...resolveClasses(GRID_GAPS_Y, props.gapY),
+        !props.cols?.default ? 'grid-cols-1' : ''
+    ].filter(Boolean).join(' ');
+}

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

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 } };