inicontent 1.0.0

package/app/components/Field/JSON.vue

@@ -0,0 +1,113 @@
+<template>
+    <FieldWrapper :field :rule v-model="internalValue">
+        <NInput v-model:value="internalValue" :placeholder="t(field.key)" clearable type="textarea"
+            :rows="field.isTable ? 1 : undefined" :autosize="field.isTable ? false : {
+                minRows: 5,
+                maxRows: 20,
+            }" :status="hasError ? 'error' : undefined" v-bind="field.inputProps
+                ? typeof field.inputProps === 'function'
+                    ? field.inputProps(internalValue) ?? {}
+                    : field.inputProps
+                : {}">
+            <template #suffix>
+                <component :is="getField(field).icon" />
+            </template>
+        </NInput>
+        <div v-if="hasError" style="color: var(--error-color); font-size: 12px; margin-top: 4px;">
+            {{ t("invalidJSON") }}
+        </div>
+        <template v-if="!field.isTable && internalValue" #footer>
+            <NFlex justify="space-between" align="center">
+                <span style="font-size: 12px; color: var(--text-color-3);">
+                    {{ formattedSize }}
+                </span>
+                <NFlex gap="small">
+                    <NButton text type="primary" size="small" @click="formatJSON" :disabled="hasError">
+                        {{ t("format") }}
+                    </NButton>
+                </NFlex>
+            </NFlex>
+        </template>
+    </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import type { FormItemRule } from "naive-ui";
+import { NButton, NFlex } from "#components";
+
+const { field } = defineProps<{ field: Field }>();
+
+const modelValue = defineModel<any>();
+
+// Convert parsed object to JSON string for display
+const stringifyValue = (value: any): string => {
+    if (!value) return "";
+    if (typeof value === "string") return value;
+    return JSON.stringify(value, null, 2);
+};
+
+const internalValue = ref<string>(stringifyValue(modelValue.value));
+
+const hasError = computed(() => {
+    if (!internalValue.value) return false;
+    try {
+        JSON.parse(internalValue.value);
+        return false;
+    } catch {
+        return true;
+    }
+});
+
+const formattedSize = computed(() => {
+    if (!internalValue.value) return "0 B";
+    const bytes = new Blob([internalValue.value]).size;
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+});
+
+const rule: FormItemRule = {
+    trigger: ["blur", "input"],
+    required: field.required,
+    validator: async () => {
+        await nextTick();
+        if (field.required && !internalValue.value) {
+            return false;
+        }
+        if (internalValue.value && hasError.value) {
+            return false;
+        }
+        return fieldValidator(field, internalValue.value);
+    },
+};
+
+const formatJSON = () => {
+    try {
+        const parsed = JSON.parse(internalValue.value);
+        internalValue.value = JSON.stringify(parsed, null, 2);
+        modelValue.value = parsed;
+    } catch (error) {
+        console.error("JSON formatting failed:", error);
+    }
+};
+
+watch(internalValue, (newValue) => {
+    if (!newValue) {
+        modelValue.value = null;
+        return;
+    }
+    try {
+        const parsed = JSON.parse(newValue);
+        modelValue.value = parsed;
+    } catch {
+        // Don't update modelValue if JSON is invalid - keep previous value
+    }
+});
+
+watch(modelValue, (newValue) => {
+    const stringified = stringifyValue(newValue);
+    if (stringified !== internalValue.value) {
+        internalValue.value = stringified;
+    }
+});
+</script>

package/app/components/Field/Mention.vue

@@ -0,0 +1,36 @@
+<template>
+	<FieldWrapper :field :rule v-model="modelValue">
+		<NMention v-model:value="modelValue" :placeholder="t(field.key)" :options clearable v-bind="field.inputProps
+			? typeof field.inputProps === 'function'
+				? field.inputProps(modelValue) ?? {}
+				: field.inputProps
+			: {}">
+		</NMention>
+	</FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfObjects } from "inibase/utils"
+import type { FormItemRule } from "naive-ui"
+
+const { field } = defineProps<{ field: Field }>()
+
+const modelValue = defineModel<string>()
+
+const rule: FormItemRule = {
+	required: field.required,
+	validator: async () => {
+		await nextTick()
+		return fieldValidator(field, modelValue.value)
+	},
+}
+
+const options = field.options
+	? isArrayOfObjects(field.options)
+		? field.options
+		: (field.options as string[]).map((value) => ({
+				value: value,
+				label: t(value),
+			}))
+	: []
+</script>

package/app/components/Field/Number.vue

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

package/app/components/Field/Object.vue

@@ -0,0 +1,92 @@
+<template>
+	<NCollapse :default-expanded-names="field.expand ? String(field.id) : undefined" display-directive="show"
+		arrow-placement="right" :trigger-areas="['main', 'arrow']" accordion>
+		<NCollapseItem style="margin: 0 0 20px;" display-directive="show" :name="String(field.id)">
+			<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>
+			<div class="collapseContentPadding">
+				<NFlex>
+					<LazyField v-for="childField of (field.children as Schema)" :field="childField"
+						v-model="localModelValue[childField.key]" />
+				</NFlex>
+			</div>
+		</NCollapseItem>
+	</NCollapse>
+</template>
+
+<script setup lang="ts">
+import { isObject, isStringified } from "inibase/utils";
+import Inison from "inison";
+import type { DropdownOption } from "naive-ui";
+import { Icon, NIcon } from "#components";
+
+const database = useState<Database>("database");
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
+
+const { field } = defineProps<{ field: Field }>();
+
+const modelValue = defineModel<Record<string | number, any>>();
+
+const localModelValue = ref<Record<string | number, any>>(
+	toRaw(modelValue.value ?? {}),
+);
+watch(
+	localModelValue,
+	(v) => {
+		modelValue.value = v;
+	},
+	{ deep: true },
+);
+
+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 && !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>

package/app/components/Field/Password.vue

@@ -0,0 +1,55 @@
+<template>
+	<FieldWrapper :field :rule v-model="modelValue">
+		<NInput type="password" show-password-on="click" v-model:value="localModelValue" :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>()
+const localModelValue = ref<string | undefined>(
+	modelValue.value !== undefined && modelValue.value !== null
+		? String(modelValue.value)
+		: undefined,
+)
+watch(localModelValue, (v) => {
+	modelValue.value = v
+})
+
+const rule: FormItemRule = {
+	trigger: ["blur", "input"],
+	required: field.required,
+	validator: async () => {
+		if (!alreadyRun.value) {
+			await nextTick()
+			return fieldValidator(field, localModelValue.value)
+		}
+		return new Promise((resolve) => {
+			resolve()
+		})
+	},
+}
+
+const alreadyRun = ref(false)
+onMounted(() => {
+	if (
+		localModelValue.value !== undefined &&
+		localModelValue.value !== "" &&
+		localModelValue.value !== null
+	) {
+		alreadyRun.value = true
+		localModelValue.value = undefined
+	}
+})
+</script>

package/app/components/Field/Radio.vue

@@ -0,0 +1,47 @@
+<template>
+	<FieldWrapper :field :rule v-model="modelValue">
+		<NRadioGroup v-model:value="modelValue" v-bind="field.inputProps
+			? typeof field.inputProps === 'function'
+				? field.inputProps(modelValue) ?? {}
+				: field.inputProps
+			: {}">
+			<NFlex>
+				<NRadio v-for="{ label, value } in options" :value :label />
+			</NFlex>
+		</NRadioGroup>
+	</FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfArrays, isArrayOfObjects } from "inibase/utils"
+import type { FormItemRule } from "naive-ui"
+
+const { field } = defineProps<{ field: Field }>()
+
+const modelValue = defineModel<string | number>()
+
+const rule: FormItemRule = {
+	trigger: "change",
+	required: field.required,
+	validator: async () => {
+		await nextTick()
+		return fieldValidator(field, modelValue.value)
+	},
+}
+
+const options = computed(() =>
+	field.options
+		? isArrayOfArrays(field.options)
+			? (field.options as [string | number, string][]).map(([value]) => ({
+					value: value,
+					label: t(value),
+				}))
+			: isArrayOfObjects(field.options)
+				? field.options
+				: (field.options as string[]).map((value) => ({
+						value: value,
+						label: t(value),
+					}))
+		: [],
+)
+</script>

package/app/components/Field/S.vue

@@ -0,0 +1,44 @@
+<template>
+	<NFlex>
+		<Field
+			v-for="field of formatedSchema"
+			:field="field"
+			:item="modelValue"
+			v-model="modelValue[field.key]"
+		/>
+	</NFlex>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfObjects } from "inibase/utils";
+
+function addIdToSchema(schema: Schema, startWithID = 0) {
+	function _addIdToField(field: Field) {
+		if (!field.id) {
+			startWithID++;
+			field.id = `temp-${startWithID}`;
+		}
+
+		if (
+			(field.type === "array" || field.type === "object") &&
+			isArrayOfObjects(field.children)
+		)
+			field.children = _addIdToSchema(field.children);
+		return field;
+	}
+	const _addIdToSchema = (schema: Schema) => schema.map(_addIdToField);
+
+	return _addIdToSchema(schema);
+}
+
+// TO-DO:
+// Add fields: Mention, Range, Slider
+const schema = defineModel<Schema>("schema");
+const formatedSchema = computed(() =>
+	schema.value?.length ? addIdToSchema(toRaw(schema.value)) : [],
+);
+
+const modelValue = defineModel<Record<string | number, any>>({
+	default: () => reactive({}),
+});
+</script>

package/app/components/Field/Select.vue

@@ -0,0 +1,49 @@
+<template>
+	<FieldWrapper :field :rule v-model="modelValue">
+		<NSelect v-model:value="modelValue" :placeholder="t(field.key)" :options :tag="!!field.custom"
+			max-tag-count="responsive" :consistent-menu-width="false" :multiple="!!field.isArray" filterable clearable
+			v-bind="field.inputProps
+				? typeof field.inputProps === 'function'
+					? field.inputProps(modelValue) ?? {}
+					: field.inputProps
+				: {}" />
+	</FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { isArrayOfArrays, isArrayOfObjects } from "inibase/utils";
+import type { FormItemRule } from "naive-ui";
+
+const { field } = defineProps<{ field: Field }>();
+
+const modelValue = defineModel<string | string[]>();
+if (modelValue.value && isArrayOfArrays(modelValue.value))
+	modelValue.value = modelValue.value.flat();
+
+const rule: FormItemRule = {
+	trigger: "change",
+	type: field.isArray ? "array" : "any",
+	required: field.required,
+	min: field.isArray ? field.min : undefined,
+	max: field.isArray ? field.max : undefined,
+	validator: async () => {
+		await nextTick();
+		return fieldValidator(field, modelValue.value);
+	},
+};
+const options = computed(() =>
+	field.options
+		? isArrayOfArrays(field.options)
+			? (field.options as [string | number, string][]).map(([value]) => ({
+					value: value,
+					label: t(value),
+				}))
+			: isArrayOfObjects(field.options)
+				? field.options
+				: (field.options as string[]).map((value) => ({
+						value: value,
+						label: t(value),
+					}))
+		: [],
+);
+</script>