@solostylist/ui-kit 1.0.142 → 1.0.143

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.
Files changed (3) hide show
  1. package/dist/s-action-overlay/s-action-overlay.js +28 -26
  2. package/dist/s-comment-message/s-comment-message.js +56 -91
  3. package/package.json +1 -1
package/dist/s-action-overlay/s-action-overlay.js CHANGED
@@ -1,28 +1,28 @@
1
1
  import { j as r } from "../jsx-runtime-OVHDjVDe.js";
2
- import { useState as _ } from "react";
3
- import { Box as l, Grid as c } from "@mui/material";
4
- import b from "../s-icon-button/s-icon-button.js";
5
- const T = 40, B = 16, R = ({
2
+ import { useState as k } from "react";
3
+ import { Box as a, Grid as f } from "@mui/material";
4
+ import C from "../s-icon-button/s-icon-button.js";
5
+ const _ = 40, B = 16, R = ({
6
6
  actions: u,
7
7
  maxWidth: d,
8
8
  columns: s = 3,
9
9
  children: p,
10
10
  showOnHover: n = !0,
11
11
  visible: o,
12
- position: a = "center",
13
- backdropColor: x = "divider",
14
- backdropOpacity: m = 1,
15
- blurAmount: j = 10,
16
- borderRadius: v = 0,
12
+ position: l = "center",
13
+ backdropColor: x = "background.paper",
14
+ backdropOpacity: m = 0.9,
15
+ blurAmount: v = 10,
16
+ borderRadius: j = 0,
17
17
  overlaySx: g,
18
18
  onVisibilityChange: e
19
19
  }) => {
20
- const [I, i] = _(!1), h = o !== void 0 ? o : n && I, y = () => {
20
+ const [I, i] = k(!1), y = o !== void 0 ? o : n && I, h = () => {
21
21
  n && o === void 0 && (i(!0), e == null || e(!0));
22
22
  }, A = () => {
23
23
  n && o === void 0 && (i(!1), e == null || e(!1));
24
24
  }, E = () => {
25
- switch (a) {
25
+ switch (l) {
26
26
  case "top-left":
27
27
  return { justifyContent: "flex-start", alignItems: "flex-start" };
28
28
  case "top-right":
@@ -36,7 +36,7 @@ const T = 40, B = 16, R = ({
36
36
  return { justifyContent: "center", alignItems: "center" };
37
37
  }
38
38
  }, M = () => {
39
- switch (a) {
39
+ switch (l) {
40
40
  case "top-left":
41
41
  return "flex-start";
42
42
  case "top-right":
@@ -49,16 +49,16 @@ const T = 40, B = 16, R = ({
49
49
  default:
50
50
  return "center";
51
51
  }
52
- }, k = () => {
52
+ }, T = () => {
53
53
  let t = d;
54
- return s && (t = s * T + (s - 1) * B + s * 16), t;
54
+ return s && (t = s * _ + (s - 1) * B + s * 16), t;
55
55
  };
56
56
  return (
57
57
  // Main container with flex to center the children
58
- /* @__PURE__ */ r.jsx(l, { display: "flex", children: /* @__PURE__ */ r.jsxs(l, { position: "relative", onMouseEnter: y, onMouseLeave: A, children: [
58
+ /* @__PURE__ */ r.jsx(a, { display: "flex", children: /* @__PURE__ */ r.jsxs(a, { position: "relative", onMouseEnter: h, onMouseLeave: A, children: [
59
59
  p,
60
- h && /* @__PURE__ */ r.jsx(
61
- l,
60
+ y && /* @__PURE__ */ r.jsx(
61
+ a,
62
62
  {
63
63
  position: "absolute",
64
64
  top: 0,
@@ -69,18 +69,18 @@ const T = 40, B = 16, R = ({
69
69
  bgcolor: x,
70
70
  sx: {
71
71
  opacity: m,
72
- backdropFilter: `blur(${j}px)`,
72
+ backdropFilter: `blur(${v}px)`,
73
73
  transform: "translateZ(0)",
74
74
  willChange: "transform",
75
75
  transition: "opacity 0.2s ease-in-out",
76
76
  ...E(),
77
77
  ...g
78
78
  },
79
- borderRadius: v,
80
- children: /* @__PURE__ */ r.jsx(c, { container: !0, spacing: 2, justifyContent: M(), maxWidth: k(), children: u.map((t, C) => {
81
- var f;
82
- return /* @__PURE__ */ r.jsx(c, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ r.jsx(
83
- b,
79
+ borderRadius: j,
80
+ children: /* @__PURE__ */ r.jsx(f, { container: !0, spacing: 2, justifyContent: M(), maxWidth: T(), children: u.map((t, b) => {
81
+ var c;
82
+ return /* @__PURE__ */ r.jsx(f, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ r.jsx(
83
+ C,
84
84
  {
85
85
  tooltipOptions: { title: t.tooltip, placement: "top" },
86
86
  onClick: t.onClick,
@@ -90,17 +90,19 @@ const T = 40, B = 16, R = ({
90
90
  sx: {
91
91
  margin: 1,
92
92
  backgroundColor: t.isActive ? "primary.main" : void 0,
93
+ color: t.isActive ? "primary.contrastText" : void 0,
93
94
  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
94
95
  opacity: t.disabled ? 0.5 : 1,
95
96
  "&:hover": {
96
- backgroundColor: t.isActive ? "primary.dark" : void 0
97
+ backgroundColor: t.isActive ? "primary.main" : void 0,
98
+ color: t.isActive ? "primary.contrastText" : void 0
97
99
  },
98
- ...(f = t.iconButtonProps) == null ? void 0 : f.sx
100
+ ...(c = t.iconButtonProps) == null ? void 0 : c.sx
99
101
  },
100
102
  ...t.iconButtonProps,
101
103
  children: t.icon
102
104
  }
103
- ) }, `${t.tooltip}-${C}`);
105
+ ) }, `${t.tooltip}-${b}`);
104
106
  }) })
105
107
  }
106
108
  )
package/dist/s-comment-message/s-comment-message.js CHANGED
@@ -1,135 +1,100 @@
1
- import { j as e } from "../jsx-runtime-OVHDjVDe.js";
2
- import { useState as I, useEffect as T } from "react";
3
- import { Box as m, Stack as M, Typography as x, IconButton as P, Button as $, Collapse as V } from "@mui/material";
1
+ import { j as t } from "../jsx-runtime-OVHDjVDe.js";
2
+ import { useState as y, useEffect as E } from "react";
3
+ import { Box as m, Stack as M, Typography as d, IconButton as P, Button as R, Collapse as V } from "@mui/material";
4
4
  import Y from "../s-avatar/s-avatar.js";
5
5
  import { F as q } from "../Favorite-DmSF47XC.js";
6
6
  import { c as S } from "../createSvgIcon-Dq42_0tn.js";
7
7
  import { E as G } from "../ExpandMore-mZGpvXf6.js";
8
- const J = S(/* @__PURE__ */ e.jsx("path", {
8
+ const J = S(/* @__PURE__ */ t.jsx("path", {
9
9
  d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
10
- }), "ExpandLess"), K = S(/* @__PURE__ */ e.jsx("path", {
10
+ }), "ExpandLess"), K = S(/* @__PURE__ */ t.jsx("path", {
11
11
  d: "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"
12
- }), "FavoriteBorder"), O = S(/* @__PURE__ */ e.jsx("path", {
12
+ }), "FavoriteBorder"), O = S(/* @__PURE__ */ t.jsx("path", {
13
13
  d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11"
14
- }), "Reply"), Q = (r) => {
15
- const c = /* @__PURE__ */ new Date(), d = typeof r == "string" ? new Date(r) : r, h = c.getTime() - d.getTime(), f = Math.floor(h / 1e3), o = Math.floor(f / 60), s = Math.floor(o / 60), t = Math.floor(s / 24), l = Math.floor(t / 7), n = Math.floor(t / 30), a = Math.floor(t / 365);
16
- return f < 60 ? "just now" : o < 60 ? o === 1 ? "1 minute ago" : `${o} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : t < 7 ? t === 1 ? "1 day ago" : `${t} days ago` : l < 4 ? l === 1 ? "1 week ago" : `${l} weeks ago` : n < 12 ? n === 1 ? "1 month ago" : `${n} months ago` : a === 1 ? "1 year ago" : `${a} years ago`;
14
+ }), "Reply"), Q = (a) => {
15
+ const c = /* @__PURE__ */ new Date(), x = typeof a == "string" ? new Date(a) : a, h = c.getTime() - x.getTime(), f = Math.floor(h / 1e3), s = Math.floor(f / 60), o = Math.floor(s / 60), e = Math.floor(o / 24), l = Math.floor(e / 7), n = Math.floor(e / 30), r = Math.floor(e / 365);
16
+ return f < 60 ? "just now" : s < 60 ? s === 1 ? "1 minute ago" : `${s} minutes ago` : o < 24 ? o === 1 ? "1 hour ago" : `${o} hours ago` : e < 7 ? e === 1 ? "1 day ago" : `${e} days ago` : l < 4 ? l === 1 ? "1 week ago" : `${l} weeks ago` : n < 12 ? n === 1 ? "1 month ago" : `${n} months ago` : r === 1 ? "1 year ago" : `${r} years ago`;
17
17
  }, U = ({
18
- id: r = Date.now(),
18
+ id: a = Date.now(),
19
19
  userName: c,
20
- userAvatar: d,
20
+ userAvatar: x,
21
21
  commentContent: h,
22
22
  datetime: f,
23
- likes: o = 0,
24
- isLiked: s = !1,
25
- replies: t = [],
23
+ likes: s = 0,
24
+ isLiked: o = !1,
25
+ replies: e = [],
26
26
  totalReplies: l,
27
27
  onLike: n,
28
- onReply: a,
28
+ onReply: r,
29
29
  showReplies: p = !0,
30
- avatarSize: C = 48,
31
- level: z = 0,
32
- maxLevel: L = 3,
33
- children: w,
34
- sx: E = {}
30
+ avatarSize: L = 48,
31
+ level: w = 0,
32
+ maxLevel: z = 3,
33
+ children: C,
34
+ sx: B = {}
35
35
  }) => {
36
- const [k, g] = I(o), [j, u] = I(s), [v, R] = I(!1), B = () => {
37
- j ? (g((i) => Math.max(0, i - 1)), u(!1)) : (g((i) => i + 1), u(!0)), n && n(r);
38
- }, D = () => {
39
- a && a(r);
36
+ const [$, g] = y(s), [j, u] = y(o), [I, D] = y(!1), T = () => {
37
+ j ? (g((i) => Math.max(0, i - 1)), u(!1)) : (g((i) => i + 1), u(!0)), n && n(a);
38
+ }, b = () => {
39
+ r && r(a);
40
40
  }, F = () => {
41
- R(!v);
42
- }, W = Q(f), y = l ?? t.length, b = y > 0, H = Math.min(z, L) * 2;
43
- return T(() => {
44
- g(o);
45
- }, [o]), T(() => {
46
- u(s);
47
- }, [s]), /* @__PURE__ */ e.jsxs(m, { sx: { pl: H, py: 1, ...E }, children: [
48
- /* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
49
- /* @__PURE__ */ e.jsx(Y, { avatar: d, name: c, size: C }),
50
- /* @__PURE__ */ e.jsxs(m, { sx: { flex: 1 }, children: [
51
- /* @__PURE__ */ e.jsxs(M, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
52
- /* @__PURE__ */ e.jsx(x, { variant: "subtitle2", fontWeight: "600", children: c }),
53
- /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: W }) })
41
+ D(!I);
42
+ }, H = Q(f), v = l ?? e.length, k = v > 0, W = Math.min(w, z) * 2;
43
+ return E(() => {
44
+ g(s);
45
+ }, [s]), E(() => {
46
+ u(o);
47
+ }, [o]), /* @__PURE__ */ t.jsxs(m, { sx: { pl: W, py: 1, ...B }, children: [
48
+ /* @__PURE__ */ t.jsxs(M, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
49
+ /* @__PURE__ */ t.jsx(Y, { avatar: x, name: c, size: L }),
50
+ /* @__PURE__ */ t.jsxs(m, { sx: { flex: 1 }, children: [
51
+ /* @__PURE__ */ t.jsxs(M, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
52
+ /* @__PURE__ */ t.jsx(d, { variant: "subtitle2", fontWeight: "600", children: c }),
53
+ /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(d, { variant: "caption", color: "text.secondary", children: H }) })
54
54
  ] }),
55
- /* @__PURE__ */ e.jsx(x, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: h }),
56
- /* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 1, alignItems: "center", children: [
57
- /* @__PURE__ */ e.jsx(
55
+ /* @__PURE__ */ t.jsx(d, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: h }),
56
+ /* @__PURE__ */ t.jsxs(M, { direction: "row", spacing: 1, alignItems: "center", children: [
57
+ /* @__PURE__ */ t.jsx(
58
58
  P,
59
59
  {
60
60
  size: "small",
61
- onClick: B,
61
+ onClick: T,
62
62
  sx: {
63
- color: j ? "error.main" : "text.secondary",
64
- p: 0.5,
65
- "&:hover": {
66
- backgroundColor: "action.hover"
67
- }
63
+ color: j ? "error.main" : "text.secondary"
68
64
  },
69
- children: j ? /* @__PURE__ */ e.jsx(q, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
65
+ children: j ? /* @__PURE__ */ t.jsx(q, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(K, { fontSize: "small" })
70
66
  }
71
67
  ),
72
- k > 0 && /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: k }),
73
- /* @__PURE__ */ e.jsx(
74
- $,
68
+ $ > 0 && /* @__PURE__ */ t.jsx(d, { variant: "caption", color: "text.secondary", children: $ }),
69
+ /* @__PURE__ */ t.jsx(R, { size: "small", startIcon: /* @__PURE__ */ t.jsx(O, { fontSize: "small" }), onClick: b, variant: "text", children: "Reply" }),
70
+ k && p && /* @__PURE__ */ t.jsxs(
71
+ R,
75
72
  {
76
73
  size: "small",
77
- startIcon: /* @__PURE__ */ e.jsx(O, { fontSize: "small" }),
78
- onClick: D,
79
- variant: "text",
80
- sx: {
81
- color: "text.secondary",
82
- textTransform: "none",
83
- minWidth: "auto",
84
- px: 1,
85
- py: 0.5,
86
- fontSize: "0.75rem",
87
- "&:hover": {
88
- backgroundColor: "action.hover"
89
- }
90
- },
91
- children: "Reply"
92
- }
93
- ),
94
- b && p && /* @__PURE__ */ e.jsxs(
95
- $,
96
- {
97
- size: "small",
98
- startIcon: v ? /* @__PURE__ */ e.jsx(J, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(G, { fontSize: "small" }),
74
+ startIcon: I ? /* @__PURE__ */ t.jsx(J, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(G, { fontSize: "small" }),
99
75
  onClick: F,
100
76
  variant: "text",
101
- sx: {
102
- color: "primary.main",
103
- textTransform: "none",
104
- minWidth: "auto",
105
- px: 1,
106
- py: 0.5,
107
- fontSize: "0.75rem",
108
- "&:hover": {
109
- backgroundColor: "action.hover"
110
- }
111
- },
112
77
  children: [
113
- y,
78
+ v,
114
79
  " ",
115
- y === 1 ? "reply" : "replies"
80
+ v === 1 ? "reply" : "replies"
116
81
  ]
117
82
  }
118
83
  )
119
84
  ] }),
120
- w && /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: w })
85
+ C && /* @__PURE__ */ t.jsx(m, { sx: { mt: 2 }, children: C })
121
86
  ] })
122
87
  ] }),
123
- b && p && /* @__PURE__ */ e.jsx(V, { in: v, children: /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: t.map((i, A) => /* @__PURE__ */ e.jsx(
88
+ k && p && /* @__PURE__ */ t.jsx(V, { in: I, children: /* @__PURE__ */ t.jsx(m, { sx: { mt: 2 }, children: e.map((i, A) => /* @__PURE__ */ t.jsx(
124
89
  U,
125
90
  {
126
91
  ...i,
127
- level: z + 1,
128
- maxLevel: L,
92
+ level: w + 1,
93
+ maxLevel: z,
129
94
  onLike: n,
130
- onReply: a,
95
+ onReply: r,
131
96
  showReplies: p,
132
- avatarSize: Math.max(32, C - 8)
97
+ avatarSize: Math.max(32, L - 8)
133
98
  },
134
99
  i.id || `reply-${A}`
135
100
  )) }) })
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org"
5
5
  },
6
- "version": "1.0.142",
6
+ "version": "1.0.143",
7
7
  "description": "advanced ui kit for solostylist",
8
8
  "private": false,
9
9
  "type": "module",