@farris/ui-vue 1.0.0-beta.2 → 1.0.0-beta.3

package/tooltip/index.esm.js

@@ -0,0 +1,195 @@
+import { ref as v, computed as T, defineComponent as L, onMounted as M, createVNode as P, reactive as O, createApp as z, onUnmounted as V, mergeProps as k } from "vue";
+const C = {
+  content: { type: String },
+  width: { type: Number },
+  customClass: { type: String },
+  placement: { type: String, default: "top" },
+  reference: { type: Object, require: !0 },
+  horizontalRelative: { type: String, defatul: "" },
+  verticalRelative: { type: String, defatul: "" }
+};
+function R(i, m) {
+  const p = /* @__PURE__ */ new Map([
+    ["top", "bottom"],
+    ["bottom", "top"],
+    ["left", "right"],
+    ["right", "left"]
+  ]), l = /* @__PURE__ */ new Map([
+    ["top", "height"],
+    ["bottom", "height"],
+    ["left", "width"],
+    ["right", "width"]
+  ]);
+  function f(t, o) {
+    const c = p.get(o) || o;
+    return t.replace(o, c);
+  }
+  function s(t, o, c, e, a) {
+    let u = t;
+    const n = t.split("-")[0], r = l.get(n), d = e[r] + a[r];
+    return Math.abs(c[n] - o[n]) < d && (u = f(t, n)), u;
+  }
+  return { adjustPlacement: s };
+}
+function $(i, m) {
+  function l(s, t, o) {
+    let c = !1, e = o;
+    return (t === "left" || t === "top") && o <= s[t] && (c = !0, e = s[t] + 6), (t === "right" || t === "bottom") && o >= s[t] && (c = !0, e = s[t] - 6), { overBound: c, fixedValue: e };
+  }
+  function f(s, t, o, c, e, a, u) {
+    let n = t.tooltip.left, r = t.tooltip.top, d = t.arrow.left, g = t.arrow.top;
+    const b = s.split("-")[0];
+    if (["top", "bottom"].includes(b)) {
+      const A = l(o, "left", t.tooltip.left), j = l(o, "right", t.tooltip.left + e.width);
+      n = A.overBound ? A.fixedValue : j.overBound ? j.fixedValue - e.width : t.tooltip.left, d = A.overBound ? e.width - (n + e.width - c.right) - u.width : j.overBound ? c.left - n : t.arrow.left;
+    }
+    const x = l(o, "top", t.tooltip.top), h = l(o, "bottom", t.tooltip.top + e.height);
+    return r = x.overBound ? x.fixedValue : h.overBound ? h.fixedValue - e.height : t.tooltip.top, g = x.overBound ? t.arrow.top : h.overBound ? e.height - (r + e.height - c.top) : t.arrow.top, { arrow: { left: d, top: g }, tooltip: { left: n, top: r } };
+  }
+  return { adjustPosition: f };
+}
+function D(i, m) {
+  function l(t, o, c, e, a) {
+    const u = t.split("-"), n = u[0], r = u[1] || "middle", d = ["top", "bottom"].includes(n) ? r === "middle" ? (e.width - a.width) / 2 : r === "right" ? e.width - a.width - 6 : 6 : 0, g = ["left", "right"].includes(n) ? r === "middle" ? (e.height - a.height) / 2 : r === "bottom" ? e.height - a.height - 6 : 6 : 0, y = n === "left" ? e.width + a.width : 0, b = n === "top" ? e.height + a.height : 0;
+    return { left: y + d, top: b + g, right: 0 };
+  }
+  function f(t, o, c, e, a) {
+    const u = t.split("-"), n = u[0], r = u[1] || "middle", d = (c.width - e.width) / 2, g = (c.height - e.height) / 2, y = n === "right" ? o.right : o.left, b = n === "bottom" ? o.bottom : o.top, x = n === "top" ? 0 - g - e.height - a.height : n === "bottom" ? 0 - g + a.height : 0, h = ["left", "right"].includes(n) ? r === "middle" ? (o.height - e.height) / 2 : r === "bottom" ? o.height - e.height : 0 : 0, w = n === "left" ? 0 - d - e.width - a.width : n === "right" ? 0 - d + a.width : 0, E = ["top", "bottom"].includes(n) ? r === "middle" ? (o.width - e.width) / 2 : r === "right" ? o.width - e.width : 0 : 0, A = b + x + h;
+    return { left: y + w + E, top: A };
+  }
+  function s(t, o, c, e, a) {
+    const u = f(t, o, c, e, a);
+    return { arrow: l(t, o, c, e, a), tooltip: u };
+  }
+  return { calculate: s };
+}
+function H(i, m) {
+  const p = v(i.horizontalRelative), l = v(i.verticalRelative);
+  function f(t) {
+    return typeof t == "string" ? document.querySelector(t) : t;
+  }
+  function s() {
+    let t = document.documentElement.clientWidth, o = document.documentElement.clientHeight, c = 0, e = 0, a = 0, u = 0, n = o - c, r = t - e;
+    return p.value && ({ left: e, right: t, x: a, width: r } = f(p.value).getBoundingClientRect()), l.value && ({ bottom: o, top: c, y: u, height: n } = f(l.value).getBoundingClientRect()), { top: c, left: e, right: t, bottom: o, height: n, width: r, x: a, y: u };
+  }
+  return { getRelativeElementBound: s };
+}
+function G(i, m, p, l, f, s) {
+  const t = v(i.placement), { getRelativeElementBound: o } = H(i), { calculate: c } = D(), { adjustPlacement: e } = R(), { adjustPosition: a } = $(), u = T(() => t.value.split("-")[0]), n = T(() => {
+    const r = o();
+    t.value = e(t.value, r, p, l, s);
+    const d = c(t.value, p, l, f, s);
+    return a(
+      t.value,
+      d,
+      r,
+      p,
+      l,
+      f,
+      s
+    );
+  });
+  return { tooltipPlacement: u, tooltipPosition: n };
+}
+const S = L({
+  name: "FTooltip",
+  props: C,
+  emits: ["click"],
+  setup(i, m) {
+    const p = v(!0), l = v(), f = v(), s = v(), t = v(i.placement.split("-")[0]), o = T(() => {
+      const h = {
+        tooltip: !0,
+        show: !0
+      }, w = `bs-tooltip-${t.value}`;
+      return h[w] = !0, h;
+    }), {
+      scrollLeft: c,
+      scrollTop: e
+    } = document.documentElement, a = T(() => p.value), u = T(() => i.content), n = v("0px"), r = v("0px");
+    v("");
+    const d = T(() => ({
+      left: n.value,
+      top: r.value
+    })), g = v(""), y = v(""), b = T(() => ({
+      left: g.value,
+      top: y.value
+    }));
+    M(() => {
+      if (l.value && f.value && s.value && i.reference) {
+        const {
+          tooltipPlacement: h,
+          tooltipPosition: w
+        } = G(i, m, i.reference.getBoundingClientRect(), f.value.getBoundingClientRect(), s.value.getBoundingClientRect(), l.value.getBoundingClientRect());
+        n.value = `${w.value.tooltip.left + c}px`, r.value = `${w.value.tooltip.top + e}px`, g.value = `${w.value.arrow.left}px`, y.value = `${w.value.arrow.top}px`, t.value = h.value;
+      }
+    });
+    function x(h) {
+      m.emit("click", h);
+    }
+    return () => P("div", {
+      ref: f,
+      class: o.value,
+      style: d.value,
+      onClick: x
+    }, [P("div", {
+      ref: l,
+      class: "arrow",
+      style: b.value
+    }, null), P("div", {
+      ref: s,
+      class: "tooltip-inner"
+    }, [P("div", {
+      class: "tooltip-tmpl"
+    }, [a.value && P("div", {
+      class: "tooltip-text",
+      innerHTML: u.value
+    }, null)])])]);
+  }
+});
+function N(i, m) {
+  const p = document.createElement("div"), l = z({
+    setup() {
+      return V(() => {
+        document.body.removeChild(p);
+      }), () => P(S, k(i, {
+        onClick: l.unmount
+      }), null);
+    }
+  });
+  return document.body.appendChild(p), l.mount(p), l;
+}
+function X(i) {
+  const m = O({
+    ...i
+  });
+  return N(m);
+}
+const Y = {
+  mounted: (i, m, p) => {
+    let l;
+    const f = Object.assign({
+      content: "This is a tooltip",
+      width: 100,
+      customClass: "",
+      placement: "top",
+      reference: i
+    }, m.value);
+    i.addEventListener("mouseenter", (s) => {
+      s.stopPropagation(), l || (l = X(f));
+    }), i.addEventListener("mouseleave", (s) => {
+      s.stopPropagation(), l && (l.unmount(), l = null);
+    });
+  },
+  unMounted: (i, m, p) => {
+  }
+}, I = {
+  install(i) {
+    i.component(S.name, S), i.directive("tooltip", Y);
+  }
+};
+export {
+  S as Tooltip,
+  Y as TooltipDirective,
+  I as default,
+  C as tooltipProps
+};

package/tooltip/index.umd.js

@@ -0,0 +1 @@
+(function(w,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(w=typeof globalThis<"u"?globalThis:w||self,o(w.tooltip={},w.Vue))})(this,function(w,o){"use strict";const S={content:{type:String},width:{type:Number},customClass:{type:String},placement:{type:String,default:"top"},reference:{type:Object,require:!0},horizontalRelative:{type:String,defatul:""},verticalRelative:{type:String,defatul:""}},$="";function O(c,g){const f=new Map([["top","bottom"],["bottom","top"],["left","right"],["right","left"]]),l=new Map([["top","height"],["bottom","height"],["left","width"],["right","width"]]);function d(t,n){const r=f.get(n)||n;return t.replace(n,r)}function a(t,n,r,e,u){let p=t;const i=t.split("-")[0],s=l.get(i),h=e[s]+u[s];return Math.abs(r[i]-n[i])<h&&(p=d(t,i)),p}return{adjustPlacement:a}}function E(c,g){function l(a,t,n){let r=!1,e=n;return(t==="left"||t==="top")&&n<=a[t]&&(r=!0,e=a[t]+6),(t==="right"||t==="bottom")&&n>=a[t]&&(r=!0,e=a[t]-6),{overBound:r,fixedValue:e}}function d(a,t,n,r,e,u,p){let i=t.tooltip.left,s=t.tooltip.top,h=t.arrow.left,v=t.arrow.top;const x=a.split("-")[0];if(["top","bottom"].includes(x)){const P=l(n,"left",t.tooltip.left),A=l(n,"right",t.tooltip.left+e.width);i=P.overBound?P.fixedValue:A.overBound?A.fixedValue-e.width:t.tooltip.left,h=P.overBound?e.width-(i+e.width-r.right)-p.width:A.overBound?r.left-i:t.arrow.left}const T=l(n,"top",t.tooltip.top),m=l(n,"bottom",t.tooltip.top+e.height);return s=T.overBound?T.fixedValue:m.overBound?m.fixedValue-e.height:t.tooltip.top,v=T.overBound?t.arrow.top:m.overBound?e.height-(s+e.height-r.top):t.arrow.top,{arrow:{left:h,top:v},tooltip:{left:i,top:s}}}return{adjustPosition:d}}function L(c,g){function l(t,n,r,e,u){const p=t.split("-"),i=p[0],s=p[1]||"middle",h=["top","bottom"].includes(i)?s==="middle"?(e.width-u.width)/2:s==="right"?e.width-u.width-6:6:0,v=["left","right"].includes(i)?s==="middle"?(e.height-u.height)/2:s==="bottom"?e.height-u.height-6:6:0,b=i==="left"?e.width+u.width:0,x=i==="top"?e.height+u.height:0;return{left:b+h,top:x+v,right:0}}function d(t,n,r,e,u){const p=t.split("-"),i=p[0],s=p[1]||"middle",h=(r.width-e.width)/2,v=(r.height-e.height)/2,b=i==="right"?n.right:n.left,x=i==="bottom"?n.bottom:n.top,T=i==="top"?0-v-e.height-u.height:i==="bottom"?0-v+u.height:0,m=["left","right"].includes(i)?s==="middle"?(n.height-e.height)/2:s==="bottom"?n.height-e.height:0:0,y=i==="left"?0-h-e.width-u.width:i==="right"?0-h+u.width:0,M=["top","bottom"].includes(i)?s==="middle"?(n.width-e.width)/2:s==="right"?n.width-e.width:0:0,P=x+T+m;return{left:b+y+M,top:P}}function a(t,n,r,e,u){const p=d(t,n,r,e,u);return{arrow:l(t,n,r,e,u),tooltip:p}}return{calculate:a}}function z(c,g){const f=o.ref(c.horizontalRelative),l=o.ref(c.verticalRelative);function d(t){return typeof t=="string"?document.querySelector(t):t}function a(){let t=document.documentElement.clientWidth,n=document.documentElement.clientHeight,r=0,e=0,u=0,p=0,i=n-r,s=t-e;return f.value&&({left:e,right:t,x:u,width:s}=d(f.value).getBoundingClientRect()),l.value&&({bottom:n,top:r,y:p,height:i}=d(l.value).getBoundingClientRect()),{top:r,left:e,right:t,bottom:n,height:i,width:s,x:u,y:p}}return{getRelativeElementBound:a}}function N(c,g,f,l,d,a){const t=o.ref(c.placement),{getRelativeElementBound:n}=z(c),{calculate:r}=L(),{adjustPlacement:e}=O(),{adjustPosition:u}=E(),p=o.computed(()=>t.value.split("-")[0]),i=o.computed(()=>{const s=n();t.value=e(t.value,s,f,l,a);const h=r(t.value,f,l,d,a);return u(t.value,h,s,f,l,d,a)});return{tooltipPlacement:p,tooltipPosition:i}}const j=o.defineComponent({name:"FTooltip",props:S,emits:["click"],setup(c,g){const f=o.ref(!0),l=o.ref(),d=o.ref(),a=o.ref(),t=o.ref(c.placement.split("-")[0]),n=o.computed(()=>{const m={tooltip:!0,show:!0},y=`bs-tooltip-${t.value}`;return m[y]=!0,m}),{scrollLeft:r,scrollTop:e}=document.documentElement,u=o.computed(()=>f.value),p=o.computed(()=>c.content),i=o.ref("0px"),s=o.ref("0px");o.ref("");const h=o.computed(()=>({left:i.value,top:s.value})),v=o.ref(""),b=o.ref(""),x=o.computed(()=>({left:v.value,top:b.value}));o.onMounted(()=>{if(l.value&&d.value&&a.value&&c.reference){const{tooltipPlacement:m,tooltipPosition:y}=N(c,g,c.reference.getBoundingClientRect(),d.value.getBoundingClientRect(),a.value.getBoundingClientRect(),l.value.getBoundingClientRect());i.value=`${y.value.tooltip.left+r}px`,s.value=`${y.value.tooltip.top+e}px`,v.value=`${y.value.arrow.left}px`,b.value=`${y.value.arrow.top}px`,t.value=m.value}});function T(m){g.emit("click",m)}return()=>o.createVNode("div",{ref:d,class:n.value,style:h.value,onClick:T},[o.createVNode("div",{ref:l,class:"arrow",style:x.value},null),o.createVNode("div",{ref:a,class:"tooltip-inner"},[o.createVNode("div",{class:"tooltip-tmpl"},[u.value&&o.createVNode("div",{class:"tooltip-text",innerHTML:p.value},null)])])])}});function k(c,g){const f=document.createElement("div"),l=o.createApp({setup(){return o.onUnmounted(()=>{document.body.removeChild(f)}),()=>o.createVNode(j,o.mergeProps(c,{onClick:l.unmount}),null)}});return document.body.appendChild(f),l.mount(f),l}function C(c){const g=o.reactive({...c});return k(g)}const V={mounted:(c,g,f)=>{let l;const d=Object.assign({content:"This is a tooltip",width:100,customClass:"",placement:"top",reference:c},g.value);c.addEventListener("mouseenter",a=>{a.stopPropagation(),l||(l=C(d))}),c.addEventListener("mouseleave",a=>{a.stopPropagation(),l&&(l.unmount(),l=null)})},unMounted:(c,g,f)=>{}},R={install(c){c.component(j.name,j),c.directive("tooltip",V)}};w.Tooltip=j,w.TooltipDirective=V,w.default=R,w.tooltipProps=S,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/tooltip/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "tooltip",
+    "version": "1.0.0-beta.4",
+    "main": "index.umd.js",
+    "module": "index.es.js",
+    "style": "style.css"
+}

package/tooltip/style.css

@@ -0,0 +1 @@
+.f-tooltip-bottom .arrow,.f-tooltip-top .arrow{left:50%}.f-tooltip-left .arrow,.f-tooltip-right .arrow{top:25%}