@xleddyl/nuxt-cms 0.1.59 → 0.1.60

package/dist/module.json

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

package/dist/module.mjs

@@ -11,7 +11,7 @@ import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal'
 import { createJiti } from 'jiti';
 import { typeName, blockTypeName, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
 import { migrationsDirFor } from '../dist/runtime/shared/migrations-dir.js';
-import { pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, PAGE_PATH_FIELD, pageRoutes, fieldConditions, pageFieldsTableName, pageMediaTableName, isRequiredField, pageFields, isPrivateField, entryFieldsFor, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
+import { pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, PAGE_PATH_FIELD, pageRoutes, mobileMediaKey, fieldConditions, pageFieldsTableName, pageMediaTableName, isRequiredField, pageFields, isPrivateField, entryFieldsFor, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, expandMobileMedia } from '../dist/runtime/shared/index.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
@@ -245,6 +245,13 @@ function validateConfig(config, i18n) {
         if (!locales.length)
           errors.push(`${fat}: translatable requires cms.i18n.locales in nuxt.config`);
       }
+      if (field.mobile) {
+        const mobileKey = mobileMediaKey(key);
+        if (field.type !== "media")
+          errors.push(`${fat}: mobile is only supported on media fields`);
+        else if (allFields[mobileKey] && allFields[mobileKey].mobileOf !== key)
+          errors.push(`${fat}: mobile needs the key '${mobileKey}', which is already declared`);
+      }
       if (field.type === "select") {
         if (!field.options?.length)
           errors.push(`${fat}: select requires a non-empty options array`);
@@ -337,6 +344,8 @@ function validateConfig(config, i18n) {
               errors.push(`${bfat}: private fields are not supported inside blocks`);
             if (blockField.showIf)
               errors.push(`${bfat}: showIf is not supported inside blocks`);
+            if (blockField.mobile)
+              errors.push(`${bfat}: mobile is not supported inside blocks`);
             if (blockField.type === "select" && !blockField.options?.length) {
               errors.push(`${bfat}: select requires a non-empty options array`);
             }
@@ -966,7 +975,7 @@ async function loadCmsConfig(nuxt, resolver, configPathOption, i18n, logger) {
       moduleCache: false,
       alias: { "#nuxt-cms": resolver.resolve("./runtime/shared/index") }
     });
-    cmsConfig = await jiti.import(configPath, { default: true });
+    cmsConfig = expandMobileMedia(await jiti.import(configPath, { default: true }));
   } else {
     logger.warn(
       `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry \u2014 create a ${configPathOption}.ts with defineCmsConfig().`
@@ -984,27 +993,28 @@ async function loadCmsConfig(nuxt, resolver, configPathOption, i18n, logger) {
     entry.pages = resolvePageRoutes(entry, discoveredRoutes);
     routesByEntry[name] = entry.pages;
   }
-  if (Object.keys(routesByEntry).length) {
-    const source = (nuxt.options.alias["#cms-config"] ?? "").replace(/\\/g, "/").replace(/\.[cm]?[jt]s$/, "");
-    const wrapper = addTemplate({
-      filename: "cms/config.ts",
-      write: true,
-      getContents: () => [
-        `import config from '${source}'`,
-        ``,
-        `const pageRoutes = ${JSON.stringify(routesByEntry, null, 3)}`,
-        ``,
-        `for (const [name, routes] of Object.entries(pageRoutes)) {`,
-        `   const entry = Object(config)[name]`,
-        `   if (entry) entry.pages = routes`,
-        `}`,
-        ``,
-        `export default config`,
-        ``
-      ].join("\n")
-    });
-    nuxt.options.alias["#cms-config"] = wrapper.dst;
-  }
+  const source = (nuxt.options.alias["#cms-config"] ?? "").replace(/\\/g, "/").replace(/\.[cm]?[jt]s$/, "");
+  const wrapper = addTemplate({
+    filename: "cms/config.ts",
+    write: true,
+    getContents: () => [
+      `import { expandMobileMedia } from '#nuxt-cms'`,
+      `import config from '${source}'`,
+      ``,
+      `const pageRoutes = ${JSON.stringify(routesByEntry, null, 3)}`,
+      ``,
+      `expandMobileMedia(config)`,
+      ``,
+      `for (const [name, routes] of Object.entries(pageRoutes)) {`,
+      `   const entry = Object(config)[name]`,
+      `   if (entry) entry.pages = routes`,
+      `}`,
+      ``,
+      `export default config`,
+      ``
+    ].join("\n")
+  });
+  nuxt.options.alias["#cms-config"] = wrapper.dst;
   const configErrors = validateConfig(cmsConfig, i18n);
   if (configErrors.length) {
     for (const error of configErrors) logger.error(error);

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

@@ -72,6 +72,8 @@ export interface FieldConfig {
     blocks?: Record<string, BlockConfig>;
     mediaType?: MediaType | MediaType[];
     accept?: string[];
+    mobile?: boolean;
+    mobileOf?: string;
     to?: string;
     cardinality?: 'many-to-one' | 'one-to-one' | 'many-to-many';
     onDelete?: 'set null' | 'cascade' | 'restrict';
@@ -121,6 +123,9 @@ export interface CmsEntry {
     tabs?: CmsTab[];
     table?: CmsTable;
 }
+export declare const MOBILE_MEDIA_SUFFIX = "Mobile";
+export declare function mobileMediaKey(key: string): string;
+export declare function expandMobileMedia<T extends Record<string, unknown>>(config: T): T;
 export declare function entryTabs(entry: Pick<CmsEntry, 'tabs'>): CmsTab[];
 export declare function fieldTab(field: FieldConfig, tabs: CmsTab[]): string | undefined;
 export declare function fieldsByTab(fields: Record<string, FieldConfig>, tabs: CmsTab[]): Record<string, Record<string, FieldConfig>>;
@@ -191,6 +196,7 @@ export interface MediaFieldInput extends FieldInputBase {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
     translatable?: boolean;
+    mobile?: boolean;
 }
 export interface RelationFieldInput extends FieldInputBase {
     type: 'relation';
@@ -199,7 +205,7 @@ export interface RelationFieldInput extends FieldInputBase {
     onDelete?: 'set null' | 'cascade' | 'restrict';
 }
 type BlockField<T> = Omit<T, 'private' | 'showIf' | 'tab'>;
-export type BlockFieldInput = BlockField<TextFieldInput> | BlockField<RichtextFieldInput> | BlockField<NumberFieldInput> | BlockField<BooleanFieldInput> | BlockField<DateFieldInput> | BlockField<EmailFieldInput> | BlockField<SelectFieldInput> | BlockField<JsonFieldInput> | BlockField<MediaFieldInput>;
+export type BlockFieldInput = BlockField<TextFieldInput> | BlockField<RichtextFieldInput> | BlockField<NumberFieldInput> | BlockField<BooleanFieldInput> | BlockField<DateFieldInput> | BlockField<EmailFieldInput> | BlockField<SelectFieldInput> | BlockField<JsonFieldInput> | Omit<BlockField<MediaFieldInput>, 'mobile'>;
 export interface BlockInput {
     label: string;
     fields: Record<string, BlockFieldInput>;

package/dist/runtime/shared/index.js

@@ -192,6 +192,58 @@ export function localizeBlocks(field, value, locale, defaultLocale) {
   return value.map((item) => localizeBlock(field, item, locale, defaultLocale));
 }
 export const CMS_GRAPHQL_BATCH_LIMIT = 20;
+export const MOBILE_MEDIA_SUFFIX = "Mobile";
+export function mobileMediaKey(key) {
+  return `${key}${MOBILE_MEDIA_SUFFIX}`;
+}
+function mobileMediaField(key, field) {
+  const { mobile: _mobile, required: _required, ...rest } = field;
+  return {
+    ...rest,
+    label: `${field.label} (mobile)`,
+    mobileOf: key
+  };
+}
+function withMobileMedia(fields, removed = () => false) {
+  const expanded = {};
+  for (const [key, field] of Object.entries(fields)) {
+    if (field?.mobileOf && Object.hasOwn(fields, field.mobileOf)) continue;
+    expanded[key] = field;
+    const mobileKey = mobileMediaKey(key);
+    if (field?.mobile && field.type === "media" && !Object.hasOwn(fields, mobileKey)) {
+      expanded[mobileKey] = mobileMediaField(key, field);
+    } else if (field?.mobile && fields[mobileKey]?.mobileOf === key) {
+      expanded[mobileKey] = fields[mobileKey];
+    } else if (!field && removed(key) && !Object.hasOwn(fields, mobileKey)) {
+      expanded[mobileKey] = null;
+    }
+  }
+  return expanded;
+}
+export function expandMobileMedia(config) {
+  for (const entry of Object.values(config)) {
+    if (!entry?.fields) continue;
+    const shared = entry.fields;
+    const hasMobile = (key) => !!shared[key]?.mobile && shared[key]?.type === "media";
+    entry.fields = withMobileMedia(shared);
+    if (entry.overrides) {
+      entry.overrides = Object.fromEntries(
+        Object.entries(entry.overrides).map(([path, override]) => [
+          path,
+          withMobileMedia(override, hasMobile)
+        ])
+      );
+    }
+    if (entry.columns) {
+      entry.columns = [
+        ...new Set(
+          entry.columns.flatMap((key) => hasMobile(key) ? [key, mobileMediaKey(key)] : [key])
+        )
+      ];
+    }
+  }
+  return config;
+}
 export function entryTabs(entry) {
   return entry.tabs?.length ? entry.tabs : [];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.59",
+  "version": "0.1.60",
   "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)",