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
6eccbe9765
+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