geekin-devtoys 0.0.3 → 0.0.5

package/lib/GPercent/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),S="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20version='1.1'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='11px'%20height='12px'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='matrix(1%200%200%201%20-1755%20-466%20)'%3e%3cpath%20d='M%201755.77886671114%20477.5%20L%201760.5%20467.199345551568%20L%201765.22113328886%20477.5%20L%201755.77886671114%20477.5%20Z%20'%20fill-rule='nonzero'%20fill='%23fa3239'%20stroke='none'%20/%3e%3cpath%20d='M%201755%20478%20L%201760.5%20466%20L%201766%20478%20L%201755%20478%20Z%20M%201760.5%20468.398691103136%20L%201756.55773342227%20477%20L%201764.44226657773%20477%20L%201760.5%20468.398691103136%20Z%20'%20fill-rule='nonzero'%20fill='%23797979'%20stroke='none'%20/%3e%3c/g%3e%3c/svg%3e",E="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20version='1.1'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='11px'%20height='12px'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='matrix(1%200%200%201%20-1755%20-304%20)'%3e%3cpath%20d='M%201755.77886671114%20315.5%20L%201760.5%20305.199345551568%20L%201765.22113328886%20315.5%20L%201755.77886671114%20315.5%20Z%20'%20fill-rule='nonzero'%20fill='%232ce534'%20stroke='none'%20/%3e%3cpath%20d='M%201755%20316%20L%201760.5%20304%20L%201766%20316%20L%201755%20316%20Z%20M%201760.5%20306.398691103136%20L%201756.55773342227%20315%20L%201764.44226657773%20315%20L%201760.5%20306.398691103136%20Z%20'%20fill-rule='nonzero'%20fill='%23797979'%20stroke='none'%20/%3e%3c/g%3e%3c/svg%3e",N={class:"g-percent-symbol-updown"},P={src:S,alt:"down",style:{transform:"rotate(180deg)"},class:"g-percent-svg"},V={src:E,alt:"up",class:"g-percent-svg"},z=t.defineComponent({name:"GPercent",__name:"index",props:{to:{},from:{default:0},direction:{default:""},delay:{default:0},duration:{default:2},className:{default:""},startWhen:{type:Boolean,default:!0},decimalPlaces:{default:0},onStart:{},onEnd:{}},setup(o){const e=o,r=t.useTemplateRef("elementRef"),n=t.ref(e.direction==="down"?e.to:e.from),a=t.ref(!1),s=t.ref(null),m=t.ref(!1);let l=null;const g=t.computed(()=>20+40*(1/e.duration)),w=t.computed(()=>200*(1/e.duration));let i=0;const p=c=>{const u=e.direction==="down"?e.from:e.to,_=n.value,f=u-_,L=f*w.value,b=i*g.value,M=L-b;i+=M*.016,n.value+=i*.016,n.value=Math.max(0,Math.min(100,n.value));const y=Math.pow(10,-e.decimalPlaces)*.1,k=Math.pow(10,-e.decimalPlaces)*.1;Math.abs(f)>y||Math.abs(i)>k?s.value=requestAnimationFrame(p):(n.value=u,s.value=null,e.onEnd&&e.onEnd())},v=()=>{m.value||!a.value||!e.startWhen||(m.value=!0,e.onStart&&e.onStart(),setTimeout(()=>{i=0,s.value=requestAnimationFrame(p)},e.delay*1e3))},h=()=>{r.value&&(l=new IntersectionObserver(([c])=>{c.isIntersecting&&!a.value&&(a.value=!0,v())},{threshold:0,rootMargin:"0px"}),l.observe(r.value))},x=()=>{s.value&&(cancelAnimationFrame(s.value),s.value=null),l&&(l.disconnect(),l=null)};return t.watch([()=>e.from,()=>e.to,()=>e.direction],()=>{n.value=e.direction==="down"?e.to:e.from,m.value=!1},{immediate:!0}),t.watch(()=>e.startWhen,()=>{e.startWhen&&a.value&&!m.value&&v()}),t.onMounted(async()=>{await t.nextTick(),h()}),t.onUnmounted(()=>{x()}),(c,u)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"elementRef",ref:r,class:t.normalizeClass([c.className,"g-percent-container"])},[t.createElementVNode("div",N,[t.withDirectives(t.createElementVNode("img",P,null,512),[[t.vShow,e.direction==="down"]]),t.withDirectives(t.createElementVNode("img",V,null,512),[[t.vShow,e.direction==="up"]])]),t.createElementVNode("span",{class:t.normalizeClass(["g-percent-number",{"g-percent-number-down":e.direction==="down","g-percent-number-up":e.direction==="up"}])},t.toDisplayString(n.value.toFixed(e.decimalPlaces)),3),t.createElementVNode("div",{class:t.normalizeClass(["g-percent-symbol",{"g-percent-number-down":e.direction==="down","g-percent-number-up":e.direction==="up"}])},[t.renderSlot(c.$slots,"symbol",{},()=>[u[0]||(u[0]=t.createTextVNode("%"))],!0)],2)],2))}}),F=(o,e)=>{const r=o.__vccOpts||o;for(const[n,a]of e)r[n]=a;return r},d=F(z,[["__scopeId","data-v-33634690"]]);d.install=o=>{o.component(d.name,d)};exports.GPercent=d;exports.default=d;

package/lib/GPercent/index.mjs

@@ -0,0 +1,105 @@
+import { defineComponent as A, useTemplateRef as E, ref as m, computed as h, watch as x, onMounted as T, nextTick as N, onUnmounted as O, createElementBlock as R, openBlock as V, normalizeClass as p, createElementVNode as u, withDirectives as _, vShow as L, toDisplayString as W, renderSlot as B, createTextVNode as q } from "vue";
+const C = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20version='1.1'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='11px'%20height='12px'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='matrix(1%200%200%201%20-1755%20-466%20)'%3e%3cpath%20d='M%201755.77886671114%20477.5%20L%201760.5%20467.199345551568%20L%201765.22113328886%20477.5%20L%201755.77886671114%20477.5%20Z%20'%20fill-rule='nonzero'%20fill='%23fa3239'%20stroke='none'%20/%3e%3cpath%20d='M%201755%20478%20L%201760.5%20466%20L%201766%20478%20L%201755%20478%20Z%20M%201760.5%20468.398691103136%20L%201756.55773342227%20477%20L%201764.44226657773%20477%20L%201760.5%20468.398691103136%20Z%20'%20fill-rule='nonzero'%20fill='%23797979'%20stroke='none'%20/%3e%3c/g%3e%3c/svg%3e", D = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3csvg%20version='1.1'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='11px'%20height='12px'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='matrix(1%200%200%201%20-1755%20-304%20)'%3e%3cpath%20d='M%201755.77886671114%20315.5%20L%201760.5%20305.199345551568%20L%201765.22113328886%20315.5%20L%201755.77886671114%20315.5%20Z%20'%20fill-rule='nonzero'%20fill='%232ce534'%20stroke='none'%20/%3e%3cpath%20d='M%201755%20316%20L%201760.5%20304%20L%201766%20316%20L%201755%20316%20Z%20M%201760.5%20306.398691103136%20L%201756.55773342227%20315%20L%201764.44226657773%20315%20L%201760.5%20306.398691103136%20Z%20'%20fill-rule='nonzero'%20fill='%23797979'%20stroke='none'%20/%3e%3c/g%3e%3c/svg%3e", G = { class: "g-percent-symbol-updown" }, U = {
+  src: C,
+  alt: "down",
+  style: { transform: "rotate(180deg)" },
+  class: "g-percent-svg"
+}, $ = {
+  src: D,
+  alt: "up",
+  class: "g-percent-svg"
+}, j = /* @__PURE__ */ A({
+  name: "GPercent",
+  __name: "index",
+  props: {
+    to: {},
+    from: { default: 0 },
+    direction: { default: "" },
+    delay: { default: 0 },
+    duration: { default: 2 },
+    className: { default: "" },
+    startWhen: { type: Boolean, default: !0 },
+    decimalPlaces: { default: 0 },
+    onStart: {},
+    onEnd: {}
+  },
+  setup(n) {
+    const e = n, o = E("elementRef"), t = m(e.direction === "down" ? e.to : e.from), r = m(!1), a = m(null), d = m(!1);
+    let s = null;
+    const b = h(() => 20 + 40 * (1 / e.duration)), M = h(() => 200 * (1 / e.duration));
+    let l = 0;
+    const v = (i) => {
+      const c = e.direction === "down" ? e.from : e.to, S = t.value, w = c - S, F = w * M.value, I = l * b.value, P = F - I;
+      l += P * 0.016, t.value += l * 0.016, t.value = Math.max(0, Math.min(100, t.value));
+      const Z = Math.pow(10, -e.decimalPlaces) * 0.1, z = Math.pow(10, -e.decimalPlaces) * 0.1;
+      Math.abs(w) > Z || Math.abs(l) > z ? a.value = requestAnimationFrame(v) : (t.value = c, a.value = null, e.onEnd && e.onEnd());
+    }, g = () => {
+      d.value || !r.value || !e.startWhen || (d.value = !0, e.onStart && e.onStart(), setTimeout(() => {
+        l = 0, a.value = requestAnimationFrame(v);
+      }, e.delay * 1e3));
+    }, k = () => {
+      o.value && (s = new IntersectionObserver(
+        ([i]) => {
+          i.isIntersecting && !r.value && (r.value = !0, g());
+        },
+        {
+          threshold: 0,
+          rootMargin: "0px"
+        }
+      ), s.observe(o.value));
+    }, y = () => {
+      a.value && (cancelAnimationFrame(a.value), a.value = null), s && (s.disconnect(), s = null);
+    };
+    return x(
+      [() => e.from, () => e.to, () => e.direction],
+      () => {
+        t.value = e.direction === "down" ? e.to : e.from, d.value = !1;
+      },
+      { immediate: !0 }
+    ), x(
+      () => e.startWhen,
+      () => {
+        e.startWhen && r.value && !d.value && g();
+      }
+    ), T(async () => {
+      await N(), k();
+    }), O(() => {
+      y();
+    }), (i, c) => (V(), R("div", {
+      ref_key: "elementRef",
+      ref: o,
+      class: p([i.className, "g-percent-container"])
+    }, [
+      u("div", G, [
+        _(u("img", U, null, 512), [
+          [L, e.direction === "down"]
+        ]),
+        _(u("img", $, null, 512), [
+          [L, e.direction === "up"]
+        ])
+      ]),
+      u("span", {
+        class: p(["g-percent-number", { "g-percent-number-down": e.direction === "down", "g-percent-number-up": e.direction === "up" }])
+      }, W(t.value.toFixed(e.decimalPlaces)), 3),
+      u("div", {
+        class: p(["g-percent-symbol", { "g-percent-number-down": e.direction === "down", "g-percent-number-up": e.direction === "up" }])
+      }, [
+        B(i.$slots, "symbol", {}, () => [
+          c[0] || (c[0] = q("%"))
+        ], !0)
+      ], 2)
+    ], 2));
+  }
+}), H = (n, e) => {
+  const o = n.__vccOpts || n;
+  for (const [t, r] of e)
+    o[t] = r;
+  return o;
+}, f = /* @__PURE__ */ H(j, [["__scopeId", "data-v-33634690"]]);
+f.install = (n) => {
+  n.component(f.name, f);
+};
+export {
+  f as GPercent,
+  f as default
+};

package/lib/GPercent/style.css

@@ -0,0 +1 @@
+.g-percent-container[data-v-33634690]{display:inline-flex;align-items:center;justify-content:center}.g-percent-number-down[data-v-33634690]{color:#ff4d4f}.g-percent-number-up[data-v-33634690]{color:#52c41a}.g-percent-svg[data-v-33634690]{width:8px;height:8px}

package/lib/index/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../Demo/index.js"),n=require("../GCount/index.js"),t={Demo:o.default,GCount:n.default},s=u=>{Object.keys(t).forEach(c=>{const e=t[c];u.component(e.name,e)})},l={install:s};exports.Demo=o.default;exports.GCount=n.default;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../GCount/index.js"),o=require("../GPercent/index.js"),t={GCount:n.default,GPercent:o.default},r=c=>{Object.keys(t).forEach(u=>{const e=t[u];c.component(e.name,e)})},s={install:r};exports.GCount=n.default;exports.GPercent=o.default;exports.default=s;

package/lib/index/index.mjs

@@ -1,13 +1,13 @@
-import e from "../Demo/index.mjs";
-import m from "../GCount/index.mjs";
-const n = { Demo: e, GCount: m }, s = (t) => {
+import e from "../GCount/index.mjs";
+import s from "../GPercent/index.mjs";
+const n = { GCount: e, GPercent: s }, m = (t) => {
   Object.keys(n).forEach((c) => {
     const o = n[c];
     t.component(o.name, o);
   });
-}, r = { install: s };
+}, p = { install: m };
 export {
-  e as Demo,
-  m as GCount,
-  r as default
+  e as GCount,
+  s as GPercent,
+  p as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geekin-devtoys",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "author": "leon",
   "license": "MIT",
   "description": "geekin-devtoys组件库",
@@ -35,14 +35,6 @@
       "import": "./lib/index/style.css",
       "require": "./lib/index/style.css"
     },
-    "./Demo": {
-      "import": "./lib/Demo/index.mjs",
-      "require": "./lib/Demo/index.js"
-    },
-    "./Demo/style": {
-      "import": "./lib/Demo/style.css",
-      "require": "./lib/Demo/style.css"
-    },
     "./GCount": {
       "import": "./lib/GCount/index.mjs",
       "require": "./lib/GCount/index.js"
@@ -50,6 +42,14 @@
     "./GCount/style": {
       "import": "./lib/GCount/style.css",
       "require": "./lib/GCount/style.css"
+    },
+    "./GPercent": {
+      "import": "./lib/GPercent/index.mjs",
+      "require": "./lib/GPercent/index.js"
+    },
+    "./GPercent/style": {
+      "import": "./lib/GPercent/style.css",
+      "require": "./lib/GPercent/style.css"
     }
   }
 }

package/lib/Demo/index.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),a=(e,s)=>{const o=e.__vccOpts||e;for(const[c,r]of s)o[c]=r;return o},_={class:"demo"},i=Object.assign({name:"Demo"},{__name:"index",props:{msg:String},setup(e){return(s,o)=>(n.openBlock(),n.createElementBlock("div",_,n.toDisplayString(e.msg),1))}}),t=a(i,[["__scopeId","data-v-bd7af65f"]]);t.install=e=>{e.component(t.name,t)};exports.Demo=t;exports.default=t;

package/lib/Demo/index.mjs

@@ -1,24 +0,0 @@
-import { createElementBlock as a, openBlock as r, toDisplayString as _ } from "vue";
-const m = (t, n) => {
-  const e = t.__vccOpts || t;
-  for (const [s, c] of n)
-    e[s] = c;
-  return e;
-}, p = { class: "demo" }, i = /* @__PURE__ */ Object.assign({
-  name: "Demo"
-}, {
-  __name: "index",
-  props: {
-    msg: String
-  },
-  setup(t) {
-    return (n, e) => (r(), a("div", p, _(t.msg), 1));
-  }
-}), o = /* @__PURE__ */ m(i, [["__scopeId", "data-v-bd7af65f"]]);
-o.install = (t) => {
-  t.component(o.name, o);
-};
-export {
-  o as Demo,
-  o as default
-};

package/lib/Demo/style.css

@@ -1 +0,0 @@
-.demo[data-v-bd7af65f]{width:200px;height:40px;background-color:#7fffd4;margin:20px}