-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
276 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
packages/app-frontend/src/features/apps/AppSelectPane.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <script lang="ts"> | ||
| import AppSelectPaneItem from './AppSelectPaneItem.vue' | ||
| import { watch, defineComponent, ref, computed } from '@vue/composition-api' | ||
| import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils' | ||
| import { useApps, pendingSelectAppId, scanLegacyApps } from '@front/features/apps' | ||
| import { useRouter } from '@front/util/router' | ||
| import { useBridge } from '../bridge' | ||
| export default defineComponent({ | ||
| components: { | ||
| AppSelectPaneItem, | ||
| }, | ||
| setup () { | ||
| const router = useRouter() | ||
| const { bridge } = useBridge() | ||
| const { | ||
| apps, | ||
| currentAppId, | ||
| currentApp, | ||
| selectApp, | ||
| } = useApps() | ||
| watch(currentAppId, value => { | ||
| if (pendingSelectAppId.value !== value) { | ||
| pendingSelectAppId.value = value | ||
| bridge.send(BridgeEvents.TO_BACK_APP_SELECT, value) | ||
| } | ||
| }, { | ||
| immediate: true, | ||
| }) | ||
| let initDefaultAppId = false | ||
| watch(apps, () => { | ||
| if ((!currentApp.value || (SharedData.pageConfig?.defaultSelectedAppId && !initDefaultAppId)) && apps.value.length) { | ||
| let targetId: string | ||
| if (SharedData.pageConfig?.defaultSelectedAppId) { | ||
| targetId = SharedData.pageConfig.defaultSelectedAppId | ||
| initDefaultAppId = true | ||
| } else if (currentAppId.value !== apps.value[0].id) { | ||
| targetId = apps.value[0].id | ||
| } | ||
| if (targetId) { | ||
| router.push({ | ||
| params: { | ||
| appId: targetId, | ||
| componentId: null, | ||
| }, | ||
| }) | ||
| } | ||
| } | ||
| }, { | ||
| immediate: true, | ||
| }) | ||
| // Search | ||
| const search = ref('') | ||
| const filteredApps = computed(() => { | ||
| if (!search.value) return apps.value | ||
| const searchValue = search.value.toLowerCase() | ||
| return apps.value.filter(app => { | ||
| return app.name.toLowerCase().includes(searchValue) | ||
| }) | ||
| }) | ||
| return { | ||
| currentApp, | ||
| filteredApps, | ||
| selectApp, | ||
| search, | ||
| scanLegacyApps, | ||
| } | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex flex-col"> | ||
| <div class="flex-none border-b border-gray-200 dark:border-gray-800 flex items-center space-x-1 h-[40px] pr-1"> | ||
| <VueInput | ||
| v-model="search" | ||
| icon-left="search" | ||
| placeholder="Find apps..." | ||
| select-all | ||
| class="search flat flex-1" | ||
| /> | ||
|
|
||
| <VueButton | ||
| v-if="$shared.legacyApps" | ||
| v-tooltip="'Scan apps'" | ||
| class="flat icon-button" | ||
| icon-left="cached" | ||
| @click="scanLegacyApps()" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="overflow-y-auto flex-1"> | ||
| <AppSelectPaneItem | ||
| v-for="item of filteredApps" | ||
| :key="item.id" | ||
| :app="item" | ||
| :selected="item === currentApp" | ||
| @select="selectApp(item.id)" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </template> |
95 changes: 95 additions & 0 deletions
95
packages/app-frontend/src/features/apps/AppSelectPaneItem.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <script lang="ts"> | ||
| import { defineComponent, computed } from '@vue/composition-api' | ||
| import { useVueVersionCheck } from './vue-version-check' | ||
| export default defineComponent({ | ||
| props: { | ||
| app: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| selected: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| }, | ||
| setup (props) { | ||
| const { getLatestVersion } = useVueVersionCheck() | ||
| const latestVersion = computed(() => getLatestVersion(props.app.version)) | ||
| const hasNewVersion = computed(() => latestVersion.value !== props.app.version) | ||
| return { | ||
| latestVersion, | ||
| hasNewVersion, | ||
| } | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <VueButton | ||
| class="app-button leading-tight w-full" | ||
| :class="{ | ||
| 'flat': !selected, | ||
| 'text-green-500': selected, | ||
| }" | ||
| @click="$emit('select')" | ||
| > | ||
| <div class="flex items-center"> | ||
| <span class="truncate flex-1">{{ app.name }}</span> | ||
| <span class="flex-none flex items-center"> | ||
| <img | ||
| src="~@front/assets/vue-logo.svg" | ||
| class="w-6 h-6" | ||
| alt="Vue" | ||
| > | ||
| <span>{{ app.version }}</span> | ||
| <span | ||
| v-if="hasNewVersion" | ||
| class="ml-2 text-sm text-green-500 flex items-center space-x-0.5" | ||
| > | ||
| <VueIcon | ||
| icon="new_releases" | ||
| class="w-5 h-5" | ||
| /> | ||
| <span>{{ latestVersion }}</span> | ||
| </span> | ||
| </span> | ||
|
|
||
| <template v-if="$shared.debugInfo"> | ||
| <span | ||
| v-tooltip="'id'" | ||
| class="text-white px-1 rounded bg-gray-500 mx-1" | ||
| > | ||
| {{ app.id }} | ||
| </span> | ||
| </template> | ||
| </div> | ||
| <div | ||
| v-if="app.iframe" | ||
| class="flex items-center space-x-1 text-2xs font-mono text-gray-500" | ||
| > | ||
| <VueIcon | ||
| icon="web" | ||
| class="w-4 h-4" | ||
| /> | ||
| <span>{{ app.iframe }}</span> | ||
| </div> | ||
| </VueButton> | ||
| </template> | ||
|
|
||
| <style lang="postcss" scoped> | ||
| .app-button { | ||
| @apply rounded-none text-left h-auto py-1.5; | ||
| > >>> .content { | ||
| @apply min-w-full justify-start; | ||
| > .default-slot { | ||
| @apply w-full; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { ref } from '@vue/composition-api' | ||
|
|
||
| export const showAppsSelector = ref(true) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters