inicontent 1.0.0

package/app/components/Field/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <LazyFieldText v-if="['string', 'text', 'id', 'ip', 'multiple'].includes(detectedFieldType)" v-model="modelValue"
+        :field />
+    <LazyFieldSelect v-else-if="detectedFieldType === 'role'" v-model="modelValue" :field="{
+        ...field, options: database.roles?.map(({ name, id }) => ({
+            label: t(name),
+            value: id,
+        }))
+    }" />
+    <LazyFieldIcon v-else-if="detectedFieldType === 'icon'" v-model="modelValue" :field />
+    <LazyFieldJSON v-else-if="detectedFieldType === 'json'" v-model="modelValue" :field />
+    <LazyFieldTextarea v-else-if="detectedFieldType === 'textarea'" v-model="modelValue" :field />
+    <LazyFieldRadio v-else-if="detectedFieldType === 'radio'" v-model="modelValue" :field />
+    <LazyFieldCheckbox v-else-if="detectedFieldType === 'checkbox'" v-model="modelValue" :field />
+    <LazyFieldAsset v-else-if="field.table === 'assets'" v-model="modelValue" :field />
+    <LazyFieldTable v-else-if="detectedFieldType === 'table' || detectedFieldType === 'array-table'"
+        v-model="modelValue" :field />
+    <LazyFieldColor v-else-if="detectedFieldType === 'color'" v-model="modelValue" :field />
+    <LazyFieldUrl v-else-if="detectedFieldType === 'url'" v-model="modelValue" :field />
+    <LazyFieldEmail v-else-if="detectedFieldType === 'email'" v-model="modelValue" :field />
+    <LazyFieldHtml v-else-if="detectedFieldType === 'html'" v-model="modelValue" :field />
+    <LazyFieldNumber v-else-if="detectedFieldType === 'number'" v-model="modelValue" :field />
+    <LazyFieldPassword v-else-if="detectedFieldType === 'password'" v-model="modelValue" :field />
+    <LazyFieldBoolean v-else-if="detectedFieldType === 'boolean'" v-model="modelValue" :field />
+    <LazyFieldDate v-else-if="detectedFieldType === 'date'" v-model="modelValue" :field />
+    <LazyFieldSelect v-else-if="['locale', 'select'].includes(detectedFieldType)" v-model="modelValue" :field="detectedFieldType === 'locale' ? {
+        ...field, subType: 'select', options: translationLanguages.map((language) => ({
+            label: t(`languages.${language}`),
+            value: language,
+        }))
+    } : field" />
+    <LazyFieldTags v-else-if="detectedFieldType === 'tags'" v-model="modelValue" :field />
+    <LazyFieldMention v-else-if="detectedFieldType === 'mention'" v-model="modelValue" :field />
+    <LazyFieldObject v-else-if="detectedFieldType === 'object'" v-model="modelValue" :field />
+    <LazyFieldArray v-else-if="detectedFieldType === 'array'" v-model="modelValue" :field />
+    <component v-else-if="detectedFieldType === 'custom' && field.render"
+        :is="isVNode(field.render) ? field.render : field.render(modelValue)"></component>
+    <NEmpty v-else :description="`${t('fieldTypeNotExisting')}: '${String(detectedFieldType)}'`" />
+</template>
+
+<script lang="ts" setup>
+import { isVNode } from "vue";
+const field = defineModel<Field>("field", { required: true });
+const { item } = defineProps<{ item?: Item }>();
+const detectedFieldType = computed<DB_FieldType | CMS_FieldType>(() => {
+    const fieldType = (field.value.subType ?? field.value.type) as
+        | DB_FieldType
+        | CMS_FieldType;
+    if (Array.isArray(fieldType)) return getField(field.value).key;
+    return fieldType;
+});
+
+const modelValue = defineModel<any>({ default: () => ref().value });
+const database = useState<Database>("database");
+
+watchEffect(() => {
+    if (
+        field.value.defaultValue !== undefined &&
+        (modelValue.value === undefined || modelValue.value === null)
+    )
+        modelValue.value = field.value.defaultValue;
+    if (
+        (Array.isArray(field.value.type) && field.value.type.includes("array")) ||
+        (typeof field.value.type === "string" && field.value.type === "array")
+    )
+        field.value.isArray = true;
+});
+</script>

package/app/components/FloatingChatbot.vue

@@ -0,0 +1,73 @@
+<template>
+    <template v-if="database?.slug">
+        <Transition name="chatbot-panel">
+            <div v-if="hasOpened" v-show="isOpen" class="floating-chatbot-panel">
+                <NCard :bordered="true" class="chatbot-card" content-style="padding: 0;" :segmented="{ content: true }">
+                    <template #header>
+                        <NFlex align="center" :wrap="false">
+                            <NButton type="primary" circle>
+                                <Icon name="tabler:robot" />
+                            </NButton>
+                            <NText strong>{{ t("chatbot") }}</NText>
+                        </NFlex>
+                    </template>
+                    <template #header-extra>
+                        <NFlex align="center" :wrap="false" :size="4">
+                            <NButton quaternary circle size="small" :title="t('newChat')" :aria-label="t('newChat')" @click="resetNonce++">
+                                <template #icon>
+                                    <NIcon>
+                                        <Icon name="tabler:message-plus" />
+                                    </NIcon>
+                                </template>
+                            </NButton>
+                            <NButton quaternary circle size="small" :title="t('close')" :aria-label="t('close')" @click="isOpen = false">
+                                <template #icon>
+                                    <NIcon>
+                                        <Icon name="tabler:x" />
+                                    </NIcon>
+                                </template>
+                            </NButton>
+                        </NFlex>
+                    </template>
+                    <div class="chatbot-body">
+                        <LazyChatInterface :key="storageKey" :persist-key="storageKey" :reset-nonce="resetNonce" />
+                    </div>
+                </NCard>
+            </div>
+        </Transition>
+
+        <NButton class="floating-chatbot-button" type="primary" circle @click="toggleChatbot">
+            <template #icon>
+                <NIcon size="24">
+                    <Icon :name="isOpen ? 'tabler:x' : 'tabler:message-chatbot'" />
+                </NIcon>
+            </template>
+        </NButton>
+    </template>
+</template>
+
+<script setup lang="ts">
+const database = useState<Database>("database");
+const Language = useScopedCookie<LanguagesType>(
+	"language",
+	database.value?.slug,
+);
+const isOpen = ref(false);
+const hasOpened = ref(false);
+const resetNonce = ref(0);
+
+const storageKey = computed(() =>
+	database.value?.slug
+		? `inicontent:floating-chat:${database.value.slug}:${Language.value}`
+		: undefined,
+);
+
+const toggleChatbot = () => {
+	if (isOpen.value) {
+		isOpen.value = false;
+		return;
+	}
+	hasOpened.value = true;
+	isOpen.value = true;
+};
+</script>

package/app/components/Form/Card.vue

@@ -0,0 +1,151 @@
+<template>
+    <div>
+        <LazyFormDrawer></LazyFormDrawer>
+        <NSpin :show="!!Loading.CREATE || !!Loading.DELETE || !!Loading.UPDATE">
+            <NCard :header-style="{ paddingRight: 0, paddingLeft: 0 }" content-style="padding: 0" :bordered="false"
+                style="background-color: transparent">
+                <template #header>
+                    <NPerformantEllipsis>{{ t(table.slug) }}: {{ isEdit ? itemLabel : t('newItem') }}
+                    </NPerformantEllipsis>
+                </template>
+                <template v-if="formRef?.schema && formRef?.schema.length > 4" #header-extra>
+                    <NButtonGroup v-if="isEdit">
+                        <NTooltip :delay="1500">
+                            <template #trigger>
+                                <NButton type="info" secondary round>
+                                    <template #icon>
+                                        <NuxtLink
+                                            :to="`${$route.params.database ? `/${$route.params.database}` : ''}/admin/tables/${table.slug}/${$route.params.id}`">
+                                            <NIcon>
+                                                <Icon name="tabler:eye" />
+                                            </NIcon>
+                                        </NuxtLink>
+                                    </template>
+                                </NButton>
+                            </template>
+                            {{ t('view') }}
+                        </NTooltip>
+                        <NPopconfirm @positive-click="formRef?.delete">
+                            <template #trigger>
+                                <NTooltip :delay="1500">
+                                    <template #trigger>
+                                        <NButton secondary round type="error" :loading="Loading.DELETE">
+                                            <template #icon>
+                                                <NIcon>
+                                                    <Icon name="tabler:trash" />
+                                                </NIcon>
+                                            </template>
+                                        </NButton>
+                                    </template>
+                                    {{ t('delete') }}
+                                </NTooltip>
+                            </template>
+                            {{ t("theFollowingActionIsIrreversible") }}
+                        </NPopconfirm>
+
+                        <NTooltip :delay="1500">
+                            <template #trigger>
+                                <NButton secondary round type="primary" @click="formRef?.update"
+                                    :loading="Loading.UPDATE || Loading.SCHEMA">
+                                    <template #icon>
+                                        <NIcon>
+                                            <Icon name="tabler:device-floppy" />
+                                        </NIcon>
+                                    </template>
+                                </NButton>
+                            </template>
+                            {{ t('update') }}
+                        </NTooltip>
+                    </NButtonGroup>
+                    <NTooltip v-else :delay="1500">
+                        <template #trigger>
+                            <NButton secondary round type="primary" @click="formRef?.create"
+                                :loading="Loading.CREATE || Loading.SCHEMA">
+                                <template #icon>
+                                    <NIcon>
+                                        <Icon name="tabler:send" />
+                                    </NIcon>
+                                </template>
+                            </NButton>
+                        </template>
+                        {{ t('publish') }}
+                    </NTooltip>
+                </template>
+                <NCard style="height: fit-content;min-height: 200px;">
+                    <template #action>
+                        <NFlex justify="end">
+                            <NButtonGroup v-if="isEdit">
+                                <NButton type="info" secondary round>
+                                    <template #icon>
+                                        <NuxtLink
+                                            :to="`${$route.params.database ? `/${$route.params.database}` : ''}/admin/tables/${table.slug}/${$route.params.id}`">
+                                            <NIcon>
+                                                <Icon name="tabler:eye" />
+                                            </NIcon>
+                                        </NuxtLink>
+                                    </template>
+                                    {{ t('view') }}
+                                </NButton>
+                                <NPopconfirm @positive-click="formRef?.delete">
+                                    <template #trigger>
+                                        <NButton secondary round type="error" :loading="Loading.DELETE">
+                                            <template #icon>
+                                                <NIcon>
+                                                    <Icon name="tabler:trash" />
+                                                </NIcon>
+                                            </template>
+                                            {{ t('delete') }}
+                                        </NButton>
+                                    </template>
+                                    {{ t("theFollowingActionIsIrreversible") }}
+                                </NPopconfirm>
+
+                                <NButton secondary round type="primary" @click="formRef?.update"
+                                    :loading="Loading.UPDATE || Loading.SCHEMA">
+                                    <template #icon>
+                                        <NIcon>
+                                            <Icon name="tabler:device-floppy" />
+                                        </NIcon>
+                                    </template>
+                                    {{ t('update') }}
+                                </NButton>
+                            </NButtonGroup>
+                            <NButton v-else secondary round type="primary" @click="formRef?.create"
+                                :loading="Loading.CREATE || Loading.SCHEMA">
+                                <template #icon>
+                                    <NIcon>
+                                        <Icon name="tabler:send" />
+                                    </NIcon>
+                                </template>
+                                {{ t('publish') }}
+                            </NButton>
+                            <slot name="extraActions"></slot>
+                        </NFlex>
+                    </template>
+                    <slot>
+                        <Form ref="formRef" v-model="modelValue"></Form>
+                    </slot>
+                </NCard>
+            </NCard>
+        </NSpin>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const modelValue = defineModel<Item>()
+const isEdit = !!modelValue.value?.id
+
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}))
+const table = useState<Table>("table")
+const database = useState<Database>("database")
+const formRef = ref<FormRef>()
+
+const itemLabel = computed(() => renderLabel(table.value, modelValue.value))
+
+useHead({
+	title: `${t(database.value.slug)} | ${t(table.value.slug)} : ${isEdit ? itemLabel.value : t("new")}`,
+	link: [
+		{ rel: "icon", href: database.value?.icon?.publicURL ?? "/favicon.ico" },
+	],
+})
+</script>

package/app/components/Form/Drawer.vue

@@ -0,0 +1,195 @@
+<template><template v-for="(drawer, index) in Drawers" :key="index">
+		<NDrawer :onEsc :show="drawer.show || false" @update:show="(show) => onUpdateShow(index, show)"
+			:width="$device.isMobile ? '100%' : drawer.width" @update:width="(width) => {
+				if (index === 0) defaultWidth = width
+				drawer.width = width
+			}" resizable :placement="Language === 'ar' ? 'left' : 'right'" :class="`${drawer.table.replaceAll(' ','_')}-drawer`"
+			:id="index === (Drawers.length - 1) ? 'activeDrawer' : undefined" :close-on-esc="false">
+			<NDrawerContent closable :native-scrollbar="false">
+				<template #header>
+					<span v-if="drawer.id">
+						{{ t(drawer.mode === 'view' ? 'view' : 'edit') }}
+						<NuxtLink
+							:to="`${$route.params.database ? `/${$route.params.database}` : ''}/admin/tables/${drawer.table}/${drawer.id}${drawer.mode === 'view' ? '' : '/edit'}`">
+							<NText type="primary">
+								{{ itemsLabels[index] }}
+								<NIcon size="small">
+									<Icon :name="drawer.mode === 'view' ? 'tabler:eye' : 'tabler:external-link'" />
+								</NIcon>
+							</NText>
+						</NuxtLink>
+					</span>
+					<span v-else>
+						{{ t('new') }} {{ t(drawer.table) }}
+					</span>
+				</template>
+
+				<template #footer>
+					<NFlex :style="{ width: '100%' }" :justify="!$device.isMobile ? 'space-between' : 'end'">
+						<NButton v-if="!$device.isMobile" round secondary type="info" @click="toggleDrawerWidth(index)">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:chevron-right"
+										v-if="drawer.width && (typeof drawer.width === 'string' || drawer.width >= screenHalf)" />
+									<Icon name="tabler:chevron-left" v-else />
+								</NIcon>
+							</template>
+						</NButton>
+
+						<NButton v-if="drawer.mode === 'view' && canEditDrawer(drawer)" round secondary type="info"
+							@click="switchDrawerToEdit(index)">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:pencil" />
+								</NIcon>
+							</template>
+							{{ t('edit') }}
+						</NButton>
+
+						<NButton v-else round secondary type="primary"
+							:disabled="!drawer.schema?.length || Loading.UPDATE || Loading.CREATE || Loading.SCHEMA"
+							:loading="Loading.UPDATE || Loading.CREATE || Loading.SCHEMA"
+							@click="drawer.id ? formRefs[index]?.update() : formRefs[index]?.create()">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:device-floppy" />
+								</NIcon>
+							</template>
+							{{ drawer.id ? t('update') : t('create') }}
+						</NButton>
+					</NFlex>
+				</template>
+				<div class="drawerSpin" v-if="isDrawerFormMode(drawer) && (!drawer.schema?.length || Loading.UPDATE || Loading.CREATE)">
+					<NSpin />
+				</div>
+
+				<slot v-if="isDrawerFormMode(drawer)" @after-create="() => onAfterUpdateCreate(index)" @after-update="() => onAfterUpdateCreate(index)">
+					<Form :ref="(el: any) => formRefs[index] = el" v-model="drawer.data" :table="drawer.table"
+						@after-create="() => onAfterUpdateCreate(index)"
+						@after-update="() => onAfterUpdateCreate(index)" v-model:schema="drawer.schema"></Form>
+				</slot>
+
+				<NSpin v-else :show="!!(drawer.id && Loading[`Drawer_${drawer.table}_${drawer.id}`])">
+					<LazyDataS v-if="drawer.data && getDrawerTable(drawer)?.schema"
+						:value="drawer.data"
+						:schema="(getDrawerTable(drawer)?.schema ?? [])" />
+				</NSpin>
+			</NDrawerContent>
+		</NDrawer>
+	</template>
+</template>
+
+<script setup lang="ts">
+const database = useState<Database>("database");
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}));
+
+defineSlots<{
+	default({
+		onAfterCreate,
+		onAfterUpdate,
+	}: {
+		onAfterCreate: () => any;
+		onAfterUpdate: () => any;
+	}): {
+		onAfterCreate: () => any;
+		onAfterUpdate: () => any;
+	};
+}>();
+
+const Drawers = useState<DrawerRef>("drawers", () => []);
+const defaultWidth = useCookie<number | string>("width");
+const formRefs = ref<FormRef[]>([]);
+
+const screenHalf = window.screen.width / 2;
+
+function getDrawerTable(drawer?: DrawerRef[number]) {
+	if (!drawer?.table) return undefined;
+	return database.value.tables?.find(({ slug }) => slug === drawer.table);
+}
+
+function isDrawerFormMode(drawer?: DrawerRef[number]) {
+	return drawer?.mode !== "view" || !drawer?.id;
+}
+
+function canEditDrawer(drawer?: DrawerRef[number]) {
+	return !!(drawer?.id && getDrawerTable(drawer)?.allowedMethods?.includes("u"));
+}
+
+function switchDrawerToEdit(index: number) {
+	const drawer = Drawers.value[index];
+	if (!drawer?.id) return;
+	drawer.mode = "edit";
+}
+
+function onUpdateShow(index: number, show: boolean) {
+	if (!Drawers.value[index]) return;
+	Drawers.value[index].show = show;
+	if (!show) {
+		for (let i = 0; i < index; i++) {
+			const drawer = Drawers.value[i];
+			if (!drawer || typeof drawer.width !== "number") continue;
+			const lastIncrement = drawer.nestedWidthIncrements?.pop();
+			if (!lastIncrement) continue;
+			drawer.width = Math.max(251, drawer.width - lastIncrement);
+		}
+		setTimeout(() => Drawers.value.splice(index, 1), 100);
+	}
+}
+
+async function onAfterUpdateCreate(index: number) {
+	onUpdateShow(index, false);
+	const drawer = Drawers.value[index];
+	if (!drawer) return;
+	await refreshNuxtData(`${database.value.slug}/${drawer.table}`);
+}
+
+const toggleDrawerWidth = (index: number) => {
+	const drawer = Drawers.value[index];
+	if (!drawer) return;
+	if (typeof drawer.width === "string") drawer.width = 251;
+	else
+		drawer.width = !drawer.width || drawer.width >= screenHalf ? 251 : "100%";
+	nextTick(() => {
+		if (drawer.width) defaultWidth.value = drawer.width;
+	});
+};
+function onEsc() {
+	const openDrawerIndex = Drawers.value.findLastIndex((drawer) => drawer.show);
+	if (openDrawerIndex !== -1) {
+		// The asset preview modal keeps ".assetLightbox" on the DOM while it's open
+		// (Asset/Preview.vue). First Esc closes only the preview; the drawer waits
+		// until the preview is gone before closing itself.
+		const previewModal = document.querySelector(".assetLightbox");
+		if (!previewModal) onUpdateShow(openDrawerIndex, false);
+	}
+}
+const itemsLabels = ref<string[]>([]);
+watchEffect(() => {
+	for (let index = 0; index < Drawers.value.length; index++) {
+		const drawer = Drawers.value[index];
+		if (!drawer) continue;
+		const table = drawer.table
+			? database.value.tables?.find(({ slug }) => slug === drawer.table)
+			: undefined;
+
+		if (table) {
+			itemsLabels.value[index] = renderLabel(table, drawer.data);
+			continue;
+		}
+		itemsLabels.value[index] = "--";
+	}
+});
+
+onBeforeRouteLeave(() => {
+	Drawers.value = [];
+});
+
+onBeforeRouteUpdate((_to, _from) => {
+	const openDrawerIndex = Drawers.value.findLastIndex((drawer) => drawer.show);
+	if (openDrawerIndex !== -1) {
+		onUpdateShow(openDrawerIndex, false);
+		return false; // Prevent navigation until all drawers are closed
+	} else return; // Allow navigation without altering the query in the URL
+});
+</script>