@xleddyl/nuxt-cms 0.2.2 → 0.3.0

package/dist/runtime/app/blocks/CmsBlocks.vue

@@ -0,0 +1,36 @@
+<template>
+   <component
+      :is="block.component"
+      v-for="block in resolved"
+      :key="block.key"
+      v-bind="annotate ? { ...block.props, ...annotation(block) } : block.props"
+   />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { cmsBlockTypeName, resolveCmsBlocks } from "./resolve";
+const props = defineProps({
+  blocks: { type: Array, default: null },
+  entry: { type: String, default: void 0 },
+  field: { type: String, default: void 0 },
+  annotate: { type: Boolean, default: false }
+});
+function warnMissing(item) {
+  if (!import.meta.dev) return;
+  const name = cmsBlockTypeName(item, props.entry, props.field) ?? item.type;
+  console.warn(
+    `[nuxt-cms] <CmsBlocks> has no component for block '${name}': set component on the block in cms.config, or pass entry and field when the data has no __typename`
+  );
+}
+const resolved = computed(
+  () => resolveCmsBlocks(props.blocks, {
+    entry: props.entry,
+    field: props.field,
+    onMissing: warnMissing
+  })
+);
+function annotation(block) {
+  return { "data-cms-block": block.index, "data-cms-block-type": block.type };
+}
+</script>

package/dist/runtime/app/blocks/CmsBlocks.vue.d.ts

@@ -0,0 +1,45 @@
+import type { PropType } from 'vue';
+import type { CmsBlockEntryName } from '#cms-types';
+import type { CmsBlockItem } from './resolve.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    blocks: {
+        type: PropType<readonly CmsBlockItem[] | null>;
+        default: null;
+    };
+    entry: {
+        type: PropType<CmsBlockEntryName>;
+        default: undefined;
+    };
+    field: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    annotate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    blocks: {
+        type: PropType<readonly CmsBlockItem[] | null>;
+        default: null;
+    };
+    entry: {
+        type: PropType<CmsBlockEntryName>;
+        default: undefined;
+    };
+    field: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    annotate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    field: string;
+    blocks: readonly CmsBlockItem[] | null;
+    entry: string;
+    annotate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/blocks/resolve.d.ts

@@ -0,0 +1,21 @@
+import type { Component } from 'vue';
+export interface CmsBlockItem {
+    type: string;
+    __typename?: string;
+}
+export interface ResolvedCmsBlock {
+    key: string;
+    index: number;
+    type: string;
+    component: Component;
+    props: Record<string, unknown>;
+}
+export declare const isHiddenCmsBlock: (item: CmsBlockItem) => boolean;
+export declare function cmsBlockTypeName(item: CmsBlockItem, entry?: string, field?: string): string | undefined;
+export declare function cmsBlockComponent(item: CmsBlockItem, entry?: string, field?: string): Component | undefined;
+export declare function cmsBlockProps(item: CmsBlockItem): Record<string, unknown>;
+export declare function resolveCmsBlocks(blocks: readonly CmsBlockItem[] | null | undefined, options?: {
+    entry?: string;
+    field?: string;
+    onMissing?: (item: CmsBlockItem) => void;
+}): ResolvedCmsBlock[];

package/dist/runtime/app/blocks/resolve.js

@@ -0,0 +1,37 @@
+import { cmsBlockComponents } from "#cms-blocks";
+import { CONTENT_BODY_FIELD, blockTypeName, isHiddenBlock } from "../../shared/index.js";
+const OMITTED_KEYS = /* @__PURE__ */ new Set(["type", "__typename"]);
+export const isHiddenCmsBlock = isHiddenBlock;
+export function cmsBlockTypeName(item, entry, field = CONTENT_BODY_FIELD) {
+  return entry ? blockTypeName(entry, field, item.type) : item.__typename;
+}
+export function cmsBlockComponent(item, entry, field) {
+  const name = cmsBlockTypeName(item, entry, field);
+  return name && Object.hasOwn(cmsBlockComponents, name) ? cmsBlockComponents[name] : void 0;
+}
+export function cmsBlockProps(item) {
+  return Object.fromEntries(
+    Object.entries(item).filter(
+      ([key]) => !OMITTED_KEYS.has(key)
+    )
+  );
+}
+export function resolveCmsBlocks(blocks, options = {}) {
+  const resolved = [];
+  (blocks ?? []).forEach((item, index) => {
+    if (!item || typeof item !== "object" || isHiddenCmsBlock(item)) return;
+    const component = cmsBlockComponent(item, options.entry, options.field);
+    if (!component) {
+      options.onMissing?.(item);
+      return;
+    }
+    resolved.push({
+      key: `${index}:${item.type}`,
+      index,
+      type: item.type,
+      component,
+      props: cmsBlockProps(item)
+    });
+  });
+  return resolved;
+}

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

@@ -0,0 +1,17 @@
+import type { FieldConfig } from '#nuxt-cms';
+import type { CmsBlockValue } from '../../../shared/preview.js';
+type __VLS_Props = {
+    items: CmsBlockValue[];
+    field: FieldConfig;
+    locale: string;
+    selected: number | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+    move: (from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+    onMove?: ((from: number, to: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,99 @@
+<template>
+   <ol class="cms-outline" aria-label="Blocks">
+      <li
+         v-for="(item, index) in items"
+         :key="uidFor(item)"
+         class="cms-outline-row"
+         :class="{
+  'is-selected': index === selected,
+  'is-hidden': isHiddenBlock(item),
+  'is-dragging': dragIndex === index,
+  'is-drop-target': dropIndex === index && dragIndex !== index
+}"
+         draggable="true"
+         @dragstart="onDragStart(index, $event)"
+         @dragover.prevent="dropIndex = index"
+         @dragleave="dropIndex === index && (dropIndex = null)"
+         @drop.prevent="onDrop(index)"
+         @dragend="onDragEnd"
+      >
+         <span class="cms-outline-grip" aria-hidden="true">
+            <CmsIcon name="bars-2" class="size-3.5" />
+         </span>
+         <button
+            type="button"
+            class="cms-outline-main"
+            :aria-current="index === selected ? 'true' : void 0"
+            :aria-label="`${labelOf(item)}, ${index + 1} of ${items.length}${isHiddenBlock(item) ? ', hidden' : ''}. Alt and the arrow keys move it`"
+            aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown"
+            @click="emit('select', index)"
+            @keydown.alt.up.prevent="index > 0 && emit('move', index, index - 1)"
+            @keydown.alt.down.prevent="index < items.length - 1 && emit('move', index, index + 1)"
+         >
+            <CmsIcon :name="blockOf(item)?.icon ?? 'rectangle-stack'" class="size-4 shrink-0" />
+            <span class="cms-outline-text">
+               <span class="cms-outline-label">{{ labelOf(item) }}</span>
+               <span v-if="summaryOf(item)" class="cms-outline-summary">
+                  {{ summaryOf(item) }}
+               </span>
+            </span>
+            <CmsIcon
+               v-if="isHiddenBlock(item)"
+               name="eye-slash"
+               class="cms-outline-hidden size-4 shrink-0"
+            />
+         </button>
+      </li>
+   </ol>
+</template>
+
+<script setup>
+import { isHiddenBlock } from "#nuxt-cms";
+import { ref } from "#imports";
+import { blockSummary } from "../../../shared/preview";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+const props = defineProps({
+  items: { type: Array, required: true },
+  field: { type: Object, required: true },
+  locale: { type: String, required: true },
+  selected: { type: [Number, null], required: true }
+});
+const emit = defineEmits(["select", "move"]);
+const { i18n } = useCmsRuntime();
+let uidCounter = 0;
+const uids = /* @__PURE__ */ new WeakMap();
+function uidFor(item) {
+  let uid = uids.get(item);
+  if (uid === void 0) {
+    uid = ++uidCounter;
+    uids.set(item, uid);
+  }
+  return uid;
+}
+function blockOf(item) {
+  return props.field.blocks?.[String(item.type)];
+}
+function labelOf(item) {
+  return blockOf(item)?.label ?? String(item.type);
+}
+function summaryOf(item) {
+  return blockSummary(blockOf(item), item, props.locale, i18n.defaultLocale, 60);
+}
+const dragIndex = ref(null);
+const dropIndex = ref(null);
+function onDragStart(index, event) {
+  dragIndex.value = index;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(index));
+  }
+}
+function onDrop(index) {
+  if (dragIndex.value !== null && dragIndex.value !== index) emit("move", dragIndex.value, index);
+  onDragEnd();
+}
+function onDragEnd() {
+  dragIndex.value = null;
+  dropIndex.value = null;
+}
+</script>

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

@@ -0,0 +1,17 @@
+import type { FieldConfig } from '#nuxt-cms';
+import type { CmsBlockValue } from '../../../shared/preview.js';
+type __VLS_Props = {
+    items: CmsBlockValue[];
+    field: FieldConfig;
+    locale: string;
+    selected: number | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+    move: (from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+    onMove?: ((from: number, to: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,12 @@
+import type { BlockConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,29 @@
+<template>
+   <div class="cms-palette" role="group" :aria-label="label">
+      <button
+         v-for="(block, type) in blocks"
+         :key="type"
+         type="button"
+         class="cms-palette-item"
+         @click="emit('pick', String(type))"
+      >
+         <span class="cms-palette-icon">
+            <CmsIcon :name="block.icon ?? 'rectangle-stack'" class="size-4" />
+         </span>
+         <span class="cms-palette-text">
+            <span class="cms-palette-label">{{ block.label }}</span>
+            <span v-if="block.description" class="cms-palette-description">
+               {{ block.description }}
+            </span>
+         </span>
+      </button>
+   </div>
+</template>
+
+<script setup>
+defineProps({
+  blocks: { type: Object, required: true },
+  label: { type: String, required: false, default: "Available blocks" }
+});
+const emit = defineEmits(["pick"]);
+</script>

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

@@ -0,0 +1,12 @@
+import type { BlockConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -2,6 +2,8 @@ import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>[] | null;

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

@@ -112,6 +112,45 @@
          </button>
       </div>
 
+      <CmsButton
+         v-if="visual"
+         class="self-start"
+         label="Open visual editor"
+         icon="window"
+         size="sm"
+         variant="soft"
+         color="neutral"
+         @click="visualOpen = true"
+      />
+
+      <Teleport to="body">
+         <div v-if="visual && visualOpen" class="cms-scope cms-editor-overlay" :data-theme="theme">
+            <CmsVisualEditor
+               :state="{ [fieldKey]: model }"
+               :entry-name="entryName"
+               :field-key="fieldKey"
+               :fields="{ [fieldKey]: field }"
+               :title="field.label"
+               @update:state="onVisualUpdate"
+            >
+               <template #start>
+                  <CmsButton
+                     icon="arrow-left"
+                     size="sm"
+                     variant="ghost"
+                     color="neutral"
+                     aria-label="Back to the form"
+                     title="Back to the form"
+                     @click="visualOpen = false"
+                  />
+               </template>
+               <template #actions>
+                  <CmsButton label="Done" size="sm" @click="visualOpen = false" />
+               </template>
+            </CmsVisualEditor>
+         </div>
+      </Teleport>
+
       <CmsModal v-if="mediaOnly" v-model:open="pickerOpen" title="Media" size="lg">
          <template #body>
             <CmsMediaGallery
@@ -167,6 +206,14 @@
                         color="neutral"
                         @click="duplicateCurrent"
                      />
+                     <CmsButton
+                        v-if="editorItem && !declaresHiddenField(blockOf(editorItem))"
+                        :label="isHidden(editorItem) ? 'Show' : 'Hide'"
+                        :icon="isHidden(editorItem) ? 'eye' : 'eye-slash'"
+                        variant="soft"
+                        color="neutral"
+                        @click="toggleHiddenCurrent"
+                     />
                   </div>
                   <div class="cms-actions">
                      <CmsButton
@@ -187,6 +234,8 @@
 
 <script setup>
 import {
+  declaresHiddenField,
+  isHiddenBlock,
   isTranslatableMediaField,
   mediaFilename,
   mediaIconFor,
@@ -194,13 +243,17 @@ import {
   mediaTypeForKey,
   pickTranslatedMedia
 } from "#nuxt-cms";
-import { computed, ref, useState } from "#imports";
+import { computed, ref, useState, watch } from "#imports";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
+import { useCmsOverlay } from "../../composables/cms-overlay";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { useCmsTheme } from "../../composables/cms-theme";
 import { fieldIcon } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
-  locale: { type: String, required: false }
+  locale: { type: String, required: false },
+  entryName: { type: String, required: false },
+  fieldKey: { type: String, required: false }
 });
 const model = defineModel({ type: [Array, null], ...{ required: true } });
 const { mediaBaseUrl, i18n } = useCmsRuntime();
@@ -217,6 +270,23 @@ const mediaOnly = computed(() => {
   if (field.type !== "media" || isTranslatableMediaField(field)) return null;
   return { type, key, field };
 });
+const visual = computed(() => {
+  const list = Object.values(blocks.value);
+  return !mediaOnly.value && !!props.entryName && !!props.fieldKey && !!list.length && list.every((block) => typeof block.component === "string" && !!block.component.trim());
+});
+const visualOpen = ref(false);
+const theme = useCmsTheme();
+const visualOverlay = useCmsOverlay(() => {
+  visualOpen.value = false;
+});
+watch(visualOpen, (open) => {
+  if (open) visualOverlay.activate();
+  else visualOverlay.deactivate();
+});
+function onVisualUpdate(state) {
+  const value = props.fieldKey ? state[props.fieldKey] : null;
+  model.value = Array.isArray(value) && value.length ? value : null;
+}
 const addMediaLabel = computed(() => {
   const types = [mediaOnly.value?.field.mediaType ?? []].flat();
   return types.length === 1 && types[0] === "image" ? "Add photo" : "Add media";
@@ -293,7 +363,7 @@ function summaryOf(item) {
   return "";
 }
 function isHidden(item) {
-  return blockOf(item)?.fields.hidden?.type === "boolean" && item.hidden === true;
+  return isHiddenBlock(item);
 }
 function updateField(index, key, value) {
   const current = items.value[index];
@@ -406,6 +476,16 @@ function moveCurrent(delta) {
   move(editorIndex.value, delta);
   editorIndex.value = next;
 }
+function toggleHiddenCurrent() {
+  if (editorIndex.value === null || !editorItem.value) return;
+  const index = editorIndex.value;
+  const current = items.value[index];
+  if (!current) return;
+  const { hidden: _hidden, ...rest } = current;
+  const updated = isHidden(current) ? rest : { ...rest, hidden: true };
+  uids.set(updated, uidFor(current));
+  model.value = items.value.map((item, i) => i === index ? updated : item);
+}
 function duplicateCurrent() {
   if (editorIndex.value === null) return;
   duplicate(editorIndex.value);

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

@@ -2,6 +2,8 @@ import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>[] | null;

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

@@ -1,4 +1,5 @@
 import type { CmsEntry, CmsTab } from '#nuxt-cms';
+import type { CmsSearchFocus } from '../../../shared/search.js';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
@@ -7,6 +8,7 @@ type __VLS_Props = {
     loading?: boolean;
     formId?: string;
     footer?: boolean;
+    focus?: CmsSearchFocus | null;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;

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

@@ -1,5 +1,12 @@
 <template>
-   <CmsForm :id="formId" :state="state" :schema="schema" @submit="emit('submit')" @error="onError">
+   <CmsForm
+      :id="formId"
+      ref="form"
+      :state="state"
+      :schema="schema"
+      @submit="emit('submit')"
+      @error="onError"
+   >
       <div v-if="tabList.length > 1" class="cms-tabs" role="tablist">
          <button
             v-for="tab in tabList"
@@ -53,6 +60,8 @@
                         :icon="fieldIcon(fields[key])"
                         :name="key"
                         :required="fields[key].required"
+                        :data-cms-field="key"
+                        :class="{ 'is-search-focus': highlighted === key }"
                      >
                         <template
                            v-if="hasLocaleSwitch(fields[key]) && i18n.locales.length > 1"
@@ -70,9 +79,9 @@
                            v-model="state[key]"
                            :field="fields[key]"
                            :locale="localeFor(key)"
-                           :slug-source="
-  fields[key].from ? state[fields[key].from] : void 0
-"
+                           :slug-source="slugSource(fields[key])"
+                           :entry-name="entryName"
+                           :field-key="key"
                         />
                      </CmsFormField>
                   </div>
@@ -99,10 +108,12 @@ import {
   hasTranslatableBlockFields,
   isFieldVisible,
   isTranslatableField,
-  resolveFormLayout
+  resolveFormLayout,
+  slugSourceValue
 } from "#nuxt-cms";
-import { computed, nextTick, ref, watch } from "#imports";
+import { computed, nextTick, onMounted, ref, watch } from "#imports";
 import { buildEntrySchema } 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";
@@ -113,7 +124,8 @@ const props = defineProps({
   drafts: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   formId: { type: String, required: false },
-  footer: { type: Boolean, required: false, default: true }
+  footer: { type: Boolean, required: false, default: true },
+  focus: { type: [Object, null], required: false }
 });
 const state = defineModel({ type: Object, ...{ required: true } });
 const emit = defineEmits(["submit", "error"]);
@@ -168,6 +180,10 @@ function onError() {
   if (key) void nextTick(() => revealField(key));
   emit("error");
 }
+function slugSource(field) {
+  if (!field.from) return void 0;
+  return slugSourceValue(props.fields[field.from], state.value[field.from], i18n.defaultLocale);
+}
 function hasLocaleSwitch(field) {
   return isTranslatableField(field) || hasTranslatableBlockFields(field);
 }
@@ -189,4 +205,24 @@ const published = computed({
 function togglePublished() {
   published.value = !published.value;
 }
+const form = ref(null);
+const { highlighted, reveal } = useCmsFieldFocus();
+function applyFocus(focus) {
+  if (focus.tab && tabList.value.some((tab2) => tab2.id === focus.tab)) activeTab.value = focus.tab;
+  const key = focus.field;
+  const field = key ? props.fields[key] : void 0;
+  if (!key || !field) return;
+  const tab = tabList.value.length ? fieldTab(field, tabList.value) : void 0;
+  if (tab) activeTab.value = tab;
+  if (focus.locale && hasLocaleSwitch(field) && i18n.locales.includes(focus.locale)) {
+    setLocale(key, focus.locale);
+  }
+  void nextTick(() => {
+    revealField(key);
+    reveal(() => form.value?.$el, key);
+  });
+}
+onMounted(() => {
+  if (props.focus) applyFocus(props.focus);
+});
 </script>

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

@@ -1,4 +1,5 @@
 import type { CmsEntry, CmsTab } from '#nuxt-cms';
+import type { CmsSearchFocus } from '../../../shared/search.js';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
@@ -7,6 +8,7 @@ type __VLS_Props = {
     loading?: boolean;
     formId?: string;
     footer?: boolean;
+    focus?: CmsSearchFocus | null;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;

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

@@ -3,6 +3,8 @@ type __VLS_Props = {
     field: FieldConfig;
     slugSource?: string | null;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: unknown;

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

@@ -10,6 +10,8 @@
       v-model="blocksValue"
       :field="field"
       :locale="locale"
+      :entry-name="entryName"
+      :field-key="fieldKey"
    />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
    <CmsTextarea
@@ -50,6 +52,7 @@
       :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" />
    <CmsRelationField
       v-else-if="field.type === 'relation'"
       v-model="relationValue"
@@ -66,7 +69,9 @@ import { computed } from "#imports";
 const props = defineProps({
   field: { type: Object, required: true },
   slugSource: { type: [String, null], required: false },
-  locale: { type: String, required: false }
+  locale: { type: String, required: false },
+  entryName: { type: String, required: false },
+  fieldKey: { type: String, required: false }
 });
 const model = defineModel({ type: null, ...{ required: true } });
 const selectItems = computed(() => [
@@ -97,6 +102,18 @@ const translatable = proxy((v) => v);
 const blocksValue = proxy(
   (v) => v
 );
+function toLocalDateTime(value) {
+  if (typeof value !== "string" || !value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Date(date.getTime() - date.getTimezoneOffset() * 6e4).toISOString().slice(0, 16);
+}
+function fromLocalDateTime(value) {
+  if (!value) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+const localDateTime = proxy(toLocalDateTime, fromLocalDateTime);
 const relationValue = proxy((v) => v);
 const jsonValue = proxy((v) => v);
 </script>