diff --git a/components/fsxa/richtext/Link.tsx b/components/fsxa/richtext/Link.tsx index 337adf0..dda7f22 100644 --- a/components/fsxa/richtext/Link.tsx +++ b/components/fsxa/richtext/Link.tsx @@ -1,40 +1,58 @@ +import type { Link as RichTextLink, Reference, CaaSApi_Option } from 'fsxa-api' import { FSXABaseRichTextElement } from 'fsxa-pattern-library' import { Component } from 'vue-property-decorator' -export type Data = { - type: 'internal_link' +export interface InternalLink extends RichTextLink { + template: 'internal_link' data: { - lt_link: { - value: { - identifier: string - } - } + lt_link: Reference + lt_text: string } } + +export interface ExternalLink extends RichTextLink { + template: 'external_link' + data: { + lt_url: string + lt_text: string + lt_link_behavior: CaaSApi_Option + } +} + @Component({ name: 'RichTextLink' }) -class Link extends FSXABaseRichTextElement { +class Link extends FSXABaseRichTextElement { render() { - return ( - { - event.preventDefault() - this.triggerRouteChange({ - pageId: this.data.data.lt_link.value.identifier - }) - }} - > - {this.renderContent()} - - ) + switch (this.data.template) { + case 'internal_link': + return ( + { + event.preventDefault() + this.triggerRouteChange({ + pageId: (this.data as InternalLink).data.lt_link.referenceId + }) + }} + > + {this.renderContent()} + + ) + case 'external_link': + return ( + + {this.renderContent()} + + ) + } } } export default Link diff --git a/docs/modules/ROOT/pages/components/FSXABaseRichTextElement.adoc b/docs/modules/ROOT/pages/components/FSXABaseRichTextElement.adoc index f607500..2633dd6 100644 --- a/docs/modules/ROOT/pages/components/FSXABaseRichTextElement.adoc +++ b/docs/modules/ROOT/pages/components/FSXABaseRichTextElement.adoc @@ -22,7 +22,7 @@ To use this base component a new class has to be created which extends the `FSXA class Component extends FSXABaseRichTextElement {} ---- -If you want to have type support for your data you can provide an interface and pass it as an generic like here the `Data` interface. +If you want to have type support for your data you can provide an interface and pass it as an generic like here the `Data` interface or extend the `Link` interface in case of Links. [source,javascript] ---- @@ -34,7 +34,7 @@ class Component extends FSXABaseRichTextElement {} === `data` - Object -Returns all available data attributes, for example the `data-fs-style` to determinate the styling. +Returns all available data attributes, for example the `data-fs-style` to determinate the styling, respectively this is a `Link` and contains nested data that is maintained in FirstSpirit. === `content` - Array diff --git a/package-lock.json b/package-lock.json index b0e26d2..58d8600 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7245,7 +7245,7 @@ "array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", - "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" }, "array-ify": { "version": "1.0.0", @@ -13518,9 +13518,9 @@ "optional": true }, "fsxa-api": { - "version": "9.0.2", - "resolved": "https://registry.npmjs.org/fsxa-api/-/fsxa-api-9.0.2.tgz", - "integrity": "sha512-P4eACccttYnxSF9pODEFYraCVN3VdaQD7OEy+oIS4U52QiX1csyH7G0tW7mNvCGARudkjOhsohK4MdmEfVu6aw==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/fsxa-api/-/fsxa-api-10.0.0.tgz", + "integrity": "sha512-bf0xUNXbp083b7PRZYVW7g8NdfSPwaucyV980uar0X6887PE9P0XGZxNH9IKoCFOxKPXCO5HJB91P6nKI19crA==", "requires": { "@types/ws": "^8.2.2", "better-sse": "^0.7.1", @@ -13592,25 +13592,25 @@ } }, "fsxa-nuxt-module": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/fsxa-nuxt-module/-/fsxa-nuxt-module-6.0.1.tgz", - "integrity": "sha512-TDfC64I52J2r+Qf4mFuKpJZAR/aSRTlwYAFHCwyxEyE5jyDbXknohAeyabvFN3zr17pq9r2WLKUi8pndozHtDA==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/fsxa-nuxt-module/-/fsxa-nuxt-module-7.0.0.tgz", + "integrity": "sha512-Apewwp7+yggIBi1KcB0bUv3We5UTzSv+JOB+thZDLfTcszM35RqHH+ynXv/mJb/GysItZIQdp3wPc/87t45myA==", "requires": { "cross-fetch": "^3.1.5", "express": "^4.17.1", - "fsxa-api": "^9.0.2", - "fsxa-pattern-library": "^7.0.2", + "fsxa-api": "^10.0.0", + "fsxa-pattern-library": "^8.0.0", "lodash.camelcase": "^4.3.0", "lodash.merge": "^4.6.2", "lodash.startcase": "^4.4.0" } }, "fsxa-pattern-library": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/fsxa-pattern-library/-/fsxa-pattern-library-7.0.2.tgz", - "integrity": "sha512-NsP4+DJBUilsthJLgtBgyOQwgOLQR4r8EnMCAVzeOEh5CCZVhAiEFMrhOJWSkDVQP9mLExrtPS8YNDOSlvmQfA==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/fsxa-pattern-library/-/fsxa-pattern-library-8.0.0.tgz", + "integrity": "sha512-vAQ38D6Oa6xm4fgyLvL3BjjPw4Lu4/vFgQMMXFneaDsuZfFNPVfcrPsdMmCqtdIezQ5BY9Fw/8wMrhsOWv4CAA==", "requires": { - "fsxa-api": "^9.0.2", + "fsxa-api": "^10.0.0", "prismjs": "^1.27.0", "setimmediate": "^1.0.5", "vue": "^2.6.14", diff --git a/package.json b/package.json index f5abf92..26c42d8 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "dependencies": { "@nuxt/core": "^2.15.8", "@nuxtjs/axios": "^5.13.6", - "fsxa-nuxt-module": "^6.0.1", + "fsxa-nuxt-module": "^7.0.0", "nuxt-start": "^2.15.8" }, "devDependencies": { @@ -69,8 +69,8 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-nuxt": ">=2.0.0", "eslint-plugin-prettier": "^4.0.0", - "fsxa-api": "^9.0.2", - "fsxa-pattern-library": "^7.0.2", + "fsxa-api": "^10.0.0", + "fsxa-pattern-library": "^8.0.0", "fsxa-ui": "^4.1.0", "husky": "^4.0.0", "jest": "^24.1.0",