bitinflow/ui
1
0
Fork 0
mirror of https://github.com/bitinflow/ui.git synced 2026-03-13 13:45:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
René Preuß
2023-02-17 19:57:37 +01:00
commit 23eae8b651
37 changed files with 6370 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig Normal file
View File

@@ -0,0 +1,12 @@
root = true
[*]
indent_size = 2
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

2
.eslintignore Normal file
View File

@@ -0,0 +1,2 @@
dist
node_modules

4
.eslintrc Normal file
View File

@@ -0,0 +1,4 @@
{
"root": true,
"extends": ["@nuxt/eslint-config"]
}

56
.gitignore vendored Normal file
View File

@@ -0,0 +1,56 @@
# Dependencies
node_modules
# Logs
*.log*
# Temp directories
.temp
.tmp
.cache
# Yarn
**/.yarn/cache
**/.yarn/*state*
# Generated dirs
dist
# Nuxt
.nuxt
.output
.vercel_build_output
.build-*
.env
.netlify
# Env
.env
# Testing
reports
coverage
*.lcov
.nyc_output
# VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
# Intellij idea
*.iml
.idea
# OSX
.DS_Store
.AppleDouble
.LSOverride
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

2
.npmrc Normal file
View File

@@ -0,0 +1,2 @@
shamefully-hoist=true
strict-peer-dependencies=false

2
.nuxtrc Normal file
View File

@@ -0,0 +1,2 @@
imports.autoImport=false
typescript.includeWorkspace=true

90
README.md Normal file
View File

@@ -0,0 +1,90 @@
<!--
Get your module up and running quickly.
Find and replace all on all files (CMD+SHIFT+F):
- Name: My Module
- Package name: my-module
- Description: My new Nuxt module
-->
# My Module
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
> My new Nuxt module
- [✨ &nbsp;Release Notes](/CHANGELOG.md)
<!-- - [📖 &nbsp;Documentation](https://example.com) -->
## Features
<!-- Highlight some of the features your module provide here -->
- ⛰ &nbsp;Foo
- 🚠 &nbsp;Bar
- 🌲 &nbsp;Baz
## Quick Setup
1. Add `@bitinflow/ui` dependency to your project
```bash
# Using pnpm
pnpm add -D @bitinflow/ui
# Using yarn
yarn add --dev @bitinflow/ui
# Using npm
npm install --save-dev @bitinflow/ui
```
2. Add `@bitinflow/ui` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'@bitinflow/ui',
'@'
]
})
```
That's it! You can now use My Module in your Nuxt app ✨
## Development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@bitinflow/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@bitinflow/ui
[npm-downloads-src]: https://img.shields.io/npm/dm/@bitinflow/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@bitinflow/ui
[license-src]: https://img.shields.io/npm/l/@bitinflow/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@bitinflow/ui

45
package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "@bitinflow/ui",
"version": "0.0.2",
"description": "bitinflow UI Kit",
"license": "Apache-2.0",
"type": "module",
"exports": {
".": {
"types": "./dist/types.d.ts",
"import": "./dist/module.mjs",
"require": "./dist/module.cjs"
}
},
"main": "./dist/module.cjs",
"types": "./dist/types.d.ts",
"files": [
"dist"
],
"scripts": {
"prepack": "nuxt-module-build",
"dev": "nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
"release2": "npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
"lint": "eslint .",
"test": "vitest run",
"test:watch": "vitest watch"
},
"dependencies": {
"@nuxt/kit": "^3.2.0",
"@pinia/nuxt": "^0.4.3",
"pinia": "^2.0.23"
},
"devDependencies": {
"@nuxt/eslint-config": "^0.1.1",
"@nuxt/module-builder": "^0.2.1",
"@nuxt/schema": "^3.2.0",
"@nuxt/test-utils": "^3.2.0",
"changelogen": "^0.4.1",
"eslint": "^8.34.0",
"nuxt": "^3.2.0",
"vitest": "^0.28.5"
}
}

103
playground/app.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<bitinflow-floating-banner />
<bitinflow-first-level-menu>
<template #top>
<bitinflow-first-level-link icon="fa-home">
Home
</bitinflow-first-level-link>
<bitinflow-first-level-link icon="fa-location-dot">
Pull Zones
</bitinflow-first-level-link>
<bitinflow-first-level-link icon="fa-bucket">
Buckets
</bitinflow-first-level-link>
<bitinflow-first-level-link icon="fa-meteor">
Spaces
</bitinflow-first-level-link>
<bitinflow-first-level-link icon="fa-globe">
Domains
</bitinflow-first-level-link>
<bitinflow-first-level-link icon="fa-list">
Zones
</bitinflow-first-level-link>
</template>
<template #bottom>
<bitinflow-first-level-link icon="fa-wallet">
Billing
</bitinflow-first-level-link>
<bitinflow-first-level-link icon="fa-fingerprint">
Account
</bitinflow-first-level-link>
<bitinflow-first-level-link icon="fa-arrow-right-from-bracket">
Logout
</bitinflow-first-level-link>
</template>
<bitinflow-second-level-menu>
<template #title>
Domains
</template>
<bitinflow-second-level-link icon="fa-globe">
example.com
</bitinflow-second-level-link>
<bitinflow-second-level-link icon="fa-globe">
example.com
</bitinflow-second-level-link>
<bitinflow-second-level-link icon="fa-globe">
example.com
</bitinflow-second-level-link>
<bitinflow-second-level-link icon="fa-globe">
example.com
</bitinflow-second-level-link>
</bitinflow-second-level-menu>
<bitinflow-flex-auto>
<bitinflow-screen-scroll-container>
<bitinflow-third-level-menu>
<template #title>
Test
</template>
</bitinflow-third-level-menu>
<bitinflow-container>
<bitinflow-hero-card>
<div class="text-3xl">
Yeet!
</div>
</bitinflow-hero-card>
<bitinflow-card>
<bitinflow-card-header>Test</bitinflow-card-header>
<bitinflow-card-body>Test</bitinflow-card-body>
</bitinflow-card>
<bitinflow-card>
<bitinflow-card-header>Test</bitinflow-card-header>
<bitinflow-card-body>Test</bitinflow-card-body>
</bitinflow-card>
</bitinflow-container>
</bitinflow-screen-scroll-container>
</bitinflow-flex-auto>
</bitinflow-first-level-menu>
</template>
<script>
export default {
setup() {
useMenu({
thirdLevelLinks: [
{
name: 'Test',
icon: 'fa-star',
to: 'test'
}
]
})
},
methods: {
toggleDarkMode() {
document.body.classList.toggle('dark')
}
}
}
</script>

22
playground/nuxt.config.ts Normal file
View File

@@ -0,0 +1,22 @@
export default defineNuxtConfig({
modules: [
'../src/module',
'@pinia/nuxt',
],
ui: {},
app: {
head: {
title: 'My App',
link: [
{rel: 'stylesheet', href: 'https://cdn.bitinflow.com/fontawesome/6.2.0/css/all.min.css'}
],
script: [
{src: 'https://cdn.tailwindcss.com'},
{src: '/tailwind.js'}
],
bodyAttrs: {
class: 'bg-zinc-900'
},
},
},
})

4
playground/package.json Normal file
View File

@@ -0,0 +1,4 @@
{
"private": true,
"name": "my-module-playground"
}

30
playground/public/tailwind.js Normal file
View File

@@ -0,0 +1,30 @@
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#00BFA5',
'50': '#A6FFF3',
'100': '#8CFFEF',
'200': '#59FFE8',
'300': '#26FFE1',
'400': '#00F2D1',
'500': '#00BFA5',
'600': '#00917D',
'700': '#006356',
'800': '#00352E',
'900': '#000706'
},
base: {
DEFAULT: '#070709',
'500': '#3a3a3d',
'600': '#26262c',
'700': '#1f1f23',
'800': '#18181b',
'900': '#0e0e10'
},
}
}
}
}
console.log('tailwidn')

28
src/colors.ts Normal file
View File

@@ -0,0 +1,28 @@
/**
* Official colors for the theme.
*/
const colors = {
primary: {
DEFAULT: '#00BFA5',
'50': '#A6FFF3',
'100': '#8CFFEF',
'200': '#59FFE8',
'300': '#26FFE1',
'400': '#00F2D1',
'500': '#00BFA5',
'600': '#00917D',
'700': '#006356',
'800': '#00352E',
'900': '#000706'
},
base: {
DEFAULT: '#070709',
'500': '#3a3a3d',
'600': '#26262c',
'700': '#1f1f23',
'800': '#18181b',
'900': '#0e0e10'
},
};
export default colors;

43
src/module.ts Normal file
View File

@@ -0,0 +1,43 @@
import {
defineNuxtModule,
addPlugin,
createResolver,
useLogger,
addImportsDir,
addComponent,
resolveFiles, addComponentsDir
} from '@nuxt/kit'
// Module options TypeScript inteface definition
export interface ModuleOptions {}
const PACKAGE_NAME = 'ui';
export default defineNuxtModule<ModuleOptions>({
meta: {
name: `@bitinflow/${PACKAGE_NAME}`,
configKey: 'ui'
},
// Default configuration options of the Nuxt module
defaults: {},
setup (options, nuxt) {
const logger = useLogger(PACKAGE_NAME)
const resolver = createResolver(import.meta.url)
// Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
addPlugin(resolver.resolve('./runtime/plugin'))
const composables = resolver.resolve('./runtime/composables')
addImportsDir(composables)
const components = resolver.resolve('./runtime/components');
addComponentsDir({
path: components,
watch: true,
}).then(r => {
console.log(r)
});
logger.success('Session setup complete')
}
})

25
src/runtime/components/BitinflowButton.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<a
href="#"
class="truncate text-black dark:text-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 dark:text-white rounded-lg px-4 py-2"
>
<slot />
</a>
</template>
<script>
export default {
name: "BitinflowButton",
emits: ['click'],
methods: {
click() {
this.$emit('click');
}
}
}
</script>
<style scoped>
</style>

15
src/runtime/components/BitinflowCard.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="bg-white text-black dark:bg-base-700 dark:text-white rounded shadow mb-8">
<slot />
</div>
</template>
<script>
export default {
name: "BitinflowCard"
}
</script>
<style scoped>
</style>

15
src/runtime/components/BitinflowCardBody.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="p-8 rounded-b">
<slot />
</div>
</template>
<script>
export default {
name: "BitinflowCardBody"
}
</script>
<style scoped>
</style>

17
src/runtime/components/BitinflowCardHeader.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="py-4 px-8 border-b dark:border-base-800 rounded-t">
<div class="text-xl font-medium">
<slot />
</div>
</div>
</template>
<script>
export default {
name: "BitinflowCardHeader"
}
</script>
<style scoped>
</style>

15
src/runtime/components/BitinflowContainer.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="container mx-auto px-4 lg:px-16 py-8 space-y-8">
<slot />
</div>
</template>
<script>
export default {
name: "BitinflowContainer"
}
</script>
<style scoped>
</style>

20
src/runtime/components/BitinflowFirstLevelLink.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<a class="hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2" href="#">
<i :class="['fal text-xl', icon]"></i>
<span>
<slot />
</span>
</a>
</template>
<script>
export default {
name: "BitinflowFirstLevelLink",
props: {
icon: {
type: String,
default: 'fa-arrow-up-right-from-square'
}
}
}
</script>

144
src/runtime/components/BitinflowFirstLevelMenu.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div class="bg-gray-100 dark:bg-base min-h-screen flex flex-col relative">
<!-- Overlay -->
<div
ref="overlay"
class="sm:hidden hidden bg-gray-800 opacity-50 w-full min-h-screen absolute z-10"
/>
<!-- Header -->
<header class="bg-white relative shadow sm:hidden z-10">
<div class="container flex justify-between items-center py-4">
<img
src="/img/icon-light.svg"
class="h-4"
alt="bitinflow"
>
<div class="flex items-center space-x-4">
<nuxt-link
v-for="link in secondaryMenu"
:key="link.name"
:to="link.to"
>
<i
:class="link.icon"
class="icon"
/> {{ link.name }}
</nuxt-link>
<nuxt-link
class="inline-block flex"
to="/"
>
<img
class="h-8 w-8 rounded-full"
alt="profile"
src="/img/avatar.jpg"
/>
</nuxt-link>
<button
class="focus-within:outline-none pl-4"
@click="toggleMenu"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
</div>
</header>
<!-- Sidenav with Content -->
<div class="flex flex-grow">
<!-- Sidenav -->
<nav
ref="sidebar"
class="flex h-screen flex-col w-36 bg-base-800 dark:border-r dark:border-base text-gray-100 shadow sm:relative absolute inset-y-0 transform -translate-x-full sm:translate-x-0 transition transition-transform z-20"
>
<!-- logo -->
<div class="flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center">
<button @click="toggleDarkMode">
<img
src="/img/icon-light.svg"
class="h-8 w-auto"
alt="Logo"
>
</button>
</div>
<div class="flex-auto flex flex-col overflow-y-auto py-6 space-y-6">
<!-- nav -->
<nav class="primary flex flex-grow flex-col space-y-4 px-6">
<slot name="top" />
</nav>
<nav class="flex flex-initial flex-col space-y-4 px-6">
<slot name="bottom" />
</nav>
</div>
<div class="flex-none" />
</nav>
<!-- Content -->
<main class="flex flex-1">
<slot />
</main>
</div>
</div>
</template>
<script>
export default {
name: "BitinflowFirstLevelMenu",
data() {
return {
primaryMenu: [
{name: 'Home', icon: 'fal fa-home', to: '/', exact: true},
{name: 'Buckets', icon: 'fal fa-bucket', to: '/buckets', exact: false},
{name: 'Domains', icon: 'fal fa-globe', to: '/domains', exact: false},
{name: 'Spaces', icon: 'fal fa-meteor', to: '/spaces', exact: false},
{name: 'Zones', icon: 'fal fa-list-ul', to: '/zones', exact: false},
],
secondaryMenu: [
{name: 'Logout', icon: 'fal fa-sign-out', to: '/logout'},
],
};
},
methods: {
toggleMenu() {
this.$refs.overlay.classList.toggle('hidden');
this.$refs.sidebar.classList.toggle('-translate-x-full');
},
closeMenu() {
this.$refs.overlay.classList.add('hidden');
this.$refs.sidebar.classList.add('-translate-x-full');
},
toggleDarkMode() {
document.body.classList.toggle('dark')
}
},
};
</script>
<style scoped>
.nuxt-link-active {
background: #00BFA5;
}
.nuxt-link-active:hover {
background: #004F44;
}
</style>

15
src/runtime/components/BitinflowFlexAuto.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="flex-auto">
<slot/>
</div>
</template>
<script>
export default {
name: "BitinflowFlex"
}
</script>
<style scoped>
</style>

44
src/runtime/components/BitinflowFloatingBanner.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div class="fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-[100]">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="rounded-lg bg-primary-500 p-2 shadow-lg sm:p-3">
<div class="flex flex-wrap items-center justify-between">
<div class="flex w-0 flex-1 items-center">
<span class="flex rounded-lg bg-primary-800 p-2">
<!-- Heroicon name: outline/megaphone -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</span>
<p class="ml-3 truncate font-medium text-white">
<span class="md:hidden">We announced a new product!</span>
<span class="hidden md:inline">Big news! We're excited to announce a brand new product.</span>
</p>
</div>
<div class="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
<a href="#" class="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-primary-500 shadow-sm hover:bg-zinc-200">Learn more</a>
</div>
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
<button type="button" class="-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white">
<span class="sr-only">Dismiss</span>
<!-- Heroicon name: outline/x-mark -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "BitinflowFloatingBanner"
}
</script>
<style scoped>
</style>

11
src/runtime/components/BitinflowHeroCard.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="bg-gradient-to-tr from-primary-600 to-primary-400 text-white rounded shadow p-8">
<slot />
</div>
</template>
<script>
export default {
name: "BitinflowHeroCard"
}
</script>

11
src/runtime/components/BitinflowScreenScrollContainer.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="overflow-y-auto h-screen">
<slot />
</div>
</template>
<script>
export default {
name: "BitinflowScreenScrollContainer"
}
</script>

20
src/runtime/components/BitinflowSecondLevelLink.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<bitinflow-button class="flex items-center gap-2">
<i :class="['fal', icon]" /> <slot />
</bitinflow-button>
</template>
<script>
import BitinflowButton from "./BitinflowButton.vue";
export default {
name: "BitinflowSecondLevelLink",
components: {BitinflowButton},
props: {
icon: {
type: String,
default: 'fa-arrow-up-right-from-square'
}
}
}
</script>

49
src/runtime/components/BitinflowSecondLevelMenu.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<nav
class="w-64 bg-white text-black shadow dark:bg-base-700 dark:text-white dark:border-base-900 dark:border-l flex flex-col overflow-y-auto h-screen absolute sm:relative transform -translate-x-full sm:translate-x-0 pt-10 pb-4 px-4 space-y-2">
<span class="font-semibold px-4">
<slot name="title" />
</span>
<div class="flex flex-col gap-2 justify-between flex-1">
<div class="flex flex-col gap-2">
<slot />
</div>
<div>
<bitinflow-second-level-link
class="bg-zinc-100 hover:bg-zinc-200 dark:bg-base-500 dark:hover:bg-base-600"
icon="fa-plus"
>
Create Resource
</bitinflow-second-level-link>
</div>
</div>
</nav>
</template>
<script>
import BitinflowSecondLevelLink from "./BitinflowSecondLevelLink.vue";
export default {
name: "BitinflowSecondLevelMenu",
components: {BitinflowSecondLevelLink},
props: {
items: {
type: Array,
// eslint-disable-next-line vue/require-valid-default-prop
default: [
{name: 'Test', href: 'Test'}
]
}
}
}
</script>
<style scoped>
.nuxt-link-active {
background: #f3f3f3;
}
.dark .nuxt-link-active {
background: #464649;
}
</style>

78
src/runtime/components/BitinflowThirdLevelMenu.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div class="flex-1 dark:border-l dark:border-base shadow text-black dark:text-white">
<div class="bg-white border-b dark:bg-base-600 dark:border-base">
<div class="container mx-auto px-4 lg:px-16 py-10">
<div class="text-3xl font-semibold">
<slot name="title" />
</div>
</div>
</div>
<nav class="bg-white dark:bg-base-700 py-4">
<div class="container mx-auto px-4 lg:px-16">
<div class="hidden xl:block space-x-4">
<bitinflow-button
v-for="item in thirdLevelLinks"
:key="item.name"
>
<i
:class="['far', item.icon]"
class="icon"
/> {{ link.name }}
</bitinflow-button>
</div>
<div class="flex flex-col xl:hidden">
<select
v-model="link"
class="bg-white"
@change="onChange"
>
<option
v-for="item in thirdLevelLinks"
:key="item.name"
:value="item.to"
>
{{ item.name }}
</option>
</select>
</div>
</div>
</nav>
</div>
</template>
<script>
import {mapState} from "pinia";
import {useMenuStore} from "../stores/menu.js";
import BitinflowButton from "./BitinflowButton.vue";
export default {
name: "BitinflowThirdLevelMenu",
components: {BitinflowButton},
data() {
return {
link: ''
}
},
computed: {
...mapState(useMenuStore, ['thirdLevelLinks'])
},
methods: {
onChange(event) {
this.link = event.target.value
this.$router.push(event.target.value)
}
}
}
</script>
<style scoped>
.nuxt-link-active {
background: #f3f3f3;
}
.dark .nuxt-link-active {
background: #464649;
}
</style>

8
src/runtime/composables/index.js Normal file
View File

@@ -0,0 +1,8 @@
import {useMenuStore} from "../stores/menu.js";
export const useMenu = (data) => {
const menu = useMenuStore()
if (data.thirdLevelLinks) {
menu.updateThirdLevelLinks(data.thirdLevelLinks)
}
}

5
src/runtime/plugin.ts Normal file
View File

@@ -0,0 +1,5 @@
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
console.log('Plugin injected by my-module!')
})

14
src/runtime/stores/menu.js Normal file
View File

@@ -0,0 +1,14 @@
import {defineStore} from 'pinia';
export const useMenuStore = defineStore('menu', {
state: () => {
return {
thirdLevelLinks: []
}
},
actions: {
updateThirdLevelLinks(links) {
this.thirdLevelLinks = links;
},
},
})

15
test/basic.test.ts Normal file
View File

@@ -0,0 +1,15 @@
import { describe, it, expect } from 'vitest'
import { fileURLToPath } from 'node:url'
import { setup, $fetch } from '@nuxt/test-utils'
describe('ssr', async () => {
await setup({
rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
})
it('renders the index page', async () => {
// Get response to a server-rendered page with `$fetch`.
const html = await $fetch('/')
expect(html).toContain('<div>basic</div>')
})
})

6
test/fixtures/basic/app.vue vendored Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div>basic</div>
</template>
<script setup>
</script>

7
test/fixtures/basic/nuxt.config.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
import MyModule from '../../../src/module'
export default defineNuxtConfig({
modules: [
MyModule
]
})

5
test/fixtures/basic/package.json vendored Normal file
View File

@@ -0,0 +1,5 @@
{
"private": true,
"name": "basic",
"type": "module"
}

3
tsconfig.json Normal file
View File

@@ -0,0 +1,3 @@
{
"extends": "./playground/.nuxt/tsconfig.json"
}

5385
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff