vue-truncate-collapsed
Version:
A simple component that truncates your text and adds a 'Read More/Show Less' clickable.
8 lines (7 loc) • 2.82 kB
JavaScript
/*!
* vue-truncate-collapsed v3.0.1
* (c) João Vitor Cavalcante
* Released under the MIT License.
*/
"use strict";!function(){if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",e.styleSheet?e.styleSheet.cssText="":e.appendChild(document.createTextNode("")),t.appendChild(e)}}();var t=require("html-truncate"),e={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",[t.show||t.isHTML?!t.show&&t.isHTML?s("div",[s("span",{class:t.textClass,domProps:{innerHTML:t._s(t.truncate(t.text))}}),t._v(" "),t.showToggle?s("button",{class:t.actionClass,attrs:{type:"button"},on:{click:function(e){return e.preventDefault(),e.stopPropagation(),t.toggle(e)}}},[t._v(t._s(t.clamp))]):t._e()]):t._e():s("div",[s("span",{class:t.textClass},[t._v(" "+t._s(t.truncate(t.text))+" ")]),t._v(" "),t.showToggle?s("button",{class:t.actionClass,attrs:{type:"button"},on:{click:function(e){return e.preventDefault(),e.stopPropagation(),t.toggle(e)}}},[t._v(" "+t._s(t.clamp)+" ")]):t._e()]),t._v(" "),t.show&&!t.isHTML?s("div",[s("span",[t._v(t._s(t.text))]),t._v(" "),t.showToggle?s("button",{class:t.actionClass,attrs:{type:"button"},on:{click:function(e){return e.preventDefault(),e.stopPropagation(),t.toggle(e)}}},[t._v(t._s(t.less))]):t._e()]):t.show&&t.isHTML?s("div",[t.text.length>=t.length?s("div",{domProps:{innerHTML:t._s(t.text)}}):t._e(),t._v(" "),t.showToggle?s("button",{class:t.actionClass,attrs:{type:"button"},on:{click:function(e){return e.preventDefault(),e.stopPropagation(),t.toggle(e)}}},[t._v(t._s(t.less))]):s("p",[t._v(" "+t._s(t.h2p(t.text))+" ")])]):t._e()])},staticRenderFns:[],name:"Truncate",props:{truncated:{type:Boolean,default:!0},collapsedTextClass:{type:String,default:""},text:{type:String,required:!0},clamp:{type:String,default:"Read More"},length:{type:Number,default:100},less:{type:String,default:"Show Less"},type:{type:String,default:"text"},actionClass:{type:String,default:""}},data:function(){return{show:!1}},computed:{isHTML:function(){return"html"===this.type},textClass:function(){return this.textLength>this.length&&this.collapsedTextClass?this.collapsedTextClass:""},textLength:function(){return this.isHTML?this.text.replace(/<[^>]*>/g,"").length:this.text.length},showToggle:function(){return this.textLength>this.length}},watch:{truncated:function(t){this.toggle(t)}},created:function(){this.show=!this.truncated,this.toggle(!this.truncated)},methods:{truncate:function(e){return e?"html"===this.type?t(e,this.length):e.toString().substring(0,this.length):""},toggle:function(t){var e="boolean"==typeof t?t:!this.show;this.show=e,this.$emit("toggle",e)},h2p:function(e){return t(e)}}};module.exports=e;
//# sourceMappingURL=vue-truncate-collapsed.min.cjs.js.map