Fix XO

docs/readme.md

@@ -34,6 +34,7 @@ if (dialog.isOpen) {
 - `hotkey` - List of hotkeys. Default value: `$mod+k`.
 - `placeholder` - Placeholder text for the search input. Default value: `Type a command or search...`.
 - `note` - The note in the footer of the dialog box. Default value show number of options.
+- `showCloseButton` - Boolean value that indicates whether the close button is visible. Default value: `false`.
 
 ### Custom events
 

examples/example.js

@@ -1,4 +1,4 @@
-import 'https://esm.run/cmd-dialog'; // eslint-disable-line import/no-unassigned-import
+import 'https://esm.run/cmd-dialog';
 
 const dialog = document.querySelector('cmd-dialog');
 

package.json

@@ -53,6 +53,7 @@
       "browser"
     ],
     "rules": {
+      "import/no-unassigned-import": "off",
       "@typescript-eslint/consistent-type-definitions": "off",
       "@typescript-eslint/naming-convention": "off",
       "@typescript-eslint/no-non-null-asserted-optional-chain": "off",

src/cmd-dialog.ts

@@ -9,7 +9,6 @@ import Fuse from 'fuse.js';
 import {tinykeys} from 'tinykeys';
 import {type Action} from './action.js';
 import {type CmdAction} from './cmd-action.js';
-import './cmd-action.js'; // eslint-disable-line import/no-unassigned-import
 import style from './style.css?inline'; // eslint-disable-line n/file-extension-in-import
 
 @customElement('cmd-dialog')
@@ -31,6 +30,11 @@ export class CmdDialog extends LitElement {
 	 */
 	@property({type: String}) note = '';
 
+	/**
+	 * Show the close button (default: false).
+	 */
+	@property({type: Boolean}) showCloseButton = false;
+
 	/**
 	 * Open dialog hotkey
 	 * Meta+K (Mac) or Ctrl+K (Windows)
@@ -259,7 +263,7 @@ export class CmdDialog extends LitElement {
 						placeholder="${this.placeholder}"
 						autofocus
 					>
-					<button type="button" @click="${this.close}">
+					<button type="button" @click="${this.close}" class="${this.showCloseButton ? '' : 'hidden'}">
 						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
 						</svg>