Skip to content

Commit 4b7bafd

Browse files
Tao-VanJSTao-VanJS
committed
VanUI 0.11.5: Support cyclicalNav prop in choose 
1 parent 99e83a1 commit 4b7bafd

29 files changed

+100
-84
lines changed

‎components/README.md

+19-17
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ import { <components you want to import> } from "vanjs-ui"
5252
Alternatively, you can import **VanUI** from CDN via a `<script type="text/javascript">` tag:
5353

5454
```html
55-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.4/dist/van-ui.nomodule.min.js"></script>
55+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.5/dist/van-ui.nomodule.min.js"></script>
5656
```
5757

58-
`https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.4/dist/van-ui.nomodule.js` can be used for the non-minified version.
58+
`https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.5/dist/van-ui.nomodule.js` can be used for the non-minified version.
5959

6060
Note that: **VanJS** needs to be imported via a `<script type="text/javascript">` tag for **VanUI** to work properly.
6161

@@ -795,21 +795,22 @@ choice && van.add(document.body, div("You chose: ", b(choice)))
795795
Example 2:
796796

797797
```ts
798-
const choice = await choose({
799-
label: "Choose a South American country:",
800-
options: [
801-
"🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
802-
"🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
803-
],
804-
showTextFilter: true,
805-
customModalProps: {
806-
blurBackground: true,
807-
modalStyleOverrides: {height: "300px"},
808-
},
809-
selectedColor: "blue",
810-
selectedStyleOverrides: {color: "white"},
811-
})
812-
choice && van.add(document.body, div("You chose: ", b(choice)))
798+
const choice = await choose({
799+
label: "Choose a South American country:",
800+
options: [
801+
"🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
802+
"🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
803+
],
804+
showTextFilter: true,
805+
selectedColor: "blue",
806+
cyclicalNav: true,
807+
customModalProps: {
808+
blurBackground: true,
809+
modalStyleOverrides: {height: "300px"},
810+
},
811+
selectedStyleOverrides: {color: "white"},
812+
})
813+
choice && van.add(document.body, div("You chose: ", b(choice)))
813814
```
814815

815816
#### Property Reference
@@ -818,6 +819,7 @@ choice && van.add(document.body, div("You chose: ", b(choice)))
818819
* `options`: Type `string[]`. Required. The options of the choice.
819820
* `showTextFilter`: Type `boolean`. Default `false`. Optional. Whether to show a text filter for the options.
820821
* `selectedColor`: Type `string`. Default `"#f5f5f5"`. Optional. The background color of the currently selected option.
822+
* `cyclicalNav`: Type `boolean`. Default `false`. Optional. Whether to navigate through the options via arrow keys in a cyclical manner. That is, if `cyclicalNav` is on, when you reach the end of the list, pressing the down arrow key will take you back to the beginning, and vice versa for going up the list with the up arrow key.
821823
* `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.
822824
* `textFilterClass`: Type `string`. Default `""`. Optional. The `class` attribute of the text filter. You can specify multiple CSS classes separated by `" "`.
823825
* `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

+2-1
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ export interface ChooseProps {
156156
readonly options: readonly string[];
157157
readonly showTextFilter?: boolean;
158158
readonly selectedColor?: string;
159+
readonly cyclicalNav?: boolean;
159160
readonly customModalProps?: Omit<ModalProps, "closed">;
160161
readonly textFilterClass?: string;
161162
readonly textFilterStyleOverrides?: CSSPropertyBag;
@@ -166,5 +167,5 @@ export interface ChooseProps {
166167
readonly selectedClass?: string;
167168
readonly selectedStyleOverrides?: CSSPropertyBag;
168169
}
169-
export declare const choose: ({ label, options, showTextFilter, selectedColor, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | null>;
170+
export declare const choose: ({ label, options, showTextFilter, selectedColor, cyclicalNav, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | null>;
170171
export {};

‎components/dist/van-ui.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,7 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
437437
style: toStyleStr(childrenContainerStyleOverrides)
438438
}, children));
439439
};
440-
export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
440+
export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", cyclicalNav = false, customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
441441
const closed = van.state(false);
442442
const { modalStyleOverrides, ...otherModalProps } = customModalProps;
443443
const modalProps = {
@@ -501,9 +501,9 @@ export const choose = ({ label, options, showTextFilter = false, selectedColor =
501501
closed.val = true;
502502
}
503503
else if (e.key === "ArrowDown")
504-
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
504+
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : (cyclicalNav ? 0 : index.val);
505505
else if (e.key === "ArrowUp")
506-
index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
506+
index.val = index.val > 0 ? index.val - 1 : (cyclicalNav ? filtered.val.length - 1 : index.val);
507507
};
508508
document.addEventListener("keydown", navByKey);
509509
van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,7 @@
437437
style: toStyleStr(childrenContainerStyleOverrides)
438438
}, children));
439439
};
440-
window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
440+
window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", cyclicalNav = false, customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
441441
const closed = van.state(false);
442442
const { modalStyleOverrides, ...otherModalProps } = customModalProps;
443443
const modalProps = {
@@ -501,9 +501,9 @@
501501
closed.val = true;
502502
}
503503
else if (e.key === "ArrowDown")
504-
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
504+
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : (cyclicalNav ? 0 : index.val);
505505
else if (e.key === "ArrowUp")
506-
index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
506+
index.val = index.val > 0 ? index.val - 1 : (cyclicalNav ? filtered.val.length - 1 : index.val);
507507
};
508508
document.addEventListener("keydown", navByKey);
509509
van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/await/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/await/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

‎components/examples/banner/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/banner/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

‎components/examples/choose/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/choose/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

‎components/examples/choose/src/main.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,12 @@ const example2 = async () => {
1919
"🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
2020
],
2121
showTextFilter: true,
22+
selectedColor: "blue",
23+
cyclicalNav: true,
2224
customModalProps: {
2325
blurBackground: true,
2426
modalStyleOverrides: {height: "300px"},
2527
},
26-
selectedColor: "blue",
2728
selectedStyleOverrides: {color: "white"},
2829
})
2930
choice && van.add(document.body, div("You chose: ", b(choice)))

‎components/examples/message/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/message/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

‎components/examples/modal/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/modal/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

‎components/examples/option-group/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/option-group/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

‎components/examples/tabs/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/tabs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

‎components/examples/toggle/package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/toggle/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
},
1616
"dependencies": {
1717
"vanjs-core": "^1.5.2",
18-
"vanjs-ui": "^0.11.4"
18+
"vanjs-ui": "^0.11.5"
1919
}
2020
}

0 commit comments

Comments
 (0)