Skip to content

Commit 5efa002

Browse files
HugoRCDHugoRCD
committed
up
1 parent 8e26071 commit 5efa002

File tree

7 files changed

+118
-39
lines changed

7 files changed

+118
-39
lines changed

‎apps/shelve/app/components/CommandButton.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup lang="ts">
2+
import { Motion } from 'motion-v'
3+
4+
defineProps<{
5+
icon: string
6+
label: string
7+
color?: string
8+
loading?: boolean
9+
disabled?: boolean
10+
}>()
11+
12+
defineEmits<(e: 'click') => void>()
13+
</script>
14+
15+
<template>
16+
<Motion :layout="true" class="outline-none">
17+
<BgHighlight rounded="full" class="hover:scale-105 cursor-pointer" :class="{ 'opacity-50': disabled }">
18+
<UTooltip :text="label" :content="{ side: 'top' }">
19+
<div class="navbar">
20+
<div
21+
class="nav-item p-0.5!"
22+
:class="{ [`text-${color}-500`]: color }"
23+
@click="!disabled && !loading && $emit('click')"
24+
>
25+
<UIcon v-if="loading" name="lucide:loader" class="text-lg animate-spin" />
26+
<UIcon v-else :name="icon" class="text-lg" />
27+
</div>
28+
</div>
29+
</UTooltip>
30+
</BgHighlight>
31+
</Motion>
32+
</template>
33+
34+
<style scoped>
35+
@import "tailwindcss";
36+
37+
.navbar {
38+
@apply backdrop-blur-lg flex items-center gap-1 sm:gap-2 rounded-full p-2;
39+
box-shadow: 0 7px 20px 12px rgb(65 65 65 / 10%);
40+
}
41+
42+
.dark .navbar {
43+
box-shadow: 0 7px 20px 9px rgb(0 0 0 / 18%);
44+
}
45+
46+
.nav-item {
47+
@apply rounded-full p-2 flex items-center justify-center;
48+
@apply hover:bg-(--ui-bg-muted) hover:shadow-md;
49+
}
50+
</style>

‎apps/shelve/app/components/CommandPalette.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ function playAction(item: CommandItem, index: number) {
312312
</template>
313313

314314
<style scoped>
315-
@import "tailwindcss" theme(static);
315+
@import "tailwindcss";
316316
317317
.screen-container {
318318
@apply bg-(--ui-bg)/80 m-2 rounded-lg max-h-[400px] overflow-hidden;

‎apps/shelve/app/components/layout/Navbar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ defineShortcuts({
148148
</template>
149149

150150
<style scoped>
151-
@import "tailwindcss" theme(static);
151+
@import "tailwindcss";
152152
153153
.navbar-wrapper {
154154
@apply absolute z-[99] bottom-4 sm:bottom-8 left-1/2 -translate-x-1/2 will-change-auto;

‎apps/shelve/app/components/variable/Selector.vue

+35-35
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ const props = defineProps<{
66
variables: Variable[]
77
}>()
88
9-
const selectedVariables = defineModel<Variable[]>({ required: true })
9+
const route = useRoute()
10+
const projectId = route.params.projectId as string
11+
const selectedVariables = useSelectedVariables(projectId)
1012
1113
const { deleteVariables } = useVariablesService()
1214
@@ -46,40 +48,38 @@ function openDeleteModal() {
4648
</script>
4749

4850
<template>
49-
<div>
50-
<Transition name="bezier" mode="out-in">
51-
<div v-if="selectedVariables.length > 0" class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
52-
<div class="dark flex items-center text-(--ui-text-highlighted) gap-4 rounded-md border px-5 py-1.5 border-(--ui-border) bg-(--ui-bg) shadow-lg">
53-
<span class="text-nowrap text-sm font-semibold">
54-
{{ selectedVariables.length }} variable{{ selectedVariables.length > 1 ? 's' : '' }} selected
55-
</span>
56-
<div class="flex gap-2">
57-
<VariableGithubSync :selected-variables />
58-
<UPopover mode="hover" arrow>
59-
<UButton icon="lucide:clipboard-plus" variant="ghost" />
60-
<template #content>
61-
<UCard>
62-
<div class="flex flex-col gap-2">
63-
<UTooltip v-for="env in teamEnv" :key="env.id" :text="`Copy variables for ${env.name}`" :content="{ side: 'right' }">
64-
<UButton :disabled="loading" :label="capitalize(env.name)" variant="soft" @click="copyEnv(selectedVariables, env.id)" />
65-
</UTooltip>
66-
</div>
67-
</UCard>
68-
</template>
69-
</UPopover>
70-
<UTooltip text="Select all visible variables">
71-
<UButton variant="ghost" icon="lucide:text-select" @click="selectAllVisible" />
72-
</UTooltip>
73-
<UTooltip text="Clear selection">
74-
<UButton variant="ghost" icon="lucide:x" @click="selectedVariables = []" />
75-
</UTooltip>
76-
<USeparator orientation="vertical" class="h-auto" />
77-
<UTooltip text="Delete selected variables">
78-
<UButton color="error" variant="ghost" icon="heroicons:trash" :loading @click="openDeleteModal" />
79-
</UTooltip>
80-
</div>
51+
<Transition name="bezier" mode="out-in">
52+
<div v-if="selectedVariables.length > 0" class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
53+
<div class="dark flex items-center text-(--ui-text-highlighted) gap-4 rounded-md border px-5 py-1.5 border-(--ui-border) bg-(--ui-bg) shadow-lg">
54+
<span class="text-nowrap text-sm font-semibold">
55+
{{ selectedVariables.length }} variable{{ selectedVariables.length > 1 ? 's' : '' }} selected
56+
</span>
57+
<div class="flex gap-2">
58+
<VariableGithubSync :selected-variables />
59+
<UPopover mode="hover" arrow>
60+
<UButton icon="lucide:clipboard-plus" variant="ghost" />
61+
<template #content>
62+
<UCard>
63+
<div class="flex flex-col gap-2">
64+
<UTooltip v-for="env in teamEnv" :key="env.id" :text="`Copy variables for ${env.name}`" :content="{ side: 'right' }">
65+
<UButton :disabled="loading" :label="capitalize(env.name)" variant="soft" @click="copyEnv(selectedVariables, env.id)" />
66+
</UTooltip>
67+
</div>
68+
</UCard>
69+
</template>
70+
</UPopover>
71+
<UTooltip text="Select all visible variables">
72+
<UButton variant="ghost" icon="lucide:text-select" @click="selectAllVisible" />
73+
</UTooltip>
74+
<UTooltip text="Clear selection">
75+
<UButton variant="ghost" icon="lucide:x" @click="selectedVariables = []" />
76+
</UTooltip>
77+
<USeparator orientation="vertical" class="h-auto" />
78+
<UTooltip text="Delete selected variables">
79+
<UButton color="error" variant="ghost" icon="heroicons:trash" :loading @click="openDeleteModal" />
80+
</UTooltip>
8181
</div>
8282
</div>
83-
</Transition>
84-
</div>
83+
</div>
84+
</Transition>
8585
</template>

‎apps/shelve/app/components/variable/actions/ToggleSelection.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
const route = useRoute()
3+
const projectId = route.params.projectId as string
4+
const variables = useVariables(projectId)
5+
const selectedVariables = useSelectedVariables(projectId)
6+
7+
function selectAll() {
8+
selectedVariables.value = variables.value
9+
}
10+
11+
function deselectAll() {
12+
selectedVariables.value = []
13+
}
14+
</script>
15+
16+
<template>
17+
<CommandButton
18+
icon="lucide:text-select"
19+
label="Select all variables"
20+
@click="selectAll()"
21+
/>
22+
</template>

‎apps/shelve/app/composables/useVariables.ts

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ function removeDuplicateKeyValues(variables: Array<{ key: string, value: string,
1212
})
1313
}
1414

15+
export function useSelectedVariables(projectId: string): Ref<Variable[]> {
16+
return useState<Variable[]>(`selected-variables-${projectId}`, () => [])
17+
}
18+
1519
export function useVariablesService() {
1620
const route = useRoute()
1721
const projectId = route.params.projectId as string

‎apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/variables.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const { loading, fetchVariables } = useVariablesService()
99
1010
if (!variables.value) fetchVariables()
1111
12-
const selectedVariables = ref<Variable[]>([])
12+
const selectedVariables = useSelectedVariables(projectId)
1313
const lastSelectedIndex = ref<number | null>(null)
1414
const searchTerm = ref('')
1515
const selectedEnvironment = ref([])
@@ -100,7 +100,7 @@ const isVariableSelected = (variable: Variable) => {
100100
<USelectMenu v-model="selectedEnvironment" multiple :items class="w-full" placeholder="Select environment" />
101101
</div>
102102
</div>
103-
<LazyVariableSelector v-model="selectedVariables" :variables="filteredVariables" />
103+
<LazyVariableSelector :variables="filteredVariables" />
104104
<div v-if="!loading" class="flex flex-col gap-4">
105105
<div v-for="variable in filteredVariables" :key="variable.id">
106106
<VariableItem
@@ -121,5 +121,8 @@ const isVariableSelected = (variable: Variable) => {
121121
</UCard>
122122
</div>
123123
</div>
124+
<!-- <Teleport defer to="#command-items">
125+
<VariableActionsToggleSelection />
126+
</Teleport>-->
124127
</div>
125128
</template>

0 commit comments

Comments
 (0)