vue-datocms 2.0.0 → 3.0.0

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-import * as vue from 'vue';
-import { PropType, VNodeProps, VNode } from 'vue';
+import * as vue_demi from 'vue-demi';
+import { PropType, VNodeProps, VNode, Ref } from 'vue-demi';
 import { TransformedMeta, RenderMarkRule, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
 import { Record as Record$1, RenderResult, StructuredText as StructuredText$1, Document, Node, RenderRule } from 'datocms-structured-text-utils';
 export { RenderError, Document as StructuredTextDocument, StructuredText as StructuredTextGraphQlResponse } from 'datocms-structured-text-utils';
+import { Options, ConnectionStatus } from 'datocms-listen';
 
 declare type ResponsiveImageType = {
     /** The aspect ratio (width/height) of the image */
@@ -29,7 +30,7 @@ declare type ResponsiveImageType = {
     /** Title attribute (`title`) for the image */
     title?: string;
 };
-declare const Image: vue.DefineComponent<{
+declare const Image: vue_demi.DefineComponent<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
         type: PropType<ResponsiveImageType>;
@@ -62,6 +63,11 @@ declare const Image: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Additional CSS rules to add to the root node */
+    rootStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
     /** Additional CSS rules to add to the image inside the `<picture />` tag */
     pictureStyle: {
         type: ObjectConstructor;
@@ -71,12 +77,35 @@ declare const Image: vue.DefineComponent<{
     explicitWidth: {
         type: BooleanConstructor;
     };
+    /**
+     * The layout behavior of the image as the viewport changes size
+     *
+     * Possible values:
+     *
+     * * `intrinsic`: the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
+     * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
+     * * `responsive` (default): the image will sscasle the dimensions down for smaller viewports and scale up for larger viewports
+     * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
+     **/
+    layout: {
+        type: StringConstructor;
+        default: () => string;
+        validator: (value: string) => boolean;
+    };
+    /** Defines how the image will fit into its parent container when using layout="fill" */
+    objectFit: {
+        type: StringConstructor;
+    };
+    /** Defines how the image is positioned within its parent element when using layout="fill". */
+    objectPosition: {
+        type: StringConstructor;
+    };
 }, {
-    inView: vue.Ref<boolean>;
-    elRef: vue.Ref<HTMLElement | null>;
-    loaded: vue.Ref<boolean>;
+    inView: vue_demi.Ref<boolean>;
+    elRef: vue_demi.Ref<HTMLElement | null>;
+    loaded: vue_demi.Ref<boolean>;
     handleLoad: () => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
         type: PropType<ResponsiveImageType>;
@@ -109,6 +138,11 @@ declare const Image: vue.DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Additional CSS rules to add to the root node */
+    rootStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
     /** Additional CSS rules to add to the image inside the `<picture />` tag */
     pictureStyle: {
         type: ObjectConstructor;
@@ -118,12 +152,37 @@ declare const Image: vue.DefineComponent<{
     explicitWidth: {
         type: BooleanConstructor;
     };
+    /**
+     * The layout behavior of the image as the viewport changes size
+     *
+     * Possible values:
+     *
+     * * `intrinsic`: the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
+     * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
+     * * `responsive` (default): the image will sscasle the dimensions down for smaller viewports and scale up for larger viewports
+     * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
+     **/
+    layout: {
+        type: StringConstructor;
+        default: () => string;
+        validator: (value: string) => boolean;
+    };
+    /** Defines how the image will fit into its parent container when using layout="fill" */
+    objectFit: {
+        type: StringConstructor;
+    };
+    /** Defines how the image is positioned within its parent element when using layout="fill". */
+    objectPosition: {
+        type: StringConstructor;
+    };
 }>>, {
+    explicitWidth: boolean;
     lazyLoad: boolean;
     intersectionTreshold: number;
     intersectionMargin: string;
+    rootStyle: Record<string, any>;
     pictureStyle: Record<string, any>;
-    explicitWidth: boolean;
+    layout: string;
 }>;
 declare const DatocmsImagePlugin: {
     install: (Vue: any) => void;
@@ -151,7 +210,7 @@ declare type RenderRecordLinkContext = {
 declare type RenderBlockContext = {
     record: Record$1;
 };
-declare const StructuredText: vue.DefineComponent<{
+declare const StructuredText: vue_demi.DefineComponent<{
     /** The actual field value you get from DatoCMS **/
     data: {
         type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
@@ -196,7 +255,7 @@ declare const StructuredText: vue.DefineComponent<{
     renderFragment: {
         type: PropType<(children: AdapterReturn[], key: string) => AdapterReturn>;
     };
-}, () => RenderResult<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => RenderResult<(tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     /** The actual field value you get from DatoCMS **/
     data: {
         type: PropType<StructuredText$1<Record$1, Record$1> | Document | Node | null | undefined>;
@@ -246,6 +305,115 @@ declare const DatocmsStructuredTextPlugin: {
     install: (Vue: any) => void;
 };
 
+declare type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, 'onStatusChange' | 'onUpdate' | 'onChannelError'>;
+declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
+    /** Whether the subscription has to be performed or not */
+    enabled?: true;
+    /** The initial data to use while the initial request is being performed */
+    initialData?: QueryResult;
+} & SubscribeToQueryOptions<QueryResult, QueryVariables>;
+declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
+    /** Whether the subscription has to be performed or not */
+    enabled: false;
+    /** The initial data to use while the initial request is being performed */
+    initialData?: QueryResult;
+} & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;
+declare type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
+declare function useQuerySubscription<QueryResult = any, QueryVariables = Record<string, any>>(options: QueryListenerOptions<QueryResult, QueryVariables>): {
+    error: Ref<{
+        code: string;
+        message: string;
+        fatal: boolean;
+        response?: any;
+    } | null>;
+    status: Ref<ConnectionStatus>;
+    data: Ref<QueryResult | null>;
+};
+
+declare type SearchResultInstancesHrefSchema = {
+    page?: {
+        offset?: number;
+        limit?: number;
+        [k: string]: unknown;
+    };
+    filter: {
+        fuzzy?: string;
+        query: string;
+        build_trigger_id?: string;
+        locale?: string;
+        [k: string]: unknown;
+    };
+    [k: string]: unknown;
+};
+declare type SearchResultInstancesTargetSchema = {
+    data: RawSearchResult[];
+    meta: {
+        total_count: number;
+    };
+};
+declare type RawSearchResult = {
+    type: 'search_result';
+    id: string;
+    attributes: {
+        title: string;
+        body_excerpt: string;
+        url: string;
+        score: number;
+        highlight: {
+            title?: string[] | null;
+            body?: string[] | null;
+        };
+    };
+};
+declare class GenericClient {
+    config: {
+        apiToken: string | null;
+    };
+    searchResults: {
+        rawList(queryParams: SearchResultInstancesHrefSchema): Promise<SearchResultInstancesTargetSchema>;
+    };
+}
+declare type UseSiteSearchConfig<Client extends GenericClient> = {
+    client: Client;
+    buildTriggerId: string;
+    fuzzySearch?: boolean;
+    resultsPerPage?: number;
+    initialState?: {
+        locale?: string;
+        page?: number;
+        query?: string;
+    };
+};
+declare type HighlightPiece = {
+    text: string;
+    isMatch: boolean;
+};
+declare type ResultHighlight = HighlightPiece[];
+declare type SearchResult = {
+    id: string;
+    title: string;
+    titleHighlights: ResultHighlight[];
+    bodyExcerpt: string;
+    bodyHighlights: ResultHighlight[];
+    url: string;
+    raw: RawSearchResult;
+};
+declare type UseSiteSearchData = {
+    pageResults: SearchResult[];
+    totalResults: number;
+    totalPages: number;
+};
+declare type UseSiteSearchResult = {
+    state: {
+        query: string;
+        locale: string | undefined;
+        page: number;
+    };
+    data?: Ref<UseSiteSearchData>;
+    error: Ref<string | undefined>;
+};
+declare function useSiteSearch<Client extends GenericClient>(config: UseSiteSearchConfig<Client>): UseSiteSearchResult;
+
 declare type SeoMetaTagType = {
     /** the tag for the meta information */
     tag: string;
@@ -267,4 +435,4 @@ declare const toHead: (...args: ToMetaTagsType[]) => {
     }[];
 };
 
-export { DatocmsImagePlugin, DatocmsStructuredTextPlugin, Image, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, ToMetaTagsType, appendKeyToValidElement, defaultAdapter, toHead };
+export { DatocmsImagePlugin, DatocmsStructuredTextPlugin, DisabledQueryListenerOptions, EnabledQueryListenerOptions, Image, QueryListenerOptions, RawSearchResult, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, SubscribeToQueryOptions, ToMetaTagsType, UseSiteSearchConfig, UseSiteSearchData, UseSiteSearchResult, appendKeyToValidElement, defaultAdapter, toHead, useQuerySubscription, useSiteSearch };