Upgrade VanUI to 0.11.12

Author: Tao-VanJS

codegen/vanui-README.md

@@ -23,10 +23,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].11/dist/van-ui.nomodule.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].12/dist/van-ui.nomodule.min.js"></script>
 ```
 
-`https://cdn.jsdelivr.net/npm/[email protected].11/dist/van-ui.nomodule.js` can be used for the non-minified version.
+`https://cdn.jsdelivr.net/npm/[email protected].12/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.
 
@@ -99,7 +99,7 @@ const Example1 = () => {
 
   return [
     () => h2(
-      "Github Star: ",
+      "GitHub Stars: ",
       Await({
         value: data.val, container: span,
         Loading: () => "🌀 Loading...",

sitegen/vanui.ts

@@ -66,12 +66,12 @@ export default (doc: HTMLDocument) => {
     ),
     pre(
       code({class: "language-html"},
-        "<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/[email protected].11/dist/van-ui.nomodule.min.js\"></script>\n",
+        "<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/[email protected].12/dist/van-ui.nomodule.min.js\"></script>\n",
       ),
     ),
     p(
       Symbol(
-        "https://cdn.jsdelivr.net/npm/[email protected].11/dist/van-ui.nomodule.js",
+        "https://cdn.jsdelivr.net/npm/[email protected].12/dist/van-ui.nomodule.js",
       ),
       " can be used for the non-minified version.",
     ),
@@ -344,7 +344,7 @@ export default (doc: HTMLDocument) => {
     ),
     pre(
       code({class: "language-ts"},
-        "const Example1 = () => {\n  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))\n\n  const fetchWithDelay = (url: string, waitMs: number) =>\n    sleep(waitMs).then(() => fetch(url)).then(r => r.json())\n\n  const fetchStar = () =>\n    fetchWithDelay(\"https://api.github.com/repos/vanjs-org/van\", 1000)\n      .then(data => data.stargazers_count)\n\n  const data = van.state(fetchStar())\n\n  return [\n    () => h2(\n      \"Github Star: \",\n      Await({\n        value: data.val, container: span,\n        Loading: () => \"🌀 Loading...\",\n        Error: () => \"🙀 Request failed.\",\n      }, starNumber => `⭐️ ${starNumber}!`)\n    ),\n    () => Await({\n      value: data.val,\n      Loading: () => '',\n    }, () => button({onclick: () => (data.val = fetchStar())}, \"Refetch\")),\n  ]\n}\n",
+        "const Example1 = () => {\n  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))\n\n  const fetchWithDelay = (url: string, waitMs: number) =>\n    sleep(waitMs).then(() => fetch(url)).then(r => r.json())\n\n  const fetchStar = () =>\n    fetchWithDelay(\"https://api.github.com/repos/vanjs-org/van\", 1000)\n      .then(data => data.stargazers_count)\n\n  const data = van.state(fetchStar())\n\n  return [\n    () => h2(\n      \"GitHub Stars: \",\n      Await({\n        value: data.val, container: span,\n        Loading: () => \"🌀 Loading...\",\n        Error: () => \"🙀 Request failed.\",\n      }, starNumber => `⭐️ ${starNumber}!`)\n    ),\n    () => Await({\n      value: data.val,\n      Loading: () => '',\n    }, () => button({onclick: () => (data.val = fetchStar())}, \"Refetch\")),\n  ]\n}\n",
       ),
     ),
     p(

vanui.html

@@ -61,8 +61,8 @@ <h1 class="w3-padding-16 w3-xxxlarge">
       <div id="page">
         <div id="content"><h1 class="w3-xxlarge"><strong>VanUI</strong>: A Collection of Grab 'n Go Reusable Utility and UI Components for VanJS</h1><p>🙏 Feedback and contribution are welcome and greatly appreciated! (<a href="https://github.com/vanjs-org/van/tree/main/components" class="w3-hover-opacity">source code</a>)</p><h2 class="w3-xxlarge w3-text-red" id="installation"><a class="self-link" href="#installation">Installation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="via-npm"><a class="self-link" href="#via-npm">Via NPM</a></h3><p>The library is published as NPM package <a href="https://www.npmjs.com/package/vanjs-ui" class="w3-hover-opacity">vanjs-ui</a>. Run the following command to install the package:</p><pre><code class="language-shell">npm install vanjs-ui
 </code></pre><p>To use the NPM package, add this line to your script:</p><pre><code class="language-js">import { &lt;components you want to import&gt; } from "vanjs-ui"
-</code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag:</p><pre><code class="language-html">&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].11/dist/van-ui.nomodule.min.js"&gt;&lt;/script&gt;
-</code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/1brxdjh9/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/cb9rs5yu/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol">&lt;script&gt;</code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts"
+</code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag:</p><pre><code class="language-html">&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].12/dist/van-ui.nomodule.min.js"&gt;&lt;/script&gt;
+</code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/1brxdjh9/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/cb9rs5yu/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol">&lt;script&gt;</code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts"
 
 declare const Modal: typeof ModalType
 </code></pre><h2 class="w3-xxlarge w3-text-red" id="documentation"><a class="self-link" href="#documentation">Documentation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>The following components have been implemented so far:</p><ul><li>Utility components:<ul><li><a href="#await" class="w3-hover-opacity">Await</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/await?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li><li>UI components:<ul><li><a href="#modal" class="w3-hover-opacity">Modal</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/modal?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#tabs" class="w3-hover-opacity">Tabs</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tabs?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#message" class="w3-hover-opacity">MessageBoard</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/message?file=/src/main.ts" class="w3-hover-opacity">preview</a>)</li><li><a href="#tooltip" class="w3-hover-opacity">Tooltip</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tooltip?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#toggle" class="w3-hover-opacity">Toggle</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/toggle?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#optiongroup" class="w3-hover-opacity">OptionGroup</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/option-group?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#banner" class="w3-hover-opacity">Banner</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/banner?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#floatingwindow" class="w3-hover-opacity">FloatingWindow</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/window?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><span style="color:red; padding-right: 0.3rem;"><strong>New!</strong></span><a href="#choose" class="w3-hover-opacity">choose</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/choose?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li></ul><h3 class="w3-large w3-text-red" id="await"><a class="self-link" href="#await">Await</a></h3><p><em>Author: <a href="https://github.com/Hunter-Gu" class="w3-hover-opacity">@Hunter-Gu</a></em></p><p><code class="symbol">Await</code> is a utility component that helps you build UI components based on asynchronous data (i.e.: a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="w3-hover-opacity"><code class="symbol">Promise</code></a> object).</p><h4 class="w3-medium w3-text-red" id="signature"><a class="self-link" href="#signature">Signature</a></h4><pre><code class="language-js">Await({
@@ -85,7 +85,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
 
   return [
     () =&gt; h2(
-      "Github Star: ",
+      "GitHub Stars: ",
       Await({
         value: data.val, container: span,
         Loading: () =&gt; "🌀 Loading...",

vanui/index.html

@@ -61,8 +61,8 @@ <h1 class="w3-padding-16 w3-xxxlarge">
       <div id="page">
         <div id="content"><h1 class="w3-xxlarge"><strong>VanUI</strong>: A Collection of Grab 'n Go Reusable Utility and UI Components for VanJS</h1><p>🙏 Feedback and contribution are welcome and greatly appreciated! (<a href="https://github.com/vanjs-org/van/tree/main/components" class="w3-hover-opacity">source code</a>)</p><h2 class="w3-xxlarge w3-text-red" id="installation"><a class="self-link" href="#installation">Installation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><h3 class="w3-large w3-text-red" id="via-npm"><a class="self-link" href="#via-npm">Via NPM</a></h3><p>The library is published as NPM package <a href="https://www.npmjs.com/package/vanjs-ui" class="w3-hover-opacity">vanjs-ui</a>. Run the following command to install the package:</p><pre><code class="language-shell">npm install vanjs-ui
 </code></pre><p>To use the NPM package, add this line to your script:</p><pre><code class="language-js">import { &lt;components you want to import&gt; } from "vanjs-ui"
-</code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag:</p><pre><code class="language-html">&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].11/dist/van-ui.nomodule.min.js"&gt;&lt;/script&gt;
-</code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/1brxdjh9/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/cb9rs5yu/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol">&lt;script&gt;</code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts"
+</code></pre><h3 class="w3-large w3-text-red" id="via-a-script-tag"><a class="self-link" href="#via-a-script-tag">Via a Script Tag</a></h3><p>Alternatively, you can import <strong>VanUI</strong> from CDN via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag:</p><pre><code class="language-html">&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected].12/dist/van-ui.nomodule.min.js"&gt;&lt;/script&gt;
+</code></pre><p><code class="symbol">https://cdn.jsdelivr.net/npm/[email protected]/dist/van-ui.nomodule.js</code> can be used for the non-minified version.</p><p>Note that: <strong>VanJS</strong> needs to be imported via a <code class="symbol">&lt;script type="text/javascript"&gt;</code> tag for <strong>VanUI</strong> to work properly.</p><p>Try on jsfiddle: <a href="https://jsfiddle.net/1brxdjh9/" class="w3-hover-opacity">Modal</a>, <a href="https://jsfiddle.net/cb9rs5yu/" class="w3-hover-opacity">MessageBoard</a>.</p><h3 class="w3-large w3-text-red" id="typescript-support-for-script-tag-integration"><a class="self-link" href="#typescript-support-for-script-tag-integration">TypeScript Support for Script Tag Integration</a></h3><p>To get TypeScript support for <code class="symbol">&lt;script&gt;</code> tag integration, download <a href="https://vanjs.org/autodownload?file=van-ui.d.ts" class="w3-hover-opacity"><code class="symbol">van-ui.d.ts</code></a> and add the code like following at the top of your <code class="symbol">.ts</code> file:</p><pre><code class="language-ts">import type { Modal as ModalType } from "./van-ui.d.ts"
 
 declare const Modal: typeof ModalType
 </code></pre><h2 class="w3-xxlarge w3-text-red" id="documentation"><a class="self-link" href="#documentation">Documentation</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>The following components have been implemented so far:</p><ul><li>Utility components:<ul><li><a href="#await" class="w3-hover-opacity">Await</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/await?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li><li>UI components:<ul><li><a href="#modal" class="w3-hover-opacity">Modal</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/modal?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#tabs" class="w3-hover-opacity">Tabs</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tabs?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#message" class="w3-hover-opacity">MessageBoard</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/message?file=/src/main.ts" class="w3-hover-opacity">preview</a>)</li><li><a href="#tooltip" class="w3-hover-opacity">Tooltip</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/tooltip?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#toggle" class="w3-hover-opacity">Toggle</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/toggle?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#optiongroup" class="w3-hover-opacity">OptionGroup</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/option-group?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><a href="#banner" class="w3-hover-opacity">Banner</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/banner?file=/src/main.ts:1,1" class="w3-hover-opacity">preview</a>)</li><li><a href="#floatingwindow" class="w3-hover-opacity">FloatingWindow</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/window?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li><li><span style="color:red; padding-right: 0.3rem;"><strong>New!</strong></span><a href="#choose" class="w3-hover-opacity">choose</a> (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/components/examples/choose?file=%2Fsrc%2Fmain.ts%3A1%2C1" class="w3-hover-opacity">preview</a>)</li></ul></li></ul><h3 class="w3-large w3-text-red" id="await"><a class="self-link" href="#await">Await</a></h3><p><em>Author: <a href="https://github.com/Hunter-Gu" class="w3-hover-opacity">@Hunter-Gu</a></em></p><p><code class="symbol">Await</code> is a utility component that helps you build UI components based on asynchronous data (i.e.: a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="w3-hover-opacity"><code class="symbol">Promise</code></a> object).</p><h4 class="w3-medium w3-text-red" id="signature"><a class="self-link" href="#signature">Signature</a></h4><pre><code class="language-js">Await({
@@ -85,7 +85,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
 
   return [
     () =&gt; h2(
-      "Github Star: ",
+      "GitHub Stars: ",
       Await({
         value: data.val, container: span,
         Loading: () =&gt; "🌀 Loading...",