inicontent 1.0.0

package/app/composables/fieldsList.ts

@@ -0,0 +1,301 @@
+import type { VNodeChild } from "vue";
+import { Icon, NIcon } from "#components";
+
+function renderIcon(iconName: string) {
+	return () => h(NIcon, () => h(Icon, { name: `tabler:${iconName}` }));
+}
+
+type fieldListOptionType = {
+	type?: string;
+	key: string;
+	label: string;
+	icon: () => VNodeChild;
+	disabled?: boolean;
+	children?: fieldListOptionType[];
+};
+
+export default function fieldsList(): fieldListOptionType[] {
+	return [
+		{
+			label: t("fields.string"),
+			key: "text",
+			icon: renderIcon("typography"),
+			children: [
+				{
+					label: t("fields.shortText"),
+					key: "string",
+					icon: renderIcon("letter-case"),
+				},
+				{
+					label: t("fields.longText"),
+					key: "textarea",
+					icon: renderIcon("align-justified"),
+				},
+				{
+					label: t("fields.html"),
+					key: "html",
+					icon: renderIcon("code"),
+				},
+				{
+					label: t("fields.password"),
+					key: "password",
+					icon: renderIcon("key"),
+				},
+				{
+					label: t("fields.email"),
+					key: "email",
+					icon: renderIcon("at"),
+				},
+				{
+					label: t("fields.link"),
+					key: "url",
+					icon: renderIcon("link"),
+				},
+				{
+					label: t("fields.color"),
+					key: "color",
+					icon: renderIcon("palette"),
+				},
+				{
+					label: t("fields.icon"),
+					key: "icon",
+					icon: renderIcon("icons"),
+				},
+				{
+					label: t("fields.role"),
+					key: "role",
+					icon: renderIcon("shield-lock"),
+				},
+				{
+					label: t("fields.mention"),
+					key: "mention",
+					icon: renderIcon("message"),
+				},
+				{
+					label: t("fields.locale"),
+					key: "locale",
+					icon: renderIcon("world"),
+				},
+			],
+		},
+		{
+			label: t("fields.number"),
+			key: "number",
+			icon: renderIcon("numbers"),
+			children: [
+				// https://www.naiveui.com/en-US/dark/components/slider
+				{
+					label: t("fields.number"),
+					key: "number",
+					icon: renderIcon("numbers"),
+				},
+				{
+					label: t("fields.slider"),
+					key: "slider",
+					icon: renderIcon("timeline-event"),
+					disabled: true,
+				},
+				{
+					label: t("fields.ip"),
+					key: "ip",
+					icon: renderIcon("map-2"),
+					disabled: true,
+				},
+			],
+		},
+		{
+			label: t("fields.multiple"),
+			key: "multiple",
+			icon: renderIcon("box-multiple"),
+		},
+		{
+			label: t("fields.date"),
+			key: "date",
+			icon: renderIcon("calendar"),
+			children: [
+				{
+					label: t("fields.date"),
+					key: "date",
+					icon: renderIcon("calendar"),
+				},
+				{
+					label: t("fields.dateTime"),
+					key: "date-datetime",
+					icon: renderIcon("calendar-time"),
+				},
+				{
+					label: t("fields.dateRange"),
+					key: "date-daterange",
+					icon: renderIcon("calendar-week"),
+				},
+				{
+					label: t("fields.dateTimeRange"),
+					key: "date-datetimerange",
+					icon: renderIcon("calendar-stats"),
+				},
+				{
+					label: t("fields.month"),
+					key: "date-month",
+					icon: renderIcon("calendar-month"),
+				},
+				{
+					label: t("fields.monthRange"),
+					key: "date-monthrange",
+					icon: renderIcon("calendar-due"),
+				},
+				{
+					label: t("fields.year"),
+					key: "date-year",
+					icon: renderIcon("calendar-event"),
+				},
+				{
+					label: t("fields.yearRange"),
+					key: "date-yearrange",
+					icon: renderIcon("calendar-up"),
+				},
+				{
+					label: t("fields.quarter"),
+					key: "date-quarter",
+					icon: renderIcon("calendar-plus"),
+				},
+				{
+					label: t("fields.quarterRange"),
+					key: "date-quarterrange",
+					icon: renderIcon("calendar-share"),
+				},
+				{
+					label: t("fields.week"),
+					key: "date-week",
+					icon: renderIcon("calendar-time"),
+				},
+			],
+		},
+		{
+			label: t("fields.toggle"),
+			key: "boolean",
+			icon: renderIcon("toggle-left"),
+		},
+		{
+			label: t("fields.id"),
+			key: "id",
+			icon: renderIcon("id"),
+		},
+		{
+			label: t("fields.asset"),
+			key: "asset",
+			icon: renderIcon("upload"),
+		},
+		{
+			label: t("fields.radio"),
+			key: "radio",
+			icon: renderIcon("circle-check"),
+		},
+		{
+			label: t("fields.select"),
+			key: "select",
+			icon: renderIcon("list-check"),
+		},
+		{
+			label: t("fields.array"),
+			key: "array",
+			icon: renderIcon("brackets"),
+			children: [
+				{
+					label: t("fields.tags"),
+					key: "tags",
+					icon: renderIcon("tags"),
+				},
+				{
+					label: t("fields.select"),
+					key: "array-select",
+					icon: renderIcon("list-check"),
+				},
+				{
+					label: t("fields.checkbox"),
+					key: "checkbox",
+					icon: renderIcon("copy-check"),
+				},
+				{
+					label: t("fields.assets"),
+					key: "array-asset",
+					icon: renderIcon("upload"),
+				},
+				// https://www.naiveui.com/en-US/dark/components/slider
+				{
+					label: t("fields.range"),
+					key: "range",
+					icon: renderIcon("parentheses"),
+					disabled: true,
+				},
+				{
+					label: t("fields.tableItems"),
+					key: "array-table",
+					icon: renderIcon("brand-airtable"),
+				},
+				{
+					label: t("fields.objects"),
+					key: "array",
+					icon: renderIcon("object-scan"),
+				},
+			],
+		},
+		{
+			label: t("fields.object"),
+			key: "object",
+			icon: renderIcon("braces"),
+		},
+		{
+			label: t("fields.table"),
+			key: "table",
+			icon: renderIcon("table"),
+		},
+		{
+			label: t("fields.json"),
+			key: "json",
+			icon: renderIcon("code"),
+		},
+	];
+}
+
+function defaultField(): fieldListOptionType {
+	return {
+		key: "custom",
+		label: t("fields.custom"),
+		icon: renderIcon("question-mark"),
+	};
+}
+
+export function flatFieldsList() {
+	return fieldsList().flatMap((field) => field.children || field);
+}
+
+export function getField(field: Field) {
+	if (field.type === "date" && field.date) {
+		return (
+			flatFieldsList().find(({ key }) => key === `date-${field.date}`) ??
+			flatFieldsList().find(({ key }) => key === "date") ??
+			defaultField()
+		);
+	}
+	if (field.table === "assets")
+		return (
+			flatFieldsList().find(
+				({ key }) => key === (field.type === "array" ? "array-asset" : "asset"),
+			) ?? defaultField()
+		);
+	if (field.type === "array") {
+		if (
+			!Array.isArray(field.children) &&
+			["table", "object"].includes(field.children as string)
+		)
+			return (
+				flatFieldsList().find(
+					({ key }) => key === [field.type, field.children].join("-"),
+				) ?? defaultField()
+			);
+	}
+	let fieldType = field.subType ?? field.type;
+	if (Array.isArray(fieldType)) fieldType = "multiple";
+	if (!fieldType) return defaultField();
+	return flatFieldsList().find(({ key }) => key === fieldType) ?? defaultField();
+}

package/app/composables/formatDatabase.ts

@@ -0,0 +1,101 @@
+import { flattenSchema } from "inibase/utils"
+
+const hiddenTableSlugs = new Set(["passkey_credentials", "passkey_challenges"])
+
+export default function (database?: Database) {
+	const databaseState = useState<Database>("database")
+
+	const tables = database?.tables ?? databaseState.value?.tables
+	if (!tables?.length) return
+
+	const findTable = (slug: string) => tables.find((t) => t.slug === slug)
+
+	const processField = (field: Field): string | string[] | undefined => {
+		const fieldTable = findTable(field.table as string)
+		if (!fieldTable?.schema) return
+		if (
+			!(
+				fieldTable.label ||
+				fieldTable.customLabel ||
+				fieldTable.customLabelColumns
+			)
+		)
+			return
+
+		if (fieldTable.customLabel && !fieldTable.customLabelColumns)
+			return `${field.key}.*`
+
+		if (fieldTable.customLabelColumns)
+			return fieldTable.customLabelColumns.map(
+				(label: string) => `${field.key}.${label}`,
+			)
+
+		const fieldTableFlatSchema = flattenSchema(fieldTable.schema as any)
+		const keyParts = field.key.split(".")
+		const lastKeyPart = keyParts[keyParts.length - 1]
+		const results: string[] = [field.key]
+
+		if (typeof fieldTable.label === "string") {
+			const tokens = fieldTable.label
+				.split(/(@\w+)/g)
+				.filter((token) => token.startsWith("@"))
+
+			for (const token of tokens) {
+				const labelId = Number(token.slice(1))
+				const labelField = fieldTableFlatSchema.find(
+					(f: Field) => f.id === labelId,
+				)
+				if (!labelField) continue
+
+				if (labelField.table && labelField.table !== field.table) {
+					const labelFieldTable = findTable(labelField.table)
+					if (!labelFieldTable) continue
+
+					if (labelFieldTable.customLabelColumns) {
+						for (const column of labelFieldTable.customLabelColumns) {
+							results.push(`${lastKeyPart}.${labelField.key}.${column}`)
+						}
+						continue
+					}
+
+					if (labelFieldTable.customLabel) {
+						results.push(`${lastKeyPart}.${labelField.key}.*`)
+						continue
+					}
+
+					if (labelFieldTable.columns) {
+						for (const column of labelFieldTable.columns) {
+							results.push(`${lastKeyPart}.${labelField.key}.${column}`)
+						}
+					}
+				} else {
+					results.push(`${lastKeyPart}.${labelField.key ?? "*"}`)
+				}
+			}
+		}
+		return results
+	}
+
+	const formatTable = (table: Table) => {
+		if (hiddenTableSlugs.has(table.slug)) table.show = false
+
+		if (table.columns) return table
+
+		if (table.schema && (table.label || table.customLabel)) {
+			const flatSchema = flattenSchema(table.schema as any)
+			const columns = flatSchema
+				.filter(
+					(field: Field) => Boolean(field.table) && field.table !== "assets",
+				)
+				.flatMap(processField)
+				.filter((col): col is string => col !== undefined)
+
+			table.columns = columns.length ? ["*", ...columns] : ["*"]
+		} else table.columns = []
+
+		return table
+	}
+
+	if (database) database.tables = tables.map(formatTable)
+	else databaseState.value.tables = tables.map(formatTable)
+}