diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
index 5f6565cc6..c69c8b71c 100644
--- a/packages/buefy-next/rollup.config.mjs
+++ b/packages/buefy-next/rollup.config.mjs
@@ -50,7 +50,6 @@ const JS_COMPONENTS = [
'menu',
'message',
'modal',
- 'navbar',
'notification',
'numberinput',
'pagination',
diff --git a/packages/buefy-next/src/components/navbar/NavBar.spec.js b/packages/buefy-next/src/components/navbar/NavBar.spec.ts
similarity index 86%
rename from packages/buefy-next/src/components/navbar/NavBar.spec.js
rename to packages/buefy-next/src/components/navbar/NavBar.spec.ts
index 8442b5fae..b3628832b 100644
--- a/packages/buefy-next/src/components/navbar/NavBar.spec.js
+++ b/packages/buefy-next/src/components/navbar/NavBar.spec.ts
@@ -1,8 +1,10 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
-import BNavbar from '@components/navbar/Navbar'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbar from '@components/navbar/Navbar.vue'
describe('BNavbar', () => {
- let wrapper
+ let wrapper: VueWrapper<InstanceType<typeof BNavbar>>
beforeEach(() => {
wrapper = mount(BNavbar)
})
@@ -46,7 +48,7 @@ describe('BNavbar', () => {
})
it('manage closing the menu as expected', async () => {
- wrapper.vm.emitUpdateParentEvent = jest.fn()
+ wrapper.vm.emitUpdateParentEvent = vi.fn()
await wrapper.setProps({
modelValue: true,
@@ -65,7 +67,7 @@ describe('BNavbar', () => {
})
it('set body classes as expected', async () => {
- wrapper.vm.setBodyClass = jest.fn(() => wrapper.vm.setBodyClass)
+ wrapper.vm.setBodyClass = vi.fn(() => wrapper.vm.setBodyClass)
await wrapper.setProps({ fixedTop: true })
expect(wrapper.vm.setBodyClass).toHaveBeenCalled()
diff --git a/packages/buefy-next/src/components/navbar/NavBarBurger.spec.js b/packages/buefy-next/src/components/navbar/NavBarBurger.spec.ts
similarity index 76%
rename from packages/buefy-next/src/components/navbar/NavBarBurger.spec.js
rename to packages/buefy-next/src/components/navbar/NavBarBurger.spec.ts
index 97b2e47d2..b2a5a7bea 100644
--- a/packages/buefy-next/src/components/navbar/NavBarBurger.spec.js
+++ b/packages/buefy-next/src/components/navbar/NavBarBurger.spec.ts
@@ -1,8 +1,10 @@
+import { beforeEach, describe, expect, it } from 'vitest'
import { shallowMount, mount } from '@vue/test-utils'
-import BNavbarBurger from '@components/navbar/NavbarBurger'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarBurger from '@components/navbar/NavbarBurger.vue'
describe('BNavbarBurger', () => {
- let wrapper
+ let wrapper: VueWrapper<InstanceType<typeof BNavbarBurger>>
beforeEach(() => {
wrapper = shallowMount(BNavbarBurger)
})
diff --git a/packages/buefy-next/src/components/navbar/NavBarItem.spec.js b/packages/buefy-next/src/components/navbar/NavBarItem.spec.ts
similarity index 71%
rename from packages/buefy-next/src/components/navbar/NavBarItem.spec.js
rename to packages/buefy-next/src/components/navbar/NavBarItem.spec.ts
index 493592f0d..8a8821ba6 100644
--- a/packages/buefy-next/src/components/navbar/NavBarItem.spec.js
+++ b/packages/buefy-next/src/components/navbar/NavBarItem.spec.ts
@@ -1,19 +1,25 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent } from 'vue'
import { mount, shallowMount } from '@vue/test-utils'
-import BNavbarItem from '@components/navbar/NavbarItem'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarItem from '@components/navbar/NavbarItem.vue'
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BNavbarItem>>
-const stubBNavBar = {
+const stubBNavBar = defineComponent({
data() {
return {
_isNavBar: true
}
},
+ methods: {
+ closeMenu: vi.fn()
+ },
template: `
<div>
<slot />
</div>`
-}
+})
describe('BNavbarItem', () => {
const tag = 'div'
@@ -36,7 +42,7 @@ describe('BNavbarItem', () => {
})
it('emit event from tag and out', async () => {
- const testStub = jest.fn()
+ const testStub = vi.fn()
const emitWrap = shallowMount(BNavbarItem, {
props: {
@@ -60,11 +66,12 @@ describe('BNavbarItem', () => {
default: BNavbarItem
}
}).findComponent(BNavbarItem)
- wrapper.vm.$parent.closeMenu = jest.fn()
+ stubBNavBar.methods!.closeMenu.mockClear()
const event = new KeyboardEvent('keyup', { key: 'Escape' })
wrapper.vm.keyPress({})
wrapper.vm.keyPress(event)
- expect(wrapper.vm.$parent.closeMenu).toHaveBeenCalledTimes(1)
+ expect(stubBNavBar.methods!.closeMenu).toHaveBeenCalledTimes(1)
+ stubBNavBar.methods!.closeMenu.mockClear()
})
it('manage click as expected', () => {
@@ -73,12 +80,13 @@ describe('BNavbarItem', () => {
default: BNavbarItem
}
}).findComponent(BNavbarItem)
- wrapper.vm.$parent.closeMenu = jest.fn()
+ stubBNavBar.methods!.closeMenu.mockClear()
const event = new MouseEvent('click')
wrapper.vm.handleClickEvent({
...event,
target: { localName: 'a' }
})
- expect(wrapper.vm.$parent.closeMenu).toHaveBeenCalledTimes(1)
+ expect(stubBNavBar.methods!.closeMenu).toHaveBeenCalledTimes(1)
+ stubBNavBar.methods!.closeMenu.mockClear()
})
})
diff --git a/packages/buefy-next/src/components/navbar/Navbar.vue b/packages/buefy-next/src/components/navbar/Navbar.vue
index f0e8cb3b6..b45fe7bfb 100644
--- a/packages/buefy-next/src/components/navbar/Navbar.vue
+++ b/packages/buefy-next/src/components/navbar/Navbar.vue
@@ -1,13 +1,16 @@
-<script>
+<script lang="ts">
import {
+ defineComponent,
h as createElement,
resolveComponent,
resolveDirective,
withDirectives
} from 'vue'
+import type { PropType, StyleValue, VNode } from 'vue'
import NavbarBurger from './NavbarBurger.vue'
import clickOutside from '../../directives/clickOutside'
+import type { VueClassAttribute } from '../../utils/config'
const FIXED_TOP_CLASS = 'is-fixed-top'
const BODY_FIXED_TOP_CLASS = 'has-navbar-fixed-top'
@@ -17,9 +20,9 @@ const BODY_FIXED_BOTTOM_CLASS = 'has-navbar-fixed-bottom'
const BODY_SPACED_FIXED_BOTTOM_CLASS = 'has-spaced-navbar-fixed-bottom'
const BODY_CENTERED_CLASS = 'has-navbar-centered'
-const isFilled = (str) => !!str
+const isFilled = (str?: StyleValue) => !!str
-export default {
+export default defineComponent({
name: 'BNavbar',
components: {
NavbarBurger
@@ -28,7 +31,7 @@ export default {
clickOutside
},
props: {
- type: [String, Object],
+ type: [String, Object] as PropType<VueClassAttribute>,
transparent: {
type: Boolean,
default: false
@@ -50,7 +53,7 @@ export default {
default: false
},
wrapperClass: {
- type: [String, Array, Object]
+ type: [String, Array, Object] as PropType<StyleValue>
},
closeOnClick: {
type: Boolean,
@@ -63,7 +66,10 @@ export default {
spaced: Boolean,
shadow: Boolean
},
- emits: ['update:modelValue'],
+ emits: {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ 'update:modelValue': (_value: boolean) => true
+ },
data() {
return {
internalIsActive: this.modelValue,
@@ -118,12 +124,12 @@ export default {
emitUpdateParentEvent() {
this.$emit('update:modelValue', this.internalIsActive)
},
- setBodyClass(className) {
+ setBodyClass(className: string) {
if (typeof window !== 'undefined') {
document.body.classList.add(className)
}
},
- removeBodyClass(className) {
+ removeBodyClass(className: string) {
if (typeof window !== 'undefined') {
document.body.classList.remove(className)
}
@@ -153,7 +159,7 @@ export default {
return this.genNavbarSlots([navWrapper])
},
- genNavbarSlots(slots) {
+ genNavbarSlots(slots: VNode[]) {
const vnode = createElement(
'nav',
{
@@ -184,7 +190,7 @@ export default {
{
isOpened: this.isOpened,
onClick: this.toggleActive,
- onKeyup: (event) => {
+ onKeyup: (event: KeyboardEvent) => {
if (event.keyCode !== 13) return
this.toggleActive()
}
@@ -193,7 +199,7 @@ export default {
const hasBurgerSlot = !!this.$slots.burger
return hasBurgerSlot
- ? this.$slots.burger({
+ ? this.$slots.burger!({
isOpened: this.isOpened,
toggleActive: this.toggleActive
})
@@ -210,16 +216,16 @@ export default {
]
)
},
- genMenuPosition(positionName) {
+ genMenuPosition(positionName: 'start' | 'end') {
return createElement(
'div',
{ class: `navbar-${positionName}` },
this.$slots[positionName] != null
- ? this.$slots[positionName]()
+ ? this.$slots[positionName]!()
: []
)
},
- setBodyFixedTopClass(isSet) {
+ setBodyFixedTopClass(isSet: boolean) {
this.checkIfFixedPropertiesAreColliding()
if (isSet) {
// TODO Apply only one of the classes once PR is merged in Bulma:
@@ -231,7 +237,7 @@ export default {
this.removeBodyClass(BODY_SPACED_FIXED_TOP_CLASS)
}
},
- setBodyFixedBottomClass(isSet) {
+ setBodyFixedBottomClass(isSet: boolean) {
this.checkIfFixedPropertiesAreColliding()
if (isSet) {
// TODO Apply only one of the classes once PR is merged in Bulma:
@@ -264,5 +270,5 @@ export default {
render() {
return this.genNavbar()
}
-}
+})
</script>
diff --git a/packages/buefy-next/src/components/navbar/NavbarBurger.vue b/packages/buefy-next/src/components/navbar/NavbarBurger.vue
index 0c3fa1325..98c9926bc 100644
--- a/packages/buefy-next/src/components/navbar/NavbarBurger.vue
+++ b/packages/buefy-next/src/components/navbar/NavbarBurger.vue
@@ -14,8 +14,10 @@
</a>
</template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
name: 'NavbarBurger',
props: {
isOpened: {
@@ -23,5 +25,5 @@ export default {
default: false
}
}
-}
+})
</script>
diff --git a/packages/buefy-next/src/components/navbar/NavbarDropdown.spec.js b/packages/buefy-next/src/components/navbar/NavbarDropdown.spec.ts
similarity index 91%
rename from packages/buefy-next/src/components/navbar/NavbarDropdown.spec.js
rename to packages/buefy-next/src/components/navbar/NavbarDropdown.spec.ts
index f485a961b..20248c6b9 100644
--- a/packages/buefy-next/src/components/navbar/NavbarDropdown.spec.js
+++ b/packages/buefy-next/src/components/navbar/NavbarDropdown.spec.ts
@@ -1,7 +1,9 @@
+import { beforeEach, describe, expect, it } from 'vitest'
import { shallowMount } from '@vue/test-utils'
-import BNavbarDropdown from '@components/navbar/NavbarDropdown'
+import type { VueWrapper } from '@vue/test-utils'
+import BNavbarDropdown from '@components/navbar/NavbarDropdown.vue'
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BNavbarDropdown>>
describe('BNavbarDropdown', () => {
beforeEach(() => {
diff --git a/packages/buefy-next/src/components/navbar/NavbarDropdown.vue b/packages/buefy-next/src/components/navbar/NavbarDropdown.vue
index c4b3f5c9d..eac6bf3e0 100644
--- a/packages/buefy-next/src/components/navbar/NavbarDropdown.vue
+++ b/packages/buefy-next/src/components/navbar/NavbarDropdown.vue
@@ -40,11 +40,13 @@
</div>
</template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
import clickOutside from '../../directives/clickOutside'
import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
-export default {
+export default defineComponent({
name: 'BNavbarDropdown',
directives: {
clickOutside
@@ -67,7 +69,10 @@ export default {
default: 'a'
}
},
- emits: ['active-change'],
+ emits: {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ 'active-change': (_active: boolean) => true
+ },
data() {
return {
newActive: this.active,
@@ -91,7 +96,7 @@ export default {
showMenu() {
this.newActive = true
},
- /**
+ /*
* See naming convetion of navbaritem
*/
closeMenu() {
@@ -106,5 +111,5 @@ export default {
}
}
}
-}
+})
</script>
diff --git a/packages/buefy-next/src/components/navbar/NavbarItem.vue b/packages/buefy-next/src/components/navbar/NavbarItem.vue
index efede0887..cda1a0814 100644
--- a/packages/buefy-next/src/components/navbar/NavbarItem.vue
+++ b/packages/buefy-next/src/components/navbar/NavbarItem.vue
@@ -11,10 +11,29 @@
</component>
</template>
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
const clickableWhiteList = ['div', 'span', 'input']
-export default {
+/* eslint-disable @typescript-eslint/ban-types */
+type NavbarItemParent = ComponentPublicInstance<
+ {}, // P(rops)
+ {}, // B (raw bindings)
+ {
+ // to accomodate [`_is${item}`] access
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ [key: string]: any
+ }, // D(ata)
+ {}, // C(omputed)
+ {
+ closeMenu: () => void
+ } // M(ethods)
+>
+/* eslint-enable @typescript-eslint/ban-types */
+
+export default defineComponent({
name: 'BNavbarItem',
inheritAttrs: false,
props: {
@@ -25,37 +44,41 @@ export default {
active: Boolean
},
methods: {
- /**
+ /*
* Keypress event that is bound to the document
*/
- keyPress({ key }) {
+ keyPress({ key }: { key?: KeyboardEvent['key'] }) {
if (key === 'Escape' || key === 'Esc') {
this.closeMenuRecursive(this, ['NavBar'])
}
},
- /**
+ /*
* Close parent if clicked outside.
*/
- handleClickEvent(event) {
+ handleClickEvent(event: { target: { localName: string } }) {
const isOnWhiteList = clickableWhiteList.some((item) => item === event.target.localName)
if (!isOnWhiteList) {
const parent = this.closeMenuRecursive(this, ['NavbarDropdown', 'NavBar'])
if (parent && parent.$data._isNavbarDropdown) this.closeMenuRecursive(parent, ['NavBar'])
}
},
- /**
+ /*
* Close parent recursively
*/
- closeMenuRecursive(current, targetComponents) {
- if (!current.$parent) return null
+ closeMenuRecursive(
+ current: ComponentPublicInstance,
+ targetComponents: string[]
+ ): NavbarItemParent | null {
+ const parent = current.$parent as NavbarItemParent | null
+ if (!parent) return null
const foundItem = targetComponents.reduce((acc, item) => {
- if (current.$parent.$data[`_is${item}`]) {
- current.$parent.closeMenu()
- return current.$parent
+ if (parent.$data[`_is${item}`]) {
+ parent.closeMenu()
+ return parent
}
return acc
- }, null)
- return foundItem || this.closeMenuRecursive(current.$parent, targetComponents)
+ }, null as NavbarItemParent | null)
+ return foundItem || this.closeMenuRecursive(parent, targetComponents)
}
},
mounted() {
@@ -70,5 +93,5 @@ export default {
document.removeEventListener('keyup', this.keyPress)
}
}
-}
+})
</script>
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavBar.spec.js.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavBar.spec.js.snap
deleted file mode 100644
index a678e3bae..000000000
--- a/packages/buefy-next/src/components/navbar/__snapshots__/NavBar.spec.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BNavbar render correctly 1`] = `
-<nav class="navbar" role="navigation" aria-label="main navigation">
- <div class="navbar-brand"><a role="button" class="navbar-burger burger" aria-label="menu" tabindex="0"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div>
- <div class="navbar-menu">
- <div class="navbar-start"></div>
- <div class="navbar-end"></div>
- </div>
-</nav>
-`;
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavBar.spec.ts.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavBar.spec.ts.snap
new file mode 100644
index 000000000..ff04e666d
--- /dev/null
+++ b/packages/buefy-next/src/components/navbar/__snapshots__/NavBar.spec.ts.snap
@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNavbar > render correctly 1`] = `
+"<nav class=\\"navbar\\" role=\\"navigation\\" aria-label=\\"main navigation\\">
+ <div class=\\"navbar-brand\\"><a role=\\"button\\" class=\\"navbar-burger burger\\" aria-label=\\"menu\\" tabindex=\\"0\\"><span aria-hidden=\\"true\\"></span><span aria-hidden=\\"true\\"></span><span aria-hidden=\\"true\\"></span></a></div>
+ <div class=\\"navbar-menu\\">
+ <div class=\\"navbar-start\\"></div>
+ <div class=\\"navbar-end\\"></div>
+ </div>
+</nav>"
+`;
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavBarBurger.spec.js.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavBarBurger.spec.js.snap
deleted file mode 100644
index 272faf3e1..000000000
--- a/packages/buefy-next/src/components/navbar/__snapshots__/NavBarBurger.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BNavbarBurger render correctly 1`] = `<a role="button" class="navbar-burger burger" aria-label="menu" tabindex="0"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a>`;
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavBarBurger.spec.ts.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavBarBurger.spec.ts.snap
new file mode 100644
index 000000000..fdb175b75
--- /dev/null
+++ b/packages/buefy-next/src/components/navbar/__snapshots__/NavBarBurger.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNavbarBurger > render correctly 1`] = `"<a role=\\"button\\" class=\\"navbar-burger burger\\" aria-label=\\"menu\\" tabindex=\\"0\\"><span aria-hidden=\\"true\\"></span><span aria-hidden=\\"true\\"></span><span aria-hidden=\\"true\\"></span></a>"`;
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavBarItem.spec.js.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavBarItem.spec.js.snap
deleted file mode 100644
index b691c5da3..000000000
--- a/packages/buefy-next/src/components/navbar/__snapshots__/NavBarItem.spec.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BNavbarItem render correctly 1`] = `<a class="navbar-item"></a>`;
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavBarItem.spec.ts.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavBarItem.spec.ts.snap
new file mode 100644
index 000000000..c85463367
--- /dev/null
+++ b/packages/buefy-next/src/components/navbar/__snapshots__/NavBarItem.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNavbarItem > render correctly 1`] = `"<a class=\\"navbar-item\\"></a>"`;
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavbarDropdown.spec.js.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavbarDropdown.spec.js.snap
deleted file mode 100644
index dfb5ec199..000000000
--- a/packages/buefy-next/src/components/navbar/__snapshots__/NavbarDropdown.spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BNavbarDropdown render correctly 1`] = `
-<div class="navbar-item has-dropdown"><a class="navbar-link" aria-haspopup="true" tabindex="0"></a>
- <div class="navbar-dropdown"></div>
-</div>
-`;
diff --git a/packages/buefy-next/src/components/navbar/__snapshots__/NavbarDropdown.spec.ts.snap b/packages/buefy-next/src/components/navbar/__snapshots__/NavbarDropdown.spec.ts.snap
new file mode 100644
index 000000000..525297b7c
--- /dev/null
+++ b/packages/buefy-next/src/components/navbar/__snapshots__/NavbarDropdown.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BNavbarDropdown > render correctly 1`] = `
+"<div class=\\"navbar-item has-dropdown\\"><a class=\\"navbar-link\\" aria-haspopup=\\"true\\" tabindex=\\"0\\"></a>
+ <div class=\\"navbar-dropdown\\"></div>
+</div>"
+`;
diff --git a/packages/buefy-next/src/components/navbar/index.js b/packages/buefy-next/src/components/navbar/index.ts
similarity index 89%
rename from packages/buefy-next/src/components/navbar/index.js
rename to packages/buefy-next/src/components/navbar/index.ts
index 1d1506bbe..d231f5419 100644
--- a/packages/buefy-next/src/components/navbar/index.js
+++ b/packages/buefy-next/src/components/navbar/index.ts
@@ -1,3 +1,4 @@
+import type { App } from 'vue'
import Navbar from './Navbar.vue'
import NavbarItem from './NavbarItem.vue'
import NavbarDropdown from './NavbarDropdown.vue'
@@ -5,7 +6,7 @@ import NavbarDropdown from './NavbarDropdown.vue'
import { registerComponent } from '../../utils/plugins'
const Plugin = {
- install(Vue) {
+ install(Vue: App) {
registerComponent(Vue, Navbar)
registerComponent(Vue, NavbarItem)
registerComponent(Vue, NavbarDropdown)
diff --git a/packages/docs/src/pages/components/navbar/Navbar.vue b/packages/docs/src/pages/components/navbar/Navbar.vue
index 49a26180b..6d97979c5 100644
--- a/packages/docs/src/pages/components/navbar/Navbar.vue
+++ b/packages/docs/src/pages/components/navbar/Navbar.vue
@@ -8,15 +8,26 @@
</template>
-<script>
+<script lang="ts">
+ import { defineComponent } from 'vue'
+
+ import { shallowFields } from '@/utils'
+ import ApiView from '@/components/ApiView.vue'
+ import Example from '@/components/Example.vue'
+ import VariablesView from '@/components/VariablesView.vue'
+
import api from './api/navbar'
import variables from './variables/navbar'
- import { shallowFields } from '@/utils'
- import ExSimple from './examples/ExSimple'
+ import ExSimple from './examples/ExSimple.vue'
import ExSimpleCode from './examples/ExSimple.vue?raw'
- export default {
+ export default defineComponent({
+ components: {
+ ApiView,
+ Example,
+ VariablesView
+ },
data() {
return {
api,
@@ -27,5 +38,5 @@
ExSimpleCode
}
},
- }
+ })
</script>
diff --git a/packages/docs/src/pages/components/navbar/api/navbar.js b/packages/docs/src/pages/components/navbar/api/navbar.ts
similarity index 100%
rename from packages/docs/src/pages/components/navbar/api/navbar.js
rename to packages/docs/src/pages/components/navbar/api/navbar.ts
diff --git a/packages/docs/src/pages/components/navbar/examples/ExSimple.vue b/packages/docs/src/pages/components/navbar/examples/ExSimple.vue
index 4786b7518..9bac417ab 100644
--- a/packages/docs/src/pages/components/navbar/examples/ExSimple.vue
+++ b/packages/docs/src/pages/components/navbar/examples/ExSimple.vue
@@ -39,3 +39,7 @@
</template>
</b-navbar>
</template>
+
+<script setup lang="ts">
+import { BNavbar, BNavbarDropdown, BNavbarItem } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/navbar/variables/navbar.js b/packages/docs/src/pages/components/navbar/variables/navbar.ts
similarity index 100%
rename from packages/docs/src/pages/components/navbar/variables/navbar.js
rename to packages/docs/src/pages/components/navbar/variables/navbar.ts