inicontent 1.0.0

package/app/components/ChatPagePreview.vue

@@ -0,0 +1,34 @@
+<template>
+	<NModal
+		:show="show"
+		@update:show="emit('update:show', $event)"
+		preset="card"
+		:title="title"
+		size="large"
+	>
+		<NFlex v-if="page" vertical align="start" :size="8">
+			<NButton size="small" round secondary disabled>
+				<template #icon>
+					<NIcon><Icon name="tabler:file-text" /></NIcon>
+				</template>
+				/{{ page.slug }}
+			</NButton>
+			<NText depth="3">{{ t('pagePreviewUnavailable') }}</NText>
+		</NFlex>
+	</NModal>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	show: boolean;
+	page?: { slug?: string; seo?: { title?: string }; content?: unknown } | null;
+	primaryColor?: string;
+}>();
+
+const emit = defineEmits<{ "update:show": [boolean] }>();
+
+const title = computed(() => {
+	const pageTitle = props.page?.seo?.title;
+	return pageTitle === "" ? t("homePage") : pageTitle || "";
+});
+</script>

package/app/components/Column/Array.vue

@@ -0,0 +1,29 @@
+<template>
+    <LazyColumn v-if="field.subType" :field="{ ...field, type: field.subType }" :value="value" />
+    <LazyColumn v-else-if="!isArrayOfObjects(field.children)"
+        :field="{ ...field, type: field.children === 'table' ? 'table' : 'tags' }" :value="value" />
+    <NPopover v-else scrollable style="max-height: 240px;" trigger="click">
+        <template #trigger>
+            <NButton size="small" circle>{{ `[${([] as Record<string, any>[]).concat(value).length}]` }}</NButton>
+        </template>
+        <NCollapse accordion arrow-placement="right">
+            <NCollapseItem v-for="(singleValue, index) in ([] as Record<string, any>[]).concat(value)"
+                :title="getCollapseItemTitle(field, (singleValue as Item), index)">
+                <NFlex vertical>
+                    <NFlex
+                        v-for="child in (field.children as Schema).filter(({ key }) => typeof singleValue[key] !== 'undefined')"
+                        align="center" inline>
+                        <strong>{{ child.key }}:</strong>
+                        <LazyColumn :field="child" :value="singleValue[child.key]" />
+                    </NFlex>
+                </NFlex>
+            </NCollapseItem>
+        </NCollapse>
+    </NPopover>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfObjects } from "inibase/utils"
+
+const { field, value } = defineProps<{ field: Field; value?: any }>()
+</script>

package/app/components/Column/Asset.vue

@@ -0,0 +1,21 @@
+<template>
+	<NFlex :wrap="false" class="list">
+		<template v-for="file in assets" :key="file.id">
+			<LazyAssetThumb :asset="file" :preview-assets="assets"
+				:container-selector="$route.params.id ? undefined : '#DataTable'" :size="40" />
+		</template>
+	</NFlex>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value: Asset | Asset[] }>();
+const assets = computed(() => ([] as Asset[]).concat(value));
+</script>
+
+<style scoped>
+.list {
+	max-width: 100%;
+	overflow: hidden;
+	min-width: 0;
+}
+</style>

package/app/components/Column/Boolean.vue

@@ -0,0 +1,12 @@
+<template>
+    <NIconWrapper :color="value === true ? undefined : '#D32F2F'" :border-radius="50" :size="18">
+        <NIcon size="16">
+            <Icon name="tabler:check" v-if="value === true" />
+            <Icon name="tabler:x" v-else />
+        </NIcon>
+    </NIconWrapper>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value?: boolean }>()
+</script>

package/app/components/Column/Color.vue

@@ -0,0 +1,9 @@
+<template>
+    <NTag round :style="{ backgroundColor: value }">
+        <NText style="mix-blend-mode: difference;">{{ value }}</NText>
+    </NTag>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value?: string }>()
+</script>

package/app/components/Column/Date.vue

@@ -0,0 +1,57 @@
+<template>
+    <NTooltip :delay="isRelativeDateNotifShown ? 2500 : 500" trigger="hover"
+        @update:show="(show) => !show ? isRelativeDateNotifShown = true : ''">
+        <template #trigger>
+            <NTime v-if="timeValue !== undefined" style="cursor: pointer;" @click.prevent="isRelative = !isRelative"
+                :time="timeValue" :type="isRelative ? 'relative' : absoluteType">
+                {{ value }}
+            </NTime>
+            <NText v-else :depth="3">{{ value }}</NText>
+        </template>
+        {{ t('clickToToggleDate') }}
+    </NTooltip>
+</template>
+
+<script lang="ts" setup>
+const datetimeFieldTypes = ["datetime", "datetimerange"]
+
+const isRelative = useState("isRelative", () => false)
+const isRelativeDateNotifShown = useState(
+    "isRelativeDateNotifShown",
+    () => false,
+)
+const { value, field } = defineProps<{ value?: number | string | Date; field?: Field }>()
+
+const timeValue = computed<number | undefined>(() => {
+    if (value === null || value === undefined) return undefined
+
+    if (value instanceof Date) {
+        const ms = value.getTime()
+        return Number.isNaN(ms) ? undefined : ms
+    }
+
+    if (typeof value === "number")
+        return Number.isNaN(value) ? undefined : value
+
+    if (typeof value === "string") {
+        const trimmed = value.trim()
+        if (!trimmed) return undefined
+
+        const numericValue = Number(trimmed)
+        if (!Number.isNaN(numericValue)) return numericValue
+
+        const parsedMs = Date.parse(trimmed)
+        return Number.isNaN(parsedMs) ? undefined : parsedMs
+    }
+
+    return undefined
+})
+
+const hasTime = computed(() => {
+    return !!field?.date && datetimeFieldTypes.includes(field.date)
+})
+
+const absoluteType = computed<"date" | "datetime">(() =>
+    hasTime.value ? "datetime" : "date",
+)
+</script>

package/app/components/Column/Edit.vue

@@ -0,0 +1,215 @@
+<template>
+	<NTooltip :show="tooltipShow && !isEdit && isEditable" @update:show="(show) => tooltipShow = show" :delay="1500"
+		placement="bottom">
+		<template #trigger>
+			<NSpin
+				:show="!!loadingRef"
+				size="small"
+				style="min-height: 22px"
+				:onContextmenu="onContextmenu"
+				:onTouchstart="handleTouchStart"
+				:onTouchend="clearLongPress"
+				:onTouchcancel="clearLongPress"
+				:onTouchmove="clearLongPress"
+				:class="{ 'editable': !isEdit && isEditable }"
+			>
+				<LazyColumn v-if="!isEdit || isModalEdit" :field="fieldRef" :value="currentValue" :item-label="props.itemLabel" />
+				<Field v-else-if="isEdit" :field="inputField" v-model="inputValue" />
+			</NSpin>
+		</template>
+		{{ editHint }}
+	</NTooltip>
+
+	<NModal
+		v-if="isModalEdit"
+		:show="isEdit"
+		preset="card"
+		:style="modalStyle"
+		:title="modalTitle"
+		@update:show="(show) => (!show ? handleChange() : undefined)"
+	>
+		<Field :field="inputField" v-model="inputValue" />
+		<template #footer>
+			<NFlex justify="end">
+				<NButton secondary @click="cancelEdit">{{ t('cancel') }}</NButton>
+				<NButton type="primary" @click="handleChange">{{ t('save') }}</NButton>
+			</NFlex>
+		</template>
+	</NModal>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfObjects } from "inibase/utils"
+
+const props = defineProps<{
+	field: Field
+	loading?: boolean
+	modelValue?: unknown
+	editKey?: string
+	itemLabel?: string
+}>()
+
+const fieldRef = toRef(props, "field")
+const loadingRef = toRef(props, "loading")
+const editKeyRef = toRef(props, "editKey")
+
+const emit = defineEmits(["update:modelValue"])
+
+const currentValue = computed({
+	get: () => props.modelValue,
+	set: (newValue) => emit("update:modelValue", newValue),
+})
+
+// ── When the current language isn't the primary language, disable inline table edit feature ──
+const isEditable = computed(
+	() => !isArrayOfObjects(fieldRef.value.children),
+)
+const isAssetField = computed(
+	() => fieldRef.value.type === "asset" || fieldRef.value.table === "assets",
+)
+const isModalEdit = computed(
+	() => fieldRef.value.type === "html" || isAssetField.value,
+)
+
+const tooltipShow = ref(false)
+const isTouchDevice = ref(false)
+const longPressTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+const editHint = computed(() =>
+	t(isTouchDevice.value ? "pressAndHoldToEdit" : "rightClickToEdit"),
+)
+const modalTitle = computed(() => {
+	const titleParts = [t(fieldRef.value.key)]
+	if (props.itemLabel && props.itemLabel !== "--") titleParts.push(props.itemLabel)
+	return titleParts.join(" - ")
+})
+const modalStyle = computed(() => ({
+	width: isAssetField.value ? "min(1200px, 96vw)" : "min(1000px, 95vw)",
+}))
+
+const inputValue = ref(currentValue.value)
+const inputRef = ref()
+const inputField = computed(() => ({
+	...fieldRef.value,
+	subType: fieldRef.value.subType
+		? ["radio", "checkbox"].includes(fieldRef.value.subType)
+			? "select"
+			: fieldRef.value.subType
+		: undefined,
+	labelProps: { showLabel: false, showFeedback: false },
+	inputProps: {
+		show: true,
+		round: true,
+		ref: inputRef,
+		onBlur: isModalEdit.value ? undefined : handleChange,
+	},
+}))
+const isEdit = ref(false)
+const instance = getCurrentInstance()
+const activeEditKey = useState<string | null>("activeTableEditKey", () => null)
+const editorKey = computed(
+	() =>
+		editKeyRef.value ??
+		`${fieldRef.value.id ?? fieldRef.value.key ?? "field"}-${instance?.uid ?? 0}`,
+)
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (!isEdit.value) inputValue.value = value
+	},
+)
+
+watch(activeEditKey, (newKey) => {
+	if (isEdit.value && newKey !== editorKey.value) handleChange()
+})
+
+onMounted(() => {
+	isTouchDevice.value =
+		"ontouchstart" in window || navigator.maxTouchPoints > 0
+	document.addEventListener("keydown", handleKeydown)
+})
+
+function clearLongPress() {
+	if (longPressTimeout.value) {
+		clearTimeout(longPressTimeout.value)
+		longPressTimeout.value = null
+	}
+}
+
+function startEdit() {
+	inputValue.value = currentValue.value
+	activeEditKey.value = editorKey.value
+	isEdit.value = true
+
+	if (isModalEdit.value) return
+
+	setTimeout(() => {
+		if (inputRef.value) {
+			if (inputRef.value.focusInput) return inputRef.value.focusInput()
+			inputRef.value.focus()
+		}
+	}, 100)
+}
+
+function onContextmenu(e: MouseEvent | TouchEvent) {
+	if (!isEditable.value || isEdit.value) return
+
+	e.preventDefault()
+	e.stopPropagation()
+	clearLongPress()
+	startEdit()
+}
+
+function handleTouchStart(e: TouchEvent) {
+	if (!isTouchDevice.value || !isEditable.value || isEdit.value) return
+
+	clearLongPress()
+	longPressTimeout.value = window.setTimeout(() => {
+		onContextmenu(e)
+	}, 450)
+}
+
+onBeforeUnmount(() => {
+	clearLongPress()
+	document.removeEventListener("keydown", handleKeydown)
+	if (activeEditKey.value === editorKey.value) activeEditKey.value = null
+})
+
+function finishEdit(save = true) {
+	clearLongPress()
+	if (save && inputValue.value !== currentValue.value)
+		currentValue.value = inputValue.value
+	else inputValue.value = currentValue.value
+	isEdit.value = false
+	tooltipShow.value = false
+	if (activeEditKey.value === editorKey.value) activeEditKey.value = null
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (
+		!isEdit.value ||
+		!((e.ctrlKey || e.metaKey) && (e.key.toLowerCase() === "s" || e.key === "س"))
+	)
+		return
+
+	e.preventDefault()
+	handleChange()
+}
+
+function cancelEdit() {
+	finishEdit(false)
+}
+
+function handleChange() {
+	finishEdit(true)
+}
+</script>
+
+<style scoped>
+.editable,
+.editable * {
+	cursor: context-menu !important;
+	touch-action: manipulation;
+	-webkit-touch-callout: none;
+}
+</style>

package/app/components/Column/Email.vue

@@ -0,0 +1,9 @@
+<template>
+    <NA :href="`mailto:${value}`" target="_blank">
+        {{ value }}
+    </NA>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value?: string }>()
+</script>

package/app/components/Column/Html.vue

@@ -0,0 +1,27 @@
+<template>
+    <NButton circle @click="showModal = true" :disabled="!valueRef || valueRef.length < 8" size="small"
+        @mouseover="buttonHovered = true" @mouseout="buttonHovered = false">
+        <template #icon>
+            <NIcon>
+                <Icon name="tabler:zoom-in" v-if="buttonHovered" />
+                <Icon name="tabler:brackets-angle" v-else />
+            </NIcon>
+        </template>
+    </NButton>
+    <NModal v-model:show="showModal" :title="modalTitle" draggable preset="card" style="width: 600px;">
+        <div v-html="valueRef?.replaceAll('<img ', '<img style=\'width:100%\'') || ''"></div>
+    </NModal>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{ field: Field; value?: string; itemLabel?: string }>()
+const fieldRef = toRef(props, "field")
+const valueRef = toRef(props, "value")
+const showModal = ref(false)
+const buttonHovered = ref(false)
+const modalTitle = computed(() => {
+	const titleParts = [t(fieldRef.value.key)]
+    if (props.itemLabel && props.itemLabel !== "--") titleParts.push(props.itemLabel)
+    return titleParts.join(" - ")
+})
+</script>

package/app/components/Column/Id.vue

@@ -0,0 +1,20 @@
+<template>
+    <NFlex :wrap="false" align="center" :size="5">
+        <NIcon v-if="value" style="cursor: pointer;" size="medium" @click="copyID">
+            <Icon name="tabler:copy" />
+        </NIcon>
+        <NPerformantEllipsis>
+            {{ value }}
+        </NPerformantEllipsis>
+    </NFlex>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value?: string | number }>()
+
+async function copyID() {
+	if (!value) return
+	await copyToClipboard(value)
+	window.$message.success(t("copiedSuccessfully"))
+}
+</script>

package/app/components/Column/Locale.vue

@@ -0,0 +1,32 @@
+<template>
+	<NFlex :wrap="false" class="localeCell">
+		<NTag v-for="singleValue in ([] as string[]).concat(value)" :key="singleValue" round
+			:bordered="false">
+			{{ t(`languages.${singleValue}`) }}
+		</NTag>
+	</NFlex>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+	value: string | number | (string | number)[]
+}>()
+</script>
+
+<style scoped>
+.localeCell {
+	max-width: 100%;
+	overflow: hidden;
+	min-width: 0;
+}
+
+.localeCell :deep(.n-tag) {
+	max-width: 100%;
+}
+
+.localeCell :deep(.n-tag__content) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>

package/app/components/Column/Object.vue

@@ -0,0 +1,18 @@
+<template>
+    <NPopover scrollable style="max-height: 240px;max-width: 200px;" trigger="click">
+        <template #trigger>
+            <NButton size="small" circle>{{ `\{${Object.keys(value).length}\}` }}</NButton>
+        </template>
+        <NFlex vertical>
+            <NFlex v-for="child in (field.children as Schema).filter(({ key }) => typeof value[key] !== 'undefined')"
+                align="center" inline>
+                <strong>{{ t(child.key) }}:</strong>
+                <LazyColumn :field="child" :value="value[child.key]" />
+            </NFlex>
+        </NFlex>
+    </NPopover>
+</template>
+
+<script lang="ts" setup>
+const { field, value } = defineProps<{ field: Field; value?: any }>()
+</script>

package/app/components/Column/Password.vue

@@ -0,0 +1,7 @@
+<template>
+    •••••••
+</template>
+
+<script lang="ts" setup>
+defineProps<{ value?: string }>()
+</script>

package/app/components/Column/Role.vue

@@ -0,0 +1,15 @@
+<template>
+    <NTag round :bordered="false">
+        <template #icon>
+            <span v-if="role" style="padding: 0 5px;">{{ t(role).charAt(0).toUpperCase() }}</span>
+            <Icon v-else name="question-mark" />
+        </template>
+        {{ role ? t(role) : "--" }}
+    </NTag>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value: string }>()
+const database = useState<Database>("database")
+const role = database.value.roles?.find(({ id }) => id === value)?.name
+</script>

package/app/components/Column/S.vue

@@ -0,0 +1,14 @@
+<template>
+	<Column v-for="field of schema" :field="field" v-model="modelValue" />
+</template>
+
+<script lang="ts" setup>
+// TO-DO:
+// Add fields: Mention, Range, Slider
+
+const { schema } = defineProps<{ schema?: Schema }>()
+
+const modelValue = defineModel({
+	default: {},
+})
+</script>

package/app/components/Column/Table/Single.vue

@@ -0,0 +1,49 @@
+<template>
+    <NButton v-for="value in values" tag="a"
+        :href="`${$route.params.database ? `/${$route.params.database}` : ''}/admin/tables/${field.table}/${idOf(value)}`"
+        @click.prevent.stop="handleClick(value)" :loading="Loading[`Drawer_${field.table}_${idOf(value)}`]" size="small"
+        round>
+        <template v-if="table" #icon>
+            <LazyTableIcon :table="table" />
+        </template>
+        {{ renderLabel(table, resolvedItem(value) ?? ({ id: idOf(value) } as Item)) }}
+    </NButton>
+</template>
+
+<script lang="ts" setup>
+import { isObject } from "inibase/utils";
+
+const props = defineProps<{ field: Field; values: unknown[] }>();
+
+const database = useState<Database>("database");
+const table = database.value.tables?.find(({ slug }) => slug === props.field.table);
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}));
+
+// Table references can be raw ids (translated / stored values). Resolve them
+// through the shared cache which batches all ids of the current page into a
+// single request per referenced table. Object values are used as-is and never
+// trigger a fetch.
+const referenced = useReferencedItems(props.field.table);
+
+watch(
+	() => props.values,
+	(values) => referenced.register(values),
+	{ immediate: true },
+);
+
+function idOf(value: unknown): string {
+	return isObject(value) ? String((value as Item).id ?? "") : String(value);
+}
+
+function resolvedItem(value: unknown): Item | undefined {
+	if (isObject(value)) return value as Item;
+	return referenced.items.value[idOf(value)];
+}
+
+async function handleClick(value: unknown) {
+	const id = idOf(value);
+	if (id && props.field.table) {
+		openDrawer(props.field.table, id, {}, "view");
+	}
+}
+</script>

package/app/components/Column/Table/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <NButtonGroup v-if="values.length > 1" class="tableGroup">
+        <LazyColumnTableSingle :field="field" :values="[firstValue]" />
+
+        <NPopover style="max-height: 240px" scrollable>
+            <template #trigger>
+                <NButton size="small">
+                    +{{ values.length - 1 }}
+                </NButton>
+            </template>
+            <NFlex vertical>
+                <LazyColumnTableSingle :field="field" :values="restValues" />
+            </NFlex>
+        </NPopover>
+    </NButtonGroup>
+
+    <LazyColumnTableSingle v-else :field="field" :values="values" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	field: Field;
+	value: Item | Item[] | string | number | (string | number)[];
+}>();
+// Computed (not setup-time constants): the grid replaces `value` when the row
+// data reloads on language switch, and this component instance is patched in
+// place rather than remounted — stale values made the cell keep showing the
+// previous language's reference.
+const values = computed(() => ([] as unknown[]).concat(props.value));
+const firstValue = computed(() => values.value[0]);
+const restValues = computed(() => values.value.slice(1));
+
+// Register every id of the cell up front (including the +N popover rest) so the
+// whole page's references land in the single batched fetch.
+const referenced = useReferencedItems(props.field.table);
+
+watch(
+	() => props.value,
+	(value) => referenced.register(value),
+	{ immediate: true },
+);
+</script>

package/app/components/Column/Tags.vue

@@ -0,0 +1,31 @@
+<template>
+	<NFlex :wrap="false" class="tagsCell">
+		<NTag v-for="singleValue in ([] as string[]).concat(value)" round :bordered="false"
+			:color="isArrayOfArrays(field.options) ? getColorObj(singleValue, field.options as [string | number, string][]) : undefined">
+			{{ singleValue }}</NTag>
+	</NFlex>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfArrays } from "inibase/utils"
+
+defineProps<{ field: Field; value: string | number | (string | number)[] }>()
+</script>
+
+<style scoped>
+.tagsCell {
+	max-width: 100%;
+	overflow: hidden;
+	min-width: 0;
+}
+
+.tagsCell :deep(.n-tag) {
+	max-width: 100%;
+}
+
+.tagsCell :deep(.n-tag__content) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>

package/app/components/Column/Text.vue

@@ -0,0 +1,9 @@
+<template>
+    <NPerformantEllipsis>
+        {{ value }}
+    </NPerformantEllipsis>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ value?: string | number }>()
+</script>