pxcube-ui 0.2.2 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/components/message/index.js +1 -1
- package/components/message/index.mjs +31 -31
- package/package.json +2 -6
- package/pixel-ui/version.js +1 -1
- package/pixel-ui/version.mjs +1 -1
- package/styles/components/message.css +0 -5
- package/styles/index.css +1 -6
- package/types/components/icon/src/icon.d.ts +45 -0
- package/types/components/image/src/image.d.ts +0 -59
- package/types/components/message/src/message.d.ts +57 -7
- package/types/pixel-ui/version.d.ts +1 -1
- package/logo.png +0 -0
package/README.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("../../components/message/src/message.vue.js"),r=require("vue"),p=require("../../components/message/src/message.js"),_=require("../../utils/get-props.js");;/* empty css */
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("../../components/message/src/message.vue.js"),r=require("vue"),p=require("../../components/message/src/message.js"),_=require("../../utils/get-props.js");;/* empty css */;/* empty css */const h=r.ref(35),m=r.ref(30),v=r.ref(10),E=r.ref("animate__flipOutX"),g=r.ref(0),L=e=>{e.offset&&(m.value=e.offset),g.value+=1,e.messageID=g.value;const t=r.h($.default,{...e}),s=q(e.position??_.getPropsDefault(p.messageProps.position),e.duration??_.getPropsDefault(p.messageProps.duration));if(s)r.render(t,s);else throw new Error("not found node")},q=(e="top",t)=>{const s=document.getElementsByClassName("px-message__container--"+e),n="px-message--"+g.value,a=document.createElement("div");a.classList.add(`px-message__container--${e}`),a.classList.add("px-message__container--item"),a.id=n;const o=h.value+v.value,l=m.value,u=()=>e=="center"?s.length?(Array.from(s).forEach(i=>{var d=i;d.style.top=`calc(${d.style.top} - ${o/2}px)`}),`calc(${s[s.length-1].style.top} + ${o}px)`):`calc(50% - ${o/2}px)`:`calc(${s.length} * ${o}px + ${l}px)`;return Object.assign(a.style,{top:u(),left:e=="right"?"auto":"0",right:e=="right"?"30px":"0",margin:e!=="right"?"auto auto":"none"}),a.classList.remove("animate__flipInX"),document.body.appendChild(a),t>0&&N(e,n,t+s.length*150),a},N=(e,t,s)=>{if(!t||!s)return!1;const n=document.querySelector(`#${t}`);if(!n)return!1;var a=setTimeout(()=>{y(n,e),clearTimeout(a)},s)},y=(e,t)=>{e.classList.add(E.value);const s=()=>{r.render(null,e),e.parentNode&&e.parentNode.removeChild(e),w(t),e.removeEventListener("animationend",s),e.removeEventListener("transitionend",s)};e.addEventListener("animationend",s),e.addEventListener("transitionend",s)},w=e=>{const t=document.getElementsByClassName("px-message__container--"+e),s=t.length,n=h.value,a=v.value;Array.from(t).forEach((o,l)=>{const u=o;if(e=="center"){const f=s*n+(s-1)*a,i=window.innerHeight,x=Math.max(0,(i-f)/2)+(n+a)*l;u.style.top=`${x/i*100}%`}else u.style.top=`${m.value+l*(n+a)}px`})},C=(e,t)=>{var s="px-message--"+e,n=document.querySelector(`#${s}`);return y(n,t)},c={__create:(e,t,s)=>{var n={message:t,type:e};return typeof s=="object"&&(n={...n,...s}),L(n)},success:(e,t)=>c.__create("success",e,t),default:(e,t)=>c.__create("default",e,t),warning:(e,t)=>c.__create("warning",e,t),error:(e,t)=>c.__create("error",e,t),danger:(e,t)=>c.__create("danger",e,t)};exports.__activeCloseMessage=C;exports.pxMessage=c;
|
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ref as c, h as
|
|
1
|
+
import E from "../../components/message/src/message.vue.mjs";
|
|
2
|
+
import { ref as c, h as L, render as h } from "vue";
|
|
3
3
|
import { messageProps as p } from "../../components/message/src/message.mjs";
|
|
4
4
|
import { getPropsDefault as _ } from "../../utils/get-props.mjs";
|
|
5
5
|
/* empty css */
|
|
6
|
-
|
|
6
|
+
/* empty css */
|
|
7
7
|
const v = c(35), g = c(30), x = c(10), N = c("animate__flipOutX"), u = c(0), w = (e) => {
|
|
8
8
|
e.offset && (g.value = e.offset), u.value += 1, e.messageID = u.value;
|
|
9
|
-
const t = E
|
|
9
|
+
const t = L(E, { ...e }), n = C(
|
|
10
10
|
e.position ?? _(p.position),
|
|
11
11
|
e.duration ?? _(p.duration)
|
|
12
12
|
);
|
|
13
|
-
if (
|
|
14
|
-
h(t,
|
|
13
|
+
if (n)
|
|
14
|
+
h(t, n);
|
|
15
15
|
else
|
|
16
16
|
throw new Error("not found node");
|
|
17
17
|
}, C = (e = "top", t) => {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
const o = v.value + x.value, l = g.value, i = () => e == "center" ?
|
|
18
|
+
const n = document.getElementsByClassName("px-message__container--" + e), s = "px-message--" + u.value, a = document.createElement("div");
|
|
19
|
+
a.classList.add(`px-message__container--${e}`), a.classList.add("px-message__container--item"), a.id = s;
|
|
20
|
+
const o = v.value + x.value, l = g.value, i = () => e == "center" ? n.length ? (Array.from(n).forEach((m) => {
|
|
21
21
|
var d = m;
|
|
22
22
|
d.style.top = `calc(${d.style.top} - ${o / 2}px)`;
|
|
23
|
-
}), `calc(${
|
|
24
|
-
return Object.assign(
|
|
23
|
+
}), `calc(${n[n.length - 1].style.top} + ${o}px)`) : `calc(50% - ${o / 2}px)` : `calc(${n.length} * ${o}px + ${l}px)`;
|
|
24
|
+
return Object.assign(a.style, {
|
|
25
25
|
top: i(),
|
|
26
26
|
left: e == "right" ? "auto" : "0",
|
|
27
27
|
right: e == "right" ? "30px" : "0",
|
|
28
28
|
margin: e !== "right" ? "auto auto" : "none"
|
|
29
|
-
}),
|
|
30
|
-
}, M = (e, t,
|
|
31
|
-
if (!t || !
|
|
32
|
-
const
|
|
33
|
-
if (!
|
|
34
|
-
var
|
|
35
|
-
y(
|
|
36
|
-
},
|
|
29
|
+
}), a.classList.remove("animate__flipInX"), document.body.appendChild(a), t > 0 && M(e, s, t + n.length * 150), a;
|
|
30
|
+
}, M = (e, t, n) => {
|
|
31
|
+
if (!t || !n) return !1;
|
|
32
|
+
const s = document.querySelector(`#${t}`);
|
|
33
|
+
if (!s) return !1;
|
|
34
|
+
var a = setTimeout(() => {
|
|
35
|
+
y(s, e), clearTimeout(a);
|
|
36
|
+
}, n);
|
|
37
37
|
}, y = (e, t) => {
|
|
38
|
-
e.classList.add(N.value)
|
|
39
|
-
const
|
|
40
|
-
h(null, e), e.parentNode && e.parentNode.removeChild(e), b(t), e.removeEventListener("animationend",
|
|
38
|
+
e.classList.add(N.value);
|
|
39
|
+
const n = () => {
|
|
40
|
+
h(null, e), e.parentNode && e.parentNode.removeChild(e), b(t), e.removeEventListener("animationend", n), e.removeEventListener("transitionend", n);
|
|
41
41
|
};
|
|
42
|
-
e.addEventListener("animationend",
|
|
42
|
+
e.addEventListener("animationend", n), e.addEventListener("transitionend", n);
|
|
43
43
|
}, b = (e) => {
|
|
44
|
-
const t = document.getElementsByClassName("px-message__container--" + e),
|
|
44
|
+
const t = document.getElementsByClassName("px-message__container--" + e), n = t.length, s = v.value, a = x.value;
|
|
45
45
|
Array.from(t).forEach((o, l) => {
|
|
46
46
|
const i = o;
|
|
47
47
|
if (e == "center") {
|
|
48
|
-
const f =
|
|
48
|
+
const f = n * s + (n - 1) * a, m = window.innerHeight, $ = Math.max(0, (m - f) / 2) + (s + a) * l;
|
|
49
49
|
i.style.top = `${$ / m * 100}%`;
|
|
50
50
|
} else
|
|
51
|
-
i.style.top = `${g.value + l * (
|
|
51
|
+
i.style.top = `${g.value + l * (s + a)}px`;
|
|
52
52
|
});
|
|
53
53
|
}, S = (e, t) => {
|
|
54
|
-
var
|
|
55
|
-
return y(
|
|
54
|
+
var n = "px-message--" + e, s = document.querySelector(`#${n}`);
|
|
55
|
+
return y(s, t);
|
|
56
56
|
}, r = {
|
|
57
57
|
//生产消息弹窗的内部方法
|
|
58
|
-
__create: (e, t,
|
|
59
|
-
var
|
|
60
|
-
return typeof
|
|
58
|
+
__create: (e, t, n) => {
|
|
59
|
+
var s = { message: t, type: e };
|
|
60
|
+
return typeof n == "object" && (s = { ...s, ...n }), w(s);
|
|
61
61
|
},
|
|
62
62
|
success: (e, t) => r.__create("success", e, t),
|
|
63
63
|
default: (e, t) => r.__create("default", e, t),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pxcube-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"description": "Pixel Cube UI 组件库",
|
|
5
5
|
"type": "commonjs",
|
|
6
6
|
"main": "./pixel-ui/index.js",
|
|
@@ -23,13 +23,9 @@
|
|
|
23
23
|
"styles",
|
|
24
24
|
"iconfont",
|
|
25
25
|
"_virtual",
|
|
26
|
-
"README.md"
|
|
27
|
-
"logo.png"
|
|
26
|
+
"README.md"
|
|
28
27
|
],
|
|
29
28
|
"peerDependencies": {
|
|
30
29
|
"vue": ">=3.5.0"
|
|
31
|
-
},
|
|
32
|
-
"dependencies": {
|
|
33
|
-
"animate.css": "^4.1.1"
|
|
34
30
|
}
|
|
35
31
|
}
|
package/pixel-ui/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.2.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.2.5",t="2026-09-20";exports.updateDate=t;exports.version=e;
|
package/pixel-ui/version.mjs
CHANGED