@upsoftware_tech/svarium 1.0.6 → 1.0.7

package/dist/src/pages/Init.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { h, resolveComponent } from 'vue';
+
+const props = defineProps({
+	tree: Object,
+	meta: Object
+});
+
+function renderNode(node) {
+	const component = resolveComponent(node.type);
+
+	return h(component, node.props || {}, () => node.children?.map(renderNode));
+}
+</script>
+
+<template>
+	<pre>{{ meta }}</pre>
+	<hr />
+	<pre>{{ tree }}</pre>
+	<component :is="renderNode(tree)" />
+</template>

package/dist/src/pages/Svarium.vue

@@ -0,0 +1,189 @@
+<template>
+    <pre class="hidden">{{ tree }}</pre>
+    <main class="flex bg-slate-100 dark:bg-slate-950 h-screen">
+        <template v-if="Array.isArray(tree)">
+            <component
+                :is="renderNode(node)"
+                :key="index"
+                v-for="(node, index) in tree"
+            />
+        </template>
+
+        <template v-else>
+            <component :is="renderNode(tree)" />
+        </template>
+    </main>
+    <Toaster position="bottom-center" />
+</template>
+
+<script setup lang="ts">
+import { usePage } from '@inertiajs/vue3';
+import { computed, h, isRef, ref, resolveComponent, watch } from 'vue';
+import { Toaster } from 'vue-sonner';
+import { toast } from 'vue-sonner';
+import { normalizeNodeProps } from '../lib/appearance';
+import 'vue-sonner/style.css';
+
+const props = defineProps<{
+    tree: any;
+    meta?: any;
+    modelValue?: any;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: any): void;
+}>();
+
+function resolveModelValue(modelContext: any): any {
+    if (modelContext && typeof modelContext === 'object' && 'value' in modelContext) {
+        return modelContext.value;
+    }
+
+    if (isRef(modelContext)) {
+        return modelContext.value;
+    }
+
+    if (modelContext !== undefined) {
+        return modelContext;
+    }
+
+    return props.modelValue;
+}
+
+function updateModelValue(modelContext: any, value: any): void {
+    if (modelContext && typeof modelContext === 'object' && typeof modelContext.update === 'function') {
+        modelContext.update(value);
+        return;
+    }
+
+    if (isRef(modelContext)) {
+        modelContext.value = value;
+        return;
+    }
+
+    emit('update:modelValue', value);
+}
+
+function renderNode(node: any, modelContext?: any) {
+    if (!node || typeof node !== 'object') {
+        return null;
+    }
+
+    const componentName = node.component ?? node.type;
+
+    if (!componentName) {
+        console.error('Missing component type', node);
+        return null;
+    }
+
+    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));
+    }
+
+    if (node.slots && !Array.isArray(node.slots)) {
+        for (const [name, content] of Object.entries(node.slots)) {
+            if (!Array.isArray(content)) {
+                continue;
+            }
+
+            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);
+
+                return content.map((child: any) => renderNode(child, slotModelContext));
+            };
+        }
+    }
+
+    return h(
+        component,
+        {
+            ...normalizeNodeProps(node.props ?? {}),
+            modelValue: resolveModelValue(modelContext),
+            'onUpdate:modelValue': (value: any) => {
+                updateModelValue(modelContext, value);
+            },
+        },
+        slots,
+    );
+}
+
+type FlashMessages = {
+    success?: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    message?: string;
+};
+
+const page = usePage();
+const lastFlashFingerprint = ref('');
+
+const flash = computed<FlashMessages>(() => {
+    const currentPage = page as unknown as { flash?: unknown; props?: { flash?: unknown } };
+    const value = currentPage.flash ?? currentPage.props?.flash;
+
+    if (!value || typeof value !== 'object') {
+        return {};
+    }
+
+    return value as FlashMessages;
+});
+
+watch(
+    flash,
+    (value) => {
+        const fingerprint = ['success', 'error', 'warning', 'info', 'message']
+            .map((key) => {
+                const flashKey = key as keyof FlashMessages;
+                const item = value[flashKey];
+                return `${key}:${typeof item === 'string' ? item : ''}`;
+            })
+            .join('|');
+
+        if (fingerprint === 'success:|error:|warning:|info:|message:') {
+            lastFlashFingerprint.value = '';
+            return;
+        }
+
+        if (fingerprint === lastFlashFingerprint.value) {
+            return;
+        }
+
+        lastFlashFingerprint.value = fingerprint;
+
+        if (value.error) {
+            toast.error(value.error);
+        }
+
+        if (value.warning) {
+            toast.warning(value.warning);
+        }
+
+        if (value.success) {
+            toast.success(value.success);
+        }
+
+        if (value.info) {
+            toast.info(value.info);
+        }
+
+        if (value.message) {
+            toast(value.message);
+        }
+    },
+    { immediate: true },
+);
+</script>