@xleddyl/nuxt-cms 0.4.4 → 0.5.0

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

@@ -14,45 +14,48 @@
       :field-key="fieldKey"
    />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
-   <CmsTextarea
+   <KTextarea
       v-else-if="field.type === 'text' && field.textarea"
-      v-model="str"
+      v-model="plainText"
       :rows="8"
       :placeholder="field.placeholder"
    />
-   <CmsInput v-else-if="field.type === 'text'" v-model="str" :placeholder="field.placeholder" />
-   <CmsInput
+   <KInput v-else-if="field.type === 'text'" v-model="text" :placeholder="field.placeholder" />
+   <KInput
       v-else-if="field.type === 'email'"
-      v-model="str"
+      v-model="text"
       type="email"
       :placeholder="field.placeholder"
    />
    <CmsSlugField v-else-if="field.type === 'slug'" v-model="strOrNull" :source="slugSource" />
-   <CmsSelectMenu
-      v-else-if="field.type === 'select'"
-      v-model="selValue"
-      :multiple="field.multiple"
-      :items="selectItems"
+   <KCombobox
+      v-else-if="field.type === 'select' && field.multiple"
+      v-model="multiValue"
+      multiple
+      open-on-focus
+      :options="selectItems"
       :placeholder="field.placeholder ?? 'Select\u2026'"
    />
-   <CmsSwitch
-      v-else-if="field.type === 'boolean'"
-      :model-value="!!model"
-      @update:model-value="
-  (v) => {
-    model = !!v;
-  }
-"
+   <KSelect
+      v-else-if="field.type === 'select'"
+      v-model="singleValue"
+      :options="selectItems"
+      :placeholder="field.placeholder ?? 'Select\u2026'"
    />
+   <KSwitch v-else-if="field.type === 'boolean'" v-model="flag" />
    <CmsJsonField v-else-if="field.type === 'json'" v-model="jsonValue" />
-   <CmsInput
+   <KNumberInput
       v-else-if="field.type === 'number'"
-      v-model.number="num"
-      type="number"
+      v-model="num"
+      align="start"
       :placeholder="field.placeholder"
    />
-   <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" />
-   <CmsInput v-else-if="field.type === 'datetime'" v-model="localDateTime" type="datetime-local" />
+   <KDateInput v-else-if="field.type === 'date'" v-model="plainText" />
+   <KDateInput
+      v-else-if="field.type === 'datetime'"
+      v-model="localDateTime"
+      type="datetime-local"
+   />
    <CmsRelationField
       v-else-if="field.type === 'relation'"
       v-model="relationValue"
@@ -65,6 +68,15 @@
 
 <script setup>
 import { isTranslatableField, selectOptions } from "#nuxt-cms";
+import {
+  Combobox as KCombobox,
+  DateInput as KDateInput,
+  Input as KInput,
+  NumberInput as KNumberInput,
+  Select as KSelect,
+  Switch as KSwitch,
+  Textarea as KTextarea
+} from "@xleddyl/443-components-vue";
 import { computed } from "#imports";
 const props = defineProps({
   field: { type: Object, required: true },
@@ -74,10 +86,9 @@ const props = defineProps({
   fieldKey: { type: String, required: false }
 });
 const model = defineModel({ type: null, ...{ required: true } });
-const selectItems = computed(() => [
-  ...props.field.required || props.field.multiple ? [] : [{ label: "\u2014", value: null }],
-  ...selectOptions(props.field).map(({ value, label }) => ({ label, value }))
-]);
+const selectItems = computed(
+  () => selectOptions(props.field).map(({ value, label }) => ({ label, value }))
+);
 function proxy(fromModel, toModel = (v) => v) {
   return computed({
     get: () => fromModel(model.value),
@@ -86,16 +97,29 @@ function proxy(fromModel, toModel = (v) => v) {
     }
   });
 }
-const str = proxy(
+function emptyToNull(value) {
+  return value == null || value === "" ? null : String(value);
+}
+const text = proxy(
   (v) => v ?? "",
-  (v) => v === "" ? null : v
+  emptyToNull
 );
+const plainText = proxy((v) => v ?? "", emptyToNull);
 const strOrNull = proxy((v) => v);
-const selValue = proxy(
-  (v) => props.field.multiple ? v ?? [] : v ?? null
+const singleValue = proxy(
+  (v) => v ?? null,
+  emptyToNull
+);
+const multiValue = proxy(
+  (v) => v ?? [],
+  (v) => Array.isArray(v) ? v : v == null ? [] : [v]
+);
+const flag = proxy(
+  (v) => !!v,
+  (v) => !!v
 );
 const num = proxy(
-  (v) => v ?? void 0,
+  (v) => v ?? null,
   (v) => typeof v === "number" && !Number.isNaN(v) ? v : null
 );
 const translatable = proxy((v) => v);

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

@@ -8,11 +8,11 @@ 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, {
-    imported: () => any;
     "update:open": (value: boolean) => any;
+    imported: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onImported?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onImported?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,128 +1,129 @@
 <template>
-   <CmsModal v-model:open="open" :title="`Import ${config.label}`" size="lg">
-      <div class="cms-form">
-         <p class="cms-form-description">
+   <KModal v-model:open="open" :title="`Import ${config.label}`" size="lg">
+      <KStack gap="md">
+         <p class="cms-settings-hint">
             {{ csv ? "A JSON or CSV file" : "A JSON file" }} in the format of the export, up to
             {{ maxSize }} and {{ IMPORT_MAX_ROWS }} rows. Media fields take keys of files that are
             already in the media library. Nothing is written until you confirm.
          </p>
 
-         <div class="cms-import-file">
+         <KStack direction="row" gap="sm" wrap>
             <input
                ref="input"
                type="file"
-               class="hidden"
+               hidden
                :accept="csv ? '.json,.csv,application/json,text/csv' : '.json,application/json'"
                @change="onFile"
             />
-            <CmsButton
+            <KButton
                :label="file ? 'Choose another file' : 'Choose file'"
-               icon="document-arrow-up"
+               :icon="cmsIcon('document-arrow-up')"
                variant="soft"
-               color="neutral"
+               tone="neutral"
                :disabled="busy"
                @click="input?.click()"
             />
             <span v-if="file" class="cms-import-file-name">
                {{ file.name }} · {{ formatFileSize(file.size) }}
             </span>
-         </div>
+         </KStack>
 
-         <CmsFormField
+         <KFormField
             label="Mode"
             :description="
   mode === 'create' ? 'Every row becomes a new entry. A row with the id of an existing entry is an error.' : 'A row with the id of an existing entry replaces it. Other rows become new entries.'
 "
          >
-            <div class="cms-media-filters">
-               <button
-                  v-for="option in MODE_OPTIONS"
-                  :key="option.value"
-                  type="button"
-                  class="cms-pill"
-                  :class="{ 'is-active': mode === option.value }"
-                  :disabled="busy"
-                  @click="setMode(option.value)"
-               >
-                  {{ option.label }}
-               </button>
-            </div>
-         </CmsFormField>
+            <KSegmentedControl
+               :model-value="mode"
+               :options="MODE_OPTIONS"
+               size="sm"
+               required
+               :disabled="busy"
+               @update:model-value="setMode"
+            />
+         </KFormField>
 
-         <CmsSpinner v-if="checking" />
+         <KSpinner v-if="checking" />
 
-         <CmsAlert v-else-if="fileErrors.length" color="error" title="The file cannot be imported">
+         <KAlert v-else-if="fileErrors.length" tone="danger" title="The file cannot be imported">
             <ul class="cms-import-list">
                <li v-for="message in fileErrors" :key="message">{{ message }}</li>
             </ul>
-         </CmsAlert>
+         </KAlert>
 
          <template v-else-if="preview">
-            <CmsAlert :color="invalidCount ? 'warning' : 'success'" :title="summary" />
-            <div class="cms-card cms-table-shell cms-import-preview">
-               <div class="cms-table-scroll">
-                  <table class="cms-table">
-                     <thead>
-                        <tr>
-                           <th>Row</th>
-                           <th>Entry</th>
-                           <th>Action</th>
-                           <th>Problems</th>
-                        </tr>
-                     </thead>
-                     <tbody>
-                        <tr v-for="row in shownRows" :key="row.index">
-                           <td>{{ row.index }}</td>
-                           <td class="cms-import-title">{{ row.title || row.id || "Untitled" }}</td>
-                           <td>
-                              <span class="cms-tag">
-                                 {{ row.action === "update" ? "Update" : "New" }}
-                              </span>
-                           </td>
-                           <td>
-                              <ul
-                                 v-if="row.errors.length"
-                                 class="cms-import-list cms-import-issues"
-                              >
-                                 <li v-for="(issue, index) in row.errors" :key="index">
-                                    {{ issue.path ? `${issue.path}: ` : "" }}{{ issue.message }}
-                                 </li>
-                              </ul>
-                              <span v-else class="cms-import-ok">
-                                 <CmsIcon name="check" class="size-3.5" />Ready
-                              </span>
-                           </td>
-                        </tr>
-                     </tbody>
-                  </table>
-               </div>
-            </div>
+            <KAlert :tone="invalidCount ? 'warning' : 'success'" :title="summary" />
+            <KTable
+               :rows="shownRows"
+               :columns="PREVIEW_COLUMNS"
+               row-key="index"
+               density="compact"
+               max-height="20rem"
+               label="Rows of the file"
+            >
+               <template #cell-title="{ row }">
+                  <span class="cms-import-title">{{ row.title || row.id || "Untitled" }}</span>
+               </template>
+               <template #cell-action="{ row }">
+                  <KBadge :label="row.action === 'update' ? 'Update' : 'New'" size="sm" />
+               </template>
+               <template #cell-errors="{ row }">
+                  <ul v-if="row.errors.length" class="cms-import-list cms-import-issues">
+                     <li v-for="(issue, index) in row.errors" :key="index">
+                        {{ issue.path ? `${issue.path}: ` : "" }}{{ issue.message }}
+                     </li>
+                  </ul>
+                  <span v-else class="cms-import-ok">
+                     <KIcon name="check" />
+                     Ready
+                  </span>
+               </template>
+            </KTable>
          </template>
+      </KStack>
 
-         <div class="cms-actions is-end">
-            <CmsButton label="Cancel" variant="soft" color="neutral" @click="open = false" />
-            <CmsButton
-               :label="importLabel"
-               icon="arrow-down-tray"
-               :disabled="!canImport"
-               :loading="importing"
-               @click="commit"
-            />
-         </div>
-      </div>
-   </CmsModal>
+      <template #footer>
+         <KButton label="Cancel" variant="soft" tone="neutral" @click="open = false" />
+         <KButton
+            :label="importLabel"
+            :icon="cmsIcon('arrow-down-tray')"
+            :disabled="!canImport"
+            :loading="importing"
+            @click="commit"
+         />
+      </template>
+   </KModal>
 </template>
 
 <script setup>
 import { formatFileSize } from "#nuxt-cms";
+import {
+  Alert as KAlert,
+  Badge as KBadge,
+  Button as KButton,
+  FormField as KFormField,
+  Icon as KIcon,
+  Modal as KModal,
+  SegmentedControl as KSegmentedControl,
+  Spinner as KSpinner,
+  Stack as KStack,
+  Table as KTable
+} from "@xleddyl/443-components-vue";
 import { computed, ref, watch } from "#imports";
 import { canTransferCsv, IMPORT_MAX_BYTES, IMPORT_MAX_ROWS } from "../../../shared/transfer";
 import { useCmsToast } from "../../composables/cms-toast";
-import { errorMessage } from "../../utils/ui";
+import { cmsIcon, errorMessage } from "../../utils/ui";
 const MODE_OPTIONS = [
   { value: "create", label: "Create only" },
   { value: "upsert", label: "Create or update by id" }
 ];
+const PREVIEW_COLUMNS = [
+  { key: "index", label: "Row", numeric: true, align: "start" },
+  { key: "title", label: "Entry" },
+  { key: "action", label: "Action" },
+  { key: "errors", label: "Problems" }
+];
 const props = defineProps({
   collection: { type: String, required: true },
   config: { type: Object, required: true }

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

@@ -8,11 +8,11 @@ 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, {
-    imported: () => any;
     "update:open": (value: boolean) => any;
+    imported: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onImported?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onImported?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,19 +1,26 @@
 <template>
-   <div class="cms-form-field">
-      <CmsTextarea
+   <KStack gap="xs">
+      <KTextarea
          v-model="text"
          :rows="6"
-         class="font-mono"
-         :color="invalid ? 'error' : void 0"
+         class="k-mono"
+         :invalid="control.field ? void 0 : invalid || void 0"
          @blur="commit"
          @update:model-value="invalid = false"
       />
-      <p v-if="invalid" class="cms-form-error">Invalid JSON</p>
-   </div>
+      <KFieldMessage v-if="!control.field && invalid" :message="INVALID_JSON" />
+   </KStack>
 </template>
 
 <script setup>
+import {
+  FieldMessage as KFieldMessage,
+  Stack as KStack,
+  Textarea as KTextarea,
+  useFieldControl
+} from "@xleddyl/443-components-vue";
 import { ref, watch } from "#imports";
+const INVALID_JSON = "Invalid JSON";
 const model = defineModel({ type: null, ...{ required: true } });
 function serialize(value) {
   return value == null ? "" : JSON.stringify(value, null, 2);
@@ -26,17 +33,19 @@ function parse(raw) {
     return void 0;
   }
 }
+const control = useFieldControl();
 const text = ref(serialize(model.value));
 const invalid = ref(false);
+watch(invalid, (value) => control.setControlError(value ? INVALID_JSON : void 0));
 watch(model, (value) => {
-  const current = parse(text.value);
+  const current = parse(text.value ?? "");
   if (JSON.stringify(current ?? null) !== JSON.stringify(value ?? null)) {
     text.value = serialize(value);
     invalid.value = false;
   }
 });
 function commit() {
-  const parsed = parse(text.value);
+  const parsed = parse(text.value ?? "");
   if (parsed === void 0) {
     invalid.value = true;
     return;

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

@@ -1,58 +1,31 @@
 <template>
-   <div class="cms-media-filters cms-list-filters">
-      <template v-for="key in keys" :key="key">
-         <CmsDropdownMenu v-if="optionsOf(key)" :items="menuItems(key)">
-            <button
-               type="button"
-               class="cms-pill"
-               :class="{ 'is-active': isActive(key) }"
-               aria-haspopup="menu"
-            >
-               {{ pillLabel(key) }}
-               <CmsIcon name="chevron-down" class="size-3" />
-            </button>
-         </CmsDropdownMenu>
-         <CmsPopover
-            v-else
-            :open="openKey === key"
-            class="cms-list-filter"
-            @update:open="(value) => openKey = value ? key : null"
-         >
-            <button
-               type="button"
-               class="cms-pill"
-               :class="{ 'is-active': isActive(key) }"
-               aria-haspopup="dialog"
-            >
-               {{ pillLabel(key) }}
-               <CmsIcon name="chevron-down" class="size-3" />
-            </button>
-            <template #content>
-               <div class="cms-list-filter-panel" role="dialog" :aria-label="labelOf(key)">
-                  <CmsRelationField
-                     :model-value="model[key] ?? null"
-                     :to="config.fields[key].to"
-                     @update:model-value="(value) => pickRelation(key, value)"
-                  />
-               </div>
-            </template>
-         </CmsPopover>
+   <KFilterPills
+      :model-value="activeKeys"
+      :options="pills"
+      label="Filters"
+      size="sm"
+      multiple
+      clearable
+      clear-label="Clear filters"
+      class="cms-list-filters"
+      @update:model-value="onPillsUpdate"
+   >
+      <template v-for="key in relationKeys" #[`panel-${key}`]="{ close }" :key="key">
+         <div class="cms-list-filter-panel">
+            <CmsRelationField
+               :model-value="model[key] ?? null"
+               :to="config.fields[key].to"
+               @update:model-value="(value) => pickRelation(key, value, close)"
+            />
+         </div>
       </template>
-      <CmsButton
-         v-if="activeCount"
-         label="Clear filters"
-         icon="x-mark"
-         size="xs"
-         variant="ghost"
-         color="neutral"
-         @click="model = {}"
-      />
-   </div>
+   </KFilterPills>
 </template>
 
 <script setup>
 import { isTranslatableField, selectDisplayValue } from "#nuxt-cms";
-import { computed, reactive, ref, watch } from "#imports";
+import { FilterPills as KFilterPills } from "@xleddyl/443-components-vue";
+import { computed, reactive, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import {
   listFilterLabel,
@@ -68,9 +41,25 @@ const props = defineProps({
 });
 const model = defineModel({ type: Object, ...{ required: true } });
 const { i18n } = useCmsRuntime();
-const openKey = ref(null);
 const fetchedTitles = reactive({});
-const activeCount = computed(() => Object.values(model.value).filter(Boolean).length);
+const activeKeys = computed(() => props.keys.filter((key) => !!model.value[key]));
+const relationKeys = computed(() => props.keys.filter((key) => !optionsOf(key)));
+const pills = computed(
+  () => props.keys.map((key) => {
+    const menu = optionsOf(key) ? menuItems(key) : void 0;
+    return {
+      value: key,
+      label: labelOf(key),
+      valueLabel: valueLabelOf(key),
+      active: isActive(key),
+      menu,
+      panel: !menu
+    };
+  })
+);
+function onPillsUpdate(value) {
+  if (!value.length) model.value = {};
+}
 function optionsOf(key) {
   return listFilterOptions(props.config, key);
 }
@@ -89,17 +78,20 @@ function set(key, value) {
 function menuItems(key) {
   const current = model.value[key];
   return [
-    { label: "Any", checked: !current, onSelect: () => set(key, null) },
-    ...(optionsOf(key) ?? []).map((option) => ({
-      label: option.label,
-      checked: current === option.value,
-      onSelect: () => set(key, option.value)
-    }))
+    { type: "radio", label: "Any", checked: !current, onSelect: () => set(key, null) },
+    ...(optionsOf(key) ?? []).map(
+      (option) => ({
+        type: "radio",
+        label: option.label,
+        checked: current === option.value,
+        onSelect: () => set(key, option.value)
+      })
+    )
   ];
 }
-function pickRelation(key, value) {
+function pickRelation(key, value, close) {
   set(key, typeof value === "string" ? value : null);
-  openKey.value = null;
+  close();
 }
 function titleText(entry, value) {
   const field = entry?.titleField ? entry.fields[entry.titleField] : void 0;
@@ -142,10 +134,9 @@ watch(
   },
   { immediate: true }
 );
-function pillLabel(key) {
+function valueLabelOf(key) {
   const value = model.value[key];
-  if (!value) return labelOf(key);
-  const shown = optionsOf(key) ? listFilterValueLabel(props.config, key, value) : relationTitle(key, value);
-  return `${labelOf(key)}: ${shown}`;
+  if (!value) return void 0;
+  return optionsOf(key) ? listFilterValueLabel(props.config, key, value) : relationTitle(key, value);
 }
 </script>

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

@@ -1,29 +1,32 @@
 <template>
-   <div class="cms-locale-switch" role="tablist" aria-label="Content language">
-      <button
-         v-for="locale in i18n.locales"
-         :key="locale"
-         type="button"
-         role="tab"
-         :aria-selected="model === locale"
-         :title="filled(locale) ? locale : `${locale}: empty`"
-         class="cms-locale-option"
-         :class="{ 'is-active': model === locale, 'is-empty': !filled(locale) }"
-         @click="model = locale"
-      >
-         {{ locale }}
-      </button>
-   </div>
+   <KSegmentedControl
+      v-model="model"
+      class="cms-locale-control"
+      :options="options"
+      size="sm"
+      required
+      aria-label="Content language"
+   />
 </template>
 
 <script setup>
+import { SegmentedControl as KSegmentedControl } from "@xleddyl/443-components-vue";
+import { computed } from "#imports";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 const props = defineProps({
   value: { type: [Object, null], required: false }
 });
 const model = defineModel({ type: String, ...{ required: true } });
 const { i18n } = useCmsRuntime();
-function filled(locale) {
-  return !!props.value?.[locale]?.trim();
-}
+const options = computed(
+  () => i18n.locales.map((locale) => {
+    const empty = !props.value?.[locale]?.trim();
+    return {
+      value: locale,
+      label: locale,
+      title: empty ? `${locale}: empty` : void 0,
+      muted: empty
+    };
+  })
+);
 </script>