update examples

example/applauncher/applauncher.js

@@ -1,45 +1,45 @@
-const { query } = await Service.import('applications');
-const WINDOW_NAME = 'applauncher';
+const { query } = await Service.import("applications")
+const WINDOW_NAME = "applauncher"
 
 /** @param {import('resource:///com/github/Aylur/ags/service/applications.js').Application} app */
 const AppItem = app => Widget.Button({
     on_clicked: () => {
-        App.closeWindow(WINDOW_NAME);
-        app.launch();
+        App.closeWindow(WINDOW_NAME)
+        app.launch()
     },
     attribute: { app },
     child: Widget.Box({
         children: [
             Widget.Icon({
-                icon: app.icon_name || '',
+                icon: app.icon_name || "",
                 size: 42,
             }),
             Widget.Label({
-                class_name: 'title',
+                class_name: "title",
                 label: app.name,
                 xalign: 0,
-                vpack: 'center',
-                truncate: 'end',
+                vpack: "center",
+                truncate: "end",
             }),
         ],
     }),
-});
+})
 
 const Applauncher = ({ width = 500, height = 500, spacing = 12 }) => {
     // list of application buttons
-    let applications = query('').map(AppItem);
+    let applications = query("").map(AppItem)
 
     // container holding the buttons
     const list = Widget.Box({
         vertical: true,
         children: applications,
         spacing,
-    });
+    })
 
     // repopulate the box, so the most frequent apps are on top of the list
     function repopulate() {
-        applications = query('').map(AppItem);
-        list.children = applications;
+        applications = query("").map(AppItem)
+        list.children = applications
     }
 
     // search entry
@@ -50,16 +50,16 @@ const Applauncher = ({ width = 500, height = 500, spacing = 12 }) => {
         // to launch the first item on Enter
         on_accept: () => {
             if (applications[0]) {
-                App.toggleWindow(WINDOW_NAME);
-                applications[0].attribute.app.launch();
+                App.toggleWindow(WINDOW_NAME)
+                applications[0].attribute.app.launch()
             }
         },
 
         // filter out the list
         on_change: ({ text }) => applications.forEach(item => {
-            item.visible = item.attribute.app.match(text ?? '');
+            item.visible = item.attribute.app.match(text ?? "")
         }),
-    });
+    })
 
     return Widget.Box({
         vertical: true,
@@ -69,39 +69,37 @@ const Applauncher = ({ width = 500, height = 500, spacing = 12 }) => {
 
             // wrap the list in a scrollable
             Widget.Scrollable({
-                hscroll: 'never',
-                css: `
-                    min-width: ${width}px;
-                    min-height: ${height}px;
-                `,
+                hscroll: "never",
+                css: `min-width: ${width}px;`
+                    + `min-height: ${height}px;`,
                 child: list,
             }),
         ],
         setup: self => self.hook(App, (_, windowName, visible) => {
             if (windowName !== WINDOW_NAME)
-                return;
+                return
 
             // when the applauncher shows up
             if (visible) {
-                repopulate();
-                entry.text = '';
-                entry.grab_focus();
+                repopulate()
+                entry.text = ""
+                entry.grab_focus()
             }
         }),
-    });
-};
+    })
+}
 
 // there needs to be only one instance
 export const applauncher = Widget.Window({
     name: WINDOW_NAME,
-    setup: self => self.keybind('Escape', () => {
+    setup: self => self.keybind("Escape", () => {
         App.closeWindow(WINDOW_NAME)
     }),
     visible: false,
-    keymode: 'exclusive',
+    keymode: "exclusive",
     child: Applauncher({
         width: 500,
         height: 500,
         spacing: 12,
     }),
-});
+})

example/applauncher/config.js

@@ -1,5 +1,5 @@
-import { applauncher } from './applauncher.js';
+import { applauncher } from "./applauncher.js"
 
 App.config({
     windows: [applauncher],
-});
+})

example/icon-browser/icon-browser.js

@@ -1,74 +1,73 @@
 #!/usr/bin/env -S ags -b icon-browser -c
 
-import Gtk from 'gi://Gtk?version=3.0';
+import Gtk from "gi://Gtk?version=3.0"
 
 const IconPicker = () => {
     const selected = Widget.Label({
-        css: 'font-size: 1.2em;',
-        label: 'Click on an icon te get its name',
+        css: "font-size: 1.2em;",
+        label: "Click on an icon te get its name",
         selectable: true,
-    });
+    })
 
     const flowbox = Widget.FlowBox({
         min_children_per_line: 7,
         row_spacing: 12,
         column_spacing: 12,
-        vpack: 'start',
-        hpack: 'start',
+        vpack: "start",
+        hpack: "start",
         setup: self => {
-            self.connect('child-activated', (_, child) => {
-                selected.label = child.get_child()?.iconName || '';
-            });
+            self.connect("child-activated", (_, child) => {
+                selected.label = child.get_child()?.iconName || ""
+            })
 
             Gtk.IconTheme.get_default().list_icons(null).sort().map(icon => {
-                !icon.endsWith('.symbolic') && self.insert(Widget.Icon({
+                !icon.endsWith(".symbolic") && self.insert(Widget.Icon({
                     icon,
                     size: 38,
-                }), -1);
-            });
+                }), -1)
+            })
 
-            self.show_all();
+            self.show_all()
         },
-    });
+    })
 
     const entry = Widget.Entry({
-        placeholder_text: 'Type to seach...',
-        primary_icon_name: 'system-search-symbolic',
+        placeholder_text: "Type to seach...",
+        primary_icon_name: "system-search-symbolic",
         on_change: ({ text }) => flowbox.get_children().forEach(child => {
-            child.visible = child.get_child().iconName.includes(text);
+            child.visible = child.get_child().iconName.includes(text)
         }),
-    });
+    })
 
     return Widget.Box({
-        css: 'padding: 30px;',
+        css: "padding: 30px;",
         spacing: 20,
         vertical: true,
         children: [
             entry,
             Widget.Scrollable({
-                hscroll: 'never',
-                vscroll: 'always',
+                hscroll: "never",
+                vscroll: "always",
                 hexpand: true,
                 vexpand: true,
-                css:
-                    'min-width: 400px;' +
-                    'min-height: 500px;',
+                css: "min-width: 400px;"
+                    + "min-height: 500px;",
                 child: flowbox,
             }),
             selected,
         ],
-    });
-};
+    })
+}
 
 const win = new Gtk.Window({
-    name: 'icon-browser',
+    name: "icon-browser",
     child: IconPicker(),
-});
+})
 
-win.show_all();
-win.connect('delete-event', () => {
-    App.quit();
-    return true;
-});
+win.show_all()
+win.connect("delete-event", () => {
+    App.quit()
+    return true
+})
 
-export default { windows: [win] };
+export default { windows: [win] }