@roxxel/payload-multilang 0.0.1

package/dist/components/TranslationActionsClient.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, toast, useConfig, useRouteTransition } from '@payloadcms/ui';
+import { useRouter } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import { useState } from 'react';
+import '../styles/admin.css';
+export const TranslationActionsClient = ({ collectionSlug, docID, languages, state })=>{
+    const { config } = useConfig();
+    const router = useRouter();
+    const { startRouteTransition } = useRouteTransition();
+    const [targetLanguage, setTargetLanguage] = useState('');
+    const [targetID, setTargetID] = useState('');
+    const [isBusy, setIsBusy] = useState(false);
+    const collectionAPIPath = (path)=>formatAdminURL({
+            apiRoute: config.routes.api,
+            path: `/${collectionSlug}${path}`
+        });
+    const createTranslation = async ()=>{
+        if (!targetLanguage) {
+            toast.error('Choose a target language.');
+            return;
+        }
+        setIsBusy(true);
+        const response = await fetch(collectionAPIPath('/multilang/create'), {
+            body: JSON.stringify({
+                sourceId: docID,
+                targetLanguage
+            }),
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: 'POST'
+        });
+        setIsBusy(false);
+        if (!response.ok) {
+            const result = await response.json().catch(()=>undefined);
+            toast.error(result?.message || 'Translation could not be created.');
+            return;
+        }
+        const result = await response.json();
+        const documentID = result.doc?.id;
+        if (documentID) {
+            startRouteTransition(()=>{
+                router.push(formatAdminURL({
+                    adminRoute: config.routes.admin,
+                    path: `/collections/${collectionSlug}/${documentID}`
+                }));
+            });
+        }
+    };
+    const connectTranslation = async ()=>{
+        if (!targetID || !targetLanguage) {
+            toast.error('Target ID and language are required.');
+            return;
+        }
+        setIsBusy(true);
+        const response = await fetch(collectionAPIPath('/multilang/connect'), {
+            body: JSON.stringify({
+                sourceId: docID,
+                targetId: targetID,
+                targetLanguage
+            }),
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: 'POST'
+        });
+        setIsBusy(false);
+        if (!response.ok) {
+            const result = await response.json().catch(()=>undefined);
+            toast.error(result?.message || 'Translation could not be connected.');
+            return;
+        }
+        toast.success('Translation connected.');
+        startRouteTransition(()=>{
+            router.refresh();
+        });
+    };
+    const disconnectTranslation = async ()=>{
+        setIsBusy(true);
+        const response = await fetch(collectionAPIPath('/multilang/disconnect'), {
+            body: JSON.stringify({
+                id: docID
+            }),
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: 'POST'
+        });
+        setIsBusy(false);
+        if (!response.ok) {
+            toast.error('Translation could not be disconnected.');
+            return;
+        }
+        toast.success('Translation disconnected.');
+        startRouteTransition(()=>{
+            router.refresh();
+        });
+    };
+    const availableLanguages = languages.filter((language)=>!state.translations[language.code]);
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "payload-multilang-panel",
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                children: "Translation actions"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "payload-multilang-inline-form",
+                children: [
+                    /*#__PURE__*/ _jsxs("select", {
+                        onChange: (event)=>setTargetLanguage(event.target.value),
+                        value: targetLanguage,
+                        children: [
+                            /*#__PURE__*/ _jsx("option", {
+                                value: "",
+                                children: "Choose language"
+                            }),
+                            availableLanguages.map((language)=>/*#__PURE__*/ _jsxs("option", {
+                                    value: language.code,
+                                    children: [
+                                        language.flagLabel ? `${language.flagLabel} ` : '',
+                                        language.name
+                                    ]
+                                }, language.code))
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: isBusy || !targetLanguage,
+                        onClick: createTranslation,
+                        type: "button",
+                        children: "Create translation"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "payload-multilang-inline-form",
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        onChange: (event)=>setTargetID(event.target.value),
+                        placeholder: "Existing document ID",
+                        value: targetID
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: isBusy || !targetID || !targetLanguage,
+                        onClick: connectTranslation,
+                        type: "button",
+                        children: "Connect existing"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                buttonStyle: "secondary",
+                disabled: isBusy,
+                onClick: disconnectTranslation,
+                type: "button",
+                children: "Disconnect this document"
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=TranslationActionsClient.js.map

package/dist/components/TranslationActionsClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TranslationActionsClient.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useConfig, useRouteTransition } from '@payloadcms/ui'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport { useState } from 'react'\n\nimport '../styles/admin.css'\nimport type { MultilangLanguage, TranslationState } from '../types.js'\n\ntype Props = {\n  collectionSlug: string\n  docID: number | string\n  languages: MultilangLanguage[]\n  state: TranslationState\n}\n\nexport const TranslationActionsClient = ({\n  collectionSlug,\n  docID,\n  languages,\n  state,\n}: Props) => {\n  const { config } = useConfig()\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n  const [targetLanguage, setTargetLanguage] = useState('')\n  const [targetID, setTargetID] = useState('')\n  const [isBusy, setIsBusy] = useState(false)\n\n  const collectionAPIPath = (path: string) =>\n    formatAdminURL({\n      apiRoute: config.routes.api,\n      path: `/${collectionSlug}${path}`,\n    })\n\n  const createTranslation = async () => {\n    if (!targetLanguage) {\n      toast.error('Choose a target language.')\n      return\n    }\n\n    setIsBusy(true)\n    const response = await fetch(collectionAPIPath('/multilang/create'), {\n      body: JSON.stringify({\n        sourceId: docID,\n        targetLanguage,\n      }),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n    setIsBusy(false)\n\n    if (!response.ok) {\n      const result = (await response.json().catch(() => undefined)) as\n        | { message?: string }\n        | undefined\n      toast.error(result?.message || 'Translation could not be created.')\n      return\n    }\n\n    const result = (await response.json()) as { doc?: { id?: number | string } }\n\n    const documentID = result.doc?.id\n\n    if (documentID) {\n      startRouteTransition(() => {\n        router.push(\n          formatAdminURL({\n            adminRoute: config.routes.admin,\n            path: `/collections/${collectionSlug}/${documentID}`,\n          }),\n        )\n      })\n    }\n  }\n\n  const connectTranslation = async () => {\n    if (!targetID || !targetLanguage) {\n      toast.error('Target ID and language are required.')\n      return\n    }\n\n    setIsBusy(true)\n    const response = await fetch(collectionAPIPath('/multilang/connect'), {\n      body: JSON.stringify({\n        sourceId: docID,\n        targetId: targetID,\n        targetLanguage,\n      }),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n    setIsBusy(false)\n\n    if (!response.ok) {\n      const result = (await response.json().catch(() => undefined)) as\n        | { message?: string }\n        | undefined\n      toast.error(result?.message || 'Translation could not be connected.')\n      return\n    }\n\n    toast.success('Translation connected.')\n    startRouteTransition(() => {\n      router.refresh()\n    })\n  }\n\n  const disconnectTranslation = async () => {\n    setIsBusy(true)\n    const response = await fetch(collectionAPIPath('/multilang/disconnect'), {\n      body: JSON.stringify({ id: docID }),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n    setIsBusy(false)\n\n    if (!response.ok) {\n      toast.error('Translation could not be disconnected.')\n      return\n    }\n\n    toast.success('Translation disconnected.')\n    startRouteTransition(() => {\n      router.refresh()\n    })\n  }\n\n  const availableLanguages = languages.filter(\n    (language) => !state.translations[language.code],\n  )\n\n  return (\n    <section className=\"payload-multilang-panel\">\n      <h2>Translation actions</h2>\n      <div className=\"payload-multilang-inline-form\">\n        <select\n          onChange={(event) => setTargetLanguage(event.target.value)}\n          value={targetLanguage}\n        >\n          <option value=\"\">Choose language</option>\n          {availableLanguages.map((language) => (\n            <option key={language.code} value={language.code}>\n              {language.flagLabel ? `${language.flagLabel} ` : ''}\n              {language.name}\n            </option>\n          ))}\n        </select>\n        <Button disabled={isBusy || !targetLanguage} onClick={createTranslation} type=\"button\">\n          Create translation\n        </Button>\n      </div>\n\n      <div className=\"payload-multilang-inline-form\">\n        <input\n          onChange={(event) => setTargetID(event.target.value)}\n          placeholder=\"Existing document ID\"\n          value={targetID}\n        />\n        <Button disabled={isBusy || !targetID || !targetLanguage} onClick={connectTranslation} type=\"button\">\n          Connect existing\n        </Button>\n      </div>\n\n      <Button buttonStyle=\"secondary\" disabled={isBusy} onClick={disconnectTranslation} type=\"button\">\n        Disconnect this document\n      </Button>\n    </section>\n  )\n}\n"],"names":["Button","toast","useConfig","useRouteTransition","useRouter","formatAdminURL","useState","TranslationActionsClient","collectionSlug","docID","languages","state","config","router","startRouteTransition","targetLanguage","setTargetLanguage","targetID","setTargetID","isBusy","setIsBusy","collectionAPIPath","path","apiRoute","routes","api","createTranslation","error","response","fetch","body","JSON","stringify","sourceId","credentials","headers","method","ok","result","json","catch","undefined","message","documentID","doc","id","push","adminRoute","admin","connectTranslation","targetId","success","refresh","disconnectTranslation","availableLanguages","filter","language","translations","code","section","className","h2","div","select","onChange","event","target","value","option","map","flagLabel","name","disabled","onClick","type","input","placeholder","buttonStyle"],"mappings":"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"}

package/dist/components/TranslationColumnCell.d.ts

@@ -0,0 +1,2 @@
+import type { DefaultServerCellComponentProps } from 'payload';
+export declare const TranslationColumnCell: (props: DefaultServerCellComponentProps) => Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/TranslationColumnCell.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_FIELD_NAMES } from '../constants.js';
+import { asDocument, getID, getStringValue } from '../lib/data.js';
+import { getPayloadMultilangCustom } from './config.js';
+import { TranslationColumnCellClient } from './TranslationColumnCellClient.js';
+const getCollectionConfig = (props)=>props.collectionConfig || props.payload.collections[props.collectionSlug]?.config;
+const getFieldNames = (props)=>({
+        ...DEFAULT_FIELD_NAMES,
+        ...getPayloadMultilangCustom(getCollectionConfig(props)?.admin?.custom).fieldNames || {}
+    });
+const getLanguages = (props)=>{
+    const languages = getPayloadMultilangCustom(getCollectionConfig(props)?.admin?.custom).languages;
+    return Array.isArray(languages) ? languages : [];
+};
+export const TranslationColumnCell = async (props)=>{
+    const fieldNames = getFieldNames(props);
+    const languages = getLanguages(props);
+    const collectionConfig = getCollectionConfig(props);
+    const rowData = asDocument(props.rowData);
+    const sourceID = getID(rowData.id);
+    const configuredLanguageCodes = new Set(languages.map((language)=>language.code));
+    if (!collectionConfig || !languages.length || !sourceID) {
+        return /*#__PURE__*/ _jsx("span", {
+            className: "payload-multilang-cell payload-multilang-cell--muted",
+            children: "-"
+        });
+    }
+    const storedLanguage = getStringValue(rowData[fieldNames.language]);
+    const currentLanguage = storedLanguage && configuredLanguageCodes.has(storedLanguage) ? storedLanguage : undefined;
+    const group = getStringValue(rowData[fieldNames.group]);
+    let translationsByLanguage = {};
+    if (group) {
+        const { docs } = await props.payload.find({
+            collection: collectionConfig.slug,
+            depth: 0,
+            limit: 200,
+            overrideAccess: true,
+            where: {
+                [fieldNames.group]: {
+                    equals: group
+                }
+            }
+        });
+        translationsByLanguage = docs.reduce((acc, doc)=>{
+            const data = asDocument(doc);
+            const language = getStringValue(data[fieldNames.language]);
+            const id = getID(data.id);
+            if (language && id) {
+                acc[language] = id;
+            }
+            return acc;
+        }, {});
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: "payload-multilang-column-stack",
+        title: currentLanguage ? undefined : storedLanguage ? `Unassigned; stored language "${storedLanguage}" is not configured` : 'Unassigned',
+        children: languages.map((language)=>/*#__PURE__*/ _jsx(TranslationColumnCellClient, {
+                collectionSlug: collectionConfig.slug,
+                current: currentLanguage === language.code,
+                flagLabel: language.flagLabel,
+                sourceID: sourceID,
+                targetLanguage: language.code,
+                targetLanguageName: language.name,
+                translationID: translationsByLanguage[language.code]
+            }, language.code))
+    });
+};
+
+//# sourceMappingURL=TranslationColumnCell.js.map

package/dist/components/TranslationColumnCell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TranslationColumnCell.tsx"],"sourcesContent":["import type { CollectionSlug, DefaultServerCellComponentProps } from 'payload'\n\nimport { DEFAULT_FIELD_NAMES } from '../constants.js'\nimport { asDocument, getID, getStringValue } from '../lib/data.js'\nimport type { MultilangFieldNames, MultilangLanguage } from '../types.js'\nimport { getPayloadMultilangCustom } from './config.js'\nimport { TranslationColumnCellClient } from './TranslationColumnCellClient.js'\n\nconst getCollectionConfig = (props: DefaultServerCellComponentProps) =>\n  props.collectionConfig || props.payload.collections[props.collectionSlug]?.config\n\nconst getFieldNames = (\n  props: DefaultServerCellComponentProps,\n): MultilangFieldNames => ({\n  ...DEFAULT_FIELD_NAMES,\n  ...(getPayloadMultilangCustom(getCollectionConfig(props)?.admin?.custom)\n    .fieldNames || {}),\n})\n\nconst getLanguages = (\n  props: DefaultServerCellComponentProps,\n): MultilangLanguage[] => {\n  const languages = getPayloadMultilangCustom(\n    getCollectionConfig(props)?.admin?.custom,\n  ).languages\n\n  return Array.isArray(languages) ? languages : []\n}\n\nexport const TranslationColumnCell = async (\n  props: DefaultServerCellComponentProps,\n) => {\n  const fieldNames = getFieldNames(props)\n  const languages = getLanguages(props)\n  const collectionConfig = getCollectionConfig(props)\n  const rowData = asDocument(props.rowData)\n  const sourceID = getID(rowData.id)\n  const configuredLanguageCodes = new Set(languages.map((language) => language.code))\n\n  if (!collectionConfig || !languages.length || !sourceID) {\n    return (\n      <span className=\"payload-multilang-cell payload-multilang-cell--muted\">\n        -\n      </span>\n    )\n  }\n\n  const storedLanguage = getStringValue(rowData[fieldNames.language])\n  const currentLanguage =\n    storedLanguage && configuredLanguageCodes.has(storedLanguage)\n      ? storedLanguage\n      : undefined\n  const group = getStringValue(rowData[fieldNames.group])\n  let translationsByLanguage: Record<string, number | string> = {}\n\n  if (group) {\n    const { docs } = await props.payload.find({\n      collection: collectionConfig.slug as CollectionSlug,\n      depth: 0,\n      limit: 200,\n      overrideAccess: true,\n      where: {\n        [fieldNames.group]: {\n          equals: group,\n        },\n      },\n    })\n\n    translationsByLanguage = docs.reduce<Record<string, number | string>>(\n      (acc, doc) => {\n        const data = asDocument(doc)\n        const language = getStringValue(data[fieldNames.language])\n        const id = getID(data.id)\n\n        if (language && id) {\n          acc[language] = id\n        }\n\n        return acc\n      },\n      {},\n    )\n  }\n\n  return (\n    <div\n      className=\"payload-multilang-column-stack\"\n      title={\n        currentLanguage\n          ? undefined\n          : storedLanguage\n            ? `Unassigned; stored language \"${storedLanguage}\" is not configured`\n            : 'Unassigned'\n      }\n    >\n      {languages.map((language) => (\n        <TranslationColumnCellClient\n          collectionSlug={collectionConfig.slug}\n          current={currentLanguage === language.code}\n          flagLabel={language.flagLabel}\n          key={language.code}\n          sourceID={sourceID}\n          targetLanguage={language.code}\n          targetLanguageName={language.name}\n          translationID={translationsByLanguage[language.code]}\n        />\n      ))}\n    </div>\n  )\n}\n"],"names":["DEFAULT_FIELD_NAMES","asDocument","getID","getStringValue","getPayloadMultilangCustom","TranslationColumnCellClient","getCollectionConfig","props","collectionConfig","payload","collections","collectionSlug","config","getFieldNames","admin","custom","fieldNames","getLanguages","languages","Array","isArray","TranslationColumnCell","rowData","sourceID","id","configuredLanguageCodes","Set","map","language","code","length","span","className","storedLanguage","currentLanguage","has","undefined","group","translationsByLanguage","docs","find","collection","slug","depth","limit","overrideAccess","where","equals","reduce","acc","doc","data","div","title","current","flagLabel","targetLanguage","targetLanguageName","name","translationID"],"mappings":";AAEA,SAASA,mBAAmB,QAAQ,kBAAiB;AACrD,SAASC,UAAU,EAAEC,KAAK,EAAEC,cAAc,QAAQ,iBAAgB;AAElE,SAASC,yBAAyB,QAAQ,cAAa;AACvD,SAASC,2BAA2B,QAAQ,mCAAkC;AAE9E,MAAMC,sBAAsB,CAACC,QAC3BA,MAAMC,gBAAgB,IAAID,MAAME,OAAO,CAACC,WAAW,CAACH,MAAMI,cAAc,CAAC,EAAEC;AAE7E,MAAMC,gBAAgB,CACpBN,QACyB,CAAA;QACzB,GAAGP,mBAAmB;QACtB,GAAII,0BAA0BE,oBAAoBC,QAAQO,OAAOC,QAC9DC,UAAU,IAAI,CAAC,CAAC;IACrB,CAAA;AAEA,MAAMC,eAAe,CACnBV;IAEA,MAAMW,YAAYd,0BAChBE,oBAAoBC,QAAQO,OAAOC,QACnCG,SAAS;IAEX,OAAOC,MAAMC,OAAO,CAACF,aAAaA,YAAY,EAAE;AAClD;AAEA,OAAO,MAAMG,wBAAwB,OACnCd;IAEA,MAAMS,aAAaH,cAAcN;IACjC,MAAMW,YAAYD,aAAaV;IAC/B,MAAMC,mBAAmBF,oBAAoBC;IAC7C,MAAMe,UAAUrB,WAAWM,MAAMe,OAAO;IACxC,MAAMC,WAAWrB,MAAMoB,QAAQE,EAAE;IACjC,MAAMC,0BAA0B,IAAIC,IAAIR,UAAUS,GAAG,CAAC,CAACC,WAAaA,SAASC,IAAI;IAEjF,IAAI,CAACrB,oBAAoB,CAACU,UAAUY,MAAM,IAAI,CAACP,UAAU;QACvD,qBACE,KAACQ;YAAKC,WAAU;sBAAuD;;IAI3E;IAEA,MAAMC,iBAAiB9B,eAAemB,OAAO,CAACN,WAAWY,QAAQ,CAAC;IAClE,MAAMM,kBACJD,kBAAkBR,wBAAwBU,GAAG,CAACF,kBAC1CA,iBACAG;IACN,MAAMC,QAAQlC,eAAemB,OAAO,CAACN,WAAWqB,KAAK,CAAC;IACtD,IAAIC,yBAA0D,CAAC;IAE/D,IAAID,OAAO;QACT,MAAM,EAAEE,IAAI,EAAE,GAAG,MAAMhC,MAAME,OAAO,CAAC+B,IAAI,CAAC;YACxCC,YAAYjC,iBAAiBkC,IAAI;YACjCC,OAAO;YACPC,OAAO;YACPC,gBAAgB;YAChBC,OAAO;gBACL,CAAC9B,WAAWqB,KAAK,CAAC,EAAE;oBAClBU,QAAQV;gBACV;YACF;QACF;QAEAC,yBAAyBC,KAAKS,MAAM,CAClC,CAACC,KAAKC;YACJ,MAAMC,OAAOlD,WAAWiD;YACxB,MAAMtB,WAAWzB,eAAegD,IAAI,CAACnC,WAAWY,QAAQ,CAAC;YACzD,MAAMJ,KAAKtB,MAAMiD,KAAK3B,EAAE;YAExB,IAAII,YAAYJ,IAAI;gBAClByB,GAAG,CAACrB,SAAS,GAAGJ;YAClB;YAEA,OAAOyB;QACT,GACA,CAAC;IAEL;IAEA,qBACE,KAACG;QACCpB,WAAU;QACVqB,OACEnB,kBACIE,YACAH,iBACE,CAAC,6BAA6B,EAAEA,eAAe,mBAAmB,CAAC,GACnE;kBAGPf,UAAUS,GAAG,CAAC,CAACC,yBACd,KAACvB;gBACCM,gBAAgBH,iBAAiBkC,IAAI;gBACrCY,SAASpB,oBAAoBN,SAASC,IAAI;gBAC1C0B,WAAW3B,SAAS2B,SAAS;gBAE7BhC,UAAUA;gBACViC,gBAAgB5B,SAASC,IAAI;gBAC7B4B,oBAAoB7B,SAAS8B,IAAI;gBACjCC,eAAerB,sBAAsB,CAACV,SAASC,IAAI,CAAC;eAJ/CD,SAASC,IAAI;;AAS5B,EAAC"}

package/dist/components/TranslationColumnCellClient.d.ts

@@ -0,0 +1,12 @@
+import '../styles/admin.css';
+type Props = {
+    collectionSlug: string;
+    current?: boolean;
+    flagLabel?: string;
+    sourceID?: number | string;
+    targetLanguage: string;
+    targetLanguageName: string;
+    translationID?: number | string;
+};
+export declare const TranslationColumnCellClient: ({ collectionSlug, current, flagLabel, sourceID, targetLanguage, targetLanguageName, translationID, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TranslationColumnCellClient.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast, useConfig, useRouteTransition } from '@payloadcms/ui';
+import { useRouter } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import { useState } from 'react';
+import '../styles/admin.css';
+const PenIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
+        "aria-hidden": "true",
+        className: "payload-multilang-pen-icon",
+        fill: "none",
+        height: "16",
+        viewBox: "0 0 16 16",
+        width: "16",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M9.9 2.6 13.4 6 5.7 13.7 2.2 14.4 2.9 10.9 9.9 2.6Z",
+                stroke: "currentColor",
+                strokeLinejoin: "round",
+                strokeWidth: "1.4"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M8.8 3.9 12.1 7.2",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeWidth: "1.4"
+            })
+        ]
+    });
+export const TranslationColumnCellClient = ({ collectionSlug, current, flagLabel, sourceID, targetLanguage, targetLanguageName, translationID })=>{
+    const { config } = useConfig();
+    const router = useRouter();
+    const { isTransitioning, startRouteTransition } = useRouteTransition();
+    const [isBusy, setIsBusy] = useState(false);
+    const documentURL = (documentID)=>formatAdminURL({
+            adminRoute: config.routes.admin,
+            path: `/collections/${collectionSlug}/${documentID}`
+        });
+    const navigateToTranslation = (documentID)=>{
+        startRouteTransition(()=>{
+            router.push(documentURL(documentID));
+        });
+    };
+    const createTranslation = async ()=>{
+        if (!sourceID) {
+            toast.error('Save the document before creating translations.');
+            return;
+        }
+        setIsBusy(true);
+        const response = await fetch(formatAdminURL({
+            apiRoute: config.routes.api,
+            path: `/${collectionSlug}/multilang/create`
+        }), {
+            body: JSON.stringify({
+                sourceId: sourceID,
+                targetLanguage
+            }),
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: 'POST'
+        });
+        setIsBusy(false);
+        if (!response.ok) {
+            const result = await response.json().catch(()=>undefined);
+            toast.error(result?.message || 'Translation could not be created.');
+            return;
+        }
+        const result = await response.json();
+        if (result.doc?.id) {
+            navigateToTranslation(result.doc.id);
+        }
+    };
+    if (current) {
+        return /*#__PURE__*/ _jsx("span", {
+            className: "payload-multilang-flag-cell payload-multilang-flag-cell--current",
+            title: targetLanguageName,
+            children: flagLabel || targetLanguage.toUpperCase()
+        });
+    }
+    if (translationID) {
+        return /*#__PURE__*/ _jsx("a", {
+            className: "payload-multilang-cell-action",
+            href: documentURL(translationID),
+            onClick: (event)=>{
+                event.preventDefault();
+                navigateToTranslation(translationID);
+            },
+            "aria-label": `Edit ${targetLanguageName} translation`,
+            title: `Edit ${targetLanguageName} translation`,
+            children: /*#__PURE__*/ _jsx(PenIcon, {})
+        });
+    }
+    return /*#__PURE__*/ _jsx("button", {
+        "aria-label": `Create ${targetLanguageName} translation`,
+        className: "payload-multilang-icon-button",
+        disabled: !sourceID || isBusy || isTransitioning,
+        onClick: ()=>void createTranslation(),
+        title: `Create ${targetLanguageName} translation`,
+        type: "button",
+        children: "+"
+    });
+};
+
+//# sourceMappingURL=TranslationColumnCellClient.js.map

package/dist/components/TranslationColumnCellClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TranslationColumnCellClient.tsx"],"sourcesContent":["'use client'\n\nimport { toast, useConfig, useRouteTransition } from '@payloadcms/ui'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport { useState } from 'react'\n\nimport '../styles/admin.css'\n\ntype Props = {\n  collectionSlug: string\n  current?: boolean\n  flagLabel?: string\n  sourceID?: number | string\n  targetLanguage: string\n  targetLanguageName: string\n  translationID?: number | string\n}\n\nconst PenIcon = () => (\n  <svg\n    aria-hidden=\"true\"\n    className=\"payload-multilang-pen-icon\"\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M9.9 2.6 13.4 6 5.7 13.7 2.2 14.4 2.9 10.9 9.9 2.6Z\"\n      stroke=\"currentColor\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"1.4\"\n    />\n    <path\n      d=\"M8.8 3.9 12.1 7.2\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"1.4\"\n    />\n  </svg>\n)\n\nexport const TranslationColumnCellClient = ({\n  collectionSlug,\n  current,\n  flagLabel,\n  sourceID,\n  targetLanguage,\n  targetLanguageName,\n  translationID,\n}: Props) => {\n  const { config } = useConfig()\n  const router = useRouter()\n  const { isTransitioning, startRouteTransition } = useRouteTransition()\n  const [isBusy, setIsBusy] = useState(false)\n\n  const documentURL = (documentID: number | string) =>\n    formatAdminURL({\n      adminRoute: config.routes.admin,\n      path: `/collections/${collectionSlug}/${documentID}`,\n    })\n\n  const navigateToTranslation = (documentID: number | string) => {\n    startRouteTransition(() => {\n      router.push(documentURL(documentID))\n    })\n  }\n\n  const createTranslation = async () => {\n    if (!sourceID) {\n      toast.error('Save the document before creating translations.')\n      return\n    }\n\n    setIsBusy(true)\n\n    const response = await fetch(\n      formatAdminURL({\n        apiRoute: config.routes.api,\n        path: `/${collectionSlug}/multilang/create`,\n      }),\n      {\n        body: JSON.stringify({\n          sourceId: sourceID,\n          targetLanguage,\n        }),\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      },\n    )\n\n    setIsBusy(false)\n\n    if (!response.ok) {\n      const result = (await response.json().catch(() => undefined)) as\n        | { message?: string }\n        | undefined\n      toast.error(result?.message || 'Translation could not be created.')\n      return\n    }\n\n    const result = (await response.json()) as {\n      doc?: { id?: number | string }\n    }\n\n    if (result.doc?.id) {\n      navigateToTranslation(result.doc.id)\n    }\n  }\n\n  if (current) {\n    return (\n      <span\n        className=\"payload-multilang-flag-cell payload-multilang-flag-cell--current\"\n        title={targetLanguageName}\n      >\n        {flagLabel || targetLanguage.toUpperCase()}\n      </span>\n    )\n  }\n\n  if (translationID) {\n    return (\n      <a\n        className=\"payload-multilang-cell-action\"\n        href={documentURL(translationID)}\n        onClick={(event) => {\n          event.preventDefault()\n          navigateToTranslation(translationID)\n        }}\n        aria-label={`Edit ${targetLanguageName} translation`}\n        title={`Edit ${targetLanguageName} translation`}\n      >\n        <PenIcon />\n      </a>\n    )\n  }\n\n  return (\n    <button\n      aria-label={`Create ${targetLanguageName} translation`}\n      className=\"payload-multilang-icon-button\"\n      disabled={!sourceID || isBusy || isTransitioning}\n      onClick={() => void createTranslation()}\n      title={`Create ${targetLanguageName} translation`}\n      type=\"button\"\n    >\n      +\n    </button>\n  )\n}\n"],"names":["toast","useConfig","useRouteTransition","useRouter","formatAdminURL","useState","PenIcon","svg","aria-hidden","className","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinejoin","strokeWidth","strokeLinecap","TranslationColumnCellClient","collectionSlug","current","flagLabel","sourceID","targetLanguage","targetLanguageName","translationID","config","router","isTransitioning","startRouteTransition","isBusy","setIsBusy","documentURL","documentID","adminRoute","routes","admin","navigateToTranslation","push","createTranslation","error","response","fetch","apiRoute","api","body","JSON","stringify","sourceId","credentials","headers","method","ok","result","json","catch","undefined","message","doc","id","span","title","toUpperCase","a","href","onClick","event","preventDefault","aria-label","button","disabled","type"],"mappings":"AAAA;;AAEA,SAASA,KAAK,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,iBAAgB;AACrE,SAASC,SAAS,QAAQ,qBAAoB;AAC9C,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,SAASC,QAAQ,QAAQ,QAAO;AAEhC,OAAO,sBAAqB;AAY5B,MAAMC,UAAU,kBACd,MAACC;QACCC,eAAY;QACZC,WAAU;QACVC,MAAK;QACLC,QAAO;QACPC,SAAQ;QACRC,OAAM;QACNC,OAAM;;0BAEN,KAACC;gBACCC,GAAE;gBACFC,QAAO;gBACPC,gBAAe;gBACfC,aAAY;;0BAEd,KAACJ;gBACCC,GAAE;gBACFC,QAAO;gBACPG,eAAc;gBACdD,aAAY;;;;AAKlB,OAAO,MAAME,8BAA8B,CAAC,EAC1CC,cAAc,EACdC,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,cAAc,EACdC,kBAAkB,EAClBC,aAAa,EACP;IACN,MAAM,EAAEC,MAAM,EAAE,GAAG5B;IACnB,MAAM6B,SAAS3B;IACf,MAAM,EAAE4B,eAAe,EAAEC,oBAAoB,EAAE,GAAG9B;IAClD,MAAM,CAAC+B,QAAQC,UAAU,GAAG7B,SAAS;IAErC,MAAM8B,cAAc,CAACC,aACnBhC,eAAe;YACbiC,YAAYR,OAAOS,MAAM,CAACC,KAAK;YAC/BxB,MAAM,CAAC,aAAa,EAAEO,eAAe,CAAC,EAAEc,YAAY;QACtD;IAEF,MAAMI,wBAAwB,CAACJ;QAC7BJ,qBAAqB;YACnBF,OAAOW,IAAI,CAACN,YAAYC;QAC1B;IACF;IAEA,MAAMM,oBAAoB;QACxB,IAAI,CAACjB,UAAU;YACbzB,MAAM2C,KAAK,CAAC;YACZ;QACF;QAEAT,UAAU;QAEV,MAAMU,WAAW,MAAMC,MACrBzC,eAAe;YACb0C,UAAUjB,OAAOS,MAAM,CAACS,GAAG;YAC3BhC,MAAM,CAAC,CAAC,EAAEO,eAAe,iBAAiB,CAAC;QAC7C,IACA;YACE0B,MAAMC,KAAKC,SAAS,CAAC;gBACnBC,UAAU1B;gBACVC;YACF;YACA0B,aAAa;YACbC,SAAS;gBACP,gBAAgB;YAClB;YACAC,QAAQ;QACV;QAGFpB,UAAU;QAEV,IAAI,CAACU,SAASW,EAAE,EAAE;YAChB,MAAMC,SAAU,MAAMZ,SAASa,IAAI,GAAGC,KAAK,CAAC,IAAMC;YAGlD3D,MAAM2C,KAAK,CAACa,QAAQI,WAAW;YAC/B;QACF;QAEA,MAAMJ,SAAU,MAAMZ,SAASa,IAAI;QAInC,IAAID,OAAOK,GAAG,EAAEC,IAAI;YAClBtB,sBAAsBgB,OAAOK,GAAG,CAACC,EAAE;QACrC;IACF;IAEA,IAAIvC,SAAS;QACX,qBACE,KAACwC;YACCtD,WAAU;YACVuD,OAAOrC;sBAENH,aAAaE,eAAeuC,WAAW;;IAG9C;IAEA,IAAIrC,eAAe;QACjB,qBACE,KAACsC;YACCzD,WAAU;YACV0D,MAAMhC,YAAYP;YAClBwC,SAAS,CAACC;gBACRA,MAAMC,cAAc;gBACpB9B,sBAAsBZ;YACxB;YACA2C,cAAY,CAAC,KAAK,EAAE5C,mBAAmB,YAAY,CAAC;YACpDqC,OAAO,CAAC,KAAK,EAAErC,mBAAmB,YAAY,CAAC;sBAE/C,cAAA,KAACrB;;IAGP;IAEA,qBACE,KAACkE;QACCD,cAAY,CAAC,OAAO,EAAE5C,mBAAmB,YAAY,CAAC;QACtDlB,WAAU;QACVgE,UAAU,CAAChD,YAAYQ,UAAUF;QACjCqC,SAAS,IAAM,KAAK1B;QACpBsB,OAAO,CAAC,OAAO,EAAErC,mBAAmB,YAAY,CAAC;QACjD+C,MAAK;kBACN;;AAIL,EAAC"}

package/dist/components/TranslationsTab.d.ts

@@ -0,0 +1,2 @@
+import type { DocumentViewServerProps } from 'payload';
+export declare const TranslationsTab: (props: DocumentViewServerProps) => Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/TranslationsTab.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_FIELD_NAMES } from '../constants.js';
+import { asDocument, getDocumentTranslationsWithPayload, getID } from '../lib/data.js';
+import { getPayloadMultilangCustom } from './config.js';
+import { TranslationActionsClient } from './TranslationActionsClient.js';
+const getFieldNames = (props)=>{
+    const custom = props.initPageResult.collectionConfig?.admin?.custom;
+    return {
+        ...DEFAULT_FIELD_NAMES,
+        ...custom?.payloadMultilang?.fieldNames || {}
+    };
+};
+const getLanguages = (props)=>{
+    const languages = getPayloadMultilangCustom(props.initPageResult.collectionConfig?.admin?.custom).languages;
+    return Array.isArray(languages) ? languages : [];
+};
+export const TranslationsTab = async (props)=>{
+    const collectionSlug = props.initPageResult.collectionConfig?.slug;
+    const translationsSegmentIndex = props.routeSegments.lastIndexOf('translations');
+    const routeDocID = translationsSegmentIndex > 0 ? props.routeSegments[translationsSegmentIndex - 1] : undefined;
+    const docID = getID(asDocument(props.doc).id || routeDocID || props.id);
+    if (!collectionSlug || !docID) {
+        return /*#__PURE__*/ _jsxs("section", {
+            className: "payload-multilang-page",
+            children: [
+                /*#__PURE__*/ _jsx("h1", {
+                    children: "Translations"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    children: "Save the document before managing translations."
+                })
+            ]
+        });
+    }
+    const fieldNames = getFieldNames(props);
+    const languages = getLanguages(props);
+    const state = await getDocumentTranslationsWithPayload({
+        id: docID,
+        collection: collectionSlug,
+        fieldNames,
+        payload: props.payload
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "payload-multilang-page",
+        "data-testid": "multilang-translations-tab",
+        children: [
+            /*#__PURE__*/ _jsx("header", {
+                className: "payload-multilang-page__header",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h1", {
+                            children: "Translations"
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            children: "Create or connect separate localized documents."
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "payload-multilang-layout",
+                children: [
+                    /*#__PURE__*/ _jsxs("section", {
+                        className: "payload-multilang-panel payload-multilang-panel--wide",
+                        children: [
+                            /*#__PURE__*/ _jsx("h2", {
+                                children: "Linked documents"
+                            }),
+                            /*#__PURE__*/ _jsxs("table", {
+                                className: "payload-multilang-table",
+                                children: [
+                                    /*#__PURE__*/ _jsx("thead", {
+                                        children: /*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Language"
+                                                }),
+                                                /*#__PURE__*/ _jsx("th", {
+                                                    children: "Document ID"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("tbody", {
+                                        children: languages.map((language)=>{
+                                            const translation = state.translations[language.code];
+                                            return /*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("td", {
+                                                        children: [
+                                                            language.flagLabel ? `${language.flagLabel} ` : '',
+                                                            language.name
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        children: translation?.id ? String(translation.id) : 'Missing'
+                                                    })
+                                                ]
+                                            }, language.code);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(TranslationActionsClient, {
+                        collectionSlug: collectionSlug,
+                        docID: docID,
+                        languages: languages,
+                        state: state
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=TranslationsTab.js.map

package/dist/components/TranslationsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TranslationsTab.tsx"],"sourcesContent":["import type { DocumentViewServerProps } from 'payload'\n\nimport type { MultilangFieldNames, MultilangLanguage } from '../types.js'\n\nimport { DEFAULT_FIELD_NAMES } from '../constants.js'\nimport {\n  asDocument,\n  getDocumentTranslationsWithPayload,\n  getID,\n} from '../lib/data.js'\nimport { getPayloadMultilangCustom } from './config.js'\nimport { TranslationActionsClient } from './TranslationActionsClient.js'\n\nconst getFieldNames = (\n  props: DocumentViewServerProps,\n): MultilangFieldNames => {\n  const custom = props.initPageResult.collectionConfig?.admin?.custom as\n    | { payloadMultilang?: { fieldNames?: Partial<MultilangFieldNames> } }\n    | undefined\n\n  return {\n    ...DEFAULT_FIELD_NAMES,\n    ...(custom?.payloadMultilang?.fieldNames || {}),\n  }\n}\n\nconst getLanguages = (props: DocumentViewServerProps): MultilangLanguage[] => {\n  const languages = getPayloadMultilangCustom(\n    props.initPageResult.collectionConfig?.admin?.custom,\n  ).languages\n\n  return Array.isArray(languages) ? languages : []\n}\n\nexport const TranslationsTab = async (props: DocumentViewServerProps) => {\n  const collectionSlug = props.initPageResult.collectionConfig?.slug\n  const translationsSegmentIndex = props.routeSegments.lastIndexOf('translations')\n  const routeDocID =\n    translationsSegmentIndex > 0 ? props.routeSegments[translationsSegmentIndex - 1] : undefined\n  const docID = getID(asDocument(props.doc).id || routeDocID || props.id)\n\n  if (!collectionSlug || !docID) {\n    return (\n      <section className=\"payload-multilang-page\">\n        <h1>Translations</h1>\n        <p>Save the document before managing translations.</p>\n      </section>\n    )\n  }\n\n  const fieldNames = getFieldNames(props)\n  const languages = getLanguages(props)\n  const state = await getDocumentTranslationsWithPayload({\n    id: docID,\n    collection: collectionSlug,\n    fieldNames,\n    payload: props.payload,\n  })\n\n  return (\n    <div className=\"payload-multilang-page\" data-testid=\"multilang-translations-tab\">\n      <header className=\"payload-multilang-page__header\">\n        <div>\n          <h1>Translations</h1>\n          <p>Create or connect separate localized documents.</p>\n        </div>\n      </header>\n\n      <div className=\"payload-multilang-layout\">\n        <section className=\"payload-multilang-panel payload-multilang-panel--wide\">\n          <h2>Linked documents</h2>\n          <table className=\"payload-multilang-table\">\n            <thead>\n              <tr>\n                <th>Language</th>\n                <th>Document ID</th>\n              </tr>\n            </thead>\n            <tbody>\n              {languages.map((language) => {\n                const translation = state.translations[language.code]\n                return (\n                  <tr key={language.code}>\n                    <td>\n                      {language.flagLabel ? `${language.flagLabel} ` : ''}\n                      {language.name}\n                    </td>\n                    <td>{translation?.id ? String(translation.id) : 'Missing'}</td>\n                  </tr>\n                )\n              })}\n            </tbody>\n          </table>\n        </section>\n\n        <TranslationActionsClient\n          collectionSlug={collectionSlug}\n          docID={docID}\n          languages={languages}\n          state={state}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["DEFAULT_FIELD_NAMES","asDocument","getDocumentTranslationsWithPayload","getID","getPayloadMultilangCustom","TranslationActionsClient","getFieldNames","props","custom","initPageResult","collectionConfig","admin","payloadMultilang","fieldNames","getLanguages","languages","Array","isArray","TranslationsTab","collectionSlug","slug","translationsSegmentIndex","routeSegments","lastIndexOf","routeDocID","undefined","docID","doc","id","section","className","h1","p","state","collection","payload","div","data-testid","header","h2","table","thead","tr","th","tbody","map","language","translation","translations","code","td","flagLabel","name","String"],"mappings":";AAIA,SAASA,mBAAmB,QAAQ,kBAAiB;AACrD,SACEC,UAAU,EACVC,kCAAkC,EAClCC,KAAK,QACA,iBAAgB;AACvB,SAASC,yBAAyB,QAAQ,cAAa;AACvD,SAASC,wBAAwB,QAAQ,gCAA+B;AAExE,MAAMC,gBAAgB,CACpBC;IAEA,MAAMC,SAASD,MAAME,cAAc,CAACC,gBAAgB,EAAEC,OAAOH;IAI7D,OAAO;QACL,GAAGR,mBAAmB;QACtB,GAAIQ,QAAQI,kBAAkBC,cAAc,CAAC,CAAC;IAChD;AACF;AAEA,MAAMC,eAAe,CAACP;IACpB,MAAMQ,YAAYX,0BAChBG,MAAME,cAAc,CAACC,gBAAgB,EAAEC,OAAOH,QAC9CO,SAAS;IAEX,OAAOC,MAAMC,OAAO,CAACF,aAAaA,YAAY,EAAE;AAClD;AAEA,OAAO,MAAMG,kBAAkB,OAAOX;IACpC,MAAMY,iBAAiBZ,MAAME,cAAc,CAACC,gBAAgB,EAAEU;IAC9D,MAAMC,2BAA2Bd,MAAMe,aAAa,CAACC,WAAW,CAAC;IACjE,MAAMC,aACJH,2BAA2B,IAAId,MAAMe,aAAa,CAACD,2BAA2B,EAAE,GAAGI;IACrF,MAAMC,QAAQvB,MAAMF,WAAWM,MAAMoB,GAAG,EAAEC,EAAE,IAAIJ,cAAcjB,MAAMqB,EAAE;IAEtE,IAAI,CAACT,kBAAkB,CAACO,OAAO;QAC7B,qBACE,MAACG;YAAQC,WAAU;;8BACjB,KAACC;8BAAG;;8BACJ,KAACC;8BAAE;;;;IAGT;IAEA,MAAMnB,aAAaP,cAAcC;IACjC,MAAMQ,YAAYD,aAAaP;IAC/B,MAAM0B,QAAQ,MAAM/B,mCAAmC;QACrD0B,IAAIF;QACJQ,YAAYf;QACZN;QACAsB,SAAS5B,MAAM4B,OAAO;IACxB;IAEA,qBACE,MAACC;QAAIN,WAAU;QAAyBO,eAAY;;0BAClD,KAACC;gBAAOR,WAAU;0BAChB,cAAA,MAACM;;sCACC,KAACL;sCAAG;;sCACJ,KAACC;sCAAE;;;;;0BAIP,MAACI;gBAAIN,WAAU;;kCACb,MAACD;wBAAQC,WAAU;;0CACjB,KAACS;0CAAG;;0CACJ,MAACC;gCAAMV,WAAU;;kDACf,KAACW;kDACC,cAAA,MAACC;;8DACC,KAACC;8DAAG;;8DACJ,KAACA;8DAAG;;;;;kDAGR,KAACC;kDACE7B,UAAU8B,GAAG,CAAC,CAACC;4CACd,MAAMC,cAAcd,MAAMe,YAAY,CAACF,SAASG,IAAI,CAAC;4CACrD,qBACE,MAACP;;kEACC,MAACQ;;4DACEJ,SAASK,SAAS,GAAG,GAAGL,SAASK,SAAS,CAAC,CAAC,CAAC,GAAG;4DAChDL,SAASM,IAAI;;;kEAEhB,KAACF;kEAAIH,aAAanB,KAAKyB,OAAON,YAAYnB,EAAE,IAAI;;;+CALzCkB,SAASG,IAAI;wCAQ1B;;;;;;kCAKN,KAAC5C;wBACCc,gBAAgBA;wBAChBO,OAAOA;wBACPX,WAAWA;wBACXkB,OAAOA;;;;;;AAKjB,EAAC"}

package/dist/components/config.d.ts

@@ -0,0 +1,40 @@
+import type { MultilangFieldNames, MultilangLanguage } from '../types.js';
+type ConfigLike = {
+    admin?: {
+        custom?: unknown;
+    };
+    collections?: {
+        admin?: {
+            custom?: unknown;
+        };
+        slug: string;
+    }[];
+    globals?: {
+        admin?: {
+            custom?: unknown;
+        };
+        slug: string;
+    }[];
+};
+type PayloadMultilangCustom = {
+    defaultLanguage?: MultilangLanguage;
+    fieldNames?: Partial<MultilangFieldNames>;
+    languageCode?: string;
+    languages?: MultilangLanguage[];
+};
+export declare const getPayloadMultilangCustom: (custom: unknown) => PayloadMultilangCustom;
+export declare const getConfiguredLanguagesFromConfig: (config: ConfigLike) => MultilangLanguage[];
+export declare const getDefaultLanguageFromConfig: (config: ConfigLike) => MultilangLanguage | undefined;
+export declare const getCollectionMultilangCustom: ({ collectionSlug, config, }: {
+    collectionSlug?: string;
+    config: ConfigLike;
+}) => PayloadMultilangCustom;
+export declare const getCollectionFieldNames: ({ collectionSlug, config, }: {
+    collectionSlug?: string;
+    config: ConfigLike;
+}) => MultilangFieldNames;
+export declare const getGlobalMultilangCustom: ({ config, globalSlug, }: {
+    config: ConfigLike;
+    globalSlug?: string;
+}) => PayloadMultilangCustom;
+export {};

package/dist/components/config.js

@@ -0,0 +1,31 @@
+import { DEFAULT_FIELD_NAMES } from '../constants.js';
+const asRecord = (value)=>value && typeof value === 'object' ? value : {};
+export const getPayloadMultilangCustom = (custom)=>{
+    const payloadMultilang = asRecord(asRecord(custom).payloadMultilang);
+    return payloadMultilang;
+};
+export const getConfiguredLanguagesFromConfig = (config)=>{
+    const custom = getPayloadMultilangCustom(config.admin?.custom);
+    return Array.isArray(custom.languages) ? custom.languages : [];
+};
+export const getDefaultLanguageFromConfig = (config)=>{
+    const custom = getPayloadMultilangCustom(config.admin?.custom);
+    return custom.defaultLanguage || getConfiguredLanguagesFromConfig(config)[0];
+};
+export const getCollectionMultilangCustom = ({ collectionSlug, config })=>{
+    const collection = config.collections?.find((item)=>item.slug === collectionSlug);
+    return getPayloadMultilangCustom(collection?.admin?.custom);
+};
+export const getCollectionFieldNames = ({ collectionSlug, config })=>({
+        ...DEFAULT_FIELD_NAMES,
+        ...getCollectionMultilangCustom({
+            collectionSlug,
+            config
+        }).fieldNames || {}
+    });
+export const getGlobalMultilangCustom = ({ config, globalSlug })=>{
+    const global = config.globals?.find((item)=>item.slug === globalSlug);
+    return getPayloadMultilangCustom(global?.admin?.custom);
+};
+
+//# sourceMappingURL=config.js.map

package/dist/components/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/config.ts"],"sourcesContent":["import type { MultilangFieldNames, MultilangLanguage } from '../types.js'\n\nimport { DEFAULT_FIELD_NAMES } from '../constants.js'\n\ntype ConfigLike = {\n  admin?: {\n    custom?: unknown\n  }\n  collections?: {\n    admin?: {\n      custom?: unknown\n    }\n    slug: string\n  }[]\n  globals?: {\n    admin?: {\n      custom?: unknown\n    }\n    slug: string\n  }[]\n}\n\ntype PayloadMultilangCustom = {\n  defaultLanguage?: MultilangLanguage\n  fieldNames?: Partial<MultilangFieldNames>\n  languageCode?: string\n  languages?: MultilangLanguage[]\n}\n\nconst asRecord = (value: unknown): Record<string, unknown> =>\n  value && typeof value === 'object' ? (value as Record<string, unknown>) : {}\n\nexport const getPayloadMultilangCustom = (\n  custom: unknown,\n): PayloadMultilangCustom => {\n  const payloadMultilang = asRecord(asRecord(custom).payloadMultilang)\n\n  return payloadMultilang as PayloadMultilangCustom\n}\n\nexport const getConfiguredLanguagesFromConfig = (\n  config: ConfigLike,\n): MultilangLanguage[] => {\n  const custom = getPayloadMultilangCustom(config.admin?.custom)\n\n  return Array.isArray(custom.languages) ? custom.languages : []\n}\n\nexport const getDefaultLanguageFromConfig = (\n  config: ConfigLike,\n): MultilangLanguage | undefined => {\n  const custom = getPayloadMultilangCustom(config.admin?.custom)\n\n  return custom.defaultLanguage || getConfiguredLanguagesFromConfig(config)[0]\n}\n\nexport const getCollectionMultilangCustom = ({\n  collectionSlug,\n  config,\n}: {\n  collectionSlug?: string\n  config: ConfigLike\n}): PayloadMultilangCustom => {\n  const collection = config.collections?.find((item) => item.slug === collectionSlug)\n\n  return getPayloadMultilangCustom(collection?.admin?.custom)\n}\n\nexport const getCollectionFieldNames = ({\n  collectionSlug,\n  config,\n}: {\n  collectionSlug?: string\n  config: ConfigLike\n}): MultilangFieldNames => ({\n  ...DEFAULT_FIELD_NAMES,\n  ...(getCollectionMultilangCustom({ collectionSlug, config }).fieldNames || {}),\n})\n\nexport const getGlobalMultilangCustom = ({\n  config,\n  globalSlug,\n}: {\n  config: ConfigLike\n  globalSlug?: string\n}): PayloadMultilangCustom => {\n  const global = config.globals?.find((item) => item.slug === globalSlug)\n\n  return getPayloadMultilangCustom(global?.admin?.custom)\n}\n"],"names":["DEFAULT_FIELD_NAMES","asRecord","value","getPayloadMultilangCustom","custom","payloadMultilang","getConfiguredLanguagesFromConfig","config","admin","Array","isArray","languages","getDefaultLanguageFromConfig","defaultLanguage","getCollectionMultilangCustom","collectionSlug","collection","collections","find","item","slug","getCollectionFieldNames","fieldNames","getGlobalMultilangCustom","globalSlug","global","globals"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,kBAAiB;AA2BrD,MAAMC,WAAW,CAACC,QAChBA,SAAS,OAAOA,UAAU,WAAYA,QAAoC,CAAC;AAE7E,OAAO,MAAMC,4BAA4B,CACvCC;IAEA,MAAMC,mBAAmBJ,SAASA,SAASG,QAAQC,gBAAgB;IAEnE,OAAOA;AACT,EAAC;AAED,OAAO,MAAMC,mCAAmC,CAC9CC;IAEA,MAAMH,SAASD,0BAA0BI,OAAOC,KAAK,EAAEJ;IAEvD,OAAOK,MAAMC,OAAO,CAACN,OAAOO,SAAS,IAAIP,OAAOO,SAAS,GAAG,EAAE;AAChE,EAAC;AAED,OAAO,MAAMC,+BAA+B,CAC1CL;IAEA,MAAMH,SAASD,0BAA0BI,OAAOC,KAAK,EAAEJ;IAEvD,OAAOA,OAAOS,eAAe,IAAIP,iCAAiCC,OAAO,CAAC,EAAE;AAC9E,EAAC;AAED,OAAO,MAAMO,+BAA+B,CAAC,EAC3CC,cAAc,EACdR,MAAM,EAIP;IACC,MAAMS,aAAaT,OAAOU,WAAW,EAAEC,KAAK,CAACC,OAASA,KAAKC,IAAI,KAAKL;IAEpE,OAAOZ,0BAA0Ba,YAAYR,OAAOJ;AACtD,EAAC;AAED,OAAO,MAAMiB,0BAA0B,CAAC,EACtCN,cAAc,EACdR,MAAM,EAIP,GAA2B,CAAA;QAC1B,GAAGP,mBAAmB;QACtB,GAAIc,6BAA6B;YAAEC;YAAgBR;QAAO,GAAGe,UAAU,IAAI,CAAC,CAAC;IAC/E,CAAA,EAAE;AAEF,OAAO,MAAMC,2BAA2B,CAAC,EACvChB,MAAM,EACNiB,UAAU,EAIX;IACC,MAAMC,SAASlB,OAAOmB,OAAO,EAAER,KAAK,CAACC,OAASA,KAAKC,IAAI,KAAKI;IAE5D,OAAOrB,0BAA0BsB,QAAQjB,OAAOJ;AAClD,EAAC"}

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+import type { MultilangFieldNames } from './types.js';
+export declare const DEFAULT_FIELD_NAMES: MultilangFieldNames;
+export declare const DEFAULT_GLOBAL_TABS_LABEL = "Localized content";
+export declare const DEFAULT_DUPLICATE_EXCLUDE_FIELDS: string[];
+export declare const MULTILANG_SKIP_HOOK = "payloadMultilangSkip";