VanUI 0.11.4: Simplify the implementation of 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].3/dist/van-ui.nomodule.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/van-ui.nomodule.min.js"></script>
 ```
 
-`https://cdn.jsdelivr.net/npm/[email protected].3/dist/van-ui.nomodule.js` can be used for the non-minified version.
+`https://cdn.jsdelivr.net/npm/[email protected].4/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.
 
@@ -770,12 +770,12 @@ You can override the default stacking behavior by specifying `{customStacking: t
 
 ### choose
 
-Creates a [`Modal`](#modal) component that lets the user choose among given options, returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves when user makes the choice (resolves to the selected string), or cancels (resolves to `undefined`).
+Creates a [`Modal`](#modal) component that lets the user choose among given options, returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves when user makes the choice (resolves to the chosen string), or cancels (resolves to `null`).
 
 #### Signature
 
 ```js
-choose({...props}) => Promise<string | undefined>
+choose({...props}) => Promise<string | null>
 ```
 
 #### Examples
@@ -785,17 +785,17 @@ Preview with [CodeSandbox](https://codesandbox.io/p/sandbox/github/vanjs-org/van
 Example 1:
 
 ```ts
-const selected = await choose({
+const choice = await choose({
   label: "Choose a color:",
   options: ["Red", "Green", "Blue"],
 })
-selected && van.add(document.body, div("You chose: ", b(selected)))
+choice && van.add(document.body, div("You chose: ", b(choice)))
 ```
 
 Example 2:
 
 ```ts
-const selected = await choose({
+const choice = await choose({
   label: "Choose a South American country:",
   options: [
     "🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
@@ -809,7 +809,7 @@ const selected = await choose({
   selectedColor: "blue",
   selectedStyleOverrides: {color: "white"},
 })
-selected && van.add(document.body, div("You chose: ", b(selected)))
+choice && van.add(document.body, div("You chose: ", b(choice)))
 ```
 
 #### Property Reference
@@ -825,8 +825,8 @@ selected && van.add(document.body, div("You chose: ", b(selected)))
 * `optionsContainerStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the container of all options.
 * `optionClass`: Type `string`. Default `""`. Optional. The `class` attribute of an individual option. You can specify multiple CSS classes separated by `" "`.
 * `optionStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for an individual option.
-* `selectedClass`: Type `string`. Default `""`. Optional. The `class` attribute of the selected option. You can specify multiple CSS classes separated by `" "`.
-* `selectedStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the selected option.
+* `selectedClass`: Type `string`. Default `""`. Optional. The `class` attribute of the currently selected option. You can specify multiple CSS classes separated by `" "`.
+* `selectedStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the currently selected option.
 
 ### Property Bag for Style Overrides
 

components/dist/van-ui.d.ts

@@ -166,5 +166,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 | undefined>;
+export declare const choose: ({ label, options, showTextFilter, selectedColor, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | null>;
 export {};

components/dist/van-ui.js

@@ -437,7 +437,6 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
         style: toStyleStr(childrenContainerStyleOverrides)
     }, children));
 };
-let chooseId = 0;
 export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
     const closed = van.state(false);
     const { modalStyleOverrides, ...otherModalProps } = customModalProps;
@@ -471,7 +470,7 @@ export const choose = ({ label, options, showTextFilter = false, selectedColor =
         class: textFilterClass,
         style: toStyleStr(textFilterStyle),
         oninput: e => query.val = e.target.value
-    }) : undefined;
+    }) : null;
     const optionStyle = {
         padding: "0.5rem",
         ...optionStyleOverrides,
@@ -480,25 +479,25 @@ export const choose = ({ label, options, showTextFilter = false, selectedColor =
         "background-color": selectedColor,
         ...selectedStyleOverrides,
     };
-    const id = "vanui-choose-" + (++chooseId);
-    document.head.appendChild(van.tags["style"](`#${id} .vanui-choose-selected, #${id} .vanui-choose-option:hover { ${toStyleStr(selectedStyle)} }`));
-    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({
+    van.add(document.head, () => closed.val ? null :
+        van.tags["style"](`.vanui-choose-selected, .vanui-choose-option:hover { ${toStyleStr(selectedStyle)} }`));
+    van.add(document.body, Modal(modalProps, div(label), showTextFilter ? div(textFilterDom) : null, () => div({ class: optionsContainerClass, style: toStyleStr(optionsContainerStyle) }, filtered.val.map((o, i) => div({
         class: () => ["vanui-choose-option"].concat(optionClass ? optionClass : [], i === index.val ? "vanui-choose-selected" : [], i === index.val && selectedClass ? selectedClass : []).join(" "),
         style: toStyleStr(optionStyle),
         onclick: () => (resolve(o), closed.val = true),
     }, o)))));
     textFilterDom?.focus();
     van.derive(() => {
         index.val;
-        setTimeout(() => document.querySelector(`#${id} .vanui-choose-selected`)?.scrollIntoView(false), 10);
+        setTimeout(() => document.querySelector(".vanui-choose-selected")?.scrollIntoView(false), 10);
     });
     const navByKey = (e) => {
         if (e.key === "Enter" && index.val < filtered.val.length) {
             resolve(filtered.val[index.val]);
             closed.val = true;
         }
         else if (e.key === "Escape") {
-            resolve(undefined);
+            resolve(null);
             closed.val = true;
         }
         else if (e.key === "ArrowDown")

components/dist/van-ui.nomodule.js

@@ -437,7 +437,6 @@
           style: toStyleStr(childrenContainerStyleOverrides)
       }, children));
   };
-  let chooseId = 0;
   window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
       const closed = van.state(false);
       const { modalStyleOverrides, ...otherModalProps } = customModalProps;
@@ -471,7 +470,7 @@
           class: textFilterClass,
           style: toStyleStr(textFilterStyle),
           oninput: e => query.val = e.target.value
-      }) : undefined;
+      }) : null;
       const optionStyle = {
           padding: "0.5rem",
           ...optionStyleOverrides,
@@ -480,25 +479,25 @@
           "background-color": selectedColor,
           ...selectedStyleOverrides,
       };
-      const id = "vanui-choose-" + (++chooseId);
-      document.head.appendChild(van.tags["style"](`#${id} .vanui-choose-selected, #${id} .vanui-choose-option:hover { ${toStyleStr(selectedStyle)} }`));
-      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({
+      van.add(document.head, () => closed.val ? null :
+          van.tags["style"](`.vanui-choose-selected, .vanui-choose-option:hover { ${toStyleStr(selectedStyle)} }`));
+      van.add(document.body, Modal(modalProps, div(label), showTextFilter ? div(textFilterDom) : null, () => div({ class: optionsContainerClass, style: toStyleStr(optionsContainerStyle) }, filtered.val.map((o, i) => div({
           class: () => ["vanui-choose-option"].concat(optionClass ? optionClass : [], i === index.val ? "vanui-choose-selected" : [], i === index.val && selectedClass ? selectedClass : []).join(" "),
           style: toStyleStr(optionStyle),
           onclick: () => (resolve(o), closed.val = true),
       }, o)))));
       textFilterDom?.focus();
       van.derive(() => {
           index.val;
-          setTimeout(() => document.querySelector(`#${id} .vanui-choose-selected`)?.scrollIntoView(false), 10);
+          setTimeout(() => document.querySelector(".vanui-choose-selected")?.scrollIntoView(false), 10);
       });
       const navByKey = (e) => {
           if (e.key === "Enter" && index.val < filtered.val.length) {
               resolve(filtered.val[index.val]);
               closed.val = true;
           }
           else if (e.key === "Escape") {
-              resolve(undefined);
+              resolve(null);
               closed.val = true;
           }
           else if (e.key === "ArrowDown")