@xleddyl/nuxt-cms 0.9.4 → 0.10.1

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

@@ -1,28 +1,40 @@
 import type { CmsEntry, CmsTab } from '#nuxt-cms';
+import type { FormErrors } from '@xleddyl/443-components-vue';
 import type { CmsSearchFocus } from '../../../shared/search.js';
+import type { CmsEntryForm } from '../../composables/cms-entry-form.js';
+import type { CmsResponseIssue } from '../../utils/ui.js';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
     entryName?: string;
-    drafts?: boolean;
-    loading?: boolean;
     formId?: string;
-    footer?: boolean;
     focus?: CmsSearchFocus | null;
     path?: string;
+    lock?: string | null;
+    locked?: string[];
+    form?: CmsEntryForm;
+    tab?: string;
+    tabQuery?: string;
 };
+declare function setIssues(issues: CmsResponseIssue[]): void;
+declare function revealErrors(errors: FormErrors): void;
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setIssues: typeof setIssues;
+    revealErrors: typeof revealErrors;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: () => any;
     submit: () => any;
     "update:modelValue": (value: Record<string, unknown>) => any;
+    "update:tab": (tab: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onError?: (() => any) | undefined;
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+    "onUpdate:tab"?: ((tab: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,71 +1,47 @@
 <template>
-   <KForm :id="formId" ref="formRef" :form="form" :focus-on-error="false" class="cms-form">
+   <component
+      :is="wrapper"
+      :id="external ? void 0 : formId"
+      v-bind="formBinding"
+      class="cms-form"
+   >
+      <KAlert v-if="lock" tone="neutral" :icon="cmsIcon('lock-closed')" :title="lock" />
       <component :is="tabbed ? KTabs : 'div'" v-bind="tabsBinding" class="cms-form-body">
          <template #[panelSlot]>
-            <div class="cms-form-main">
-               <component
-                  :is="section.title ? KAccordion : 'div'"
-                  v-for="section in sections"
-                  :key="section.id"
-                  v-bind="sectionBinding(section)"
-                  class="cms-form-section"
-               >
-                  <div class="cms-form-rows" :class="{ 'cms-form-section-body': section.title }">
-                     <div
-                        v-for="row in section.rows"
-                        :key="row.join('|')"
-                        class="cms-form-row"
-                        :style="{ '--cms-row-cols': row.length }"
+            <CmsFormSections ref="sectionsRef" :layout="layout" :shown="isShown">
+               <template #field="{ fieldKey: key }">
+                  <KFormField
+                     :name="key"
+                     :label="fields[key].label"
+                     :help="fields[key].description"
+                     :required="fields[key].required"
+                     :disabled="locked.includes(key) || void 0"
+                     :highlight="highlighted === key"
+                  >
+                     <template
+                        v-if="hasLocaleSwitch(fields[key]) && i18n.locales.length > 1"
+                        #label-actions
                      >
-                        <KFormField
-                           v-for="key in row"
-                           :key="key"
-                           :name="key"
-                           :label="fields[key].label"
-                           :description="fields[key].description"
-                           :icon="cmsIcon(fieldIcon(fields[key]))"
-                           :required="fields[key].required"
-                           :data-cms-field="key"
-                           :class="{ 'cms-search-focus': highlighted === key }"
-                        >
-                           <template
-                              v-if="hasLocaleSwitch(fields[key]) && i18n.locales.length > 1"
-                              #label-actions
-                           >
-                              <CmsLocaleSwitch
-                                 :model-value="localeFor(key)"
-                                 :value="
-  isTranslatableField(fields[key]) ? state[key] : null
-"
-                                 @update:model-value="(locale) => setLocale(key, locale)"
-                              />
-                           </template>
-                           <CmsFieldInput
-                              v-model="state[key]"
-                              :field="fields[key]"
-                              :locale="localeFor(key)"
-                              :slug-source="slugSource(fields[key])"
-                              :entry-name="entryName"
-                              :field-key="key"
-                           />
-                        </KFormField>
-                     </div>
-                  </div>
-               </component>
-            </div>
+                        <CmsLocaleSwitch
+                           :model-value="localeFor(key)"
+                           :progress="fieldProgress(key)"
+                           @update:model-value="(locale) => setLocale(key, locale)"
+                        />
+                     </template>
+                     <CmsFieldInput
+                        v-model="state[key]"
+                        :field="fields[key]"
+                        :locale="localeFor(key)"
+                        :slug-source="slugSource(fields[key])"
+                        :entry-name="entryName"
+                        :field-key="key"
+                     />
+                  </KFormField>
+               </template>
+            </CmsFormSections>
          </template>
       </component>
-      <KStack v-if="footer" direction="row" justify="end" gap="sm">
-         <KButton type="submit" label="Save" :loading="loading" />
-         <KButton
-            v-if="drafts"
-            type="submit"
-            :label="published ? 'Make draft' : 'Publish'"
-            :loading="loading"
-            @click="togglePublished"
-         />
-      </KStack>
-   </KForm>
+   </component>
 </template>
 
 <script setup>
@@ -73,51 +49,70 @@ import {
   fieldTab,
   hasTranslatableBlockFields,
   isFieldVisible,
+  isLocalizedLinkField,
   isTranslatableField,
   resolveFormLayout,
   slugSourceValue
 } from "#nuxt-cms";
 import {
-  Accordion as KAccordion,
-  Button as KButton,
+  Alert as KAlert,
   Form as KForm,
   FormField as KFormField,
-  Stack as KStack,
   Tabs as KTabs,
-  useForm
+  useFieldHighlight
 } from "@xleddyl/443-components-vue";
-import { computed, nextTick, onMounted, ref, watch } from "#imports";
-import cmsConfig from "#cms-config";
-import { buildEntrySchema, entryValidationWarnings } from "../../../shared/validation";
-import { useCmsFieldFocus } from "../../composables/cms-field-focus";
+import { computed, nextTick, onMounted, ref } from "#imports";
+import { translationProgress } from "../../../shared/translations";
+import { useCmsEntryForm } from "../../composables/cms-entry-form";
+import { useCmsPageQuery } from "../../composables/cms-route";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
-import { cmsIcon, fieldIcon } from "../../utils/ui";
+import { cmsIcon } from "../../utils/ui";
 const props = defineProps({
   fields: { type: Object, required: true },
   tabs: { type: Array, required: false },
   entryName: { type: String, required: false },
-  drafts: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
   formId: { type: String, required: false },
-  footer: { type: Boolean, required: false, default: true },
   focus: { type: [Object, null], required: false },
-  path: { type: String, required: false }
+  path: { type: String, required: false },
+  lock: { type: [String, null], required: false, default: null },
+  locked: { type: Array, required: false, default: () => [] },
+  form: { type: null, required: false, default: void 0 },
+  tab: { type: String, required: false, default: void 0 },
+  tabQuery: { type: String, required: false, default: void 0 }
 });
 const state = defineModel({ type: Object, ...{ required: true } });
-const emit = defineEmits(["submit", "error"]);
+const emit = defineEmits(["submit", "error", "update:tab"]);
+const external = !!props.form;
 const { i18n } = useCmsRuntime();
 const activeLocale = ref({});
 const tabList = computed(() => props.tabs ?? []);
-const activeTab = ref(tabList.value[0]?.id ?? "");
-watch(tabList, (tabs) => {
-  if (!tabs.some((tab) => tab.id === activeTab.value)) activeTab.value = tabs[0]?.id ?? "";
+const localTab = ref("");
+const routeTab = props.tabQuery ? useCmsPageQuery(props.tabQuery) : null;
+const ownTab = computed({
+  get: () => {
+    const tabs = tabList.value;
+    const wanted = routeTab ? routeTab.value : localTab.value;
+    return tabs.some((tab) => tab.id === wanted) ? wanted : tabs[0]?.id ?? "";
+  },
+  set: (value) => {
+    if (!routeTab) localTab.value = value;
+    else routeTab.value = value === tabList.value[0]?.id ? "" : value;
+  }
+});
+const activeTab = computed({
+  get: () => props.tab !== void 0 ? props.tab : ownTab.value,
+  set: (value) => {
+    if (props.tab !== void 0) emit("update:tab", value);
+    else ownTab.value = value;
+  }
 });
-const tabbed = computed(() => tabList.value.length > 1);
+const tabbed = computed(() => props.tab === void 0 && tabList.value.length > 1);
 const panelSlot = computed(() => tabbed.value ? "panel" : "default");
 const tabsBinding = computed(
   () => tabbed.value ? {
     items: tabList.value.map((tab) => ({ value: tab.id, label: tab.label })),
+    label: "Entry fields",
     modelValue: activeTab.value,
     panelFocusable: false,
     "onUpdate:modelValue": (value) => {
@@ -131,42 +126,13 @@ const layout = computed(
 );
 function isShown(key) {
   const field = props.fields[key];
-  if (!field || !isFieldVisible(field, state.value)) return false;
+  if (!field || !isFieldVisible(field, state.value, props.fields)) return false;
   if (!tabList.value.length) return true;
   return fieldTab(field, tabList.value) === activeTab.value;
 }
-const sections = computed(
-  () => layout.value.main.map((section, index) => ({
-    ...section,
-    id: `${index}-${section.title ?? ""}`,
-    rows: section.rows.map((row) => row.filter((key) => isShown(key))).filter((row) => row.length)
-  })).filter((section) => section.rows.length)
-);
-const toggled = ref({});
-function isCollapsed(section) {
-  if (!section.title) return false;
-  return toggled.value[section.id] ?? !!section.collapsed;
-}
-function toggleSection(id) {
-  const section = sections.value.find((s) => s.id === id);
-  if (section) toggled.value = { ...toggled.value, [id]: !isCollapsed(section) };
-}
-function sectionBinding(section) {
-  if (!section.title) return {};
-  return {
-    items: [{ value: section.id, title: section.title, description: section.description }],
-    variant: "outline",
-    contentVariant: "neutral",
-    modelValue: isCollapsed(section) ? null : section.id,
-    "onUpdate:modelValue": () => toggleSection(section.id)
-  };
-}
+const sectionsRef = ref(null);
 function revealField(key) {
-  for (const section of sections.value) {
-    if (section.rows.some((row) => row.includes(key)) && isCollapsed(section)) {
-      toggled.value = { ...toggled.value, [section.id]: false };
-    }
-  }
+  sectionsRef.value?.reveal(key);
 }
 function firstErrorKey(errors) {
   const keys = Object.keys(errors).filter((key) => errors[key]);
@@ -186,7 +152,10 @@ function slugSource(field) {
   return slugSourceValue(props.fields[field.from], state.value[field.from], i18n.defaultLocale);
 }
 function hasLocaleSwitch(field) {
-  return isTranslatableField(field) || hasTranslatableBlockFields(field);
+  return isTranslatableField(field) || isLocalizedLinkField(field) || hasTranslatableBlockFields(field);
+}
+function fieldProgress(key) {
+  return translationProgress(props.fields, state.value, i18n, [key]);
 }
 function localeFor(key) {
   return activeLocale.value[key] ?? i18n.defaultLocale;
@@ -194,41 +163,20 @@ function localeFor(key) {
 function setLocale(key, locale) {
   activeLocale.value = { ...activeLocale.value, [key]: locale };
 }
-const validate = computed(
-  () => props.entryName ? cmsConfig[props.entryName]?.validate : void 0
-);
-const schema = computed(
-  () => buildEntrySchema(
-    { fields: props.fields, drafts: props.drafts, validate: validate.value, path: props.path },
-    i18n
-  )
-);
-function warnings(values) {
-  return entryValidationWarnings(
-    { fields: props.fields, validate: validate.value },
-    values,
-    i18n,
-    props.path
-  );
-}
-const form = useForm({
-  values: state,
-  validator: schema,
-  warnings,
+const form = props.form ?? useCmsEntryForm({
+  state,
+  fields: () => props.fields,
+  entryName: () => props.entryName,
+  path: () => props.path,
   onSubmit: () => emit("submit"),
-  onInvalid: (errors) => onError(firstErrorKey(errors))
-});
-const published = computed({
-  get: () => state.value.status === "published",
-  set: (value) => {
-    state.value.status = value ? "published" : "draft";
-  }
+  onInvalid: (errors) => onError(firstErrorKey(errors)),
+  guard: false
 });
-function togglePublished() {
-  published.value = !published.value;
-}
-const formRef = ref(null);
-const { highlighted, reveal } = useCmsFieldFocus();
+const wrapper = external ? "div" : KForm;
+const formBinding = computed(
+  () => external ? {} : { form, focusOnError: false, disabled: props.lock ? true : void 0 }
+);
+const { highlighted, highlight } = useFieldHighlight();
 function applyFocus(focus) {
   if (focus.tab && tabList.value.some((tab2) => tab2.id === focus.tab)) activeTab.value = focus.tab;
   const key = focus.field;
@@ -241,10 +189,21 @@ function applyFocus(focus) {
   }
   void nextTick(() => {
     revealField(key);
-    reveal(() => formRef.value?.$el, key);
+    highlight(key);
   });
 }
 onMounted(() => {
   if (props.focus) applyFocus(props.focus);
 });
+function setIssues(issues) {
+  const fieldIssues = issues.filter((issue) => issue.path.length);
+  if (!fieldIssues.length) return;
+  form.setIssues(fieldIssues);
+  onError(String(fieldIssues[0].path[0]));
+}
+function revealErrors(errors) {
+  const key = firstErrorKey(errors);
+  if (key) void nextTick(() => revealField(key));
+}
+defineExpose({ setIssues, revealErrors });
 </script>

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

@@ -1,28 +1,40 @@
 import type { CmsEntry, CmsTab } from '#nuxt-cms';
+import type { FormErrors } from '@xleddyl/443-components-vue';
 import type { CmsSearchFocus } from '../../../shared/search.js';
+import type { CmsEntryForm } from '../../composables/cms-entry-form.js';
+import type { CmsResponseIssue } from '../../utils/ui.js';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
     entryName?: string;
-    drafts?: boolean;
-    loading?: boolean;
     formId?: string;
-    footer?: boolean;
     focus?: CmsSearchFocus | null;
     path?: string;
+    lock?: string | null;
+    locked?: string[];
+    form?: CmsEntryForm;
+    tab?: string;
+    tabQuery?: string;
 };
+declare function setIssues(issues: CmsResponseIssue[]): void;
+declare function revealErrors(errors: FormErrors): void;
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setIssues: typeof setIssues;
+    revealErrors: typeof revealErrors;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: () => any;
     submit: () => any;
     "update:modelValue": (value: Record<string, unknown>) => any;
+    "update:tab": (tab: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onError?: (() => any) | undefined;
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+    "onUpdate:tab"?: ((tab: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -57,6 +57,8 @@
       v-else-if="field.type === 'number'"
       v-model="num"
       align="start"
+      :min="field.min"
+      :max="field.max"
       :placeholder="field.placeholder"
    />
    <KDateInput v-else-if="field.type === 'date'" v-model="plainText" />
@@ -68,15 +70,21 @@
    <CmsRelationField
       v-else-if="field.type === 'relation'"
       v-model="relationValue"
-      :to="field.to"
+      :to="relationTarget(field)"
       :required="field.required"
       :multiple="field.cardinality === 'many-to-many'"
    />
+   <CmsLinkField
+      v-else-if="field.type === 'link'"
+      v-model="model"
+      :field="field"
+      :locale="locale"
+   />
    <CmsMediaField v-else v-model="strOrNull" :media-type="field.mediaType" :accept="field.accept" />
 </template>
 
 <script setup>
-import { isTranslatableField, selectOptions } from "#nuxt-cms";
+import { isTranslatableField, relationTarget, selectOptions } from "#nuxt-cms";
 import {
   Combobox as KCombobox,
   DateInput as KDateInput,

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

@@ -0,0 +1,22 @@
+import type { CmsFormLayout } from '#nuxt-cms';
+type __VLS_Props = {
+    layout: CmsFormLayout;
+    shown?: (key: string) => boolean;
+};
+type __VLS_Slots = {
+    field(props: {
+        fieldKey: string;
+    }): unknown;
+};
+declare function reveal(key: string): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    reveal: typeof reveal;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,71 @@
+<template>
+   <KStack gap="lg">
+      <component
+         :is="section.title ? KAccordion : 'div'"
+         v-for="section in sections"
+         :key="section.id"
+         v-bind="sectionBinding(section)"
+      >
+         <KStack gap="lg">
+            <KGrid
+               v-for="row in section.rows"
+               :key="row.join('|')"
+               :columns="{ base: 1, sm: row.length }"
+            >
+               <template v-for="key in row" :key="key">
+                  <slot name="field" :field-key="key" />
+               </template>
+            </KGrid>
+         </KStack>
+      </component>
+   </KStack>
+</template>
+
+<script setup>
+import {
+  Accordion as KAccordion,
+  Grid as KGrid,
+  Stack as KStack
+} from "@xleddyl/443-components-vue";
+import { computed, ref } from "#imports";
+const props = defineProps({
+  layout: { type: Object, required: true },
+  shown: { type: Function, required: false, default: () => true }
+});
+defineSlots();
+const sections = computed(
+  () => props.layout.main.map((section, index) => ({
+    ...section,
+    id: `${index}-${section.title ?? ""}`,
+    rows: section.rows.map((row) => row.filter((key) => props.shown(key))).filter((row) => row.length)
+  })).filter((section) => section.rows.length)
+);
+const toggled = ref({});
+function isCollapsed(section) {
+  if (!section.title) return false;
+  return toggled.value[section.id] ?? !!section.collapsed;
+}
+function toggleSection(id) {
+  const section = sections.value.find((s) => s.id === id);
+  if (section) toggled.value = { ...toggled.value, [id]: !isCollapsed(section) };
+}
+function sectionBinding(section) {
+  if (!section.title) return {};
+  return {
+    items: [{ value: section.id, title: section.title, description: section.description }],
+    variant: "outline",
+    contentVariant: "neutral",
+    divided: true,
+    modelValue: isCollapsed(section) ? null : section.id,
+    "onUpdate:modelValue": () => toggleSection(section.id)
+  };
+}
+function reveal(key) {
+  for (const section of sections.value) {
+    if (section.rows.some((row) => row.includes(key)) && isCollapsed(section)) {
+      toggled.value = { ...toggled.value, [section.id]: false };
+    }
+  }
+}
+defineExpose({ reveal });
+</script>

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

@@ -0,0 +1,22 @@
+import type { CmsFormLayout } from '#nuxt-cms';
+type __VLS_Props = {
+    layout: CmsFormLayout;
+    shown?: (key: string) => boolean;
+};
+type __VLS_Slots = {
+    field(props: {
+        fieldKey: string;
+    }): unknown;
+};
+declare function reveal(key: string): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    reveal: typeof reveal;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};