@monkeyplus/flow 6.0.17 → 6.0.18

package/src/runtime/components/MkPicture.d.ts

@@ -1,3 +1,25 @@
+import type { PropType } from 'vue';
+import type { WatermarkOptions } from '../../../modules/images/runtime/types.ts';
+/**
+ * MkPicture
+ *
+ * A modern picture element component that integrates with IPX for automatic
+ * format negotiation (e.g., providing WEBP and AVIF sources based on browser support)
+ * and responsive image sizes.
+ *
+ * Supports standard IPX modifiers for dynamic image processing:
+ * - width / height: resize the image
+ * - quality: set the JPEG/WEBP compression quality (0-100)
+ * - format: convert format (auto, webp, avif, png, jpeg, gif)
+ * - fit: contain, cover, fill, inside, outside
+ * - position: crop position (top, right top, center, etc.)
+ * - background: set background color (hex)
+ * - blur: apply gaussian blur
+ * - grayscale: convert to grayscale
+ * - rotate: rotate image in degrees
+ * - trim: trim borders
+ * - watermark: add watermark composite to the image
+ */
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     src: {
         type: StringConstructor;
@@ -12,7 +34,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     classImg: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<"auto" | "webp" | "jpeg" | "png" | "avif" | "gif">;
         default: undefined;
     };
     quality: {
@@ -24,9 +46,37 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
     fit: {
+        type: PropType<"contain" | "cover" | "fill" | "inside" | "outside">;
+        default: undefined;
+    };
+    blur: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    trim: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"top" | "right top" | "right" | "right bottom" | "bottom" | "left bottom" | "left" | "left top" | "center">;
+        default: undefined;
+    };
+    grayscale: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: undefined;
+    };
+    rotate: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    size: {
         type: StringConstructor;
         default: undefined;
     };
+    watermark: {
+        type: PropType<boolean | string | WatermarkOptions>;
+        default: undefined;
+    };
     modifiers: {
         type: () => Record<string, any>;
         default: undefined;
@@ -102,7 +152,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     classImg: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<"auto" | "webp" | "jpeg" | "png" | "avif" | "gif">;
         default: undefined;
     };
     quality: {
@@ -114,9 +164,37 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
     fit: {
+        type: PropType<"contain" | "cover" | "fill" | "inside" | "outside">;
+        default: undefined;
+    };
+    blur: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    trim: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"top" | "right top" | "right" | "right bottom" | "bottom" | "left bottom" | "left" | "left top" | "center">;
+        default: undefined;
+    };
+    grayscale: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: undefined;
+    };
+    rotate: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    size: {
         type: StringConstructor;
         default: undefined;
     };
+    watermark: {
+        type: PropType<boolean | string | WatermarkOptions>;
+        default: undefined;
+    };
     modifiers: {
         type: () => Record<string, any>;
         default: undefined;
@@ -179,14 +257,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     width: string | number;
     height: string | number;
-    fit: string;
-    format: string;
+    fit: "contain" | "cover" | "fill" | "inside" | "outside";
+    format: "auto" | "webp" | "jpeg" | "png" | "avif" | "gif";
+    quality: string | number;
+    background: string;
+    blur: string | number;
+    trim: string | number;
+    position: "top" | "right top" | "right" | "right bottom" | "bottom" | "left bottom" | "left" | "left top" | "center";
+    grayscale: string | boolean;
+    rotate: string | number;
+    size: string;
+    watermark: string | boolean | WatermarkOptions;
     provider: string;
     preset: string;
     modifiers: Record<string, any>;
     sizes: string | Record<string, any>;
-    background: string;
-    quality: string | number;
     strappi: boolean;
     alt: string;
     referrerpolicy: string;
@@ -194,9 +279,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     longdesc: string;
     ismap: boolean;
     loading: string;
+    title: string;
     sync: boolean;
     thumbnail: string | boolean;
-    title: string;
     legacyFormat: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/src/runtime/components/MkPicture.mjs

@@ -1,6 +1,6 @@
 import { computed, defineComponent, h } from "vue";
 import { getFileExtension, screens } from "../../../modules/images/runtime/helpers.mjs";
-import { useImage, useLazySizes } from "./image-shared.mjs";
+import { useImage } from "./image-shared.mjs";
 function getLocalSource(src) {
   return src.startsWith("http") ? "" : src;
 }
@@ -28,6 +28,13 @@ export default defineComponent({
     quality: { type: [Number, String], default: void 0 },
     background: { type: String, default: void 0 },
     fit: { type: String, default: void 0 },
+    blur: { type: [Number, String], default: void 0 },
+    trim: { type: [Number, String], default: void 0 },
+    position: { type: String, default: void 0 },
+    grayscale: { type: [Boolean, String], default: void 0 },
+    rotate: { type: [Number, String], default: void 0 },
+    size: { type: String, default: void 0 },
+    watermark: { type: [Boolean, String, Object], default: void 0 },
     modifiers: {
       type: Object,
       default: void 0
@@ -119,7 +126,6 @@ export default defineComponent({
       }, nOption.value);
       return typeof thumbnail === "string" ? thumbnail : resolvedSrc.value;
     });
-    useLazySizes(() => !isRuntimeLambda() && !!nThumbnail.value);
     return () => {
       if (isRuntimeLambda()) {
         return h("img", {

package/src/runtime/components/image-shared.d.ts

@@ -6,7 +6,6 @@ export interface InjectedImageUtils {
     getImageOptions?: () => FlowImageOptions | undefined;
 }
 export declare function useInjectedImageUtils(): InjectedImageUtils;
-export declare function useLazySizes(enabled: () => unknown): void;
 export declare function createBootImageUtils(boot?: FlowBootPayload): InjectedImageUtils;
 export declare function useImage(props: Record<string, any>): {
     imageUtils: InjectedImageUtils;

package/src/runtime/components/image-shared.mjs

@@ -1,25 +1,9 @@
-import { computed, inject, watchEffect } from "vue";
+import { computed, inject } from "vue";
 import { getNormalName, parseSize } from "../../../modules/images/runtime/helpers.mjs";
 import { createImageResolver } from "../../../modules/images/runtime/image.mjs";
-let lazySizesLoadPromise;
-function loadLazySizes() {
-  if (lazySizesLoadPromise) {
-    return lazySizesLoadPromise;
-  }
-  lazySizesLoadPromise = import("lazysizes");
-  return lazySizesLoadPromise;
-}
 export function useInjectedImageUtils() {
   return inject("utils", {});
 }
-export function useLazySizes(enabled) {
-  watchEffect(() => {
-    if (typeof window === "undefined" || !enabled()) {
-      return;
-    }
-    void loadLazySizes();
-  });
-}
 function isAbsoluteImageUrl(value) {
   return /^https?:\/\//i.test(value) || value.startsWith("data:");
 }
@@ -75,7 +59,14 @@ export function useImage(props) {
     format: props.format,
     quality: props.quality,
     background: props.background,
-    fit: props.fit
+    fit: props.fit,
+    blur: props.blur,
+    trim: props.trim,
+    position: props.position,
+    grayscale: props.grayscale,
+    rotate: props.rotate,
+    size: props.size,
+    watermark: typeof props.watermark === "object" && props.watermark !== null ? "b64" + (typeof btoa !== "undefined" ? btoa(unescape(encodeURIComponent(JSON.stringify(props.watermark)))) : "") : props.watermark
   }));
   const nOption = computed(() => ({
     provider: props.provider,

package/src/runtime/config.d.ts

@@ -1,5 +1,7 @@
+import type { NitroConfig } from 'nitro/types';
 import type { Options as AutoimportOptions } from 'unplugin-auto-import/types';
 import type { Options as ComponentOptions } from 'unplugin-vue-components/types';
+import type { NetlifyCmsModuleOptions } from '../../modules/cms/module.ts';
 import type { FlowImagesModuleOptions } from '../../modules/images/runtime/types.ts';
 export interface FlowDirEntry {
     dir: string;
@@ -59,26 +61,15 @@ export type UserFlowConfig = Partial<FlowConfig> & Record<string, unknown> & {
     };
     locale?: Partial<FlowLocaleConfig>;
     images?: Partial<FlowImagesModuleOptions>;
+    cms?: Partial<NetlifyCmsModuleOptions>;
     server?: FlowServerConfig;
     siteUrl?: string;
     components?: Partial<ComponentOptions>;
     autoImport?: Partial<AutoimportOptions>;
 };
-export interface FlowModuleNitroConfig extends Record<string, unknown> {
-    hooks: Record<string, unknown>;
-    plugins: string[];
-    handlers: Array<Record<string, unknown>>;
-    routeRules: Record<string, Record<string, unknown>>;
-    runtimeConfig: Record<string, unknown>;
-    virtual: Record<string, string | (() => string | Promise<string>)>;
-    imports?: {
-        imports: Array<{
-            name: string;
-            from: string;
-            as?: string;
-        }>;
-    };
-}
+export type FlowModuleNitroConfig = NitroConfig & {
+    runtimeConfig: any;
+};
 export interface FlowModuleViteConfig extends Record<string, unknown> {
     plugins: unknown[];
     resolve: {

package/src/runtime/head.d.ts

@@ -1,3 +1,4 @@
+import { useSchemaOrg } from '@unhead/schema-org-vue';
 import { useHead, useSeoMeta } from '@unhead/vue';
 export declare function getClientHead(): import("@unhead/vue").VueHeadClient<import("@unhead/vue").UseHeadInput<_Deprecated>, boolean>;
-export { useHead, useSeoMeta };
+export { useHead, useSchemaOrg, useSeoMeta };

package/src/runtime/head.mjs

@@ -1,7 +1,10 @@
-import { createHead } from "@unhead/vue/client";
+import { UnheadSchemaOrg } from "@unhead/schema-org";
+import { useSchemaOrg } from "@unhead/schema-org-vue";
 import { useHead, useSeoMeta } from "@unhead/vue";
+import { createHead } from "@unhead/vue/client";
 const clientHead = createHead();
+clientHead.use(UnheadSchemaOrg());
 export function getClientHead() {
   return clientHead;
 }
-export { useHead, useSeoMeta };
+export { useHead, useSchemaOrg, useSeoMeta };

package/src/runtime/islands.mjs

@@ -1,5 +1,5 @@
 import islands from "virtual:flow/islands";
-import { createSSRApp } from "vue";
+import { createSSRApp, h, defineComponent } from "vue";
 import { createBootImageUtils } from "./components/image-shared.mjs";
 import { getClientHead } from "./head.mjs";
 import { installFlowVuePlugins } from "./vue.mjs";
@@ -39,7 +39,25 @@ async function hydrateIsland(element, boot) {
   if (!mod.default) {
     return;
   }
-  const app = createSSRApp(mod.default, props);
+  const slotNamesStr = element.dataset.flowSlots;
+  const clientSlots = {};
+  if (slotNamesStr) {
+    const slotNames = slotNamesStr.split(",");
+    for (const name of slotNames) {
+      const slotEl = element.querySelector(`div[data-flow-slot-template="${name}"]`);
+      if (slotEl) {
+        const html = slotEl.innerHTML;
+        clientSlots[name] = () => h("div", { "data-flow-slot": name, style: "display: contents;", innerHTML: html });
+      }
+    }
+  }
+  const RootComponent = defineComponent({
+    name: "FlowIslandRoot",
+    setup() {
+      return () => h(mod.default, props, Object.keys(clientSlots).length > 0 ? clientSlots : void 0);
+    }
+  });
+  const app = createSSRApp(RootComponent);
   const imageUtils = createBootImageUtils(boot);
   app.use(getClientHead());
   app.provide("utils", imageUtils);

package/src/runtime/page-discovery.mjs

@@ -1,7 +1,11 @@
 import { existsSync, readdirSync } from "node:fs";
 import { resolve } from "node:path";
 import { createJiti } from "jiti";
+import { queryContent } from "../public/query-content.mjs";
+import { useSchemaOrg } from "./head.mjs";
+import { defineLayoutContext } from "./layout-context.mjs";
 import { localizeRoutePattern, normalizePath, toPublicRoute } from "./locale-routing.mjs";
+import { definePage } from "./pages.mjs";
 const jiti = createJiti(import.meta.url, {
   fsCache: false,
   moduleCache: false
@@ -120,10 +124,14 @@ export async function loadPageDefinitions(projectRoot, flowConfig) {
   const files = pageDirs.flatMap((pagesDir) => collectFiles(pagesDir));
   const pages = [];
   for (const filePath of files) {
+    globalThis.definePage = definePage;
+    globalThis.queryContent = queryContent;
+    globalThis.useSchemaOrg = useSchemaOrg;
+    globalThis.defineLayoutContext = defineLayoutContext;
     const loaded = await jiti.import(filePath, { default: true });
     const definitions = Array.isArray(loaded) ? loaded : [loaded];
     for (const definition of definitions) {
-      if (definition) {
+      if (definition && typeof definition === "object" && "name" in definition && "locales" in definition) {
         pages.push(definition);
       }
     }

package/src/runtime/pages.d.ts

@@ -8,28 +8,28 @@ export interface FlowLocale {
 export interface LegacySeoDefinition {
     title?: string;
     /**
-   * @deprecated
-   */
+     * @deprecated
+     */
     description?: string;
     /**
-   * @deprecated
-   */
+     * @deprecated
+     */
     keywords?: string;
     /**
-   * @deprecated
-   */
+     * @deprecated
+     */
     imageSocial?: string;
     /**
-   * @deprecated
-   */
+     * @deprecated
+     */
     twitterSite?: string;
     /**
-   * @deprecated
-   */
+     * @deprecated
+     */
     google?: boolean;
     /**
-   * @deprecated
-   */
+     * @deprecated
+     */
     twitter?: boolean;
     /**
      * @deprecated
@@ -81,7 +81,7 @@ export type PageContextGetImage = ((input: string, modifiers?: Record<string, an
 };
 export interface PageViewDefinition {
     bundle?: string;
-    template: string;
+    template?: string;
     layout?: string;
     base?: string;
     mode?: FlowHydrationMode;
@@ -103,6 +103,7 @@ export interface PageContextInput {
     params: Record<string, string>;
     dynamic?: DynamicRouteEntry;
     utils: PageContextUtils;
+    preview?: boolean;
 }
 export interface PageLocaleDefinition {
     url: string;

package/src/runtime/virtual-pages.mjs

@@ -1,6 +1,6 @@
-import { parse } from "vue/compiler-sfc";
-import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { basename, extname, resolve } from "node:path";
+import { parse } from "vue/compiler-sfc";
 function collectFiles(rootDir, extensions, currentDir = rootDir) {
   const entries = readdirSync(currentDir, { withFileTypes: true });
   const files = [];