make event values a section

Author: Efnilite

src/components/docs/Doc.astro

@@ -93,27 +93,53 @@ function color(): string {
         <DocData text="Since" value={docType.since}/>
         <DocData text="Cancellable" value={docType.cancellable != null ? (docType.cancellable ? "Yes" : "No") : null}/>
         <DocData text="Requirements" value={docType.requirements}/>
-        <DocData text="Event values" value={docType.eventValues?.map(x => x.name.toLowerCase()) ?? null}/>
         <DocData text="Supported events" value={docType.events}/>
         <DocData text="Returns" value={docType.returnType?.name ?? null}/>
     </div>
 
-    {[docType.examples]
-        .filter(x => x !== null)
-        .map(_ => 
-        <button class="examples"
-            style={{ backgroundColor: `#${color()}` }}>
-            <svg class="transition my-auto fill-white" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8.60627 10.8563L5.88752 8.1375C5.85002 8.1 5.82202 8.0595 5.80352 8.016C5.78502 7.9725 5.77552 7.9255 5.77502 7.875C5.77502 7.775 5.80952 7.6875 5.87852 7.6125C5.94752 7.5375 6.03802 7.5 6.15002 7.5H11.85C11.9625 7.5 12.0533 7.5375 12.1223 7.6125C12.1913 7.6875 12.2255 7.775 12.225 7.875C12.225 7.9 12.1875 7.9875 12.1125 8.1375L9.39377 10.8563C9.33127 10.9188 9.26877 10.9625 9.20627 10.9875C9.14377 11.0125 9.07502 11.025 9.00002 11.025C8.92502 11.025 8.85627 11.0125 8.79377 10.9875C8.73127 10.9625 8.66877 10.9188 8.60627 10.8563Z"/>
-                </svg>
-            Examples
-        </button>
-        )}
+    <div class="flex flex-row gap-4">
+        {[docType.examples]
+            .filter(x => x !== null)
+            .map(_ => 
+            <button class="examples"
+                style={{ backgroundColor: `#${color()}` }}>
+                <svg class="transition my-auto fill-white" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.60627 10.8563L5.88752 8.1375C5.85002 8.1 5.82202 8.0595 5.80352 8.016C5.78502 7.9725 5.77552 7.9255 5.77502 7.875C5.77502 7.775 5.80952 7.6875 5.87852 7.6125C5.94752 7.5375 6.03802 7.5 6.15002 7.5H11.85C11.9625 7.5 12.0533 7.5375 12.1223 7.6125C12.1913 7.6875 12.2255 7.775 12.225 7.875C12.225 7.9 12.1875 7.9875 12.1125 8.1375L9.39377 10.8563C9.33127 10.9188 9.26877 10.9625 9.20627 10.9875C9.14377 11.0125 9.07502 11.025 9.00002 11.025C8.92502 11.025 8.85627 11.0125 8.79377 10.9875C8.73127 10.9625 8.66877 10.9188 8.60627 10.8563Z"/>
+                    </svg>
+                Examples
+            </button>
+            )}
+    
+        {[docType.eventValues]
+            .filter(x => x !== null)
+            .map(_ => 
+            <button class="eventValues"
+                style={{ backgroundColor: `#${color()}` }}>
+                <svg class="transition my-auto fill-white" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.60627 10.8563L5.88752 8.1375C5.85002 8.1 5.82202 8.0595 5.80352 8.016C5.78502 7.9725 5.77552 7.9255 5.77502 7.875C5.77502 7.775 5.80952 7.6875 5.87852 7.6125C5.94752 7.5375 6.03802 7.5 6.15002 7.5H11.85C11.9625 7.5 12.0533 7.5375 12.1223 7.6125C12.1913 7.6875 12.2255 7.775 12.225 7.875C12.225 7.9 12.1875 7.9875 12.1125 8.1375L9.39377 10.8563C9.33127 10.9188 9.26877 10.9625 9.20627 10.9875C9.14377 11.0125 9.07502 11.025 9.00002 11.025C8.92502 11.025 8.85627 11.0125 8.79377 10.9875C8.73127 10.9625 8.66877 10.9188 8.60627 10.8563Z"/>
+                    </svg>
+                Event values
+            </button>
+            )}
+    </div>
 
     <div class="example hidden">
         {[docType.examples]
             .filter(x => x !== null)
             .map(x => <Code code={`${x?.join("\n")}`} lang="applescript"/>)}
-        <span class="hidden">{docType.keywords?.filter(x => x)}</span>
     </div>
+    <div class="event-value hidden">
+        {[docType.eventValues]
+            .filter(x => x !== null)
+            .map(x => <Code code={`${x.map(y => {
+                const name = y.name;
+                if (name.includes(" ")) {
+                    const parts = name.split(" ");
+                    return `${parts[0]} event-${parts[1]}`;
+                } else {
+                    return `event-${name}`;
+                }
+            }).join("\n")}`} lang="applescript"/>)}
+    </div>
+    <span class="hidden">{docType.keywords?.filter(x => x)}</span>
 </section>

src/components/docs/Docs.astro

@@ -67,12 +67,20 @@ function type(doc: any): DocType {
 
     document.querySelectorAll("button.examples").forEach((button) => {
         button.addEventListener("click", () => {
-            const example = button.parentElement!!.querySelector(`.example`)!!;
+            const example = button.parentElement!!.parentElement!!.querySelector(`.example`)!!;
             button.querySelector("svg")?.classList.toggle("-r-90");
             example.classList.toggle("hidden");
         });
     });
 
+    document.querySelectorAll("button.eventValues").forEach((button) => {
+        button.addEventListener("click", () => {
+            const eventValue = button.parentElement!!.parentElement!!.querySelector(`.event-value`)!!;
+            button.querySelector("svg")?.classList.toggle("-r-90");
+            eventValue.classList.toggle("hidden");
+        });
+    });
+
     document.querySelectorAll(".share").forEach((button) => {
         button.addEventListener("click", () => {
             const id = button.parentElement!!.querySelector(`.id`)!!.id;

src/style.css

@@ -119,6 +119,11 @@ pre {
         flex flex-row gap-2 text-white;
 }
 
+.eventValues {
+    @apply pl-2 pr-4 py-1 w-fit rounded-md hover:cursor-pointer font-bold
+        flex flex-row gap-2 text-white;
+}
+
 td, th {
     @apply p-1;
 }