-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* create pages/sbc/dashboard file * update header with main nav links * create dashboard layout and rename other layout files * create dashboard sub header component * add translations for dashboard subheader * separate tab sections into components * add name input to api key modal, fix dark mode colours * make api key copyable * create modal on revoke api click * add translations for dashboard page * start full screen menu for mobile menu * separate content nav creation into utils * provide nav item values in layouts to main header component * add mobile menu sub items * fix mobile styling for dashboard sub header * set ssr back to true
- Loading branch information
Showing
25 changed files
with
1,057 additions
and
199 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
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,49 @@ | ||
| <script setup lang="ts"> | ||
| defineProps<{ | ||
| navItems: AccordianNavItem[] | undefined | ||
| }>() | ||
| </script> | ||
| <template> | ||
| <div class="flex flex-col"> | ||
| <!-- creates an accordian for each object in navItems array --> | ||
| <UAccordion | ||
| :items="navItems || []" | ||
| multiple | ||
| > | ||
| <!-- default slot is the accordian button itself, so we use a custom button variant here to match theme --> | ||
| <template #default="{ item, open }"> | ||
| <UButton | ||
| variant="accordian_trigger" | ||
| > | ||
| <span class="truncate">{{ item.label }}</span> | ||
|
|
||
| <template #trailing> | ||
| <UIcon | ||
| name="i-mdi-menu-up" | ||
| class="ms-auto size-7 transition-transform duration-200" | ||
| :class="[!open && 'rotate-180']" | ||
| /> | ||
| </template> | ||
| </UButton> | ||
| </template> | ||
| <!-- item slot is the content inside each accordian, so for each accordian item, pass the children array into UVerticalNavigation --> | ||
| <template #item="{ item }"> | ||
| <UVerticalNavigation | ||
| class="mx-2" | ||
| :links="item.children" | ||
| :ui="{ | ||
| wrapper: 'border-s border-gray-500 dark:border-[#94A3B8] space-y-2', | ||
| base: 'group block border-s -ms-px leading-6 before:hidden focus-visible:rounded', | ||
| padding: 'p-0 ps-4', | ||
| rounded: '', | ||
| font: '', | ||
| ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-white', | ||
| active: 'text-primary-500 dark:text-[#7BB5EF] border-[#94A3B8] dark:border-[#7BB5EF] font-semibold', | ||
| inactive: 'border-transparent hover:border-gray-900 dark:hover:border-white text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white' | ||
| }" | ||
| /> | ||
| </template> | ||
| </UAccordion> | ||
| </div> | ||
| </template> |
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,58 @@ | ||
| <script setup lang="ts"> | ||
| // import type { FormError, FormSubmitEvent } from '#ui/types' | ||
| defineProps<{ | ||
| title: string, | ||
| content: string, | ||
| formLabel: string, | ||
| submitFn: Function | ||
| }>() | ||
| const modalOpen = defineModel({ type: Boolean, default: false }) | ||
| const state = reactive({ | ||
| name: undefined | ||
| }) | ||
| // const validate = (state: any): FormError[] => { | ||
| // const errors = [] | ||
| // if (!state.name) { | ||
| // errors.push({ path: 'name', message: 'Required' }) | ||
| // } | ||
| // return errors | ||
| // } | ||
| // function onSubmit (event: FormSubmitEvent<any>) { | ||
| // // Do something with data | ||
| // console.log(event.data) | ||
| // } | ||
| watch(modalOpen, () => { | ||
| if (!modalOpen.value) { | ||
| state.name = undefined | ||
| } | ||
| }) | ||
| </script> | ||
| <template> | ||
| <UModal v-model="modalOpen"> | ||
| <UCard> | ||
| <template #header> | ||
| <div class="flex flex-col"> | ||
| <span class="text-lg font-semibold text-bcGovColor-darkGray dark:text-white">{{ title }}</span> | ||
| </div> | ||
| </template> | ||
| <span class="text-bcGovColor-midGray dark:text-[#d1d5db]">{{ content }}</span> | ||
| <template #footer> | ||
| <UForm :state="state" class="space-y-4" autocomplete="off" @submit="submitFn"> | ||
| <UFormGroup label="Name" name="name"> | ||
| <UInput v-model="state.name" /> | ||
| </UFormGroup> | ||
|
|
||
| <UButton type="submit"> | ||
| Submit | ||
| </UButton> | ||
| </UForm> | ||
| </template> | ||
| </UCard> | ||
| </UModal> | ||
| </template> |
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,33 @@ | ||
| <script setup lang="ts"> | ||
| const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' }) | ||
| </script> | ||
| <template> | ||
| <UCard> | ||
| <template #header> | ||
| <div class="flex items-center gap-4"> | ||
| <UAvatar | ||
| size="3xl" | ||
| src="https://avatars.githubusercontent.com/u/739984?v=4" | ||
| alt="Avatar" | ||
| /> | ||
| <div class="flex flex-col"> | ||
| <span class="text-lg font-semibold text-bcGovColor-darkGray dark:text-white">John Doe</span> | ||
| <span class="text-bcGovColor-midGray dark:text-[#d1d5db]">[email protected]</span> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <UFormGroup label="Name" name="name" class="mb-3"> | ||
| <UInput v-model="accountForm.name" /> | ||
| </UFormGroup> | ||
| <UFormGroup label="Username" name="username"> | ||
| <UInput v-model="accountForm.username" /> | ||
| </UFormGroup> | ||
|
|
||
| <template #footer> | ||
| <UButton type="submit" color="black"> | ||
| Save account | ||
| </UButton> | ||
| </template> | ||
| </UCard> | ||
| </template> |
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,34 @@ | ||
| <script setup lang="ts"> | ||
| const sandboxMode = ref(false) | ||
| </script> | ||
| <template> | ||
| <div | ||
| class="w-full border-b p-2 sm:px-4" | ||
| :class="sandboxMode ? 'bg-bcGovColor-navDivider dark:border-bcGovColor-navDivider' : 'bg-white dark:bg-bcGovColor-darkGray border-bcGovGray-500'" | ||
| > | ||
| <div class="relative m-auto flex h-full max-w-[1360px] flex-col items-center justify-between gap-2 sm:flex-row"> | ||
| <span | ||
| v-if="sandboxMode" | ||
| class="flex items-center gap-1 text-bcGovColor-darkGray lg:absolute lg:left-1/2 lg:-translate-x-1/2" | ||
| > | ||
| <span class="inline-flex pb-0.5 align-middle"> | ||
| <UIcon name="i-mdi-information-slab-circle scale-150 mr-2" /> | ||
| </span> | ||
| <span>{{ $t('page.dashboard.sandboxMode.infoText') }}</span> | ||
| </span> | ||
| <span | ||
| class="ml-auto whitespace-nowrap font-semibold" | ||
| :class="sandboxMode ? 'text-bcGovColor-darkGray' : 'dark:text-white'" | ||
| > | ||
| {{ $t('page.dashboard.sandboxMode.text') }} | ||
| <span class="ml-1 inline-flex align-middle"> | ||
| <UToggle | ||
| v-model="sandboxMode" | ||
| size="lg" | ||
| :aria-label="sandboxMode ? $t('page.dashboard.sandboxMode.btnActive') : $t('page.dashboard.sandboxMode.btnInactive')" | ||
| /> | ||
| </span> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </template> |
Oops, something went wrong.