agentcss 0.0.0-stage → 0.11.3
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/01-tokens/README.md +236 -0
- package/01-tokens/behavior/dismissable.js +132 -0
- package/01-tokens/behavior/emit.js +76 -0
- package/01-tokens/behavior/focus-return.js +81 -0
- package/01-tokens/behavior/roving.js +152 -0
- package/01-tokens/behavior/typeahead.js +124 -0
- package/01-tokens/focus-ring-demo.html +133 -0
- package/01-tokens/focus-ring.css +102 -0
- package/01-tokens/page.css +244 -0
- package/01-tokens/polyfill.js +116 -0
- package/01-tokens/responsive-demo.html +171 -0
- package/01-tokens/scrollbar-demo.html +194 -0
- package/01-tokens/scrollbar.css +179 -0
- package/01-tokens/theme-toggle.js +103 -0
- package/01-tokens/tokens.css +972 -0
- package/01-tokens/typography.css +156 -0
- package/02-primitives/badge/README.md +71 -0
- package/02-primitives/badge/badge.css +141 -0
- package/02-primitives/badge/demo.html +101 -0
- package/02-primitives/button/README.md +99 -0
- package/02-primitives/button/button.css +353 -0
- package/02-primitives/button/demo.html +200 -0
- package/02-primitives/card/README.md +145 -0
- package/02-primitives/card/card.css +246 -0
- package/02-primitives/card/demo.html +170 -0
- package/02-primitives/choice/README.md +161 -0
- package/02-primitives/choice/choice.css +395 -0
- package/02-primitives/choice/demo.html +277 -0
- package/02-primitives/combobox/README.md +79 -0
- package/02-primitives/combobox/combobox.css +223 -0
- package/02-primitives/combobox/combobox.js +485 -0
- package/02-primitives/combobox/demo.html +109 -0
- package/02-primitives/date-range/README.md +100 -0
- package/02-primitives/date-range/date-range.css +206 -0
- package/02-primitives/date-range/date-range.js +301 -0
- package/02-primitives/date-range/demo.html +104 -0
- package/02-primitives/input/README.md +170 -0
- package/02-primitives/input/demo.html +246 -0
- package/02-primitives/input/input.css +239 -0
- package/02-primitives/popover/README.md +80 -0
- package/02-primitives/popover/demo.html +150 -0
- package/02-primitives/popover/popover.css +187 -0
- package/02-primitives/popover/popover.js +331 -0
- package/02-primitives/progress/README.md +82 -0
- package/02-primitives/progress/demo.html +154 -0
- package/02-primitives/progress/progress.css +172 -0
- package/02-primitives/select/README.md +95 -0
- package/02-primitives/select/demo.html +121 -0
- package/02-primitives/select/select.css +151 -0
- package/02-primitives/select/select.js +549 -0
- package/02-primitives/separator/README.md +63 -0
- package/02-primitives/separator/demo.html +84 -0
- package/02-primitives/separator/separator.css +73 -0
- package/02-primitives/skeleton/README.md +69 -0
- package/02-primitives/skeleton/demo.html +110 -0
- package/02-primitives/skeleton/skeleton.css +96 -0
- package/02-primitives/switch/README.md +65 -0
- package/02-primitives/switch/demo.html +115 -0
- package/02-primitives/switch/switch.css +370 -0
- package/03-patterns/accordion/README.md +121 -0
- package/03-patterns/accordion/accordion.css +453 -0
- package/03-patterns/accordion/accordion.js +369 -0
- package/03-patterns/accordion/demo.html +223 -0
- package/03-patterns/content/README.md +103 -0
- package/03-patterns/content/content.css +286 -0
- package/03-patterns/content/demo.html +88 -0
- package/03-patterns/drawer/README.md +79 -0
- package/03-patterns/drawer/demo.html +101 -0
- package/03-patterns/drawer/drawer.css +129 -0
- package/03-patterns/drawer/drawer.js +258 -0
- package/03-patterns/dropdown/README.md +78 -0
- package/03-patterns/dropdown/demo.html +101 -0
- package/03-patterns/dropdown/dropdown.css +135 -0
- package/03-patterns/dropdown/dropdown.js +451 -0
- package/03-patterns/form-validation/README.md +147 -0
- package/03-patterns/form-validation/demo.html +280 -0
- package/03-patterns/form-validation/form-validation.css +263 -0
- package/03-patterns/list/README.md +150 -0
- package/03-patterns/list/demo.html +225 -0
- package/03-patterns/list/flip.js +201 -0
- package/03-patterns/list/list.css +162 -0
- package/03-patterns/nav/README.md +225 -0
- package/03-patterns/nav/demo.html +131 -0
- package/03-patterns/nav/nav.css +314 -0
- package/03-patterns/nav/nav.js +430 -0
- package/03-patterns/nav/toc.js +111 -0
- package/03-patterns/overlay/README.md +196 -0
- package/03-patterns/overlay/demo.html +241 -0
- package/03-patterns/overlay/overlay.css +319 -0
- package/03-patterns/overlay/overlay.js +563 -0
- package/03-patterns/pagination/README.md +114 -0
- package/03-patterns/pagination/demo.html +165 -0
- package/03-patterns/pagination/pagination.css +195 -0
- package/03-patterns/pagination/pagination.js +395 -0
- package/03-patterns/reveal/README.md +91 -0
- package/03-patterns/reveal/demo.html +106 -0
- package/03-patterns/reveal/reveal.css +93 -0
- package/03-patterns/reveal/reveal.js +172 -0
- package/03-patterns/states/README.md +141 -0
- package/03-patterns/states/demo.html +240 -0
- package/03-patterns/states/states.css +252 -0
- package/03-patterns/tabs/README.md +84 -0
- package/03-patterns/tabs/demo.html +139 -0
- package/03-patterns/tabs/tabs.css +172 -0
- package/03-patterns/tabs/tabs.js +307 -0
- package/03-patterns/tooltip/README.md +96 -0
- package/03-patterns/tooltip/demo.html +78 -0
- package/03-patterns/tooltip/tooltip.css +89 -0
- package/03-patterns/tooltip/tooltip.js +288 -0
- package/03-patterns/tree/README.md +94 -0
- package/03-patterns/tree/demo.html +138 -0
- package/03-patterns/tree/tree.css +113 -0
- package/03-patterns/tree/tree.js +456 -0
- package/04-recipes/analysis-report/README.md +80 -0
- package/04-recipes/analysis-report/analysis-report.css +187 -0
- package/04-recipes/analysis-report/demo.html +274 -0
- package/04-recipes/data-showcase/README.md +45 -0
- package/04-recipes/data-showcase/demo.html +247 -0
- package/04-recipes/detail-page/README.md +93 -0
- package/04-recipes/detail-page/demo.html +55 -0
- package/04-recipes/detail-page/detail-page.css +190 -0
- package/04-recipes/detail-page/full.html +60 -0
- package/04-recipes/detail-page/null.html +60 -0
- package/04-recipes/detail-page/partial.html +60 -0
- package/04-recipes/detail-page/verify-skeleton.py +19 -0
- package/04-recipes/longform/README.md +93 -0
- package/04-recipes/longform/agc-memory.svg +4 -0
- package/04-recipes/longform/content.html +610 -0
- package/04-recipes/longform/content.md +51 -0
- package/04-recipes/longform/longform.html +627 -0
- package/04-recipes/report/README.md +176 -0
- package/04-recipes/report/demo.html +355 -0
- package/04-recipes/report/report.css +364 -0
- package/04-recipes/table/README.md +103 -0
- package/04-recipes/table/demo.html +455 -0
- package/04-recipes/table/table.css +372 -0
- package/04-recipes/tierA-tokens.css +189 -0
- package/09-assets/README.md +74 -0
- package/09-assets/bar/README.md +94 -0
- package/09-assets/bar/bar.css +166 -0
- package/09-assets/bar/bar.js +320 -0
- package/09-assets/bar/demo.html +176 -0
- package/09-assets/echarts-adapter/demo.html +192 -0
- package/09-assets/echarts-adapter/echarts-adapter.js +277 -0
- package/09-assets/model-viewer/README.md +155 -0
- package/09-assets/model-viewer/demo.html +105 -0
- package/09-assets/model-viewer/model-viewer.css +143 -0
- package/09-assets/model-viewer/model-viewer.js +423 -0
- package/09-assets/scientific-plot/README.md +94 -0
- package/09-assets/scientific-plot/demo.html +252 -0
- package/09-assets/scientific-plot/scientific-plot.css +141 -0
- package/09-assets/scientific-plot/scientific-plot.js +610 -0
- package/09-assets/sparkline/README.md +153 -0
- package/09-assets/sparkline/demo.html +163 -0
- package/09-assets/sparkline/sparkline.css +158 -0
- package/09-assets/sparkline/sparkline.js +508 -0
- package/API.md +332 -0
- package/CHANGELOG.md +3138 -0
- package/CODE_OF_CONDUCT.md +64 -0
- package/CONTRIBUTING.md +89 -0
- package/ERRORS.md +1658 -0
- package/LICENSE +21 -0
- package/README.md +497 -2
- package/SECURITY.md +72 -0
- package/START-HERE.md +164 -0
- package/SUPPORT.md +109 -0
- package/adapters/presentation/README.md +113 -0
- package/adapters/presentation/check.js +101 -0
- package/adapters/presentation/deck.schema.json +74 -0
- package/adapters/presentation/to-doc.js +138 -0
- package/ai/START-HERE.md +104 -0
- package/ai/behaviors.json +380 -0
- package/ai/behaviors.schema.json +61 -0
- package/ai/capabilities.json +56 -0
- package/ai/cli.js +387 -0
- package/ai/components.json +1944 -0
- package/ai/components.meta.json +168 -0
- package/ai/components.schema.json +220 -0
- package/ai/contract.schema.json +147 -0
- package/ai/deprecations.json +55 -0
- package/ai/deprecations.schema.json +85 -0
- package/ai/motion-policy.json +22 -0
- package/ai/patch.js +323 -0
- package/ai/patch.schema.json +63 -0
- package/ai/profiles.json +92 -0
- package/ai/tokens.audience.json +55 -0
- package/ai/tokens.audience.schema.json +73 -0
- package/ai/tokens.json +762 -0
- package/ai/tokens.schema.json +58 -0
- package/ai/tokens.tree.json +752 -0
- package/ai/tokens.tree.schema.json +56 -0
- package/ai/validate.js +383 -0
- package/dist/01-tokens/behavior/dismissable.js +60 -0
- package/dist/01-tokens/behavior/emit.js +21 -0
- package/dist/01-tokens/behavior/focus-return.js +31 -0
- package/dist/01-tokens/behavior/roving.js +77 -0
- package/dist/01-tokens/behavior/typeahead.js +61 -0
- package/dist/01-tokens/focus-ring.css +1 -0
- package/dist/01-tokens/page.css +1 -0
- package/dist/01-tokens/polyfill.js +78 -0
- package/dist/01-tokens/scrollbar.css +1 -0
- package/dist/01-tokens/theme-toggle.js +61 -0
- package/dist/01-tokens/tokens.css +1 -0
- package/dist/01-tokens/typography.css +1 -0
- package/dist/02-primitives/badge/badge.css +1 -0
- package/dist/02-primitives/button/button.css +1 -0
- package/dist/02-primitives/card/card.css +1 -0
- package/dist/02-primitives/choice/choice.css +1 -0
- package/dist/02-primitives/combobox/combobox.css +1 -0
- package/dist/02-primitives/combobox/combobox.js +439 -0
- package/dist/02-primitives/date-range/date-range.css +1 -0
- package/dist/02-primitives/date-range/date-range.js +267 -0
- package/dist/02-primitives/input/input.css +1 -0
- package/dist/02-primitives/popover/popover.css +1 -0
- package/dist/02-primitives/popover/popover.js +257 -0
- package/dist/02-primitives/progress/progress.css +1 -0
- package/dist/02-primitives/select/select.css +1 -0
- package/dist/02-primitives/select/select.js +449 -0
- package/dist/02-primitives/separator/separator.css +1 -0
- package/dist/02-primitives/skeleton/skeleton.css +1 -0
- package/dist/02-primitives/switch/switch.css +1 -0
- package/dist/03-patterns/accordion/accordion.css +1 -0
- package/dist/03-patterns/accordion/accordion.js +219 -0
- package/dist/03-patterns/content/content.css +1 -0
- package/dist/03-patterns/drawer/drawer.css +1 -0
- package/dist/03-patterns/drawer/drawer.js +229 -0
- package/dist/03-patterns/dropdown/dropdown.css +1 -0
- package/dist/03-patterns/dropdown/dropdown.js +365 -0
- package/dist/03-patterns/form-validation/form-validation.css +1 -0
- package/dist/03-patterns/list/flip.js +117 -0
- package/dist/03-patterns/list/list.css +1 -0
- package/dist/03-patterns/nav/nav.css +1 -0
- package/dist/03-patterns/nav/nav.js +322 -0
- package/dist/03-patterns/nav/toc.js +76 -0
- package/dist/03-patterns/overlay/overlay.css +1 -0
- package/dist/03-patterns/overlay/overlay.js +398 -0
- package/dist/03-patterns/pagination/pagination.css +1 -0
- package/dist/03-patterns/pagination/pagination.js +273 -0
- package/dist/03-patterns/reveal/reveal.css +1 -0
- package/dist/03-patterns/reveal/reveal.js +138 -0
- package/dist/03-patterns/states/states.css +1 -0
- package/dist/03-patterns/tabs/tabs.css +1 -0
- package/dist/03-patterns/tabs/tabs.js +242 -0
- package/dist/03-patterns/tooltip/tooltip.css +1 -0
- package/dist/03-patterns/tooltip/tooltip.js +213 -0
- package/dist/03-patterns/tree/tree.css +1 -0
- package/dist/03-patterns/tree/tree.js +383 -0
- package/dist/04-recipes/analysis-report/analysis-report.css +1 -0
- package/dist/04-recipes/detail-page/detail-page.css +1 -0
- package/dist/04-recipes/report/report.css +1 -0
- package/dist/04-recipes/table/table.css +1 -0
- package/dist/04-recipes/tierA-tokens.css +1 -0
- package/dist/09-assets/bar/bar.css +1 -0
- package/dist/09-assets/bar/bar.js +222 -0
- package/dist/09-assets/echarts-adapter/echarts-adapter.js +185 -0
- package/dist/09-assets/model-viewer/model-viewer.css +1 -0
- package/dist/09-assets/model-viewer/model-viewer.js +320 -0
- package/dist/09-assets/scientific-plot/scientific-plot.css +1 -0
- package/dist/09-assets/scientific-plot/scientific-plot.js +568 -0
- package/dist/09-assets/sparkline/sparkline.css +1 -0
- package/dist/09-assets/sparkline/sparkline.js +265 -0
- package/dist/COSTS.md +56 -0
- package/docs/AI-CONTRACT.md +197 -0
- package/docs/BACKLOG.md +127 -0
- package/docs/BENCHMARK.md +252 -0
- package/docs/GUIDANCE.md +154 -0
- package/docs/INVARIANT.md +372 -0
- package/docs/LAYER-BASELINE.md +158 -0
- package/docs/RELEASING.md +311 -0
- package/docs/RFC-THEME-SCOPE.md +141 -0
- package/docs/ROADMAP.md +182 -0
- package/index.html +82 -0
- package/package.json +107 -4
- package/types/index.d.ts +310 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.drange {display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3);}.drange__field {flex:1 1 10rem;min-width:0;}.drange__label {display:block;margin-bottom:var(--sp-1);font-size:var(--fs-xs);color:var(--text-secondary);}.drange__input {display:block;width:100%;box-sizing:border-box;min-height:44px;padding:0 var(--sp-3);background:var(--surface);color:var(--text-primary);border:1px solid var(--border-control);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);font-family:var(--mono);font-variant-numeric:tabular-nums;color-scheme:light dark;}.drange__input:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);}.drange__input[aria-invalid="true"] {border-color:var(--danger);border-width:2px;background:var(--surface-sunken);}.drange__input[aria-invalid="true"]::after {content:" ⚠";}.drange__sep {flex:0 0 auto;padding-bottom:var(--sp-3);color:var(--text-tertiary);font-size:var(--fs-sm);}.drange__presets {display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);}.drange__preset {min-height:32px;padding:0 var(--sp-3);background:var(--surface);color:var(--text-secondary);border:1px solid var(--border-control);border-radius:var(--r-pill);font:inherit;font-size:var(--fs-xs);cursor:pointer;}.drange__preset:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);}@media (hover:hover) and (pointer:fine) {.drange__preset:hover {background:var(--surface-sunken);}}.drange__preset[aria-pressed="true"] {background:var(--accent-soft);border-color:var(--accent);color:var(--text-primary);font-weight:600;}.drange__error {flex:1 1 100%;display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--surface-sunken);border-inline-start:3px solid var(--danger);border-radius:var(--r-sm);color:var(--danger);font-size:var(--fs-xs);line-height:1.5;}.drange__error[hidden] {display:none;}.drange__summary {flex:1 1 100%;margin-top:var(--sp-2);color:var(--text-secondary);font-size:var(--fs-xs);}.drange__summary b {font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text-primary);}.drange__clear {flex:0 0 auto;min-height:44px;padding:0 var(--sp-4);background:var(--surface);color:var(--text-secondary);border:1px solid var(--border-control);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);cursor:pointer;}.drange__clear:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);}@media (hover:hover) and (pointer:fine) {.drange__clear:hover {background:var(--surface-sunken);color:var(--text-primary);}}.drange__clear[disabled] {background:var(--surface-sunken);color:var(--text-tertiary);cursor:not-allowed;}@media (prefers-reduced-motion:reduce) {.drange * {transition:none;}}.drange__input:disabled {background:var(--surface-sunken);border-color:var(--border-decor);color:var(--text-tertiary);cursor:not-allowed;}.drange__input:disabled:focus-visible {outline:none;}.drange--disabled .drange__preset, .drange--disabled .drange__clear {background:var(--surface-sunken);color:var(--text-tertiary);border-color:var(--border-decor);cursor:not-allowed;}@media (hover:hover) and (pointer:fine) {.drange--disabled .drange__preset:hover, .drange--disabled .drange__clear:hover {background:var(--surface-sunken);color:var(--text-tertiary);}}
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
(function (global) {
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var flEmit = function (el, name, detail) {
|
|
5
|
+
if (!el || !el.dispatchEvent) return null;
|
|
6
|
+
var type = name.indexOf('fl-') === 0 ? name : 'fl-' + name;
|
|
7
|
+
var ev = null;
|
|
8
|
+
|
|
9
|
+
if (typeof window.CustomEvent === 'function') {
|
|
10
|
+
try {
|
|
11
|
+
ev = new window.CustomEvent(type, {
|
|
12
|
+
detail: detail || null, bubbles: true, cancelable: false
|
|
13
|
+
});
|
|
14
|
+
} catch (e) { ev = null; }
|
|
15
|
+
}
|
|
16
|
+
if (!ev) {
|
|
17
|
+
try {
|
|
18
|
+
ev = document.createEvent('CustomEvent');
|
|
19
|
+
ev.initCustomEvent(type, true, false, detail || null);
|
|
20
|
+
} catch (e2) { return null; }
|
|
21
|
+
}
|
|
22
|
+
el.dispatchEvent(ev);
|
|
23
|
+
return ev;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
function closest(el, sel) {
|
|
27
|
+
if (!el) return null;
|
|
28
|
+
if (el.closest) return el.closest(sel);
|
|
29
|
+
while (el && el.nodeType === 1) {
|
|
30
|
+
if (elMatches(el, sel)) return el;
|
|
31
|
+
el = el.parentElement;
|
|
32
|
+
}
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
function elMatches(el, sel) {
|
|
36
|
+
var m = sel.match(/^([a-zA-Z][\w-]*)/);
|
|
37
|
+
if (m && el.tagName.toLowerCase() !== m[1].toLowerCase()) return false;
|
|
38
|
+
var cls = sel.match(/\.([\w-]+)/g);
|
|
39
|
+
if (cls) {
|
|
40
|
+
for (var i = 0; i < cls.length; i++) {
|
|
41
|
+
var c = cls[i].slice(1);
|
|
42
|
+
if ((' ' + (el.className || '') + ' ').indexOf(' ' + c + ' ') < 0) return false;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
var id = sel.match(/#([\w-]+)/);
|
|
46
|
+
if (id && el.id !== id[1]) return false;
|
|
47
|
+
var at = sel.match(/\[([\w-]+)(?:=["']?([^\]"']*)["']?)?\]/);
|
|
48
|
+
if (at) {
|
|
49
|
+
var v = el.getAttribute(at[1]);
|
|
50
|
+
if (v === null) return false;
|
|
51
|
+
if (at[2] !== undefined && v !== at[2]) return false;
|
|
52
|
+
}
|
|
53
|
+
return true;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
var uid = 0;
|
|
57
|
+
|
|
58
|
+
function iso(d) {
|
|
59
|
+
if (!d) return '';
|
|
60
|
+
var m = String(d).match(/^(\d{4})-(\d{2})-(\d{2})/);
|
|
61
|
+
if (m) return m[1] + '-' + m[2] + '-' + m[3];
|
|
62
|
+
var dt = new Date(d);
|
|
63
|
+
if (isNaN(dt)) return '';
|
|
64
|
+
function p(n) { return (n < 10 ? '0' : '') + n; }
|
|
65
|
+
return dt.getFullYear() + '-' + p(dt.getMonth() + 1) + '-' + p(dt.getDate());
|
|
66
|
+
}
|
|
67
|
+
function addDays(isoStr, n) {
|
|
68
|
+
var d = new Date(isoStr + 'T00:00:00');
|
|
69
|
+
d.setDate(d.getDate() + n);
|
|
70
|
+
return iso(d);
|
|
71
|
+
}
|
|
72
|
+
function addMonths(isoStr, n) {
|
|
73
|
+
var d = new Date(isoStr + 'T00:00:00');
|
|
74
|
+
var day = d.getDate();
|
|
75
|
+
d.setDate(1);
|
|
76
|
+
d.setMonth(d.getMonth() + n);
|
|
77
|
+
|
|
78
|
+
var last = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
|
|
79
|
+
d.setDate(Math.min(day, last));
|
|
80
|
+
return iso(d);
|
|
81
|
+
}
|
|
82
|
+
function quarterOf(date) {
|
|
83
|
+
var q = Math.floor(date.getMonth() / 3);
|
|
84
|
+
return { y: date.getFullYear(), q: q };
|
|
85
|
+
}
|
|
86
|
+
function quarterRange(y, q) {
|
|
87
|
+
|
|
88
|
+
if (q !== 0 && q !== 1 && q !== 2 && q !== 3) {
|
|
89
|
+
throw new Error('DateRange.quarterRange: 季度必须是 0-3(0=Q1),收到 ' + q);
|
|
90
|
+
}
|
|
91
|
+
var start = new Date(y, q * 3, 1);
|
|
92
|
+
var end = new Date(y, q * 3 + 3, 0);
|
|
93
|
+
return { from: iso(start), to: iso(end) };
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
function create(root, opt) {
|
|
97
|
+
opt = opt || {};
|
|
98
|
+
var from = root.querySelector('[data-dr-from]');
|
|
99
|
+
var to = root.querySelector('[data-dr-to]');
|
|
100
|
+
var errBox = root.querySelector('[data-dr-error]');
|
|
101
|
+
var summary = root.querySelector('[data-dr-summary]');
|
|
102
|
+
var clearBtn = root.querySelector('[data-dr-clear]');
|
|
103
|
+
if (!from || !to) throw new Error('DateRange: 缺少 [data-dr-from] / [data-dr-to]');
|
|
104
|
+
|
|
105
|
+
if (opt.min) { from.min = opt.min; to.min = opt.min; }
|
|
106
|
+
if (opt.max) { from.max = opt.max; to.max = opt.max; }
|
|
107
|
+
|
|
108
|
+
function setError(msg) {
|
|
109
|
+
if (errBox) {
|
|
110
|
+
errBox.textContent = msg || '';
|
|
111
|
+
errBox.hidden = !msg;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
from.setAttribute('aria-invalid', msg ? 'true' : 'false');
|
|
115
|
+
to.setAttribute('aria-invalid', msg ? 'true' : 'false');
|
|
116
|
+
if (msg) {
|
|
117
|
+
var id = 'dr-err-' + (++uid);
|
|
118
|
+
errBox.id = id;
|
|
119
|
+
from.setAttribute('aria-describedby', id);
|
|
120
|
+
to.setAttribute('aria-describedby', id);
|
|
121
|
+
} else {
|
|
122
|
+
from.removeAttribute('aria-describedby');
|
|
123
|
+
to.removeAttribute('aria-describedby');
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
function days(fromS, toS) {
|
|
128
|
+
var a = new Date(fromS + 'T00:00:00'), b = new Date(toS + 'T00:00:00');
|
|
129
|
+
return Math.round((b - a) / 86400000) + 1;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
function validate() {
|
|
133
|
+
var f = from.value, t = to.value;
|
|
134
|
+
if (!f && !t) { setError(''); paintSummary(''); return true; }
|
|
135
|
+
if (f && !t) { setError('请填写结束日期。'); return false; }
|
|
136
|
+
if (!f && t) { setError('请填写开始日期。'); return false; }
|
|
137
|
+
if (f > t) {
|
|
138
|
+
setError('开始日期不能晚于结束日期(当前:' + f + ' → ' + t + ')。');
|
|
139
|
+
return false;
|
|
140
|
+
}
|
|
141
|
+
if (opt.min && f < opt.min) { setError('开始日期不能早于 ' + opt.min + '。'); return false; }
|
|
142
|
+
if (opt.max && t > opt.max) { setError('结束日期不能晚于 ' + opt.max + '。'); return false; }
|
|
143
|
+
setError('');
|
|
144
|
+
paintSummary(f + ' → ' + t + '(' + days(f, t) + ' 天)');
|
|
145
|
+
return true;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
function paintSummary(s) {
|
|
149
|
+
if (summary) summary.innerHTML = s ? ('区间 <b>' + s + '</b>') : '';
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
function emit() {
|
|
153
|
+
var ok = validate();
|
|
154
|
+
flEmit(root, 'fl-change',
|
|
155
|
+
{ value: { from: from.value, to: to.value }, valid: ok });
|
|
156
|
+
if (opt.onChange) {
|
|
157
|
+
opt.onChange({ from: from.value, to: to.value, valid: ok }, ok);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
function bindPresets() {
|
|
162
|
+
var now = new Date();
|
|
163
|
+
var q = quarterOf(now);
|
|
164
|
+
var presets = [
|
|
165
|
+
{ key: 'thisQ', label: '本季度', range: function () { return quarterRange(q.y, q.q); } },
|
|
166
|
+
{ key: 'lastQ', label: '上季度',
|
|
167
|
+
range: function () { return q.q === 0 ? quarterRange(q.y - 1, 3) : quarterRange(q.y, q.q - 1); } },
|
|
168
|
+
{ key: 'lastM', label: '上月',
|
|
169
|
+
range: function () {
|
|
170
|
+
var m = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
|
171
|
+
return { from: iso(m), to: iso(new Date(m.getFullYear(), m.getMonth() + 1, 0)) };
|
|
172
|
+
} },
|
|
173
|
+
{ key: 'thisY', label: '今年',
|
|
174
|
+
range: function () {
|
|
175
|
+
return { from: iso(new Date(now.getFullYear(), 0, 1)),
|
|
176
|
+
to: iso(new Date(now.getFullYear(), 11, 31)) };
|
|
177
|
+
} },
|
|
178
|
+
{ key: 'yoy', label: '去年同期',
|
|
179
|
+
range: function () {
|
|
180
|
+
var y = now.getFullYear() - 1;
|
|
181
|
+
return { from: iso(new Date(y, 0, 1)), to: iso(new Date(y, 11, 31)) };
|
|
182
|
+
} },
|
|
183
|
+
];
|
|
184
|
+
if (opt.presets) {
|
|
185
|
+
presets = presets.filter(function (x) { return opt.presets.indexOf(x.key) >= 0; });
|
|
186
|
+
}
|
|
187
|
+
var box = root.querySelector('[data-dr-presets]');
|
|
188
|
+
if (!box) return;
|
|
189
|
+
box.innerHTML = presets.map(function (p) {
|
|
190
|
+
return '<button class="drange__preset" type="button" aria-pressed="false" ' +
|
|
191
|
+
'data-dr-preset="'+ p.key + '">' + p.label + '</button>';
|
|
192
|
+
}).join('');
|
|
193
|
+
box.addEventListener('click', function (e) {
|
|
194
|
+
|
|
195
|
+
var b = closest(e.target, '[data-dr-preset]');
|
|
196
|
+
if (!b) return;
|
|
197
|
+
var p = presets.filter(function (x) { return x.key === b.getAttribute('data-dr-preset'); })[0];
|
|
198
|
+
if (!p) return;
|
|
199
|
+
var r = p.range();
|
|
200
|
+
from.value = r.from;
|
|
201
|
+
to.value = r.to;
|
|
202
|
+
|
|
203
|
+
box.querySelectorAll('[data-dr-preset]').forEach(function (x) {
|
|
204
|
+
x.setAttribute('aria-pressed', x === b ? 'true' : 'false');
|
|
205
|
+
});
|
|
206
|
+
emit();
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
bindPresets();
|
|
210
|
+
|
|
211
|
+
if (clearBtn) {
|
|
212
|
+
clearBtn.addEventListener('click', function () {
|
|
213
|
+
from.value = '';
|
|
214
|
+
to.value = '';
|
|
215
|
+
var box = root.querySelector('[data-dr-presets]');
|
|
216
|
+
if (box) {
|
|
217
|
+
box.querySelectorAll('[data-dr-preset]').forEach(function (x) {
|
|
218
|
+
x.setAttribute('aria-pressed', 'false');
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
setError('');
|
|
222
|
+
paintSummary('');
|
|
223
|
+
emit();
|
|
224
|
+
from.focus();
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
[from, to].forEach(function (el) {
|
|
229
|
+
el.addEventListener('change', function () {
|
|
230
|
+
var box = root.querySelector('[data-dr-presets]');
|
|
231
|
+
if (box) {
|
|
232
|
+
box.querySelectorAll('[data-dr-preset]').forEach(function (x) {
|
|
233
|
+
x.setAttribute('aria-pressed', 'false');
|
|
234
|
+
});
|
|
235
|
+
}
|
|
236
|
+
emit();
|
|
237
|
+
});
|
|
238
|
+
el.addEventListener('input', emit);
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
function setRange(a, b2) {
|
|
242
|
+
from.value = iso(a);
|
|
243
|
+
to.value = iso(b2);
|
|
244
|
+
emit();
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
validate();
|
|
248
|
+
return {
|
|
249
|
+
get from() { return from.value; },
|
|
250
|
+
get to() { return to.value; },
|
|
251
|
+
get valid() { return !errBox || errBox.hidden; },
|
|
252
|
+
set: setRange,
|
|
253
|
+
setPreset: function (key) {
|
|
254
|
+
var b = root.querySelector('[data-dr-preset="' + key + '"]');
|
|
255
|
+
if (b) b.click();
|
|
256
|
+
},
|
|
257
|
+
clear: function () { if (clearBtn) clearBtn.click(); },
|
|
258
|
+
};
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
global.DateRange = {
|
|
262
|
+
create: create,
|
|
263
|
+
|
|
264
|
+
iso: iso, addDays: addDays, addMonths: addMonths,
|
|
265
|
+
quarterOf: quarterOf, quarterRange: quarterRange,
|
|
266
|
+
};
|
|
267
|
+
})(window);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.field {display:flex;flex-direction:column;gap:var(--sp-1);}.field__label {font-size:var(--fs-sm);font-weight:500;color:var(--text-primary);line-height:var(--lh-tight);}.field__req {color:var(--danger);margin-inline-start:2px;}.field__input {width:100%;box-sizing:border-box;height:44px;padding:0 var(--sp-3);font-family:inherit;font-size:16px;line-height:1.5;color:var(--text-primary);background:var(--surface);border:1px solid var(--border-control);border-radius:var(--r-sm);transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);}.field__input::placeholder {color:var(--text-tertiary);opacity:1;}.field__input--textarea {height:auto;min-height:88px;padding:var(--sp-3);resize:vertical;line-height:var(--lh-base);}.field__input--sm {height:36px;font-size:16px;min-height:44px;}@media (hover:hover) and (pointer:fine) {.field__input:hover:not(:disabled):not([readonly]) {border-color:var(--text-tertiary);}}.field__input:focus {outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}.field__input:disabled {background:var(--surface-sunken);color:var(--text-tertiary);border-color:var(--border-decor);cursor:not-allowed;}.field__input[readonly] {background:var(--surface-sunken);color:var(--text-primary);border-color:var(--border-decor);cursor:default;}.field__input[readonly]:focus {border-color:var(--text-tertiary);box-shadow:0 0 0 3px var(--surface-sunken);}.field__input[aria-invalid="true"] {border-color:var(--danger);}.field__input[aria-invalid="true"]:focus {border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg);}.field__input[aria-invalid="true"] {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-3) center;padding-inline-end:40px;}.field__hint {font-size:var(--fs-xs);color:var(--text-tertiary);line-height:1.5;}.field__error {display:flex;align-items:flex-start;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--danger);line-height:1.5;}.field__error::before {content:"";flex:none;width:14px;height:14px;margin-top:3px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E") center/contain no-repeat;}.field__input[aria-invalid="false"][data-state="valid"] {border-color:var(--success);}.field--row {flex-direction:row;align-items:center;gap:var(--sp-3);}.field--row .field__label {flex:none;min-width:88px;}@media (max-width:480px) {.field--row {flex-direction:column;align-items:stretch;}.field--row .field__label {min-width:0;}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.popover-anchor {position:relative;display:inline-block;}.popover {position:absolute;z-index:var(--z-popover, 60);min-width:var(--popover-min-w, 200px);max-width:var(--popover-max-w, 320px);padding:var(--popover-p, var(--sp-3));background:var(--surface-raised);color:var(--text-primary);border:1px solid var(--border-decor);border-radius:var(--r-md);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transition:opacity var(--popover-dur, 140ms) var(--ease-out), transform var(--popover-dur, 140ms) var(--ease-out);}.popover[data-open='true'] {opacity:1;visibility:visible;}.popover--bottom {top:calc(100% + var(--popover-gap, 8px));inset-inline-start:50%;transform:translateX(-50%);}.popover--top {bottom:calc(100% + var(--popover-gap, 8px));inset-inline-start:50%;transform:translateX(-50%);}.popover--end {inset-inline-start:100%;margin-inline-start:var(--popover-gap, 8px);top:50%;transform:translateY(-50%);}.popover--start {inset-inline-end:100%;margin-inline-end:var(--popover-gap, 8px);top:50%;transform:translateY(-50%);}.popover--bottom[data-open='true'] {transform:translateX(-50%) translateY(0);}.popover--top[data-open='true'] {transform:translateX(-50%) translateY(0);}.popover--end[data-open='true'] {transform:translateY(-50%) translateX(0);}.popover--start[data-open='true'] {transform:translateY(-50%) translateX(0);}.popover__arrow {position:absolute;width:10px;height:10px;background:var(--surface-raised);border:1px solid var(--border-decor);transform:rotate(45deg);}.popover--bottom .popover__arrow {top:-6px;inset-inline-start:50%;margin-inline-start:-5px;border-inline-end:none;border-bottom:none;}.popover--top .popover__arrow {bottom:-6px;inset-inline-start:50%;margin-inline-start:-5px;border-inline-start:none;border-top:none;}.popover--end .popover__arrow {inset-inline-start:-6px;top:50%;margin-top:-5px;border-inline-end:none;border-top:none;}.popover--start .popover__arrow {inset-inline-end:-6px;top:50%;margin-top:-5px;border-inline-start:none;border-bottom:none;}.popover__title {font-size:var(--fs-md);font-weight:600;margin:0 0 var(--sp-1);}.popover__desc {font-size:var(--fs-sm);color:var(--text-secondary);margin:0 0 var(--sp-3);}.popover__desc:last-child {margin-bottom:0;}.popover__footer {display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-decor);}.popover:not([data-open='true']) * {pointer-events:none;}@media (prefers-reduced-motion:reduce) {.popover {transition:opacity var(--popover-dur, 100ms) linear;transform:none !important;}.popover[data-open='true'] {transform:none !important;}}.popover :focus-visible, .popover-anchor :focus-visible {outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);}.popover[tabindex='-1']:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
(function (global) {
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var flDismissable = function (opts) {
|
|
5
|
+
var opt = opts || {};
|
|
6
|
+
var escOn = opt.escOn || [];
|
|
7
|
+
var inside = opt.inside || [];
|
|
8
|
+
var when = opt.when || function () { return true; };
|
|
9
|
+
var onDismiss = opt.onDismiss || function () {};
|
|
10
|
+
|
|
11
|
+
var shared = window.__flDismiss || (window.__flDismiss = { stack: [], bound: false });
|
|
12
|
+
|
|
13
|
+
function isInside(node) {
|
|
14
|
+
if (!node) return false;
|
|
15
|
+
for (var i = 0; i < inside.length; i++) {
|
|
16
|
+
var el = inside[i];
|
|
17
|
+
if (!el || !el.contains) continue;
|
|
18
|
+
if (el === node || el.contains(node)) return true;
|
|
19
|
+
}
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function onKey(e) {
|
|
24
|
+
if (!when()) return;
|
|
25
|
+
var k = e.key;
|
|
26
|
+
if (k !== 'Escape' && k !== 'Esc' && e.keyCode !== 27) return;
|
|
27
|
+
|
|
28
|
+
var closed = onDismiss(e, 'esc');
|
|
29
|
+
if (closed === false) return;
|
|
30
|
+
if (e.preventDefault) e.preventDefault();
|
|
31
|
+
if (e.stopPropagation) e.stopPropagation();
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function onDocClick(e) {
|
|
35
|
+
var top = null;
|
|
36
|
+
for (var i = shared.stack.length - 1; i >= 0; i--) {
|
|
37
|
+
if (shared.stack[i].when()) { top = shared.stack[i]; break; }
|
|
38
|
+
}
|
|
39
|
+
if (!top || top.isInside(e.target)) return;
|
|
40
|
+
top.onDismiss(e, 'outside');
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
var rec = { when: when, isInside: isInside, onDismiss: onDismiss };
|
|
44
|
+
|
|
45
|
+
for (var j = 0; j < escOn.length; j++) {
|
|
46
|
+
if (escOn[j]) escOn[j].addEventListener('keydown', onKey);
|
|
47
|
+
}
|
|
48
|
+
shared.stack.push(rec);
|
|
49
|
+
if (!shared.bound) {
|
|
50
|
+
shared.bound = true;
|
|
51
|
+
document.addEventListener('click', onDocClick, true);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return {
|
|
55
|
+
destroy: function () {
|
|
56
|
+
for (var j = 0; j < escOn.length; j++) {
|
|
57
|
+
if (escOn[j]) escOn[j].removeEventListener('keydown', onKey);
|
|
58
|
+
}
|
|
59
|
+
var k = shared.stack.indexOf(rec);
|
|
60
|
+
if (k >= 0) shared.stack.splice(k, 1);
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
var flFocusReturn = function (opts) {
|
|
66
|
+
var opt = opts || {};
|
|
67
|
+
var saved = null;
|
|
68
|
+
|
|
69
|
+
return {
|
|
70
|
+
save: function () {
|
|
71
|
+
var a = document.activeElement;
|
|
72
|
+
saved = (a && a !== document.body && a.focus) ? a : null;
|
|
73
|
+
return saved;
|
|
74
|
+
},
|
|
75
|
+
|
|
76
|
+
restore: function () {
|
|
77
|
+
var target = saved;
|
|
78
|
+
|
|
79
|
+
if (!target || !document.contains(target)) target = opt.fallback || null;
|
|
80
|
+
if (!target) { saved = null; return false; }
|
|
81
|
+
try {
|
|
82
|
+
target.focus();
|
|
83
|
+
} catch (e) {
|
|
84
|
+
saved = null;
|
|
85
|
+
return false;
|
|
86
|
+
}
|
|
87
|
+
var ok = document.activeElement === target;
|
|
88
|
+
saved = null;
|
|
89
|
+
return ok;
|
|
90
|
+
},
|
|
91
|
+
|
|
92
|
+
target: function () { return saved; },
|
|
93
|
+
clear: function () { saved = null; },
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
var flEmit = function (el, name, detail) {
|
|
98
|
+
if (!el || !el.dispatchEvent) return null;
|
|
99
|
+
var type = name.indexOf('fl-') === 0 ? name : 'fl-' + name;
|
|
100
|
+
var ev = null;
|
|
101
|
+
|
|
102
|
+
if (typeof window.CustomEvent === 'function') {
|
|
103
|
+
try {
|
|
104
|
+
ev = new window.CustomEvent(type, {
|
|
105
|
+
detail: detail || null, bubbles: true, cancelable: false
|
|
106
|
+
});
|
|
107
|
+
} catch (e) { ev = null; }
|
|
108
|
+
}
|
|
109
|
+
if (!ev) {
|
|
110
|
+
try {
|
|
111
|
+
ev = document.createEvent('CustomEvent');
|
|
112
|
+
ev.initCustomEvent(type, true, false, detail || null);
|
|
113
|
+
} catch (e2) { return null; }
|
|
114
|
+
}
|
|
115
|
+
el.dispatchEvent(ev);
|
|
116
|
+
return ev;
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
var current = null;
|
|
120
|
+
|
|
121
|
+
function focusableIn(root) {
|
|
122
|
+
var all = root.querySelectorAll(
|
|
123
|
+
'a[href], button:not([disabled]), input:not([disabled]), '+
|
|
124
|
+
'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
|
125
|
+
);
|
|
126
|
+
return Array.prototype.filter.call(all, function (el) {
|
|
127
|
+
var cs = global.getComputedStyle(el);
|
|
128
|
+
if (cs.display === 'none' || cs.visibility === 'hidden') return false;
|
|
129
|
+
var r = el.getBoundingClientRect();
|
|
130
|
+
return r.width >= 1 && r.height >= 1;
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
function attach(trigger, opts) {
|
|
135
|
+
opts = opts || {};
|
|
136
|
+
|
|
137
|
+
var anchor = document.createElement('span');
|
|
138
|
+
anchor.className = 'popover-anchor';
|
|
139
|
+
trigger.parentNode.insertBefore(anchor, trigger);
|
|
140
|
+
anchor.appendChild(trigger);
|
|
141
|
+
|
|
142
|
+
var box = document.createElement('div');
|
|
143
|
+
box.className = 'popover popover--' + (opts.place || 'bottom');
|
|
144
|
+
box.setAttribute('data-open', 'false');
|
|
145
|
+
box.setAttribute('inert', '');
|
|
146
|
+
|
|
147
|
+
box.setAttribute('role', 'dialog');
|
|
148
|
+
box.setAttribute('aria-label', opts.label || '');
|
|
149
|
+
box.innerHTML =
|
|
150
|
+
'<span class="popover__arrow" aria-hidden="true"></span>'+
|
|
151
|
+
'<div class="popover__body">'+ (opts.html || '') + '</div>';
|
|
152
|
+
|
|
153
|
+
positionArrow(box, trigger);
|
|
154
|
+
anchor.appendChild(box);
|
|
155
|
+
|
|
156
|
+
var fr = flFocusReturn({ fallback: trigger });
|
|
157
|
+
|
|
158
|
+
function open() {
|
|
159
|
+
if (current && current !== api) current.close();
|
|
160
|
+
fr.save();
|
|
161
|
+
box.setAttribute('data-open', 'true');
|
|
162
|
+
|
|
163
|
+
box.removeAttribute('inert');
|
|
164
|
+
|
|
165
|
+
var f = focusableIn(box);
|
|
166
|
+
if (f.length) f[0].focus();
|
|
167
|
+
else box.setAttribute('tabindex', '-1'), box.focus();
|
|
168
|
+
|
|
169
|
+
current = api;
|
|
170
|
+
|
|
171
|
+
flEmit(anchor, 'fl-open', null);
|
|
172
|
+
if (opts.onOpen) opts.onOpen();
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
function close() {
|
|
176
|
+
if (box.getAttribute('data-open') !== 'true') return;
|
|
177
|
+
box.setAttribute('data-open', 'false');
|
|
178
|
+
|
|
179
|
+
box.setAttribute('inert', '');
|
|
180
|
+
|
|
181
|
+
fr.restore();
|
|
182
|
+
if (current === api) current = null;
|
|
183
|
+
flEmit(anchor, 'fl-close', null);
|
|
184
|
+
if (opts.onClose) opts.onClose();
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
function toggle() {
|
|
188
|
+
if (box.getAttribute('data-open') === 'true') close();
|
|
189
|
+
else open();
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
trigger.setAttribute('aria-haspopup', 'dialog');
|
|
193
|
+
trigger.setAttribute('aria-expanded', 'false');
|
|
194
|
+
trigger.addEventListener('click', function (e) {
|
|
195
|
+
|
|
196
|
+
e.stopPropagation();
|
|
197
|
+
toggle();
|
|
198
|
+
});
|
|
199
|
+
|
|
200
|
+
var dismiss = flDismissable({
|
|
201
|
+
escOn: [trigger, box],
|
|
202
|
+
inside: [box, anchor],
|
|
203
|
+
when: function () { return box.getAttribute('data-open') === 'true'; },
|
|
204
|
+
onDismiss: function (e, reason) { close(); },
|
|
205
|
+
});
|
|
206
|
+
|
|
207
|
+
box.addEventListener('transitionend', function () {
|
|
208
|
+
if (box.getAttribute('data-open') === 'false') {
|
|
209
|
+
box.setAttribute('aria-hidden', 'true');
|
|
210
|
+
} else {
|
|
211
|
+
box.removeAttribute('aria-hidden');
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
|
|
215
|
+
var api = {
|
|
216
|
+
open: open,
|
|
217
|
+
close: close,
|
|
218
|
+
toggle: toggle,
|
|
219
|
+
destroy: function () {
|
|
220
|
+
dismiss.destroy();
|
|
221
|
+
close();
|
|
222
|
+
box.remove();
|
|
223
|
+
anchor.remove();
|
|
224
|
+
},
|
|
225
|
+
el: box,
|
|
226
|
+
};
|
|
227
|
+
return api;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
function positionArrow(box, trigger) {
|
|
231
|
+
var arrow = box.querySelector('.popover__arrow');
|
|
232
|
+
if (!arrow) return;
|
|
233
|
+
var place = (box.className.match(/popover--(\w+)/) || [])[1];
|
|
234
|
+
if (place === 'start' || place === 'end') {
|
|
235
|
+
|
|
236
|
+
arrow.style.top = '50%';
|
|
237
|
+
arrow.style.marginTop = '';
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
var br = trigger.getBoundingClientRect();
|
|
241
|
+
var ar = box.getBoundingClientRect();
|
|
242
|
+
var offset = br.left + br.width / 2 - (ar.left + parseFloat(getComputedStyle(box).paddingLeft || 0));
|
|
243
|
+
|
|
244
|
+
var max = ar.width - 24;
|
|
245
|
+
arrow.style.marginLeft = Math.max(12, Math.min(offset, max)) + 'px';
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
var Popover = {
|
|
249
|
+
attach: function (trigger, opts) {
|
|
250
|
+
return attach(trigger, opts);
|
|
251
|
+
},
|
|
252
|
+
closeAll: function () { if (current) current.close(); },
|
|
253
|
+
get current() { return current; },
|
|
254
|
+
};
|
|
255
|
+
|
|
256
|
+
global.Popover = Popover;
|
|
257
|
+
})(window);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.progress {display:block;width:100%;height:var(--progress-h);background:var(--surface-sunken);border-radius:var(--r-full);overflow:hidden;}.progress__bar {display:block;height:100%;width:var(--progress, 0%);background:var(--accent);border-radius:inherit;transition:width var(--progress-dur) var(--ease-out);}.progress--success .progress__bar {background:var(--success);}.progress--warning .progress__bar {background:var(--warning);}.progress--danger .progress__bar {background:var(--danger);}.progress--lg {--progress-h:10px;}.progress--sm {--progress-h:4px;}.progress-ring {display:inline-grid;place-items:center;position:relative;width:var(--ring-size);height:var(--ring-size);border-radius:50%;background:conic-gradient( var(--accent) calc(var(--progress-num, 0) * 1%), var(--surface-sunken) 0 );}.progress-ring__label {display:grid;place-items:center;width:calc(100% - var(--ring-thickness) * 2);height:calc(100% - var(--ring-thickness) * 2);border-radius:50%;background:var(--surface);font-size:var(--fs-sm);color:var(--text-primary);font-variant-numeric:tabular-nums;}.progress-ring--success {background:conic-gradient(var(--success) calc(var(--progress-num, 0) * 1%), var(--surface-sunken) 0);}.progress-ring--danger {background:conic-gradient(var(--danger) calc(var(--progress-num, 0) * 1%), var(--surface-sunken) 0);}.progress--indeterminate .progress__bar {width:35%;animation:progress-slide 1.1s var(--ease-out) infinite;}@keyframes progress-slide {0% {transform:translateX(-100%);}100% {transform:translateX(340%);}}.progress-steps {display:flex;gap:var(--sp-1);}.progress-steps__seg {flex:1;height:var(--progress-h, 4px);background:var(--surface-sunken);border-radius:var(--r-full);}.progress-steps__seg--done {background:var(--accent);}.progress-steps__seg--current {background:var(--accent);opacity:0.55;}.progress[aria-busy='true'] {cursor:progress;}@media (prefers-reduced-motion:reduce) {.progress__bar {transition:none;}.progress--indeterminate .progress__bar {animation:none;transform:none;width:25%;background:var(--accent);}.progress--indeterminate .progress__bar::after {content:none;}.progress--indeterminate.progress--success .progress__bar {background:var(--success);}.progress--indeterminate.progress--warning .progress__bar {background:var(--warning);}.progress--indeterminate.progress--danger .progress__bar {background:var(--danger);}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.select {position:relative;display:inline-block;min-width:12rem;}.select--block {display:block;min-width:0;}.select--block .select__btn {width:100%;}.select__btn {display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:44px;padding:0 var(--sp-3);background:var(--surface);color:var(--text-primary);border:1px solid var(--border-control);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);text-align:start;cursor:pointer;}.select__btn:focus-visible {outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);}.select__btn[aria-expanded="true"] {border-color:var(--accent);}.select__btn[disabled] {background:var(--surface-sunken);color:var(--text-tertiary);cursor:not-allowed;}.select__value {flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select__value--placeholder {color:var(--text-tertiary);}.select__caret {flex:0 0 auto;width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px;transition:transform 140ms var(--ease-out, ease);}.select__btn[aria-expanded="true"] .select__caret {transform:rotate(180deg);margin-top:-3px;}.select__list {position:absolute;top:calc(100% + var(--sp-1));inset-inline-start:0;inset-inline-end:0;z-index:var(--z-raised);max-height:15rem;overflow-y:auto;margin:0;padding:var(--sp-1);list-style:none;background:var(--surface-raised);border:1px solid var(--border-decor);border-radius:var(--r-sm);box-shadow:var(--shadow-2);}.select__list[hidden] {display:none;}.select__opt {display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-xs);color:var(--text-primary);font-size:var(--fs-sm);cursor:pointer;}.select__opt[data-state="active"] {background:var(--accent-soft);}.select__opt[aria-selected="true"] {font-weight:600;}@media (hover:hover) and (pointer:fine) {.select__opt:hover {background:var(--surface-sunken);}}.select__opt[aria-disabled="true"] {color:var(--text-tertiary);background:var(--surface-sunken);cursor:not-allowed;}.select__check {flex:0 0 auto;width:1em;font-weight:700;color:var(--accent);}.select__opt-text {flex:1 1 auto;}@media (max-width:30rem) {.select--end .select__list {inset-inline-start:auto;inset-inline-end:0;min-width:12rem;}}@media (prefers-reduced-motion:reduce) {.select__caret {transition:none;}}
|