inicontent 1.0.0

package/app/components/Api/EndpointCard.vue

@@ -0,0 +1,169 @@
+<template>
+	<article
+		class="endpoint-card"
+		:data-endpoint="endpoint"
+		:data-method="method"
+		:data-description="description"
+	>
+		<header class="endpoint-card__header">
+			<NFlex align="center" wrap :size="8">
+				<NTag :type="methodType" size="small" round>
+					{{ method }}
+				</NTag>
+				<NCode :code="endpoint" language="bash" />
+			</NFlex>
+			<NText v-if="description" depth="3" class="endpoint-card__desc">
+				{{ description }}
+			</NText>
+		</header>
+
+		<section
+			v-if="$slots.params || params?.length"
+			class="endpoint-card__section"
+			data-section="params"
+		>
+			<NH5>{{ t('apiDocs.queryParams') }}</NH5>
+			<slot name="params">
+				<NDataTable
+					v-if="params?.length"
+					:columns="paramColumns"
+					:data="params"
+					:bordered="false"
+					:single-line="false"
+					size="small"
+					:pagination="false"
+				/>
+			</slot>
+		</section>
+
+		<section
+			v-if="$slots.request || requestExample"
+			class="endpoint-card__section"
+			data-section="request"
+		>
+			<NH5>{{ t('apiDocs.requestExample') }}</NH5>
+			<slot name="request">
+				<NCode
+					v-if="requestExample"
+					:code="requestExample"
+					language="json"
+					word-wrap
+				/>
+			</slot>
+		</section>
+
+		<section
+			v-if="$slots.response || responseExample"
+			class="endpoint-card__section"
+			data-section="response"
+		>
+			<NH5>{{ t('apiDocs.responseExample') }}</NH5>
+			<slot name="response">
+				<NCode
+					v-if="responseExample"
+					:code="responseExample"
+					language="json"
+					word-wrap
+				/>
+			</slot>
+		</section>
+
+		<section v-if="$slots.extra" class="endpoint-card__section" data-section="extra">
+			<slot name="extra" />
+		</section>
+	</article>
+</template>
+
+<script setup lang="ts">
+import type { DataTableColumns } from "naive-ui";
+
+interface ParamRow {
+	name: string;
+	type: string;
+	required: boolean;
+	description: string;
+}
+
+const props = withDefaults(
+	defineProps<{
+		endpoint: string;
+		method: string;
+		description?: string;
+		requestExample?: string;
+		responseExample?: string;
+		params?: ParamRow[];
+	}>(),
+	{
+		description: "",
+		requestExample: "",
+		responseExample: "",
+		params: () => [],
+	},
+);
+
+const methodType = computed(() => {
+	const map: Record<string, "success" | "info" | "warning" | "error"> = {
+		POST: "success",
+		GET: "info",
+		PUT: "warning",
+		DELETE: "error",
+	};
+	return map[props.method.toUpperCase()] ?? "default";
+});
+
+const paramColumns: DataTableColumns<ParamRow> = [
+	{
+		title: t("key"),
+		key: "name",
+		width: 160,
+	},
+	{
+		title: t("type"),
+		key: "type",
+		width: 100,
+	},
+	{
+		title: t("required"),
+		key: "required",
+		width: 90,
+		render: (row) => (row.required ? t("required") : t("optional")),
+	},
+	{
+		title: t("description"),
+		key: "description",
+		minWidth: 200,
+	},
+];
+</script>
+
+<style scoped>
+.endpoint-card {
+	border: 1px solid var(--n-border-color);
+	border-radius: 8px;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.endpoint-card__header {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.endpoint-card__desc {
+	margin-top: 4px;
+	display: block;
+}
+
+.endpoint-card__section {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.endpoint-card__section h5 {
+	margin: 0;
+}
+</style>

package/app/components/Api/SchemaDocsTable.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="schema-docs-table" role="table" :aria-label="t('apiDocs.schemaTitle')">
+        <NDataTable v-if="rows.length" :columns="columns" :data="rows" :row-key="rowKey" :bordered="false"
+            :single-line="false" :size="size" striped :pagination="false" />
+        <NEmpty v-else :description="emptyDescription || t('apiDocs.noSchemaFields')" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { DataTableColumns } from "naive-ui";
+import { NTable, NText } from "#components";
+
+interface SchemaDocRow {
+	id: string;
+	keyText: string;
+	labelText: string;
+	typeText: string;
+	required: boolean;
+	requiredText: string;
+	descriptionText: string;
+	children?: SchemaDocRow[];
+}
+
+const props = withDefaults(
+	defineProps<{
+		schema?: Schema;
+		size?: "small" | "medium" | "large";
+		emptyDescription?: string;
+	}>(),
+	{
+		size: "medium",
+	},
+);
+
+const rows = computed(() => (props.schema ? mapSchema(props.schema) : []));
+const size = computed(() => props.size);
+const rowKey = (row: SchemaDocRow) => row.id;
+
+const columns = computed<DataTableColumns<SchemaDocRow>>(() => [
+	{
+		type: "expand",
+		expandable: (rowData) => Boolean(rowData.children?.length),
+		renderExpand: (rowData) =>
+			rowData.children?.length ? renderNestedTable(rowData.children) : null,
+	},
+	{
+		title: t("label"),
+		key: "labelText",
+		className: "schema-docs-table__column--label",
+		render: (rowData) => rowData.labelText,
+		minWidth: 180,
+	},
+	{
+		title: t("key"),
+		key: "keyText",
+		width: 160,
+		ellipsis: true,
+		render: (rowData) => rowData.keyText,
+	},
+	{
+		title: t("type"),
+		key: "typeText",
+		width: 180,
+		render: (rowData) => rowData.typeText,
+	},
+	{
+		title: t("required"),
+		key: "requiredText",
+		width: 120,
+		render: (rowData) =>
+			rowData.required
+				? h(NText, { type: "success" }, { default: () => rowData.requiredText })
+				: h(
+						NText,
+						{ type: "default" },
+						{ default: () => rowData.requiredText },
+					),
+	},
+	{
+		title: t("description"),
+		key: "descriptionText",
+		minWidth: 220,
+		render: (rowData) => rowData.descriptionText,
+	},
+]);
+
+function renderNestedTable(children: SchemaDocRow[]) {
+	return h(
+		"div",
+		{ class: "schema-docs-table__nested" },
+		h(
+			NTable,
+			{
+				singleLine: false,
+				size: "small",
+				bordered: false,
+			},
+			{
+				default: () => [
+					h("thead", null, [
+						h("tr", null, [
+							h("th", null, t("label")),
+							h("th", null, t("key")),
+							h("th", null, t("type")),
+							h("th", null, t("required")),
+							h("th", null, t("description")),
+						]),
+					]),
+					h(
+						"tbody",
+						null,
+						children.map((child) =>
+							h("tr", { key: child.id }, [
+								h(
+									"td",
+									{ class: "schema-docs-table__column--label" },
+									child.labelText,
+								),
+								h("td", null, child.keyText),
+								h("td", null, child.typeText),
+								h("td", null, child.requiredText),
+								h("td", null, child.descriptionText),
+							]),
+						),
+					),
+				],
+			},
+		),
+	);
+}
+
+function mapSchema(schema: Schema, parentPath: string[] = []): SchemaDocRow[] {
+	return schema.map((field, index) => {
+		const fallbackKey = `field-${index}`;
+		const key = field.key ?? fallbackKey;
+		const path = [...parentPath, key].join(".");
+		const labelText = field.labelKey
+			? t(field.labelKey)
+			: (field.label ?? t(key));
+
+		const nestedChildren = hasSchemaChildren(field)
+			? mapSchema(field.children as Schema, [...parentPath, key])
+			: undefined;
+
+		return {
+			id: path,
+			keyText: key,
+			labelText,
+			typeText: formatFieldType(field),
+			required: Boolean(field.required),
+			requiredText: field.required ? t("required") : t("optional"),
+			descriptionText: field.description || "—",
+			children: nestedChildren,
+		};
+	});
+}
+
+function hasSchemaChildren(
+	field: Field,
+): field is Field & { children: Schema } {
+	if (!field.children) return false;
+	if (Array.isArray(field.children)) {
+		return field.children.some(
+			(child) => typeof child === "object" && child !== null && "key" in child,
+		);
+	}
+
+	return typeof field.children === "object";
+}
+
+function formatFieldType(field: Field): string {
+	if (Array.isArray(field.type)) {
+		return field.type.join(" | ");
+	}
+
+	const baseType = field.type ?? "string";
+
+	if (baseType === "array") {
+		if (hasSchemaChildren(field)) return "Array<Object>";
+		if (Array.isArray(field.children))
+			return `Array<${field.children.map(String).join(" | ")}>`;
+		if (typeof field.children === "string") return `Array<${field.children}>`;
+	}
+
+	if (baseType === "table") {
+		if ("table" in field && field.table) return `Table<${field.table}>`;
+		if (hasSchemaChildren(field)) return "Table<Object>";
+	}
+
+	if (field.subType) return `${baseType} (${field.subType})`;
+
+	return String(baseType);
+}
+</script>
+
+<style scoped>
+.schema-docs-table {
+    width: 100%;
+}
+
+.schema-docs-table__nested {
+    padding: 8px 8px 0 8px;
+}
+
+.schema-docs-table__column--label {
+    font-weight: 600;
+}
+</style>