Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit f416491

Browse files
VividLemonVividLemon
committed
chore: begin start of nuxt-docs
1 parent 9972d6c commit f416491

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+28446
-13
lines changed

‎.editorconfig

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_size = 2

‎apps/docs/docs/reference/directives.md

+3-4
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ interface ValueObject {
7575
}
7676
```
7777

78-
7978
#### Delay
8079

8180
We can define a delay to display the tooltip, in that case we need to use the object value format, if not by default it's used 0.
@@ -89,6 +88,7 @@ When we are using a directive, we have two ways to define the title to use in th
8988
````vue
9089
<b-card v-b-tooltip.hover.top title="my title" />
9190
````
91+
9292
* First example it's using the property from BCard "title", this property is going to render something like:
9393

9494
```html
@@ -108,7 +108,7 @@ So, it's not going to work, and we are going to see a warning in the developer's
108108
<b-card v-b-tooltip.hover.top="my title" />
109109
````
110110

111-
Here we are not using a string, because is reading ts or js code. So, we need to set a literal string, a variable, function or so on.
111+
Here we are not using a string, because is reading ts or js code. So, we need to set a literal string, a variable, function or so on
112112

113113
##### Correct use
114114

@@ -132,5 +132,4 @@ In that case, the directive is detecting the title value, and it's going to be u
132132
<b-card v-b-tooltip.hover.top="'my title'" />
133133
````
134134

135-
We should use the value type when the component is not setting to the root component a title.
136-
Notice that we should use ts/js code, a variable and so on.
135+
We should use the value type when the component is not setting to the root component a title. Notice that we should use ts/js code, a variable and so on

‎apps/nuxt-docs/.eslintrc.cjs

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/* eslint-env node */
2+
require('@rushstack/eslint-patch/modern-module-resolution')
3+
4+
const {defineConfig} = require('eslint-define-config')
5+
6+
module.exports = defineConfig({
7+
root: true,
8+
extends: [
9+
'plugin:vue/vue3-recommended',
10+
'eslint:recommended',
11+
'@vue/eslint-config-typescript/recommended',
12+
'@vue/eslint-config-prettier',
13+
],
14+
parserOptions: {
15+
ecmaVersion: 'latest',
16+
},
17+
rules: {
18+
'prettier/prettier': [
19+
'warn',
20+
{
21+
endOfLine: 'auto',
22+
},
23+
],
24+
},
25+
})

‎apps/nuxt-docs/README.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Content v2 Minimal Starter
2+
3+
Look at the [Content documentation](https://content-v2.nuxtjs.org/) to learn more.
4+
5+
## Setup
6+
7+
Make sure to install the dependencies:
8+
9+
```bash
10+
# yarn
11+
yarn install
12+
13+
# npm
14+
npm install
15+
16+
# pnpm
17+
pnpm install
18+
```
19+
20+
## Development Server
21+
22+
Start the development server on http://localhost:3000
23+
24+
```bash
25+
npm run dev
26+
```
27+
28+
## Production
29+
30+
Build the application for production:
31+
32+
```bash
33+
npm run build
34+
```
35+
36+
Locally preview production build:
37+
38+
```bash
39+
npm run preview
40+
```
41+
42+
Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.

‎apps/nuxt-docs/components/DarkButton.vue

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<b-dropdown variant="link" :aria-label="ariaText">
3+
<template #button-content>
4+
<component :is="currentIcon" />
5+
</template>
6+
<b-dropdown-item v-for="item in foo" :key="item.value" @click="toggle(item.value)">
7+
{{ item.value }}
8+
</b-dropdown-item>
9+
</b-dropdown>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import SunIcon from '~icons/bi/sun'
14+
import MoonIcon from '~icons/bi/moon'
15+
16+
// TODO fix this issue
17+
// eslint-disable-next-line no-undef
18+
const color = useColorMode({
19+
persist: true,
20+
})
21+
22+
// eslint-disable-next-line no-undef
23+
const foo = computed<{icon: any; value: typeof color.value}[]>(() => [
24+
{
25+
icon: SunIcon,
26+
value: 'light',
27+
},
28+
{
29+
icon: MoonIcon,
30+
value: 'dark',
31+
},
32+
{icon: MoonIcon, value: 'auto'},
33+
])
34+
35+
// eslint-disable-next-line no-undef
36+
const currentIcon = computed(
37+
() => foo.value.find((el) => el.value === color.value)?.icon ?? MoonIcon
38+
)
39+
40+
// eslint-disable-next-line no-undef
41+
const ariaText = computed(() => (color.value === 'dark' ? 'Toggle Light Mode' : 'Toggle Dark Mode'))
42+
43+
const toggle = (value: typeof color.value) => {
44+
color.value = value
45+
}
46+
</script>

‎apps/nuxt-docs/content/components/Accordion.md

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# Accordion
2+
3+
Build vertically collapsing accordions in combination with `<b-collapse>` component.
4+
5+
## How it works
6+
7+
The `<b-accordion-item>` uses the `<b-collapse>` component internally to make it collapsible. To render an accordion that’s expanded, add the `visible` property on the `<b-accordion-item>` component.
8+
9+
::: tip
10+
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the [reduced motion section of our accessibility documentation](https://getbootstrap.com/docs/5.0/getting-started/accessibility/#reduced-motion).
11+
:::
12+
13+
## Example
14+
15+
Click the accordions below to expand/collapse the accordion content.
16+
17+
<ClientOnly>
18+
<b-card class="text-dark">
19+
<b-accordion>
20+
<b-accordion-item title="Accordion Item #1" visible>
21+
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
22+
</b-accordion-item>
23+
<b-accordion-item title="Accordion Item #2">
24+
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
25+
</b-accordion-item>
26+
<b-accordion-item title="Accordion Item #3">
27+
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
28+
</b-accordion-item>
29+
</b-accordion>
30+
</b-card>
31+
</ClientOnly>
32+
33+
```html
34+
<b-accordion>
35+
<b-accordion-item title="Accordion Item #1" visible>
36+
<strong>This is the first item's accordion body.</strong> It is shown by default, until the
37+
collapse plugin adds the appropriate classes that we use to style each element. These classes
38+
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
39+
modify any of this with custom CSS or overriding our default variables. It's also worth noting
40+
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
41+
does limit overflow.
42+
</b-accordion-item>
43+
<b-accordion-item title="Accordion Item #2">
44+
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
45+
collapse plugin adds the appropriate classes that we use to style each element. These classes
46+
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
47+
modify any of this with custom CSS or overriding our default variables. It's also worth noting
48+
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
49+
does limit overflow.
50+
</b-accordion-item>
51+
<b-accordion-item title="Accordion Item #3">
52+
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
53+
collapse plugin adds the appropriate classes that we use to style each element. These classes
54+
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
55+
modify any of this with custom CSS or overriding our default variables. It's also worth noting
56+
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
57+
does limit overflow.
58+
</b-accordion-item>
59+
</b-accordion>
60+
```
61+
62+
### Flush
63+
64+
Add `flush` property to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
65+
66+
<ClientOnly>
67+
<b-card class="text-dark bg-light">
68+
<b-accordion flush>
69+
<b-accordion-item title="Accordion Item #1">
70+
Placeholder content for this accordion, which is intended to demonstrate the <code>flush</code> property. This is the first item's accordion body.
71+
</b-accordion-item>
72+
<b-accordion-item title="Accordion Item #2">
73+
Placeholder content for this accordion, which is intended to demonstrate the <code>flush</code> property. This is the second item's accordion body. Let's imagine this being filled with some actual content.
74+
</b-accordion-item>
75+
<b-accordion-item title="Accordion Item #3">
76+
Placeholder content for this accordion, which is intended to demonstrate the <code>flush</code> property. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
77+
</b-accordion-item>
78+
</b-accordion>
79+
</b-card>
80+
</ClientOnly>
81+
82+
```html
83+
<b-accordion flush>
84+
<b-accordion-item title="Accordion Item #1">
85+
Placeholder content for this accordion, which is intended to demonstrate the
86+
<code>flush</code> property. This is the first item's accordion body.
87+
</b-accordion-item>
88+
<b-accordion-item title="Accordion Item #2">
89+
Placeholder content for this accordion, which is intended to demonstrate the
90+
<code>flush</code> property. This is the second item's accordion body. Let's imagine this being
91+
filled with some actual content.
92+
</b-accordion-item>
93+
<b-accordion-item title="Accordion Item #3">
94+
Placeholder content for this accordion, which is intended to demonstrate the
95+
<code>flush</code> property. This is the third item's accordion body. Nothing more exciting
96+
happening here in terms of content, but just filling up the space to make it look, at least at
97+
first glance, a bit more representative of how this would look in a real-world application.
98+
</b-accordion-item>
99+
</b-accordion>
100+
```
101+
102+
### Always open
103+
104+
Add `free` property to make accordion items stay open when another item is opened.
105+
106+
<ClientOnly>
107+
<b-card class="text-dark">
108+
<b-accordion free>
109+
<b-accordion-item title="Accordion Item #1">
110+
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>default</code> slot, though the transition does limit overflow.
111+
</b-accordion-item>
112+
<b-accordion-item title="Accordion Item #2">
113+
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>default</code> slot, though the transition does limit overflow.
114+
</b-accordion-item>
115+
<b-accordion-item title="Accordion Item #3">
116+
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>default</code> slot, though the transition does limit overflow.
117+
</b-accordion-item>
118+
</b-accordion>
119+
</b-card>
120+
</ClientOnly>
121+
122+
```html
123+
<b-accordion free>
124+
<b-accordion-item title="Accordion Item #1">
125+
<strong>This is the first item's accordion body.</strong> It is shown by default, until the
126+
collapse plugin adds the appropriate classes that we use to style each element. These classes
127+
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
128+
modify any of this with custom CSS or overriding our default variables. It's also worth noting
129+
that just about any HTML can go within the <code>default</code> slot, though the transition does
130+
limit overflow.
131+
</b-accordion-item>
132+
<b-accordion-item title="Accordion Item #2">
133+
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
134+
collapse plugin adds the appropriate classes that we use to style each element. These classes
135+
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
136+
modify any of this with custom CSS or overriding our default variables. It's also worth noting
137+
that just about any HTML can go within the <code>default</code> slot, though the transition does
138+
limit overflow.
139+
</b-accordion-item>
140+
<b-accordion-item title="Accordion Item #3">
141+
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
142+
collapse plugin adds the appropriate classes that we use to style each element. These classes
143+
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
144+
modify any of this with custom CSS or overriding our default variables. It's also worth noting
145+
that just about any HTML can go within the <code>default</code> slot, though the transition does
146+
limit overflow.
147+
</b-accordion-item>
148+
</b-accordion>
149+
```
150+
151+
<ClientOnly>
152+
<ComponentReference></ComponentReference>
153+
</ClientOnly>

0 commit comments

Comments
 (0)