Skip to content

Commit

Permalink
VanUI 0.11.5: Support cyclicalNav prop in choose
Browse files Browse the repository at this point in the history
  • Loading branch information
Tao-VanJS committed Dec 2, 2024
1 parent b5bf436 commit d5ed311
Show file tree
Hide file tree
Showing 29 changed files with 100 additions and 84 deletions.
36 changes: 19 additions & 17 deletions components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ import { <components you want to import> } from "vanjs-ui"
Alternatively, you can import **VanUI** from CDN via a `<script type="text/javascript">` tag:

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

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

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

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

```ts
const choice = await choose({
label: "Choose a South American country:",
options: [
"🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
"🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
],
showTextFilter: true,
customModalProps: {
blurBackground: true,
modalStyleOverrides: {height: "300px"},
},
selectedColor: "blue",
selectedStyleOverrides: {color: "white"},
})
choice && van.add(document.body, div("You chose: ", b(choice)))
const choice = await choose({
label: "Choose a South American country:",
options: [
"🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
"🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
],
showTextFilter: true,
selectedColor: "blue",
cyclicalNav: true,
customModalProps: {
blurBackground: true,
modalStyleOverrides: {height: "300px"},
},
selectedStyleOverrides: {color: "white"},
})
choice && van.add(document.body, div("You chose: ", b(choice)))
```

#### Property Reference
Expand All @@ -818,6 +819,7 @@ choice && van.add(document.body, div("You chose: ", b(choice)))
* `options`: Type `string[]`. Required. The options of the choice.
* `showTextFilter`: Type `boolean`. Default `false`. Optional. Whether to show a text filter for the options.
* `selectedColor`: Type `string`. Default `"#f5f5f5"`. Optional. The background color of the currently selected option.
* `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.
* `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.
* `textFilterClass`: Type `string`. Default `""`. Optional. The `class` attribute of the text filter. You can specify multiple CSS classes separated by `" "`.
* `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.
Expand Down
3 changes: 2 additions & 1 deletion components/dist/van-ui.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export interface ChooseProps {
readonly options: readonly string[];
readonly showTextFilter?: boolean;
readonly selectedColor?: string;
readonly cyclicalNav?: boolean;
readonly customModalProps?: Omit<ModalProps, "closed">;
readonly textFilterClass?: string;
readonly textFilterStyleOverrides?: CSSPropertyBag;
Expand All @@ -166,5 +167,5 @@ export interface ChooseProps {
readonly selectedClass?: string;
readonly selectedStyleOverrides?: CSSPropertyBag;
}
export declare const choose: ({ label, options, showTextFilter, selectedColor, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | null>;
export declare const choose: ({ label, options, showTextFilter, selectedColor, cyclicalNav, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | null>;
export {};
6 changes: 3 additions & 3 deletions components/dist/van-ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
style: toStyleStr(childrenContainerStyleOverrides)
}, children));
};
export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", cyclicalNav = false, customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
const closed = van.state(false);
const { modalStyleOverrides, ...otherModalProps } = customModalProps;
const modalProps = {
Expand Down Expand Up @@ -501,9 +501,9 @@ export const choose = ({ label, options, showTextFilter = false, selectedColor =
closed.val = true;
}
else if (e.key === "ArrowDown")
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : (cyclicalNav ? 0 : index.val);
else if (e.key === "ArrowUp")
index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
index.val = index.val > 0 ? index.val - 1 : (cyclicalNav ? filtered.val.length - 1 : index.val);
};
document.addEventListener("keydown", navByKey);
van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));
Expand Down
6 changes: 3 additions & 3 deletions components/dist/van-ui.nomodule.js
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@
style: toStyleStr(childrenContainerStyleOverrides)
}, children));
};
window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", cyclicalNav = false, customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
const closed = van.state(false);
const { modalStyleOverrides, ...otherModalProps } = customModalProps;
const modalProps = {
Expand Down Expand Up @@ -501,9 +501,9 @@
closed.val = true;
}
else if (e.key === "ArrowDown")
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
index.val = index.val + 1 < filtered.val.length ? index.val + 1 : (cyclicalNav ? 0 : index.val);
else if (e.key === "ArrowUp")
index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
index.val = index.val > 0 ? index.val - 1 : (cyclicalNav ? filtered.val.length - 1 : index.val);
};
document.addEventListener("keydown", navByKey);
van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));
Expand Down
2 changes: 1 addition & 1 deletion components/dist/van-ui.nomodule.min.js

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions components/examples/await/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/await/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
9 changes: 5 additions & 4 deletions components/examples/banner/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/banner/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
9 changes: 5 additions & 4 deletions components/examples/choose/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/choose/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
3 changes: 2 additions & 1 deletion components/examples/choose/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@ const example2 = async () => {
"🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
],
showTextFilter: true,
selectedColor: "blue",
cyclicalNav: true,
customModalProps: {
blurBackground: true,
modalStyleOverrides: {height: "300px"},
},
selectedColor: "blue",
selectedStyleOverrides: {color: "white"},
})
choice && van.add(document.body, div("You chose: ", b(choice)))
Expand Down
9 changes: 5 additions & 4 deletions components/examples/message/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/message/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
9 changes: 5 additions & 4 deletions components/examples/modal/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/modal/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
9 changes: 5 additions & 4 deletions components/examples/option-group/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/option-group/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
9 changes: 5 additions & 4 deletions components/examples/tabs/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/tabs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
9 changes: 5 additions & 4 deletions components/examples/toggle/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/examples/toggle/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
},
"dependencies": {
"vanjs-core": "^1.5.2",
"vanjs-ui": "^0.11.4"
"vanjs-ui": "^0.11.5"
}
}
Loading

0 comments on commit d5ed311

Please sign in to comment.