vue3-text-clamp - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/text-clamp.esm.js

@@ -1,1 +0,1 @@
-import{defineComponent as e,ref as t,reactive as a,computed as l,watch as n,nextTick as o,onUnmounted as i,onMounted as r,openBlock as s,createElementBlock as d,normalizeStyle as p,unref as u,createElementVNode as x,renderSlot as f}from"vue";import{addListener as c,removeListener as m}from"resize-detector";const g=["aria-label"];var v=e({__name:"text-clamp",props:{text:{type:String,required:!0},maxHeight:{type:[String,Number],required:!1},maxLines:{type:Number,required:!1},expanded:{type:Boolean,required:!1,default:!1},location:{type:String,required:!1,default:"end"},ellipsis:{type:String,required:!1,default:"…"},autoResize:{type:Boolean,required:!1,default:!1}},emits:["clamp-change","update:expanded"],setup(e,{emit:v}){const h=e,y=t(null),b=t(null),E=t(null),H=a({offset:0,localExpanded:!!h.expanded,unregisterResizeCallback:null}),R=l((()=>{if(!H.localExpanded&&h.maxHeight)return"number"==typeof h?.maxHeight?`${h?.maxHeight}px`:h?.maxHeight})),_=()=>{E.value&&(E.value.textContent=A.value)},k=()=>{H.localExpanded||(_(),(C()||w.value)&&$())},q=()=>{h.text&&(H.offset=h.text.length,z(),h.autoResize&&y.value&&(c(y.value,k),H.unregisterResizeCallback=()=>{y.value&&m(y.value,k)}),k())},z=()=>{H.unregisterResizeCallback?.()},C=()=>!(!h.maxLines&&!h.maxHeight)&&(!!y.value&&(!!(h.maxLines&&L()>h.maxLines)||!!(h.maxHeight&&y.value.scrollHeight>y.value.offsetHeight))),L=()=>b.value?Object.keys(Array.prototype.slice.call(b.value.getClientRects()).reduce(((e,{top:t,bottom:a})=>{const l=`${t}/${a}`;return e[l]||(e[l]=!0),e}),{})).length:0,$=(...e)=>{const[t=0,a=H.offset]=e;if(a-t<=3)return void j();const l=Math.floor((a+t)/2);S(l),C()?$(t,l):$(l,a)},S=e=>{H.offset=e,_()},j=()=>{B(),M()},B=()=>{for(;(!C()||L()<2)&&H.offset<h.text.length;)N(1)},M=()=>{for(;C()&&L()>1&&H.offset>0;)N(-1)},N=e=>{S(H.offset+e)},w=l((()=>!!h.text&&H.offset!==h.text.length));n((()=>w.value),(e=>{o((()=>{v("clamp-change",e)}))}),{immediate:!0});const A=l((()=>w.value?O.value:h.text)),O=l((()=>{if("start"===h.location)return h.ellipsis+(h.text.slice(0,H.offset)||"").trim();if("middle"===h.location){const e=Math.floor(H.offset/2);return(h.text.slice(0,e)||"").trim()+h.ellipsis+(h.text.slice(-e)||"").trim()}return(h.text.slice(0,H.offset)||"").trim()+h.ellipsis})),D=()=>{H.localExpanded=!0},F=()=>{H.localExpanded=!1},G=()=>{H.localExpanded=!H.localExpanded};return n((()=>h.expanded),(e=>{H.localExpanded=e})),n((()=>H.localExpanded),(e=>{e?S(h.text.length):k(),h.expanded!==e&&v("update:expanded",e)})),n((()=>[h.maxLines,h.maxHeight,h.ellipsis,h.location,w.value].join()),(()=>{o((()=>{k()}))})),n((()=>[h.text,h.autoResize].join()),(()=>{o((()=>{q()}))})),i((()=>{z()})),r((()=>{q()})),(t,a)=>(s(),d("div",{ref_key:"textClampRef",ref:y,class:"text-clamp",style:p({overflow:"hidden",maxHeight:u(R)})},[x("span",{ref_key:"contentRef",ref:b},[f(t.$slots,"before",{expand:D,collapse:F,toggle:G,clamped:u(w),expanded:H.localExpanded}),x("span",{ref_key:"textRef",ref:E,"aria-label":e.text},null,8,g),f(t.$slots,"after",{expand:D,collapse:F,toggle:G,clamped:u(w),expanded:H.localExpanded})],512)],4))}});v.__file="package/text-clamp.vue";const h=e=>(e.install=function(t){t.component(e.__name,e)},e),y=h(v);export{y as default,h as withInstall};
+import{defineComponent as e,ref as t,reactive as a,computed as l,watch as n,nextTick as o,onUnmounted as i,onMounted as r,openBlock as s,createElementBlock as d,normalizeStyle as p,unref as u,createElementVNode as x,renderSlot as f}from"vue";import{addListener as c,removeListener as m}from"resize-detector";const g=["aria-label"];var v=e({__name:"text-clamp",props:{text:{type:String,required:!0},maxHeight:{type:[String,Number],required:!1},maxLines:{type:Number,required:!1},expanded:{type:Boolean,required:!1,default:!1},location:{type:String,required:!1,default:"end"},ellipsis:{type:String,required:!1,default:"…"},autoResize:{type:Boolean,required:!1,default:!1}},emits:["clamp-change","update:expanded"],setup(e,{emit:v}){const h=e,y=t(null),b=t(null),E=t(null),H=a({offset:0,localExpanded:!!h.expanded,unregisterResizeCallback:null}),R=l((()=>{if(!H.localExpanded&&h.maxHeight)return"number"==typeof h?.maxHeight?`${h?.maxHeight}px`:h?.maxHeight})),_=()=>{E.value&&(E.value.textContent=A.value)},k=()=>{H.localExpanded||(_(),(C()||w.value)&&$())},q=()=>{h.text&&(H.offset=h.text.length,z(),h.autoResize&&y.value&&(c(y.value,k),H.unregisterResizeCallback=()=>{y.value&&m(y.value,k)}),k())},z=()=>{H.unregisterResizeCallback?.()},C=()=>!(!h.maxLines&&!h.maxHeight)&&(!!y.value&&(!!(h.maxLines&&L()>h.maxLines)||!!(h.maxHeight&&y.value.scrollHeight>y.value.offsetHeight))),L=()=>b.value?Object.keys(Array.prototype.slice.call(b.value.getClientRects()).reduce(((e,{top:t,bottom:a})=>{const l=`${t}/${a}`;return e[l]||(e[l]=!0),e}),{})).length:0,$=(...e)=>{const[t=0,a=H.offset]=e;if(a-t<=3)return void j();const l=Math.floor((a+t)/2);S(l),C()?$(t,l):$(l,a)},S=e=>{H.offset=e,_()},j=()=>{B(),M()},B=()=>{for(;(!C()||L()<2)&&H.offset<h.text.length;)N(1)},M=()=>{for(;C()&&L()>1&&H.offset>0;)N(-1)},N=e=>{S(H.offset+e)},w=l((()=>!!h.text&&H.offset!==h.text.length));n((()=>w.value),(e=>{setTimeout((()=>{v("clamp-change",e)}),0)}),{immediate:!0});const A=l((()=>w.value?O.value:h.text)),O=l((()=>{if("start"===h.location)return h.ellipsis+(h.text.slice(-H.offset)||"").trim();if("middle"===h.location){const e=Math.floor(H.offset/2);return(h.text.slice(0,e)||"").trim()+h.ellipsis+(h.text.slice(-e)||"").trim()}return(h.text.slice(0,H.offset)||"").trim()+h.ellipsis})),T=()=>{H.localExpanded=!0},D=()=>{H.localExpanded=!1},F=()=>{H.localExpanded=!H.localExpanded};return n((()=>h.expanded),(e=>{H.localExpanded=e})),n((()=>H.localExpanded),(e=>{e?S(h.text.length):k(),h.expanded!==e&&v("update:expanded",e)})),n((()=>[h.maxLines,h.maxHeight,h.ellipsis,h.location,w.value].join()),(()=>{o((()=>{k()}))})),n((()=>[h.text,h.autoResize].join()),(()=>{o((()=>{q()}))})),i((()=>{z()})),r((()=>{q()})),(t,a)=>(s(),d("div",{ref_key:"textClampRef",ref:y,class:"text-clamp",style:p({overflow:"hidden",maxHeight:u(R)})},[x("span",{ref_key:"contentRef",ref:b},[f(t.$slots,"before",{expand:T,collapse:D,toggle:F,clamped:u(w),expanded:H.localExpanded}),x("span",{ref_key:"textRef",ref:E,"aria-label":e.text},null,8,g),f(t.$slots,"after",{expand:T,collapse:D,toggle:F,clamped:u(w),expanded:H.localExpanded})],512)],4))}});v.__file="package/text-clamp.vue";const h=e=>(e.install=function(t){t.component(e.__name,e)},e),y=h(v);export{y as default,h as withInstall};

lib/text-clamp.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("resize-detector")):"function"==typeof define&&define.amd?define(["exports","vue","resize-detector"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["text-clamp"]={},e.Vue,e.resizeDetector)}(this,(function(e,t,l){"use strict";const a=["aria-label"];var n=t.defineComponent({__name:"text-clamp",props:{text:{type:String,required:!0},maxHeight:{type:[String,Number],required:!1},maxLines:{type:Number,required:!1},expanded:{type:Boolean,required:!1,default:!1},location:{type:String,required:!1,default:"end"},ellipsis:{type:String,required:!1,default:"…"},autoResize:{type:Boolean,required:!1,default:!1}},emits:["clamp-change","update:expanded"],setup(e,{emit:n}){const o=e,i=t.ref(null),r=t.ref(null),d=t.ref(null),s=t.reactive({offset:0,localExpanded:!!o.expanded,unregisterResizeCallback:null}),c=t.computed((()=>{if(!s.localExpanded&&o.maxHeight)return"number"==typeof o?.maxHeight?`${o?.maxHeight}px`:o?.maxHeight})),u=()=>{d.value&&(d.value.textContent=_.value)},f=()=>{s.localExpanded||(u(),(m()||H.value)&&h())},p=()=>{o.text&&(s.offset=o.text.length,x(),o.autoResize&&i.value&&(l.addListener(i.value,f),s.unregisterResizeCallback=()=>{i.value&&l.removeListener(i.value,f)}),f())},x=()=>{s.unregisterResizeCallback?.()},m=()=>!(!o.maxLines&&!o.maxHeight)&&(!!i.value&&(!!(o.maxLines&&g()>o.maxLines)||!!(o.maxHeight&&i.value.scrollHeight>i.value.offsetHeight))),g=()=>r.value?Object.keys(Array.prototype.slice.call(r.value.getClientRects()).reduce(((e,{top:t,bottom:l})=>{const a=`${t}/${l}`;return e[a]||(e[a]=!0),e}),{})).length:0,h=(...e)=>{const[t=0,l=s.offset]=e;if(l-t<=3)return void y();const a=Math.floor((l+t)/2);v(a),m()?h(t,a):h(a,l)},v=e=>{s.offset=e,u()},y=()=>{b(),E()},b=()=>{for(;(!m()||g()<2)&&s.offset<o.text.length;)k(1)},E=()=>{for(;m()&&g()>1&&s.offset>0;)k(-1)},k=e=>{v(s.offset+e)},H=t.computed((()=>!!o.text&&s.offset!==o.text.length));t.watch((()=>H.value),(e=>{t.nextTick((()=>{n("clamp-change",e)}))}),{immediate:!0});const _=t.computed((()=>H.value?z.value:o.text)),z=t.computed((()=>{if("start"===o.location)return o.ellipsis+(o.text.slice(0,s.offset)||"").trim();if("middle"===o.location){const e=Math.floor(s.offset/2);return(o.text.slice(0,e)||"").trim()+o.ellipsis+(o.text.slice(-e)||"").trim()}return(o.text.slice(0,s.offset)||"").trim()+o.ellipsis})),R=()=>{s.localExpanded=!0},q=()=>{s.localExpanded=!1},w=()=>{s.localExpanded=!s.localExpanded};return t.watch((()=>o.expanded),(e=>{s.localExpanded=e})),t.watch((()=>s.localExpanded),(e=>{e?v(o.text.length):f(),o.expanded!==e&&n("update:expanded",e)})),t.watch((()=>[o.maxLines,o.maxHeight,o.ellipsis,o.location,H.value].join()),(()=>{t.nextTick((()=>{f()}))})),t.watch((()=>[o.text,o.autoResize].join()),(()=>{t.nextTick((()=>{p()}))})),t.onUnmounted((()=>{x()})),t.onMounted((()=>{p()})),(l,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"textClampRef",ref:i,class:"text-clamp",style:t.normalizeStyle({overflow:"hidden",maxHeight:t.unref(c)})},[t.createElementVNode("span",{ref_key:"contentRef",ref:r},[t.renderSlot(l.$slots,"before",{expand:R,collapse:q,toggle:w,clamped:t.unref(H),expanded:s.localExpanded}),t.createElementVNode("span",{ref_key:"textRef",ref:d,"aria-label":e.text},null,8,a),t.renderSlot(l.$slots,"after",{expand:R,collapse:q,toggle:w,clamped:t.unref(H),expanded:s.localExpanded})],512)],4))}});n.__file="package/text-clamp.vue";const o=e=>(e.install=function(t){t.component(e.__name,e)},e),i=o(n);e.default=i,e.withInstall=o,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("resize-detector")):"function"==typeof define&&define.amd?define(["exports","vue","resize-detector"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["text-clamp"]={},e.Vue,e.resizeDetector)}(this,(function(e,t,l){"use strict";const a=["aria-label"];var n=t.defineComponent({__name:"text-clamp",props:{text:{type:String,required:!0},maxHeight:{type:[String,Number],required:!1},maxLines:{type:Number,required:!1},expanded:{type:Boolean,required:!1,default:!1},location:{type:String,required:!1,default:"end"},ellipsis:{type:String,required:!1,default:"…"},autoResize:{type:Boolean,required:!1,default:!1}},emits:["clamp-change","update:expanded"],setup(e,{emit:n}){const o=e,i=t.ref(null),r=t.ref(null),d=t.ref(null),s=t.reactive({offset:0,localExpanded:!!o.expanded,unregisterResizeCallback:null}),u=t.computed((()=>{if(!s.localExpanded&&o.maxHeight)return"number"==typeof o?.maxHeight?`${o?.maxHeight}px`:o?.maxHeight})),c=()=>{d.value&&(d.value.textContent=_.value)},f=()=>{s.localExpanded||(c(),(m()||H.value)&&h())},p=()=>{o.text&&(s.offset=o.text.length,x(),o.autoResize&&i.value&&(l.addListener(i.value,f),s.unregisterResizeCallback=()=>{i.value&&l.removeListener(i.value,f)}),f())},x=()=>{s.unregisterResizeCallback?.()},m=()=>!(!o.maxLines&&!o.maxHeight)&&(!!i.value&&(!!(o.maxLines&&g()>o.maxLines)||!!(o.maxHeight&&i.value.scrollHeight>i.value.offsetHeight))),g=()=>r.value?Object.keys(Array.prototype.slice.call(r.value.getClientRects()).reduce(((e,{top:t,bottom:l})=>{const a=`${t}/${l}`;return e[a]||(e[a]=!0),e}),{})).length:0,h=(...e)=>{const[t=0,l=s.offset]=e;if(l-t<=3)return void y();const a=Math.floor((l+t)/2);v(a),m()?h(t,a):h(a,l)},v=e=>{s.offset=e,c()},y=()=>{b(),E()},b=()=>{for(;(!m()||g()<2)&&s.offset<o.text.length;)k(1)},E=()=>{for(;m()&&g()>1&&s.offset>0;)k(-1)},k=e=>{v(s.offset+e)},H=t.computed((()=>!!o.text&&s.offset!==o.text.length));t.watch((()=>H.value),(e=>{setTimeout((()=>{n("clamp-change",e)}),0)}),{immediate:!0});const _=t.computed((()=>H.value?z.value:o.text)),z=t.computed((()=>{if("start"===o.location)return o.ellipsis+(o.text.slice(-s.offset)||"").trim();if("middle"===o.location){const e=Math.floor(s.offset/2);return(o.text.slice(0,e)||"").trim()+o.ellipsis+(o.text.slice(-e)||"").trim()}return(o.text.slice(0,s.offset)||"").trim()+o.ellipsis})),R=()=>{s.localExpanded=!0},q=()=>{s.localExpanded=!1},w=()=>{s.localExpanded=!s.localExpanded};return t.watch((()=>o.expanded),(e=>{s.localExpanded=e})),t.watch((()=>s.localExpanded),(e=>{e?v(o.text.length):f(),o.expanded!==e&&n("update:expanded",e)})),t.watch((()=>[o.maxLines,o.maxHeight,o.ellipsis,o.location,H.value].join()),(()=>{t.nextTick((()=>{f()}))})),t.watch((()=>[o.text,o.autoResize].join()),(()=>{t.nextTick((()=>{p()}))})),t.onUnmounted((()=>{x()})),t.onMounted((()=>{p()})),(l,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"textClampRef",ref:i,class:"text-clamp",style:t.normalizeStyle({overflow:"hidden",maxHeight:t.unref(u)})},[t.createElementVNode("span",{ref_key:"contentRef",ref:r},[t.renderSlot(l.$slots,"before",{expand:R,collapse:q,toggle:w,clamped:t.unref(H),expanded:s.localExpanded}),t.createElementVNode("span",{ref_key:"textRef",ref:d,"aria-label":e.text},null,8,a),t.renderSlot(l.$slots,"after",{expand:R,collapse:q,toggle:w,clamped:t.unref(H),expanded:s.localExpanded})],512)],4))}});n.__file="package/text-clamp.vue";const o=e=>(e.install=function(t){t.component(e.__name,e)},e),i=o(n);e.default=i,e.withInstall=o,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

@@ -5,3 +5,3 @@ {
   "description": "Vue3 component which allows you to ellipsis your multiline text.",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
@@ -8,0 +8,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

13648

0.08%

No dependency changes