@xleddyl/nuxt-cms 0.7.0 → 0.8.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -9,7 +9,7 @@ import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal'
 import { createJiti } from 'jiti';
 import { typeName, blockTypeName as blockTypeName$1, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
 import { migrationsDirFor } from '../dist/runtime/shared/migrations-dir.js';
-import { entryFieldsFor, isPrivateField, blockTypeName, pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, normalizeContentEntries, PAGE_PATH_FIELD, pageRoutes, isCollectionKind, layoutErrors, listErrors, mobileMediaKey, fieldConditions, selectOptionValues, CONTENT_SLUG_FIELD, pageFieldsTableName, pageMediaTableName, CONTENT_SYSTEM_FIELDS, isRequiredField, pageFields, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, normalizeCmsConfig } from '../dist/runtime/shared/index.js';
+import { entryFieldsFor, isPrivateField, blockTypeName, pageColumnFields, isTranslatableField, isTranslatableMediaField, isStringListField, pageAllFields, normalizeContentEntries, PAGE_PATH_FIELD, pageRoutes, isCollectionKind, isMultiSelect, layoutErrors, listErrors, mobileMediaKey, fieldConditions, selectOptionValues, CONTENT_SLUG_FIELD, pageFieldsTableName, pageMediaTableName, CONTENT_SYSTEM_FIELDS, isRequiredField, pageFields, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, normalizeCmsConfig } from '../dist/runtime/shared/index.js';
 import { previewPathErrors, DEFAULT_CMS_PREVIEW_PATH } from '../dist/runtime/shared/preview.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
@@ -264,7 +264,8 @@ const RESERVED_TYPE_NAMES = [
   "IntFilter",
   "FloatFilter",
   "StringFilter",
-  "BooleanFilter"
+  "BooleanFilter",
+  "StringListFilter"
 ];
 function validateConfig(config, i18n) {
   const errors = [];
@@ -484,8 +485,13 @@ function validateConfig(config, i18n) {
         else if (isTranslatableField(source) && !(entry.kind === "content" && key === CONTENT_SLUG_FIELD))
           errors.push(`${fat}: slug source '${field.from}' cannot be translatable`);
       }
-      if (field.type !== "blocks" && (field.min !== void 0 || field.max !== void 0))
-        errors.push(`${fat}: min and max are only supported on blocks fields`);
+      if (field.type === "tags") {
+        errors.push(...tagsOptionErrors(fat, field));
+      } else if (field.suggestions !== void 0) {
+        errors.push(`${fat}: suggestions is only supported on tags fields`);
+      }
+      if (field.type !== "blocks" && field.type !== "tags" && (field.min !== void 0 || field.max !== void 0))
+        errors.push(`${fat}: min and max are only supported on blocks and tags fields`);
       if (field.type === "blocks") {
         if (field.translatable) errors.push(`${fat}: blocks fields cannot be translatable`);
         errors.push(...blocksCountErrors(fat, field));
@@ -505,7 +511,7 @@ function validateConfig(config, i18n) {
               errors.push(`${bfat}: key must be a valid identifier`);
             if (blockFieldKey === "type")
               errors.push(`${bfat}: 'type' is reserved inside blocks`);
-            if (["relation", "blocks", "slug"].includes(blockField.type)) {
+            if (["relation", "blocks", "slug", "tags"].includes(blockField.type)) {
               errors.push(
                 `${bfat}: ${blockField.type} fields are not supported inside blocks`
               );
@@ -659,6 +665,15 @@ function blocksCountErrors(at, field) {
     errors.push(`${at}: min (${field.min}) cannot be greater than max (${field.max})`);
   return errors;
 }
+function tagsOptionErrors(at, field) {
+  const errors = [];
+  if (field.min !== void 0) errors.push(`${at}: min is not supported on tags fields`);
+  if (field.max !== void 0 && !(typeof field.max === "number" && Number.isInteger(field.max) && field.max >= 1))
+    errors.push(`${at}: max must be an integer of 1 or more`);
+  if (field.suggestions !== void 0 && typeof field.suggestions !== "boolean")
+    errors.push(`${at}: suggestions must be a boolean`);
+  return errors;
+}
 function blockMetaErrors(at, block) {
   const errors = [];
   if (block.validate !== void 0 && typeof block.validate !== "function")
@@ -739,6 +754,9 @@ function columnExpr(key, field, dialect, table) {
     case "select":
       expr = field.multiple ? jsonExpr(col, dialect) : `text('${col}')`;
       break;
+    case "tags":
+      expr = jsonExpr(col, dialect);
+      break;
     case "slug":
       expr = `text('${col}').unique()`;
       break;
@@ -865,7 +883,7 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   if (pg && fields.some((f) => f.type === "date")) core.add("date");
   if (pg) core.add("boolean");
   if (pg && fields.some(
-    (f) => f.type === "json" || f.type === "blocks" || isTranslatableField(f) && !isTranslatableMediaField(f) || isMultiSelect(f)
+    (f) => f.type === "json" || f.type === "blocks" || isTranslatableField(f) && !isTranslatableMediaField(f) || isStringListField(f)
   ))
     core.add("jsonb");
   if (pg) core.add("timestamp");
@@ -1049,6 +1067,7 @@ function fieldTsType(config, entryName, key, field) {
     return isRequiredField(field) && !config[field.to]?.drafts ? target : `${target} | null`;
   }
   if (field.type === "media") return `${mediaTsType(field)} | null`;
+  if (field.type === "tags") return "string[]";
   if (field.type === "select" && field.multiple) {
     const union = selectOptionValues(field).map((o) => JSON.stringify(o)).join(" | ");
     return `(${union})[]`;
@@ -2104,6 +2123,11 @@ const module$1 = defineNuxtModule({
       method: "delete",
       handler: resolver.resolve("./runtime/server/api/settings.delete")
     });
+    addServerHandler({
+      route: "/api/cms/tags/:collection/:field",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/tags.get")
+    });
     addServerHandler({
       route: "/api/cms/export/:collection",
       method: "get",

package/dist/runtime/app/components/cms/FieldInput.vue

@@ -36,6 +36,15 @@
       :options="selectItems"
       :placeholder="field.placeholder ?? 'Select\u2026'"
    />
+   <CmsTagsField
+      v-else-if="field.type === 'tags'"
+      v-model="model"
+      :max="field.max"
+      :placeholder="field.placeholder"
+      :suggestions="field.suggestions"
+      :entry-name="entryName"
+      :field-key="fieldKey"
+   />
    <KSelect
       v-else-if="field.type === 'select'"
       v-model="singleValue"

package/dist/runtime/app/components/cms/TagsField.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    max?: number;
+    placeholder?: string;
+    suggestions?: boolean;
+    entryName?: string;
+    fieldKey?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/TagsField.vue

@@ -0,0 +1,72 @@
+<template>
+   <KCombobox
+      v-model="tags"
+      multiple
+      open-on-focus
+      :search="search"
+      :debounce="0"
+      :max-selected="max"
+      :placeholder="placeholder ?? 'Add a tag\u2026'"
+      :empty-text="emptyText"
+      @input="onInput"
+   />
+</template>
+
+<script setup>
+import { canAddTag, normalizeTags, tagKey } from "#nuxt-cms";
+import { Combobox as KCombobox } from "@xleddyl/443-components-vue";
+import { computed, onMounted, ref } from "#imports";
+const SUGGESTION_LIMIT = 50;
+const props = defineProps({
+  max: { type: Number, required: false },
+  placeholder: { type: String, required: false },
+  suggestions: { type: Boolean, required: false },
+  entryName: { type: String, required: false },
+  fieldKey: { type: String, required: false }
+});
+const model = defineModel({ type: null, ...{ required: true } });
+const known = ref([]);
+const tags = computed({
+  get: () => Array.isArray(model.value) ? normalizeTags(model.value) : [],
+  set: (value) => {
+    const next = normalizeTags(Array.isArray(value) ? value : []);
+    model.value = props.max === void 0 ? next : next.slice(0, props.max);
+  }
+});
+const full = computed(() => !canAddTag({ max: props.max }, tags.value.length));
+const emptyText = computed(
+  () => full.value ? `At most ${props.max} tags` : "Type a tag and press Enter"
+);
+function search(query) {
+  if (full.value) return [];
+  const taken = new Set(tags.value.map(tagKey));
+  const typed = query.trim();
+  const needle = tagKey(typed);
+  const matches = known.value.filter((tag) => !taken.has(tagKey(tag)) && tagKey(tag).includes(needle)).filter((tag) => tagKey(tag) !== needle).slice(0, SUGGESTION_LIMIT);
+  const options = matches.map((tag) => ({ label: tag, value: tag }));
+  if (!needle || taken.has(needle)) return options;
+  const existing = known.value.find((tag) => tagKey(tag) === needle);
+  return [{ label: existing ?? typed, value: existing ?? typed }, ...options];
+}
+function onInput(event) {
+  const input = event.target;
+  if (!input.value.includes(",")) return;
+  const parts = input.value.split(",");
+  const rest = parts.pop() ?? "";
+  tags.value = [...tags.value, ...parts];
+  input.value = rest.trimStart();
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+onMounted(async () => {
+  if (props.suggestions === false || !props.entryName || !props.fieldKey) return;
+  try {
+    known.value = await $fetch(
+      `/api/cms/tags/${encodeURIComponent(props.entryName)}/${encodeURIComponent(
+        props.fieldKey
+      )}`
+    );
+  } catch {
+    known.value = [];
+  }
+});
+</script>

package/dist/runtime/app/components/cms/TagsField.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    max?: number;
+    placeholder?: string;
+    suggestions?: boolean;
+    entryName?: string;
+    fieldKey?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/VisualEditor.vue

@@ -204,6 +204,8 @@
                                  :field="fields[key]"
                                  :locale="locale"
                                  :slug-source="slugSource(fields[key])"
+                                 :entry-name="entryName"
+                                 :field-key="key"
                                  @update:model-value="(value) => setValue(key, value)"
                               />
                            </KFormField>

package/dist/runtime/app/pages/admin-collection.vue

@@ -504,6 +504,8 @@ function displayValue(field, key, value) {
       return formatDateTime(value);
     case "select":
       return truncate(selectDisplayValue(field, value));
+    case "tags":
+      return Array.isArray(value) ? truncate(value.join(", ")) : "";
     case "blocks":
       return `${value.length} \u25A4`;
     case "relation": {

package/dist/runtime/app/utils/ui.js

@@ -13,6 +13,7 @@ const FIELD_ICONS = {
   email: "at-symbol",
   slug: "link",
   select: "chevron-up-down",
+  tags: "tag",
   json: "code-bracket",
   media: "photo",
   relation: "arrows-right-left",

package/dist/runtime/server/api/tags.get.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<string[]>>;
+export default _default;

package/dist/runtime/server/api/tags.get.js

@@ -0,0 +1,26 @@
+import { createError, defineEventHandler, getRouterParam } from "h3";
+import { useDb } from "#cms-db";
+import { distinctTags, entryFieldsFor } from "../../shared/index.js";
+import { readPages } from "../utils/page-storage.js";
+import { getRegistryEntry, tableColumns } from "../utils/registry.js";
+import { requireAdmin } from "../utils/require-admin.js";
+export default defineEventHandler(async (event) => {
+  await requireAdmin(event);
+  const { name, entry, table } = getRegistryEntry(event);
+  const key = getRouterParam(event, "field") ?? "";
+  const fields = entryFieldsFor(entry);
+  const field = Object.hasOwn(fields, key) ? fields[key] : void 0;
+  if (!field || field.type !== "tags") {
+    throw createError({ statusCode: 404, statusMessage: `Unknown tags field: ${key}` });
+  }
+  if (field.suggestions === false) return [];
+  if (entry.kind === "page") {
+    const rows2 = await readPages(name, entry, table);
+    return distinctTags(rows2.map((row) => row[key]));
+  }
+  const columns = tableColumns(table);
+  if (!Object.hasOwn(columns, key)) return [];
+  const column = columns[key];
+  const rows = await useDb().select({ value: column }).from(table);
+  return distinctTags(rows.map((row) => row.value));
+});

package/dist/runtime/server/utils/graphql.js

@@ -25,6 +25,7 @@ import {
   decodeTranslatableMedia,
   entryFieldsFor,
   hasTranslatableBlockFields,
+  isMultiValueField,
   isPrivateField,
   isTranslatableMediaField,
   localizeBlocks,
@@ -43,6 +44,12 @@ import {
 import { normalizeTimestampFields } from "../../shared/timestamps.js";
 import { useMediaIndex } from "./media-index.js";
 import { readPages } from "./page-storage.js";
+import {
+  isListFilterOperator,
+  joinListCondition,
+  jsonListCondition,
+  listFilterValues
+} from "./list-filter.js";
 import { getContentI18n, resolveTable, tableColumns } from "./registry.js";
 import { visibilityConditions } from "./visibility.js";
 const MAX_LIMIT = 100;
@@ -141,11 +148,42 @@ function columnFor(table, key) {
   const columns = tableColumns(table);
   return Object.hasOwn(columns, key) ? columns[key] : void 0;
 }
-function filterConditions(table, filters) {
+function joinTableFor(name, key) {
+  const join = cmsTables[`${name}_${key}`];
+  if (!join) throw new GraphQLError(`No join table for ${name}.${key}`);
+  const columns = tableColumns(join);
+  return { table: join, sourceId: columns.sourceId, targetId: columns.targetId };
+}
+function listConditions(name, table, key, field, ops) {
+  const conditions = [];
+  for (const [op, value] of Object.entries(ops)) {
+    if (value === void 0 || value === null) continue;
+    if (!isListFilterOperator(op)) throw new GraphQLError(`Unknown operator for ${key}: ${op}`);
+    if (op !== "isEmpty" && !listFilterValues(value).length)
+      throw new GraphQLError(`Empty ${op} list for ${key}`);
+    if (field.type === "relation") {
+      const id = columnFor(table, "id");
+      if (!id) throw new GraphQLError(`Unknown filter field: ${key}`);
+      conditions.push(joinListCondition(joinTableFor(name, key), id, op, value));
+      continue;
+    }
+    const column = columnFor(table, key);
+    if (!column) throw new GraphQLError(`Unknown filter field: ${key}`);
+    conditions.push(jsonListCondition(cmsDialect, column, op, value));
+  }
+  return conditions;
+}
+function filterConditions(name, entry, table, filters) {
   if (!filters) return [];
   const conditions = [];
+  const fields = entryFieldsFor(entry);
   for (const [key, ops] of Object.entries(filters)) {
     if (!ops) continue;
+    const field = Object.hasOwn(fields, key) ? fields[key] : void 0;
+    if (field && isMultiValueField(field)) {
+      conditions.push(...listConditions(name, table, key, field, ops));
+      continue;
+    }
     const column = columnFor(table, key);
     if (!column) throw new GraphQLError(`Unknown filter field: ${key}`);
     for (const [op, value] of Object.entries(ops)) {
@@ -353,7 +391,10 @@ export function buildCmsSchema() {
     queryResolvers[name] = async (_, args) => {
       const locale = resolveLocaleArg(args.locale);
       const table = tableFor(name);
-      const where = [...publishedFilter(entry, table), ...filterConditions(table, args.filters)];
+      const where = [
+        ...publishedFilter(entry, table),
+        ...filterConditions(name, entry, table, args.filters)
+      ];
       const limit = Math.min(MAX_LIMIT, Math.max(0, args.limit ?? DEFAULT_LIMIT));
       const offset = Math.max(0, args.offset ?? 0);
       const rows = await useDb().select().from(table).where(where.length ? and(...where) : void 0).orderBy(...sortOrder(entry, table, args.sort)).limit(limit).offset(offset);
@@ -376,7 +417,10 @@ export function buildCmsSchema() {
     }
     queryResolvers[`${name}Count`] = async (_, args) => {
       const table = tableFor(name);
-      const where = [...publishedFilter(entry, table), ...filterConditions(table, args.filters)];
+      const where = [
+        ...publishedFilter(entry, table),
+        ...filterConditions(name, entry, table, args.filters)
+      ];
       const [counted] = await useDb().select({ total: sql`count(*)` }).from(table).where(where.length ? and(...where) : void 0);
       return counted?.total ?? 0;
     };

package/dist/runtime/server/utils/list-filter.d.ts

@@ -0,0 +1,14 @@
+import type { SQL } from 'drizzle-orm';
+import type { AnySQLiteColumn, SQLiteTable } from 'drizzle-orm/sqlite-core';
+export type ListFilterDialect = 'sqlite' | 'postgres';
+export declare const LIST_FILTER_OPERATORS: readonly ["hasAny", "hasAll", "isEmpty"];
+export type ListFilterOperator = (typeof LIST_FILTER_OPERATORS)[number];
+export interface JoinTable {
+    table: SQLiteTable;
+    sourceId: AnySQLiteColumn;
+    targetId: AnySQLiteColumn;
+}
+export declare function isListFilterOperator(op: string): op is ListFilterOperator;
+export declare function listFilterValues(value: unknown): string[];
+export declare function jsonListCondition(dialect: ListFilterDialect, column: AnySQLiteColumn, op: ListFilterOperator, value: unknown): SQL;
+export declare function joinListCondition(join: JoinTable, id: AnySQLiteColumn, op: ListFilterOperator, value: unknown): SQL;

package/dist/runtime/server/utils/list-filter.js

@@ -0,0 +1,47 @@
+import { sql } from "drizzle-orm";
+export const LIST_FILTER_OPERATORS = ["hasAny", "hasAll", "isEmpty"];
+export function isListFilterOperator(op) {
+  return LIST_FILTER_OPERATORS.includes(op);
+}
+export function listFilterValues(value) {
+  if (!Array.isArray(value)) return [];
+  return [...new Set(value.map((item) => String(item)))];
+}
+function valueList(values) {
+  return sql`(${sql.join(
+    values.map((value) => sql`${value}`),
+    sql`, `
+  )})`;
+}
+export function jsonListCondition(dialect, column, op, value) {
+  if (op === "isEmpty") {
+    const length = dialect === "postgres" ? sql`coalesce(jsonb_array_length(${column}), 0)` : sql`coalesce(json_array_length(${column}), 0)`;
+    return value ? sql`${length} = 0` : sql`${length} > 0`;
+  }
+  const values = listFilterValues(value);
+  const list = valueList(values);
+  if (dialect === "postgres") {
+    if (op === "hasAll") return sql`${column} @> ${JSON.stringify(values)}::jsonb`;
+    const items2 = sql`jsonb_array_elements_text(${column}) as cms_item(value)`;
+    return sql`exists (select 1 from ${items2} where cms_item.value in ${list})`;
+  }
+  const items = sql`json_each(${column})`;
+  if (op === "hasAll") {
+    const count = sql`select count(distinct json_each.value) from ${items}`;
+    return sql`(${count} where json_each.value in ${list}) = ${sql.raw(String(values.length))}`;
+  }
+  return sql`exists (select 1 from ${items} where json_each.value in ${list})`;
+}
+export function joinListCondition(join, id, op, value) {
+  if (op === "isEmpty") {
+    const linked = sql`exists (select 1 from ${join.table} where ${join.sourceId} = ${id})`;
+    return value ? sql`not ${linked}` : linked;
+  }
+  const values = listFilterValues(value);
+  const matching = sql`${join.sourceId} = ${id} and ${join.targetId} in ${valueList(values)}`;
+  if (op === "hasAll") {
+    const count = sql`select count(distinct ${join.targetId}) from ${join.table}`;
+    return sql`(${count} where ${matching}) = ${sql.raw(String(values.length))}`;
+  }
+  return sql`exists (select 1 from ${join.table} where ${matching})`;
+}

package/dist/runtime/server/utils/search.js

@@ -26,7 +26,16 @@ import {
   stripMarkup
 } from "../../shared/search.js";
 import { decodePageRows, selectPages } from "./page-rows.js";
-const VALUE_TYPES = /* @__PURE__ */ new Set(["text", "richtext", "email", "slug", "select", "json", "blocks"]);
+const VALUE_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "richtext",
+  "email",
+  "slug",
+  "select",
+  "tags",
+  "json",
+  "blocks"
+]);
 function isSearchableField(field) {
   return VALUE_TYPES.has(field.type);
 }
@@ -57,6 +66,8 @@ function fieldTexts(field, value, defaultLocale) {
     }).join(", ");
     return [{ locale: null, text }];
   }
+  if (field.type === "tags" && Array.isArray(value))
+    return value.length ? [{ locale: null, text: value.map(String).join(", ") }] : [];
   if (typeof value === "string") return [{ locale: null, text: plainText(field, value) }];
   return [{ locale: null, text: JSON.stringify(value) }];
 }

package/dist/runtime/shared/graphql-sdl.d.ts

@@ -1,4 +1,5 @@
 import type { CmsConfig } from './index.js';
 import { blockTypeName, blocksFieldTypeName, typeName } from './index.js';
 export { blockTypeName, blocksFieldTypeName, typeName };
+export declare const LIST_FILTER = "StringListFilter";
 export declare function renderGraphqlSdl(config: CmsConfig): string;

package/dist/runtime/shared/graphql-sdl.js

@@ -3,6 +3,7 @@ import {
   blockTypeName,
   blocksFieldTypeName,
   isCollectionKind,
+  isMultiValueField,
   isPrivateField,
   isRequiredField,
   isTranslatableField,
@@ -13,6 +14,7 @@ export { blockTypeName, blocksFieldTypeName, typeName };
 function entryFields(entry) {
   return entry.kind === "page" ? pageAllFields(entry) : entry.fields;
 }
+export const LIST_FILTER = "StringListFilter";
 function scalarFor(field) {
   switch (field.type) {
     case "number":
@@ -27,15 +29,12 @@ function scalarFor(field) {
 }
 function filterScalarFor(field) {
   if (isPrivateField(field) || isTranslatableField(field)) return null;
+  if (isMultiValueField(field)) return LIST_FILTER;
   switch (field.type) {
     case "json":
       return null;
     case "blocks":
       return null;
-    case "select":
-      return field.multiple ? null : "StringFilter";
-    case "relation":
-      return field.cardinality === "many-to-many" ? null : "StringFilter";
     case "number":
       return field.integer ? "IntFilter" : "FloatFilter";
     case "boolean":
@@ -61,7 +60,8 @@ function fieldSdl(config, entryName, key, field) {
     return `  ${key}: ${target}${nonNull ? "!" : ""}`;
   }
   if (field.type === "media") return `  ${key}: CmsMedia`;
-  if (field.type === "select" && field.multiple) return `  ${key}: [String!]!`;
+  if (field.type === "tags" || field.type === "select" && field.multiple)
+    return `  ${key}: [String!]!`;
   if (field.type === "blocks")
     return `  ${key}: [${blocksFieldTypeName(entryName, key)}!]${isRequiredField(field) ? "!" : ""}`;
   return `  ${key}: ${scalarFor(field)}${isRequiredField(field) ? "!" : ""}`;
@@ -120,7 +120,7 @@ function filterSdl(name, entry) {
   const gqlType = typeName(name);
   const keys = filterableKeys(entry);
   const filters = keys.map(([key, scalar]) => `  ${key}: ${scalar}`).join("\n");
-  const sortFields = keys.map(([key]) => `  ${key}`).join("\n");
+  const sortFields = keys.filter(([, scalar]) => scalar !== LIST_FILTER).map(([key]) => `  ${key}`).join("\n");
   return [
     `input ${gqlType}Filters {
 ${filters}
@@ -141,6 +141,11 @@ const COMMON_SDL = [
   "input FloatFilter {\n  eq: Float\n  neq: Float\n  gt: Float\n  gte: Float\n  lt: Float\n  lte: Float\n  in: [Float!]\n  isNull: Boolean\n}",
   "input StringFilter {\n  eq: String\n  neq: String\n  gt: String\n  gte: String\n  lt: String\n  lte: String\n  like: String\n  in: [String!]\n  isNull: Boolean\n}",
   "input BooleanFilter {\n  eq: Boolean\n  neq: Boolean\n  isNull: Boolean\n}",
+  `input ${LIST_FILTER} {
+  hasAny: [String!]
+  hasAll: [String!]
+  isEmpty: Boolean
+}`,
   "enum CmsMediaType {\n  image\n  video\n  file\n}",
   "type CmsMedia {\n  key: String!\n  url: String\n  type: CmsMediaType!\n  alt: String\n  folder: String\n  mime: String\n  size: Int\n  width: Int\n  height: Int\n}"
 ];

package/dist/runtime/shared/index.d.ts

@@ -2,7 +2,7 @@ import type { PgTable } from 'drizzle-orm/pg-core';
 import type { SQLiteTable } from 'drizzle-orm/sqlite-core';
 import type { CmsLayoutBlock, CmsListInput } from './layout.js';
 export type CmsTable = SQLiteTable | PgTable;
-export type FieldType = 'text' | 'richtext' | 'number' | 'boolean' | 'date' | 'datetime' | 'email' | 'slug' | 'select' | 'json' | 'media' | 'relation' | 'blocks';
+export type FieldType = 'text' | 'richtext' | 'number' | 'boolean' | 'date' | 'datetime' | 'email' | 'slug' | 'select' | 'tags' | 'json' | 'media' | 'relation' | 'blocks';
 export interface CmsI18n {
     locales: string[];
     defaultLocale: string;
@@ -141,6 +141,7 @@ export interface FieldConfig {
     translatable?: boolean;
     options?: readonly SelectOptionInput[];
     multiple?: boolean;
+    suggestions?: boolean;
     from?: string;
     blocks?: Record<string, BlockConfig>;
     min?: number;
@@ -169,6 +170,12 @@ export declare function translatableMediaKeys(entry: EntryLike): string[];
 export declare function encodeEntryTranslatableMedia(entry: EntryLike, values: Record<string, unknown>): Record<string, unknown>;
 export declare function decodeEntryTranslatableMedia<T extends Record<string, unknown>>(entry: EntryLike, rows: T[], defaultLocale: string): T[];
 export declare function isMultiSelect(field: FieldConfig): boolean;
+export declare function isStringListField(field: FieldConfig): boolean;
+export declare function isMultiValueField(field: FieldConfig): boolean;
+export declare function tagKey(value: string): string;
+export declare function normalizeTags(values: readonly unknown[]): string[];
+export declare function distinctTags(values: readonly unknown[]): string[];
+export declare function canAddTag(field: Pick<FieldConfig, 'max'>, count: number): boolean;
 export declare function translatableFieldKeys(entry: EntryLike): string[];
 export declare function translatableBlockFieldKeys(block: BlockConfig): string[];
 export declare function hasTranslatableBlockFields(field: FieldConfig): boolean;
@@ -303,6 +310,11 @@ export interface SelectFieldInput extends FieldInputBase {
     options: readonly SelectOptionInput[];
     multiple?: boolean;
 }
+export interface TagsFieldInput extends FieldInputBase {
+    type: 'tags';
+    max?: number;
+    suggestions?: boolean;
+}
 export interface JsonFieldInput extends FieldInputBase {
     type: 'json';
 }
@@ -335,7 +347,7 @@ export interface BlocksFieldInput extends FieldInputBase {
     min?: number;
     max?: number;
 }
-export type CmsFieldInput = TextFieldInput | RichtextFieldInput | NumberFieldInput | BooleanFieldInput | DateFieldInput | DateTimeFieldInput | EmailFieldInput | SlugFieldInput | SelectFieldInput | JsonFieldInput | MediaFieldInput | RelationFieldInput | BlocksFieldInput;
+export type CmsFieldInput = TextFieldInput | RichtextFieldInput | NumberFieldInput | BooleanFieldInput | DateFieldInput | DateTimeFieldInput | EmailFieldInput | SlugFieldInput | SelectFieldInput | TagsFieldInput | JsonFieldInput | MediaFieldInput | RelationFieldInput | BlocksFieldInput;
 interface CmsEntryInputBase {
     id: string;
     label: string;

package/dist/runtime/shared/index.js

@@ -237,6 +237,46 @@ export function decodeEntryTranslatableMedia(entry, rows, defaultLocale) {
 export function isMultiSelect(field) {
   return field.type === "select" && !!field.multiple;
 }
+export function isStringListField(field) {
+  return field.type === "tags" || isMultiSelect(field);
+}
+export function isMultiValueField(field) {
+  return isStringListField(field) || field.type === "relation" && field.cardinality === "many-to-many";
+}
+export function tagKey(value) {
+  return value.trim().toLowerCase();
+}
+export function normalizeTags(values) {
+  const seen = /* @__PURE__ */ new Set();
+  const tags = [];
+  for (const value of values) {
+    if (typeof value !== "string") continue;
+    const tag = value.trim();
+    const key = tagKey(tag);
+    if (!key || seen.has(key)) continue;
+    seen.add(key);
+    tags.push(tag);
+  }
+  return tags;
+}
+export function distinctTags(values) {
+  const lists = values.map((value) => {
+    if (Array.isArray(value)) return value;
+    if (typeof value !== "string" || !value.startsWith("[")) return [];
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  });
+  return normalizeTags(lists.flat()).sort(
+    (a, b) => a.localeCompare(b, void 0, { sensitivity: "base" })
+  );
+}
+export function canAddTag(field, count) {
+  return field.max === void 0 || count < field.max;
+}
 export function translatableFieldKeys(entry) {
   return Object.entries(entryFieldsFor(entry)).filter(([, field]) => isTranslatableField(field)).map(([key]) => key);
 }

package/dist/runtime/shared/transfer.js

@@ -1,4 +1,9 @@
-import { isCollectionKind, isMultiSelect, isTranslatableField, selectOptionLabel } from "./index.js";
+import {
+  isCollectionKind,
+  isStringListField,
+  isTranslatableField,
+  selectOptionLabel
+} from "./index.js";
 export const TRANSFER_FORMATS = ["json", "csv"];
 export const IMPORT_MODES = ["create", "upsert"];
 export const IMPORT_MAX_BYTES = 5 * 1024 * 1024;
@@ -93,13 +98,13 @@ export function parseCsv(text) {
 }
 function csvCellText(field, value) {
   if (value === null || value === void 0) return "";
-  if (field?.type === "json" || isMultiSelectField(field)) return JSON.stringify(value);
+  if (field?.type === "json" || isStringList(field)) return JSON.stringify(value);
   if (typeof value === "boolean") return value ? "true" : "false";
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
-function isMultiSelectField(field) {
-  return !!field && isMultiSelect(field);
+function isStringList(field) {
+  return !!field && isStringListField(field);
 }
 export function entryRowsToCsv(entry, rows, i18n) {
   const keys = transferKeys(entry);
@@ -130,7 +135,8 @@ export function csvCellValue(field, text) {
     if (FALSE_VALUES.includes(lower)) return { value: false };
     return { error: "Not a boolean (true or false)" };
   }
-  if (field.type === "json" || isMultiSelect(field)) {
+  if (field.type === "tags" && !text.trim().startsWith("[")) return { value: text.split(",") };
+  if (field.type === "json" || isStringListField(field)) {
     try {
       return { value: JSON.parse(text) };
     } catch {

package/dist/runtime/shared/validation.d.ts

@@ -11,9 +11,11 @@ export interface ValidationMessages {
     requiredLocale: (locale: string) => string;
     minBlocks: (min: number) => string;
     maxBlocks: (max: number) => string;
+    maxTags: (max: number) => string;
 }
 export declare function datetimeSchema(message: string): z.ZodPipe<z.ZodString, z.ZodTransform<string, string>>;
 export declare function blocksCountMessage(field: Pick<FieldConfig, 'min' | 'max'>, count: number, messages?: Partial<ValidationMessages>): string | null;
+export declare function tagsCountMessage(field: Pick<FieldConfig, 'max'>, count: number, messages?: Partial<ValidationMessages>): string | null;
 export interface EntryValidationIssue {
     path: (string | number)[];
     message: string;

package/dist/runtime/shared/validation.js

@@ -4,6 +4,7 @@ import {
   declaresHiddenField,
   isFieldVisible,
   isTranslatableField,
+  normalizeTags,
   selectOptionValues
 } from "./index.js";
 export const objectKeySchema = z.string().min(1).max(1024).refine((k) => !k.includes("..") && !k.startsWith("/"), "Invalid object key");
@@ -16,7 +17,8 @@ const DEFAULT_MESSAGES = {
   unknownLocale: "Unknown locale key",
   requiredLocale: (locale) => `Required field (locale '${locale}')`,
   minBlocks: (min) => `Add at least ${min} ${min === 1 ? "block" : "blocks"}`,
-  maxBlocks: (max) => `Add at most ${max} ${max === 1 ? "block" : "blocks"}`
+  maxBlocks: (max) => `Add at most ${max} ${max === 1 ? "block" : "blocks"}`,
+  maxTags: (max) => `Add at most ${max} ${max === 1 ? "tag" : "tags"}`
 };
 const DATETIME_PATTERN = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:\d{2})$/;
 export function datetimeSchema(message) {
@@ -88,6 +90,21 @@ export function blocksCountMessage(field, count, messages) {
   if (field.min !== void 0 && count > 0 && count < field.min) return m.minBlocks(field.min);
   return null;
 }
+export function tagsCountMessage(field, count, messages) {
+  const m = { ...DEFAULT_MESSAGES, ...messages };
+  if (field.max !== void 0 && count > field.max) return m.maxTags(field.max);
+  return null;
+}
+function countMessage(field, count, m) {
+  return field.type === "tags" ? tagsCountMessage(field, count, m) : blocksCountMessage(field, count, m);
+}
+function tagsSchema(field, bounded, m) {
+  return z.array(z.string()).nullish().transform((value) => normalizeTags(value ?? [])).superRefine((tags, ctx) => {
+    if (field.required && !tags.length) ctx.addIssue({ code: "custom", message: m.required });
+    const message = bounded ? tagsCountMessage(field, tags.length, m) : null;
+    if (message) ctx.addIssue({ code: "custom", message });
+  });
+}
 function boundedBlocks(list, field, m) {
   if (field.min === void 0 && field.max === void 0) return list;
   return list.superRefine((items, ctx) => {
@@ -166,7 +183,7 @@ export function buildEntrySchema(entry, i18n, messages) {
   for (const [key, declared] of Object.entries(entry.fields)) {
     const field = declared.showIf ? { ...declared, required: false } : declared;
     if (declared.showIf && declared.required) conditional.push([key, declared]);
-    if (declared.showIf && declared.type === "blocks" && (declared.min !== void 0 || declared.max !== void 0))
+    if (declared.showIf && (declared.type === "blocks" || declared.type === "tags") && (declared.min !== void 0 || declared.max !== void 0))
       conditionalBounds.push([key, declared]);
     if (field.type === "relation" && field.cardinality === "many-to-many") {
       const list = z.array(z.string().min(1));
@@ -178,6 +195,10 @@ export function buildEntrySchema(entry, i18n, messages) {
       shape[key] = field.required ? list.min(1, m.required) : list.nullish().transform((v) => v ?? []);
       continue;
     }
+    if (field.type === "tags") {
+      shape[key] = tagsSchema(field, !declared.showIf, m);
+      continue;
+    }
     if (field.type === "blocks") {
       const list = blocksSchema(field, i18n, m);
       const base = field.required ? list.min(1, m.required) : list;
@@ -212,7 +233,7 @@ export function buildEntrySchema(entry, i18n, messages) {
     for (const [key, field] of conditionalBounds) {
       const list = values[key];
       if (!isFieldVisible(field, values) || !Array.isArray(list)) continue;
-      const message = blocksCountMessage(field, list.length, m);
+      const message = countMessage(field, list.length, m);
       if (message) ctx.addIssue({ code: "custom", path: [key], message });
     }
     if (!hooks) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Lightweight CMS that ships with your Nuxt app: runs on the Nitro server, content types defined in code, /cms admin panel, GraphQL API, SQLite or Postgres. No external CMS needed!",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",
@@ -69,7 +69,7 @@
     "@tiptap/pm": "^3.32.0",
     "@tiptap/starter-kit": "^3.32.0",
     "@tiptap/vue-3": "^3.32.0",
-    "@xleddyl/443-components-vue": "^0.6.0",
+    "@xleddyl/443-components-vue": "^0.6.2",
     "aws4fetch": "^1.0.20",
     "drizzle-kit": "^0.31.0",
     "drizzle-orm": "^0.44.0",