diff --git a/package-lock.json b/package-lock.json index 50c02eab58..165edc5aaa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "cva": "^1.0.0-beta.3", "floating-vue": "^5.2.2", "fuse.js": "^7.0.0", + "fuzzysort": "^3.1.0", "highlight.js": "^11.7.0", "laravel-echo": "^1.16.0", "lodash-es": "^4.17.21", @@ -3645,6 +3646,12 @@ "node": ">=10" } }, + "node_modules/fuzzysort": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/fuzzysort/-/fuzzysort-3.1.0.tgz", + "integrity": "sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==", + "license": "MIT" + }, "node_modules/get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", diff --git a/package.json b/package.json index 6e9fa212a5..72c7921853 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "svgo": "svgo -f ./resources/svg/ -r", "test": "vitest run", "test-watch": "npm run test -- --watch --notify", - "frontend-dev": "vite build -c vite-frontend.config.js --watch", + "frontend-dev": "vite -c vite-frontend.config.js", "frontend-build": "vite build -c vite-frontend.config.js", "prettier:format": "prettier --write \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"", "prettier:check": "prettier --check \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"", @@ -63,6 +63,7 @@ "cva": "^1.0.0-beta.3", "floating-vue": "^5.2.2", "fuse.js": "^7.0.0", + "fuzzysort": "^3.1.0", "highlight.js": "^11.7.0", "laravel-echo": "^1.16.0", "lodash-es": "^4.17.21", diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css index 8590841ff9..92ed775a80 100644 --- a/resources/css/components/global-header.css +++ b/resources/css/components/global-header.css @@ -29,119 +29,6 @@ } } -/* Search - ========================================================================== */ -.global-search { - @apply relative flex hidden items-center rounded-md border px-2 py-0 dark:border-dark-300; - transition: 0.12s ease-out; - - .search-input { - @apply w-full max-w-full text-sm dark:bg-dark-600 dark:text-dark-150; - padding-left: 5px; - padding-right: 20px; - [dir='rtl'] & { - padding-left: 20px; - padding-right: 5px; - } - height: 32px; - &:focus { - outline: 0; - } - } - - .global-search-results { - @apply absolute w-full rounded-sm border border-gray-500 bg-white p-0 shadow-lg; - @apply dark:border-dark-900 dark:bg-dark-650; - top: 36px; - left: -1px; - [dir='rtl'] & { - left: auto; - right: -1px; - } /* border offset */ - z-index: 999; - } - - .global-search-loading-indicator { - position: absolute; - right: 8px; - [dir='rtl'] & { - right: auto; - left: 8px; - } - } - - .global-search-result-item { - @apply cursor-pointer border-t dark:border-dark-800 dark:bg-dark-600 dark:text-dark-150; - - &:first-child { - @apply rounded-t border-none; - } - - &:last-child { - @apply rounded-b; - } - } - - .global-search-result-badge { - @apply rounded-sm border bg-gray-200 px-1 text-2xs text-gray; - @apply dark:border-dark-700 dark:bg-dark-600 dark:text-dark-100; - } - - .active { - @apply bg-gray-300 dark:bg-dark-650; - } - - .title { - @apply text-sm font-medium; - } - - .url { - @apply text-2xs text-gray-400; - } - - .status { - float: right; - [dir='rtl'] & { - float: left; - } - background: #ddd; - border-radius: 2px; - padding: 2px 4px; - } - - .icon { - @apply relative cursor-pointer overflow-hidden text-gray dark:text-dark-175; - font-size: 18px; - top: 1px; - width: 20px; - height: 20px; - line-height: 20px; - } - - .reset { - font-size: 21px; - left: -3px; - [dir='rtl'] & { - left: auto; - right: -3px; - } - position: relative; - } - - kbd { - @apply rounded-sm border px-1 pb-px font-sans text-2xs text-gray-500; - } -} - -@media (width >= theme(--breakpoint-lg)) { - .global-search { - @apply flex w-128 max-w-full; - .global-search-results { - @apply w-128; - } - } -} - .site-selector { .v-select { @apply h-full; diff --git a/resources/js/bootstrap/App.vue b/resources/js/bootstrap/App.vue index a4ba875894..079e97a48d 100644 --- a/resources/js/bootstrap/App.vue +++ b/resources/js/bootstrap/App.vue @@ -1,5 +1,4 @@ diff --git a/resources/js/components/command-palette/CommandPalette.vue b/resources/js/components/command-palette/CommandPalette.vue new file mode 100644 index 0000000000..d0009c2108 --- /dev/null +++ b/resources/js/components/command-palette/CommandPalette.vue @@ -0,0 +1,217 @@ + + + diff --git a/resources/js/components/ui/CommandPalette/Item.vue b/resources/js/components/command-palette/Item.vue similarity index 65% rename from resources/js/components/ui/CommandPalette/Item.vue rename to resources/js/components/command-palette/Item.vue index 379da4e1a2..d04679b2a4 100644 --- a/resources/js/components/ui/CommandPalette/Item.vue +++ b/resources/js/components/command-palette/Item.vue @@ -1,7 +1,7 @@