@iyulab/u-widgets 0.11.1 → 0.11.2
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.
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { css as e } from "lit";
|
|
2
|
+
const r = e`
|
|
3
|
+
:host {
|
|
4
|
+
color-scheme: light dark;
|
|
5
|
+
|
|
6
|
+
/* ── Colors (light defaults) ── */
|
|
7
|
+
--u-widget-bg: #fff;
|
|
8
|
+
--u-widget-surface: #f1f5f9;
|
|
9
|
+
--u-widget-text: #1a1a2e;
|
|
10
|
+
--u-widget-text-secondary: #64748b;
|
|
11
|
+
--u-widget-border: #e2e8f0;
|
|
12
|
+
--u-widget-primary: #4f46e5;
|
|
13
|
+
--u-widget-positive: #16a34a;
|
|
14
|
+
--u-widget-negative: #dc2626;
|
|
15
|
+
--u-widget-warning: #d97706;
|
|
16
|
+
|
|
17
|
+
/* ── Chart palette (light) ── */
|
|
18
|
+
--u-widget-chart-color-1: #4f46e5;
|
|
19
|
+
--u-widget-chart-color-2: #0ea5e9;
|
|
20
|
+
--u-widget-chart-color-3: #10b981;
|
|
21
|
+
--u-widget-chart-color-4: #f59e0b;
|
|
22
|
+
--u-widget-chart-color-5: #ef4444;
|
|
23
|
+
--u-widget-chart-color-6: #8b5cf6;
|
|
24
|
+
--u-widget-chart-color-7: #ec4899;
|
|
25
|
+
--u-widget-chart-color-8: #06b6d4;
|
|
26
|
+
|
|
27
|
+
/* ── Spacing ── */
|
|
28
|
+
--u-widget-gap: 16px;
|
|
29
|
+
--u-widget-radius: 6px;
|
|
30
|
+
|
|
31
|
+
/* ── Typography ── */
|
|
32
|
+
--u-widget-font-family: system-ui, -apple-system, sans-serif;
|
|
33
|
+
--u-widget-font-size: 0.875rem;
|
|
34
|
+
|
|
35
|
+
/* ── Chart ── */
|
|
36
|
+
--u-widget-chart-height: 300px;
|
|
37
|
+
|
|
38
|
+
/* ── Shadow ── */
|
|
39
|
+
--u-widget-shadow:
|
|
40
|
+
0 1px 3px rgba(0,0,0,0.08),
|
|
41
|
+
0 1px 2px rgba(0,0,0,0.06);
|
|
42
|
+
--u-widget-shadow-hover:
|
|
43
|
+
0 4px 12px rgba(0,0,0,0.10),
|
|
44
|
+
0 2px 4px rgba(0,0,0,0.06);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ── Dark mode (auto via prefers-color-scheme) ── */
|
|
48
|
+
@media (prefers-color-scheme: dark) {
|
|
49
|
+
:host(:not([theme="light"])) {
|
|
50
|
+
--u-widget-bg: #1e1e2e;
|
|
51
|
+
--u-widget-surface: #2a2a3e;
|
|
52
|
+
--u-widget-text: #e2e8f0;
|
|
53
|
+
--u-widget-text-secondary: #94a3b8;
|
|
54
|
+
--u-widget-border: #374151;
|
|
55
|
+
--u-widget-primary: #818cf8;
|
|
56
|
+
--u-widget-positive: #4ade80;
|
|
57
|
+
--u-widget-negative: #f87171;
|
|
58
|
+
--u-widget-warning: #fbbf24;
|
|
59
|
+
|
|
60
|
+
--u-widget-chart-color-1: #818cf8;
|
|
61
|
+
--u-widget-chart-color-2: #38bdf8;
|
|
62
|
+
--u-widget-chart-color-3: #34d399;
|
|
63
|
+
--u-widget-chart-color-4: #fbbf24;
|
|
64
|
+
--u-widget-chart-color-5: #f87171;
|
|
65
|
+
--u-widget-chart-color-6: #a78bfa;
|
|
66
|
+
--u-widget-chart-color-7: #f472b6;
|
|
67
|
+
--u-widget-chart-color-8: #22d3ee;
|
|
68
|
+
|
|
69
|
+
--u-widget-shadow:
|
|
70
|
+
0 1px 3px rgba(0,0,0,0.3),
|
|
71
|
+
0 1px 2px rgba(0,0,0,0.2);
|
|
72
|
+
--u-widget-shadow-hover:
|
|
73
|
+
0 4px 12px rgba(0,0,0,0.4),
|
|
74
|
+
0 2px 4px rgba(0,0,0,0.2);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ── Dark mode (manual via theme attribute) ── */
|
|
79
|
+
:host([theme="dark"]) {
|
|
80
|
+
color-scheme: dark;
|
|
81
|
+
--u-widget-bg: #1e1e2e;
|
|
82
|
+
--u-widget-surface: #2a2a3e;
|
|
83
|
+
--u-widget-text: #e2e8f0;
|
|
84
|
+
--u-widget-text-secondary: #94a3b8;
|
|
85
|
+
--u-widget-border: #374151;
|
|
86
|
+
--u-widget-primary: #818cf8;
|
|
87
|
+
--u-widget-positive: #4ade80;
|
|
88
|
+
--u-widget-negative: #f87171;
|
|
89
|
+
--u-widget-warning: #fbbf24;
|
|
90
|
+
|
|
91
|
+
--u-widget-chart-color-1: #818cf8;
|
|
92
|
+
--u-widget-chart-color-2: #38bdf8;
|
|
93
|
+
--u-widget-chart-color-3: #34d399;
|
|
94
|
+
--u-widget-chart-color-4: #fbbf24;
|
|
95
|
+
--u-widget-chart-color-5: #f87171;
|
|
96
|
+
--u-widget-chart-color-6: #a78bfa;
|
|
97
|
+
--u-widget-chart-color-7: #f472b6;
|
|
98
|
+
--u-widget-chart-color-8: #22d3ee;
|
|
99
|
+
|
|
100
|
+
--u-widget-shadow:
|
|
101
|
+
0 1px 3px rgba(0,0,0,0.3),
|
|
102
|
+
0 1px 2px rgba(0,0,0,0.2);
|
|
103
|
+
--u-widget-shadow-hover:
|
|
104
|
+
0 4px 12px rgba(0,0,0,0.4),
|
|
105
|
+
0 2px 4px rgba(0,0,0,0.2);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host([theme="light"]) {
|
|
109
|
+
color-scheme: light;
|
|
110
|
+
}
|
|
111
|
+
`;
|
|
112
|
+
export {
|
|
113
|
+
r as t
|
|
114
|
+
};
|
|
115
|
+
//# sourceMappingURL=tokens-DqqlmnD2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-DqqlmnD2.js","sources":["../src/styles/tokens.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared CSS custom property tokens for all u-widget elements.\n *\n * **Token categories:**\n * - Colors: bg, surface, text, text-secondary, border, primary, positive, negative, warning\n * - Spacing: gap, radius\n * - Typography: font-family, font-size\n * - Chart: chart-height, chart-color-1..10\n *\n * **Theme modes:**\n * Uses `@media (prefers-color-scheme)` + `[theme]` attribute for dark/light adaptation.\n * 1. Auto mode: `:host` declares `color-scheme: light dark` — inherits from parent\n * or falls back to `prefers-color-scheme` media query.\n * 2. Manual override: `theme=\"dark\"` or `theme=\"light\"` forces `color-scheme`.\n *\n * Note: `light-dark()` CSS function is NOT used for color tokens because\n * `getComputedStyle().getPropertyValue()` returns the raw function string\n * instead of the resolved color — breaking imperative consumers like ECharts.\n *\n * Host applications can override any `--u-widget-*` variable by styling the\n * element directly (e.g., `u-widget { --u-widget-text: blue; }`).\n */\nexport const themeStyles = css`\n :host {\n color-scheme: light dark;\n\n /* ── Colors (light defaults) ── */\n --u-widget-bg: #fff;\n --u-widget-surface: #f1f5f9;\n --u-widget-text: #1a1a2e;\n --u-widget-text-secondary: #64748b;\n --u-widget-border: #e2e8f0;\n --u-widget-primary: #4f46e5;\n --u-widget-positive: #16a34a;\n --u-widget-negative: #dc2626;\n --u-widget-warning: #d97706;\n\n /* ── Chart palette (light) ── */\n --u-widget-chart-color-1: #4f46e5;\n --u-widget-chart-color-2: #0ea5e9;\n --u-widget-chart-color-3: #10b981;\n --u-widget-chart-color-4: #f59e0b;\n --u-widget-chart-color-5: #ef4444;\n --u-widget-chart-color-6: #8b5cf6;\n --u-widget-chart-color-7: #ec4899;\n --u-widget-chart-color-8: #06b6d4;\n\n /* ── Spacing ── */\n --u-widget-gap: 16px;\n --u-widget-radius: 6px;\n\n /* ── Typography ── */\n --u-widget-font-family: system-ui, -apple-system, sans-serif;\n --u-widget-font-size: 0.875rem;\n\n /* ── Chart ── */\n --u-widget-chart-height: 300px;\n\n /* ── Shadow ── */\n --u-widget-shadow:\n 0 1px 3px rgba(0,0,0,0.08),\n 0 1px 2px rgba(0,0,0,0.06);\n --u-widget-shadow-hover:\n 0 4px 12px rgba(0,0,0,0.10),\n 0 2px 4px rgba(0,0,0,0.06);\n }\n\n /* ── Dark mode (auto via prefers-color-scheme) ── */\n @media (prefers-color-scheme: dark) {\n :host(:not([theme=\"light\"])) {\n --u-widget-bg: #1e1e2e;\n --u-widget-surface: #2a2a3e;\n --u-widget-text: #e2e8f0;\n --u-widget-text-secondary: #94a3b8;\n --u-widget-border: #374151;\n --u-widget-primary: #818cf8;\n --u-widget-positive: #4ade80;\n --u-widget-negative: #f87171;\n --u-widget-warning: #fbbf24;\n\n --u-widget-chart-color-1: #818cf8;\n --u-widget-chart-color-2: #38bdf8;\n --u-widget-chart-color-3: #34d399;\n --u-widget-chart-color-4: #fbbf24;\n --u-widget-chart-color-5: #f87171;\n --u-widget-chart-color-6: #a78bfa;\n --u-widget-chart-color-7: #f472b6;\n --u-widget-chart-color-8: #22d3ee;\n\n --u-widget-shadow:\n 0 1px 3px rgba(0,0,0,0.3),\n 0 1px 2px rgba(0,0,0,0.2);\n --u-widget-shadow-hover:\n 0 4px 12px rgba(0,0,0,0.4),\n 0 2px 4px rgba(0,0,0,0.2);\n }\n }\n\n /* ── Dark mode (manual via theme attribute) ── */\n :host([theme=\"dark\"]) {\n color-scheme: dark;\n --u-widget-bg: #1e1e2e;\n --u-widget-surface: #2a2a3e;\n --u-widget-text: #e2e8f0;\n --u-widget-text-secondary: #94a3b8;\n --u-widget-border: #374151;\n --u-widget-primary: #818cf8;\n --u-widget-positive: #4ade80;\n --u-widget-negative: #f87171;\n --u-widget-warning: #fbbf24;\n\n --u-widget-chart-color-1: #818cf8;\n --u-widget-chart-color-2: #38bdf8;\n --u-widget-chart-color-3: #34d399;\n --u-widget-chart-color-4: #fbbf24;\n --u-widget-chart-color-5: #f87171;\n --u-widget-chart-color-6: #a78bfa;\n --u-widget-chart-color-7: #f472b6;\n --u-widget-chart-color-8: #22d3ee;\n\n --u-widget-shadow:\n 0 1px 3px rgba(0,0,0,0.3),\n 0 1px 2px rgba(0,0,0,0.2);\n --u-widget-shadow-hover:\n 0 4px 12px rgba(0,0,0,0.4),\n 0 2px 4px rgba(0,0,0,0.2);\n }\n\n :host([theme=\"light\"]) {\n color-scheme: light;\n }\n`;\n"],"names":["themeStyles","css"],"mappings":";AAwBO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
package/dist/u-widgets-charts.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css as E, LitElement as P, nothing as T, html as R } from "lit";
|
|
2
2
|
import { property as $, customElement as B } from "lit/decorators.js";
|
|
3
3
|
import { a as W, f as q } from "./format-DiXp3HTj.js";
|
|
4
|
-
import { t as G } from "./tokens-
|
|
4
|
+
import { t as G } from "./tokens-DqqlmnD2.js";
|
|
5
5
|
import * as O from "echarts/core";
|
|
6
6
|
import { BarChart as H, LineChart as U, PieChart as Y, ScatterChart as J, RadarChart as Q, HeatmapChart as X, BoxplotChart as Z, FunnelChart as K, TreemapChart as ee } from "echarts/charts";
|
|
7
7
|
import { GridComponent as te, TooltipComponent as re, LegendComponent as ie, RadarComponent as se, MarkLineComponent as ne, VisualMapComponent as oe } from "echarts/components";
|
package/dist/u-widgets-math.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css as m, LitElement as u, nothing as p, html as c } from "lit";
|
|
2
2
|
import { property as d, customElement as h } from "lit/decorators.js";
|
|
3
|
-
import { t as f } from "./tokens-
|
|
3
|
+
import { t as f } from "./tokens-DqqlmnD2.js";
|
|
4
4
|
import g from "katex";
|
|
5
5
|
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (o, t, a, r) => {
|
|
6
6
|
for (var e = r > 1 ? void 0 : r ? y(t, a) : t, s = o.length - 1, n; s >= 0; s--)
|
package/dist/u-widgets.js
CHANGED
|
@@ -4,7 +4,7 @@ import { i as be } from "./infer-CNOiD2dS.js";
|
|
|
4
4
|
import { f as he, n as we } from "./format-DiXp3HTj.js";
|
|
5
5
|
import { css as b, LitElement as w, nothing as l, html as o } from "lit";
|
|
6
6
|
import { property as h, customElement as y, state as S } from "lit/decorators.js";
|
|
7
|
-
import { t as x } from "./tokens-
|
|
7
|
+
import { t as x } from "./tokens-DqqlmnD2.js";
|
|
8
8
|
const ye = /* @__PURE__ */ new Set([
|
|
9
9
|
"text",
|
|
10
10
|
"email",
|
package/package.json
CHANGED
package/dist/tokens-CoFJ5AA5.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { css as e } from "lit";
|
|
2
|
-
const a = e`
|
|
3
|
-
:host {
|
|
4
|
-
color-scheme: light dark;
|
|
5
|
-
|
|
6
|
-
/* ── Colors ── */
|
|
7
|
-
--u-widget-bg: light-dark(#fff, #1e1e2e);
|
|
8
|
-
--u-widget-surface: light-dark(#f1f5f9, #2a2a3e);
|
|
9
|
-
--u-widget-text: light-dark(#1a1a2e, #e2e8f0);
|
|
10
|
-
--u-widget-text-secondary: light-dark(#64748b, #94a3b8);
|
|
11
|
-
--u-widget-border: light-dark(#e2e8f0, #374151);
|
|
12
|
-
--u-widget-primary: light-dark(#4f46e5, #818cf8);
|
|
13
|
-
--u-widget-positive: light-dark(#16a34a, #4ade80);
|
|
14
|
-
--u-widget-negative: light-dark(#dc2626, #f87171);
|
|
15
|
-
--u-widget-warning: light-dark(#d97706, #fbbf24);
|
|
16
|
-
|
|
17
|
-
/* ── Spacing ── */
|
|
18
|
-
--u-widget-gap: 16px;
|
|
19
|
-
--u-widget-radius: 6px;
|
|
20
|
-
|
|
21
|
-
/* ── Typography ── */
|
|
22
|
-
--u-widget-font-family: system-ui, -apple-system, sans-serif;
|
|
23
|
-
--u-widget-font-size: 0.875rem;
|
|
24
|
-
|
|
25
|
-
/* ── Chart ── */
|
|
26
|
-
--u-widget-chart-height: 300px;
|
|
27
|
-
|
|
28
|
-
/* ── Shadow ── */
|
|
29
|
-
--u-widget-shadow:
|
|
30
|
-
0 1px 3px light-dark(rgba(0,0,0,0.08), rgba(0,0,0,0.3)),
|
|
31
|
-
0 1px 2px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.2));
|
|
32
|
-
--u-widget-shadow-hover:
|
|
33
|
-
0 4px 12px light-dark(rgba(0,0,0,0.10), rgba(0,0,0,0.4)),
|
|
34
|
-
0 2px 4px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.2));
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
:host([theme="dark"]) {
|
|
38
|
-
color-scheme: dark;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:host([theme="light"]) {
|
|
42
|
-
color-scheme: light;
|
|
43
|
-
}
|
|
44
|
-
`;
|
|
45
|
-
export {
|
|
46
|
-
a as t
|
|
47
|
-
};
|
|
48
|
-
//# sourceMappingURL=tokens-CoFJ5AA5.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tokens-CoFJ5AA5.js","sources":["../src/styles/tokens.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared CSS custom property tokens for all u-widget elements.\n *\n * **Token categories:**\n * - Colors: bg, surface, text, text-secondary, border, primary, positive, negative, warning\n * - Spacing: gap, radius\n * - Typography: font-family, font-size\n * - Chart: chart-height, chart-color-1..10\n *\n * **Theme modes:**\n * Uses CSS `color-scheme` + `light-dark()` for automatic dark/light adaptation.\n * 1. Auto mode: `:host` declares `color-scheme: light dark` — inherits from parent\n * or falls back to `prefers-color-scheme`.\n * 2. Manual override: `theme=\"dark\"` or `theme=\"light\"` forces `color-scheme`.\n *\n * Host applications can override any `--u-widget-*` variable by styling the\n * element directly (e.g., `u-widget { --u-widget-text: blue; }`).\n */\nexport const themeStyles = css`\n :host {\n color-scheme: light dark;\n\n /* ── Colors ── */\n --u-widget-bg: light-dark(#fff, #1e1e2e);\n --u-widget-surface: light-dark(#f1f5f9, #2a2a3e);\n --u-widget-text: light-dark(#1a1a2e, #e2e8f0);\n --u-widget-text-secondary: light-dark(#64748b, #94a3b8);\n --u-widget-border: light-dark(#e2e8f0, #374151);\n --u-widget-primary: light-dark(#4f46e5, #818cf8);\n --u-widget-positive: light-dark(#16a34a, #4ade80);\n --u-widget-negative: light-dark(#dc2626, #f87171);\n --u-widget-warning: light-dark(#d97706, #fbbf24);\n\n /* ── Spacing ── */\n --u-widget-gap: 16px;\n --u-widget-radius: 6px;\n\n /* ── Typography ── */\n --u-widget-font-family: system-ui, -apple-system, sans-serif;\n --u-widget-font-size: 0.875rem;\n\n /* ── Chart ── */\n --u-widget-chart-height: 300px;\n\n /* ── Shadow ── */\n --u-widget-shadow:\n 0 1px 3px light-dark(rgba(0,0,0,0.08), rgba(0,0,0,0.3)),\n 0 1px 2px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.2));\n --u-widget-shadow-hover:\n 0 4px 12px light-dark(rgba(0,0,0,0.10), rgba(0,0,0,0.4)),\n 0 2px 4px light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.2));\n }\n\n :host([theme=\"dark\"]) {\n color-scheme: dark;\n }\n\n :host([theme=\"light\"]) {\n color-scheme: light;\n }\n`;\n"],"names":["themeStyles","css"],"mappings":";AAoBO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|