forked from EnergySage/es-ds
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4 from EnergySage/ced-1940-nav-search-bar
feat: nav bar with search bar
- Loading branch information
Showing
11 changed files
with
449 additions
and
5 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
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,82 @@ | ||
| <template> | ||
| <div> | ||
| <es-nav-bar | ||
| :account-content="accountContent" | ||
| :global-content="globalContent" | ||
| show-search> | ||
| <template #logo> | ||
| <ds-es-logo /> | ||
| </template> | ||
| </es-nav-bar> | ||
|
|
||
| <b-navbar | ||
| class="d-xl-none mb-100" | ||
| type="dark" | ||
| variant="primary"> | ||
| <b-navbar-nav> | ||
| <b-nav-item v-b-toggle.sidebar-1> | ||
| Menu | ||
| </b-nav-item> | ||
| </b-navbar-nav> | ||
| </b-navbar> | ||
| <b-sidebar | ||
| id="sidebar-1" | ||
| class="d-xl-none" | ||
| :title="`ES DS ${$config.version}`" | ||
| shadow> | ||
| <ds-link-list class="mx-100" /> | ||
| </b-sidebar> | ||
| <div class="d-flex justify-content-center"> | ||
| <div class="ds-side-nav d-none d-xl-block flex-shrink-0 p-100"> | ||
| <ds-link-list /> | ||
| </div> | ||
| <b-container class="pt-xl-100 mx-0"> | ||
| <b-row class="mb-100"> | ||
| <b-col cols="12"> | ||
| <es-breadcrumbs :items="breadcrumbs" /> | ||
| </b-col> | ||
| </b-row> | ||
| <b-row> | ||
| <b-col | ||
| cols="12"> | ||
| <Nuxt /> | ||
| </b-col> | ||
| </b-row> | ||
| </b-container> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { getEsNavBarAccountContent, getEsNavBarGlobalContent } from '@energysage/es-vue-base'; | ||
| /* eslint-disable vue/multi-word-component-names, vue/component-definition-name-casing */ | ||
| export default { | ||
| name: 'NavSearchLayout', | ||
| computed: { | ||
| accountContent() { | ||
| return getEsNavBarAccountContent(); | ||
| }, | ||
| breadcrumbs() { | ||
| const paths = this.$route.path.split('/'); | ||
| // Set removes dupes from path | ||
| return [...new Set(paths)].map((path) => { | ||
| let text = 'Home'; | ||
| // Convert to CamelCase to be inline with component naming | ||
| if (path) { | ||
| text = path.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); | ||
| text = text[0].toUpperCase() + text.slice(1); | ||
| } | ||
| return { | ||
| text, | ||
| to: `/${path}`, | ||
| }; | ||
| }); | ||
| }, | ||
| globalContent() { | ||
| return getEsNavBarGlobalContent(); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
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,122 @@ | ||
| <template> | ||
| <div> | ||
| <h1 class="mb-500"> | ||
| Search bar | ||
| </h1> | ||
| <h2> | ||
| Basic example | ||
| </h2> | ||
| <es-search-bar class="my-500" /> | ||
| <h2> | ||
| Example with open/close functionality | ||
| </h2> | ||
| <es-search-bar | ||
| v-if="showSearchBar" | ||
| class="my-500"> | ||
| <template #close> | ||
| <es-button | ||
| class="position-absolute nav-button mb-3" | ||
| aria-label="Close search bar" | ||
| style="right: 0" | ||
| variant="link" | ||
| @click="toggleSearchBar()"> | ||
| <icon-x | ||
| width="30px" | ||
| height="30px" /> | ||
| </es-button> | ||
| </template> | ||
| </es-search-bar> | ||
| <es-button | ||
| v-else | ||
| variant="link" | ||
| aria-label="Open search bar" | ||
| class="nav-button nav-link icon-toggle d-flex flex-nowrap my-500 mx-auto" | ||
| @click="toggleSearchBar()"> | ||
| <icon-search | ||
| class="align-self-center search-icon" | ||
| width="20px" | ||
| height="20px" /> | ||
| </es-button> | ||
|
|
||
| <div class="my-500"> | ||
| <h2> | ||
| EsSearchBar slots | ||
| </h2> | ||
| <ds-prop-table | ||
| :rows="slotTableRows" | ||
| :widths="slotTableWidths" /> | ||
| </div> | ||
|
|
||
| <div class="my-500"> | ||
| <h2> | ||
| EsSearchBar props | ||
| </h2> | ||
| <ds-prop-table | ||
| :rows="propTableRows" | ||
| :widths="propTableWidths" /> | ||
| </div> | ||
|
|
||
| <ds-doc-source | ||
| :comp-code="compCode" | ||
| comp-source="es-vue-base/src/lib-components/EsSearchBar.vue" | ||
| :doc-code="docCode" | ||
| doc-source="es-design-system/pages/molecules/es-search-bar.vue" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'EsSearchBarDocs', | ||
| data() { | ||
| return { | ||
| compCode: '', | ||
| docCode: '', | ||
| showSearchBar: false, | ||
| propTableRows: [ | ||
| [ | ||
| 'buttonText', | ||
| 'Search', | ||
| 'Text to display on the submit button.', | ||
| ], | ||
| [ | ||
| 'placeholder', | ||
| 'Try "best solar panels"', | ||
| 'Placeholder text to display in the search input.', | ||
| ], | ||
| ], | ||
| propTableWidths: { | ||
| md: ['4', '2', '6'], | ||
| lg: ['3', '4', '5'], | ||
| }, | ||
| slotTableRows: [ | ||
| [ | ||
| 'close', | ||
| 'n/a', | ||
| 'Slot for a close button or other content to be displayed to the right of the search bar.', | ||
| ], | ||
| ], | ||
| slotTableWidths: { | ||
| md: ['4', '3', '5'], | ||
| lg: ['3', '4', '5'], | ||
| }, | ||
| }; | ||
| }, | ||
| async created() { | ||
| if (this.$prism) { | ||
| /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */ | ||
| const docSource = await import('!raw-loader!./es-search-bar.vue'); | ||
| const compSource = await import('!raw-loader!@energysage/es-vue-base/src/lib-components/EsSearchBar.vue'); | ||
| /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */ | ||
| this.docCode = this.$prism.normalizeCode(docSource.default); | ||
| this.compCode = this.$prism.normalizeCode(compSource.default); | ||
| this.$prism.highlight(this); | ||
| } | ||
| }, | ||
| methods: { | ||
| toggleSearchBar() { | ||
| this.showSearchBar = !this.showSearchBar; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
71 changes: 71 additions & 0 deletions
71
es-design-system/pages/organisms/es-nav-bar-with-search.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,71 @@ | ||
| <template> | ||
| <div> | ||
| <h1> | ||
| EsNavBarWithSearch | ||
| </h1> | ||
| <p> | ||
| The nav bar is a specialized component intended for use outside the normal content | ||
| container. See above. | ||
| </p> | ||
|
|
||
| <p | ||
| v-for="index in 10" | ||
| :key="index" | ||
| class="my-800"> | ||
| Sample content to increase page length; for testing the sticky nav bar. | ||
| </p> | ||
|
|
||
| <!-- print out EsNavBar's mounted() script here so the rip-the-nav utility can access it --> | ||
| <!-- eslint-disable vue/no-v-html --> | ||
| <pre | ||
| class="d-none" | ||
| v-html="navScriptSource" /> | ||
| <!-- eslint-enable vue/no-v-html --> | ||
|
|
||
| <ds-doc-source | ||
| :comp-code="compCode" | ||
| comp-source="es-vue-base/src/lib-components/EsNavBar.vue" | ||
| :doc-code="docCode" | ||
| doc-source="es-design-system/pages/organisms/es-nav-bar.vue" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'EsNavBarWithSearchDocs', | ||
| // use a custom layout so the nav can be full-width at the top of the page | ||
| layout: 'navSearch', | ||
| async asyncData() { | ||
| /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */ | ||
| const compSource = await import('!raw-loader!@energysage/es-vue-base/src/lib-components/EsNavBar.vue'); | ||
| /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */ | ||
| // retrieve EsNavBar's mounted() script here so the rip-the-nav utility can access it | ||
| const compSourceText = compSource.default; | ||
| const scriptRegex = /\/\/ CUSTOM GLOBAL-NAV SCRIPT STARTS([\s\S]+)\/\/ CUSTOM GLOBAL-NAV SCRIPT ENDS/; | ||
| const navScriptSource = compSourceText.match(scriptRegex)[0]; | ||
| return { | ||
| navScriptSource, | ||
| }; | ||
| }, | ||
| data() { | ||
| return { | ||
| compCode: '', | ||
| docCode: '', | ||
| }; | ||
| }, | ||
| async created() { | ||
| if (this.$prism) { | ||
| /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */ | ||
| const docSource = await import('!raw-loader!./es-nav-bar.vue'); | ||
| const compSource = await import('!raw-loader!@energysage/es-vue-base/src/lib-components/EsNavBar.vue'); | ||
| /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */ | ||
| this.docCode = this.$prism.normalizeCode(docSource.default); | ||
| this.compCode = this.$prism.normalizeCode(compSource.default); | ||
| this.$prism.highlight(this); | ||
| } | ||
| }, | ||
| }; | ||
| </script> |
Oops, something went wrong.