import { defineComponent , h , PropType } from 'vue' ; export interface LinkFieldValue { [ attributeName ] : any ; href ? : string ; className ? : string ; title ? : string ; target ? : string ; } export interface LinkField { value : LinkFieldValue ; editableFirstPart ? : string ; editableLastPart ? : string ; } export const Link = defineComponent ( { props : { /** The link field data. */ field : { type : Object as PropType < LinkField | LinkFieldValue > , default ( ) { return { } as LinkField | LinkFieldValue ; } , required : true , } , /**
         * Can be used to explicitly disable inline editing.
         * If true and `field.editable` has a value,
         * then `field.editable` will be processed and rendered as
         * component output. If false, `field.editable` value will be ignored and not rendered.
         */ editable : { type : Boolean , default : true , } , /**
         * Displays a link text ('description' in Sitecore) even when children exist
         * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered.
         */ showLinkTextWithChildrenPresent : { type : Boolean , default : false , } , } , render ( ) { const { field , editable , showLinkTextWithChildrenPresent } = this . $props ; const children = this . $slots . default ; const dynamicField = field ; if ( ! field || ( ! dynamicField . editableFirstPart && ! dynamicField . value && ! dynamicField . href ) ) { return null ; } if ( editable && dynamicField . editableFirstPart ) { let markup = dynamicField . editableFirstPart ; markup += dynamicField . editableLastPart ; const elementData = { ... this . $data , class : 'sc-link-wrapper' , innerHTML : markup , } ; const xEditorElement = h ( 'span' , elementData ) ; if ( children ) { const childElements = h ( 'span' , { class : 'sc-link-editable-children-wrapper' } , children ( ) ) ; return h ( 'span' , { class : 'sc-link-editable-wrapper' } , [ xEditorElement , childElements ] ) ; } return xEditorElement ; } const link = dynamicField . href ? field : dynamicField . value ; if ( ! link ) { return null ; } const linkText = showLinkTextWithChildrenPresent || ! children || children . length === 0 ? link . text || link . href : null ; const finalChildren = children ? [ linkText , ... children ( ) ] : linkText ; const data = { ... this . $data , class : link . class , ... this . $attrs , href : link . href , title : link . title , target : link . target , } ; return h ( 'a' , data , finalChildren ) ; } , } ) ;