inicontent 1.0.0

package/app/components/Data/Array.vue

@@ -0,0 +1,102 @@
+<template>
+    <LazyDataTable v-if="field.table && field.table !== 'assets'" :field :value />
+    <LazyColumn v-else-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" />
+    <NListItem v-else-if="shouldRenderAsTable">
+        <div class="array-table-wrapper">
+            <table class="array-table">
+                <thead>
+                    <tr>
+                        <th class="index-col">#</th>
+                        <th v-for="column in field.children" :key="column.key">
+                            {{ column.label || column.key }}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+                        <td class="index-col">{{ rowIndex + 1 }}</td>
+                        <td v-for="column in field.children" :key="column.key">
+                           <DataValue :field="column" :value="row[column.key]" />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </NListItem>
+    <NListItem v-else v-for="(,index) in rows">
+        <template #prefix>
+            <NText strong>
+                {{ index + 1 }}
+            </NText>
+        </template>
+        <Data
+            v-for="child in childrenSchema.filter(child => typeof rows[index][child.key] !== 'undefined')"
+            :field="child" :value="rows[index][child.key]" />
+    </NListItem>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfObjects } from "inibase/utils"
+
+type Row = Record<string, unknown>
+
+const { field, value } = defineProps<{ field: Field; value: unknown }>()
+
+const rows = computed<Row[]>(() => {
+    return Array.isArray(value) ? (value as Row[]) : []
+})
+
+const childrenSchema = computed<Schema>(() => {
+    return Array.isArray(field.children) ? (field.children as Schema) : []
+})
+
+const hasNestedArrayObjectChild = computed(() => {
+    return childrenSchema.value.some(child => {
+        const type = child.type
+        if (Array.isArray(type)) {
+            const normalized = type.map(entry => String(entry).toLowerCase())
+            return normalized.includes('array') && normalized.includes('object')
+        }
+
+        const normalized = String(type || '').toLowerCase()
+        if (normalized.includes('array') && normalized.includes('object')) {
+            return true
+        }
+
+        return normalized === 'array' && Array.isArray(child.children) && child.children.length > 0
+    })
+})
+
+const shouldRenderAsTable = computed(() => {
+    return isArrayOfObjects(field.children) && rows.value.length > 0 && !hasNestedArrayObjectChild.value
+})
+</script>
+
+<style scoped>
+.array-table-wrapper {
+    overflow-x: auto;
+}
+
+.array-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.array-table th,
+.array-table td {
+    padding: 8px;
+    border-bottom: 1px solid var(--n-border-color);
+    white-space: nowrap;
+}
+
+.array-table th {
+    font-weight: 600;
+}
+
+.index-col {
+    width: 56px;
+    min-width: 56px;
+}
+</style>

package/app/components/Data/Html.vue

@@ -0,0 +1,9 @@
+<template>
+    <div v-if="typeof value === 'string'"
+        v-html="value?.replaceAll('<img ', '<img style=\'width:100%\'').replaceAll('\n', '<br />') || ''"></div>
+    <div v-else>{{ value }}</div>
+</template>
+
+<script lang="ts" setup>
+const { value } = defineProps<{ value?: string | number }>()
+</script>

package/app/components/Data/Icon.vue

@@ -0,0 +1,9 @@
+<template>
+    <NIcon>
+        <Icon :name="`tabler:${value}`" />
+    </NIcon>
+</template>
+
+<script setup lang="ts">
+const { value } = defineProps<{ value: `tabler:${string}` }>()
+</script>

package/app/components/Data/Object.vue

@@ -0,0 +1,10 @@
+<template>
+    <NFlex vertical :size="0">
+        <Data v-for="child in (field.children as Schema).filter(child => typeof value[child.key] !== 'undefined')"
+            :field="child" :value="value[child.key]" />
+    </NFlex>
+</template>
+
+<script lang="ts" setup>
+const { field, value } = defineProps<{ field: Field; value: any }>()
+</script>

package/app/components/Data/S.vue

@@ -0,0 +1,16 @@
+<template>
+    <NScrollbar v-if="!disableScroll" x-scrollable>
+        <NList class="printable" hoverable :bordered="false">
+            <Data v-for="field in schema.filter(field => typeof value[field.key] !== 'undefined')" :field
+                :value="value[field.key]"></Data>
+        </NList>
+    </NScrollbar>
+    <NList v-else hoverable :bordered="false">
+        <Data v-for="field in schema.filter(field => typeof value[field.key] !== 'undefined')" :field
+            :value="value[field.key]"></Data>
+    </NList>
+</template>
+
+<script lang="ts" setup>
+const { schema, value, disableScroll } = defineProps<{ schema: Schema; value: Item; disableScroll?: boolean }>()
+</script>

package/app/components/Data/Table.vue

@@ -0,0 +1,53 @@
+<template>
+    <NFlex :wrap="false" class="tableCellLinks">
+        <NButton v-for="value in values" class="tableCellLinkButton" 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>
+    </NFlex>
+</template>
+
+<script lang="ts" setup>
+import { isObject } from "inibase/utils";
+
+const props = defineProps<{
+	field: Field;
+	value?: Item | Item[] | string | number | (string | number)[];
+}>();
+
+const database = useState<Database>("database");
+const table = database.value.tables?.find(({ slug }) => slug === props.field.table);
+
+const values = computed(() => ([] as unknown[]).concat(props.value ?? []));
+
+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(values, (list) => referenced.register(list), { 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/Data/Value.vue

@@ -0,0 +1,34 @@
+<template>
+    <template v-if="value === null || value === undefined || (Array.isArray(value) && value.length === 0)">
+        <LazyColumnBoolean v-if="detectedFieldType === 'boolean'" />
+        <NText :depth="3" v-else>--</NText>
+    </template>
+    <LazyColumnRole v-else-if="detectedFieldType === 'role'" :value />
+    <NScrollbar v-else-if="['table', 'tags', 'select', 'checkbox'].includes(detectedFieldType)" x-scrollable>
+        <LazyColumnAsset v-if="detectedFieldType === 'table' && field.table === 'assets'" :value />
+        <LazyDataTable v-else-if="detectedFieldType === 'table'" :value :field />
+        <LazyColumnTags v-else-if="['tags', 'select', 'checkbox'].includes(detectedFieldType)" :field :value />
+    </NScrollbar>
+    <LazyColumnColor v-else-if="detectedFieldType === 'color'" :value />
+    <LazyColumnUrl v-else-if="detectedFieldType === 'url'" :value />
+    <LazyColumnEmail v-else-if="detectedFieldType === 'email'" :value />
+    <LazyDataHtml v-else-if="['html', 'textarea', 'json'].includes(detectedFieldType)" :value />
+    <LazyColumnPassword v-else-if="detectedFieldType === 'password'" :value />
+    <LazyColumnBoolean v-else-if="detectedFieldType === 'boolean'" :value />
+    <LazyColumnDate v-else-if="detectedFieldType === 'date'" :value :field />
+    <LazyDataObject v-else-if="detectedFieldType === 'object'" :value :field />
+    <LazyDataArray v-else-if="detectedFieldType === 'array'" :value :field />
+    <LazyColumnText
+        v-else-if="['string', 'text', 'number', 'radio', 'id', 'multiple', 'json'].includes(detectedFieldType)"
+        :value />
+</template>
+
+
+<script lang="ts" setup>
+const { field, value } = defineProps<{ field: Field; value: any }>()
+
+let detectedFieldType = (field.subType ?? field.type) as
+    | DB_FieldType
+    | CMS_FieldType
+if (Array.isArray(detectedFieldType)) detectedFieldType = getField(field).key
+</script>

package/app/components/Data/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <NListItem>
+        <template #prefix>
+            <NButton text>
+                <strong>{{ t(field.key) }}:</strong>
+            </NButton>
+        </template>
+        <DataValue :field :value />
+    </NListItem>
+</template>
+
+<script lang="ts" setup>
+const { field, value } = defineProps<{ field: Field; value: any }>()
+</script>

package/app/components/Field/Array.vue

@@ -0,0 +1,324 @@
+<template>
+	<LazyField v-if="field.subType" :field="{
+		...field,
+		isArray: true,
+	}" v-model="modelValue" />
+	<LazyField v-else-if="!isArrayOfObjects(field.children)" :field="{
+		...field,
+		subType: field.children === 'table' ? 'array-table' : (field.options?.length ? 'select' : 'tags'),
+		isArray: true,
+	}" v-model="modelValue" />
+	<NCollapse v-else-if="field.isTable === false || field.children.filter(
+		(f: any) => (f.type === 'array' && isArrayOfObjects(f.children)) || (f.width && f.width > 1),
+	).length" display-directive="if" arrow-placement="right" :trigger-areas="['main', 'arrow']"
+		:default-expanded-names="field.expand ? String(field.id) : undefined" v-model:expanded-names="parentExpanded"
+		accordion>
+		<template #arrow>
+			<NIcon>
+				<Icon name="tabler:chevron-left" v-if="!!modelValue?.length" />
+			</NIcon>
+		</template>
+		<NCollapseItem style="margin: 0 0 20px;" display-directive="if" :name="String(field.id)"
+			:disabled="!modelValue?.length">
+			<template #header>
+				<NDropdown size="small" :placement="Language === 'ar' ? 'left' : 'right'" show-arrow trigger="hover"
+					:delay="1500" :options="dropdownOptions" @select="handleSelect">
+					{{ t(field.key) }}
+				</NDropdown>
+			</template>
+			<template #header-extra>
+				<NFlex>
+					<component v-if="field.extraActions" :is="field.extraActions"></component>
+					<NButtonGroup>
+						<NButton v-if="!field.disableActions" size="small" round @click="handleAddNewItem">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:plus" />
+								</NIcon>
+							</template>
+						</NButton>
+						<component v-if="field.extraButtons" :is="field.extraButtons"></component>
+					</NButtonGroup>
+				</NFlex>
+			</template>
+			<NCollapse display-directive="if" accordion v-model:expanded-names="expandedNames"
+				:trigger-areas="['main', 'arrow']">
+				<NCollapseItem v-if="modelValue" v-for="(_item, index) of modelValue" display-directive="if"
+					:name="`${field.id}.${index}`">
+					<template #header>
+						{{ getCollapseItemTitle(field, (_item as Item), index) }}
+					</template>
+					<template #header-extra>
+						<NFlex>
+							<component v-if="field.itemExtraActions" :is="field.itemExtraActions(index)"></component>
+							<NButtonGroup>
+								<NButton size="small" round type="error" quaternary
+									:disabled="typeof field.inputProps === 'function' ? field.inputProps(index)?.disabled : field.inputProps?.disabled"
+									@click="handleDeleteItem(index)">
+									<template #icon>
+										<NIcon>
+											<Icon name="tabler:trash" />
+										</NIcon>
+									</template>
+								</NButton>
+								<component v-if="field.itemExtraButtons && !Array.isArray(field.itemExtraButtons)"
+									:is="field.itemExtraButtons(index)">
+								</component>
+								<component v-else-if="field.itemExtraButtons && Array.isArray(field.itemExtraButtons)"
+									v-for="component in field.itemExtraButtons(index)" :is="component">
+								</component>
+							</NButtonGroup>
+						</NFlex>
+					</template>
+					<div class="collapseContentPadding">
+						<LazyFieldS v-model="(modelValue[index] as Item)" :schema="(field.children as Schema).map((child) => ({
+							...child,
+							...(typeof child.inputProps === 'function' ? { inputProps: child.inputProps(index) } : {}),
+							...(typeof child.labelProps === 'function' ? { labelProps: child.labelProps(index) } : {}),
+							...(typeof child.render === 'function' ? { render: child.render(index) } : {})
+						}))" />
+					</div>
+				</NCollapseItem>
+			</NCollapse>
+		</NCollapseItem>
+	</NCollapse>
+	<NCard v-else :bordered="false" content-style="padding-left: 0; padding-right: 0;"
+		header-style="padding-top: 0; padding-left: 0; padding-right: 0;">
+		<template #header>
+			<NDropdown size="small" :placement="Language === 'ar' ? 'left' : 'right'" show-arrow trigger="hover"
+				:delay="1500" :options="dropdownOptions" @select="handleSelect">
+				{{ t(field.key) }}
+			</NDropdown>
+		</template>
+		<template #header-extra>
+			<NFlex>
+				<component v-if="field.extraActions" :is="field.extraActions"></component>
+				<NButtonGroup>
+					<NButton v-if="!field.disableActions" size="small" round @click="handleAddNewItem">
+						<template #icon>
+							<NIcon>
+								<Icon name="tabler:plus" />
+							</NIcon>
+						</template>
+					</NButton>
+					<template v-if="field.extraButtons">
+						<component v-if="Array.isArray(field.extraButtons)"
+							v-for="(component, index) in field.extraButtons" :is="component" :key="index"></component>
+						<component v-else :is="field.extraButtons"></component>
+					</template>
+				</NButtonGroup>
+			</NFlex>
+		</template>
+		<NDataTable v-if="field.children" :columns :data="(modelValue as Item[])" :scroll-x="tableWidth" />
+	</NCard>
+</template>
+
+<script setup lang="ts">
+import { isArrayOfObjects, isStringified } from "inibase/utils";
+import Inison from "inison";
+import type { DataTableColumns, DropdownOption } from "naive-ui";
+import {
+	Icon,
+	LazyField,
+	NButton,
+	NFlex,
+	NIcon,
+	NPerformantEllipsis,
+	NText,
+	NButtonGroup
+} from "#components";
+
+const database = useState<Database>("database");
+
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
+
+const { field } = defineProps<{ field: Field }>();
+
+const modelValue = defineModel<(string | number | Item)[]>();
+const parentExpanded = ref<string[]>();
+
+const expandedNames = ref<string[]>();
+watch(expandedNames, (v) => {
+	if (v) parentExpanded.value = [String(field.id)];
+});
+function handleAddNewItem() {
+	let newElementIndex: number;
+	if (!modelValue.value) {
+		newElementIndex = 0;
+		modelValue.value = [
+			field.onCreate
+				? field.onCreate instanceof Function
+					? field.onCreate(newElementIndex) || {}
+					: field.onCreate
+				: {},
+		];
+	} else {
+		newElementIndex = toRaw(modelValue.value).length;
+		modelValue.value.push(
+			field.onCreate
+				? field.onCreate instanceof Function
+					? field.onCreate(newElementIndex) || {}
+					: field.onCreate
+				: {},
+		);
+	}
+	expandedNames.value = [`${field.id}.${newElementIndex}`];
+}
+
+function handleDeleteItem(index: number) {
+	if (field.onDelete) field.onDelete(index);
+	modelValue.value?.splice(index, 1);
+}
+
+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)) {
+					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 &&
+			Array.isArray(modelValue.value) &&
+			modelValue.value.length > 0,
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:copy" })),
+	},
+	{
+		label: t("pasteItem"),
+		key: "paste",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:clipboard" })),
+	},
+]);
+
+const columns = ref<DataTableColumns<any>>();
+const tableWidth = ref<number>(0);
+
+function setColumns() {
+	columns.value = [
+		...(field.children as Schema).map((child) => ({
+			width: t(child.key).length > 10 ? t(child.key).length * 14 : 150,
+			title: () =>
+				h(NFlex, { wrap: false, align: "center", justify: "start" }, () => [
+					getField(child).icon(),
+					h(NPerformantEllipsis, () => t(child.key)),
+					child.required
+						? h(
+							NText,
+							{
+								type: "error",
+							},
+							() => " *",
+						)
+						: undefined,
+				]),
+			key: child.id,
+			render: (_item: any, index: number) =>
+				h(LazyField, {
+					field: {
+						...child,
+						labelProps: {
+							style: {
+								marginTop: "24px",
+							},
+							showLabel: false,
+						},
+						isTable: true,
+						...(typeof child.inputProps === "function"
+							? { inputProps: child.inputProps(index) }
+							: {}),
+						...(typeof child.labelProps === "function"
+							? { labelProps: child.labelProps(index) }
+							: {}),
+						...(typeof child.render === "function"
+							? { render: child.render(index) }
+							: {}),
+					},
+					"onUpdate:modelValue": (newValue) => {
+						// @ts-ignore
+						(modelValue.value as Item[])[index][child.key] = newValue;
+					},
+					// @ts-ignore
+					modelValue: (modelValue.value as Item[])[index][child.key],
+				}),
+		})),
+		field.disableItemActions === true
+			? {}
+			: {
+				title: t("actions"),
+				fixed: "right",
+				align: "center",
+				width: 100,
+				key: "actions",
+				render: (_row: any, index: number) =>
+					h(NButtonGroup, () =>
+						[
+							field.itemExtraButtons ? field.itemExtraButtons(index) : null,
+							h(
+								NButton,
+								{
+									disabled:
+										typeof field.inputProps === "function"
+											? field.inputProps(index)?.disabled
+											: field.inputProps?.disabled,
+
+									secondary: true,
+									circle: true,
+									size: "small",
+									type: "error",
+									onClick: () => handleDeleteItem(index),
+								},
+								{
+									icon: () =>
+										h(NIcon, () => h(Icon, { name: "tabler:trash" })),
+								},
+							),
+						]
+							.filter((i) => i !== null)
+							.flat(Infinity),
+					),
+			},
+	] as DataTableColumns<any>;
+
+	tableWidth.value = columns.value.reduce(
+		(accumulator: number, { width }) =>
+			accumulator + ((width as number | undefined) ?? 0),
+		40,
+	);
+}
+
+watch(Language, setColumns);
+onMounted(() => {
+	if (isArrayOfObjects(field.children)) setColumns();
+});
+</script>

package/app/components/Field/Asset/Actions.vue

@@ -0,0 +1,97 @@
+<template>
+    <NTooltip :delay="1500">
+        <template #trigger>
+            <NButton circle secondary size="tiny" @click.prevent.stop="showAssetsModal = true">
+                <template #icon>
+                    <NIcon>
+                        <Icon name="tabler:books" />
+                    </NIcon>
+                </template>
+            </NButton>
+        </template>
+        {{ t('gallery') }}
+    </NTooltip>
+    <NPopover trigger="click">
+        <template #trigger>
+            <NTooltip :delay="1500" placement="bottom">
+                <template #trigger>
+                    <NButton circle secondary size="tiny" @click.prevent.stop="importInputRef?.focus()">
+                        <template #icon>
+                            <NIcon>
+                                <Icon name="tabler:link" />
+                            </NIcon>
+                        </template>
+                    </NButton>
+                </template>
+                {{ t('import') }}
+            </NTooltip>
+        </template>
+        <NInputGroup>
+            <NInput size="small" :input-props="{ type: 'url' }" ref="importInputRef" v-model:value="assetURLs"
+                :placeholder="t('assetLink')" clearable @keydown.enter.prevent="importAsset">
+                <template #suffix>
+                    <NIcon>
+                        <Icon name="tabler:link" />
+                    </NIcon>
+                </template>
+            </NInput>
+            <NTooltip :delay="1500">
+                <template #trigger>
+                    <NButton size="small" :loading="Loading.import" :disabled="!assetURLs" tag="a" @click.prevent.stop="importAsset">
+                        <template #icon>
+                            <NIcon>
+                                <Icon name="tabler:arrow-right" />
+                            </NIcon>
+                        </template>
+                    </NButton>
+                </template>
+                {{ t('import') }}
+            </NTooltip>
+        </NInputGroup>
+    </NPopover>
+</template>
+
+<script lang="ts" setup>
+import type { NInput } from "naive-ui"
+
+const { field, callback } = defineProps<{
+    field: Field
+    callback: CallableFunction
+}>()
+
+const showAssetsModal = defineModel<boolean>("showAssetsModal")
+
+const importInputRef = ref<InstanceType<typeof NInput>>()
+
+const config = useRuntimeConfig()
+const assetURLs = ref()
+const database = useState<Database>("database")
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}))
+
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug)
+const sessionID = useScopedCookie<string>("sid", database.value?.slug)
+
+async function importAsset() {
+    Loading.value.import = true
+    const data = await $fetch<apiResponse<Asset | Asset[]>>(
+        `${config.public.apiBase}${database.value.slug ?? "inicontent"}/assets/import${field.suffix || ""}${field.suffix?.includes("?") ? "&" : "?"}${database.value.slug}_sid=${sessionID.value}`,
+        {
+            method: "POST",
+            headers: {
+                "Content-Type": "text/plain; charset=utf-8",
+            },
+            body: assetURLs.value,
+            params: {
+                locale: Language.value,
+            },
+            credentials: "include",
+        },
+    )
+    if (data.result) {
+        assetURLs.value = undefined
+        callback(data.result)
+        importInputRef.value?.clear()
+    } else window.$message.error(data.message)
+    Loading.value.import = false
+}
+</script>