VanUI 0.11.5: Support cyclicalNav prop in choose

Author: Tao-VanJS

components/README.md

@@ -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/[email protected].4/dist/van-ui.nomodule.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].5/dist/van-ui.nomodule.min.js"></script>
 ```
 
-`https://cdn.jsdelivr.net/npm/[email protected].4/dist/van-ui.nomodule.js` can be used for the non-minified version.
+`https://cdn.jsdelivr.net/npm/[email protected].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.
 
@@ -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
@@ -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.

components/dist/van-ui.d.ts

@@ -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;
@@ -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 {};

components/dist/van-ui.js

@@ -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 = {
@@ -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));

components/dist/van-ui.nomodule.js

@@ -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 = {
@@ -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));

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

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }

components/examples/await/package-lock.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }

components/examples/await/package.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }

components/examples/banner/package-lock.json

@@ -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)))

components/examples/banner/package.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }

components/examples/choose/package-lock.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }

components/examples/choose/package.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }

components/examples/choose/src/main.ts

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }

components/examples/message/package-lock.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }