Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit d5ed311

Browse filesBrowse files
Tao-VanJSTao-VanJS
committed
VanUI 0.11.5: Support cyclicalNav prop in choose 
1 parent b5bf436 commit d5ed311
Copy full SHA for d5ed311
Expand file treeCollapse file tree

29 files changed

+100
-84
lines changed

‎components/README.md

Copy file name to clipboardExpand all lines: components/README.md
+19-17Lines changed: 19 additions & 17 deletions
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

Copy file name to clipboardExpand all lines: components/dist/van-ui.d.ts
+2-1Lines changed: 2 additions & 1 deletion
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

Copy file name to clipboardExpand all lines: components/dist/van-ui.js
+3-3Lines changed: 3 additions & 3 deletions
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

Copy file name to clipboardExpand all lines: components/dist/van-ui.nomodule.js
+3-3Lines changed: 3 additions & 3 deletions
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

Copy file name to clipboardExpand all lines: components/dist/van-ui.nomodule.min.js
+1-1Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Copy file name to clipboardExpand all lines: components/examples/await/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/await/package.json

Copy file name to clipboardExpand all lines: components/examples/await/package.json
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/banner/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/banner/package.json

Copy file name to clipboardExpand all lines: components/examples/banner/package.json
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/choose/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/choose/package.json

Copy file name to clipboardExpand all lines: components/examples/choose/package.json
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/choose/src/main.ts
+2-1Lines changed: 2 additions & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/message/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/message/package.json

Copy file name to clipboardExpand all lines: components/examples/message/package.json
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/modal/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/modal/package.json

Copy file name to clipboardExpand all lines: components/examples/modal/package.json
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/option-group/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Copy file name to clipboardExpand all lines: components/examples/option-group/package.json
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/tabs/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/tabs/package.json

Copy file name to clipboardExpand all lines: components/examples/tabs/package.json
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: components/examples/toggle/package-lock.json
+5-4Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/examples/toggle/package.json

Copy file name to clipboardExpand all lines: components/examples/toggle/package.json
+1-1Lines changed: 1 addition & 1 deletion
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.