@xleddyl/nuxt-cms 0.4.4 → 0.5.1

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

@@ -1,33 +1,32 @@
 <template>
-   <span
-      v-if="cmsBrand.logo.kind === 'svg'"
-      class="cms-brand-logo"
-      :class="{ 'is-lg': size === 'lg' }"
-      aria-hidden="true"
-      v-html="cmsBrand.logo.markup"
-   />
-   <img
-      v-else-if="cmsBrand.logo.kind === 'image'"
-      class="cms-brand-logo"
-      :class="{ 'is-lg': size === 'lg' }"
-      :src="cmsBrand.logo.src"
-      :alt="cmsBrand.title"
-   />
-   <span v-else class="cms-brand-mark" :class="{ 'is-lg': size === 'lg' }" aria-hidden="true">
-      <svg viewBox="0 0 16 16" fill="none">
-         <path
-            d="M4.5 5.5h7M4.5 8h7M4.5 10.5h4"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-         />
-      </svg>
-   </span>
+   <KBrand
+      :name="cmsBrand.title"
+      :subtitle="subtitle"
+      :size="size"
+      :logo="logo"
+      :hide-text="hideText"
+      show-name
+   >
+      <template #mark>
+         <svg class="cms-brand-glyph" viewBox="0 0 16 16" fill="none">
+            <path
+               d="M4.5 5.5h7M4.5 8h7M4.5 10.5h4"
+               stroke="currentColor"
+               stroke-width="1.5"
+               stroke-linecap="round"
+            />
+         </svg>
+      </template>
+   </KBrand>
 </template>
 
 <script setup>
+import { Brand as KBrand } from "@xleddyl/443-components-vue";
 import { cmsBrand } from "#cms-brand";
 defineProps({
-  size: { type: String, required: false }
+  size: { type: String, required: false, default: "md" },
+  subtitle: { type: String, required: false },
+  hideText: { type: Boolean, required: false }
 });
+const logo = cmsBrand.logo.kind === "svg" ? cmsBrand.logo.markup : cmsBrand.logo.kind === "image" ? cmsBrand.logo.src : void 0;
 </script>

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

@@ -1,5 +1,7 @@
 type __VLS_Props = {
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
+    subtitle?: string;
+    hideText?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/cms/{Checkbox.d.vue.ts → ConfirmGroups.d.vue.ts}

@@ -1,11 +1,11 @@
+import type { CmsConfirmGroup } from '../../composables/cms-confirm.js';
 type __VLS_Props = {
-    checked?: boolean;
-    indeterminate?: boolean;
+    groups: CmsConfirmGroup[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,22 @@
+<template>
+   <div class="cms-confirm-groups">
+      <section v-for="group in groups" :key="group.title" class="cms-confirm-group">
+         <h3 class="cms-confirm-group-title" :title="group.title">{{ group.title }}</h3>
+         <ul class="cms-confirm-list">
+            <li v-for="link in group.links" :key="link.to + link.meta">
+               <NuxtLink :to="link.to" class="cms-confirm-link" @click="emit('close')">
+                  <span class="cms-confirm-link-title">{{ link.title }}</span>
+                  <span class="cms-confirm-link-meta">{{ link.meta }}</span>
+               </NuxtLink>
+            </li>
+         </ul>
+      </section>
+   </div>
+</template>
+
+<script setup>
+defineProps({
+  groups: { type: Array, required: true }
+});
+const emit = defineEmits(["close"]);
+</script>

package/dist/runtime/app/components/cms/{Checkbox.vue.d.ts → ConfirmGroups.vue.d.ts}

@@ -1,11 +1,11 @@
+import type { CmsConfirmGroup } from '../../composables/cms-confirm.js';
 type __VLS_Props = {
-    checked?: boolean;
-    indeterminate?: boolean;
+    groups: CmsConfirmGroup[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -10,15 +10,15 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
     saved: () => any;
     deleted: () => any;
     duplicate: (values: Record<string, unknown>) => any;
-    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onSaved?: (() => any) | undefined;
     onDeleted?: (() => any) | undefined;
     onDuplicate?: ((values: Record<string, unknown>) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,10 +1,17 @@
 <template>
-   <CmsDrawer v-model:open="open" :title="title" @close="requestClose">
-      <template v-if="drafts && !loading" #badge>
-         <CmsStatusBadge :published="published" />
+   <KDrawer v-model:open="open" :title="title" size="lg" :before-close="confirmClose">
+      <template v-if="drafts && !loading" #title-trailing>
+         <KBadge
+            dot
+            :tone="published ? 'success' : 'neutral'"
+            :variant="published ? 'soft' : 'outline'"
+            :label="published ? 'Published' : 'Draft'"
+         />
       </template>
 
-      <CmsSpinner v-if="loading" />
+      <KStack v-if="loading" align="center" justify="center" class="cms-drawer-loading">
+         <KSpinner size="lg" label="Loading" />
+      </KStack>
 
       <CmsEntryForm
          v-else
@@ -21,57 +28,66 @@
       />
 
       <template #footer>
-         <div v-if="!isNew" class="cms-actions">
-            <CmsButton
-               label="Delete"
-               icon="trash"
-               variant="ghost"
-               color="error"
-               :disabled="saving || loading"
-               @click="remove"
-            />
-            <CmsButton
-               label="Duplicate"
-               icon="document-duplicate"
-               variant="ghost"
-               color="neutral"
-               :disabled="saving || loading"
-               @click="duplicate"
-            />
-         </div>
-         <span v-else />
-         <div class="cms-actions">
-            <CmsButton
-               v-if="drafts"
-               type="submit"
-               :form="FORM_ID"
-               :label="published ? 'Make draft' : 'Publish'"
-               variant="soft"
-               :loading="saving"
-               :disabled="loading"
-               @click="togglePublished"
-            />
-            <CmsButton
-               type="submit"
-               :form="FORM_ID"
-               label="Save"
-               :loading="saving"
-               :disabled="loading"
-            />
-         </div>
+         <KStack direction="row" justify="between" gap="sm" wrap class="cms-drawer-actions">
+            <KStack v-if="!isNew" direction="row" gap="sm">
+               <KButton
+                  label="Delete"
+                  icon="trash"
+                  variant="ghost"
+                  tone="danger"
+                  :disabled="saving || loading"
+                  @click="remove"
+               />
+               <KButton
+                  label="Duplicate"
+                  :icon="cmsIcon('document-duplicate')"
+                  variant="ghost"
+                  tone="neutral"
+                  :disabled="saving || loading"
+                  @click="duplicate"
+               />
+            </KStack>
+            <span v-else />
+            <KStack direction="row" gap="sm">
+               <KButton
+                  v-if="drafts"
+                  type="submit"
+                  :form="FORM_ID"
+                  :label="published ? 'Make draft' : 'Publish'"
+                  variant="soft"
+                  :loading="saving"
+                  :disabled="loading"
+                  @click="togglePublished"
+               />
+               <KButton
+                  type="submit"
+                  :form="FORM_ID"
+                  label="Save"
+                  :loading="saving"
+                  :disabled="loading"
+               />
+            </KStack>
+         </KStack>
       </template>
-   </CmsDrawer>
+   </KDrawer>
 </template>
 
 <script setup>
 import { isTranslatableField, selectDisplayValue } from "#nuxt-cms";
+import {
+  Badge as KBadge,
+  Button as KButton,
+  Drawer as KDrawer,
+  Spinner as KSpinner,
+  Stack as KStack
+} from "@xleddyl/443-components-vue";
 import { computed, ref, watch } from "#imports";
 import { duplicateEntryValues } from "../../../shared/duplicate";
 import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
 import { cmsApi } from "../../utils/api";
-import { errorMessage } from "../../utils/ui";
+import { cmsIcon, errorMessage } from "../../utils/ui";
 const FORM_ID = "cms-entry-drawer-form";
 const props = defineProps({
   collection: { type: String, required: true },
@@ -169,9 +185,8 @@ watch(
   },
   { immediate: true }
 );
-async function requestClose() {
-  if (dirty.value && !await confirmAction("You have unsaved changes. Close anyway?")) return;
-  open.value = false;
+function confirmClose() {
+  return !dirty.value || confirmAction("You have unsaved changes. Close anyway?");
 }
 async function save() {
   if (saving.value) return;

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

@@ -10,15 +10,15 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
     saved: () => any;
     deleted: () => any;
     duplicate: (values: Record<string, unknown>) => any;
-    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onSaved?: (() => any) | undefined;
     onDeleted?: (() => any) | undefined;
     onDuplicate?: ((values: Record<string, unknown>) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => 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,106 +1,71 @@
 <template>
-   <CmsForm
-      :id="formId"
-      ref="form"
-      :state="state"
-      :schema="schema"
-      :warnings="warnings"
-      @submit="emit('submit')"
-      @error="onError"
-   >
-      <div v-if="tabList.length > 1" class="cms-tabs" role="tablist">
-         <button
-            v-for="tab in tabList"
-            :key="tab.id"
-            type="button"
-            role="tab"
-            class="cms-tab"
-            :class="{ 'is-active': tab.id === activeTab }"
-            :aria-selected="tab.id === activeTab"
-            @click="activeTab = tab.id"
-         >
-            {{ tab.label }}
-         </button>
-      </div>
-      <div class="cms-form-layout">
-         <div class="cms-form-main">
-            <component
-               :is="section.title ? 'section' : 'div'"
-               v-for="section in sections"
-               :key="section.id"
-               class="cms-form-section"
-               :class="{ 'is-titled': !!section.title, 'is-collapsed': isCollapsed(section) }"
-            >
-               <button
-                  v-if="section.title"
-                  type="button"
-                  class="cms-form-section-header"
-                  :aria-expanded="!isCollapsed(section)"
-                  @click="toggleSection(section.id)"
+   <KForm :id="formId" ref="formRef" :form="form" :focus-on-error="false" class="cms-form">
+      <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"
                >
-                  <span class="cms-form-section-text">
-                     <span class="cms-form-section-title">{{ section.title }}</span>
-                     <span v-if="section.description" class="cms-form-section-description">
-                        {{ section.description }}
-                     </span>
-                  </span>
-                  <CmsIcon name="chevron-down" class="cms-form-section-chevron size-4" />
-               </button>
-               <div v-show="!isCollapsed(section)" class="cms-form-rows">
-                  <div
-                     v-for="row in section.rows"
-                     :key="row.join('|')"
-                     class="cms-form-row"
-                     :style="{ '--cms-row-cols': row.length }"
-                  >
-                     <CmsFormField
-                        v-for="key in row"
-                        :key="key"
-                        :label="fields[key].label"
-                        :description="fields[key].description"
-                        :icon="fieldIcon(fields[key])"
-                        :name="key"
-                        :required="fields[key].required"
-                        :data-cms-field="key"
-                        :class="{ 'is-search-focus': highlighted === key }"
+                  <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 }"
                      >
-                        <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 }"
                         >
-                           <CmsLocaleSwitch
-                              :model-value="localeFor(key)"
-                              :value="
+                           <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)"
+                                 @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"
                            />
-                        </template>
-                        <CmsFieldInput
-                           v-model="state[key]"
-                           :field="fields[key]"
-                           :locale="localeFor(key)"
-                           :slug-source="slugSource(fields[key])"
-                           :entry-name="entryName"
-                           :field-key="key"
-                        />
-                     </CmsFormField>
+                        </KFormField>
+                     </div>
                   </div>
-               </div>
-            </component>
-         </div>
-      </div>
-      <div v-if="footer" class="cms-form-actions">
-         <CmsButton type="submit" label="Save" :loading="loading" />
-         <CmsButton
+               </component>
+            </div>
+         </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"
          />
-      </div>
-   </CmsForm>
+      </KStack>
+   </KForm>
 </template>
 
 <script setup>
@@ -112,13 +77,22 @@ import {
   resolveFormLayout,
   slugSourceValue
 } from "#nuxt-cms";
+import {
+  Accordion as KAccordion,
+  Button as KButton,
+  Form as KForm,
+  FormField as KFormField,
+  Stack as KStack,
+  Tabs as KTabs,
+  useForm
+} 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 { useCmsRuntime } from "../../composables/cms-runtime";
 import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
-import { fieldIcon } from "../../utils/ui";
+import { cmsIcon, fieldIcon } from "../../utils/ui";
 const props = defineProps({
   fields: { type: Object, required: true },
   tabs: { type: Array, required: false },
@@ -139,6 +113,18 @@ const activeTab = ref(tabList.value[0]?.id ?? "");
 watch(tabList, (tabs) => {
   if (!tabs.some((tab) => tab.id === activeTab.value)) activeTab.value = tabs[0]?.id ?? "";
 });
+const tabbed = computed(() => 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 })),
+    modelValue: activeTab.value,
+    panelFocusable: false,
+    "onUpdate:modelValue": (value) => {
+      activeTab.value = String(value ?? "");
+    }
+  } : {}
+);
 const settings = useCmsSettingsState();
 const layout = computed(
   () => props.entryName ? entryFormLayout(props.entryName, settings.value, props.fields) : resolveFormLayout(props.fields, void 0)
@@ -165,6 +151,16 @@ 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)
+  };
+}
 function revealField(key) {
   for (const section of sections.value) {
     if (section.rows.some((row) => row.includes(key)) && isCollapsed(section)) {
@@ -172,9 +168,11 @@ function revealField(key) {
     }
   }
 }
-function onError() {
-  const issue = schema.value.safeParse(state.value).error?.issues[0];
-  const key = issue ? String(issue.path[0] ?? "") : "";
+function firstErrorKey(errors) {
+  const keys = Object.keys(errors).filter((key) => errors[key]);
+  return Object.keys(props.fields).find((key) => keys.includes(key)) ?? keys[0]?.split(".")[0] ?? "";
+}
+function onError(key) {
   const field = key ? props.fields[key] : void 0;
   if (field && tabList.value.length) {
     const tab = fieldTab(field, tabList.value);
@@ -213,6 +211,13 @@ function warnings(values) {
     props.path
   );
 }
+const form = useForm({
+  values: state,
+  validator: schema,
+  warnings,
+  onSubmit: () => emit("submit"),
+  onInvalid: (errors) => onError(firstErrorKey(errors))
+});
 const published = computed({
   get: () => state.value.status === "published",
   set: (value) => {
@@ -222,7 +227,7 @@ const published = computed({
 function togglePublished() {
   published.value = !published.value;
 }
-const form = ref(null);
+const formRef = ref(null);
 const { highlighted, reveal } = useCmsFieldFocus();
 function applyFocus(focus) {
   if (focus.tab && tabList.value.some((tab2) => tab2.id === focus.tab)) activeTab.value = focus.tab;
@@ -236,7 +241,7 @@ function applyFocus(focus) {
   }
   void nextTick(() => {
     revealField(key);
-    reveal(() => form.value?.$el, key);
+    reveal(() => formRef.value?.$el, key);
   });
 }
 onMounted(() => {