From 4d75162fb3c04ef9b0624cf0fd42ba9b71e3cfa8 Mon Sep 17 00:00:00 2001 From: Dave Jansen Date: Mon, 7 Jun 2021 18:45:46 +0900 Subject: [PATCH] Updated demo. --- demo/index.html | 2 +- demo/js/app.0f4e3981.js | 2 ++ demo/js/app.0f4e3981.js.map | 1 + demo/js/app.89d5b29f.js | 2 -- demo/js/app.89d5b29f.js.map | 1 - 5 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 demo/js/app.0f4e3981.js create mode 100644 demo/js/app.0f4e3981.js.map delete mode 100644 demo/js/app.89d5b29f.js delete mode 100644 demo/js/app.89d5b29f.js.map diff --git a/demo/index.html b/demo/index.html index 4766035..583249c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1 +1 @@ -vue-clamp
\ No newline at end of file +vue-clamp
\ No newline at end of file diff --git a/demo/js/app.0f4e3981.js b/demo/js/app.0f4e3981.js new file mode 100644 index 0000000..ba06ff9 --- /dev/null +++ b/demo/js/app.0f4e3981.js @@ -0,0 +1,2 @@ +(function(e){function t(t){for(var s,l,r=t[0],o=t[1],c=t[2],h=0,p=[];h")]),a("div",{staticClass:"lang btn-group",attrs:{id:"lang"}},[a("button",{staticClass:"btn btn-sm",class:{active:!e.zh},on:{click:function(t){e.zh=!1}}},[e._v("English")]),a("button",{staticClass:"btn btn-sm",class:{active:e.zh},on:{click:function(t){e.zh=!0}}},[e._v("中文")])]),a("p",[e._v(e._s(e.zh?"轻松实现多行文本截断。":"Clamping multiline text with ease."))]),a("p",[a("a",{staticClass:"tooltip",attrs:{href:"https://github.com/Justineo/vue-clamp","data-tooltip":e.zh?"前往 GitHub 仓库":"Visit GitHub repo"}},[e._v("GitHub →")])]),a("h2",{attrs:{id:"features"}},[a("a",{attrs:{href:"#features"}},[e._v("#")]),e._v(" "+e._s(e.zh?"功能":"Features")+" ")]),a("ul",[a("li",[e._v(e._s(e.zh?"可以选择限制行数与/或最大高度，无需指定行高。":"Clamps text with max lines and/or max height. No need to specify line height."))]),a("li",[e._v(e._s(e.zh?"支持在布局变化时自动更新。":"Automatically updates upon layout change."))]),a("li",[e._v(e._s(e.zh?"支持展开/收起被截断部分内容。":"The clamped text can be expanded/collapsed."))]),a("li",[e._v(e._s(e.zh?"支持自定义截断文本前后内容，并且进行响应式更新。":"Customizable and responsive content before/after clamped text."))]),a("li",[e._v(e._s("Place elllipsis at the end, middle, or the start of the clamped text"))])]),e._m(0),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ customizable ellipsis location & max-lines"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[e.zh?e._e():a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"location"}},[e._v(e._s(e.zh?"地点":"Location"))]),a("div",{staticClass:"col-3 col-sm-12"},[a("label",{staticClass:"form-radio"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.location,expression:"location"}],attrs:{type:"radio",value:"start"},domProps:{checked:e._q(e.location,"start")},on:{change:function(t){e.location="start"}}}),a("i",{staticClass:"form-icon"}),e._v(" Start ")])]),a("div",{staticClass:"col-3 col-sm-12"},[a("label",{staticClass:"form-radio"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.location,expression:"location"}],attrs:{type:"radio",value:"middle"},domProps:{checked:e._q(e.location,"middle")},on:{change:function(t){e.location="middle"}}}),a("i",{staticClass:"form-icon"}),e._v(" Middle ")])]),a("div",{staticClass:"col-1 col-sm-12"},[a("label",{staticClass:"form-radio"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.location,expression:"location"}],attrs:{type:"radio",value:"end"},domProps:{checked:e._q(e.location,"end")},on:{change:function(t){e.location="end"}}}),a("i",{staticClass:"form-icon"}),e._v(" End ")])])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"lines"}},[e._v(e._s(e.zh?"最大行数":"Max lines"))]),a("div",{staticClass:"col-7 col-sm-12"},[a("input",{directives:[{name:"model",rawName:"v-model.number",value:e.lines,expression:"lines",modifiers:{number:!0}}],staticClass:"form-input",attrs:{id:"lines",type:"number",min:"1",max:"8",step:"1"},domProps:{value:e.lines},on:{input:function(t){t.target.composing||(e.lines=e._n(t.target.value))},blur:function(t){return e.$forceUpdate()}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width1"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width1+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width1,expression:"width1"}],staticClass:"slider",attrs:{id:"width1",type:"range",min:"240",max:"600"},domProps:{value:e.width1},on:{__r:function(t){e.width1=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens1,expression:"hyphens1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens1)?e._i(e.hyphens1,null)>-1:e.hyphens1},on:{change:function(t){var a=e.hyphens1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens1=a.concat([n])):l>-1&&(e.hyphens1=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl1,expression:"rtl1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl1)?e._i(e.rtl1,null)>-1:e.rtl1},on:{change:function(t){var a=e.rtl1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl1=a.concat([n])):l>-1&&(e.rtl1=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens1,rtl:e.rtl1},style:{width:e.width1+"px"},attrs:{"max-lines":e.lines,location:e.location,autoresize:""},scopedSlots:e._u([{key:"after",fn:function(t){var s=t.toggle,i=t.expanded,n=t.clamped;return[i||n?a("button",{staticClass:"toggle btn btn-sm",on:{click:s}},[e._v(e._s(e.zh?"切换":"Toggle"))]):e._e()]}}])},[e._v(" "+e._s(e.zh?e.textZh:e.text)+" ")])],1),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ max-lines & slot `after`"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"lines"}},[e._v(e._s(e.zh?"最大行数":"Max lines"))]),a("div",{staticClass:"col-7 col-sm-12"},[a("input",{directives:[{name:"model",rawName:"v-model.number",value:e.lines,expression:"lines",modifiers:{number:!0}}],staticClass:"form-input",attrs:{id:"lines",type:"number",min:"1",max:"8",step:"1"},domProps:{value:e.lines},on:{input:function(t){t.target.composing||(e.lines=e._n(t.target.value))},blur:function(t){return e.$forceUpdate()}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width1"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width1+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width1,expression:"width1"}],staticClass:"slider",attrs:{id:"width1",type:"range",min:"240",max:"600"},domProps:{value:e.width1},on:{__r:function(t){e.width1=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens1,expression:"hyphens1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens1)?e._i(e.hyphens1,null)>-1:e.hyphens1},on:{change:function(t){var a=e.hyphens1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens1=a.concat([n])):l>-1&&(e.hyphens1=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl1,expression:"rtl1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl1)?e._i(e.rtl1,null)>-1:e.rtl1},on:{change:function(t){var a=e.rtl1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl1=a.concat([n])):l>-1&&(e.rtl1=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens1,rtl:e.rtl1},style:{width:e.width1+"px"},attrs:{"max-lines":e.lines,autoresize:""},scopedSlots:e._u([{key:"after",fn:function(t){var s=t.toggle,i=t.expanded,n=t.clamped;return[i||n?a("button",{staticClass:"toggle btn btn-sm",on:{click:s}},[e._v(e._s(e.zh?"切换":"Toggle"))]):e._e()]}}])},[e._v(" "+e._s(e.zh?e.textZh:e.text)+" ")])],1),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ max-height & slot `before`"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"height"}},[e._v(e._s(e.zh?"最大高度":"Max height"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.zh?"任意 CSS 长度值":"Any valid CSS length value"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.height,expression:"height"}],staticClass:"form-input",attrs:{id:"height"},domProps:{value:e.height},on:{input:function(t){t.target.composing||(e.height=t.target.value)}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width2"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width2+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width2,expression:"width2"}],staticClass:"slider",attrs:{id:"width2",type:"range",min:"240",max:"600"},domProps:{value:e.width2},on:{__r:function(t){e.width2=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens2,expression:"hyphens2"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens2)?e._i(e.hyphens2,null)>-1:e.hyphens2},on:{change:function(t){var a=e.hyphens2,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens2=a.concat([n])):l>-1&&(e.hyphens2=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens2=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl2,expression:"rtl2"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl2)?e._i(e.rtl2,null)>-1:e.rtl2},on:{change:function(t){var a=e.rtl2,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl2=a.concat([n])):l>-1&&(e.rtl2=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl2=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])]),a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.expanded1,expression:"expanded1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.expanded1)?e._i(e.expanded1,null)>-1:e.expanded1},on:{change:function(t){var a=e.expanded1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.expanded1=a.concat([n])):l>-1&&(e.expanded1=a.slice(0,l).concat(a.slice(l+1)))}else e.expanded1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" "+e._s(e.zh?"展开内容":"Expanded")+" ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens2,rtl:e.rtl2},style:{width:e.width2+"px"},attrs:{"max-height":e.height,autoresize:"",expanded:e.expanded1},on:{"update:expanded":function(t){e.expanded1=t}},scopedSlots:e._u([{key:"before",fn:function(){return[a("span",{staticClass:"featured label label-rounded label-primary"},[e._v(e._s(e.zh?"推荐":"Featured"))])]},proxy:!0}])},[e._v(" "+e._s(e.zh?e.textZh:e.text)+" ")])],1),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ `clampchange` event"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"lines3"}},[e._v(e._s(e.zh?"最大行数":"Max lines"))]),a("div",{staticClass:"col-7 col-sm-12"},[a("input",{directives:[{name:"model",rawName:"v-model.number",value:e.lines3,expression:"lines3",modifiers:{number:!0}}],staticClass:"form-input",attrs:{id:"lines3",type:"number",min:"1",max:"8",step:"1"},domProps:{value:e.lines3},on:{input:function(t){t.target.composing||(e.lines3=e._n(t.target.value))},blur:function(t){return e.$forceUpdate()}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width3"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width3+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width3,expression:"width3"}],staticClass:"slider",attrs:{id:"width3",type:"range",min:"240",max:"600"},domProps:{value:e.width3},on:{__r:function(t){e.width3=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens3,expression:"hyphens3"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens3)?e._i(e.hyphens3,null)>-1:e.hyphens3},on:{change:function(t){var a=e.hyphens3,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens3=a.concat([n])):l>-1&&(e.hyphens3=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens3=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl3,expression:"rtl3"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl3)?e._i(e.rtl3,null)>-1:e.rtl3},on:{change:function(t){var a=e.rtl3,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl3=a.concat([n])):l>-1&&(e.rtl3=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl3=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens3,rtl:e.rtl3},style:{width:e.width3+"px"},attrs:{"max-lines":e.lines3,autoresize:""},on:{clampchange:function(t){e.clamped3=t}}},[e._v(e._s(e.zh?e.textZh:e.text))]),a("p",{staticClass:"mt-2"},[e._v(e._s(e.zh?"截断状态："+(e.clamped3?"已截断":"未截断"):"Clamped: "+(e.clamped3?"Yes":"No")))])],1),a("h2",{attrs:{id:"usage"}},[a("a",{attrs:{href:"#usage"}},[e._v("#")]),e._v(" "+e._s(e.zh?"使用方法":"Usage")+" ")]),a("div",{staticClass:"divider text-center",attrs:{"data-content":e.zh?"↓ 安装":"↓ Installation"}}),e._m(1),a("div",{staticClass:"divider text-center",attrs:{"data-content":e.zh?"↓ 配置":"↓ Configuration"}}),e.zh?a("p",[e._v(" 对于基于 webpack 的项目， "),a("code",[e._v("import")]),e._v(" 会自动引入未经转译的 ES Module 版本。请确保按如下指导配置相关工具。 ")]):a("p",[e._v(" For project based on webpack, "),a("code",[e._v("import")]),e._v(" will load the untranspiled ES Module version. Please make sure to add the correct config according to following instructions. ")]),a("details",{attrs:{open:""}},[e._m(2),e.zh?a("p",[e._v(" 对于使用 Vue CLI 3 创建的项目，请确保将 "),a("code",[e._v("vue-clamp")]),e._v(" 与 "),a("code",[e._v("resize-detector")]),e._v(" 加入 "),a("code",[e._v("vue.config.js")]),e._v(" 文件的 "),a("code",[e._v("transpileDependencies")]),e._v(" 选项中： ")]):a("p",[e._v(" For projects created with Vue CLI 3, remember to add "),a("code",[e._v("vue-clamp")]),e._v(" and "),a("code",[e._v("resize-detector")]),e._v(" into the "),a("code",[e._v("transpileDependencies")]),e._v(" option in "),a("code",[e._v("vue.config.js")]),e._v(": ")]),e._m(3)]),a("details",[e._m(4),e.zh?a("p",[e._v(" 如果使用的是 Vue CLI 2 的 "),a("code",[e._v("webpack")]),e._v(" 模板，请按如下方式修改 "),a("code",[e._v("build/webpack.base.conf.js")]),e._v("： ")]):a("p",[e._v(" For Vue CLI 2 with the "),a("code",[e._v("webpack")]),e._v(" template, modify "),a("code",[e._v("build/webpack.base.conf.js")]),e._v(" like this: ")]),e._m(5)]),a("details",[e._m(6),e.zh?a("p",[e._v(" 在 Nuxt.js 中使用时，请确保将 "),a("code",[e._v("vue-clamp")]),e._v(" 与 "),a("code",[e._v("resize-detector")]),e._v(" 加入 "),a("code",[e._v("nuxt.config.js")]),e._v(" 文件的 "),a("code",[e._v("build.transpile")]),e._v(" 选项中： ")]):a("p",[e._v(" When using in Nuxt.js, remember to add "),a("code",[e._v("vue-clamp")]),e._v(" and "),a("code",[e._v("resize-detector")]),e._v(" into the "),a("code",[e._v("build.transpile")]),e._v(" option in "),a("code",[e._v("nuxt.config.js")]),e._v(": ")]),e._m(7)]),a("div",{staticClass:"divider text-center",attrs:{"data-content":e.zh?"↓ 代码样例":"↓ Code example"}}),e._m(8),e._m(9),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ Props"}}),a("section",[a("ul",[a("li",[e._m(10),a("p",[e._v(e._s(e.zh?"生成的根元素的标签名。":"The tag name of the generated root element."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("div")])])]),a("li",[e._m(11),a("p",[e._v(e._s(e.zh?"是否要自动适配根元素的尺寸变化。":"Whether to observe the root element's size."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("false")])])]),a("li",[e._m(12),a("p",[e._v(e._s(e.zh?"可以显示的最大行数":"The max number of lines that can be displayed."))])]),a("li",[e._m(13),e.zh?a("p",[e._v(" 根元素的最大高度。数字值将被转换为 "),a("code",[e._v("px")]),e._v(" 单位；字符串值将直接作为 CSS 属性 "),a("code",[e._v("max-height")]),e._v(" 输出。 ")]):a("p",[e._v(" The max height of the root element. Number values are converted to "),a("code",[e._v("px")]),e._v(" units. String values are used directly as the "),a("code",[e._v("max-height")]),e._v(" CSS property. ")])]),a("li",[e._m(14),a("p",[e._v(e._s(e.zh?"当文字被截断时需要显示的省略号字符串。":"The ellipsis characters displayed when the text is clamped."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("'…'")])])]),a("li",[e._m(15),a("p",[a("span",{staticClass:"label label-primary tooltip",attrs:{"data-tooltip":e.zh?"支持 .sync 修饰符":"Supports .sync modifier"}},[e._v(".sync")])]),a("p",[e._v(e._s(e.zh?"是否展开显式被截断的文本。":"Whether the clamped area is expanded."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("false")])])])])]),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ Slots"}}),a("section",[a("ul",[a("li",[e._m(16),a("p",[e._v(e._s(e.zh?"需要截断的文本。只能包含纯文本内容。":"The text to clamp. Can only contain pure text."))])]),a("li",[e._m(17),a("p",[e._v(" Slot "+e._s(e.zh?"作用域：":"scope:")+" "),a("code",[e._v("{ expand, collapse, toggle, clamped, expanded }")])]),a("section",{staticClass:"secondary"},[a("p",[a("code",[e._v("expand: function(): void")]),e._v(" - "+e._s(e.zh?"展开被截断的文本。":"Expand the clamped text.")+" ")]),a("p",[a("code",[e._v("collapse: function(): void")]),e._v(" - "+e._s(e.zh?"收起展开后的文本。":"Collapse the expanded text.")+" ")]),a("p",[a("code",[e._v("toggle: function(): void")]),e._v(" - "+e._s(e.zh?"切换被截断文本的展开状态。":"Toggle the expand state of clamped text.")+" ")]),a("p",[a("code",[e._v("clamped: Boolean")]),e._v(" - "+e._s(e.zh?"内容是否处于截断状态。":"Whether text content is being clamped.")+" ")]),a("p",[a("code",[e._v("expanded: Boolean")]),e._v(" - "+e._s(e.zh?"内容是否处于展开状态。":"Whether text content is being expanded.")+" ")])]),a("p",[e._v(e._s(e.zh?"在被截断的文本前显式的内容，可以包含任意类型内容。":"Content displayed before the clamped text. Can contain anything."))])]),a("li",[e._m(18),e.zh?a("p",[e._v(" Slot 作用域：与 "),a("code",[e._v("before")]),e._v(" 相同。 ")]):a("p",[e._v(" Slot scope: Same as "),a("code",[e._v("before")]),e._v(". ")]),a("p",[e._v(e._s(e.zh?"在被截断的文本后显式的内容，可以包含任意类型内容。":"Content displayed after the clamped text. Can contain anything."))])])])]),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ Events"}}),a("section",[a("ul",[a("li",[e._m(19),a("p",[e._v(e._s(e.zh?"截断状态变化时触发。":"Emitted when clamp state changes."))]),a("p",[e._v(" "+e._s(e.parameterText)+" "),a("code",[e._v("(clamped: Boolean)")])])])])]),a("footer",[e.zh?a("p",[e._v(" 由 "),a("a",{attrs:{href:"https://github.com/Justineo"}},[e._v("@Justineo")]),e._v(" 创作。 ")]):a("p",[e._v(" Made by "),a("a",{attrs:{href:"https://github.com/Justineo"}},[e._v("@Justineo")]),e._v(". ")]),a("p",[e.zh?a("small",[e._v(" 本页基于 "),a("a",{attrs:{href:"https://picturepan2.github.io/spectre/"}},[e._v("Spectre.css")]),e._v(" 开发。 ")]):a("small",[e._v(" This page is based on "),a("a",{attrs:{href:"https://picturepan2.github.io/spectre/"}},[e._v("Spectre.css")]),e._v(". ")])])])])},n=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"demo"}},[a("a",{attrs:{href:"#demo"}},[e._v("#")]),e._v(" Demo ")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code shell",attrs:{"data-lang":"Shell"}},[a("code",[e._v("$ npm i --save vue-clamp")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("summary",[a("h4",[e._v(" Vue CLI "),a("small",[e._v("v3")])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code javascript",attrs:{"data-lang":"JavaScript"}},[a("code",[e._v("module.exports = {\n transpileDependencies: ['vue-clamp', 'resize-detector']\n}\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("summary",[a("h4",[e._v(" Vue CLI "),a("small",[e._v("v2")])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code diff",attrs:{"data-lang":"Diff"}},[a("code",[e._v(" {\n test: /\\.js$/,\n loader: 'babel-loader',\n- include: [resolve('src'), resolve('test')]\n+ include: [\n+ resolve('src'),\n+ resolve('test'),\n+ resolve('node_modules/vue-clamp'),\n+ resolve('node_modules/resize-detector')\n+ ]\n }\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("summary",[a("h4",[e._v(" Nuxt.js "),a("small",[e._v("v2")])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code javascript",attrs:{"data-lang":"JavaScript"}},[a("code",[e._v("module.exports = {\n build: {\n transpile: ['vue-clamp', 'resize-detector']\n }\n}\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{pre:!0,attrs:{class:"code vue","data-lang":"Vue"}},[a("code",[e._v("\n\n\\n\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('h2',{attrs:{\"id\":\"api\"}},[_c('a',{attrs:{\"href\":\"#api\"}},[_vm._v(\"#\")]),_vm._v(\" API \")])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"tag: string\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"autoresize: boolean\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"max-lines: number\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"max-height: number|string\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"ellipsis: string\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"expanded: boolean\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"default\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"before\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"after\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"clampchange\")])])}]\n\nexport { render, staticRenderFns }","import { addListener, removeListener } from 'resize-detector'\n\nexport default {\n name: 'vue-clamp',\n props: {\n tag: {\n type: String,\n default: 'div'\n },\n autoresize: {\n type: Boolean,\n default: false\n },\n maxLines: Number,\n maxHeight: [String, Number],\n ellipsis: {\n type: String,\n default: '…'\n },\n location: {\n type: String,\n default: 'end',\n validator: function (value) {\n return ['start', 'middle', 'end'].includes(value)\n }\n },\n expanded: Boolean\n },\n data () {\n return {\n offset: null,\n text: this.getText(),\n localExpanded: !!this.expanded\n }\n },\n computed: {\n clampedText () {\n if (this.location === 'start') {\n return this.ellipsis + (this.text.slice(0, this.offset) || '').trim()\n } else if (this.location === 'middle') {\n const split = this.offset / 2\n return (this.text.slice(0, Math.floor(split)) || '').trim() + this.ellipsis + (this.text.slice(0, Math.ceil(split)) || '').trim()\n }\n\n return (this.text.slice(0, this.offset) || '').trim() + this.ellipsis\n },\n isClamped () {\n if (!this.text) {\n return false\n }\n return this.offset !== this.text.length\n },\n realText () {\n return this.isClamped ? this.clampedText : this.text\n },\n realMaxHeight () {\n if (this.localExpanded) {\n return null\n }\n const { maxHeight } = this\n if (!maxHeight) {\n return null\n }\n return typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n }\n },\n watch: {\n expanded (val) {\n this.localExpanded = val\n },\n localExpanded (val) {\n if (val) {\n this.clampAt(this.text.length)\n } else {\n this.update()\n }\n if (this.expanded !== val) {\n this.$emit('update:expanded', val)\n }\n },\n isClamped: {\n handler (val) {\n this.$nextTick(() => this.$emit('clampchange', val))\n },\n immediate: true\n }\n },\n mounted () {\n this.init()\n\n this.$watch(\n (vm) => [vm.maxLines, vm.maxHeight, vm.ellipsis, vm.isClamped].join(),\n this.update\n )\n this.$watch((vm) => [vm.tag, vm.text, vm.autoresize].join(), this.init)\n },\n updated () {\n this.text = this.getText()\n this.applyChange()\n },\n beforeDestroy () {\n this.cleanUp()\n },\n methods: {\n init () {\n const contents = this.$slots.default\n if (!contents) {\n return\n }\n\n this.offset = this.text.length\n\n this.cleanUp()\n\n if (this.autoresize) {\n addListener(this.$el, this.update)\n this.unregisterResizeCallback = () => {\n removeListener(this.$el, this.update)\n }\n }\n this.update()\n },\n update () {\n if (this.localExpanded) {\n return\n }\n this.applyChange()\n if (this.isOverflow() || this.isClamped) {\n this.search()\n }\n },\n expand () {\n this.localExpanded = true\n },\n collapse () {\n this.localExpanded = false\n },\n toggle () {\n this.localExpanded = !this.localExpanded\n },\n getLines () {\n return Object.keys(\n Array.prototype.slice.call(this.$refs.content.getClientRects()).reduce(\n (prev, { top, bottom }) => {\n const key = `${top}/${bottom}`\n if (!prev[key]) {\n prev[key] = true\n }\n return prev\n },\n {}\n )\n ).length\n },\n isOverflow () {\n if (!this.maxLines && !this.maxHeight) {\n return false\n }\n\n if (this.maxLines) {\n if (this.getLines() > this.maxLines) {\n return true\n }\n }\n\n if (this.maxHeight) {\n if (this.$el.scrollHeight > this.$el.offsetHeight) {\n return true\n }\n }\n return false\n },\n getText () {\n // Look for the first non-empty text node\n const [content] = (this.$slots.default || []).filter(\n (node) => !node.tag && !node.isComment\n )\n return content ? content.text : ''\n },\n moveEdge (steps) {\n this.clampAt(this.offset + steps)\n },\n clampAt (offset) {\n this.offset = offset\n this.applyChange()\n },\n applyChange () {\n this.$refs.text.textContent = this.realText\n },\n stepToFit () {\n this.fill()\n this.clamp()\n },\n fill () {\n while (\n (!this.isOverflow() || this.getLines() < 2) &&\n this.offset < this.text.length\n ) {\n this.moveEdge(1)\n }\n },\n clamp () {\n while (this.isOverflow() && this.getLines() > 1 && this.offset > 0) {\n this.moveEdge(-1)\n }\n },\n search (...range) {\n const [from = 0, to = this.offset] = range\n if (to - from <= 3) {\n this.stepToFit()\n return\n }\n const target = Math.floor((to + from) / 2)\n this.clampAt(target)\n if (this.isOverflow()) {\n this.search(from, target)\n } else {\n this.search(target, to)\n }\n },\n cleanUp () {\n if (this.unregisterResizeCallback) {\n this.unregisterResizeCallback()\n }\n }\n },\n render (h) {\n const contents = [\n h(\n 'span',\n this.$isServer\n ? {}\n : {\n ref: 'text',\n attrs: {\n 'aria-label': this.text.trim()\n }\n },\n this.$isServer ? this.text : this.realText\n )\n ]\n\n const { expand, collapse, toggle } = this\n const scope = {\n expand,\n collapse,\n toggle,\n clamped: this.isClamped,\n expanded: this.localExpanded\n }\n const before = this.$scopedSlots.before\n ? this.$scopedSlots.before(scope)\n : this.$slots.before\n if (before) {\n contents.unshift(...(Array.isArray(before) ? before : [before]))\n }\n const after = this.$scopedSlots.after\n ? this.$scopedSlots.after(scope)\n : this.$slots.after\n if (after) {\n contents.push(...(Array.isArray(after) ? after : [after]))\n }\n const lines = [\n h(\n 'span',\n {\n style: {\n boxShadow: 'transparent 0 0'\n },\n ref: 'content'\n },\n contents\n )\n ]\n return h(\n this.tag,\n {\n style: {\n maxHeight: this.realMaxHeight,\n overflow: 'hidden'\n }\n },\n lines\n )\n }\n}\n","export default function (hljs) {\n const XML_IDENT_RE = '[A-Za-z0-9\\\\._:-]+'\n const TAG_INTERNALS = {\n endsWithParent: true,\n illegal: /`]+/ }\n ]\n }\n ]\n }\n ]\n }\n return {\n case_insensitive: true,\n contains: [\n hljs.COMMENT('', {\n relevance: 10\n }),\n {\n className: 'tag',\n /*\n The lookahead pattern (?=...) ensures that 'begin' only matches\n '|$)',\n end: '>',\n keywords: { name: 'style' },\n contains: [TAG_INTERNALS],\n starts: {\n end: '',\n returnEnd: true,\n subLanguage: ['css', 'less', 'scss', 'stylus']\n }\n },\n {\n className: 'tag',\n // See the comment in the \n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=0f8e63f9&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"spectre.css/dist/spectre.min.css?vue&type=style&index=0&lang=css&\"\nimport style1 from \"spectre.css/dist/spectre-exp.min.css?vue&type=style&index=1&lang=css&\"\nimport style2 from \"highlight.js/styles/atom-one-light.css?vue&type=style&index=2&lang=css&\"\nimport style3 from \"./App.vue?vue&type=style&index=3&lang=stylus&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App)\n}).$mount('#app')\n","export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=3&lang=stylus&\""],"sourceRoot":""} \ No newline at end of file diff --git a/demo/js/app.89d5b29f.js b/demo/js/app.89d5b29f.js deleted file mode 100644 index bd210a4..0000000 --- a/demo/js/app.89d5b29f.js +++ /dev/null @@ -1,2 +0,0 @@ -(function(e){function t(t){for(var s,l,r=t[0],o=t[1],c=t[2],h=0,p=[];h")]),a("div",{staticClass:"lang btn-group",attrs:{id:"lang"}},[a("button",{staticClass:"btn btn-sm",class:{active:!e.zh},on:{click:function(t){e.zh=!1}}},[e._v("English")]),a("button",{staticClass:"btn btn-sm",class:{active:e.zh},on:{click:function(t){e.zh=!0}}},[e._v("中文")])]),a("p",[e._v(e._s(e.zh?"轻松实现多行文本截断。":"Clamping multiline text with ease."))]),a("p",[a("a",{staticClass:"tooltip",attrs:{href:"https://github.com/Justineo/vue-clamp","data-tooltip":e.zh?"前往 GitHub 仓库":"Visit GitHub repo"}},[e._v("GitHub →")])]),a("h2",{attrs:{id:"features"}},[a("a",{attrs:{href:"#features"}},[e._v("#")]),e._v(" "+e._s(e.zh?"功能":"Features")+" ")]),a("ul",[a("li",[e._v(e._s(e.zh?"可以选择限制行数与/或最大高度，无需指定行高。":"Clamps text with max lines and/or max height. No need to specify line height."))]),a("li",[e._v(e._s(e.zh?"支持在布局变化时自动更新。":"Automatically updates upon layout change."))]),a("li",[e._v(e._s(e.zh?"支持展开/收起被截断部分内容。":"The clamped text can be expanded/collapsed."))]),a("li",[e._v(e._s(e.zh?"支持自定义截断文本前后内容，并且进行响应式更新。":"Customizable and responsive content before/after clamped text."))]),a("li",[e._v(e._s("Place elllipsis on the left, right or in the middle of clamped text"))])]),e._m(0),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ customizable ellipsis location & max-lines"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[e.zh?e._e():a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"location"}},[e._v(e._s(e.zh?"地点":"Location"))]),a("div",{staticClass:"col-3 col-sm-12"},[a("label",{staticClass:"form-radio"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.location,expression:"location"}],attrs:{type:"radio",value:"start"},domProps:{checked:e._q(e.location,"start")},on:{change:function(t){e.location="start"}}}),a("i",{staticClass:"form-icon"}),e._v(" Start ")])]),a("div",{staticClass:"col-3 col-sm-12"},[a("label",{staticClass:"form-radio"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.location,expression:"location"}],attrs:{type:"radio",value:"middle"},domProps:{checked:e._q(e.location,"middle")},on:{change:function(t){e.location="middle"}}}),a("i",{staticClass:"form-icon"}),e._v(" Middle ")])]),a("div",{staticClass:"col-1 col-sm-12"},[a("label",{staticClass:"form-radio"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.location,expression:"location"}],attrs:{type:"radio",value:"end"},domProps:{checked:e._q(e.location,"end")},on:{change:function(t){e.location="end"}}}),a("i",{staticClass:"form-icon"}),e._v(" End ")])])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"lines"}},[e._v(e._s(e.zh?"最大行数":"Max lines"))]),a("div",{staticClass:"col-7 col-sm-12"},[a("input",{directives:[{name:"model",rawName:"v-model.number",value:e.lines,expression:"lines",modifiers:{number:!0}}],staticClass:"form-input",attrs:{id:"lines",type:"number",min:"1",max:"8",step:"1"},domProps:{value:e.lines},on:{input:function(t){t.target.composing||(e.lines=e._n(t.target.value))},blur:function(t){return e.$forceUpdate()}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width1"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width1+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width1,expression:"width1"}],staticClass:"slider",attrs:{id:"width1",type:"range",min:"240",max:"600"},domProps:{value:e.width1},on:{__r:function(t){e.width1=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens1,expression:"hyphens1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens1)?e._i(e.hyphens1,null)>-1:e.hyphens1},on:{change:function(t){var a=e.hyphens1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens1=a.concat([n])):l>-1&&(e.hyphens1=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl1,expression:"rtl1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl1)?e._i(e.rtl1,null)>-1:e.rtl1},on:{change:function(t){var a=e.rtl1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl1=a.concat([n])):l>-1&&(e.rtl1=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens1,rtl:e.rtl1},style:{width:e.width1+"px"},attrs:{"max-lines":e.lines,location:e.location,autoresize:""},scopedSlots:e._u([{key:"after",fn:function(t){var s=t.toggle,i=t.expanded,n=t.clamped;return[i||n?a("button",{staticClass:"toggle btn btn-sm",on:{click:s}},[e._v(e._s(e.zh?"切换":"Toggle"))]):e._e()]}}])},[e._v(" "+e._s(e.zh?e.textZh:e.text)+" ")])],1),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ max-lines & slot `after`"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"lines"}},[e._v(e._s(e.zh?"最大行数":"Max lines"))]),a("div",{staticClass:"col-7 col-sm-12"},[a("input",{directives:[{name:"model",rawName:"v-model.number",value:e.lines,expression:"lines",modifiers:{number:!0}}],staticClass:"form-input",attrs:{id:"lines",type:"number",min:"1",max:"8",step:"1"},domProps:{value:e.lines},on:{input:function(t){t.target.composing||(e.lines=e._n(t.target.value))},blur:function(t){return e.$forceUpdate()}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width1"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width1+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width1,expression:"width1"}],staticClass:"slider",attrs:{id:"width1",type:"range",min:"240",max:"600"},domProps:{value:e.width1},on:{__r:function(t){e.width1=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens1,expression:"hyphens1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens1)?e._i(e.hyphens1,null)>-1:e.hyphens1},on:{change:function(t){var a=e.hyphens1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens1=a.concat([n])):l>-1&&(e.hyphens1=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl1,expression:"rtl1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl1)?e._i(e.rtl1,null)>-1:e.rtl1},on:{change:function(t){var a=e.rtl1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl1=a.concat([n])):l>-1&&(e.rtl1=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens1,rtl:e.rtl1},style:{width:e.width1+"px"},attrs:{"max-lines":e.lines,autoresize:""},scopedSlots:e._u([{key:"after",fn:function(t){var s=t.toggle,i=t.expanded,n=t.clamped;return[i||n?a("button",{staticClass:"toggle btn btn-sm",on:{click:s}},[e._v(e._s(e.zh?"切换":"Toggle"))]):e._e()]}}])},[e._v(" "+e._s(e.zh?e.textZh:e.text)+" ")])],1),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ max-height & slot `before`"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"height"}},[e._v(e._s(e.zh?"最大高度":"Max height"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.zh?"任意 CSS 长度值":"Any valid CSS length value"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.height,expression:"height"}],staticClass:"form-input",attrs:{id:"height"},domProps:{value:e.height},on:{input:function(t){t.target.composing||(e.height=t.target.value)}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width2"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width2+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width2,expression:"width2"}],staticClass:"slider",attrs:{id:"width2",type:"range",min:"240",max:"600"},domProps:{value:e.width2},on:{__r:function(t){e.width2=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens2,expression:"hyphens2"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens2)?e._i(e.hyphens2,null)>-1:e.hyphens2},on:{change:function(t){var a=e.hyphens2,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens2=a.concat([n])):l>-1&&(e.hyphens2=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens2=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl2,expression:"rtl2"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl2)?e._i(e.rtl2,null)>-1:e.rtl2},on:{change:function(t){var a=e.rtl2,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl2=a.concat([n])):l>-1&&(e.rtl2=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl2=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])]),a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.expanded1,expression:"expanded1"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.expanded1)?e._i(e.expanded1,null)>-1:e.expanded1},on:{change:function(t){var a=e.expanded1,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.expanded1=a.concat([n])):l>-1&&(e.expanded1=a.slice(0,l).concat(a.slice(l+1)))}else e.expanded1=i}}}),a("i",{staticClass:"form-icon"}),e._v(" "+e._s(e.zh?"展开内容":"Expanded")+" ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens2,rtl:e.rtl2},style:{width:e.width2+"px"},attrs:{"max-height":e.height,autoresize:"",expanded:e.expanded1},on:{"update:expanded":function(t){e.expanded1=t}},scopedSlots:e._u([{key:"before",fn:function(){return[a("span",{staticClass:"featured label label-rounded label-primary"},[e._v(e._s(e.zh?"推荐":"Featured"))])]},proxy:!0}])},[e._v(" "+e._s(e.zh?e.textZh:e.text)+" ")])],1),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ `clampchange` event"}}),a("section",{staticClass:"case"},[a("div",{staticClass:"form-horizontal"},[a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"lines3"}},[e._v(e._s(e.zh?"最大行数":"Max lines"))]),a("div",{staticClass:"col-7 col-sm-12"},[a("input",{directives:[{name:"model",rawName:"v-model.number",value:e.lines3,expression:"lines3",modifiers:{number:!0}}],staticClass:"form-input",attrs:{id:"lines3",type:"number",min:"1",max:"8",step:"1"},domProps:{value:e.lines3},on:{input:function(t){t.target.composing||(e.lines3=e._n(t.target.value))},blur:function(t){return e.$forceUpdate()}}})])]),a("div",{staticClass:"form-group"},[a("label",{staticClass:"form-label col-5 col-sm-12",attrs:{for:"width3"}},[e._v(e._s(e.zh?"容器宽度":"Container width"))]),a("div",{staticClass:"col-7 col-sm-12 tooltip",attrs:{"data-tooltip":e.width3+"px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.width3,expression:"width3"}],staticClass:"slider",attrs:{id:"width3",type:"range",min:"240",max:"600"},domProps:{value:e.width3},on:{__r:function(t){e.width3=t.target.value}}})])]),e.zh?e._e():a("div",{staticClass:"form-group"},[a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.hyphens3,expression:"hyphens3"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.hyphens3)?e._i(e.hyphens3,null)>-1:e.hyphens3},on:{change:function(t){var a=e.hyphens3,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.hyphens3=a.concat([n])):l>-1&&(e.hyphens3=a.slice(0,l).concat(a.slice(l+1)))}else e.hyphens3=i}}}),a("i",{staticClass:"form-icon"}),e._v(" CSS Hyphens ")])]),a("div",{staticClass:"col-5 col-sm-12"},[a("label",{staticClass:"form-checkbox"},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.rtl3,expression:"rtl3"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(e.rtl3)?e._i(e.rtl3,null)>-1:e.rtl3},on:{change:function(t){var a=e.rtl3,s=t.target,i=!!s.checked;if(Array.isArray(a)){var n=null,l=e._i(a,n);s.checked?l<0&&(e.rtl3=a.concat([n])):l>-1&&(e.rtl3=a.slice(0,l).concat(a.slice(l+1)))}else e.rtl3=i}}}),a("i",{staticClass:"form-icon"}),e._v(" RTL ")])])])]),a("v-clamp",{class:{demo:!0,hyphens:e.hyphens3,rtl:e.rtl3},style:{width:e.width3+"px"},attrs:{"max-lines":e.lines3,autoresize:""},on:{clampchange:function(t){e.clamped3=t}}},[e._v(e._s(e.zh?e.textZh:e.text))]),a("p",{staticClass:"mt-2"},[e._v(e._s(e.zh?"截断状态："+(e.clamped3?"已截断":"未截断"):"Clamped: "+(e.clamped3?"Yes":"No")))])],1),a("h2",{attrs:{id:"usage"}},[a("a",{attrs:{href:"#usage"}},[e._v("#")]),e._v(" "+e._s(e.zh?"使用方法":"Usage")+" ")]),a("div",{staticClass:"divider text-center",attrs:{"data-content":e.zh?"↓ 安装":"↓ Installation"}}),e._m(1),a("div",{staticClass:"divider text-center",attrs:{"data-content":e.zh?"↓ 配置":"↓ Configuration"}}),e.zh?a("p",[e._v(" 对于基于 webpack 的项目， "),a("code",[e._v("import")]),e._v(" 会自动引入未经转译的 ES Module 版本。请确保按如下指导配置相关工具。 ")]):a("p",[e._v(" For project based on webpack, "),a("code",[e._v("import")]),e._v(" will load the untranspiled ES Module version. Please make sure to add the correct config according to following instructions. ")]),a("details",{attrs:{open:""}},[e._m(2),e.zh?a("p",[e._v(" 对于使用 Vue CLI 3 创建的项目，请确保将 "),a("code",[e._v("vue-clamp")]),e._v(" 与 "),a("code",[e._v("resize-detector")]),e._v(" 加入 "),a("code",[e._v("vue.config.js")]),e._v(" 文件的 "),a("code",[e._v("transpileDependencies")]),e._v(" 选项中： ")]):a("p",[e._v(" For projects created with Vue CLI 3, remember to add "),a("code",[e._v("vue-clamp")]),e._v(" and "),a("code",[e._v("resize-detector")]),e._v(" into the "),a("code",[e._v("transpileDependencies")]),e._v(" option in "),a("code",[e._v("vue.config.js")]),e._v(": ")]),e._m(3)]),a("details",[e._m(4),e.zh?a("p",[e._v(" 如果使用的是 Vue CLI 2 的 "),a("code",[e._v("webpack")]),e._v(" 模板，请按如下方式修改 "),a("code",[e._v("build/webpack.base.conf.js")]),e._v("： ")]):a("p",[e._v(" For Vue CLI 2 with the "),a("code",[e._v("webpack")]),e._v(" template, modify "),a("code",[e._v("build/webpack.base.conf.js")]),e._v(" like this: ")]),e._m(5)]),a("details",[e._m(6),e.zh?a("p",[e._v(" 在 Nuxt.js 中使用时，请确保将 "),a("code",[e._v("vue-clamp")]),e._v(" 与 "),a("code",[e._v("resize-detector")]),e._v(" 加入 "),a("code",[e._v("nuxt.config.js")]),e._v(" 文件的 "),a("code",[e._v("build.transpile")]),e._v(" 选项中： ")]):a("p",[e._v(" When using in Nuxt.js, remember to add "),a("code",[e._v("vue-clamp")]),e._v(" and "),a("code",[e._v("resize-detector")]),e._v(" into the "),a("code",[e._v("build.transpile")]),e._v(" option in "),a("code",[e._v("nuxt.config.js")]),e._v(": ")]),e._m(7)]),a("div",{staticClass:"divider text-center",attrs:{"data-content":e.zh?"↓ 代码样例":"↓ Code example"}}),e._m(8),e._m(9),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ Props"}}),a("section",[a("ul",[a("li",[e._m(10),a("p",[e._v(e._s(e.zh?"生成的根元素的标签名。":"The tag name of the generated root element."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("div")])])]),a("li",[e._m(11),a("p",[e._v(e._s(e.zh?"是否要自动适配根元素的尺寸变化。":"Whether to observe the root element's size."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("false")])])]),a("li",[e._m(12),a("p",[e._v(e._s(e.zh?"可以显示的最大行数":"The max number of lines that can be displayed."))])]),a("li",[e._m(13),e.zh?a("p",[e._v(" 根元素的最大高度。数字值将被转换为 "),a("code",[e._v("px")]),e._v(" 单位；字符串值将直接作为 CSS 属性 "),a("code",[e._v("max-height")]),e._v(" 输出。 ")]):a("p",[e._v(" The max height of the root element. Number values are converted to "),a("code",[e._v("px")]),e._v(" units. String values are used directly as the "),a("code",[e._v("max-height")]),e._v(" CSS property. ")])]),a("li",[e._m(14),a("p",[e._v(e._s(e.zh?"当文字被截断时需要显示的省略号字符串。":"The ellipsis characters displayed when the text is clamped."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("'…'")])])]),a("li",[e._m(15),a("p",[a("span",{staticClass:"label label-primary tooltip",attrs:{"data-tooltip":e.zh?"支持 .sync 修饰符":"Supports .sync modifier"}},[e._v(".sync")])]),a("p",[e._v(e._s(e.zh?"是否展开显式被截断的文本。":"Whether the clamped area is expanded."))]),a("p",[e._v(" "+e._s(e.defaultText)+" "),a("code",[e._v("false")])])])])]),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ Slots"}}),a("section",[a("ul",[a("li",[e._m(16),a("p",[e._v(e._s(e.zh?"需要截断的文本。只能包含纯文本内容。":"The text to clamp. Can only contain pure text."))])]),a("li",[e._m(17),a("p",[e._v(" Slot "+e._s(e.zh?"作用域：":"scope:")+" "),a("code",[e._v("{ expand, collapse, toggle, clamped, expanded }")])]),a("section",{staticClass:"secondary"},[a("p",[a("code",[e._v("expand: function(): void")]),e._v(" - "+e._s(e.zh?"展开被截断的文本。":"Expand the clamped text.")+" ")]),a("p",[a("code",[e._v("collapse: function(): void")]),e._v(" - "+e._s(e.zh?"收起展开后的文本。":"Collapse the expanded text.")+" ")]),a("p",[a("code",[e._v("toggle: function(): void")]),e._v(" - "+e._s(e.zh?"切换被截断文本的展开状态。":"Toggle the expand state of clamped text.")+" ")]),a("p",[a("code",[e._v("clamped: Boolean")]),e._v(" - "+e._s(e.zh?"内容是否处于截断状态。":"Whether text content is being clamped.")+" ")]),a("p",[a("code",[e._v("expanded: Boolean")]),e._v(" - "+e._s(e.zh?"内容是否处于展开状态。":"Whether text content is being expanded.")+" ")])]),a("p",[e._v(e._s(e.zh?"在被截断的文本前显式的内容，可以包含任意类型内容。":"Content displayed before the clamped text. Can contain anything."))])]),a("li",[e._m(18),e.zh?a("p",[e._v(" Slot 作用域：与 "),a("code",[e._v("before")]),e._v(" 相同。 ")]):a("p",[e._v(" Slot scope: Same as "),a("code",[e._v("before")]),e._v(". ")]),a("p",[e._v(e._s(e.zh?"在被截断的文本后显式的内容，可以包含任意类型内容。":"Content displayed after the clamped text. Can contain anything."))])])])]),a("div",{staticClass:"divider text-center",attrs:{"data-content":"↓ Events"}}),a("section",[a("ul",[a("li",[e._m(19),a("p",[e._v(e._s(e.zh?"截断状态变化时触发。":"Emitted when clamp state changes."))]),a("p",[e._v(" "+e._s(e.parameterText)+" "),a("code",[e._v("(clamped: Boolean)")])])])])]),a("footer",[e.zh?a("p",[e._v(" 由 "),a("a",{attrs:{href:"https://github.com/Justineo"}},[e._v("@Justineo")]),e._v(" 创作。 ")]):a("p",[e._v(" Made by "),a("a",{attrs:{href:"https://github.com/Justineo"}},[e._v("@Justineo")]),e._v(". ")]),a("p",[e.zh?a("small",[e._v(" 本页基于 "),a("a",{attrs:{href:"https://picturepan2.github.io/spectre/"}},[e._v("Spectre.css")]),e._v(" 开发。 ")]):a("small",[e._v(" This page is based on "),a("a",{attrs:{href:"https://picturepan2.github.io/spectre/"}},[e._v("Spectre.css")]),e._v(". ")])])])])},n=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("h2",{attrs:{id:"demo"}},[a("a",{attrs:{href:"#demo"}},[e._v("#")]),e._v(" Demo ")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code shell",attrs:{"data-lang":"Shell"}},[a("code",[e._v("$ npm i --save vue-clamp")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("summary",[a("h4",[e._v(" Vue CLI "),a("small",[e._v("v3")])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code javascript",attrs:{"data-lang":"JavaScript"}},[a("code",[e._v("module.exports = {\n transpileDependencies: ['vue-clamp', 'resize-detector']\n}\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("summary",[a("h4",[e._v(" Vue CLI "),a("small",[e._v("v2")])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code diff",attrs:{"data-lang":"Diff"}},[a("code",[e._v(" {\n test: /\\.js$/,\n loader: 'babel-loader',\n- include: [resolve('src'), resolve('test')]\n+ include: [\n+ resolve('src'),\n+ resolve('test'),\n+ resolve('node_modules/vue-clamp'),\n+ resolve('node_modules/resize-detector')\n+ ]\n }\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("summary",[a("h4",[e._v(" Nuxt.js "),a("small",[e._v("v2")])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{staticClass:"code javascript",attrs:{"data-lang":"JavaScript"}},[a("code",[e._v("module.exports = {\n build: {\n transpile: ['vue-clamp', 'resize-detector']\n }\n}\n")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",{pre:!0,attrs:{class:"code vue","data-lang":"Vue"}},[a("code",[e._v("\n\n\\n\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('h2',{attrs:{\"id\":\"api\"}},[_c('a',{attrs:{\"href\":\"#api\"}},[_vm._v(\"#\")]),_vm._v(\" API \")])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"tag: string\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"autoresize: boolean\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"max-lines: number\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"max-height: number|string\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"ellipsis: string\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"expanded: boolean\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"default\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"before\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"after\")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('code',[_vm._v(\"clampchange\")])])}]\n\nexport { render, staticRenderFns }","import { addListener, removeListener } from 'resize-detector'\n\nexport default {\n name: 'vue-clamp',\n props: {\n tag: {\n type: String,\n default: 'div'\n },\n autoresize: {\n type: Boolean,\n default: false\n },\n maxLines: Number,\n maxHeight: [String, Number],\n ellipsis: {\n type: String,\n default: '…'\n },\n location: {\n type: String,\n default: 'end',\n validator: function (value) {\n return ['start', 'middle', 'end'].includes(value)\n }\n },\n expanded: Boolean\n },\n data () {\n return {\n offset: null,\n text: this.getText(),\n localExpanded: !!this.expanded\n }\n },\n computed: {\n clampedText () {\n if (this.location === 'start') {\n return this.ellipsis + (this.text.slice(0, this.offset) || '').trim()\n } else if (this.location === 'middle') {\n const split = this.offset / 2\n return (this.text.slice(0, Math.floor(split)) || '').trim() + this.ellipsis + (this.text.slice(0, Math.ceil(split)) || '').trim()\n }\n\n return (this.text.slice(0, this.offset) || '').trim() + this.ellipsis\n },\n isClamped () {\n if (!this.text) {\n return false\n }\n return this.offset !== this.text.length\n },\n realText () {\n return this.isClamped ? this.clampedText : this.text\n },\n realMaxHeight () {\n if (this.localExpanded) {\n return null\n }\n const { maxHeight } = this\n if (!maxHeight) {\n return null\n }\n return typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n }\n },\n watch: {\n expanded (val) {\n this.localExpanded = val\n },\n localExpanded (val) {\n if (val) {\n this.clampAt(this.text.length)\n } else {\n this.update()\n }\n if (this.expanded !== val) {\n this.$emit('update:expanded', val)\n }\n },\n isClamped: {\n handler (val) {\n this.$nextTick(() => this.$emit('clampchange', val))\n },\n immediate: true\n }\n },\n mounted () {\n this.init()\n\n this.$watch(\n (vm) => [vm.maxLines, vm.maxHeight, vm.ellipsis, vm.isClamped].join(),\n this.update\n )\n this.$watch((vm) => [vm.tag, vm.text, vm.autoresize].join(), this.init)\n },\n updated () {\n this.text = this.getText()\n this.applyChange()\n },\n beforeDestroy () {\n this.cleanUp()\n },\n methods: {\n init () {\n const contents = this.$slots.default\n if (!contents) {\n return\n }\n\n this.offset = this.text.length\n\n this.cleanUp()\n\n if (this.autoresize) {\n addListener(this.$el, this.update)\n this.unregisterResizeCallback = () => {\n removeListener(this.$el, this.update)\n }\n }\n this.update()\n },\n update () {\n if (this.localExpanded) {\n return\n }\n this.applyChange()\n if (this.isOverflow() || this.isClamped) {\n this.search()\n }\n },\n expand () {\n this.localExpanded = true\n },\n collapse () {\n this.localExpanded = false\n },\n toggle () {\n this.localExpanded = !this.localExpanded\n },\n getLines () {\n return Object.keys(\n Array.prototype.slice.call(this.$refs.content.getClientRects()).reduce(\n (prev, { top, bottom }) => {\n const key = `${top}/${bottom}`\n if (!prev[key]) {\n prev[key] = true\n }\n return prev\n },\n {}\n )\n ).length\n },\n isOverflow () {\n if (!this.maxLines && !this.maxHeight) {\n return false\n }\n\n if (this.maxLines) {\n if (this.getLines() > this.maxLines) {\n return true\n }\n }\n\n if (this.maxHeight) {\n if (this.$el.scrollHeight > this.$el.offsetHeight) {\n return true\n }\n }\n return false\n },\n getText () {\n // Look for the first non-empty text node\n const [content] = (this.$slots.default || []).filter(\n (node) => !node.tag && !node.isComment\n )\n return content ? content.text : ''\n },\n moveEdge (steps) {\n this.clampAt(this.offset + steps)\n },\n clampAt (offset) {\n this.offset = offset\n this.applyChange()\n },\n applyChange () {\n this.$refs.text.textContent = this.realText\n },\n stepToFit () {\n this.fill()\n this.clamp()\n },\n fill () {\n while (\n (!this.isOverflow() || this.getLines() < 2) &&\n this.offset < this.text.length\n ) {\n this.moveEdge(1)\n }\n },\n clamp () {\n while (this.isOverflow() && this.getLines() > 1 && this.offset > 0) {\n this.moveEdge(-1)\n }\n },\n search (...range) {\n const [from = 0, to = this.offset] = range\n if (to - from <= 3) {\n this.stepToFit()\n return\n }\n const target = Math.floor((to + from) / 2)\n this.clampAt(target)\n if (this.isOverflow()) {\n this.search(from, target)\n } else {\n this.search(target, to)\n }\n },\n cleanUp () {\n if (this.unregisterResizeCallback) {\n this.unregisterResizeCallback()\n }\n }\n },\n render (h) {\n const contents = [\n h(\n 'span',\n this.$isServer\n ? {}\n : {\n ref: 'text',\n attrs: {\n 'aria-label': this.text.trim()\n }\n },\n this.$isServer ? this.text : this.realText\n )\n ]\n\n const { expand, collapse, toggle } = this\n const scope = {\n expand,\n collapse,\n toggle,\n clamped: this.isClamped,\n expanded: this.localExpanded\n }\n const before = this.$scopedSlots.before\n ? this.$scopedSlots.before(scope)\n : this.$slots.before\n if (before) {\n contents.unshift(...(Array.isArray(before) ? before : [before]))\n }\n const after = this.$scopedSlots.after\n ? this.$scopedSlots.after(scope)\n : this.$slots.after\n if (after) {\n contents.push(...(Array.isArray(after) ? after : [after]))\n }\n const lines = [\n h(\n 'span',\n {\n style: {\n boxShadow: 'transparent 0 0'\n },\n ref: 'content'\n },\n contents\n )\n ]\n return h(\n this.tag,\n {\n style: {\n maxHeight: this.realMaxHeight,\n overflow: 'hidden'\n }\n },\n lines\n )\n }\n}\n","export default function (hljs) {\n const XML_IDENT_RE = '[A-Za-z0-9\\\\._:-]+'\n const TAG_INTERNALS = {\n endsWithParent: true,\n illegal: /`]+/ }\n ]\n }\n ]\n }\n ]\n }\n return {\n case_insensitive: true,\n contains: [\n hljs.COMMENT('', {\n relevance: 10\n }),\n {\n className: 'tag',\n /*\n The lookahead pattern (?=...) ensures that 'begin' only matches\n '|$)',\n end: '>',\n keywords: { name: 'style' },\n contains: [TAG_INTERNALS],\n starts: {\n end: '',\n returnEnd: true,\n subLanguage: ['css', 'less', 'scss', 'stylus']\n }\n },\n {\n className: 'tag',\n // See the comment in the \n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=8c2356ee&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"spectre.css/dist/spectre.min.css?vue&type=style&index=0&lang=css&\"\nimport style1 from \"spectre.css/dist/spectre-exp.min.css?vue&type=style&index=1&lang=css&\"\nimport style2 from \"highlight.js/styles/atom-one-light.css?vue&type=style&index=2&lang=css&\"\nimport style3 from \"./App.vue?vue&type=style&index=3&lang=stylus&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App)\n}).$mount('#app')\n","export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=3&lang=stylus&\""],"sourceRoot":""} \ No newline at end of file