cynx-lib 1.3.92 → 1.3.93

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/package.json +1 -1
  2. package/ui/components/XTable.jsx +112 -44
  3. package/vue/components/XTable.vue +23 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cynx-lib",
3
- "version": "1.3.92",
3
+ "version": "1.3.93",
4
4
  "type": "module",
5
5
  "main": "./index.cjs",
6
6
  "module": "./index.js",
package/ui/components/XTable.jsx CHANGED
@@ -1,44 +1,112 @@
1
- export function XTable({ children, style }) {
2
- return <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed', fontSize: '.8rem', ...style }}>{children}</table>;
3
- }
4
- export function XThead({ children }) { return <thead>{children}</thead>; }
5
- export function XTbody({ children }) { return <tbody>{children}</tbody>; }
6
- export function XTr({ children, onClick }) {
7
- return <tr onClick={onClick} style={{ borderBottom: '1px solid var(--border-light, #ebebf0)', transition: 'background .12s', cursor: onClick ? 'pointer' : undefined }}>{children}</tr>;
8
- }
9
- export function XTh({ children, style }) {
10
- return <th style={{ textAlign: 'left', padding: '8px 10px', fontSize: '.68rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--muted, #9b9daa)', borderBottom: '1px solid var(--border-light, #ebebf0)', ...style }}>{children}</th>;
11
- }
12
- export function XTd({ children, style, className = '', colSpan }) {
13
- return <td style={{ padding: '9px 10px', verticalAlign: 'middle', color: 'var(--primary-text, #0f111c)', ...style }} colSpan={colSpan}>{children}</td>;
14
- }
15
-
16
- const SKELETON_STYLES = `
17
- @keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
18
- @keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
19
- `;
20
- let _tbl_sk_id = 'cynx-table-skeleton-styles';
21
- function ensureSkeletonStyles() {
22
- if (typeof document === 'undefined') return;
23
- if (document.getElementById(_tbl_sk_id)) return;
24
- const tag = document.createElement('style');
25
- tag.id = _tbl_sk_id;
26
- tag.textContent = SKELETON_STYLES;
27
- document.head.appendChild(tag);
28
- }
29
- if (typeof document !== 'undefined') ensureSkeletonStyles();
30
-
31
- export function SkeletonTable({ rows = 6, cols = 5 }) {
32
- ensureSkeletonStyles();
33
- return (
34
- <div>
35
- {Array.from({ length: rows }).map((_, i) => (
36
- <div key={i} style={{ display: 'flex', gap: 8, padding: '8px 10px', borderBottom: '1px solid var(--border-light, #ebebf0)' }}>
37
- {Array.from({ length: cols }).map((_, j) => (
38
- <div key={j} style={{ height: 12, flex: 1, background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
39
- ))}
40
- </div>
41
- ))}
42
- </div>
43
- );
44
- }
1
+ const TABLE_STYLES = `
2
+ table.cynx-table {
3
+ width: 100%;
4
+ border-collapse: collapse;
5
+ table-layout: fixed;
6
+ font-size: .8rem;
7
+ }
8
+ .cynx-tr {
9
+ border-bottom: 1px solid var(--border-light, #ebebf0);
10
+ transition: background .12s;
11
+ }
12
+ tbody tr.cynx-tr:last-child,
13
+ .cynx-table tbody tr:last-child {
14
+ border-bottom: none;
15
+ }
16
+ @keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
17
+ @keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
18
+ `;
19
+
20
+ let _tbl_style_id = 'cynx-table-styles';
21
+ function ensureTableStyles() {
22
+ if (typeof document === 'undefined') return;
23
+ if (document.getElementById(_tbl_style_id)) return;
24
+ const tag = document.createElement('style');
25
+ tag.id = _tbl_style_id;
26
+ tag.textContent = TABLE_STYLES;
27
+ document.head.appendChild(tag);
28
+ }
29
+ if (typeof document !== 'undefined') ensureTableStyles();
30
+
31
+ export function XTable({ children, style, className = '', ...props }) {
32
+ ensureTableStyles();
33
+ return (
34
+ <table
35
+ className={`cynx-table ${className}`.trim()}
36
+ style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed', fontSize: '.8rem', ...style }}
37
+ {...props}
38
+ >
39
+ {children}
40
+ </table>
41
+ );
42
+ }
43
+
44
+ export function XThead({ children, ...props }) { return <thead {...props}>{children}</thead>; }
45
+ export function XTbody({ children, ...props }) { return <tbody {...props}>{children}</tbody>; }
46
+
47
+ export function XTr({ children, onClick, style, className = '', ...props }) {
48
+ ensureTableStyles();
49
+ return (
50
+ <tr
51
+ onClick={onClick}
52
+ className={`cynx-tr ${className}`.trim()}
53
+ style={{
54
+ cursor: onClick ? 'pointer' : undefined,
55
+ ...style,
56
+ }}
57
+ {...props}
58
+ >
59
+ {children}
60
+ </tr>
61
+ );
62
+ }
63
+
64
+ export function XTh({ children, style, className = '', ...props }) {
65
+ return (
66
+ <th
67
+ className={className}
68
+ style={{
69
+ textAlign: 'left',
70
+ padding: '8px 10px',
71
+ fontSize: '.68rem',
72
+ fontWeight: 600,
73
+ textTransform: 'uppercase',
74
+ letterSpacing: '.06em',
75
+ color: 'var(--muted, #9b9daa)',
76
+ borderBottom: '1px solid var(--border-light, #ebebf0)',
77
+ ...style,
78
+ }}
79
+ {...props}
80
+ >
81
+ {children}
82
+ </th>
83
+ );
84
+ }
85
+
86
+ export function XTd({ children, style, className = '', colSpan, ...props }) {
87
+ return (
88
+ <td
89
+ className={className}
90
+ style={{ padding: '9px 10px', verticalAlign: 'middle', color: 'var(--primary-text, #0f111c)', ...style }}
91
+ colSpan={colSpan}
92
+ {...props}
93
+ >
94
+ {children}
95
+ </td>
96
+ );
97
+ }
98
+
99
+ export function SkeletonTable({ rows = 6, cols = 5 }) {
100
+ ensureTableStyles();
101
+ return (
102
+ <div>
103
+ {Array.from({ length: rows }).map((_, i) => (
104
+ <div key={i} style={{ display: 'flex', gap: 8, padding: '8px 10px', borderBottom: i === rows - 1 ? 'none' : '1px solid var(--border-light, #ebebf0)' }}>
105
+ {Array.from({ length: cols }).map((_, j) => (
106
+ <div key={j} style={{ height: 12, flex: 1, background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
107
+ ))}
108
+ </div>
109
+ ))}
110
+ </div>
111
+ );
112
+ }
package/vue/components/XTable.vue CHANGED
@@ -5,12 +5,14 @@ export const XTable = defineComponent({
5
5
  name: "XTable",
6
6
  props: {
7
7
  style: { type: Object, default: () => ({}) },
8
+ class: { type: String, default: "" },
8
9
  },
9
10
  setup(props, { slots }) {
10
11
  return () =>
11
12
  h(
12
13
  "table",
13
14
  {
15
+ class: `cynx-table ${props.class || ""}`.trim(),
14
16
  style: {
15
17
  width: "100%",
16
18
  borderCollapse: "collapse",
@@ -43,6 +45,7 @@ export const XTr = defineComponent({
43
45
  props: {
44
46
  style: { type: Object, default: () => ({}) },
45
47
  onClick: { type: Function, default: undefined },
48
+ class: { type: String, default: "" },
46
49
  },
47
50
  setup(props, { slots }) {
48
51
  return () =>
@@ -50,9 +53,8 @@ export const XTr = defineComponent({
50
53
  "tr",
51
54
  {
52
55
  onClick: props.onClick,
56
+ class: `cynx-tr ${props.class || ""}`.trim(),
53
57
  style: {
54
- borderBottom: "1px solid var(--border-light, #ebebf0)",
55
- transition: "background .12s",
56
58
  cursor: props.onClick ? "pointer" : undefined,
57
59
  ...props.style,
58
60
  },
@@ -66,12 +68,14 @@ export const XTh = defineComponent({
66
68
  name: "XTh",
67
69
  props: {
68
70
  style: { type: Object, default: () => ({}) },
71
+ class: { type: String, default: "" },
69
72
  },
70
73
  setup(props, { slots }) {
71
74
  return () =>
72
75
  h(
73
76
  "th",
74
77
  {
78
+ class: props.class,
75
79
  style: {
76
80
  textAlign: "left",
77
81
  padding: "8px 12px",
@@ -117,3 +121,20 @@ export const XTd = defineComponent({
117
121
 
118
122
  export default XTable;
119
123
  </script>
124
+
125
+ <style>
126
+ .cynx-table {
127
+ width: 100%;
128
+ border-collapse: collapse;
129
+ table-layout: fixed;
130
+ font-size: .8rem;
131
+ }
132
+ .cynx-tr {
133
+ border-bottom: 1px solid var(--border-light, #ebebf0);
134
+ transition: background .12s;
135
+ }
136
+ tbody tr.cynx-tr:last-child,
137
+ .cynx-table tbody tr:last-child {
138
+ border-bottom: none;
139
+ }
140
+ </style>