@creopse/vue 0.0.9 → 0.0.10

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=["src","alt","title","width","height","loading"],i=e.defineComponent({__name:"AsyncImg",props:{load:{type:Function},alt:{},width:{},height:{},title:{},loading:{},style:{}},setup(n){const t=n,o=e.ref("");return(async()=>{o.value=await t.load()})(),(s,p)=>(e.openBlock(),e.createElementBlock("img",{src:e.unref(o),alt:t.alt,title:t.title,style:e.normalizeStyle(t.style),width:t.width,height:t.height,loading:t.loading},null,12,r))}}),c=e.defineComponent({__name:"CustomTransition",props:{name:{default:"fade"},mode:{default:"out-in"},appear:{type:Boolean,default:!1}},setup(n){const t=n;return(o,a)=>(e.openBlock(),e.createBlock(e.Transition,{name:t.name,mode:t.mode,appear:t.appear},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",{},void 0,!0)]),_:3},8,["name","mode","appear"]))}}),u=(n,t)=>{const o=n.__vccOpts||n;for(const[a,s]of t)o[a]=s;return o},l=u(c,[["__scopeId","data-v-30b5e62e"]]),d={install(n){n.component("CustomTransition",l),n.component("AsyncImg",i)}};exports.AsyncImg=i;exports.CustomTransition=l;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=["src","alt","title","width","height","loading"],h=e.defineComponent({__name:"AsyncImg",props:{load:{type:Function},alt:{},width:{},height:{},title:{},loading:{},style:{}},setup(o){const t=o,n=e.ref("");return(async()=>{n.value=await t.load()})(),(s,r)=>(e.openBlock(),e.createElementBlock("img",{src:e.unref(n),alt:t.alt,title:t.title,style:e.normalizeStyle(t.style),width:t.width,height:t.height,loading:t.loading},null,12,k))}}),S=e.defineComponent({__name:"CustomTransition",props:{name:{default:"fade"},mode:{default:"out-in"},appear:{type:Boolean,default:!1}},setup(o){const t=o;return(n,l)=>(e.openBlock(),e.createBlock(e.Transition,{name:t.name,mode:t.mode,appear:t.appear},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default",{},void 0,!0)]),_:3},8,["name","mode","appear"]))}}),C=(o,t)=>{const n=o.__vccOpts||o;for(const[l,s]of t)n[l]=s;return n},g=C(S,[["__scopeId","data-v-30b5e62e"]]),_=e.defineComponent({__name:"MountedTeleport",props:{to:{}},setup(o){const t=o,n=e.ref(!1);return e.onMounted(()=>{n.value=!0}),e.onUnmounted(()=>{n.value=!1}),(l,s)=>e.unref(n)?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:t.to},[e.renderSlot(l.$slots,"default")],8,["to"])):e.createCommentVNode("",!0)}}),B=["innerHTML"],z=["href"],E=["href"],w=e.defineComponent({__name:"ReadMore",props:{moreStr:{default:"Read more"},lessStr:{default:""},text:{},link:{default:"#"},maxChars:{default:100}},setup(o){const t=o,n=e.ref(!1),l=e.computed(()=>!n.value&&t.text.length>t.maxChars?t.text.substring(0,t.maxChars)+"...":t.text),s=(r,i)=>{t.link=="#"&&r.preventDefault(),t.lessStr&&(n.value=i)};return(r,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("span",{innerHTML:e.unref(l)},null,8,B),e.withDirectives(e.createElementVNode("span",null,[e.withDirectives(e.createElementVNode("a",{id:"readmore",href:t.link,onClick:i[0]||(i[0]=a=>s(a,!0))},e.toDisplayString(t.moreStr),9,z),[[e.vShow,!e.unref(n)]]),e.withDirectives(e.createElementVNode("a",{id:"readmore",href:t.link,onClick:i[1]||(i[1]=a=>s(a,!1))},e.toDisplayString(t.lessStr),9,E),[[e.vShow,e.unref(n)]])],512),[[e.vShow,t.text.length>t.maxChars]])]))}}),y=e.defineComponent({__name:"StickyBottom",props:{bottom:{default:0},zIndex:{default:1},className:{default:""}},setup(o){const t=o,n=e.ref(null),l=e.ref(!1),s=e.ref(""),r=e.ref(void 0),i=e.ref(void 0),a=e.ref(!1);e.onMounted(()=>{i.value=n.value?.getBoundingClientRect().height,window.addEventListener("scroll",u),window.addEventListener("resize",f),u()}),e.onActivated(()=>{u()}),e.onUnmounted(()=>{window.removeEventListener("scroll",u),window.removeEventListener("resize",f)});const m=()=>{l.value||(s.value="fixed",l.value=!0,r.value=r.value+"px",a.value=!0)},p=()=>{l.value&&v()},v=()=>{s.value="",r.value="auto",l.value=!1,a.value=!1},u=()=>{const d=n.value?.getBoundingClientRect().width;if(r.value=d||"auto",(n.value?.getBoundingClientRect().bottom||0)>t.bottom){m();return}p()},f=()=>{a.value&&(r.value=n.value?.getBoundingClientRect().width+"px")};return(d,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"el",ref:n,style:e.normalizeStyle({height:e.unref(i)+"px",zIndex:t.zIndex})},[e.createElementVNode("div",{class:e.normalizeClass(t.className),style:e.normalizeStyle({bottom:e.unref(a)?t.bottom+"px":"",zIndex:t.zIndex,position:e.unref(s),width:e.unref(r),height:e.unref(i)+"px"})},[e.renderSlot(d.$slots,"default",{},()=>[c[0]||(c[0]=e.createElementVNode("div",null,"Sticky Bottom",-1))])],6)],4))}}),x=e.defineComponent({__name:"StickyTop",props:{top:{default:0},zIndex:{default:1},className:{default:""}},setup(o){const t=o,n=e.ref(null),l=e.ref(!1),s=e.ref(""),r=e.ref(void 0),i=e.ref(void 0),a=e.ref(!1);e.onMounted(()=>{i.value=n.value?.getBoundingClientRect().height,window.addEventListener("scroll",u),window.addEventListener("resize",f)}),e.onActivated(()=>{u()}),e.onUnmounted(()=>{window.removeEventListener("scroll",u),window.removeEventListener("resize",f)});const m=()=>{l.value||(s.value="fixed",l.value=!0,r.value=r.value+"px",a.value=!0)},p=()=>{l.value&&v()},v=()=>{s.value="",r.value="auto",l.value=!1,a.value=!1},u=()=>{const d=n.value?.getBoundingClientRect().width;if(r.value=d||"auto",(n.value?.getBoundingClientRect().top||0)<t.top){m();return}p()},f=()=>{a.value&&(r.value=n.value?.getBoundingClientRect().width+"px")};return(d,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"el",ref:n,style:e.normalizeStyle({height:e.unref(i)+"px",zIndex:t.zIndex})},[e.createElementVNode("div",{class:e.normalizeClass(t.className),style:e.normalizeStyle({top:e.unref(a)?t.top+"px":"",zIndex:t.zIndex,position:e.unref(s),width:e.unref(r),height:e.unref(i)+"px"})},[e.renderSlot(d.$slots,"default",{},()=>[c[0]||(c[0]=e.createElementVNode("div",null,"Sticky Top",-1))])],6)],4))}}),R={install(o){o.component("CustomTransition",g),o.component("MountedTeleport",_),o.component("StickyBottom",y),o.component("StickyTop",x),o.component("ReadMore",w),o.component("AsyncImg",h)}};exports.AsyncImg=h;exports.CustomTransition=g;exports.MountedTeleport=_;exports.ReadMore=w;exports.StickyBottom=y;exports.StickyTop=x;exports.default=R;

package/dist/index.js

@@ -1 +1 @@
-var CreopseVueToolkit=function(a,e){"use strict";const c=["src","alt","title","width","height","loading"],l=e.defineComponent({__name:"AsyncImg",props:{load:{type:Function},alt:{},width:{},height:{},title:{},loading:{},style:{}},setup(n){const t=n,o=e.ref("");return(async()=>{o.value=await t.load()})(),(r,_)=>(e.openBlock(),e.createElementBlock("img",{src:e.unref(o),alt:t.alt,title:t.title,style:e.normalizeStyle(t.style),width:t.width,height:t.height,loading:t.loading},null,12,c))}}),s=((n,t)=>{const o=n.__vccOpts||n;for(const[i,r]of t)o[i]=r;return o})(e.defineComponent({__name:"CustomTransition",props:{name:{default:"fade"},mode:{default:"out-in"},appear:{type:Boolean,default:!1}},setup(n){const t=n;return(o,i)=>(e.openBlock(),e.createBlock(e.Transition,{name:t.name,mode:t.mode,appear:t.appear},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",{},void 0,!0)]),_:3},8,["name","mode","appear"]))}}),[["__scopeId","data-v-30b5e62e"]]),d={install(n){n.component("CustomTransition",s),n.component("AsyncImg",l)}};return a.AsyncImg=l,a.CustomTransition=s,a.default=d,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),a}({},Vue);
+var CreopseVueToolkit=function(d,e){"use strict";const x=["src","alt","title","width","height","loading"],_=e.defineComponent({__name:"AsyncImg",props:{load:{type:Function},alt:{},width:{},height:{},title:{},loading:{},style:{}},setup(o){const t=o,n=e.ref("");return(async()=>{n.value=await t.load()})(),(i,r)=>(e.openBlock(),e.createElementBlock("img",{src:e.unref(n),alt:t.alt,title:t.title,style:e.normalizeStyle(t.style),width:t.width,height:t.height,loading:t.loading},null,12,x))}}),w=((o,t)=>{const n=o.__vccOpts||o;for(const[l,i]of t)n[l]=i;return n})(e.defineComponent({__name:"CustomTransition",props:{name:{default:"fade"},mode:{default:"out-in"},appear:{type:Boolean,default:!1}},setup(o){const t=o;return(n,l)=>(e.openBlock(),e.createBlock(e.Transition,{name:t.name,mode:t.mode,appear:t.appear},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default",{},void 0,!0)]),_:3},8,["name","mode","appear"]))}}),[["__scopeId","data-v-30b5e62e"]]),y=e.defineComponent({__name:"MountedTeleport",props:{to:{}},setup(o){const t=o,n=e.ref(!1);return e.onMounted(()=>{n.value=!0}),e.onUnmounted(()=>{n.value=!1}),(l,i)=>e.unref(n)?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:t.to},[e.renderSlot(l.$slots,"default")],8,["to"])):e.createCommentVNode("",!0)}}),B=["innerHTML"],z=["href"],E=["href"],k=e.defineComponent({__name:"ReadMore",props:{moreStr:{default:"Read more"},lessStr:{default:""},text:{},link:{default:"#"},maxChars:{default:100}},setup(o){const t=o,n=e.ref(!1),l=e.computed(()=>!n.value&&t.text.length>t.maxChars?t.text.substring(0,t.maxChars)+"...":t.text),i=(r,a)=>{t.link=="#"&&r.preventDefault(),t.lessStr&&(n.value=a)};return(r,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("span",{innerHTML:e.unref(l)},null,8,B),e.withDirectives(e.createElementVNode("span",null,[e.withDirectives(e.createElementVNode("a",{id:"readmore",href:t.link,onClick:a[0]||(a[0]=s=>i(s,!0))},e.toDisplayString(t.moreStr),9,z),[[e.vShow,!e.unref(n)]]),e.withDirectives(e.createElementVNode("a",{id:"readmore",href:t.link,onClick:a[1]||(a[1]=s=>i(s,!1))},e.toDisplayString(t.lessStr),9,E),[[e.vShow,e.unref(n)]])],512),[[e.vShow,t.text.length>t.maxChars]])]))}}),S=e.defineComponent({__name:"StickyBottom",props:{bottom:{default:0},zIndex:{default:1},className:{default:""}},setup(o){const t=o,n=e.ref(null),l=e.ref(!1),i=e.ref(""),r=e.ref(void 0),a=e.ref(void 0),s=e.ref(!1);e.onMounted(()=>{a.value=n.value?.getBoundingClientRect().height,window.addEventListener("scroll",c),window.addEventListener("resize",p),c()}),e.onActivated(()=>{c()}),e.onUnmounted(()=>{window.removeEventListener("scroll",c),window.removeEventListener("resize",p)});const u=()=>{l.value||(i.value="fixed",l.value=!0,r.value=r.value+"px",s.value=!0)},h=()=>{l.value&&g()},g=()=>{i.value="",r.value="auto",l.value=!1,s.value=!1},c=()=>{const f=n.value?.getBoundingClientRect().width;if(r.value=f||"auto",(n.value?.getBoundingClientRect().bottom||0)>t.bottom){u();return}h()},p=()=>{s.value&&(r.value=n.value?.getBoundingClientRect().width+"px")};return(f,m)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"el",ref:n,style:e.normalizeStyle({height:e.unref(a)+"px",zIndex:t.zIndex})},[e.createElementVNode("div",{class:e.normalizeClass(t.className),style:e.normalizeStyle({bottom:e.unref(s)?t.bottom+"px":"",zIndex:t.zIndex,position:e.unref(i),width:e.unref(r),height:e.unref(a)+"px"})},[e.renderSlot(f.$slots,"default",{},()=>[m[0]||(m[0]=e.createElementVNode("div",null,"Sticky Bottom",-1))])],6)],4))}}),C=e.defineComponent({__name:"StickyTop",props:{top:{default:0},zIndex:{default:1},className:{default:""}},setup(o){const t=o,n=e.ref(null),l=e.ref(!1),i=e.ref(""),r=e.ref(void 0),a=e.ref(void 0),s=e.ref(!1);e.onMounted(()=>{a.value=n.value?.getBoundingClientRect().height,window.addEventListener("scroll",c),window.addEventListener("resize",p)}),e.onActivated(()=>{c()}),e.onUnmounted(()=>{window.removeEventListener("scroll",c),window.removeEventListener("resize",p)});const u=()=>{l.value||(i.value="fixed",l.value=!0,r.value=r.value+"px",s.value=!0)},h=()=>{l.value&&g()},g=()=>{i.value="",r.value="auto",l.value=!1,s.value=!1},c=()=>{const f=n.value?.getBoundingClientRect().width;if(r.value=f||"auto",(n.value?.getBoundingClientRect().top||0)<t.top){u();return}h()},p=()=>{s.value&&(r.value=n.value?.getBoundingClientRect().width+"px")};return(f,m)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"el",ref:n,style:e.normalizeStyle({height:e.unref(a)+"px",zIndex:t.zIndex})},[e.createElementVNode("div",{class:e.normalizeClass(t.className),style:e.normalizeStyle({top:e.unref(s)?t.top+"px":"",zIndex:t.zIndex,position:e.unref(i),width:e.unref(r),height:e.unref(a)+"px"})},[e.renderSlot(f.$slots,"default",{},()=>[m[0]||(m[0]=e.createElementVNode("div",null,"Sticky Top",-1))])],6)],4))}}),T={install(o){o.component("CustomTransition",w),o.component("MountedTeleport",y),o.component("StickyBottom",S),o.component("StickyTop",C),o.component("ReadMore",k),o.component("AsyncImg",_)}};return d.AsyncImg=_,d.CustomTransition=w,d.MountedTeleport=y,d.ReadMore=k,d.StickyBottom=S,d.StickyTop=C,d.default=T,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),d}({},Vue);

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { defineComponent as s, ref as l, createElementBlock as r, openBlock as i, normalizeStyle as c, unref as p, createBlock as d, Transition as m, withCtx as u, renderSlot as _ } from "vue";
-const f = ["src", "alt", "title", "width", "height", "loading"], h = /* @__PURE__ */ s({
+import { defineComponent as v, ref as l, createElementBlock as _, openBlock as m, normalizeStyle as g, unref as a, createBlock as T, Transition as E, withCtx as L, renderSlot as x, onMounted as z, onUnmounted as B, createCommentVNode as $, Teleport as b, computed as N, createElementVNode as c, withDirectives as S, toDisplayString as R, vShow as C, onActivated as I, normalizeClass as M } from "vue";
+const A = ["src", "alt", "title", "width", "height", "loading"], D = /* @__PURE__ */ v({
   __name: "AsyncImg",
   props: {
     load: { type: Function },
@@ -10,52 +10,215 @@ const f = ["src", "alt", "title", "width", "height", "loading"], h = /* @__PURE_
     loading: {},
     style: {}
   },
-  setup(e) {
-    const t = e, n = l("");
+  setup(n) {
+    const e = n, t = l("");
     return (async () => {
-      n.value = await t.load();
-    })(), (a, v) => (i(), r("img", {
-      src: p(n),
-      alt: t.alt,
-      title: t.title,
-      style: c(t.style),
-      width: t.width,
-      height: t.height,
-      loading: t.loading
-    }, null, 12, f));
+      t.value = await e.load();
+    })(), (i, s) => (m(), _("img", {
+      src: a(t),
+      alt: e.alt,
+      title: e.title,
+      style: g(e.style),
+      width: e.width,
+      height: e.height,
+      loading: e.loading
+    }, null, 12, A));
   }
-}), g = /* @__PURE__ */ s({
+}), H = /* @__PURE__ */ v({
   __name: "CustomTransition",
   props: {
     name: { default: "fade" },
     mode: { default: "out-in" },
     appear: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const t = e;
-    return (n, o) => (i(), d(m, {
-      name: t.name,
-      mode: t.mode,
-      appear: t.appear
+  setup(n) {
+    const e = n;
+    return (t, o) => (m(), T(E, {
+      name: e.name,
+      mode: e.mode,
+      appear: e.appear
     }, {
-      default: u(() => [
-        _(n.$slots, "default", {}, void 0, !0)
+      default: L(() => [
+        x(t.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
     }, 8, ["name", "mode", "appear"]));
   }
-}), y = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [o, a] of t)
-    n[o] = a;
-  return n;
-}, w = /* @__PURE__ */ y(g, [["__scopeId", "data-v-30b5e62e"]]), k = {
-  install(e) {
-    e.component("CustomTransition", w), e.component("AsyncImg", h);
+}), V = (n, e) => {
+  const t = n.__vccOpts || n;
+  for (const [o, i] of e)
+    t[o] = i;
+  return t;
+}, F = /* @__PURE__ */ V(H, [["__scopeId", "data-v-30b5e62e"]]), O = /* @__PURE__ */ v({
+  __name: "MountedTeleport",
+  props: {
+    to: {}
+  },
+  setup(n) {
+    const e = n, t = l(!1);
+    return z(() => {
+      t.value = !0;
+    }), B(() => {
+      t.value = !1;
+    }), (o, i) => a(t) ? (m(), T(b, {
+      key: 0,
+      to: e.to
+    }, [
+      x(o.$slots, "default")
+    ], 8, ["to"])) : $("", !0);
+  }
+}), U = ["innerHTML"], j = ["href"], q = ["href"], G = /* @__PURE__ */ v({
+  __name: "ReadMore",
+  props: {
+    moreStr: { default: "Read more" },
+    lessStr: { default: "" },
+    text: {},
+    link: { default: "#" },
+    maxChars: { default: 100 }
+  },
+  setup(n) {
+    const e = n, t = l(!1), o = N(() => !t.value && e.text.length > e.maxChars ? e.text.substring(0, e.maxChars) + "..." : e.text), i = (s, r) => {
+      e.link == "#" && s.preventDefault(), e.lessStr && (t.value = r);
+    };
+    return (s, r) => (m(), _("div", null, [
+      c("span", { innerHTML: a(o) }, null, 8, U),
+      S(c("span", null, [
+        S(c("a", {
+          id: "readmore",
+          href: e.link,
+          onClick: r[0] || (r[0] = (u) => i(u, !0))
+        }, R(e.moreStr), 9, j), [
+          [C, !a(t)]
+        ]),
+        S(c("a", {
+          id: "readmore",
+          href: e.link,
+          onClick: r[1] || (r[1] = (u) => i(u, !1))
+        }, R(e.lessStr), 9, q), [
+          [C, a(t)]
+        ])
+      ], 512), [
+        [C, e.text.length > e.maxChars]
+      ])
+    ]));
+  }
+}), J = /* @__PURE__ */ v({
+  __name: "StickyBottom",
+  props: {
+    bottom: { default: 0 },
+    zIndex: { default: 1 },
+    className: { default: "" }
+  },
+  setup(n) {
+    const e = n, t = l(null), o = l(!1), i = l(""), s = l(void 0), r = l(void 0), u = l(!1);
+    z(() => {
+      r.value = t.value?.getBoundingClientRect().height, window.addEventListener("scroll", d), window.addEventListener("resize", h), d();
+    }), I(() => {
+      d();
+    }), B(() => {
+      window.removeEventListener("scroll", d), window.removeEventListener("resize", h);
+    });
+    const w = () => {
+      o.value || (i.value = "fixed", o.value = !0, s.value = s.value + "px", u.value = !0);
+    }, y = () => {
+      o.value && k();
+    }, k = () => {
+      i.value = "", s.value = "auto", o.value = !1, u.value = !1;
+    }, d = () => {
+      const p = t.value?.getBoundingClientRect().width;
+      if (s.value = p || "auto", (t.value?.getBoundingClientRect().bottom || 0) > e.bottom) {
+        w();
+        return;
+      }
+      y();
+    }, h = () => {
+      u.value && (s.value = t.value?.getBoundingClientRect().width + "px");
+    };
+    return (p, f) => (m(), _("div", {
+      ref_key: "el",
+      ref: t,
+      style: g({ height: a(r) + "px", zIndex: e.zIndex })
+    }, [
+      c("div", {
+        class: M(e.className),
+        style: g({
+          bottom: a(u) ? e.bottom + "px" : "",
+          zIndex: e.zIndex,
+          position: a(i),
+          width: a(s),
+          height: a(r) + "px"
+        })
+      }, [
+        x(p.$slots, "default", {}, () => [
+          f[0] || (f[0] = c("div", null, "Sticky Bottom", -1))
+        ])
+      ], 6)
+    ], 4));
+  }
+}), K = /* @__PURE__ */ v({
+  __name: "StickyTop",
+  props: {
+    top: { default: 0 },
+    zIndex: { default: 1 },
+    className: { default: "" }
+  },
+  setup(n) {
+    const e = n, t = l(null), o = l(!1), i = l(""), s = l(void 0), r = l(void 0), u = l(!1);
+    z(() => {
+      r.value = t.value?.getBoundingClientRect().height, window.addEventListener("scroll", d), window.addEventListener("resize", h);
+    }), I(() => {
+      d();
+    }), B(() => {
+      window.removeEventListener("scroll", d), window.removeEventListener("resize", h);
+    });
+    const w = () => {
+      o.value || (i.value = "fixed", o.value = !0, s.value = s.value + "px", u.value = !0);
+    }, y = () => {
+      o.value && k();
+    }, k = () => {
+      i.value = "", s.value = "auto", o.value = !1, u.value = !1;
+    }, d = () => {
+      const p = t.value?.getBoundingClientRect().width;
+      if (s.value = p || "auto", (t.value?.getBoundingClientRect().top || 0) < e.top) {
+        w();
+        return;
+      }
+      y();
+    }, h = () => {
+      u.value && (s.value = t.value?.getBoundingClientRect().width + "px");
+    };
+    return (p, f) => (m(), _("div", {
+      ref_key: "el",
+      ref: t,
+      style: g({ height: a(r) + "px", zIndex: e.zIndex })
+    }, [
+      c("div", {
+        class: M(e.className),
+        style: g({
+          top: a(u) ? e.top + "px" : "",
+          zIndex: e.zIndex,
+          position: a(i),
+          width: a(s),
+          height: a(r) + "px"
+        })
+      }, [
+        x(p.$slots, "default", {}, () => [
+          f[0] || (f[0] = c("div", null, "Sticky Top", -1))
+        ])
+      ], 6)
+    ], 4));
+  }
+}), Q = {
+  install(n) {
+    n.component("CustomTransition", F), n.component("MountedTeleport", O), n.component("StickyBottom", J), n.component("StickyTop", K), n.component("ReadMore", G), n.component("AsyncImg", D);
   }
 };
 export {
-  h as AsyncImg,
-  w as CustomTransition,
-  k as default
+  D as AsyncImg,
+  F as CustomTransition,
+  O as MountedTeleport,
+  G as ReadMore,
+  J as StickyBottom,
+  K as StickyTop,
+  Q as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@creopse/vue",
   "description": "Creopse Vue Toolkit",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "author": "Noé Gnanih <noegnanih@gmail.com>",
   "license": "MIT",
@@ -64,4 +64,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/types/components/widgets/MountedTeleport.vue.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    to: string;
+}
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/widgets/ReadMore.vue.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    moreStr?: string;
+    lessStr?: string;
+    text: string;
+    link?: string;
+    maxChars?: number;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    link: string;
+    moreStr: string;
+    lessStr: string;
+    maxChars: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/types/components/widgets/StickyBottom.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    bottom?: number;
+    zIndex?: number;
+    className?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    bottom: number;
+    zIndex: number;
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/widgets/StickyTop.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    top?: number;
+    zIndex?: number;
+    className?: string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    zIndex: number;
+    className: string;
+    top: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/index.d.ts

@@ -1,8 +1,12 @@
 import type { App } from 'vue';
 import AsyncImg from './components/widgets/AsyncImg.vue';
 import CustomTransition from './components/widgets/CustomTransition.vue';
+import MountedTeleport from './components/widgets/MountedTeleport.vue';
+import ReadMore from './components/widgets/ReadMore.vue';
+import StickyBottom from './components/widgets/StickyBottom.vue';
+import StickyTop from './components/widgets/StickyTop.vue';
 declare const plugin: {
     install(app: App): void;
 };
-export { CustomTransition, AsyncImg };
+export { CustomTransition, MountedTeleport, StickyBottom, StickyTop, ReadMore, AsyncImg, };
 export default plugin;