inicontent 1.0.0

package/app/components/Field/Table.vue

@@ -0,0 +1,348 @@
+<template>
+	<FieldWrapper :field :rule v-model="modelValue">
+		<NSelect :placeholder="t(field.key)" :value="selectValue" @update:value="onUpdateSelectValue" :options="options" remote
+			clearable :filterable="!!searchIn && searchIn.length > 0" :loading="loading" :reset-menu-on-options-change="false"
+			:multiple="!!field.isArray" consistent-menu-width max-tag-count="responsive"
+			@update:show="(show) => show && loadOptions()" @scroll="handleScroll" @search="debouncedLoadOptions" v-bind="field.inputProps
+				? typeof field.inputProps === 'function'
+					? field.inputProps(modelValue) ?? {}
+					: field.inputProps
+				: {}">
+			<template #action v-if="table?.allowedMethods?.includes('c')">
+				<NFlex justify="center">
+					<NButton round strong secondary type="primary" @click="() => openDrawer(field.table as string)">
+						<template #icon>
+							<Icon name="tabler:plus" />
+						</template>
+					</NButton>
+				</NFlex>
+			</template>
+		</NSelect>
+	</FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import type { pageInfo } from "inibase";
+import { isObject, isValidID } from "inibase/utils";
+import Inison from "inison";
+import type { FormItemRule } from "naive-ui";
+import { debounce } from "~/composables";
+
+const { field } = defineProps<{ field: Field }>();
+const modelValue = defineModel<Item | Item[]>();
+const options = ref<tableOption[] | undefined>();
+const loading = ref(false);
+const loadingMore = ref(false);
+const database = useState<Database>("database");
+
+// Monotonic token that invalidates stale responses from superseded requests.
+let requestSeq = 0;
+// The resolved query (search + where) the currently loaded options belong to.
+let loadedQuery: string | undefined;
+const table = database.value.tables?.find(({ slug }) => slug === field.table);
+
+// Id-only model values (translated / stored table refs) are resolved through
+// the shared cache which batches all ids of the current page into a single
+// request per referenced table. Object values never trigger a fetch.
+const referenced = useReferencedItems(field.table);
+
+watch(
+	modelValue,
+	(value) => {
+		if (!value) return;
+		const entries = ([] as unknown[])
+			.concat(value)
+			.filter((entry) => entry !== undefined && entry !== null);
+		const objectItems = entries.filter(isObject) as Item[];
+		const idEntries = entries
+			.filter((entry) => !isObject(entry))
+			.map((entry) => String(entry).trim())
+			.filter(Boolean);
+
+		if (idEntries.length) referenced.register(idEntries);
+
+		// Resolved entries become select options: id-strings via the cache,
+		// objects as-is.
+		const resolvedOptions = [
+			...idEntries
+				.map((id) => referenced.items.value[id])
+				.filter((item): item is Item => Boolean(item?.id))
+				.map(singleOption),
+			...objectItems.map(singleOption),
+		];
+		if (!resolvedOptions.length) return;
+		if (!options.value) {
+			options.value = resolvedOptions;
+			return;
+		}
+		const known = new Set(options.value.map(({ value }) => value));
+		const fresh = resolvedOptions.filter(({ value }) => !known.has(value));
+		if (fresh.length) options.value = [...options.value, ...fresh];
+	},
+	{ immediate: true },
+);
+
+// Rebuild id options once the batched fetch populates the cache.
+watch(
+	() => referenced.items.value,
+	() => {
+		const value = modelValue.value;
+		if (!value) return;
+		const idEntries = ([] as unknown[])
+			.concat(value)
+			.filter((entry) => !isObject(entry))
+			.map((entry) => String(entry).trim())
+			.filter(Boolean);
+		if (!idEntries.length) return;
+		const idOptions = idEntries
+			.map((id) => referenced.items.value[id])
+			.filter((item): item is Item => Boolean(item?.id))
+			.map(singleOption);
+		if (!idOptions.length) return;
+		const known = new Set((options.value ?? []).map(({ value }) => value));
+		const fresh = idOptions.filter(({ value }) => !known.has(value));
+		if (fresh.length) options.value = [...(options.value ?? []), ...fresh];
+	},
+);
+
+const selectValue = computed<null | string | string[]>(() => {
+	const value = modelValue.value as unknown;
+	if (value === undefined || value === null || value === "") return null;
+	const toID = (entry: unknown) =>
+		(isObject(entry) ? (entry as Item).id : entry) as string;
+	if (field.isArray)
+		// the search form stores selected ids as a comma joined string
+		return (Array.isArray(value) ? value : String(value).split(","))
+			.map(toID)
+			.filter(Boolean);
+	return toID(Array.isArray(value) ? value[0] : value) ?? null;
+});
+
+const rule: FormItemRule = {
+	trigger: ["blur", "change"],
+	type: !field.isArray ? "string" : "array",
+	required: field.required,
+	min: field.isArray ? field.min : undefined,
+	validator: async () => {
+		await nextTick();
+		return fieldValidator(field, modelValue.value);
+	},
+};
+
+const config = useRuntimeConfig();
+
+type tableOption = {
+	label: string;
+	value: string;
+	raw: Item;
+};
+
+function singleOption(option: Item): tableOption {
+	return {
+		label: renderLabel(table, option),
+		value: option.id as string,
+		raw: option,
+	};
+}
+
+async function onUpdateSelectValue(
+	_id: string | string[],
+	option: tableOption | tableOption[],
+) {
+	modelValue.value = option
+		? Array.isArray(option)
+			? option.map(({ raw }) => raw)
+			: option.raw
+		: undefined;
+	await nextTick();
+	if (
+		options.value &&
+		modelValue.value &&
+		modelValue.value.length === options.value.length
+	)
+		options.value = options.value.filter(({ value }) =>
+			Array.isArray(_id) ? _id.includes(value) : _id === value,
+		);
+}
+
+const searchIn = table?.defaultSearchableColumns
+	? table.defaultSearchableColumns.map((columnID) =>
+			getPath(table.schema ?? [], columnID),
+		)
+	: field.searchIn;
+
+const pagination = ref<pageInfo>();
+const where = ref<string>();
+
+const debouncedLoadOptions = debounce(async (searchValue) => {
+	await loadOptions(searchValue);
+}, 1000);
+
+const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+
+async function loadOptions(searchValue?: string | number) {
+	const seq = ++requestSeq;
+	const searchOrObject =
+		searchValue &&
+		(typeof searchValue !== "string" || searchValue.trim().length) &&
+		searchIn
+			? (searchIn.reduce((result, searchKey) => {
+					Object.assign(result, {
+						[searchKey]: `*%${searchValue}%`,
+					});
+					return result;
+				}, {}) ?? false)
+			: false;
+
+	let _where = "";
+	if (field.where) {
+		if (searchOrObject)
+			_where = Inison.stringify({
+				...((typeof field.where === "string"
+					? Inison.unstringify(
+							renderLabel({ ...(table as Table), label: field.where }),
+						)
+					: field.where) as any),
+				or: searchOrObject,
+			});
+		else
+			_where =
+				typeof field.where === "string"
+					? renderLabel({ ...(table as Table), label: field.where })
+					: renderLabel({
+							...(table as Table),
+							label: Inison.stringify(field.where),
+						});
+	} else if (searchOrObject)
+		_where = Inison.stringify({
+			or: searchOrObject,
+		});
+
+	// Add direct ID search if the searchValue is a valid ID
+	if (searchValue && isValidID(searchValue))
+		_where = Inison.stringify({ id: searchValue });
+
+	// Already loaded for this query (e.g. the dropdown was re-opened) — keep
+	// the existing options instead of fetching and rebuilding the whole menu.
+	if (loadedQuery === _where && options.value !== undefined) {
+		loading.value = false;
+		return;
+	}
+
+	loadedQuery = _where;
+	where.value = _where || undefined;
+	pagination.value = undefined;
+	loading.value = true;
+	loadingMore.value = false;
+
+	const request = await $fetch<apiResponse<tableOption[]>>(
+		`${config.public.apiBase}${database.value.slug}/${field.table}`,
+		{
+			params: {
+				where: where.value,
+				options: Inison.stringify({
+					columns: table?.columns,
+				}),
+				[`${database.value.slug}_sid`]: sessionID.value,
+			},
+			cache: "no-cache",
+			credentials: "include",
+		},
+	).finally(() => {
+		if (seq === requestSeq) loading.value = false;
+	});
+
+	// Ignore stale responses from superseded requests
+	if (seq !== requestSeq) return;
+
+	pagination.value = request.options;
+
+	if (modelValue.value) {
+		const currentSelectedOptions = (options.value ?? []).filter(({ value }) =>
+			selectValue.value?.includes(value),
+		);
+		options.value = [
+			...currentSelectedOptions,
+			...(request.result
+				?.map(singleOption)
+				.filter(({ value }) => !selectValue.value?.includes(value)) ?? []),
+		];
+	} else options.value = request.result?.map(singleOption) ?? [];
+}
+
+let lastScrollCall = 0;
+function handleScroll(e: Event) {
+	const now = Date.now();
+	if (now - lastScrollCall < 120) return;
+	lastScrollCall = now;
+
+	const currentTarget = e.currentTarget as HTMLElement;
+	if (
+		loading.value ||
+		loadingMore.value ||
+		!pagination.value ||
+		!pagination.value.page ||
+		!pagination.value.totalPages
+	)
+		return;
+	if (
+		currentTarget.scrollTop + currentTarget.clientHeight >=
+			currentTarget.scrollHeight - 80 &&
+		pagination.value.page < pagination.value.totalPages
+	)
+		void loadMoreOptions();
+}
+
+async function loadMoreOptions() {
+	if (
+		loading.value ||
+		loadingMore.value ||
+		!pagination.value ||
+		!pagination.value.page ||
+		!pagination.value.totalPages ||
+		pagination.value.page >= pagination.value.totalPages
+	)
+		return;
+
+	loadingMore.value = true;
+	const page = pagination.value.page + 1;
+	const seq = requestSeq;
+
+	const request = await $fetch<apiResponse<tableOption[]>>(
+		`${config.public.apiBase}${database.value.slug}/${field.table}`,
+		{
+			params: {
+				where: where.value,
+				options: Inison.stringify({
+					page,
+					columns: table?.columns,
+				}),
+				[`${database.value.slug}_sid`]: sessionID.value,
+			},
+			cache: "no-cache",
+			credentials: "include",
+		},
+	).finally(() => {
+		if (seq === requestSeq) loadingMore.value = false;
+	});
+
+	// Ignore stale responses from superseded requests
+	if (seq !== requestSeq) return;
+
+	if (request.result) request.result = request.result.map(singleOption);
+	pagination.value = request.options;
+	if (options.value && request.result) {
+		const known = new Set(options.value.map(({ value }) => value));
+		options.value.push(
+			...request.result.filter(({ value }) => !known.has(value)),
+		);
+	}
+}
+
+if (
+	field.inputProps &&
+	typeof field.inputProps === "object" &&
+	field.inputProps.show
+)
+	loadOptions();
+</script>

package/app/components/Field/Tags.vue

@@ -0,0 +1,113 @@
+<template>
+    <FieldWrapper ref="dynamicTags" :field :rule>
+        <NFlex align="center" :wrap="true">
+            <NTag v-for="(value, index) in field.defaultValue" :key="'default-' + index" round>
+                {{ t(value) }}
+            </NTag>
+            <NTag v-for="(value, index) in nonDefaultValues" :key="'user-' + index" round closable
+                @close="removeValue(index)">
+                {{ value }}
+            </NTag>
+            <NInput v-if="showInput" ref="inputRef" v-model:value="inputValue" size="small" round autofocus autosize style="min-width: 150px"
+                :placeholder="t(field.key)" clearable @keyup.enter="addValue" @keyup.esc="cancel"
+                @blur="cancel" v-bind="field.inputProps
+                    ? typeof field.inputProps === 'function'
+                        ? field.inputProps(modelValue) ?? {}
+                        : field.inputProps
+                    : {}">
+                <template #suffix>
+                    <NTooltip :disabled="!fieldChildrenLabels" :delay="1500">
+                        <template #trigger>
+                            <component :is="getField(field).icon" />
+                        </template>
+                        <template v-if="fieldChildrenLabels" #default>
+                            {{ t('thisInputSupports') }}: {{ fieldChildrenLabels }}
+                        </template>
+                    </NTooltip>
+                </template>
+            </NInput>
+            <NButton v-if="!showInput" type="primary" size="small" dashed :disabled="disabled" @click="showInput = true">
+                <template #icon>
+                    <Icon name="tabler:plus" />
+                </template>
+            </NButton>
+        </NFlex>
+    </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import type { FormInst, FormItemRule, InputInst } from "naive-ui"
+
+import { validateFieldType } from "inibase/utils"
+import { NTag } from "#components"
+
+const { field } = defineProps<{ field: Field }>()
+
+const modelValue = defineModel<(string | number)[]>()
+
+const showInput = ref(false)
+const inputValue = ref()
+const inputRef = ref<InputInst>()
+
+const disabled = computed(() => field.max ? (modelValue.value?.length ?? 0) >= field.max : false)
+
+const nonDefaultValues = computed(() =>
+    modelValue.value?.filter((value) => !field.defaultValue || !field.defaultValue.includes(value)) ?? [],
+)
+
+const fieldChildrenLabels = field.children
+    ? flatFieldsList()
+            .filter(({ key }) =>
+                ([] as string[])
+                    .concat(field.children as string | string[])
+                    .includes(key),
+            )
+            .map(({ label }) => label)
+            .join(" | ")
+    : undefined
+
+const rule: FormItemRule = {
+    type: "array",
+    required: field.required,
+    min: field.min,
+    max: field.max,
+    validator: async () => {
+        await nextTick()
+        return fieldValidator(field, modelValue.value, validateFieldType)
+    },
+}
+const dynamicTags = ref<FormInst>()
+
+function addValue() {
+    if (inputValue.value) {
+        modelValue.value = [...(modelValue.value ?? []), inputValue.value]
+        inputValue.value = null
+        inputRef.value?.focus()
+    }
+}
+
+function cancel() {
+    showInput.value = false
+    inputValue.value = null
+}
+
+function removeValue(index: number) {
+    const nonDefault = modelValue.value?.filter(
+        (value) => !field.defaultValue || !field.defaultValue.includes(value),
+    ) ?? []
+    const valueToRemove = nonDefault[index]
+    modelValue.value = modelValue.value?.filter((v) => v !== valueToRemove) ?? []
+}
+
+watch(modelValue, () => {
+    try {
+        dynamicTags.value?.validate()
+    } catch {}
+})
+
+watch(showInput, (value) => {
+    if (value) {
+        nextTick(() => inputRef.value?.focus())
+    }
+})
+</script>

package/app/components/Field/Text.vue

@@ -0,0 +1,31 @@
+<template>
+    <FieldWrapper :field :rule v-model="modelValue">
+        <NInput :value="modelValue !== undefined && modelValue !== null ? String(modelValue) : null"
+            @update:value="(value) => modelValue = value" :placeholder="t(field.key)" clearable v-bind="field.inputProps
+                ? typeof field.inputProps === 'function'
+                    ? field.inputProps(modelValue) ?? {}
+                    : field.inputProps
+                : {}">
+            <template #suffix>
+                <component :is="getField(field).icon" />
+            </template>
+        </NInput>
+    </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import type { FormItemRule } from "naive-ui"
+
+const { field } = defineProps<{ field: Field }>()
+
+const modelValue = defineModel<string | number>()
+
+const rule: FormItemRule = {
+	required: field.required,
+	trigger: ["blur", "input"],
+	validator: async () => {
+		await nextTick()
+		return fieldValidator(field, modelValue.value)
+	},
+}
+</script>

package/app/components/Field/Textarea.vue

@@ -0,0 +1,33 @@
+<template>
+	<FieldWrapper :field :rule v-model="modelValue">
+		<NInput v-model:value="modelValue" :placeholder="t(field.key)" clearable show-count type="textarea"
+			:rows="field.isTable ? 1 : undefined" :autosize="field.isTable ? false : {
+				minRows: 3,
+			}" v-bind="field.inputProps
+		? typeof field.inputProps === 'function'
+			? field.inputProps(modelValue) ?? {}
+			: field.inputProps
+		: {}">
+			<template #suffix>
+				<component :is="getField(field).icon" />
+			</template>
+		</NInput>
+	</FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import type { FormItemRule } from "naive-ui"
+
+const { field } = defineProps<{ field: Field }>()
+
+const modelValue = defineModel<string>()
+
+const rule: FormItemRule = {
+	trigger: ["blur", "input"],
+	required: field.required,
+	validator: async () => {
+		await nextTick()
+		return fieldValidator(field, modelValue.value)
+	},
+}
+</script>

package/app/components/Field/Url.vue

@@ -0,0 +1,40 @@
+<template>
+    <FieldWrapper :field :rule v-model="modelValue">
+        <NInput v-model:value="modelValue" :placeholder="t(field.key)" clearable v-bind="field.inputProps
+            ? typeof field.inputProps === 'function'
+                ? { ...(field.inputProps(modelValue) ?? {}), type: 'url' }
+                : { ...field.inputProps, type: 'url' }
+            : { type: 'url' }">
+            <template #suffix>
+                <component :is="getField(field).icon" />
+            </template>
+        </NInput>
+    </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { isURL } from "inibase/utils"
+import type { FormItemRule } from "naive-ui"
+
+const { field } = defineProps<{ field: Field }>()
+
+const modelValue = defineModel<string>()
+
+// Accept real URLs (isURL already covers http(s), tel:, mailto:, #anchor) as
+// well as site-relative paths (e.g. "/about") — isURL alone rejects those.
+// A relative path must start with "/" and contain no whitespace/control
+// characters (still allows non-ASCII slugs, e.g. "/منتجات").
+const relativePathPattern = /^\/[^\s\x00-\x1f]*$/
+const isURLOrRelativePath = (input: unknown) =>
+	typeof input === "string" &&
+	(relativePathPattern.test(input) || isURL(input))
+
+const rule: FormItemRule = {
+	trigger: ["blur", "input"],
+	required: field.required,
+	validator: async () => {
+		await nextTick()
+		return fieldValidator(field, modelValue.value, isURLOrRelativePath)
+	},
+}
+</script>

package/app/components/Field/Wrapper.vue

@@ -0,0 +1,128 @@
+<template>
+	<NFormItem :id="field.id" :label="resolvedLabel" :rule :path="String(field.id)"
+		:style="{ flex: fieldFlex }" v-bind="field.labelProps">
+		<slot></slot>
+		<template #label>
+			<NFlex v-if="field.description" align="center" :size="0">
+				<NDropdown
+					:disabled="([] as string[]).concat(field.type).every(type => !['table', 'array', 'date'].includes(type))"
+					show-arrow placement="top" trigger="hover" :delay="800" :options="dropdownOptions"
+					@select="handleSelect">
+					{{ resolvedLabel }}
+				</NDropdown>
+				<NTooltip>
+					<template #trigger>
+						<NButton circle text size="tiny">
+							<template #icon>
+								<Icon name="tabler:question-mark" />
+							</template>
+						</NButton>
+					</template>
+					{{ t(field.description) }}
+				</NTooltip>
+			</NFlex>
+			<template v-else>
+				<NDropdown
+					:disabled="([] as string[]).concat(field.type).every(type => !['table', 'array', 'date'].includes(type))"
+					show-arrow placement="top" trigger="hover" :delay="1500" :options="dropdownOptions" size="small"
+					@select="handleSelect">
+					{{ resolvedLabel }}
+				</NDropdown>
+			</template>
+			<slot name="label"></slot>
+		</template>
+	</NFormItem>
+</template>
+
+<script lang="ts" setup>
+import { isObject, isStringified } from "inibase/utils";
+import Inison from "inison";
+import type { DropdownOption, FormItemRule } from "naive-ui";
+import { Icon, NIcon } from "#components";
+
+const { field, rule } = defineProps<{ field: Field; rule: FormItemRule }>();
+
+const modelValue = defineModel<any>();
+const resolvedLabel = computed(() =>
+	field.labelKey ? t(field.labelKey) : (field.label ?? t(field.key)),
+);
+
+const { isMobile } = useDevice();
+function numberToPercentage(width: number, wrapperWidth?: string | number) {
+	if (wrapperWidth && typeof wrapperWidth !== "string") {
+		if (wrapperWidth < 350) return "100";
+		if (wrapperWidth < 500) return "50";
+		if (wrapperWidth < 650 && width !== 2) return "33.33";
+	}
+	switch (width) {
+		case 2:
+			return "50";
+		case 3:
+			return "33.33";
+		case 4:
+			return "25";
+		case 5:
+			return "20";
+		case 6:
+			return "16.66";
+	}
+}
+const Drawers = useState<DrawerRef>("drawers", () => []);
+const fieldFlex = computed(() =>
+	field.width && field.width !== 1 && !isMobile
+		? `1 1 calc(${numberToPercentage(field.width, Drawers.value.find(({ show }) => !!show)?.width)}% - 12px)`
+		: "1 1 100%",
+);
+
+async function handleSelect(value: string) {
+	switch (value) {
+		case "copy": {
+			if (!modelValue.value) return;
+			await copyToClipboard(Inison.stringify(modelValue.value));
+			window.$message.success(t("copiedSuccessfully"));
+			break;
+		}
+		case "paste": {
+			try {
+				const itemFromClipboard = await navigator.clipboard.readText();
+
+				if (!itemFromClipboard) {
+					window.$message.error(t("clipboardEmpty"));
+					return;
+				}
+				if (!isStringified(itemFromClipboard)) {
+					window.$message.error(t("clipboardItemIsNotCorrect"));
+					return;
+				}
+
+				const unstringifiedItem = Inison.unstringify<Item[]>(itemFromClipboard);
+				if (
+					!unstringifiedItem &&
+					!Array.isArray(unstringifiedItem) &&
+					!isObject(unstringifiedItem)
+				) {
+					window.$message.error(t("clipboardItemIsNotCorrect"));
+					return;
+				}
+
+				modelValue.value = unstringifiedItem;
+			} catch {
+				window.$message.error(t("clipboardItemIsNotCorrect"));
+			}
+		}
+	}
+}
+const dropdownOptions = computed<DropdownOption[]>(() => [
+	{
+		label: t("copyItem"),
+		key: "copy",
+		show: !!modelValue.value,
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:copy" })),
+	},
+	{
+		label: t("pasteItem"),
+		key: "paste",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:clipboard" })),
+	},
+]);
+</script>