@farris/ui-vue 1.0.0-beta.5 → 1.0.0

package/popover/index.esm.js

@@ -1,83 +1,218 @@
-import { defineComponent as S, ref as p, computed as c, createVNode as l, Fragment as j, Teleport as I, withDirectives as O, vShow as $, nextTick as b } from "vue";
-const k = {
+import { ref as c, computed as g, watch as V, nextTick as q, defineComponent as G, onMounted as J, onUnmounted as K, createVNode as O, Teleport as Q, withDirectives as Y, vShow as Z } from "vue";
+const _ = {
   title: { type: String },
-  placement: { type: String, default: "top" },
+  placement: { type: String, default: "bottom" },
   reference: {
     type: Object
-  }
+  },
+  host: {
+    type: Object
+  },
+  leftBoundary: {
+    type: Object
+  },
+  rightBoundary: {
+    type: Object
+  },
+  visible: { type: Boolean, default: !1 },
+  class: { type: String },
+  offsetX: { type: Object, default: c(0) },
+  zIndex: { type: Number, default: -1 },
+  keepWidthWithReference: { type: Boolean, default: !1 },
+  fitContent: { type: Boolean, default: !1 },
+  minWidth: { type: Number, default: -1 }
 };
-const w = S({
+function ee(e) {
+  const t = e.host ? e.host : "body", s = g(() => t === "body" ? 0 : t ? t.getBoundingClientRect().top : 0), i = g(() => t === "body" ? 0 : t ? t.getBoundingClientRect().left : 0), u = g(() => t === "body" ? document.body.getBoundingClientRect().width : t ? t.getBoundingClientRect().width - (e.rightBoundary ? e.rightBoundary.getBoundingClientRect().width : 0) : document.body.getBoundingClientRect().width);
+  return { host: t, hostLeft: i, hostTop: s, hostWidth: u };
+}
+function te(e, t, s, i) {
+  var E;
+  const u = c(0), h = c(((E = e.offsetX) == null ? void 0 : E.value) || 0), f = c(-1), a = c(-1), P = c(-1), d = c(e.placement), w = c(0), p = c(0), R = c(0), C = c(document.documentElement.scrollLeft), r = c(document.documentElement.scrollTop), { hostLeft: v, hostTop: x, hostWidth: z } = i;
+  V(e.offsetX, (o) => {
+    u.value = o - h.value;
+  });
+  const S = g(() => {
+    const o = {
+      left: `${p.value}px`,
+      top: `${R.value}px`,
+      transform: `translateX(${u.value}px)`
+    };
+    return e.zIndex !== -1 && (o["z-index"] = e.zIndex), f.value !== -1 && (o.width = `${f.value}px`), o;
+  }), j = g(() => ({
+    left: `${w.value}px`
+  }));
+  function B(o) {
+    if (o && e.keepWidthWithReference) {
+      const n = o.getBoundingClientRect();
+      f.value = Math.max(e.minWidth, n.width);
+    }
+  }
+  function b(o, n) {
+    const l = z.value - o.width - 4;
+    return l > 0 ? l : n;
+  }
+  function T(o, n, l) {
+    const m = w.value, y = n.left - v.value + n.width / 2 + C.value, L = n.top - x.value - (o.height + l.height) + r.value;
+    return { popoverLeft: y, popoverTop: L, arrowLeft: m };
+  }
+  function $(o, n, l) {
+    return n.top - x.value + (n.height + l.height) + r.value;
+  }
+  function W(o, n) {
+    const l = b(n, o), m = o <= l ? w.value : o - l;
+    return { popoverLeft: Math.min(o, l), arrowLeft: m };
+  }
+  function I(o, n, l) {
+    const m = n.left - v.value + n.width / 2 - (l.width / 2 - (o.left - v.value)) + C.value, { arrowLeft: y, popoverLeft: L } = W(m, o), k = $(o, n, l);
+    return { popoverLeft: L, popoverTop: k, arrowLeft: y };
+  }
+  function H(o, n, l) {
+    const m = n.left - v.value + C.value, { arrowLeft: y, popoverLeft: L } = W(m, o), k = $(o, n, l);
+    return { popoverLeft: L, popoverTop: k, arrowLeft: y };
+  }
+  const N = /* @__PURE__ */ new Map([
+    ["top", T],
+    ["bottom", I],
+    ["bottom-left", H]
+  ]);
+  function X(o) {
+    var L;
+    const n = o.getBoundingClientRect();
+    a.value = n.top, P.value = n.left;
+    const l = t.value.getBoundingClientRect(), m = (L = s.value) == null ? void 0 : L.getBoundingClientRect(), y = N.get(d.value);
+    if (y) {
+      const { arrowLeft: k, popoverLeft: F, popoverTop: U } = y(m, n, l);
+      w.value = k, p.value = F, R.value = U;
+    }
+    e.keepWidthWithReference && B(o);
+  }
+  function A(o) {
+    if (o) {
+      const n = o.getBoundingClientRect();
+      (n.left !== P.value || n.top !== a.value) && X(o);
+    }
+  }
+  return {
+    arrowStyle: j,
+    popoverStyle: S,
+    position: d,
+    popoverWidth: f,
+    fitToReference: B,
+    followToReferencePosition: A,
+    locateToReference: X
+  };
+}
+function oe(e, t, s, i, u, h, f) {
+  const a = c(e.visible), P = g(() => a.value), { fitToReference: d, locateToReference: w } = f;
+  let p;
+  function R() {
+    a.value = !1, document.body.removeEventListener("click", p), t.emit("hidden");
+  }
+  p = (r) => {
+    if (!u.value.contains(r.target)) {
+      const v = u.value.closest(".popover");
+      v && v.removeEventListener("click", p), R();
+    }
+  };
+  async function C(r) {
+    if (i.value && s.value && r) {
+      a.value = !0, u.value = r, await q(), w(r), h.value && d(r), document.body.addEventListener("click", p);
+      const v = r.closest(".popover");
+      v && v.addEventListener("click", p), t.emit("shown");
+    }
+  }
+  return t.expose({ hide: R, show: C, shown: P }), { showPopover: a, hidePopverOnClickBodyHandler: p };
+}
+function ne(e, t, s, i, u) {
+  const { popoverWidth: h, fitToReference: f, followToReferencePosition: a } = u;
+  function P() {
+    if (s.value) {
+      a(s.value);
+      const d = s.value.getBoundingClientRect();
+      i.value && d.width !== h.value && f(s.value);
+    }
+  }
+  return { onResize: P };
+}
+const D = /* @__PURE__ */ G({
   name: "FPopover",
-  props: k,
-  emits: [],
-  setup(e, o) {
-    let n = 0, t = 0;
-    typeof window < "u" && (n = document.documentElement.scrollLeft, t = document.documentElement.scrollTop);
-    const a = p(), i = p(), f = p(e.placement), h = p("0px"), m = p("0px"), y = c(() => !!e.title), u = p(!1), g = c(() => {
-      const r = `popover in popover-${f.value}`, v = `bs-popover-${f.value}`, s = {};
-      return s[r] = !0, s[v] = !0, s;
-    }), C = c(() => ({
+  props: _,
+  emits: ["shown", "hidden"],
+  setup(e, t) {
+    const s = c(), i = c(), u = c(e.reference), h = c(e.keepWidthWithReference), f = g(() => !!e.title), a = ee(e), {
+      host: P
+    } = a, d = te(e, s, i, a), {
+      position: w,
+      arrowStyle: p,
+      popoverStyle: R,
+      fitToReference: C,
+      locateToReference: r
+    } = d, {
+      showPopover: v,
+      hidePopverOnClickBodyHandler: x
+    } = oe(e, t, s, i, u, h, d), {
+      onResize: z
+    } = ne(e, t, u, h, d), S = g(() => {
+      const B = `popover in popover-${w.value}`, b = `bs-popover-${w.value}`, T = {
+        "popover-fitcontent": e.fitContent
+      };
+      return T[B] = !0, T[b] = !0, (e.class || "").split(" ").reduce((W, I) => (W[I] = !0, W), T), T;
+    }), j = g(() => ({
       "popover-content": !0,
       "popover-body": !0
-    })), L = c(() => ({
-      left: h.value,
-      top: m.value
     }));
-    async function R(r) {
-      var v;
-      if (i.value && a.value) {
-        u.value = !0, await b();
-        const s = r.getBoundingClientRect(), x = a.value.getBoundingClientRect(), T = (v = i.value) == null ? void 0 : v.getBoundingClientRect();
-        h.value = `${s.left + s.width / 2 + n}px`, m.value = `${s.top - (T.height + x.height) + t}px`;
-      }
-    }
-    function E() {
-      u.value = !1;
-    }
-    return o.expose({
-      hide: E,
-      show: R
-    }), () => l(j, null, [l(I, {
-      to: "body"
+    return J(() => {
+      e.reference && r(u.value), h.value && C(u.value), window.addEventListener("resize", z);
+    }), K(() => {
+      document.body.removeEventListener("click", x), window.removeEventListener("resize", z);
+    }), () => O(Q, {
+      to: P
     }, {
       default: () => {
-        var r;
-        return [O(l("div", {
+        var B;
+        return [Y(O("div", {
           ref: i,
-          class: g.value,
-          style: L.value
-        }, [l("div", {
-          ref: a,
-          class: "popover-arrow arrow"
-        }, null), y.value && l("h3", {
+          class: S.value,
+          style: R.value,
+          onClick: (b) => {
+            b.stopPropagation();
+          }
+        }, [O("div", {
+          ref: s,
+          class: "popover-arrow arrow",
+          style: p.value
+        }, null), f.value && O("h3", {
           class: "popover-title popover-header"
-        }, [e.title]), l("div", {
-          class: C.value
-        }, [o.slots.default && ((r = o.slots) == null ? void 0 : r.default())])]), [[$, u.value]])];
+        }, [e.title]), O("div", {
+          class: j.value
+        }, [t.slots.default && ((B = t.slots) == null ? void 0 : B.default())])]), [[Z, v.value]])];
       }
-    })]);
+    });
   }
 });
-function d(e, o, n) {
-  e.stopPropagation(), o.value.value.show(n);
+function M(e, t, s) {
+  e.stopPropagation();
+  const i = t.value;
+  i && i.value && i.value.show(s);
 }
-function P(e, o) {
-  e.stopPropagation(), o.value.value.hide();
+function ie(e, t) {
+  e.stopPropagation(), t.value.value.hide();
 }
-const B = {
-  mounted: (e, o, n) => {
-    o.modifiers.hover ? (e.addEventListener("mouseenter", (t) => d(t, o, e)), e.addEventListener("mouseleave", (t) => P(t, o))) : o.modifiers.click ? e.addEventListener("click", (t) => d(t, o, e)) : (e.addEventListener("mouseenter", (t) => d(t, o, e)), e.addEventListener("mouseleave", (t) => P(t, o)));
+const se = {
+  mounted: (e, t, s) => {
+    t.modifiers.hover ? (e.addEventListener("mouseenter", (i) => M(i, t, e)), e.addEventListener("mouseleave", (i) => ie(i, t))) : t.modifiers.click ? e.addEventListener("click", (i) => M(i, t, e)) : e.addEventListener("click", (i) => M(i, t, e));
   },
-  unMounted: (e, o, n) => {
+  unMounted: (e, t, s) => {
   }
-}, F = {
+}, ce = {
   install(e) {
-    e.component(w.name, w), e.directive("popover", B);
+    e.component(D.name, D), e.directive("popover", se);
   }
 };
 export {
-  w as Popover,
-  B as PopoverDirective,
-  F as default,
-  k as popoverProps
+  D as Popover,
+  se as PopoverDirective,
+  ce as default,
+  _ as popoverProps
 };

package/popover/index.umd.js

@@ -1 +1 @@
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.popover={},r.Vue))})(this,function(r,e){"use strict";const f={title:{type:String},placement:{type:String,default:"top"},reference:{type:Object}},N="",i=e.defineComponent({name:"FPopover",props:f,emits:[],setup(o,t){let s=0,n=0;typeof window<"u"&&(s=document.documentElement.scrollLeft,n=document.documentElement.scrollTop);const d=e.ref(),u=e.ref(),P=e.ref(o.placement),y=e.ref("0px"),w=e.ref("0px"),T=e.computed(()=>!!o.title),v=e.ref(!1),C=e.computed(()=>{const p=`popover in popover-${P.value}`,l=`bs-popover-${P.value}`,c={};return c[p]=!0,c[l]=!0,c}),L=e.computed(()=>({"popover-content":!0,"popover-body":!0})),R=e.computed(()=>({left:y.value,top:w.value}));async function E(p){var l;if(u.value&&d.value){v.value=!0,await e.nextTick();const c=p.getBoundingClientRect(),V=d.value.getBoundingClientRect(),j=(l=u.value)==null?void 0:l.getBoundingClientRect();y.value=`${c.left+c.width/2+s}px`,w.value=`${c.top-(j.height+V.height)+n}px`}}function S(){v.value=!1}return t.expose({hide:S,show:E}),()=>e.createVNode(e.Fragment,null,[e.createVNode(e.Teleport,{to:"body"},{default:()=>{var p;return[e.withDirectives(e.createVNode("div",{ref:u,class:C.value,style:R.value},[e.createVNode("div",{ref:d,class:"popover-arrow arrow"},null),T.value&&e.createVNode("h3",{class:"popover-title popover-header"},[o.title]),e.createVNode("div",{class:L.value},[t.slots.default&&((p=t.slots)==null?void 0:p.default())])]),[[e.vShow,v.value]])]}})])}});function a(o,t,s){o.stopPropagation(),t.value.value.show(s)}function h(o,t){o.stopPropagation(),t.value.value.hide()}const m={mounted:(o,t,s)=>{t.modifiers.hover?(o.addEventListener("mouseenter",n=>a(n,t,o)),o.addEventListener("mouseleave",n=>h(n,t))):t.modifiers.click?o.addEventListener("click",n=>a(n,t,o)):(o.addEventListener("mouseenter",n=>a(n,t,o)),o.addEventListener("mouseleave",n=>h(n,t)))},unMounted:(o,t,s)=>{}},g={install(o){o.component(i.name,i),o.directive("popover",m)}};r.Popover=i,r.PopoverDirective=m,r.default=g,r.popoverProps=f,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(d,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis<"u"?globalThis:d||self,t(d.popover={},d.Vue))})(this,function(d,t){"use strict";const I={title:{type:String},placement:{type:String,default:"bottom"},reference:{type:Object},host:{type:Object},leftBoundary:{type:Object},rightBoundary:{type:Object},visible:{type:Boolean,default:!1},class:{type:String},offsetX:{type:Object,default:t.ref(0)},zIndex:{type:Number,default:-1},keepWidthWithReference:{type:Boolean,default:!1},fitContent:{type:Boolean,default:!1},minWidth:{type:Number,default:-1}},Y="";function D(e){const o=e.host?e.host:"body",s=t.computed(()=>o==="body"?0:o?o.getBoundingClientRect().top:0),c=t.computed(()=>o==="body"?0:o?o.getBoundingClientRect().left:0),r=t.computed(()=>o==="body"?document.body.getBoundingClientRect().width:o?o.getBoundingClientRect().width-(e.rightBoundary?e.rightBoundary.getBoundingClientRect().width:0):document.body.getBoundingClientRect().width);return{host:o,hostLeft:c,hostTop:s,hostWidth:r}}function H(e,o,s,c){var E;const r=t.ref(0),m=t.ref(((E=e.offsetX)==null?void 0:E.value)||0),v=t.ref(-1),a=t.ref(-1),P=t.ref(-1),h=t.ref(e.placement),y=t.ref(0),p=t.ref(0),R=t.ref(0),T=t.ref(document.documentElement.scrollLeft),u=t.ref(document.documentElement.scrollTop),{hostLeft:f,hostTop:k,hostWidth:S}=c;t.watch(e.offsetX,n=>{r.value=n-m.value});const x=t.computed(()=>{const n={left:`${p.value}px`,top:`${R.value}px`,transform:`translateX(${r.value}px)`};return e.zIndex!==-1&&(n["z-index"]=e.zIndex),v.value!==-1&&(n.width=`${v.value}px`),n}),M=t.computed(()=>({left:`${y.value}px`}));function C(n){if(n&&e.keepWidthWithReference){const i=n.getBoundingClientRect();v.value=Math.max(e.minWidth,i.width)}}function B(n,i){const l=S.value-n.width-4;return l>0?l:i}function b(n,i,l){const w=y.value,g=i.left-f.value+i.width/2+T.value,L=i.top-k.value-(n.height+l.height)+u.value;return{popoverLeft:g,popoverTop:L,arrowLeft:w}}function N(n,i,l){return i.top-k.value+(i.height+l.height)+u.value}function O(n,i){const l=B(i,n),w=n<=l?y.value:n-l;return{popoverLeft:Math.min(n,l),arrowLeft:w}}function $(n,i,l){const w=i.left-f.value+i.width/2-(l.width/2-(n.left-f.value))+T.value,{arrowLeft:g,popoverLeft:L}=O(w,n),W=N(n,i,l);return{popoverLeft:L,popoverTop:W,arrowLeft:g}}function U(n,i,l){const w=i.left-f.value+T.value,{arrowLeft:g,popoverLeft:L}=O(w,n),W=N(n,i,l);return{popoverLeft:L,popoverTop:W,arrowLeft:g}}const G=new Map([["top",b],["bottom",$],["bottom-left",U]]);function X(n){var L;const i=n.getBoundingClientRect();a.value=i.top,P.value=i.left;const l=o.value.getBoundingClientRect(),w=(L=s.value)==null?void 0:L.getBoundingClientRect(),g=G.get(h.value);if(g){const{arrowLeft:W,popoverLeft:K,popoverTop:Q}=g(w,i,l);y.value=W,p.value=K,R.value=Q}e.keepWidthWithReference&&C(n)}function J(n){if(n){const i=n.getBoundingClientRect();(i.left!==P.value||i.top!==a.value)&&X(n)}}return{arrowStyle:M,popoverStyle:x,position:h,popoverWidth:v,fitToReference:C,followToReferencePosition:J,locateToReference:X}}function A(e,o,s,c,r,m,v){const a=t.ref(e.visible),P=t.computed(()=>a.value),{fitToReference:h,locateToReference:y}=v;let p;function R(){a.value=!1,document.body.removeEventListener("click",p),o.emit("hidden")}p=u=>{if(!r.value.contains(u.target)){const f=r.value.closest(".popover");f&&f.removeEventListener("click",p),R()}};async function T(u){if(c.value&&s.value&&u){a.value=!0,r.value=u,await t.nextTick(),y(u),m.value&&h(u),document.body.addEventListener("click",p);const f=u.closest(".popover");f&&f.addEventListener("click",p),o.emit("shown")}}return o.expose({hide:R,show:T,shown:P}),{showPopover:a,hidePopverOnClickBodyHandler:p}}function F(e,o,s,c,r){const{popoverWidth:m,fitToReference:v,followToReferencePosition:a}=r;function P(){if(s.value){a(s.value);const h=s.value.getBoundingClientRect();c.value&&h.width!==m.value&&v(s.value)}}return{onResize:P}}const j=t.defineComponent({name:"FPopover",props:I,emits:["shown","hidden"],setup(e,o){const s=t.ref(),c=t.ref(),r=t.ref(e.reference),m=t.ref(e.keepWidthWithReference),v=t.computed(()=>!!e.title),a=D(e),{host:P}=a,h=H(e,s,c,a),{position:y,arrowStyle:p,popoverStyle:R,fitToReference:T,locateToReference:u}=h,{showPopover:f,hidePopverOnClickBodyHandler:k}=A(e,o,s,c,r,m,h),{onResize:S}=F(e,o,r,m,h),x=t.computed(()=>{const C=`popover in popover-${y.value}`,B=`bs-popover-${y.value}`,b={"popover-fitcontent":e.fitContent};return b[C]=!0,b[B]=!0,(e.class||"").split(" ").reduce((O,$)=>(O[$]=!0,O),b),b}),M=t.computed(()=>({"popover-content":!0,"popover-body":!0}));return t.onMounted(()=>{e.reference&&u(r.value),m.value&&T(r.value),window.addEventListener("resize",S)}),t.onUnmounted(()=>{document.body.removeEventListener("click",k),window.removeEventListener("resize",S)}),()=>t.createVNode(t.Teleport,{to:P},{default:()=>{var C;return[t.withDirectives(t.createVNode("div",{ref:c,class:x.value,style:R.value,onClick:B=>{B.stopPropagation()}},[t.createVNode("div",{ref:s,class:"popover-arrow arrow",style:p.value},null),v.value&&t.createVNode("h3",{class:"popover-title popover-header"},[e.title]),t.createVNode("div",{class:M.value},[o.slots.default&&((C=o.slots)==null?void 0:C.default())])]),[[t.vShow,f.value]])]}})}});function z(e,o,s){e.stopPropagation();const c=o.value;c&&c.value&&c.value.show(s)}function _(e,o){e.stopPropagation(),o.value.value.hide()}const V={mounted:(e,o,s)=>{o.modifiers.hover?(e.addEventListener("mouseenter",c=>z(c,o,e)),e.addEventListener("mouseleave",c=>_(c,o))):o.modifiers.click?e.addEventListener("click",c=>z(c,o,e)):e.addEventListener("click",c=>z(c,o,e))},unMounted:(e,o,s)=>{}},q={install(e){e.component(j.name,j),e.directive("popover",V)}};d.Popover=j,d.PopoverDirective=V,d.default=q,d.popoverProps=I,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/popover/package.json

@@ -1,8 +1,8 @@
 {
     "name": "popover",
-    "version": "1.0.0-beta.6",
+    "version": "1.0.2",
     "main": "index.umd.js",
-    "module": "index.es.js",
+    "module": "index.esm.js",
     "style": "style.css",
     "types": "../types/popover/index.d.ts"
 }

package/popover/style.css

@@ -1 +1 @@
-.bs3.popover-top{margin-bottom:10px}.bs3.popover.top>.arrow{margin-left:-2px}.bs3.popover.top{margin-bottom:10px}.popover.bottom>.arrow{margin-left:-4px}.bs3.bs-popover-left{margin-right:.5rem}.bs3.bs-popover-right .arrow,.bs3.bs-popover-left .arrow{margin:.3rem 0}.arrow-left .arrow{left:calc(50% - 10px)}
+.bs3.popover-top{margin-bottom:10px}.bs3.popover.top>.arrow{margin-left:-2px}.bs3.popover.top{margin-bottom:10px}.popover.bottom>.arrow{margin-left:-4px}.bs3.bs-popover-left{margin-right:.5rem}.bs3.bs-popover-right .arrow,.bs3.bs-popover-left .arrow{margin:.3rem 0}.arrow-left .arrow{left:calc(50% - 10px)}.bs-popover-bottom-left .arrow{top:calc((.5rem + 1px)*-1)}.bs-popover-bottom-left .arrow:before{top:0;border-bottom-color:#fff6!important}.bs-popover-bottom-left .arrow:before,.bs-popover-bottom-left .arrow:after{border-width:0 .5rem .5rem}.bs-popover-bottom-left .arrow:after{top:1px;border-bottom-color:#fff!important}.popover.popover-fitcontent .popover-body{max-width:initial;padding:initial}

package/propress/index.esm.js

@@ -0,0 +1,108 @@
+import { defineComponent as G, ref as e, watch as L, computed as l, createVNode as r } from "vue";
+const W = {
+  type: { type: String, default: "line" },
+  strokeWidth: { type: Number, default: 0 },
+  size: { type: String, default: "default" },
+  showInfo: { type: Boolean, default: !0 },
+  progressStatus: { type: String, default: "default" },
+  successPercent: { type: Number, default: 0 },
+  strokeColor: { type: String, default: "" },
+  strokeLinecap: { type: String, default: "round" },
+  width: { type: Number, default: 0 },
+  percent: { type: Number, default: 0 }
+};
+const f = /* @__PURE__ */ G({
+  name: "FProgress",
+  props: W,
+  emits: [],
+  setup(s, F) {
+    const y = e(s.progressStatus), n = e(s.type), d = e(s.size), h = e(s.showInfo), k = e(s.strokeWidth), o = e(s.percent), c = e(s.strokeLinecap), a = e(!1), b = e(s.strokeColor), m = e(null), v = e(0), i = e(s.width), S = e(""), w = e([]), p = e(""), x = e([]);
+    L(() => s.percent, (t) => {
+      o.value = t || 0;
+    });
+    const u = l(() => k.value || (n.value === "line" && d.value !== "small" ? 8 : 6)), g = l(() => n.value === "circle" || n.value === "dashboard"), P = l(() => {
+      const t = {
+        "f-progress": !0,
+        "f-progress-line": n.value === "line",
+        "ant-progress-small": d.value === "small",
+        "f-progress-show-info": h.value,
+        ".f-progress-circle": g.value
+      }, z = `f-progress-status-${y.value}`;
+      return t[z] = !0, t;
+    }), j = l(() => ({
+      width: `${o.value}%`,
+      "border-radius": c.value === "round" ? "100px" : "0",
+      backgroud: a.value ? null : b.value,
+      "background-image": a.value ? m.value : null,
+      height: `${u.value}px`
+    })), C = l(() => ({
+      width: `${o.value}%`,
+      "border-radius": c.value === "round" ? "100px" : "0",
+      height: `${u.value}px`
+    })), O = l(() => v.value || v.value === 0);
+    function B() {
+      return r("div", {
+        class: "f-progress-outer"
+      }, [r("div", {
+        class: "f-progress-inner"
+      }, [r("div", {
+        class: "f-progress-bg",
+        style: j.value
+      }, null), O.value && r("div", {
+        class: "f-progress-success-bg",
+        style: C.value
+      }, null)])]);
+    }
+    const $ = l(() => ({
+      width: `${i.value}px`,
+      height: `${i.value}px`,
+      "font-size": `${i.value * 0.15 + 6}px`,
+      "f-progress-circle-gradient": a.value
+    })), I = l(() => ({}));
+    function N() {
+      return r("div", {
+        class: "f-progress-inner",
+        style: $.value
+      }, [r("svg", {
+        class: "f-progress-circle",
+        viewBox: "0 0 100 100"
+      }, [a.value && r("defs", null, [r("linearGradient", {
+        id: "gradient-" + S.value,
+        x1: "100%",
+        y1: "0%",
+        x2: "0%",
+        y2: "0%"
+      }, [w.value.map((t) => r("stop", {
+        offset: t.offset,
+        "stop-color": t.color
+      }, null))])]), r("path", {
+        class: "f-progress-circle-trail",
+        stroke: "#efefef",
+        "fill-opacity": "0",
+        "stroke-width": u.value,
+        d: p.value,
+        style: I.value
+      }, null), x.value.map((t) => r("path", {
+        class: "f-progress-circle-path",
+        "fill-opacity": "0",
+        d: p.value,
+        "stroke-linecap": c.value,
+        stroke: t.stroke,
+        "stroke-width": o.value ? u.value : 0,
+        style: t.strokePathStyle
+      }, null))])]);
+    }
+    return () => r("div", {
+      class: P.value
+    }, [n.value === "line" && B(), g.value && N()]);
+  }
+}), V = {
+  install(s) {
+    s.component(f.name, f);
+  }
+};
+export {
+  f as Progress,
+  V as default,
+  W as progressProps
+};

package/propress/index.umd.js

@@ -0,0 +1 @@
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.propress={},s.Vue))})(this,function(s,e){"use strict";const d={type:{type:String,default:"line"},strokeWidth:{type:Number,default:0},size:{type:String,default:"default"},showInfo:{type:Boolean,default:!0},progressStatus:{type:String,default:"default"},successPercent:{type:Number,default:0},strokeColor:{type:String,default:""},strokeLinecap:{type:String,default:"round"},width:{type:Number,default:0},percent:{type:Number,default:0}},G="",c=e.defineComponent({name:"FProgress",props:d,emits:[],setup(r,L){const m=e.ref(r.progressStatus),o=e.ref(r.type),f=e.ref(r.size),b=e.ref(r.showInfo),k=e.ref(r.strokeWidth),l=e.ref(r.percent),i=e.ref(r.strokeLinecap),n=e.ref(!1),v=e.ref(r.strokeColor),S=e.ref(null),p=e.ref(0),u=e.ref(r.width),N=e.ref(""),P=e.ref([]),g=e.ref(""),w=e.ref([]);e.watch(()=>r.percent,t=>{l.value=t||0});const a=e.computed(()=>k.value||(o.value==="line"&&f.value!=="small"?8:6)),y=e.computed(()=>o.value==="circle"||o.value==="dashboard"),V=e.computed(()=>{const t={"f-progress":!0,"f-progress-line":o.value==="line","ant-progress-small":f.value==="small","f-progress-show-info":b.value,".f-progress-circle":y.value},z=`f-progress-status-${m.value}`;return t[z]=!0,t}),x=e.computed(()=>({width:`${l.value}%`,"border-radius":i.value==="round"?"100px":"0",backgroud:n.value?null:v.value,"background-image":n.value?S.value:null,height:`${a.value}px`})),j=e.computed(()=>({width:`${l.value}%`,"border-radius":i.value==="round"?"100px":"0",height:`${a.value}px`})),O=e.computed(()=>p.value||p.value===0);function C(){return e.createVNode("div",{class:"f-progress-outer"},[e.createVNode("div",{class:"f-progress-inner"},[e.createVNode("div",{class:"f-progress-bg",style:x.value},null),O.value&&e.createVNode("div",{class:"f-progress-success-bg",style:j.value},null)])])}const B=e.computed(()=>({width:`${u.value}px`,height:`${u.value}px`,"font-size":`${u.value*.15+6}px`,"f-progress-circle-gradient":n.value})),$=e.computed(()=>({}));function I(){return e.createVNode("div",{class:"f-progress-inner",style:B.value},[e.createVNode("svg",{class:"f-progress-circle",viewBox:"0 0 100 100"},[n.value&&e.createVNode("defs",null,[e.createVNode("linearGradient",{id:"gradient-"+N.value,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[P.value.map(t=>e.createVNode("stop",{offset:t.offset,"stop-color":t.color},null))])]),e.createVNode("path",{class:"f-progress-circle-trail",stroke:"#efefef","fill-opacity":"0","stroke-width":a.value,d:g.value,style:$.value},null),w.value.map(t=>e.createVNode("path",{class:"f-progress-circle-path","fill-opacity":"0",d:g.value,"stroke-linecap":i.value,stroke:t.stroke,"stroke-width":l.value?a.value:0,style:t.strokePathStyle},null))])])}return()=>e.createVNode("div",{class:V.value},[o.value==="line"&&C(),y.value&&I()])}}),h={install(r){r.component(c.name,c)}};s.Progress=c,s.default=h,s.progressProps=d,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/propress/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "propress",
+    "version": "1.0.2",
+    "main": "index.umd.js",
+    "module": "index.esm.js",
+    "style": "style.css",
+    "types": "../types/propress/index.d.ts"
+}

package/propress/style.css

@@ -0,0 +1 @@
+.f-progress{display:inline-block;font-size:.875rem;color:#000000a6}.f-progress.f-progress-line{position:relative;width:100%}.f-progress.f-progress-line .f-progress-text .f-progress-text-icon{font-size:1.25rem}.f-progress .f-progress-outer{display:inline-block;width:100%}.f-progress .f-progress-inner{position:relative;display:inline-block;width:100%;overflow:hidden;vertical-align:middle;background-color:#efefef;border-radius:100px}.f-progress .f-progress-bg,.f-progress .f-progress-success-bg{position:relative;border-radius:100px;transition:all .4s cubic-bezier(.08,.82,.17,1) 0s}.f-progress .f-progress-success-bg{position:absolute;top:0;left:0}.f-progress .f-progress-text{display:inline-block;width:1.75rem;margin-left:.5rem;color:#000000a6;font-size:1em;line-height:1;white-space:nowrap;text-align:left;vertical-align:middle;word-break:normal}.f-progress-status-active .f-progress-bg:before{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;border-radius:.625rem;opacity:0;animation:f-progress-active 2.4s ease-in-out infinite;content:""}.f-progress-show-info .f-progress-outer{padding-right:48px;margin-right:-48px}.f-progress.f-progress-circle .f-progress-inner{position:relative;line-height:1;background-color:transparent}.f-progress.f-progress-circle .f-progress-text{position:absolute;top:50%;left:50%;width:100%;margin:0;padding:0;color:#000000a6;line-height:1;white-space:normal;text-align:center;transform:translate(-50%,-50%)}.f-progress.f-progress-circle .f-progress-text .f-progress-text-icon{font-size:1.3em}@keyframes f-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}