Skip to content

Commit

Permalink
refactor!: <PrismicText />
Browse files Browse the repository at this point in the history
  • Loading branch information
lihbr committed Dec 4, 2024
1 parent 34f121a commit a4cc1a5
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 202 deletions.
165 changes: 0 additions & 165 deletions src/components/PrismicText.ts

This file was deleted.

66 changes: 66 additions & 0 deletions src/components/PrismicText.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<script lang="ts" setup>
import type { RichTextField } from "@prismicio/client"
import { asText, isFilled } from "@prismicio/client"
import { watchEffect } from "vue"
import { devMsg } from "../lib/devMsg"
import type { ComponentOrTagName } from "../types"
/**
* Props for `<PrismicText />`.
*/
export type PrismicTextProps = {
/**
* The Prismic Rich Text field to render.
*/
field: RichTextField | null | undefined
/**
* The string value to be rendered when the field is empty. If a fallback is
* not given, `""` (nothing) will be rendered.
*/
fallback?: string
/**
* The separator used between blocks.
*
* @defaultValue `" "` (a whitespace)
*/
separator?: string
/**
* An HTML tag name, a component, or a functional component used to wrap the
* output.
*
* @defaultValue `"template"` (no wrapper)
*/
wrapper?: ComponentOrTagName
}
const props = defineProps<PrismicTextProps>()
defineOptions({ name: "PrismicText" })
if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
watchEffect(() => {
if (typeof props.field === "string") {
throw new Error(
`[PrismicText] The "field" prop only accepts a Rich Text or Title field's value but was provided a different type of field instead (e.g. a Key Text or Select field). You can resolve this error by rendering the field value inline without <PrismicText>. For more details, see ${devMsg(
"prismictext-works-only-with-rich-text-and-title-fields",
)}`,
)
}
}, {})
}
</script>

<template>
<template v-if="isFilled.richText(field) || fallback">
<Component v-if="wrapper" :is="wrapper">
{{ asText(field) || fallback }}
</Component>
<template v-else>
{{ asText(field) || fallback }}
</template>
</template>
</template>
Loading

0 comments on commit a4cc1a5

Please sign in to comment.