true1ann/blhs
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

Implement basic search

Browse source
This commit is contained in:
Annie 2025-04-06 00:04:43 +03:00
parent ab3380b68e
commit 386757cbb9
14 changed files with 197 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
dist/assets/bootstrap-icons-BOrJxbIo.woff vendored Normal file
View file

Binary file not shown.

BIN
dist/assets/bootstrap-icons-BtvjY1KL.woff2 vendored Normal file
View file

Binary file not shown.

1
dist/assets/index-DTY-5c6x.css vendored
View file

@ -1 +0,0 @@
body{margin:0;padding:0;background-color:gray}*{box-sizing:border-box}#applist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always}#applist-wrapper{width:100%}.applist-page{scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,25%);grid-template-rows:repeat(5,20%);place-items:center;align-items:start;min-width:100vw;max-width:100vw;width:100vw;padding-bottom:25%;padding-top:5%}.applist-page>*:not(.section){width:auto;margin-bottom:5%;display:flex;flex-direction:column;align-items:center}.applist-page:has(.section){display:flex;flex-direction:column;align-items:center;padding:5%;gap:5%}#dock{padding:5%;margin:5%;gap:15px;border-radius:24px;background-color:#00000040;border:1px solid white;display:flex;justify-content:center;position:fixed;bottom:0;left:0;right:0}.section{padding:5%;border-radius:15px;background-color:#00000080;border:1px solid white;width:100%;color:#fff}.ui-button{border:none;border:1px solid white;border-radius:6px;padding:2%;background-color:#00000080;color:#fff;margin:1%}.app-icon[data-v-c4a1272c]{display:flex;align-items:center;flex-direction:column;width:max-content;height:max-content}.app-icon .app-icon[data-v-c4a1272c]>*:nth-child(n+2){padding-bottom:10px}.app-image[data-v-c4a1272c]{width:14vw;height:auto;border-radius:12px}.app-label[data-v-c4a1272c]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10pt;color:var(--label-color)}.app-package[data-v-c4a1272c]{font-size:1px;color:#0000}img[data-v-27ae4006]{width:15%;height:auto}

17
dist/assets/index-IwuFnyur.js vendored
View file

File diff suppressed because one or more lines are too long

5
dist/assets/index-_sk3xYAV.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

17
dist/assets/index-mum_jNSN.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

BIN
dist/bundle.zip vendored
View file

Binary file not shown.

4
dist/index.html vendored
View file

@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SpringBoard</title> <title>SpringBoard</title>
<script type="module" crossorigin src="/assets/index-IwuFnyur.js"></script> <script type="module" crossorigin src="/assets/index-mum_jNSN.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DTY-5c6x.css"> <link rel="stylesheet" crossorigin href="/assets/index-_sk3xYAV.css">
</head> </head>
<body style="background-color:transparent;"> <body style="background-color:transparent;">
<div id="app"></div> <div id="app"></div>

2
package.json
View file

@ -11,6 +11,8 @@
}, },
"dependencies": { "dependencies": {
"@bridgelauncher/api-mock": "^0.1.0", "@bridgelauncher/api-mock": "^0.1.0",
"bootstrap-icons": "^1.11.3",
"fuzzy": "^0.1.3",
"vue": "^3.5.13" "vue": "^3.5.13"
}, },
"devDependencies": { "devDependencies": {

17
pnpm-lock.yaml generated
View file

@ -11,6 +11,12 @@ importers:
'@bridgelauncher/api-mock': '@bridgelauncher/api-mock':
specifier: ^0.1.0 specifier: ^0.1.0
version: 0.1.0 version: 0.1.0
bootstrap-icons:
specifier: ^1.11.3
version: 1.11.3
fuzzy:
specifier: ^0.1.3
version: 0.1.3
vue: vue:
specifier: ^3.5.13 specifier: ^3.5.13
version: 3.5.13(typescript@5.8.2) version: 3.5.13(typescript@5.8.2)
@ -424,6 +430,9 @@ packages:
'@vue/shared@3.5.13': '@vue/shared@3.5.13':
resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==} resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
bootstrap-icons@1.11.3:
resolution: {integrity: sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==}
braces@3.0.3: braces@3.0.3:
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -461,6 +470,10 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin] os: [darwin]
fuzzy@0.1.3:
resolution: {integrity: sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==}
engines: {node: '>= 0.6.0'}
immutable@5.1.1: immutable@5.1.1:
resolution: {integrity: sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==} resolution: {integrity: sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==}
@ -858,6 +871,8 @@ snapshots:
'@vue/shared@3.5.13': {} '@vue/shared@3.5.13': {}
bootstrap-icons@1.11.3: {}
braces@3.0.3: braces@3.0.3:
dependencies: dependencies:
fill-range: 7.1.1 fill-range: 7.1.1
@ -912,6 +927,8 @@ snapshots:
fsevents@2.3.3: fsevents@2.3.3:
optional: true optional: true
fuzzy@0.1.3: {}
immutable@5.1.1: {} immutable@5.1.1: {}
is-extglob@2.1.1: is-extglob@2.1.1:

1
src/App.vue
View file

@ -32,6 +32,7 @@ async function loadApps() {
const resp = await fetch(Bridge.getAppsURL()) const resp = await fetch(Bridge.getAppsURL())
const data = await resp.json() const data = await resp.json()
apps.value = data.apps.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' })) apps.value = data.apps.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
window.springboard.apps = apps.value;
} }
loadApps() loadApps()

151
src/components/Search.vue
View file

@ -1,9 +1,152 @@
<template> <template>
<button id="search-button" @click="openSearch()">Search</button> <Suspense>
<div id="search_background">
<div class="section" id="search_results">
<AppIcon
v-for="(app, index) in filteredApps"
:key="app.packageName || index"
:packageName="app.packageName"
:label="app.label"
/>
</div>
</div>
</Suspense>
<div id="search_maindiv">
<input
type="text"
@focus="openSearch"
placeholder="Search"
>
<i class="bi bi-x-circle"></i>
</div>
</template> </template>
<script setup> <script setup>
async function openSearch() { import { ref } from 'vue';
alert('Not yet'); import fuzzy from 'fuzzy';
import AppIcon from './AppIcon.vue';
const filteredApps = ref([]);
function openSearch() {
const inputElement = document.querySelector('#search_maindiv input');
const backgroundElement = document.querySelector('#search_background');
function handleInput() {
const value = inputElement.value.toString();
const apps = window.springboard.apps || [];
const searchList = apps.map(app => app.label);
const results = fuzzy.filter(value, searchList);
filteredApps.value = results
.slice(0, 8)
.map(result => apps[result.index]);
}
if (!inputElement.hasAttribute('data-added')) {
inputElement.addEventListener('input', handleInput);
inputElement.addEventListener('blur', async () => {
await new Promise(resolve => setTimeout(resolve, 100));
inputElement.value = '';
backgroundElement.style.opacity = '0';
backgroundElement.style.pointerEvents = 'none';
inputElement.removeEventListener('input', handleInput);
filteredApps.value = [];
inputElement.removeAttribute('data-added');
});
inputElement.setAttribute('data-added', 'true');
}
backgroundElement.style.opacity = '1';
backgroundElement.style.pointerEvents = 'all';
} }
</script> </script>
<style lang="scss" scoped>
@import 'bootstrap-icons/font/bootstrap-icons.css';
#search_results {
scroll-snap-align: center;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(2, 50%);
place-items: center;
align-items: start;
}
#search_background {
position: fixed;
opacity: 0;
pointer-events: none;
z-index: 99;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.25);
padding: 5%;
transition: opacity 0.25s ease-in-out;
}
#search_maindiv {
z-index: 999;
width: 25% !important;
border: none;
border: 1px solid white;
border-radius: 300px;
padding: 2% 4%;
background-color: rgba(0,0,0,0.25);
color: white;
margin-bottom: 3%;
display: flex;
transition: all 0.1s ease-in-out;
&:has(input:focus) {
transition: all 0.25s ease-in-out;
transform:translateY(-550%);
width: 80% !important;
& > i {
transition: all 0.5s ease-in-out;
opacity: 0.5;
pointer-events: all;
width: max-content;
}
& > input {
text-align: left;
}
}
&:has(input:not(:placeholder-shown)) {
& > i {
opacity: 1 !important;
}
}
}
input {
background-color: transparent;
border: none;
outline: none;
color: white;
width: 100% !important;
text-align: center;
&::placeholder {
color: white;
}
&:focus {
&::placeholder {
color: transparent;
}
}
}
i {
position: relative;
right: 0;
opacity: 0.0;
transition: all 0.25s ease-in-out;
pointer-events: none;
width: 0;
color: white !important;
}
</style>

5
src/main.js
View file

@ -12,4 +12,9 @@ if (!window.Bridge) {
Bridge.requestSetBridgeTheme('system'); Bridge.requestSetBridgeTheme('system');
window.springboard = {
apps: [],
labelColor: 'ffffff'
}
createApp(App).mount('#app') createApp(App).mount('#app')

13
src/style.scss
View file

@ -20,7 +20,7 @@ body {
} }
.applist-page { .applist-page {
scroll-snap-align: start; scroll-snap-align: center;
display: grid; display: grid;
grid-template-columns: repeat(4, 25%); grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(5, 20%); grid-template-rows: repeat(5, 20%);
@ -79,17 +79,6 @@ body {
color: white; color: white;
} }
#search-button {
border: none;
border: 1px solid white;
border-radius: 300px;
padding: 2% 4%;
background-color: rgba(0,0,0,0.25);
color: white;
width: max-content;
margin-bottom: 3%;
}
.ui-button { .ui-button {
border: none; border: none;
border: 1px solid white; border: 1px solid white;