HEL-373: 主题化 combobox 覆盖夜间下拉全状态，日期面板支持年月直选
原生 select 弹层无法可靠套黑金 token，改为可访问 listbox；日期标题增加年份/月份下拉，越月不提交非法日。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
1061f125a8
commit
f49a7a3963
@@ -31,7 +31,7 @@ class TransfersPageSourceContractTests(unittest.TestCase):
|
||||
self.assertIn('id="transferEvidenceDrawer"', html)
|
||||
self.assertIn("期间净变动", html)
|
||||
self.assertNotIn("本公司往来合计", html)
|
||||
self.assertIn("design-system.css?v=13", html)
|
||||
self.assertIn("design-system.css?v=14", html)
|
||||
self.assertIn("app.js?v=18", html)
|
||||
# 侧栏顺序：流水管理 → 转账往来 → 往来确认
|
||||
flows = html.index('data-view="flows"')
|
||||
|
||||
@@ -75,7 +75,8 @@ class Hel351SourceContractTests(unittest.TestCase):
|
||||
self.assertIn('id="credentialDialog"', html)
|
||||
self.assertIn('id="cred-pass"', html)
|
||||
self.assertIn('id="cred-copy-pass"', html)
|
||||
self.assertIn("datepicker.js?v=1", html)
|
||||
self.assertIn("select.js?v=1", html)
|
||||
self.assertIn("datepicker.js?v=2", html)
|
||||
self.assertNotIn("初始密码由管理员统一发放", html)
|
||||
js = (WEB / "app.js").read_text(encoding="utf-8")
|
||||
self.assertIn("function showOnceCredentials(", js)
|
||||
@@ -135,15 +136,18 @@ class Hel351BrowserProbeTests(unittest.TestCase):
|
||||
<button>重开审批</button>
|
||||
</div>
|
||||
<select class="select" id="probe-select">
|
||||
<option value="">请选择公司</option>
|
||||
<option>河南金牛农业科技发展有限公司</option>
|
||||
<option>河南金牛煤业有限公司</option>
|
||||
<option disabled>停用账户（不可选）</option>
|
||||
</select>
|
||||
<input class="input" id="probe-date" type="date" value="2026-09-01" />
|
||||
<script src="{self.base}/select.js"></script>
|
||||
<script src="{self.base}/datepicker.js"></script>
|
||||
</body></html>""",
|
||||
wait_until="domcontentloaded",
|
||||
)
|
||||
page.wait_for_function("() => window.JinniuDatePicker")
|
||||
page.wait_for_function("() => window.JinniuDatePicker && window.JinniuSelect")
|
||||
if zoom != 1:
|
||||
page.evaluate(f"() => {{ document.body.style.zoom = '{zoom}'; }}")
|
||||
|
||||
@@ -152,25 +156,44 @@ class Hel351BrowserProbeTests(unittest.TestCase):
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
page = browser.new_page(viewport={"width": 1440, "height": 900})
|
||||
self._open(page, night=True)
|
||||
page.locator("#probe-select").locator("xpath=ancestor::div[contains(@class,'ds-combo')]").locator(".ds-combo-trigger").click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
colors = page.evaluate(
|
||||
"""() => {
|
||||
const sel = document.getElementById('probe-select');
|
||||
const cs = getComputedStyle(sel);
|
||||
const opt = getComputedStyle(sel.options[0]);
|
||||
const trigger = document.querySelector('#probe-select').closest('.ds-combo').querySelector('.ds-combo-trigger');
|
||||
const box = document.getElementById('ds-listbox');
|
||||
const placeholder = box.querySelector('.is-placeholder');
|
||||
const plain = [...box.querySelectorAll('.ds-listbox-option')].find((el) => !el.classList.contains('is-placeholder') && !el.classList.contains('is-disabled') && !el.classList.contains('is-selected'));
|
||||
const disabled = box.querySelector('.is-disabled');
|
||||
const tcs = getComputedStyle(trigger);
|
||||
const bcs = getComputedStyle(box);
|
||||
const pcs = placeholder && getComputedStyle(placeholder);
|
||||
const ncs = plain && getComputedStyle(plain);
|
||||
const dcs = disabled && getComputedStyle(disabled);
|
||||
return {
|
||||
scheme: getComputedStyle(document.documentElement).colorScheme,
|
||||
bg: cs.backgroundColor,
|
||||
color: cs.color,
|
||||
optionBg: opt.backgroundColor,
|
||||
optionColor: opt.color,
|
||||
triggerBg: tcs.backgroundColor,
|
||||
triggerColor: tcs.color,
|
||||
boxBg: bcs.backgroundColor,
|
||||
boxColor: bcs.color,
|
||||
placeholderColor: pcs && pcs.color,
|
||||
placeholderBg: pcs && pcs.backgroundColor,
|
||||
plainColor: ncs && ncs.color,
|
||||
plainBg: ncs && ncs.backgroundColor,
|
||||
disabledColor: dcs && dcs.color,
|
||||
};
|
||||
}"""
|
||||
)
|
||||
browser.close()
|
||||
self.assertEqual("dark", colors["scheme"])
|
||||
self.assertNotEqual("rgb(255, 255, 255)", colors["bg"])
|
||||
self.assertNotEqual("rgb(255, 255, 255)", colors["color"])
|
||||
self.assertNotEqual("rgb(255, 255, 255)", colors["optionBg"])
|
||||
white = "rgb(255, 255, 255)"
|
||||
self.assertNotEqual(white, colors["triggerBg"])
|
||||
self.assertNotEqual(white, colors["triggerColor"])
|
||||
self.assertNotEqual(white, colors["boxBg"])
|
||||
self.assertNotEqual(white, colors["boxColor"])
|
||||
self.assertNotEqual(white, colors["placeholderBg"])
|
||||
self.assertNotEqual(white, colors["placeholderColor"])
|
||||
self.assertNotEqual(white, colors["plainBg"])
|
||||
self.assertNotEqual(white, colors["plainColor"])
|
||||
self.assertNotEqual(white, colors["disabledColor"])
|
||||
|
||||
def test_tabs_have_no_vertical_scrollbar_at_zoom(self) -> None:
|
||||
with sync_playwright() as p:
|
||||
|
||||
@@ -0,0 +1,425 @@
|
||||
"""HEL-373: 黑金下拉全状态 + 日期年月直选。"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import os
|
||||
import threading
|
||||
import unittest
|
||||
from functools import partial
|
||||
from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
|
||||
from pathlib import Path
|
||||
|
||||
ROOT = Path(__file__).resolve().parents[1]
|
||||
WEB = ROOT / "web"
|
||||
SHOT_DIR = ROOT.parent / "hel373-shots"
|
||||
|
||||
try:
|
||||
from playwright.sync_api import sync_playwright
|
||||
except ImportError: # pragma: no cover
|
||||
sync_playwright = None
|
||||
|
||||
|
||||
def _prepare_chrome_libs() -> Path | None:
|
||||
candidates = [ROOT / ".chrome-libs" / "lib"]
|
||||
for lib_dir in candidates:
|
||||
if (lib_dir / "libatk-1.0.so.0").exists():
|
||||
current = os.environ.get("LD_LIBRARY_PATH", "")
|
||||
prefix = str(lib_dir)
|
||||
if prefix not in current.split(":"):
|
||||
os.environ["LD_LIBRARY_PATH"] = (
|
||||
f"{prefix}:{current}" if current else prefix
|
||||
)
|
||||
return lib_dir
|
||||
return None
|
||||
|
||||
|
||||
def _chromium_available() -> bool:
|
||||
if not sync_playwright:
|
||||
return False
|
||||
_prepare_chrome_libs()
|
||||
try:
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
browser.close()
|
||||
return True
|
||||
except Exception:
|
||||
return False
|
||||
|
||||
|
||||
PROBE_HTML = """<!doctype html>
|
||||
<html lang="zh-CN" class="v-fusion" {theme_attr}>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<link rel="stylesheet" href="{base}/design-system.css"/>
|
||||
</head>
|
||||
<body class="is-app" {theme_attr} style="padding:24px">
|
||||
<div class="filters" style="max-width:720px">
|
||||
<div class="field" style="flex:1 1 220px">
|
||||
<label for="probe-empty">对方公司</label>
|
||||
<select class="select" id="probe-empty">
|
||||
<option value="">请选择集团内公司</option>
|
||||
<option value="a">河南金牛农业科技发展有限公司</option>
|
||||
<option value="b">河南金牛煤业有限公司</option>
|
||||
<option value="c" disabled>停用账户</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field" style="flex:1 1 220px">
|
||||
<label for="probe-filled">本方公司</label>
|
||||
<select class="select" id="probe-filled">
|
||||
<option value="a">河南金牛农业科技发展有限公司</option>
|
||||
<option value="b" selected>河南金牛煤业有限公司</option>
|
||||
<option value="c">河南金牛物流有限公司</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" style="max-width:220px;margin-top:16px">
|
||||
<label for="probe-date">起算日</label>
|
||||
<input class="input" id="probe-date" type="date" value="2026-01-31" min="2020-03-15" max="2028-11-30" />
|
||||
</div>
|
||||
<div class="field" style="max-width:220px;margin-top:16px">
|
||||
<label for="probe-free-date">无上下限日期</label>
|
||||
<input class="input" id="probe-free-date" type="date" value="2026-09-01" />
|
||||
</div>
|
||||
<script src="{base}/select.js"></script>
|
||||
<script src="{base}/datepicker.js"></script>
|
||||
</body></html>
|
||||
"""
|
||||
|
||||
|
||||
class Hel373SourceContractTests(unittest.TestCase):
|
||||
def test_custom_listbox_and_year_month_exist(self) -> None:
|
||||
css = (WEB / "design-system.css").read_text(encoding="utf-8")
|
||||
js_select = (WEB / "select.js").read_text(encoding="utf-8")
|
||||
js_date = (WEB / "datepicker.js").read_text(encoding="utf-8")
|
||||
admin = (WEB / "admin.html").read_text(encoding="utf-8")
|
||||
company = (WEB / "company.html").read_text(encoding="utf-8")
|
||||
self.assertIn("select.select", js_select)
|
||||
self.assertIn('setAttribute("role", "combobox")', js_select)
|
||||
self.assertIn('setAttribute("role", "listbox")', js_select)
|
||||
self.assertIn("JinniuSelect", js_select)
|
||||
self.assertIn("data-dp-year", js_date)
|
||||
self.assertIn("data-dp-month", js_date)
|
||||
self.assertIn("YEAR_PAD", js_date)
|
||||
self.assertIn(".ds-listbox", css)
|
||||
self.assertIn(".ds-combo-trigger", css)
|
||||
self.assertIn(".ds-listbox-option.is-placeholder", css)
|
||||
self.assertIn("html[data-theme=\"night\"] .ds-listbox", css)
|
||||
self.assertIn("var(--gold-line)", css[css.index("html[data-theme=\"night\"] .ds-listbox") :])
|
||||
self.assertIn("html[data-theme=\"night\"] .ds-listbox-option.is-selected", css)
|
||||
self.assertIn("select.js?v=1", admin)
|
||||
self.assertIn("select.js?v=1", company)
|
||||
self.assertIn("datepicker.js?v=2", admin)
|
||||
self.assertIn("datepicker.js?v=2", company)
|
||||
self.assertIn("design-system.css?v=14", admin)
|
||||
self.assertIn("design-system.css?v=14", company)
|
||||
|
||||
def test_listbox_uses_tokens_not_hardcoded_night_hex(self) -> None:
|
||||
css = (WEB / "design-system.css").read_text(encoding="utf-8")
|
||||
start = css.index("/* ─── 主题化 combobox")
|
||||
end = css.index("@media (prefers-reduced-motion: reduce)", start)
|
||||
block = css[start:end]
|
||||
self.assertNotIn("#fff", block)
|
||||
self.assertNotIn("#ffffff", block.lower())
|
||||
self.assertNotIn("#000", block)
|
||||
self.assertIn("var(--surface)", block)
|
||||
self.assertIn("var(--text)", block)
|
||||
self.assertIn("var(--gold)", block)
|
||||
self.assertIn("var(--fill)", block)
|
||||
|
||||
|
||||
@unittest.skipUnless(sync_playwright, "playwright 未安装，跳过浏览器探针")
|
||||
@unittest.skipUnless(_chromium_available(), "chromium 无法启动，跳过浏览器探针")
|
||||
class Hel373BrowserProbeTests(unittest.TestCase):
|
||||
@classmethod
|
||||
def setUpClass(cls) -> None:
|
||||
handler = partial(SimpleHTTPRequestHandler, directory=str(WEB))
|
||||
cls.httpd = ThreadingHTTPServer(("127.0.0.1", 0), handler)
|
||||
cls.port = cls.httpd.server_address[1]
|
||||
cls.thread = threading.Thread(target=cls.httpd.serve_forever, daemon=True)
|
||||
cls.thread.start()
|
||||
cls.base = f"http://127.0.0.1:{cls.port}"
|
||||
|
||||
@classmethod
|
||||
def tearDownClass(cls) -> None:
|
||||
cls.httpd.shutdown()
|
||||
cls.httpd.server_close()
|
||||
|
||||
def _open(self, page, *, night: bool, width: int = 1440, height: int = 900) -> None:
|
||||
page.set_viewport_size({"width": width, "height": height})
|
||||
theme_attr = 'data-theme="night"' if night else 'data-theme="day"'
|
||||
page.set_content(
|
||||
PROBE_HTML.format(theme_attr=theme_attr, base=self.base),
|
||||
wait_until="domcontentloaded",
|
||||
)
|
||||
page.wait_for_function("() => window.JinniuDatePicker && window.JinniuSelect")
|
||||
page.wait_for_selector("#probe-empty + .ds-combo-trigger, .ds-combo #probe-empty")
|
||||
page.wait_for_function(
|
||||
"() => document.querySelectorAll('.ds-combo-trigger').length >= 2"
|
||||
)
|
||||
|
||||
def _trigger(self, page, select_id: str):
|
||||
return page.locator(f"#{select_id}").locator(
|
||||
"xpath=ancestor::div[contains(@class,'ds-combo')]"
|
||||
).locator(".ds-combo-trigger")
|
||||
|
||||
def test_night_placeholder_unselected_selected_disabled(self) -> None:
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
page = browser.new_page(viewport={"width": 1440, "height": 900})
|
||||
self._open(page, night=True)
|
||||
empty_btn = self._trigger(page, "probe-empty")
|
||||
self.assertTrue(empty_btn.evaluate("el => el.classList.contains('is-placeholder')"))
|
||||
empty_btn.click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
snapshot = page.evaluate(
|
||||
"""() => {
|
||||
const box = document.getElementById('ds-listbox');
|
||||
const opts = [...box.querySelectorAll('.ds-listbox-option')].map((el) => {
|
||||
const cs = getComputedStyle(el);
|
||||
return {
|
||||
text: el.textContent,
|
||||
color: cs.color,
|
||||
bg: cs.backgroundColor,
|
||||
selected: el.classList.contains('is-selected'),
|
||||
placeholder: el.classList.contains('is-placeholder'),
|
||||
disabled: el.classList.contains('is-disabled'),
|
||||
};
|
||||
});
|
||||
const bcs = getComputedStyle(box);
|
||||
const tcs = getComputedStyle(document.querySelector('#probe-empty').closest('.ds-combo').querySelector('.ds-combo-trigger'));
|
||||
return {
|
||||
boxBg: bcs.backgroundColor,
|
||||
boxColor: bcs.color,
|
||||
boxBorder: bcs.borderTopColor,
|
||||
triggerBg: tcs.backgroundColor,
|
||||
triggerColor: tcs.color,
|
||||
opts,
|
||||
};
|
||||
}"""
|
||||
)
|
||||
page.keyboard.press("Escape")
|
||||
filled = self._trigger(page, "probe-filled")
|
||||
filled.click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
selected = page.evaluate(
|
||||
"""() => {
|
||||
const el = document.querySelector('#ds-listbox .is-selected');
|
||||
const cs = getComputedStyle(el);
|
||||
return { color: cs.color, bg: cs.backgroundColor, text: el.textContent };
|
||||
}"""
|
||||
)
|
||||
native = page.evaluate("() => document.getElementById('probe-filled').value")
|
||||
browser.close()
|
||||
white = "rgb(255, 255, 255)"
|
||||
self.assertNotEqual(white, snapshot["boxBg"])
|
||||
self.assertNotEqual(white, snapshot["boxColor"])
|
||||
self.assertNotEqual(white, snapshot["triggerBg"])
|
||||
self.assertNotEqual(white, snapshot["triggerColor"])
|
||||
placeholder = next(o for o in snapshot["opts"] if o["placeholder"])
|
||||
plain = next(o for o in snapshot["opts"] if not o["placeholder"] and not o["disabled"] and not o["selected"])
|
||||
disabled = next(o for o in snapshot["opts"] if o["disabled"])
|
||||
self.assertNotEqual(white, placeholder["color"])
|
||||
self.assertNotEqual(white, placeholder["bg"])
|
||||
self.assertNotEqual(white, plain["color"])
|
||||
self.assertNotEqual(white, plain["bg"])
|
||||
self.assertNotEqual(white, disabled["color"])
|
||||
self.assertIn("217", selected["color"])
|
||||
self.assertEqual("河南金牛煤业有限公司", selected["text"])
|
||||
self.assertEqual("b", native)
|
||||
|
||||
def test_keyboard_and_form_value(self) -> None:
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
page = browser.new_page(viewport={"width": 1440, "height": 900})
|
||||
self._open(page, night=True)
|
||||
btn = self._trigger(page, "probe-empty")
|
||||
btn.focus()
|
||||
page.keyboard.press("ArrowDown")
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
page.keyboard.press("ArrowDown")
|
||||
page.keyboard.press("Enter")
|
||||
value = page.evaluate("() => document.getElementById('probe-empty').value")
|
||||
label = btn.inner_text()
|
||||
btn.focus()
|
||||
page.keyboard.press("Enter")
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
page.keyboard.press("Escape")
|
||||
hidden = page.evaluate("() => document.getElementById('ds-listbox').hidden")
|
||||
browser.close()
|
||||
self.assertEqual("a", value)
|
||||
self.assertIn("农业", label)
|
||||
self.assertTrue(hidden)
|
||||
|
||||
def test_year_month_jump_keeps_selected_and_skips_invalid_day(self) -> None:
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
page = browser.new_page(viewport={"width": 1440, "height": 900})
|
||||
self._open(page, night=True)
|
||||
page.click("#probe-date")
|
||||
page.wait_for_selector("#ds-datepicker:not([hidden])")
|
||||
before = page.evaluate("() => document.getElementById('probe-date').value")
|
||||
year_btn = page.locator("#ds-datepicker [data-dp-year]").locator(
|
||||
"xpath=ancestor::div[contains(@class,'ds-combo')]"
|
||||
).locator(".ds-combo-trigger")
|
||||
year_btn.click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
page.locator("#ds-listbox .ds-listbox-option", has_text="2024年").click()
|
||||
page.wait_for_function(
|
||||
"() => document.querySelector('[data-dp-year]').value === '2024'"
|
||||
)
|
||||
month_btn = page.locator("#ds-datepicker [data-dp-month]").locator(
|
||||
"xpath=ancestor::div[contains(@class,'ds-combo')]"
|
||||
).locator(".ds-combo-trigger")
|
||||
month_btn.click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
page.locator("#ds-listbox .ds-listbox-option", has_text="02月").click()
|
||||
after = page.evaluate(
|
||||
"""() => {
|
||||
const input = document.getElementById('probe-date');
|
||||
const panel = document.getElementById('ds-datepicker');
|
||||
const selected = panel.querySelector('.ds-dp-day.is-selected');
|
||||
const days = [...panel.querySelectorAll('.ds-dp-day:not(.is-other)')].map((el) => el.textContent);
|
||||
const year = document.querySelector('[data-dp-year]').value;
|
||||
const month = document.querySelector('[data-dp-month]').value;
|
||||
return {
|
||||
value: input.value,
|
||||
selected: selected && selected.getAttribute('data-iso'),
|
||||
has31: days.includes('31'),
|
||||
year,
|
||||
month,
|
||||
titleYear: document.querySelector('#ds-datepicker .ds-combo-trigger').textContent,
|
||||
};
|
||||
}"""
|
||||
)
|
||||
browser.close()
|
||||
self.assertEqual("2026-01-31", before)
|
||||
self.assertEqual("2026-01-31", after["value"])
|
||||
self.assertIsNone(after["selected"])
|
||||
self.assertFalse(after["has31"])
|
||||
self.assertEqual("2024", after["year"])
|
||||
self.assertEqual("1", after["month"])
|
||||
|
||||
def test_leap_year_feb29_and_minmax_year_range(self) -> None:
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
page = browser.new_page(viewport={"width": 1440, "height": 900})
|
||||
self._open(page, night=False)
|
||||
page.click("#probe-date")
|
||||
page.wait_for_selector("#ds-datepicker:not([hidden])")
|
||||
page.locator("#ds-datepicker [data-dp-year]").locator(
|
||||
"xpath=ancestor::div[contains(@class,'ds-combo')]"
|
||||
).locator(".ds-combo-trigger").click()
|
||||
years = page.evaluate(
|
||||
"""() => [...document.querySelectorAll('#ds-listbox .ds-listbox-option')].map((el) => el.textContent)"""
|
||||
)
|
||||
page.locator("#ds-listbox .ds-listbox-option", has_text="2024年").click()
|
||||
page.locator("#ds-datepicker [data-dp-month]").locator(
|
||||
"xpath=ancestor::div[contains(@class,'ds-combo')]"
|
||||
).locator(".ds-combo-trigger").click()
|
||||
page.locator("#ds-listbox .ds-listbox-option", has_text="02月").click()
|
||||
days = page.evaluate(
|
||||
"""() => [...document.querySelectorAll('#ds-datepicker .ds-dp-day:not(.is-other)')].map((el) => el.textContent)"""
|
||||
)
|
||||
page.click('#ds-datepicker [data-iso="2024-02-29"]')
|
||||
value = page.evaluate("() => document.getElementById('probe-date').value")
|
||||
page.click("#probe-free-date")
|
||||
page.wait_for_selector("#ds-datepicker:not([hidden])")
|
||||
page.locator("#ds-datepicker [data-dp-year]").locator(
|
||||
"xpath=ancestor::div[contains(@class,'ds-combo')]"
|
||||
).locator(".ds-combo-trigger").click()
|
||||
free_years = page.evaluate(
|
||||
"""() => [...document.querySelectorAll('#ds-listbox .ds-listbox-option')].map((el) => el.textContent)"""
|
||||
)
|
||||
browser.close()
|
||||
from datetime import date
|
||||
year = date.today().year
|
||||
self.assertIn("2020年", years)
|
||||
self.assertIn("2028年", years)
|
||||
self.assertNotIn("2019年", years)
|
||||
self.assertIn("29", days)
|
||||
self.assertEqual("2024-02-29", value)
|
||||
self.assertIn(f"{year - 80}年", free_years)
|
||||
self.assertIn(f"{year + 20}年", free_years)
|
||||
|
||||
def test_prev_next_month_still_works(self) -> None:
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
page = browser.new_page(viewport={"width": 1440, "height": 900})
|
||||
self._open(page, night=True)
|
||||
page.click("#probe-date")
|
||||
page.wait_for_selector("#ds-datepicker:not([hidden])")
|
||||
page.click('#ds-datepicker [data-dp-nav="1"]')
|
||||
state = page.evaluate(
|
||||
"""() => ({
|
||||
month: document.querySelector('[data-dp-month]').value,
|
||||
year: document.querySelector('[data-dp-year]').value,
|
||||
value: document.getElementById('probe-date').value,
|
||||
})"""
|
||||
)
|
||||
browser.close()
|
||||
self.assertEqual("1", state["month"])
|
||||
self.assertEqual("2026", state["year"])
|
||||
self.assertEqual("2026-01-31", state["value"])
|
||||
|
||||
def test_day_theme_trigger_stays_light(self) -> None:
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
page = browser.new_page(viewport={"width": 1440, "height": 900})
|
||||
self._open(page, night=False)
|
||||
colors = page.evaluate(
|
||||
"""() => {
|
||||
const btn = document.querySelector('#probe-filled').closest('.ds-combo').querySelector('.ds-combo-trigger');
|
||||
const cs = getComputedStyle(btn);
|
||||
return { bg: cs.backgroundColor, color: cs.color };
|
||||
}"""
|
||||
)
|
||||
browser.close()
|
||||
self.assertNotEqual("rgb(16, 15, 13)", colors["bg"])
|
||||
|
||||
def test_viewports_and_shots(self) -> None:
|
||||
SHOT_DIR.mkdir(parents=True, exist_ok=True)
|
||||
viewports = [360, 390, 820, 1440]
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
|
||||
for width in viewports:
|
||||
for night in (False, True):
|
||||
page = browser.new_page(viewport={"width": width, "height": 800})
|
||||
self._open(page, night=night, width=width, height=800)
|
||||
theme = "night" if night else "day"
|
||||
self._trigger(page, "probe-empty").click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
page.screenshot(
|
||||
path=str(SHOT_DIR / f"select-empty-{theme}-{width}.png"),
|
||||
full_page=True,
|
||||
)
|
||||
page.keyboard.press("Escape")
|
||||
self._trigger(page, "probe-filled").click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
page.screenshot(
|
||||
path=str(SHOT_DIR / f"select-filled-{theme}-{width}.png"),
|
||||
full_page=True,
|
||||
)
|
||||
page.keyboard.press("Escape")
|
||||
page.click("#probe-date")
|
||||
page.wait_for_selector("#ds-datepicker:not([hidden])")
|
||||
page.screenshot(
|
||||
path=str(SHOT_DIR / f"datepicker-{theme}-{width}.png"),
|
||||
full_page=True,
|
||||
)
|
||||
page.locator("#ds-datepicker [data-dp-year]").locator(
|
||||
"xpath=ancestor::div[contains(@class,'ds-combo')]"
|
||||
).locator(".ds-combo-trigger").click()
|
||||
page.wait_for_selector("#ds-listbox:not([hidden])")
|
||||
page.screenshot(
|
||||
path=str(SHOT_DIR / f"datepicker-year-{theme}-{width}.png"),
|
||||
full_page=True,
|
||||
)
|
||||
page.close()
|
||||
browser.close()
|
||||
self.assertTrue((SHOT_DIR / "select-empty-night-1440.png").exists())
|
||||
self.assertTrue((SHOT_DIR / "datepicker-year-night-360.png").exists())
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
@@ -37,7 +37,7 @@ class RemindersPageSourceContractTests(unittest.TestCase):
|
||||
self.assertIn('id="reminder-tbody"', html)
|
||||
self.assertIn('id="reminder-tabs"', html)
|
||||
self.assertIn('id="reminder-detail-drawer"', html)
|
||||
self.assertIn("design-system.css?v=13", html)
|
||||
self.assertIn("design-system.css?v=14", html)
|
||||
self.assertIn("app.js?v=18", html)
|
||||
pending = html.index('id="pending-reminders-card"')
|
||||
history = html.index('id="reminder-history-card"')
|
||||
@@ -73,7 +73,8 @@ class RemindersPageSourceContractTests(unittest.TestCase):
|
||||
self.assertIn(".pick", css)
|
||||
self.assertIn("minmax(0, 1.5fr)", css)
|
||||
block_start = css.index("提醒管理：三步发送流")
|
||||
block = css[block_start:]
|
||||
block_end = css.index("月结 / 重开 / 审计")
|
||||
block = css[block_start:block_end]
|
||||
self.assertIn("var(--border)", block)
|
||||
self.assertIn("var(--accent-soft)", block)
|
||||
self.assertIn("var(--accent)", block)
|
||||
|
||||
+3
-2
@@ -11,7 +11,7 @@
|
||||
document.documentElement.classList.add("v-fusion");
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="design-system.css?v=13" />
|
||||
<link rel="stylesheet" href="design-system.css?v=14" />
|
||||
</head>
|
||||
<body class="is-app" data-portal="admin">
|
||||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||||
@@ -1255,7 +1255,8 @@
|
||||
</div>
|
||||
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
|
||||
<script src="theme.js?v=1"></script>
|
||||
<script src="datepicker.js?v=1"></script>
|
||||
<script src="select.js?v=1"></script>
|
||||
<script src="datepicker.js?v=2"></script>
|
||||
<script src="app.js?v=18"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+3
-2
@@ -11,7 +11,7 @@
|
||||
document.documentElement.classList.add("v-fusion");
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="design-system.css?v=13" />
|
||||
<link rel="stylesheet" href="design-system.css?v=14" />
|
||||
</head>
|
||||
<body class="is-app" data-portal="company">
|
||||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||||
@@ -1044,7 +1044,8 @@
|
||||
|
||||
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
|
||||
<script src="theme.js?v=1"></script>
|
||||
<script src="datepicker.js?v=1"></script>
|
||||
<script src="select.js?v=1"></script>
|
||||
<script src="datepicker.js?v=2"></script>
|
||||
<script src="app.js?v=18"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+102
-3
@@ -4,10 +4,14 @@
|
||||
var panel = null;
|
||||
var grid = null;
|
||||
var titleEl = null;
|
||||
var yearSelect = null;
|
||||
var monthSelect = null;
|
||||
var activeInput = null;
|
||||
var viewYear = 0;
|
||||
var viewMonth = 0;
|
||||
var bound = false;
|
||||
var YEAR_PAD = 80;
|
||||
var YEAR_AHEAD = 20;
|
||||
|
||||
function pad(n) {
|
||||
return n < 10 ? "0" + n : String(n);
|
||||
@@ -46,7 +50,10 @@
|
||||
panel.innerHTML =
|
||||
'<div class="ds-dp-head">' +
|
||||
'<button type="button" class="ds-dp-nav" data-dp-nav="-1" aria-label="上一月">‹</button>' +
|
||||
'<div class="ds-dp-title"></div>' +
|
||||
'<div class="ds-dp-title">' +
|
||||
'<select class="select ds-dp-ym" data-dp-year aria-label="年份"></select>' +
|
||||
'<select class="select ds-dp-ym" data-dp-month aria-label="月份"></select>' +
|
||||
"</div>" +
|
||||
'<button type="button" class="ds-dp-nav" data-dp-nav="1" aria-label="下一月">›</button>' +
|
||||
"</div>" +
|
||||
'<div class="ds-dp-week">' + WEEK.map(function (d) { return "<span>" + d + "</span>"; }).join("") + "</div>" +
|
||||
@@ -57,11 +64,27 @@
|
||||
"</div>";
|
||||
document.body.appendChild(panel);
|
||||
titleEl = panel.querySelector(".ds-dp-title");
|
||||
yearSelect = panel.querySelector("[data-dp-year]");
|
||||
monthSelect = panel.querySelector("[data-dp-month]");
|
||||
grid = panel.querySelector(".ds-dp-grid");
|
||||
yearSelect.addEventListener("change", function () {
|
||||
var next = Number(yearSelect.value);
|
||||
if (!next) return;
|
||||
viewYear = next;
|
||||
render();
|
||||
});
|
||||
monthSelect.addEventListener("change", function () {
|
||||
var next = Number(monthSelect.value);
|
||||
if (Number.isNaN(next)) return;
|
||||
viewMonth = next;
|
||||
render();
|
||||
});
|
||||
panel.addEventListener("mousedown", function (event) {
|
||||
if (event.target.closest(".ds-combo, select, input, textarea")) return;
|
||||
event.preventDefault();
|
||||
});
|
||||
panel.addEventListener("click", function (event) {
|
||||
if (event.target.closest(".ds-combo, .ds-listbox, select")) return;
|
||||
var nav = event.target.closest("[data-dp-nav]");
|
||||
if (nav) {
|
||||
shiftMonth(Number(nav.getAttribute("data-dp-nav")));
|
||||
@@ -105,9 +128,75 @@
|
||||
document.querySelectorAll('input[type="date"]').forEach(enhance);
|
||||
}
|
||||
|
||||
function boundYears() {
|
||||
var now = new Date().getFullYear();
|
||||
var minY = now - YEAR_PAD;
|
||||
var maxY = now + YEAR_AHEAD;
|
||||
var hasMin = false;
|
||||
var hasMax = false;
|
||||
if (activeInput && activeInput.min) {
|
||||
var minDate = parseISO(activeInput.min);
|
||||
if (minDate) {
|
||||
minY = minDate.getFullYear();
|
||||
hasMin = true;
|
||||
}
|
||||
}
|
||||
if (activeInput && activeInput.max) {
|
||||
var maxDate = parseISO(activeInput.max);
|
||||
if (maxDate) {
|
||||
maxY = maxDate.getFullYear();
|
||||
hasMax = true;
|
||||
}
|
||||
}
|
||||
if (!hasMin && viewYear < minY) minY = viewYear;
|
||||
if (!hasMax && viewYear > maxY) maxY = viewYear;
|
||||
if (hasMin && viewYear < minY) minY = viewYear;
|
||||
if (hasMax && viewYear > maxY) maxY = viewYear;
|
||||
return { minY: minY, maxY: maxY };
|
||||
}
|
||||
|
||||
function lastDayOfMonth(year, month) {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
|
||||
function monthHasValidDay(year, month) {
|
||||
var min = activeInput && activeInput.min ? activeInput.min : "";
|
||||
var max = activeInput && activeInput.max ? activeInput.max : "";
|
||||
var start = toISO(year, month, 1);
|
||||
var end = toISO(year, month, lastDayOfMonth(year, month));
|
||||
if (min && end < min) return false;
|
||||
if (max && start > max) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function syncYearMonthSelects() {
|
||||
if (!yearSelect || !monthSelect) return;
|
||||
var years = boundYears();
|
||||
var yearHtml = "";
|
||||
for (var year = years.minY; year <= years.maxY; year += 1) {
|
||||
yearHtml += '<option value="' + year + '"' + (year === viewYear ? " selected" : "") + ">" + year + "年</option>";
|
||||
}
|
||||
yearSelect.innerHTML = yearHtml;
|
||||
yearSelect.value = String(viewYear);
|
||||
var monthHtml = "";
|
||||
for (var month = 0; month < 12; month += 1) {
|
||||
var disabled = !monthHasValidDay(viewYear, month);
|
||||
monthHtml +=
|
||||
'<option value="' + month + '"' +
|
||||
(month === viewMonth ? " selected" : "") +
|
||||
(disabled ? " disabled" : "") +
|
||||
">" + pad(month + 1) + "月</option>";
|
||||
}
|
||||
monthSelect.innerHTML = monthHtml;
|
||||
monthSelect.value = String(viewMonth);
|
||||
if (global.JinniuSelect && typeof global.JinniuSelect.scan === "function") {
|
||||
global.JinniuSelect.scan(panel);
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (!grid || !titleEl) return;
|
||||
titleEl.textContent = viewYear + "年" + pad(viewMonth + 1) + "月";
|
||||
syncYearMonthSelects();
|
||||
var first = new Date(viewYear, viewMonth, 1);
|
||||
var start = first.getDay();
|
||||
var selected = activeInput ? parseISO(activeInput.value) : null;
|
||||
@@ -186,6 +275,9 @@
|
||||
|
||||
function closePicker() {
|
||||
if (!panel || panel.hidden) return;
|
||||
if (global.JinniuSelect && typeof global.JinniuSelect.close === "function") {
|
||||
global.JinniuSelect.close();
|
||||
}
|
||||
panel.hidden = true;
|
||||
if (activeInput) activeInput.setAttribute("aria-expanded", "false");
|
||||
activeInput = null;
|
||||
@@ -221,7 +313,14 @@
|
||||
openPicker(input);
|
||||
return;
|
||||
}
|
||||
if (panel && !panel.hidden && !panel.contains(event.target)) closePicker();
|
||||
if (
|
||||
panel &&
|
||||
!panel.hidden &&
|
||||
!panel.contains(event.target) &&
|
||||
!(event.target.closest && event.target.closest(".ds-listbox"))
|
||||
) {
|
||||
closePicker();
|
||||
}
|
||||
}
|
||||
|
||||
function onKey(event) {
|
||||
|
||||
+174
-1
@@ -1793,11 +1793,23 @@ html[data-theme="night"] .ds-datepicker {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ds-dp-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
html[data-theme="night"] .ds-dp-title { color: var(--gold); }
|
||||
.ds-dp-ym {
|
||||
min-height: 26px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ds-dp-nav {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@@ -1875,6 +1887,167 @@ html[data-theme="night"] .ds-dp-day.is-selected {
|
||||
}
|
||||
.ds-dp-foot button:hover { background: var(--hover); color: var(--text); }
|
||||
|
||||
/* ─── 主题化 combobox（替代原生 select 弹层） ───────────────── */
|
||||
.ds-combo {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.field > .ds-combo {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
.ds-combo-native {
|
||||
grid-area: 1 / 1;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.ds-combo-trigger {
|
||||
grid-area: 1 / 1;
|
||||
position: relative;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 34px;
|
||||
margin: 0;
|
||||
padding: 7px 28px 7px 11px;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 9px;
|
||||
background: var(--fill);
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color-scheme: inherit;
|
||||
}
|
||||
.ds-combo-trigger::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -2px;
|
||||
border: 4px solid transparent;
|
||||
border-top-color: var(--text-3);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ds-combo-trigger.is-placeholder {
|
||||
color: var(--text-3);
|
||||
}
|
||||
.ds-combo.is-open .ds-combo-trigger {
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 3px var(--focus-glow);
|
||||
}
|
||||
.ds-combo-trigger:focus {
|
||||
outline: none;
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 3px var(--focus-glow);
|
||||
}
|
||||
.ds-combo-trigger:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ds-combo.is-disabled .ds-combo-trigger,
|
||||
.ds-combo-trigger:disabled {
|
||||
color: var(--text-3);
|
||||
background: var(--fill);
|
||||
opacity: 0.72;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ds-combo--compact .ds-combo-trigger {
|
||||
min-height: 26px;
|
||||
padding: 2px 22px 2px 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
html[data-theme="night"] .ds-combo.is-open .ds-combo-trigger,
|
||||
html[data-theme="night"] .ds-combo-trigger:focus {
|
||||
border-color: var(--gold-line);
|
||||
}
|
||||
html[data-theme="night"] .ds-combo.is-open .ds-combo-trigger::after,
|
||||
html[data-theme="night"] .ds-combo-trigger:focus::after {
|
||||
border-top-color: var(--gold);
|
||||
}
|
||||
|
||||
.ds-listbox {
|
||||
position: fixed;
|
||||
z-index: var(--z-tooltip);
|
||||
max-height: min(280px, 50vh);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 9px;
|
||||
box-shadow: var(--shadow-modal);
|
||||
}
|
||||
html[data-theme="night"] .ds-listbox {
|
||||
background: var(--surface);
|
||||
border-color: var(--gold-line);
|
||||
}
|
||||
.ds-listbox[hidden] { display: none !important; }
|
||||
.ds-listbox-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ds-listbox-option.is-placeholder {
|
||||
color: var(--text-3);
|
||||
}
|
||||
.ds-listbox-option:hover,
|
||||
.ds-listbox-option.is-active {
|
||||
background: var(--hover);
|
||||
}
|
||||
.ds-listbox-option.is-selected,
|
||||
.ds-listbox-option[aria-selected="true"] {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 650;
|
||||
}
|
||||
html[data-theme="night"] .ds-listbox-option.is-selected,
|
||||
html[data-theme="night"] .ds-listbox-option[aria-selected="true"] {
|
||||
background: var(--gold-soft);
|
||||
color: var(--gold);
|
||||
}
|
||||
html[data-theme="night"] .ds-listbox-option.is-active {
|
||||
box-shadow: inset 0 0 0 1px var(--gold-line);
|
||||
}
|
||||
.ds-listbox-option.is-disabled,
|
||||
.ds-listbox-option[aria-disabled="true"] {
|
||||
color: var(--text-3);
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ds-combo-trigger,
|
||||
.ds-listbox-option {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 一次性初始密码领取 ─────────────────────────────────────── */
|
||||
.cred-box {
|
||||
display: grid;
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
document.documentElement.classList.add("v-fusion");
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="design-system.css?v=13" />
|
||||
<link rel="stylesheet" href="design-system.css?v=14" />
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<div class="portal-wrap">
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
document.documentElement.classList.add("v-fusion");
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="design-system.css?v=13" />
|
||||
<link rel="stylesheet" href="design-system.css?v=14" />
|
||||
</head>
|
||||
<body class="login-page" data-role="admin">
|
||||
<div class="login-wrap">
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
document.documentElement.classList.add("v-fusion");
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="design-system.css?v=13" />
|
||||
<link rel="stylesheet" href="design-system.css?v=14" />
|
||||
</head>
|
||||
<body class="login-page" data-role="company">
|
||||
<div class="login-wrap">
|
||||
|
||||
+399
@@ -0,0 +1,399 @@
|
||||
/* 主题化 combobox：替代原生 select 弹层，日夜均走设计 token。保留原生字段提交。 */
|
||||
(function (global) {
|
||||
var listbox = null;
|
||||
var active = null;
|
||||
var activeIndex = -1;
|
||||
var bound = false;
|
||||
var patched = false;
|
||||
var opening = false;
|
||||
|
||||
function optionList(select) {
|
||||
return Array.prototype.slice.call(select.options);
|
||||
}
|
||||
|
||||
function selectedOption(select) {
|
||||
return select.options[select.selectedIndex] || null;
|
||||
}
|
||||
|
||||
function isPlaceholder(option) {
|
||||
if (!option) return true;
|
||||
return option.value === "" || option.hasAttribute("data-placeholder");
|
||||
}
|
||||
|
||||
function triggerLabel(select) {
|
||||
var option = selectedOption(select);
|
||||
if (!option) return "请选择";
|
||||
return option.textContent || "请选择";
|
||||
}
|
||||
|
||||
function ensureListbox() {
|
||||
if (listbox) return;
|
||||
listbox = document.createElement("div");
|
||||
listbox.id = "ds-listbox";
|
||||
listbox.className = "ds-listbox";
|
||||
listbox.hidden = true;
|
||||
listbox.setAttribute("role", "listbox");
|
||||
listbox.setAttribute("tabindex", "-1");
|
||||
document.body.appendChild(listbox);
|
||||
listbox.addEventListener("mousedown", function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
listbox.addEventListener("click", function (event) {
|
||||
var item = event.target.closest("[data-opt-index]");
|
||||
if (!item || item.getAttribute("aria-disabled") === "true") return;
|
||||
commit(Number(item.getAttribute("data-opt-index")));
|
||||
});
|
||||
}
|
||||
|
||||
function escapeId(id) {
|
||||
if (global.CSS && typeof CSS.escape === "function") return CSS.escape(id);
|
||||
return String(id).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
|
||||
}
|
||||
|
||||
function findLabel(select) {
|
||||
if (select.id) {
|
||||
var byFor = document.querySelector('label[for="' + escapeId(select.id) + '"]');
|
||||
if (byFor) return byFor;
|
||||
}
|
||||
return select.closest("label");
|
||||
}
|
||||
|
||||
function labelText(select) {
|
||||
var label = findLabel(select);
|
||||
if (label) return (label.textContent || "").replace(/\s+/g, " ").trim();
|
||||
if (select.getAttribute("aria-label")) return select.getAttribute("aria-label");
|
||||
return "";
|
||||
}
|
||||
|
||||
function syncTrigger(select) {
|
||||
var wrap = select.closest(".ds-combo");
|
||||
if (!wrap) return;
|
||||
var btn = wrap.querySelector(".ds-combo-trigger");
|
||||
if (!btn) return;
|
||||
var option = selectedOption(select);
|
||||
btn.textContent = triggerLabel(select);
|
||||
btn.classList.toggle("is-placeholder", isPlaceholder(option));
|
||||
wrap.classList.toggle("is-disabled", select.disabled);
|
||||
btn.disabled = select.disabled;
|
||||
if (select.disabled) btn.setAttribute("aria-disabled", "true");
|
||||
else btn.removeAttribute("aria-disabled");
|
||||
}
|
||||
|
||||
function enhance(select) {
|
||||
if (!select || select.dataset.dsCombo === "1") return;
|
||||
if (select.multiple || Number(select.size) > 1) return;
|
||||
select.dataset.dsCombo = "1";
|
||||
var wrap = document.createElement("div");
|
||||
wrap.className = "ds-combo";
|
||||
if (select.classList.contains("ds-dp-ym")) wrap.classList.add("ds-combo--compact");
|
||||
select.parentNode.insertBefore(wrap, select);
|
||||
wrap.appendChild(select);
|
||||
select.classList.add("ds-combo-native");
|
||||
select.tabIndex = -1;
|
||||
select.setAttribute("aria-hidden", "true");
|
||||
|
||||
var btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "ds-combo-trigger";
|
||||
btn.setAttribute("role", "combobox");
|
||||
btn.setAttribute("aria-haspopup", "listbox");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
btn.setAttribute("aria-controls", "ds-listbox");
|
||||
var name = labelText(select);
|
||||
if (name) btn.setAttribute("aria-label", name);
|
||||
wrap.appendChild(btn);
|
||||
syncTrigger(select);
|
||||
|
||||
select.addEventListener("focus", function () {
|
||||
if (!opening) btn.focus({ preventScroll: true });
|
||||
});
|
||||
select.addEventListener("invalid", function () {
|
||||
btn.focus({ preventScroll: true });
|
||||
});
|
||||
select.addEventListener("change", function () {
|
||||
syncTrigger(select);
|
||||
});
|
||||
|
||||
wrap._dsSelect = select;
|
||||
wrap._dsTrigger = btn;
|
||||
select._dsComboSync = function () {
|
||||
syncTrigger(select);
|
||||
if (active === wrap) fillListbox();
|
||||
};
|
||||
}
|
||||
|
||||
function scan(root) {
|
||||
var scope = root && root.querySelectorAll ? root : document;
|
||||
scope.querySelectorAll("select.select").forEach(enhance);
|
||||
}
|
||||
|
||||
function enabledIndexes(select) {
|
||||
var out = [];
|
||||
optionList(select).forEach(function (option, index) {
|
||||
if (!option.disabled) out.push(index);
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
function fillListbox() {
|
||||
if (!active || !listbox) return;
|
||||
var select = active._dsSelect;
|
||||
var html = "";
|
||||
optionList(select).forEach(function (option, index) {
|
||||
var selected = index === select.selectedIndex;
|
||||
var disabled = option.disabled;
|
||||
var cls = "ds-listbox-option";
|
||||
if (isPlaceholder(option)) cls += " is-placeholder";
|
||||
if (selected) cls += " is-selected";
|
||||
if (disabled) cls += " is-disabled";
|
||||
if (index === activeIndex) cls += " is-active";
|
||||
html +=
|
||||
'<div class="' + cls + '" role="option" id="ds-listbox-opt-' + index + '"' +
|
||||
' data-opt-index="' + index + '"' +
|
||||
' aria-selected="' + (selected ? "true" : "false") + '"' +
|
||||
(disabled ? ' aria-disabled="true"' : "") +
|
||||
">" + (option.textContent || "") + "</div>";
|
||||
});
|
||||
listbox.innerHTML = html;
|
||||
var btn = active._dsTrigger;
|
||||
if (activeIndex >= 0) btn.setAttribute("aria-activedescendant", "ds-listbox-opt-" + activeIndex);
|
||||
else btn.removeAttribute("aria-activedescendant");
|
||||
position();
|
||||
var activeEl = listbox.querySelector(".is-active") || listbox.querySelector(".is-selected");
|
||||
if (activeEl && activeEl.scrollIntoView) {
|
||||
activeEl.scrollIntoView({ block: "nearest" });
|
||||
}
|
||||
}
|
||||
|
||||
function viewportBox() {
|
||||
var vv = global.visualViewport;
|
||||
if (vv) {
|
||||
return { left: vv.offsetLeft, top: vv.offsetTop, width: vv.width, height: vv.height };
|
||||
}
|
||||
return { left: 0, top: 0, width: global.innerWidth, height: global.innerHeight };
|
||||
}
|
||||
|
||||
function position() {
|
||||
if (!listbox || listbox.hidden || !active) return;
|
||||
var rect = active.getBoundingClientRect();
|
||||
var view = viewportBox();
|
||||
var gap = 4;
|
||||
var width = Math.max(rect.width, 120);
|
||||
listbox.style.minWidth = Math.round(width) + "px";
|
||||
listbox.style.width = "max-content";
|
||||
listbox.style.maxWidth = Math.round(Math.min(view.width - 16, Math.max(width, 280))) + "px";
|
||||
var height = listbox.offsetHeight || 200;
|
||||
var left = rect.left;
|
||||
var top = rect.bottom + gap;
|
||||
if (top + height > view.top + view.height - 8 && rect.top - gap - height >= view.top + 8) {
|
||||
top = rect.top - gap - height;
|
||||
}
|
||||
if (left + width > view.left + view.width - 8) {
|
||||
left = Math.max(view.left + 8, rect.right - width);
|
||||
}
|
||||
if (left < view.left + 8) left = view.left + 8;
|
||||
if (top < view.top + 8) top = view.top + 8;
|
||||
listbox.style.left = Math.round(left) + "px";
|
||||
listbox.style.top = Math.round(top) + "px";
|
||||
}
|
||||
|
||||
function openCombo(wrap) {
|
||||
if (!wrap || wrap.classList.contains("is-disabled")) return;
|
||||
var select = wrap._dsSelect;
|
||||
if (!select || select.disabled) return;
|
||||
ensureListbox();
|
||||
if (active && active !== wrap) closeCombo();
|
||||
active = wrap;
|
||||
activeIndex = select.selectedIndex >= 0 ? select.selectedIndex : 0;
|
||||
if (select.options[activeIndex] && select.options[activeIndex].disabled) {
|
||||
var enabled = enabledIndexes(select);
|
||||
activeIndex = enabled.length ? enabled[0] : -1;
|
||||
}
|
||||
wrap.classList.add("is-open");
|
||||
wrap._dsTrigger.setAttribute("aria-expanded", "true");
|
||||
document.body.appendChild(listbox);
|
||||
listbox.hidden = false;
|
||||
fillListbox();
|
||||
}
|
||||
|
||||
function closeCombo() {
|
||||
if (!active) {
|
||||
if (listbox) listbox.hidden = true;
|
||||
return;
|
||||
}
|
||||
var wrap = active;
|
||||
wrap.classList.remove("is-open");
|
||||
wrap._dsTrigger.setAttribute("aria-expanded", "false");
|
||||
wrap._dsTrigger.removeAttribute("aria-activedescendant");
|
||||
active = null;
|
||||
activeIndex = -1;
|
||||
if (listbox) {
|
||||
listbox.hidden = true;
|
||||
listbox.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
function commit(index) {
|
||||
if (!active) return;
|
||||
var select = active._dsSelect;
|
||||
var option = select.options[index];
|
||||
if (!option || option.disabled) return;
|
||||
var wrap = active;
|
||||
opening = true;
|
||||
select.selectedIndex = index;
|
||||
select.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
select.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
syncTrigger(select);
|
||||
closeCombo();
|
||||
wrap._dsTrigger.focus({ preventScroll: true });
|
||||
opening = false;
|
||||
}
|
||||
|
||||
function moveActive(delta) {
|
||||
if (!active) return;
|
||||
var enabled = enabledIndexes(active._dsSelect);
|
||||
if (!enabled.length) return;
|
||||
var pos = enabled.indexOf(activeIndex);
|
||||
if (pos < 0) pos = delta > 0 ? -1 : 0;
|
||||
pos = (pos + delta + enabled.length * 8) % enabled.length;
|
||||
activeIndex = enabled[pos];
|
||||
fillListbox();
|
||||
}
|
||||
|
||||
function onPointer(event) {
|
||||
var wrap = event.target.closest && event.target.closest(".ds-combo");
|
||||
if (wrap && wrap._dsTrigger && (event.target === wrap._dsTrigger || wrap._dsTrigger.contains(event.target))) {
|
||||
if (event.type === "mousedown" && event.button === 0) event.preventDefault();
|
||||
if (wrap.classList.contains("is-open")) closeCombo();
|
||||
else openCombo(wrap);
|
||||
return;
|
||||
}
|
||||
if (listbox && !listbox.hidden && listbox.contains(event.target)) return;
|
||||
if (active) closeCombo();
|
||||
}
|
||||
|
||||
function onKey(event) {
|
||||
var wrap = event.target.closest && event.target.closest(".ds-combo");
|
||||
if (event.key === "Escape") {
|
||||
if (active) {
|
||||
event.preventDefault();
|
||||
var trigger = active._dsTrigger;
|
||||
closeCombo();
|
||||
if (trigger) trigger.focus({ preventScroll: true });
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!wrap || event.target !== wrap._dsTrigger) return;
|
||||
var open = wrap.classList.contains("is-open");
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
if (!open) openCombo(wrap);
|
||||
else moveActive(1);
|
||||
return;
|
||||
}
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
if (!open) openCombo(wrap);
|
||||
else moveActive(-1);
|
||||
return;
|
||||
}
|
||||
if (event.key === "Home" && open) {
|
||||
event.preventDefault();
|
||||
var first = enabledIndexes(wrap._dsSelect);
|
||||
if (first.length) {
|
||||
activeIndex = first[0];
|
||||
fillListbox();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.key === "End" && open) {
|
||||
event.preventDefault();
|
||||
var last = enabledIndexes(wrap._dsSelect);
|
||||
if (last.length) {
|
||||
activeIndex = last[last.length - 1];
|
||||
fillListbox();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if ((event.key === "Enter" || event.key === " ") && open) {
|
||||
event.preventDefault();
|
||||
if (activeIndex >= 0) commit(activeIndex);
|
||||
return;
|
||||
}
|
||||
if ((event.key === "Enter" || event.key === " ") && !open) {
|
||||
event.preventDefault();
|
||||
openCombo(wrap);
|
||||
}
|
||||
}
|
||||
|
||||
function patchSelectValue() {
|
||||
if (patched) return;
|
||||
patched = true;
|
||||
["value", "selectedIndex"].forEach(function (prop) {
|
||||
var desc = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, prop);
|
||||
if (!desc || !desc.set || !desc.get) return;
|
||||
Object.defineProperty(HTMLSelectElement.prototype, prop, {
|
||||
get: desc.get,
|
||||
set: function (value) {
|
||||
desc.set.call(this, value);
|
||||
if (typeof this._dsComboSync === "function") this._dsComboSync();
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: desc.enumerable,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function bind() {
|
||||
if (bound) return;
|
||||
bound = true;
|
||||
patchSelectValue();
|
||||
document.addEventListener("mousedown", onPointer, true);
|
||||
document.addEventListener("keydown", onKey);
|
||||
document.addEventListener("scroll", position, true);
|
||||
global.addEventListener("resize", position);
|
||||
if (global.visualViewport) {
|
||||
global.visualViewport.addEventListener("resize", position);
|
||||
global.visualViewport.addEventListener("scroll", position);
|
||||
}
|
||||
if (typeof MutationObserver === "function") {
|
||||
new MutationObserver(function (records) {
|
||||
records.forEach(function (record) {
|
||||
if (record.type === "childList") {
|
||||
record.addedNodes.forEach(function (node) {
|
||||
if (node.nodeType !== 1) return;
|
||||
if (node.matches && node.matches("select.select")) enhance(node);
|
||||
if (node.querySelectorAll) scan(node);
|
||||
});
|
||||
if (record.target && record.target.tagName === "SELECT" && record.target._dsComboSync) {
|
||||
record.target._dsComboSync();
|
||||
}
|
||||
}
|
||||
if (record.type === "attributes" && record.target.tagName === "SELECT" && record.target._dsComboSync) {
|
||||
record.target._dsComboSync();
|
||||
}
|
||||
});
|
||||
}).observe(document.documentElement, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: true,
|
||||
attributeFilter: ["disabled", "value"],
|
||||
});
|
||||
}
|
||||
scan(document);
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", bind);
|
||||
} else {
|
||||
bind();
|
||||
}
|
||||
|
||||
global.JinniuSelect = {
|
||||
scan: scan,
|
||||
open: function (select) {
|
||||
if (select && select.closest) openCombo(select.closest(".ds-combo"));
|
||||
},
|
||||
close: closeCombo,
|
||||
};
|
||||
})(window);
|
||||
Reference in New Issue
Block a user