maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.44 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as MazLink_default}from"./MazLink.Whs4ZCy8.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,defineComponent,nextTick,normalizeClass,normalizeStyle,onMounted,openBlock,ref,renderSlot,toDisplayString,unref,useSlots,withCtx}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import '../assets/MazReadMore.Cos4kAbk.css';var _hoisted_1=[`id`];var _hoisted_2=[`id`,`aria-label`,`aria-expanded`];var MazReadMore_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazReadMore`,props:{text:{},maxLines:{default:()=>void 0},maxChars:{default:()=>void 0},color:{default:`primary`},collapseText:{},expandText:{},id:{},ariaLabel:{}},setup(__props){let{t}=useTranslations();let maxLinesValue=computed(()=>__props.maxChars?void 0:__props.maxLines||4);let instanceId=useInstanceUniqId({componentName:`MazReadMore`,providedId:__props.id});let contentId=computed(()=>`${instanceId.value}-content`);let buttonId=computed(()=>`${instanceId.value}-button`);let collapseTextValue=computed(()=>__props.collapseText||t(`readMore.collapse`));let expandTextValue=computed(()=>__props.expandText||t(`readMore.expand`));let ariaLabelValue=computed(()=>__props.ariaLabel||t(`readMore.ariaLabel`));let slots=useSlots();let contentRef=ref();let hiddenSlotRef=ref();let isExpanded=ref(!1);let slotTextContent=ref(``);let hasSlot=computed(()=>!!slots.default);let shouldShowButton=ref(!1);let truncateStyle=computed(()=>isExpanded.value?{}:maxLinesValue.value?{display:`-webkit-box`,"-webkit-line-clamp":maxLinesValue.value.toString(),"-webkit-box-orient":`vertical`,overflow:`hidden`}:{});let displayedText=computed(()=>{if(!__props.maxChars||isExpanded.value)return __props.text;let content=hasSlot.value?slotTextContent.value:__props.text;return content&&content.length>__props.maxChars?`${content.slice(0,__props.maxChars)}...`:content});let showTruncatedText=computed(()=>__props.maxChars&&hasSlot.value&&!isExpanded.value&&slotTextContent.value.length>__props.maxChars);function toggleExpanded(){isExpanded.value=!isExpanded.value}function checkIfTruncated(){if(__props.maxChars&&hiddenSlotRef.value){slotTextContent.value=hiddenSlotRef.value.textContent||``,shouldShowButton.value=slotTextContent.value.length>__props.maxChars;return}if(!contentRef.value)return;let element=contentRef.value;if(maxLinesValue.value){let maxHeight=Number.parseFloat(getComputedStyle(element).lineHeight)*maxLinesValue.value;shouldShowButton.value=element.scrollHeight>maxHeight;return}__props.maxChars&&(shouldShowButton.value=(__props.text||``).length>__props.maxChars)}return onMounted(()=>{nextTick(()=>{checkIfTruncated()})}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{id:unref(instanceId),class:`m-read-more m-reset-css`},[hasSlot.value&&__props.maxChars?(openBlock(),createElementBlock(`div`,{key:0,ref_key:`hiddenSlotRef`,ref:hiddenSlotRef,class:`m-read-more__hidden`,"aria-hidden":`true`},[renderSlot(_ctx.$slots,`default`,{},void 0,!0)],512)):createCommentVNode(``,!0),createElementVNode(`div`,{id:contentId.value,ref_key:`contentRef`,ref:contentRef,class:normalizeClass([`m-read-more__content`,{"m-read-more__content--truncated":!isExpanded.value}]),style:normalizeStyle(truncateStyle.value),role:`region`,"aria-label":ariaLabelValue.value,"aria-expanded":shouldShowButton.value?isExpanded.value:void 0},[showTruncatedText.value?(openBlock(),createElementBlock(Fragment,{key:0},[createTextVNode(toDisplayString(displayedText.value),1)],64)):hasSlot.value?renderSlot(_ctx.$slots,`default`,{key:1},void 0,!0):(openBlock(),createElementBlock(Fragment,{key:2},[createTextVNode(toDisplayString(displayedText.value),1)],64))],14,_hoisted_2),shouldShowButton.value?(openBlock(),createBlock(MazLink_default,{key:1,id:buttonId.value,size:`sm`,class:`mt-2`,color:__props.color,underline:``,role:`button`,"aria-expanded":isExpanded.value,"aria-controls":contentId.value,onClick:toggleExpanded},{default:withCtx(()=>[createTextVNode(toDisplayString(isExpanded.value?collapseTextValue.value:expandTextValue.value),1)]),_:1},8,[`id`,`color`,`aria-expanded`,`aria-controls`])):createCommentVNode(``,!0)],8,_hoisted_1))}}),[[`__scopeId`,`data-v-368e2588`]]);export{MazReadMore_default as t};