@prismicio/vue 3.0.0-alpha.2 → 3.0.0-alpha.6

package/README.md

@@ -1,6 +1,53 @@
+<!--
+
+Replace all on all files (README.md, CONTRIBUTING.md, bug_report.md, package.json):
+- @prismicio/vue
+- Vue plugin, components, and composables to fetch and present Prismic content
+- prismicio/prismic-vue
+- prismic-vue
+
+-->
+
 # @prismicio/vue
 
-[WIP]
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
+[![Codecov][codecov-src]][codecov-href]
+[![Conventional Commits][conventional-commits-src]][conventional-commits-href]
+[![License][license-src]][license-href]
+
+<!-- TODO: Replacing link to Prismic with [Prismic][prismic] is useful here -->
+
+[Vue][vue] plugin, components, and composables to fetch and present [Prismic][prismic] content.
+
+- 📝 &nbsp;Display content from Prismic like [Rich Text][prismic-rich-text] and [Link][prismic-link] fields;
+- 🍡 &nbsp;Render Prismic [Slice Zones][prismic-slices] declaratively with Vue components;
+- 🎣 &nbsp;Fetch Prismic content using Vue [composition API][composition-api] or [options-api].
+
+## Install
+
+```bash
+npm install @prismicio/vue
+```
+
+## Documentation
+
+To discover what's new on this package check out [the changelog][changelog]. For full documentation, visit the [official Prismic documentation][prismic-docs].
+
+## Contributing
+
+Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Prismic developer community!
+
+**Asking a question**: [Open a new topic][forum-question] on our community forum explaining what you want to achieve / your question. Our support team will get back to you shortly.
+
+**Reporting a bug**: [Open an issue][repo-bug-report] explaining your application's setup and the bug you're encountering.
+
+**Suggesting an improvement**: [Open an issue][repo-feature-request] explaining your improvement or feature so we can discuss and learn more.
+
+**Submitting code changes**: For small fixes, feel free to [open a pull request][repo-pull-requests] with a description of your changes. For large changes, please first [open an issue][repo-feature-request] so we can discuss if and how the changes should be implemented.
+
+For more clarity on this project and its structure you can also check out the detailed [CONTRIBUTING.md][contributing] document.
 
 ## License
 
@@ -19,3 +66,41 @@
    See the License for the specific language governing permissions and
    limitations under the License.
 ```
+
+<!-- Links -->
+
+[prismic]: https://prismic.io
+
+<!-- TODO: Replace link with a more useful one if available -->
+
+[prismic-docs]: https://prismic.io/docs/technologies/vuejs
+[changelog]: ./CHANGELOG.md
+[contributing]: ./CONTRIBUTING.md
+[vue]: https://v3.vuejs.org
+[prismic-rich-text]: https://prismic.io/docs/core-concepts/rich-text-title
+[prismic-link]: https://prismic.io/docs/core-concepts/link-content-relationship
+[prismic-slices]: https://prismic.io/docs/core-concepts/slices
+[vue-composition]: https://v3.vuejs.org/guide/composition-api-introduction.html
+[vue-options]: https://v3.vuejs.org/guide/introduction.html
+
+<!-- TODO: Replace link with a more useful one if available -->
+
+[forum-question]: https://community.prismic.io/c/kits-and-dev-languages/vue-js/16
+[repo-bug-report]: https://github.com/prismicio/prismic-vue/issues/new?assignees=&labels=bug&template=bug_report.md&title=
+[repo-feature-request]: https://github.com/prismicio/prismic-vue/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=
+[repo-pull-requests]: https://github.com/prismicio/prismic-vue/pulls
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@prismicio/vue/latest.svg
+[npm-version-href]: https://npmjs.com/package/@prismicio/vue
+[npm-downloads-src]: https://img.shields.io/npm/dm/@prismicio/vue.svg
+[npm-downloads-href]: https://npmjs.com/package/@prismicio/vue
+[github-actions-ci-src]: https://github.com/prismicio/prismic-vue/workflows/ci/badge.svg
+[github-actions-ci-href]: https://github.com/prismicio/prismic-vue/actions?query=workflow%3Aci
+[codecov-src]: https://img.shields.io/codecov/c/github/prismicio/prismic-vue.svg
+[codecov-href]: https://codecov.io/gh/prismicio/prismic-vue
+[conventional-commits-src]: https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg
+[conventional-commits-href]: https://conventionalcommits.org
+[license-src]: https://img.shields.io/npm/l/@prismicio/vue.svg
+[license-href]: https://npmjs.com/package/@prismicio/vue

package/dist/index.cjs

@@ -6,40 +6,31 @@ const client = require('@prismicio/client');
 const helpers = require('@prismicio/helpers');
 const vue = require('vue');
 const vueRouter = require('vue-router');
-const escapeHTML = require('escape-html');
-const types = require('@prismicio/types');
-const richtext = require('@prismicio/richtext');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
 	if (e && e.__esModule) return e;
-	var n = Object.create(null);
+	const n = Object.create(null);
 	if (e) {
-		Object.keys(e).forEach(function (k) {
+		for (const k in e) {
 			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
+				const d = Object.getOwnPropertyDescriptor(e, k);
 				Object.defineProperty(n, k, d.get ? d : {
 					enumerable: true,
-					get: function () {
-						return e[k];
-					}
+					get: function () { return e[k]; }
 				});
 			}
-		});
+		}
 	}
-	n['default'] = e;
+	n["default"] = e;
 	return Object.freeze(n);
 }
 
-const escapeHTML__default = /*#__PURE__*/_interopDefaultLegacy(escapeHTML);
-
 const simplyResolveComponent = (component) => {
   return vue.resolveDynamicComponent(component);
 };
 
 const defaultWrapper$2 = "div";
-const PrismicEmbedImpl = vue.defineComponent({
+const PrismicEmbedImpl = /* @__PURE__ */ vue.defineComponent({
   name: "PrismicEmbed",
   props: {
     field: {
@@ -75,7 +66,7 @@ const usePrismic = () => {
 };
 
 const defaultImageComponent = "img";
-const PrismicImageImpl = vue.defineComponent({
+const PrismicImageImpl = /* @__PURE__ */ vue.defineComponent({
   name: "PrismicImage",
   props: {
     field: {
@@ -156,19 +147,35 @@ const usePrismicLink = (props) => {
     return href.value && isInternalURL(href.value) && !target.value ? internalComponent : externalComponent;
   });
   const href = vue.computed(() => {
-    var _a, _b, _c;
+    var _a, _b;
     const field = vue.unref(props.field);
     const linkResolver = (_a = vue.unref(props.linkResolver)) != null ? _a : options.linkResolver;
-    return "data" in field && field.data ? (_b = helpers.documentAsLink(field, linkResolver)) != null ? _b : "" : (_c = helpers.asLink(field, linkResolver)) != null ? _c : "";
+    return (_b = helpers.asLink(field, linkResolver)) != null ? _b : "";
   });
   const target = vue.computed(() => {
     const field = vue.unref(props.field);
-    return vue.unref(props.target) || (field && "target" in field && field.target ? field.target : null);
+    const target2 = vue.unref(props.target);
+    if (typeof target2 !== "undefined") {
+      return target2;
+    } else {
+      return field && "target" in field && field.target ? field.target : null;
+    }
   });
   const rel = vue.computed(() => {
     var _a;
-    const field = vue.unref(props.field);
-    return vue.unref(props.rel) || (target.value === "_blank" && field && "target" in field && field ? vue.unref(props.blankTargetRelAttribute) || ((_a = options.components) == null ? void 0 : _a.linkBlankTargetRelAttribute) || defaultBlankTargetRelAttribute : null);
+    const rel2 = vue.unref(props.rel);
+    if (typeof rel2 !== "undefined") {
+      return rel2;
+    } else if (target.value === "_blank") {
+      const blankTargetRelAttribute = vue.unref(props.blankTargetRelAttribute);
+      if (typeof blankTargetRelAttribute !== "undefined") {
+        return blankTargetRelAttribute;
+      } else {
+        return typeof ((_a = options.components) == null ? void 0 : _a.linkBlankTargetRelAttribute) !== "undefined" ? options.components.linkBlankTargetRelAttribute : defaultBlankTargetRelAttribute;
+      }
+    } else {
+      return null;
+    }
   });
   return {
     type,
@@ -177,7 +184,7 @@ const usePrismicLink = (props) => {
     rel
   };
 };
-const PrismicLinkImpl = vue.defineComponent({
+const PrismicLinkImpl = /* @__PURE__ */ vue.defineComponent({
   name: "PrismicLink",
   props: {
     field: {
@@ -242,7 +249,7 @@ const usePrismicText = (props) => {
     text
   };
 };
-const PrismicTextImpl = vue.defineComponent({
+const PrismicTextImpl = /* @__PURE__ */ vue.defineComponent({
   name: "PrismicText",
   props: {
     field: {
@@ -276,43 +283,19 @@ const PrismicTextImpl = vue.defineComponent({
 const PrismicText = PrismicTextImpl;
 
 const defaultWrapper = "div";
-const serializeVueHyperlink = (linkResolver, node, children) => {
-  switch (node.data.link_type) {
-    case types.LinkType.Web: {
-      return `<a href="${escapeHTML__default['default'](node.data.url)}" target="${node.data.target}" rel="noopener noreferrer">${children.join("")}</a>`;
-    }
-    case types.LinkType.Document: {
-      return `<a data-router-link href="${helpers.asLink(node.data, linkResolver)}">${children.join("")}</a>`;
-    }
-    case types.LinkType.Media: {
-      return `<a href="${node.data.url}">${children.join("")}</a>`;
-    }
-  }
-};
 const usePrismicRichText = (props) => {
   const { options } = usePrismic();
   const html = vue.computed(() => {
     var _a, _b;
     const linkResolver = (_a = vue.unref(props.linkResolver)) != null ? _a : options.linkResolver;
-    const maybeSerializer = (_b = vue.unref(props.htmlSerializer)) != null ? _b : options.htmlSerializer;
-    let serializer = (_type, node, _content, children, _key) => {
-      switch (node.type) {
-        case helpers.Element.hyperlink:
-          return serializeVueHyperlink(linkResolver, node, children);
-        default:
-          return null;
-      }
-    };
-    if (maybeSerializer) {
-      serializer = richtext.composeSerializers(typeof maybeSerializer === "object" ? richtext.wrapMapSerializer(maybeSerializer) : maybeSerializer, serializer);
-    }
-    return helpers.asHTML(vue.unref(props.field), linkResolver, serializer);
+    const htmlSerializer = (_b = vue.unref(props.htmlSerializer)) != null ? _b : options.htmlSerializer;
+    return helpers.asHTML(vue.unref(props.field), linkResolver, htmlSerializer);
   });
   return {
     html
   };
 };
-const PrismicRichTextImpl = vue.defineComponent({
+const PrismicRichTextImpl = /* @__PURE__ */ vue.defineComponent({
   name: "PrismicRichText",
   props: {
     field: {
@@ -343,31 +326,29 @@ const PrismicRichTextImpl = vue.defineComponent({
     const root = vue.ref(null);
     const maybeRouter = vue.inject(vueRouter.routerKey, null);
     if (maybeRouter) {
-      let links = null;
-      const navigate = (event) => {
-        let target = event.target;
-        let i = 0;
-        while (i < 5 && target && !(target instanceof HTMLAnchorElement) && target.parentNode) {
-          target = target.parentNode;
-          i++;
-        }
-        if (!(target instanceof HTMLAnchorElement)) {
-          return;
-        }
-        const href = target.getAttribute("href");
-        if (href && isInternalURL(href)) {
-          event.preventDefault();
-          maybeRouter.push(href);
-        }
+      let links = [];
+      const navigate = function(event) {
+        event.preventDefault();
+        maybeRouter.push(this.href);
       };
       const addListeners = () => {
         const node = root.value && "$el" in root.value ? root.value.$el : root.value;
-        links = node && node.querySelectorAll && node.querySelectorAll("a[data-router-link]");
-        links && links.forEach((link) => link.addEventListener("click", navigate));
+        if (node && "querySelectorAll" in node) {
+          links = Array.from(node.querySelectorAll("a")).map((element) => {
+            const href = element.getAttribute("href");
+            if (href && isInternalURL(href)) {
+              const listener = navigate.bind({ href });
+              element.addEventListener("click", listener);
+              return { element, listener };
+            } else {
+              return false;
+            }
+          }).filter((link) => link);
+        }
       };
       const removeListeners = () => {
-        links == null ? void 0 : links.forEach((link) => link.removeEventListener("click", navigate));
-        links = null;
+        links.forEach(({ element, listener }) => element.removeEventListener("click", listener));
+        links = [];
       };
       vue.watch(html, () => {
         removeListeners();
@@ -410,7 +391,7 @@ const getSliceComponentProps = (propsHint) => ({
     required: true
   }
 });
-const TODOSliceComponent = __PRODUCTION__ ? () => null : vue.defineComponent({
+const TODOSliceComponent = __PRODUCTION__ ? () => null : /* @__PURE__ */ vue.defineComponent({
   name: "TODOSliceCOmponent",
   props: getSliceComponentProps(),
   setup(props) {
@@ -427,7 +408,7 @@ const TODOSliceComponent = __PRODUCTION__ ? () => null : vue.defineComponent({
     };
   }
 });
-const getSliceZoneComponents = (components) => {
+const defineSliceZoneComponents = (components) => {
   const result = {};
   let type;
   for (type in components) {
@@ -436,7 +417,7 @@ const getSliceZoneComponents = (components) => {
   }
   return result;
 };
-const SliceZoneImpl = vue.defineComponent({
+const SliceZoneImpl = /* @__PURE__ */ vue.defineComponent({
   name: "SliceZone",
   props: {
     slices: {
@@ -445,7 +426,13 @@ const SliceZoneImpl = vue.defineComponent({
     },
     components: {
       type: Object,
-      required: true
+      default: void 0,
+      required: false
+    },
+    resolver: {
+      type: Function,
+      default: void 0,
+      required: false
     },
     context: {
       type: null,
@@ -471,8 +458,19 @@ const SliceZoneImpl = vue.defineComponent({
     const renderedSlices = vue.computed(() => {
       return props.slices.map((slice, index) => {
         var _a;
-        const component = slice.slice_type in props.components ? props.components[slice.slice_type] : props.defaultComponent || ((_a = options.components) == null ? void 0 : _a.sliceZoneDefaultComponent) || TODOSliceComponent;
+        let component = props.components && slice.slice_type in props.components ? props.components[slice.slice_type] : props.defaultComponent || ((_a = options.components) == null ? void 0 : _a.sliceZoneDefaultComponent) || TODOSliceComponent;
+        if (props.resolver) {
+          const resolvedComponent = props.resolver({
+            slice,
+            sliceName: slice.slice_type,
+            i: index
+          });
+          if (resolvedComponent) {
+            component = resolvedComponent;
+          }
+        }
         const p = {
+          key: `${slice.slice_type}-${index}`,
           slice,
           index,
           context: props.context,
@@ -534,10 +532,7 @@ const createPrismic = (options) => {
       return helpers.asLink(linkField, linkResolver || options.linkResolver);
     },
     asDate: helpers.asDate,
-    documentToLinkField: helpers.documentToLinkField,
-    documentAsLink: (prismicDocument, linkResolver) => {
-      return helpers.documentAsLink(prismicDocument, linkResolver || options.linkResolver);
-    }
+    documentToLinkField: helpers.documentToLinkField
   };
   const prismic = {
     options,
@@ -600,18 +595,22 @@ const useStatefulPrismicClientMethod = (methodName, args) => {
 
 const usePrismicDocuments = (...args) => useStatefulPrismicClientMethod("get", args);
 const useFirstPrismicDocument = (...args) => useStatefulPrismicClientMethod("getFirst", args);
-const useAllPrismicDocuments = (...args) => useStatefulPrismicClientMethod("getAll", args);
 const usePrismicDocumentByID = (...args) => useStatefulPrismicClientMethod("getByID", args);
 const usePrismicDocumentsByIDs = (...args) => useStatefulPrismicClientMethod("getByIDs", args);
 const useAllPrismicDocumentsByIDs = (...args) => useStatefulPrismicClientMethod("getAllByIDs", args);
 const usePrismicDocumentByUID = (...args) => useStatefulPrismicClientMethod("getByUID", args);
+const usePrismicDocumentsByUIDs = (...args) => useStatefulPrismicClientMethod("getByUIDs", args);
+const useAllPrismicDocumentsByUIDs = (...args) => useStatefulPrismicClientMethod("getAllByUIDs", args);
 const useSinglePrismicDocument = (...args) => useStatefulPrismicClientMethod("getSingle", args);
 const usePrismicDocumentsByType = (...args) => useStatefulPrismicClientMethod("getByType", args);
 const useAllPrismicDocumentsByType = (...args) => useStatefulPrismicClientMethod("getAllByType", args);
 const usePrismicDocumentsByTag = (...args) => useStatefulPrismicClientMethod("getByTag", args);
 const useAllPrismicDocumentsByTag = (...args) => useStatefulPrismicClientMethod("getAllByTag", args);
-const usePrismicDocumentsByTags = (...args) => useStatefulPrismicClientMethod("getByTags", args);
-const useAllPrismicDocumentsByTags = (...args) => useStatefulPrismicClientMethod("getAllByTags", args);
+const usePrismicDocumentsByEveryTag = (...args) => useStatefulPrismicClientMethod("getByEveryTag", args);
+const useAllPrismicDocumentsByEveryTag = (...args) => useStatefulPrismicClientMethod("getAllByEveryTag", args);
+const usePrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMethod("getBySomeTags", args);
+const useAllPrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMethod("getAllBySomeTags", args);
+const dangerouslyUseAllPrismicDocuments = (...args) => useStatefulPrismicClientMethod("dangerouslyGetAll", args);
 
 exports.PrismicEmbed = PrismicEmbed;
 exports.PrismicImage = PrismicImage;
@@ -622,24 +621,29 @@ exports.SliceZone = SliceZone;
 exports.SliceZoneImpl = SliceZoneImpl;
 exports.TODOSliceComponent = TODOSliceComponent;
 exports.createPrismic = createPrismic;
+exports.dangerouslyUseAllPrismicDocuments = dangerouslyUseAllPrismicDocuments;
+exports.defineSliceZoneComponents = defineSliceZoneComponents;
 exports.getSliceComponentProps = getSliceComponentProps;
-exports.getSliceZoneComponents = getSliceZoneComponents;
 exports.prismicKey = prismicKey;
-exports.useAllPrismicDocuments = useAllPrismicDocuments;
+exports.useAllPrismicDocumentsByEveryTag = useAllPrismicDocumentsByEveryTag;
 exports.useAllPrismicDocumentsByIDs = useAllPrismicDocumentsByIDs;
+exports.useAllPrismicDocumentsBySomeTags = useAllPrismicDocumentsBySomeTags;
 exports.useAllPrismicDocumentsByTag = useAllPrismicDocumentsByTag;
-exports.useAllPrismicDocumentsByTags = useAllPrismicDocumentsByTags;
 exports.useAllPrismicDocumentsByType = useAllPrismicDocumentsByType;
+exports.useAllPrismicDocumentsByUIDs = useAllPrismicDocumentsByUIDs;
 exports.useFirstPrismicDocument = useFirstPrismicDocument;
 exports.usePrismic = usePrismic;
 exports.usePrismicDocumentByID = usePrismicDocumentByID;
 exports.usePrismicDocumentByUID = usePrismicDocumentByUID;
 exports.usePrismicDocuments = usePrismicDocuments;
+exports.usePrismicDocumentsByEveryTag = usePrismicDocumentsByEveryTag;
 exports.usePrismicDocumentsByIDs = usePrismicDocumentsByIDs;
+exports.usePrismicDocumentsBySomeTags = usePrismicDocumentsBySomeTags;
 exports.usePrismicDocumentsByTag = usePrismicDocumentsByTag;
-exports.usePrismicDocumentsByTags = usePrismicDocumentsByTags;
 exports.usePrismicDocumentsByType = usePrismicDocumentsByType;
+exports.usePrismicDocumentsByUIDs = usePrismicDocumentsByUIDs;
 exports.usePrismicLink = usePrismicLink;
 exports.usePrismicRichText = usePrismicRichText;
 exports.usePrismicText = usePrismicText;
 exports.useSinglePrismicDocument = useSinglePrismicDocument;
+//# sourceMappingURL=index.cjs.map