Merge branch 'main' of https://github.com/vscode-elements/vscode-elements.github.io

Author: bendera

.vscode/extensions.json

@@ -1,4 +1,7 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "unifiedjs.vscode-mdx"
+  ],
   "unwantedRecommendations": []
 }

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "copy-assets": "node scripts/copy-assets.cjs",
     "dev": "npm run copy-assets && astro dev",
-    "start": "astro dev",
+    "start": "npm run copy-assets && astro dev",
     "build": "npm run copy-assets && astro build",
     "preview": "npm run copy-assets && astro preview",
     "astro": "astro",

src/components/examples/label/BasicExample.astro

@@ -2,6 +2,6 @@
 
 ---
 
-<vscode-label for="select-01" side-aligned="end" required>
+<vscode-label for="select-01" required>
   <span class="normal">Editor:</span> Font Size
 </vscode-label>

src/components/examples/multi-select/ComboboxExample.astro

@@ -2,7 +2,17 @@
 
 ---
 
-<vscode-multi-select filter="startsWith" id="combobox-example" combobox>
+<p>
+  <label for="search-method">Search method:</label>
+  <select name="search-method-selector" id="search-method-selector">
+    <option value="contains">contains</option>
+    <option value="fuzzy">fuzzy</option>
+    <option value="startsWith">startsWith</option>
+    <option value="startsWithPerTerm">startsWithPerTerm</option>
+  </select>
+</p>
+
+<vscode-multi-select id="combobox-example" combobox>
   <vscode-option>Afghanistan</vscode-option>
   <vscode-option>Albania</vscode-option>
   <vscode-option>Algeria</vscode-option>
@@ -199,3 +209,19 @@
   <vscode-option>Zambia</vscode-option>
   <vscode-option>Zimbabwe</vscode-option>
 </vscode-multi-select>
+
+<script>
+  import type { SearchMethod } from "@vscode-elements/elements/dist/includes/vscode-select/types";
+  import type { VscodeMultiSelect } from "@vscode-elements/elements/dist/vscode-multi-select";
+
+  const cb = document.querySelector<VscodeMultiSelect>("#combobox-example");
+  const sl = document.querySelector<HTMLSelectElement>(
+    "#search-method-selector"
+  );
+
+  sl?.addEventListener("change", () => {
+    cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+  });
+
+  cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+</script>

src/components/examples/single-select/ComboboxExample.astro

@@ -1,6 +1,18 @@
 ---
+
 ---
-<vscode-single-select filter="startsWithPerTerm" combobox>
+
+<p>
+  <label for="search-method">Search method:</label>
+  <select name="search-method-selector" id="search-method-selector">
+    <option value="contains">contains</option>
+    <option value="fuzzy">fuzzy</option>
+    <option value="startsWith">startsWith</option>
+    <option value="startsWithPerTerm">startsWithPerTerm</option>
+  </select>
+</p>
+
+<vscode-single-select id="combobox-example" combobox>
   <vscode-option>Afghanistan</vscode-option>
   <vscode-option>Albania</vscode-option>
   <vscode-option>Algeria</vscode-option>
@@ -196,4 +208,20 @@
   <vscode-option>Yemen</vscode-option>
   <vscode-option>Zambia</vscode-option>
   <vscode-option>Zimbabwe</vscode-option>
-</vscode-single-select>
+</vscode-single-select>
+
+<script>
+  import type { SearchMethod } from "@vscode-elements/elements/dist/includes/vscode-select/types";
+  import type { VscodeSingleSelect } from "@vscode-elements/elements/dist/vscode-single-select";
+
+  const cb = document.querySelector<VscodeSingleSelect>("#combobox-example");
+  const sl = document.querySelector<HTMLSelectElement>(
+    "#search-method-selector"
+  );
+
+  sl?.addEventListener("change", () => {
+    cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+  });
+
+  cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+</script>

src/content/components/label.mdx

@@ -16,7 +16,7 @@ Label font weight is bold by default. It can be changed to normal by wrapping it
   <BasicExample />
   <Fragment slot="html">
     ```html
-    <vscode-label for="select-01" side-aligned="end" required>
+    <vscode-label for="select-01" required>
       <span class="normal">Editor:</span> Font Size
     </vscode-label>
     ```

src/content/components/multi-select.mdx

@@ -48,12 +48,34 @@ import Imports from "@components/examples/multi-select/Imports.astro";
   <ComboboxExample />
   <Fragment slot="html">
     ```html
-    <vscode-multi-select filter="startsWith" id="combobox-example" combobox>
+    <p>
+      <label for="search-method">Search method:</label>
+      <select name="search-method-selector" id="search-method-selector">
+        <option value="contains">contains</option>
+        <option value="fuzzy">fuzzy</option>
+        <option value="startsWith">startsWith</option>
+        <option value="startsWithPerTerm">startsWithPerTerm</option>
+      </select>
+    </p>
+
+    <vscode-multi-select id="combobox-example" combobox>
       <vscode-option>Afghanistan</vscode-option>
       <vscode-option>Albania</vscode-option>
       <vscode-option>Algeria</vscode-option>
       ...
     </vscode-multi-select>
     ```
   </Fragment>
+  <Fragment slot="js">
+    ```javascript
+    const cb = document.querySelector("#combobox-example");
+    const sl = document.querySelector("#search-method-selector");
+
+    sl.addEventListener("change", () => {
+      cb.filter = sl.options[sl.selectedIndex].value;
+    });
+
+    cb.filter = sl.options[sl.selectedIndex].value;
+    ```
+  </Fragment>
 </Demo>

src/content/components/single-select.mdx

@@ -42,11 +42,33 @@ import Imports from "@components/examples/single-select/Imports.astro";
   <ComboboxExample />
   <Fragment slot="html">
     ```html
-    <vscode-single-select filter="fuzzy" combobox>
+    <p>
+      <label for="search-method">Search method:</label>
+      <select name="search-method-selector" id="search-method-selector">
+        <option value="contains">contains</option>
+        <option value="fuzzy">fuzzy</option>
+        <option value="startsWith">startsWith</option>
+        <option value="startsWithPerTerm">startsWithPerTerm</option>
+      </select>
+    </p>
+    
+    <vscode-single-select id="combobox-example" combobox>
       <vscode-option>Afghanistan</vscode-option>
       <vscode-option>Albania</vscode-option>
       ...
     </vscode-single-select>
     ```
   </Fragment>
+  <Fragment slot="js">
+    ```javascript
+    const cb = document.querySelector("#combobox-example");
+    const sl = document.querySelector("#search-method-selector");
+
+    sl.addEventListener("change", () => {
+      cb.filter = sl.options[sl.selectedIndex].value;
+    });
+
+    cb.filter = sl.options[sl.selectedIndex].value;
+    ```
+  </Fragment>
 </Demo>