Skip to content

Commit 1baea6a

Browse files
Tao-VanJSTao-VanJS
committed
VanUI 0.11.3: Add showTextFilter in props, and show selected color when an option is hovered
1 parent ed55ffa commit 1baea6a

29 files changed

+146
-109
lines changed

‎components/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -801,6 +801,7 @@ const selected = await choose({
801801
"🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
802802
"🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
803803
],
804+
showTextFilter: true,
804805
customModalProps: {
805806
blurBackground: true,
806807
modalStyleOverrides: {height: "300px"},
@@ -815,7 +816,8 @@ selected && van.add(document.body, div("You chose: ", b(selected)))
815816

816817
* `label`: Type `string`. Required. The label you want to show.
817818
* `options`: Type `string[]`. Required. The options of the choice.
818-
* `selectedColor`: Type `string`. Default `#f5f5f5`. Optional. The background color of the currently selected option.
819+
* `showTextFilter`: Type `boolean`. Default `false`. Optional. Whether to show a text filter for the options.
820+
* `selectedColor`: Type `string`. Default `"#f5f5f5"`. Optional. The background color of the currently selected option.
819821
* `customModalProps`: Type: property bags for the [`Modal`](#modal) component (except the `closed` field). Default `{}`. Optional. The custom properties for the `Modal` component you want to specify.
820822
* `textFilterClass`: Type `string`. Default `""`. Optional. The `class` attribute of the text filter. You can specify multiple CSS classes separated by `" "`.
821823
* `textFilterStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the text filter.

‎components/dist/van-ui.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ export declare const FloatingWindow: ({ title, closed, x, y, width, height, clos
154154
export interface ChooseProps {
155155
readonly label: string;
156156
readonly options: readonly string[];
157+
readonly showTextFilter?: boolean;
157158
readonly selectedColor?: string;
158159
readonly customModalProps?: Omit<ModalProps, "closed">;
159160
readonly textFilterClass?: string;
@@ -165,5 +166,5 @@ export interface ChooseProps {
165166
readonly selectedClass?: string;
166167
readonly selectedStyleOverrides?: CSSPropertyBag;
167168
}
168-
export declare const choose: ({ label, options, selectedColor, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | undefined>;
169+
export declare const choose: ({ label, options, showTextFilter, selectedColor, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | undefined>;
169170
export {};

‎components/dist/van-ui.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const Modal = ({ closed, backgroundColor = "rgba(0,0,0,.5)", blurBackgrou
4040
"background-color": "white",
4141
...modalStyleOverrides,
4242
};
43+
document.activeElement instanceof HTMLElement && document.activeElement.blur();
4344
return () => closed.val ? null : div({ class: backgroundClass, style: toStyleStr(backgroundStyle) }, div({ class: modalClass, style: toStyleStr(modalStyle) }, children));
4445
};
4546
let tabsId = 0;
@@ -436,7 +437,8 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
436437
style: toStyleStr(childrenContainerStyleOverrides)
437438
}, children));
438439
};
439-
export const choose = ({ label, options, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
440+
let chooseId = 0;
441+
export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
440442
const closed = van.state(false);
441443
const { modalStyleOverrides, ...otherModalProps } = customModalProps;
442444
const modalProps = {
@@ -464,28 +466,33 @@ export const choose = ({ label, options, selectedColor = "#f5f5f5", customModalP
464466
"flex-grow": 1,
465467
...optionsContainerStyleOverrides,
466468
};
467-
const textFilterDom = input({
469+
const textFilterDom = showTextFilter ? input({
468470
type: "text",
469471
class: textFilterClass,
470472
style: toStyleStr(textFilterStyle),
471473
oninput: e => query.val = e.target.value
472-
});
473-
const modalDom = div(Modal(modalProps, div(label), div(textFilterDom), () => div({ class: optionsContainerClass, style: toStyleStr(optionsContainerStyle) }, filtered.val.map((o, i) => div({
474-
class: () => [].concat(optionClass ? optionClass : [], i === index.val ? "vanui-choose-selected" : [], i === index.val && selectedClass ? selectedClass : []).join(" "),
475-
style: () => toStyleStr({
476-
padding: "0.5rem",
477-
"background-color": i === index.val ? selectedColor : "",
478-
...optionStyleOverrides,
479-
...i === index.val ? selectedStyleOverrides : {},
480-
}),
474+
}) : undefined;
475+
const optionStyle = {
476+
padding: "0.5rem",
477+
...optionStyleOverrides,
478+
};
479+
const selectedStyle = {
480+
"background-color": selectedColor,
481+
...selectedStyleOverrides,
482+
};
483+
const id = "vanui-choose-" + (++chooseId);
484+
document.head.appendChild(van.tags["style"](`#${id} .vanui-choose-selected, #${id} .vanui-choose-option:hover { ${toStyleStr(selectedStyle)} }`));
485+
van.add(document.body, Modal(modalProps, div(label), showTextFilter ? div(textFilterDom) : undefined, () => div({ id, class: optionsContainerClass, style: toStyleStr(optionsContainerStyle) }, filtered.val.map((o, i) => div({
486+
class: () => ["vanui-choose-option"].concat(optionClass ? optionClass : [], i === index.val ? "vanui-choose-selected" : [], i === index.val && selectedClass ? selectedClass : []).join(" "),
487+
style: toStyleStr(optionStyle),
481488
onclick: () => (resolve(o), closed.val = true),
482489
}, o)))));
483-
van.add(document.body, modalDom);
490+
textFilterDom?.focus();
484491
van.derive(() => {
485492
index.val;
486-
setTimeout(() => modalDom.querySelector(".vanui-choose-selected")?.scrollIntoView(false), 10);
493+
setTimeout(() => document.querySelector(`#${id} .vanui-choose-selected`)?.scrollIntoView(false), 10);
487494
});
488-
modalDom.addEventListener("keydown", e => {
495+
const navByKey = (e) => {
489496
if (e.key === "Enter" && index.val < filtered.val.length) {
490497
resolve(filtered.val[index.val]);
491498
closed.val = true;
@@ -498,7 +505,8 @@ export const choose = ({ label, options, selectedColor = "#f5f5f5", customModalP
498505
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
499506
else if (e.key === "ArrowUp")
500507
index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
501-
});
502-
textFilterDom.focus();
508+
};
509+
document.addEventListener("keydown", navByKey);
510+
van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));
503511
return res;
504512
};

‎components/dist/van-ui.nomodule.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"background-color": "white",
4141
...modalStyleOverrides,
4242
};
43+
document.activeElement instanceof HTMLElement && document.activeElement.blur();
4344
return () => closed.val ? null : div({ class: backgroundClass, style: toStyleStr(backgroundStyle) }, div({ class: modalClass, style: toStyleStr(modalStyle) }, children));
4445
};
4546
let tabsId = 0;
@@ -436,7 +437,8 @@
436437
style: toStyleStr(childrenContainerStyleOverrides)
437438
}, children));
438439
};
439-
window.choose = ({ label, options, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
440+
let chooseId = 0;
441+
window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
440442
const closed = van.state(false);
441443
const { modalStyleOverrides, ...otherModalProps } = customModalProps;
442444
const modalProps = {
@@ -464,28 +466,33 @@
464466
"flex-grow": 1,
465467
...optionsContainerStyleOverrides,
466468
};
467-
const textFilterDom = input({
469+
const textFilterDom = showTextFilter ? input({
468470
type: "text",
469471
class: textFilterClass,
470472
style: toStyleStr(textFilterStyle),
471473
oninput: e => query.val = e.target.value
472-
});
473-
const modalDom = div(Modal(modalProps, div(label), div(textFilterDom), () => div({ class: optionsContainerClass, style: toStyleStr(optionsContainerStyle) }, filtered.val.map((o, i) => div({
474-
class: () => [].concat(optionClass ? optionClass : [], i === index.val ? "vanui-choose-selected" : [], i === index.val && selectedClass ? selectedClass : []).join(" "),
475-
style: () => toStyleStr({
476-
padding: "0.5rem",
477-
"background-color": i === index.val ? selectedColor : "",
478-
...optionStyleOverrides,
479-
...i === index.val ? selectedStyleOverrides : {},
480-
}),
474+
}) : undefined;
475+
const optionStyle = {
476+
padding: "0.5rem",
477+
...optionStyleOverrides,
478+
};
479+
const selectedStyle = {
480+
"background-color": selectedColor,
481+
...selectedStyleOverrides,
482+
};
483+
const id = "vanui-choose-" + (++chooseId);
484+
document.head.appendChild(van.tags["style"](`#${id} .vanui-choose-selected, #${id} .vanui-choose-option:hover { ${toStyleStr(selectedStyle)} }`));
485+
van.add(document.body, Modal(modalProps, div(label), showTextFilter ? div(textFilterDom) : undefined, () => div({ id, class: optionsContainerClass, style: toStyleStr(optionsContainerStyle) }, filtered.val.map((o, i) => div({
486+
class: () => ["vanui-choose-option"].concat(optionClass ? optionClass : [], i === index.val ? "vanui-choose-selected" : [], i === index.val && selectedClass ? selectedClass : []).join(" "),
487+
style: toStyleStr(optionStyle),
481488
onclick: () => (resolve(o), closed.val = true),
482489
}, o)))));
483-
van.add(document.body, modalDom);
490+
textFilterDom?.focus();
484491
van.derive(() => {
485492
index.val;
486-
setTimeout(() => modalDom.querySelector(".vanui-choose-selected")?.scrollIntoView(false), 10);
493+
setTimeout(() => document.querySelector(`#${id} .vanui-choose-selected`)?.scrollIntoView(false), 10);
487494
});
488-
modalDom.addEventListener("keydown", e => {
495+
const navByKey = (e) => {
489496
if (e.key === "Enter" && index.val < filtered.val.length) {
490497
resolve(filtered.val[index.val]);
491498
closed.val = true;
@@ -498,8 +505,9 @@
498505
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
499506
else if (e.key === "ArrowUp")
500507
index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
501-
});
502-
textFilterDom.focus();
508+
};
509+
document.addEventListener("keydown", navByKey);
510+
van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));
503511
return res;
504512
};
505513
}

0 commit comments

Comments
 (0)