diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index b71894d27..000000000 --- a/.editorconfig +++ /dev/null @@ -1,2 +0,0 @@ -[*.{js,jsx,ts,tsx,vue,json}] -indent_size = 2 diff --git a/.github/FUNDING.yaml b/.github/FUNDING.yaml deleted file mode 100644 index 1f945942c..000000000 --- a/.github/FUNDING.yaml +++ /dev/null @@ -1 +0,0 @@ -open_collective: bootstrap-vue-next diff --git a/.github/ISSUE_TEMPLATE/bug_report.yaml b/.github/ISSUE_TEMPLATE/bug_report.yaml deleted file mode 100644 index 7fe8b1731..000000000 --- a/.github/ISSUE_TEMPLATE/bug_report.yaml +++ /dev/null @@ -1,37 +0,0 @@ -name: 🐞 Bug report -description: Report an issue -labels: [bug] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to fill out this bug report! - - type: textarea - id: bug-description - attributes: - label: Describe the bug - description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! - placeholder: Bug description - validations: - required: true - - type: input - id: reproduction - attributes: - label: Reproduction - description: Please provide a link via StackBlitz [vite with script setup](https://stackblitz.com/github/bootstrap-vue-next/bootstrap-vue-next/tree/main/templates/vite?file=src%2Fcomponents%2FComp.vue,src%2FApp.vue) / [light vue](https://stackblitz.com/fork/bootstra-vue-next-template?file=src%2Fcomponents%2FComp.vue,src%2FApp.vue) or a link to a repo that can reproduce the problem you ran into. A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required. - placeholder: Reproduction - validations: - required: true - - type: dropdown - id: package-manager - attributes: - label: Used Package Manager - description: Select the used package manager - options: - - pnpm - - bun - - yarn - - npm - - n/a - validations: - required: true diff --git a/.github/ISSUE_TEMPLATE/compatibility_report.yaml b/.github/ISSUE_TEMPLATE/compatibility_report.yaml deleted file mode 100644 index a4ce2ec63..000000000 --- a/.github/ISSUE_TEMPLATE/compatibility_report.yaml +++ /dev/null @@ -1,34 +0,0 @@ -name: 🐞 Compatibility report -description: Create a report on missing features from Bootstrap v5 or BootstrapVue v2 -labels: [compatibility enhancement] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to fill out this compatibility report! - - type: dropdown - id: feature-type - attributes: - label: Missing feature is from - description: "Please source of the feature: Bootstrap-vue or Bootstrap v5." - options: - - bootstrap-vue - - Bootstrap v5 - validations: - required: true - - type: input - id: docs - attributes: - label: Docs - description: Please provide a link to the Bootstrap-vue docs or the most current version of the Bootstrap v5 docs for this feature. - placeholder: link - validations: - required: true - - type: textarea - id: feature-description - attributes: - label: Describe the missing feature - description: A clear and concise description of what is missing. If you intend to submit a PR for this issue, tell us in the description. Thanks! - placeholder: Feature description - validations: - required: true diff --git a/.github/ISSUE_TEMPLATE/config.yaml b/.github/ISSUE_TEMPLATE/config.yaml deleted file mode 100644 index 54ff4e72a..000000000 --- a/.github/ISSUE_TEMPLATE/config.yaml +++ /dev/null @@ -1,8 +0,0 @@ -blank_issues_enabled: true -contact_links: - - name: Discord Chat - url: https://discord.gg/j2Mtcny - about: Ask and discuss real-time with other users on the bootstrap-vue-next channel. - - name: Questions & Discussions - url: https://github.com/bootstrap-vue-next/bootstrap-vue-next/discussions - about: Use GitHub discussions for message-board style questions and discussions. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yaml b/.github/ISSUE_TEMPLATE/feature_request.yaml deleted file mode 100644 index af241e7a8..000000000 --- a/.github/ISSUE_TEMPLATE/feature_request.yaml +++ /dev/null @@ -1,32 +0,0 @@ -name: 🚀 New feature proposal -description: Propose a new feature to be added to BootstrapVueNext -labels: [enhancement] -body: - - type: markdown - attributes: - value: | - Thanks for your interest in the project and taking the time to fill out this feature report! - - type: textarea - id: feature-description - attributes: - label: Clear and concise description of the problem - description: 'As a developer using BootstrapVueNext I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!' - validations: - required: true - - type: textarea - id: suggested-solution - attributes: - label: Suggested solution - description: 'In module [xy] we could provide following implementation...' - validations: - required: true - - type: textarea - id: alternative - attributes: - label: Alternative - description: Clear and concise description of any alternative solutions or features you've considered. - - type: textarea - id: additional-context - attributes: - label: Additional context - description: Any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md deleted file mode 100644 index b503b7098..000000000 --- a/.github/ISSUE_TEMPLATE/question.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -name: Question -about: Ask a question -title: '' -labels: question -assignees: '' ---- - -**What you are trying to do.** A clear and concise description of what you want to happen. - -**What you have already tried.** A clear and concise description of any alternative solutions or features you have considered. - -**Any error messages you are getting.** If any, please list the errors you are getting. - -**Environment (please complete the following information):** - -- OS: [e.g. Windows 11, Pop!_OS] -- Package Version: [e.g. 0.8.12] -- Npm/Yarn/Pnpm/Bun Version: [e.g. npm@9.6.6, pnpm@8.5.1] diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index 45ad8ef4e..000000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,23 +0,0 @@ -# Describe the PR - -A clear and concise description of what the pull request does. - -## Small replication - -A small replication or video walkthrough can help demonstrate the changes made. This is optional, but can help observe the intended changes. A mentioned issue that contains a replication also works. - -## PR checklist - - - -**What kind of change does this PR introduce?** (check at least one) - -- [ ] Bugfix :bug: - `fix(...)` -- [ ] Feature - `feat(...)` -- [ ] ARIA accessibility - `fix(...)` -- [ ] Documentation update - `docs(...)` -- [ ] Other (please describe) - -**The PR fulfills these requirements:** - -- [ ] Pull request title and all commits follow the [**Conventional Commits**](https://www.conventionalcommits.org/) convention or has an [**override**](https://github.com/googleapis/release-please#how-can-i-fix-release-notes) in this pull request body **This is very important, as the `CHANGELOG` is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied** diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml deleted file mode 100644 index 758ea732c..000000000 --- a/.github/workflows/ci.yaml +++ /dev/null @@ -1,124 +0,0 @@ -# This workflow runs through the test suite - -name: ci - -on: - push: - branches: - - dev - - main - pull_request: - branches: - - dev - - main - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - name: Clone Repository - uses: actions/checkout@v4 - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 22.x.x - - - name: Install PNPM - uses: pnpm/action-setup@v4 - id: pnpm-install - - - name: Get PNPM Store Directory - id: pnpm-cache - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - - name: Setup PNPM Cache - uses: actions/cache@v3 - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - - name: Install Dependencies - run: pnpm install --ignore-scripts --frozen-lockfile - - - name: Build Library - run: pnpm run build - - - run: pnpx pkg-pr-new publish './packages/bootstrap-vue-next' './packages/nuxt' --template './templates/vite' - - test-lint: - runs-on: ubuntu-latest - - steps: - - name: Clone Repository - uses: actions/checkout@v4 - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 22.x.x - - - name: Install PNPM - uses: pnpm/action-setup@v4 - id: pnpm-install - - - name: Get PNPM Store Directory - id: pnpm-cache - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - - name: Setup PNPM Cache - uses: actions/cache@v3 - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - - name: Install Dependencies - run: pnpm install --ignore-scripts --frozen-lockfile - - - name: Test Lint - run: pnpm run test:lint:ci - - test-unit: - runs-on: ubuntu-latest - - steps: - - name: Clone Repository - uses: actions/checkout@v4 - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 22.x.x - - - name: Install PNPM - uses: pnpm/action-setup@v4 - id: pnpm-install - - - name: Get PNPM Store Directory - id: pnpm-cache - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - - name: Setup PNPM Cache - uses: actions/cache@v3 - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - - name: Install Dependencies - run: pnpm install --ignore-scripts --frozen-lockfile - - - name: Test Unit - run: pnpm run test:unit:ci diff --git a/.github/workflows/docs-deploy.yaml b/.github/workflows/docs-deploy.yaml deleted file mode 100644 index bd152e101..000000000 --- a/.github/workflows/docs-deploy.yaml +++ /dev/null @@ -1,74 +0,0 @@ -# This workflow builds and deploys the docs to GitHub Pages - -name: docs-github-pages-deploy - -on: - release: - types: [created] - workflow_dispatch: - -jobs: - build-and-deploy: - permissions: - contents: read - pages: write - id-token: write - - concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession. - - runs-on: ubuntu-latest - - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - - steps: - - name: Early Exit If Not BVN release - if: startsWith(github.event.release.tag_name, 'bootstrapvuenext') == false - run: exit 0 - - - name: Clone Repository - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 22.x.x - - - name: Install PNPM - uses: pnpm/action-setup@v4 - id: pnpm-install - - - name: Get PNPM Store Directory - id: pnpm-cache - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - - name: Setup PNPM Cache - uses: actions/cache@v3 - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - - name: Install Dependencies - run: pnpm install --ignore-scripts --frozen-lockfile - - - name: Build Library - run: pnpm run build --filter docs - - - name: Configure Pages - uses: actions/configure-pages@v5 - - - name: Upload Artifact - uses: actions/upload-pages-artifact@v3 - with: - path: ./apps/docs/.vitepress/dist - - - name: Deploy Pages - id: deployment - uses: actions/deploy-pages@v4 diff --git a/.github/workflows/issue-labeled.yaml b/.github/workflows/issue-labeled.yaml deleted file mode 100644 index cb10f8def..000000000 --- a/.github/workflows/issue-labeled.yaml +++ /dev/null @@ -1,21 +0,0 @@ -name: Issue Labeled - -on: - issues: - types: [labeled] - -jobs: - reply-labeled: - runs-on: ubuntu-latest - permissions: - issues: write - steps: - - name: need reproduction - if: github.event.label.name == 'need reproduction' - uses: actions-cool/issues-helper@v3 - with: - actions: create-comment - token: ${{ secrets.GITHUB_TOKEN }} - issue-number: ${{ github.event.issue.number }} - body: | - Hello @${{ github.event.issue.user.login }}. Please provide a [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) using StackBlitz [vite with script setup](https://stackblitz.com/github/bootstrap-vue-next/bootstrap-vue-next/tree/main/templates/vite?file=src%2Fcomponents%2FComp.vue,src%2FApp.vue) / [light vue](https://stackblitz.com/fork/bootstra-vue-next-template?file=src%2Fcomponents%2FComp.vue,src%2FApp.vue) or a link to a repo. diff --git a/.github/workflows/npm-publish-main.yaml b/.github/workflows/npm-publish-main.yaml deleted file mode 100644 index 97a41c01a..000000000 --- a/.github/workflows/npm-publish-main.yaml +++ /dev/null @@ -1,58 +0,0 @@ -# This workflow will publish the main package to GitHub Packages when a release is created -# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages - -name: npm-publish-main - -on: - release: - types: [created] - workflow_dispatch: {} - -jobs: - publish-npm-main: - permissions: - id-token: write - - runs-on: ubuntu-latest - - steps: - - name: Clone Repository - uses: actions/checkout@v4 - with: - ref: 'main' - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 22.x.x - registry-url: 'https://registry.npmjs.org' - - - name: Install PNPM - uses: pnpm/action-setup@v4 - id: pnpm-install - - - name: Get PNPM Store Directory - id: pnpm-cache - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - - name: Setup PNPM Cache - uses: actions/cache@v3 - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - - name: Install Dependencies - run: pnpm install --ignore-scripts --frozen-lockfile - - - name: Build Library - run: pnpm run build --filter bootstrap-vue-next - - - name: Publish Main - run: pnpm publish --tag latest --filter bootstrap-vue-next --access=public - env: - NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} - NPM_CONFIG_PROVENANCE: true diff --git a/.github/workflows/npm-publish-nuxt.yaml b/.github/workflows/npm-publish-nuxt.yaml deleted file mode 100644 index 1522625db..000000000 --- a/.github/workflows/npm-publish-nuxt.yaml +++ /dev/null @@ -1,58 +0,0 @@ -# This workflow will publish the nuxt package to GitHub Packages when a release is created -# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages - -name: npm-publish-nuxt - -on: - release: - types: [created] - workflow_dispatch: {} - -jobs: - publish-npm: - permissions: - id-token: write - - runs-on: ubuntu-latest - - steps: - - name: Clone Repository - uses: actions/checkout@v4 - with: - ref: 'main' - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 22.x.x - registry-url: 'https://registry.npmjs.org' - - - name: Install PNPM - uses: pnpm/action-setup@v4 - id: pnpm-install - - - name: Get PNPM Store Directory - id: pnpm-cache - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - - name: Setup PNPM Cache - uses: actions/cache@v3 - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - - - name: Install Dependencies - run: pnpm install --ignore-scripts --frozen-lockfile - - - name: Build Library - run: pnpm run build --filter @bootstrap-vue-next/nuxt - - - name: Publish Nuxt - run: pnpm publish --tag latest --filter @bootstrap-vue-next/nuxt --access=public - env: - NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN_NUXT_PACKAGE}} - NPM_CONFIG_PROVENANCE: true diff --git a/.github/workflows/release-main.yaml b/.github/workflows/release-main.yaml deleted file mode 100644 index cb083f773..000000000 --- a/.github/workflows/release-main.yaml +++ /dev/null @@ -1,81 +0,0 @@ -# This workflow is for the release please action. It automates releases when using conventional commit messages -# It also auto publishes releases to npm under the @latest tag on merge -# For more information see: https://github.com/google-github-actions/release-please-action - -name: release-main - -on: - push: - branches: - - main - -jobs: - release-please: - permissions: - contents: write - pull-requests: write - id-token: write - - runs-on: ubuntu-latest - - steps: - - name: Use Release Please - uses: googleapis/release-please-action@v4 - id: release - - # The logic below handles the npm publication: - - - name: Clone Repository - uses: actions/checkout@v4 - if: ${{ steps.release.outputs.releases_created }} - - - name: Install Node.js - uses: actions/setup-node@v4 - with: - node-version: 22.x.x - registry-url: 'https://registry.npmjs.org' - if: ${{ steps.release.outputs.releases_created }} - - - name: Install PNPM - uses: pnpm/action-setup@v4 - id: pnpm-install - if: ${{ steps.release.outputs.releases_created }} - - - name: Get PNPM Store Directory - id: pnpm-cache - shell: bash - run: | - echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - if: ${{ steps.release.outputs.releases_created }} - - - name: Setup PNPM Cache - uses: actions/cache@v3 - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: | - ${{ runner.os }}-pnpm-store- - if: ${{ steps.release.outputs.releases_created }} - - - name: Install Dependencies - run: pnpm install --ignore-scripts --frozen-lockfile - if: ${{ steps.release.outputs.releases_created }} - - - name: Build Library - run: pnpm run build --filter bootstrap-vue-next --filter @bootstrap-vue-next/nuxt - if: ${{ steps.release.outputs.releases_created }} - - - name: Publish Main - run: pnpm publish --tag latest --filter bootstrap-vue-next --access=public - env: - NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} - NPM_CONFIG_PROVENANCE: true - if: ${{ steps.release.outputs.releases_created && steps.release.outputs['packages/bootstrap-vue-next--release_created'] }} - - - name: Publish Nuxt - run: pnpm publish --tag latest --filter @bootstrap-vue-next/nuxt --access=public - env: - NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN_NUXT_PACKAGE}} - NPM_CONFIG_PROVENANCE: true - if: ${{ steps.release.outputs.releases_created && steps.release.outputs['packages/nuxt--release_created'] }} - diff --git a/.github/workflows/stale-issues.yaml b/.github/workflows/stale-issues.yaml deleted file mode 100644 index 5d2b51321..000000000 --- a/.github/workflows/stale-issues.yaml +++ /dev/null @@ -1,38 +0,0 @@ -# This workflow is responsible for auto marking issues and PRs as stale -# It will mark issues as stale after 30 days, and close them 14 days after that -# It will mark PRs as stale after 45 days, and will never close them -# It will never mark an issue or PR that has a milestone or has an assignee -# Exempt labels that will never be checked include: stale-exempt,future addition,enhancement,autorelease: tagged,autorelease: pending -# It will only check issues or PRs made after 2022-06-01T00:00:00 - -name: stale-issues - -on: - schedule: - - cron: '30 1 * * *' - -jobs: - stale: - permissions: - issues: write - pull-requests: write - - runs-on: ubuntu-latest - - steps: - - name: Use stale - uses: actions/stale@v5 - with: - stale-issue-message: 'This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed' - stale-pr-message: 'This PR is stale because it has been open for 45 days with no activity. It will not be auto-closed' - days-before-issue-stale: 30 - days-before-pr-stale: 45 - days-before-issue-close: -1 - days-before-pr-close: -1 - stale-issue-label: stale - stale-pr-label: stale - exempt-issue-labels: 'stale-exempt,future addition,enhancement,autorelease: tagged,autorelease: pending' - exempt-pr-labels: 'stale-exempt,future addition,enhancement,autorelease: tagged,autorelease: pending' - start-date: '2022-06-01T00:00:00' - exempt-all-milestones: true - exempt-assignees: true diff --git a/.gitignore b/.gitignore deleted file mode 100644 index b0cc4a156..000000000 --- a/.gitignore +++ /dev/null @@ -1,99 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -dist -.eslintcache - -# dependencies -node_modules -.pnp -.pnp.js - -# testing -coverage - -# misc -.DS_Store -*.pem - -# Log files -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -stats.html - -# local env files -.env.local -.env.*.local - -# turbo -.turbo - -# Vuepress files -.temp -.cache -/coverage/ - -# Editor directories and files -.idea -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? - -# Tarballs -*.tgz - -# Logs -*.log* - -# Temp directories -.tmp - -# Nuxt -.nuxt -.output -.vercel_build_output -.build-* -.netlify -.nitro -.output - -# Env -.env - -# Testing -reports -coverage -*.lcov -.nyc_output - -# VSCode -.vscode/* -!.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 - -TODO.md - -packages/bootstrap-vue-next/src/App.vue - -vite.config.mts.timestamp* - -components.d.ts diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index cb2c84d5c..000000000 --- a/.husky/pre-commit +++ /dev/null @@ -1 +0,0 @@ -pnpm lint-staged diff --git a/.markdownlint.json b/.markdownlint.json deleted file mode 100644 index 1f4f89584..000000000 --- a/.markdownlint.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "MD013": false, - "MD033":false -} \ No newline at end of file diff --git a/.npmrc b/.npmrc deleted file mode 100644 index cf0404245..000000000 --- a/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -shamefully-hoist=true -strict-peer-dependencies=false diff --git a/.prettierrc.yaml b/.prettierrc.yaml deleted file mode 100644 index 575f9610a..000000000 --- a/.prettierrc.yaml +++ /dev/null @@ -1,13 +0,0 @@ -bracketSpacing: false -printWidth: 100 -quoteProps: 'consistent' -semi: false -singleQuote: true -trailingComma: 'es5' -overrides: - - files: - - '**/*.css' - - '**/*.scss' - - '**/*.html' - options: - singleQuote: false diff --git a/.release-please-manifest.json b/.release-please-manifest.json deleted file mode 100644 index 697dfd469..000000000 --- a/.release-please-manifest.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "packages/bootstrap-vue-next": "0.30.0", - "packages/nuxt": "0.30.0" -} diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index a06a8c699..000000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "recommendations": [ - "Vue.volar", - "vitest.explorer", - "dbaeumer.vscode-eslint", - "EditorConfig.EditorConfig", - "esbenp.prettier-vscode" - ] -} diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index d9c0963a1..000000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "configurations": [ - { - "name": "Launch nuxt dev", - "request": "launch", - "runtimeArgs": [ - "dev", - "--filter", - "nuxt" - ], - "runtimeExecutable": "pnpm", - "skipFiles": [ - "/**" - ], - "type": "node" - }, - { - "name": "Launch app dev", - "request": "launch", - "runtimeArgs": [ - "dev", - "--filter", - "bootstrap-vue-next" - ], - "runtimeExecutable": "pnpm", - "skipFiles": [ - "/**" - ], - "type": "node" - }, - { - "name": "Launch app unit test", - "request": "launch", - "runtimeArgs": [ - "test:unit", - "--filter", - "bootstrap-vue-next" - ], - "runtimeExecutable": "pnpm", - "skipFiles": [ - "/**" - ], - "type": "node" - }, - ] -} \ No newline at end of file diff --git a/404.html b/404.html new file mode 100644 index 000000000..9c9ae8f8c --- /dev/null +++ b/404.html @@ -0,0 +1,33 @@ + + + + + + + + + + + + + +
+ + + diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index e0ded6363..000000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,133 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -We as members, contributors, and leaders pledge to make participation in our -community a harassment-free experience for everyone, regardless of age, body -size, visible or invisible disability, ethnicity, sex characteristics, gender -identity and expression, level of experience, education, socio-economic status, -nationality, personal appearance, race, caste, color, religion, or sexual -identity and orientation. - -We pledge to act and interact in ways that contribute to an open, welcoming, -diverse, inclusive, and healthy community. - -## Our Standards - -Examples of behavior that contributes to a positive environment for our -community include: - -- Demonstrating empathy and kindness toward other people -- Being respectful of differing opinions, viewpoints, and experiences -- Giving and gracefully accepting constructive feedback -- Accepting responsibility and apologizing to those affected by our mistakes, - and learning from the experience -- Focusing on what is best not just for us as individuals, but for the overall - community - -Examples of unacceptable behavior include: - -- The use of sexualized language or imagery, and sexual attention or advances of - any kind -- Trolling, insulting or derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or email address, - without their explicit permission -- Other conduct which could reasonably be considered inappropriate in a - professional setting - -## Enforcement Responsibilities - -Community leaders are responsible for clarifying and enforcing our standards of -acceptable behavior and will take appropriate and fair corrective action in -response to any behavior that they deem inappropriate, threatening, offensive, -or harmful. - -Community leaders have the right and responsibility to remove, edit, or reject -comments, commits, code, wiki edits, issues, and other contributions that are -not aligned to this Code of Conduct, and will communicate reasons for moderation -decisions when appropriate. - -## Scope - -This Code of Conduct applies within all community spaces, and also applies when -an individual is officially representing the community in public spaces. -Examples of representing our community include using an official e-mail address, -posting via an official social media account, or acting as an appointed -representative at an online or offline event. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting -the project team at github_bootstrap-vue-next-org.a6m7g@aleeas.com. The project team will review and investigate all complaints, and -will respond in a way that it deems appropriate to the circumstances. The project team is obligated -to maintain confidentiality with regard to the reporter of an incident. Further details of specific -enforcement policies may be posted separately. - -All community leaders are obligated to respect the privacy and security of the -reporter of any incident. - -## Enforcement Guidelines - -Community leaders will follow these Community Impact Guidelines in determining -the consequences for any action they deem in violation of this Code of Conduct: - -### 1. Correction - -**Community Impact**: Use of inappropriate language or other behavior deemed -unprofessional or unwelcome in the community. - -**Consequence**: A private, written warning from community leaders, providing -clarity around the nature of the violation and an explanation of why the -behavior was inappropriate. A public apology may be requested. - -### 2. Warning - -**Community Impact**: A violation through a single incident or series of -actions. - -**Consequence**: A warning with consequences for continued behavior. No -interaction with the people involved, including unsolicited interaction with -those enforcing the Code of Conduct, for a specified period of time. This -includes avoiding interactions in community spaces as well as external channels -like social media. Violating these terms may lead to a temporary or permanent -ban. - -### 3. Temporary Ban - -**Community Impact**: A serious violation of community standards, including -sustained inappropriate behavior. - -**Consequence**: A temporary ban from any sort of interaction or public -communication with the community for a specified period of time. No public or -private interaction with the people involved, including unsolicited interaction -with those enforcing the Code of Conduct, is allowed during this period. -Violating these terms may lead to a permanent ban. - -### 4. Permanent Ban - -**Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an -individual, or aggression toward or disparagement of classes of individuals. - -**Consequence**: A permanent ban from any sort of public interaction within the -community. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], -version 2.1, available at -[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. - -Community Impact Guidelines were inspired by -[Mozilla's code of conduct enforcement ladder][Mozilla CoC]. - -For answers to common questions about this code of conduct, see the FAQ at -[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at -[https://www.contributor-covenant.org/translations][translations]. - -[homepage]: https://www.contributor-covenant.org -[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html -[Mozilla CoC]: https://github.com/mozilla/diversity -[FAQ]: https://www.contributor-covenant.org/faq -[translations]: https://www.contributor-covenant.org/translations diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index bdb01da32..000000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,138 +0,0 @@ -# Contribution Workflow - -## Use [Conventional Commit](https://www.conventionalcommits.org/) for Commit Messages - -It is vital to use the conventional commit standard when writing your commit messages. If your commit contains many fixes or enhancements you can use footers, for example: - -```txt -feat: adds v4 UUID to crypto - -This adds support for v4 UUIDs to the library. - -fix(utils): unicode no longer throws exception - PiperOrigin-RevId: 345559154 - BREAKING-CHANGE: encode method no longer throws. - Source-Link: googleapis/googleapis@5e0dcb2 - -feat(utils): update encode to support unicode - PiperOrigin-RevId: 345559182 - Source-Link: googleapis/googleapis@e5eef86 -``` - -Conventional commits are required for the automation of changelog and tag releases. Information on how to write commits can be found at . Additional information on how to do things like introduce multiple fixes in a single commit, or fixing release notes can be found at - -## Setting Up Your Workspace - -Setting up your workspace follows traditional open-source flows, if you are already familiar with the process, you can most likely skip this section: - -**Only pnpm is allowed**, attempting to run any other package manager tool will cause a warning error. View pnpm installation at - -1. Go to the -2. Click **Fork** at the top -3. On your IDE of choice, clone your own, new, forked repository - -This repository is where you will make your changes to. You can safely run `git push ...` and other commands in this repository - -When opening your repository, it is usually best to open the **root** folder, not a subdirectory such as `./packages/bootstrap-vue-next`. Eslint rules can sometimes get lost when opening a subdirectory of a workspace. If you do not have the recommended IDE extensions, it will usually suggest that you install them, but this is technically optional. You can finally run at the root: - -```bash -pnpm install -pnpm dev -``` - -Finally, after you have made sufficient changes and you are ready to publish your changes to the main repository, you will: - -1. Go to your forked repository on -2. Switch to the correct branch that you have been working on, this is usually the `main` branch, for simplicity -3. Click the **Contribute** button near the top of the page -4. Click **Open pull request** - -This will begin the process to merge your changes into the upstream repository's main branch - -## Developing - -The project uses a monorepo architecture. The main source files for the package exist in `./packages/bootstrap-vue-next`, this is primarily where developing is done. You can then run `pnpm dev` and it will start all possible development environments. When developing the main package, you will want to open the **bootstrap-vue-next:dev** host. This has hot-reloading to make developing easier. You can use the `./packages/bootstrap-vue-next/src/app.vue` file as a test area for any changes that you make. - -You can also make use of the `./apps/playground` directory. The `./apps/playground` directory mimics a user's library and can demonstrate some bugs that may not be visible in the main package. However, it does not contain native hot-reloading and makes for a poor development experience since it requires a built dist copy of the main package (simply run `pnpm build`). The playground is not typically used for development. It is more of a place to view the full behavior of a component. - -You can also use `pnpm dev --filter bootstrap-vue-next` to only open the main host. - -## Improving the documentation - -Improving the documentation is a great way to contribute to this project, especially if you're not quite ready to dive into the code. - -We use [vitepress](https://vitepress.dev/) to build our documentation in the `./apps/docs` directory. In order to test the docs, first make sure that you follow the steps in [Setting up your workspace](#setting-up-your-workspace). Then you can run `pnpm dev` from the root and then open the **docs:dev** host. This will hot-reload the documentation to let you easily see your edits. The `*.md` files under `./apps/docs/src/docs` contains the core documentation and the `*.data.ts` files under `./apps/docs/src/data/components` contains JSON files that contain the data to build the component definitions in the documentation. - -## Help Verify BootstrapVue and Bootstrap v5 Parity - -Evaluating parity is another great way to contribute to this project, especially if you're not quite ready to dive into the code. - -As we close in on a v1 of bootstrap-vue-next, we would like to verify our feature parity with both -[bootstrap-vue](https://bootstrap-vue.github.io/bootstrap-vue/) and [Bootstrap v5](https://getbootstrap.com/). - -This verification requires that someone take a close look at the documentation for both of the parity -systems and the code and documentation for bootstrap-vue-next to evaluate feature parity. We're using a -spreadsheet to track the fine grained assessment, and anyone who consumes bootstrap-vue(-next) should -be able to do the first pass evaluation of a component. - -Note: The parity report is a work in progress and is lagging well behind the actual state of bootstrap-vue-next. -Please don't use it as a measure of the current status of the project yet. When the parity report is at parity with the project, -we'll remove this note. - -To contribute: - -- Take a look at the read-only version of the spreadsheet, available [here](https://1drv.ms/x/s!AiUqzkjNYGL6ieBPpQpcR41wo1laZQ). You can filter on `BFormCheckbox` and `BFormCheckboxGroup` in the `Component` column to see an example of components that are being evaluated and just about anything else to see the initial state. -- Read through the `Instructions` tab of the spreadsheet, which provides a suggested process to verify a component. -- Once you're satisfied that you understand the process, request access to the [read/write version of the spreadsheet](https://1drv.ms/x/s!AiUqzkjNYGL6ieBPJZV0b2mgOVgnYw) on the [bootstrap-vue-next channel of the BootstrapVue discord server](https://discord.gg/pE875sZP). -- Evaluate a component (or two), update the spreadsheet, and get us one step closer to v1! - -More context is available in the comments for [this issue](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1775). - -## Registering New Components - -For adding a new component, there are some notes... - -- They should only exist in the `./packages/bootstrap-vue-next/src/components` directory -- You should first review the `./packages/bootstrap-vue-next/src/types` directory and get familiar with the internal types that you can use -- They should follow ` - - diff --git a/apps/docs/.vitepress/theme/index.ts b/apps/docs/.vitepress/theme/index.ts deleted file mode 100644 index 25a1bf902..000000000 --- a/apps/docs/.vitepress/theme/index.ts +++ /dev/null @@ -1,36 +0,0 @@ -// https://vitepress.dev/guide/custom-theme -import Layout from './Layout.vue' -import type {EnhanceAppContext, Theme} from 'vitepress' -import DefaultTheme from 'vitepress/theme-without-fonts' -import {appInfoKey} from './keys' - -import 'bootstrap/dist/css/bootstrap.css' -import 'bootstrap-vue-next/dist/bootstrap-vue-next.css' -import {createBootstrap} from 'bootstrap-vue-next' - -export default { - extends: DefaultTheme, - Layout, - enhanceApp(ctx: EnhanceAppContext) { - const githubMainBranch = 'main' - const base = `tree/${githubMainBranch}` - const githubUrl = 'https://github.com/bootstrap-vue-next/bootstrap-vue-next' - const githubPackageDirectory = `${githubUrl}/${base}/packages/bootstrap-vue-next` - const githubComponentsDirectory = `${githubPackageDirectory}/src/components` - const githubComposablesDirectory = `${githubPackageDirectory}/src/composables` - const githubDirectivesDirectory = `${githubPackageDirectory}/src/directives` - const githubDocsDirectory = `${githubUrl}/${base}/apps/docs/src/docs` - ctx.app.provide(appInfoKey, { - githubMainBranch, - githubUrl, - githubDocsDirectory, - githubPackageDirectory, - githubComponentsDirectory, - githubComposablesDirectory, - githubDirectivesDirectory, - discordUrl: 'https://discord.gg/j2Mtcny', - opencollectiveUrl: 'https://opencollective.com/bootstrap-vue-next', - }) - ctx.app.use(createBootstrap()) - }, -} satisfies Theme diff --git a/apps/docs/.vitepress/theme/keys.ts b/apps/docs/.vitepress/theme/keys.ts deleted file mode 100644 index aebec23ad..000000000 --- a/apps/docs/.vitepress/theme/keys.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {InjectionKey} from 'vue' - -export const appInfoKey: InjectionKey<{ - githubMainBranch: string - githubUrl: string - githubPackageDirectory: string - githubComponentsDirectory: string - githubComposablesDirectory: string - githubDirectivesDirectory: string - githubDocsDirectory: string - discordUrl: string - opencollectiveUrl: string -}> = Symbol('app-info') diff --git a/apps/docs/README.md b/apps/docs/README.md deleted file mode 100644 index 0a4cc2fe6..000000000 --- a/apps/docs/README.md +++ /dev/null @@ -1,18 +0,0 @@ -# Docs - -The documentation requires a specific style guide for consistency purposes. You can review the styles required here - -1. It is recommended to have rules should be followed strictly -- besides HTML in markdown. Which you can disable in `.vscode/settings.json` -2. Lines should never contain ending periods -3. All components should have a description directly after the first top-level h1. You should always use `>` for these top level descriptions -4. Code _examples_ -- ie those that use code highlighting, should never contain a wrapper div, card, or other element. The _only_ exception is #5 -5. Code examples should always contain a `template` if they require a `script` tag. -6. `script` tags should always be ` diff --git a/apps/docs/src/components/ComponentReference.vue b/apps/docs/src/components/ComponentReference.vue deleted file mode 100644 index 2a919f8bc..000000000 --- a/apps/docs/src/components/ComponentReference.vue +++ /dev/null @@ -1,290 +0,0 @@ - - - diff --git a/apps/docs/src/components/CrossSiteScriptingWarning.vue b/apps/docs/src/components/CrossSiteScriptingWarning.vue deleted file mode 100644 index afa515193..000000000 --- a/apps/docs/src/components/CrossSiteScriptingWarning.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/apps/docs/src/components/HighlightCard.vue b/apps/docs/src/components/HighlightCard.vue deleted file mode 100644 index 2318fe1fc..000000000 --- a/apps/docs/src/components/HighlightCard.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - diff --git a/apps/docs/src/components/NotYetDocumented.vue b/apps/docs/src/components/NotYetDocumented.vue deleted file mode 100644 index 096587649..000000000 --- a/apps/docs/src/components/NotYetDocumented.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/apps/docs/src/components/NotYetImplemented.vue b/apps/docs/src/components/NotYetImplemented.vue deleted file mode 100644 index 0659a098a..000000000 --- a/apps/docs/src/components/NotYetImplemented.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/apps/docs/src/components/NoteAlert.vue b/apps/docs/src/components/NoteAlert.vue deleted file mode 100644 index fab9b3113..000000000 --- a/apps/docs/src/components/NoteAlert.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/apps/docs/src/components/OpenCollectiveMemberDisplay.vue b/apps/docs/src/components/OpenCollectiveMemberDisplay.vue deleted file mode 100644 index 531586ef8..000000000 --- a/apps/docs/src/components/OpenCollectiveMemberDisplay.vue +++ /dev/null @@ -1,140 +0,0 @@ - - - diff --git a/apps/docs/src/components/OpenCollectiveMemberDisplayAvatarCard.vue b/apps/docs/src/components/OpenCollectiveMemberDisplayAvatarCard.vue deleted file mode 100644 index d2cd33cb0..000000000 --- a/apps/docs/src/components/OpenCollectiveMemberDisplayAvatarCard.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - diff --git a/apps/docs/src/components/PageContents.vue b/apps/docs/src/components/PageContents.vue deleted file mode 100644 index 4dcebce5c..000000000 --- a/apps/docs/src/components/PageContents.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - - - diff --git a/apps/docs/src/components/PageContentsItem.vue b/apps/docs/src/components/PageContentsItem.vue deleted file mode 100644 index b9ab264dd..000000000 --- a/apps/docs/src/components/PageContentsItem.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/apps/docs/src/components/PageHeader.vue b/apps/docs/src/components/PageHeader.vue deleted file mode 100644 index 5fedb4545..000000000 --- a/apps/docs/src/components/PageHeader.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/apps/docs/src/components/ShowHideProps.vue b/apps/docs/src/components/ShowHideProps.vue deleted file mode 100644 index f051839d2..000000000 --- a/apps/docs/src/components/ShowHideProps.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - diff --git a/apps/docs/src/components/SourceHeader.vue b/apps/docs/src/components/SourceHeader.vue deleted file mode 100644 index 5e0dc6490..000000000 --- a/apps/docs/src/components/SourceHeader.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - diff --git a/apps/docs/src/components/StyleExtension.vue b/apps/docs/src/components/StyleExtension.vue deleted file mode 100644 index 834ba140c..000000000 --- a/apps/docs/src/components/StyleExtension.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - - diff --git a/apps/docs/src/components/TableOfContentsCard.vue b/apps/docs/src/components/TableOfContentsCard.vue deleted file mode 100644 index 859d74dc8..000000000 --- a/apps/docs/src/components/TableOfContentsCard.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/apps/docs/src/components/TableOfContentsNav.vue b/apps/docs/src/components/TableOfContentsNav.vue deleted file mode 100644 index 4d8515766..000000000 --- a/apps/docs/src/components/TableOfContentsNav.vue +++ /dev/null @@ -1,252 +0,0 @@ - - - - - diff --git a/apps/docs/src/components/UsePluginAlert.vue b/apps/docs/src/components/UsePluginAlert.vue deleted file mode 100644 index 200e5c3be..000000000 --- a/apps/docs/src/components/UsePluginAlert.vue +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/apps/docs/src/components/ViewSourceButton.vue b/apps/docs/src/components/ViewSourceButton.vue deleted file mode 100644 index db350a422..000000000 --- a/apps/docs/src/components/ViewSourceButton.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/apps/docs/src/composables/useEditLink.ts b/apps/docs/src/composables/useEditLink.ts deleted file mode 100644 index a6d75472b..000000000 --- a/apps/docs/src/composables/useEditLink.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {computed, inject} from 'vue' -import {appInfoKey} from '../../.vitepress/theme/keys' -import {useRoute} from 'vitepress' - -export const useThisPageOnGithub = () => { - const repoUrl = inject(appInfoKey) - const route = useRoute() - const path = computed(() => - route.path - .slice(route.path.indexOf('/docs') + 5) - .replace(/\/$/, '') - .replace(/\.html/, '') - ) - return computed(() => `${repoUrl?.githubDocsDirectory}${path.value}.md`) -} - -export const useEditThisPageOnGithub = () => { - const url = useThisPageOnGithub() - return computed(() => url.value.replace('/tree/', '/edit/')) -} diff --git a/apps/docs/src/data/components/accordion.data.ts b/apps/docs/src/data/components/accordion.data.ts deleted file mode 100644 index dc4898280..000000000 --- a/apps/docs/src/data/components/accordion.data.ts +++ /dev/null @@ -1,246 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick, showHideProps} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BAccordion', - sourcePath: '/BAccordion/BAccordion.vue', - props: { - '': { - flush: { - type: 'boolean', - default: false, - description: - 'Remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container', - }, - free: { - type: 'boolean', - default: false, - description: 'Accordion items will stay open when another item is opened', - }, - index: { - type: 'number | number[]', - default: undefined, - description: 'Index of the accordion item that is open', - }, - modelValue: { - type: 'string | string[]', - default: undefined, - description: 'Id of the accordion item that is open', - }, - // transProps: { - // type: 'TransitionProps', - // default: undefined, - // description: 'Transition properties', - // }, - // noAnimation: { - // type: 'boolean', - // default: false, - // description: 'When set, disables the animation', - // }, - // noFade: { - // type: 'boolean', - // default: false, - // description: 'Alias for `noAnimation`', - // }, - ...pick(showHideProps, ['initialAnimation', 'lazy', 'unmountLazy']), - ...pick( - buildCommonProps({ - id: { - description: - 'The Id to be injected to accordion items and used in BCollapse for state managment', - }, - }), - ['id'] - ), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: 'Update the currently opened accordion item', - args: [ - { - arg: 'value', - description: 'Id of the accordion item that is open', - type: 'string | string[]', - }, - ], - }, - { - event: 'update:index', - description: 'Update the index of the accordion item that is open', - args: [ - { - arg: 'value', - description: 'Index of the accordion item that is open', - type: 'number | number[]', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the Accordion', - }, - ], - }, - { - component: 'BAccordionItem', - sourcePath: '/BAccordion/BAccordionItem.vue', - props: { - '': { - bodyAttrs: { - type: 'Readonly', - default: undefined, - description: 'Attributes to be applied to the body of the accordion item', - }, - bodyClass: { - type: 'ClassValue', - default: undefined, - description: 'Class to be applied to the body of the accordion item', - }, - buttonAttrs: { - type: 'Readonly', - default: undefined, - description: 'Attributes to be applied to the button in header', - }, - buttonClass: { - type: 'ClassValue', - default: undefined, - description: 'Class to be applied to the button in header', - }, - collapseClass: { - type: 'ClassValue', - default: undefined, - description: 'Class to be applied to the collapse', - }, - headerAttrs: { - type: 'Readonly', - default: undefined, - description: 'Attributes to be applied to the header element', - }, - headerClass: { - type: 'ClassValue', - default: undefined, - description: 'Class to be applied to the header element', - }, - headerTag: { - type: 'string', - default: 'h2', - description: 'Tag to be used for the header element', - }, - horizontal: { - type: 'boolean', - default: undefined, - description: - 'Transition the `width` instead of `height` and set a `width` on the immediate child element', - }, - isNav: { - type: 'boolean', - default: undefined, - description: - 'When set, signifies that the accordion is part of a navbar, enabling certain features for navbar support', - }, - title: { - type: 'string', - default: undefined, - description: - 'Text to place in the header of the AccordionItem (title slot takes precedence)', - }, - // transProps: { - // type: 'TransitionProps', - // default: undefined, - // description: 'Transition properties', - // }, - // noAnimation: { - // type: 'boolean', - // default: false, - // description: 'When set, disables the animation', - // }, - // noFade: { - // type: 'boolean', - // default: false, - // description: 'Alias for `noAnimation`', - // }, - ...pick(showHideProps, ['modelValue', 'lazy', 'show', 'unmountLazy', 'visible']), - ...pick( - buildCommonProps({ - id: { - description: - 'The Id to be injected to accordion items and used to in BCollapse for state managment', - }, - }), - ['id', 'tag', 'wrapperAttrs'] - ), - } satisfies Record, - }, - emits: [ - { - event: 'hidden', - description: 'Emitted when AccordionItem has finished closing', - }, - { - event: 'hide', - description: 'Emitted when AccordionItem has started to close', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'Native triggerable event', - }, - ], - }, - { - event: 'hide-prevented', - description: - 'Emitted when the AccordionItem tried to close, but was prevented from doing so.', - }, - { - event: 'show', - description: 'Emitted when AccordionItem has started to show', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'Native triggerable event', - }, - ], - }, - { - event: 'shown', - description: 'Emitted when AccordionItem has finished showing', - }, - { - event: 'show-prevented', - description: - 'Emitted when the AccordionItem tried to open, but was prevented from doing so.', - }, - { - event: 'update:model-value', - description: 'Emitted when the visibility of the AccordionItem is changed', - args: [ - { - arg: 'value', - type: 'boolean', - description: 'Current visibility state of the AccordionItem', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the AccordionItem', - }, - { - name: 'title', - description: 'Content to place in the header of the AccordionItem', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/alert.data.ts b/apps/docs/src/data/components/alert.data.ts deleted file mode 100644 index 91ad238ff..000000000 --- a/apps/docs/src/data/components/alert.data.ts +++ /dev/null @@ -1,168 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, omit, pick, showHideProps} from '../../utils' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BAlert', - sourcePath: '/BAlert/BAlert.vue', - props: { - '': { - alertClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to add to the alert wrapper element', - }, - bgVariant: { - type: 'ColorVariant | null', - default: null, - }, - body: { - type: 'string', - default: undefined, - description: 'The text content of the body', - }, - bodyClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to add to the alert body element', - }, - closeClass: { - type: 'ClassValue', - default: undefined, - description: 'Applies one or more custom classes to the close button', - }, - closeContent: { - type: 'string', - default: undefined, - description: 'Sets the text of the close button. The `close` slot takes precedence', - }, - closeLabel: { - type: 'string', - default: 'Close', - description: 'Sets the aria-label attribute on the close button', - }, - closeVariant: { - type: 'string | null', - default: null, - description: 'Color variant for the close button', - }, - dismissible: { - type: 'boolean', - default: false, - description: 'When set, enables the close button', - }, - headerClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to add to the alert header element', - }, - headerTag: { - type: 'string', - default: 'div', - description: 'Specify the HTML tag to render instead of the default tag for the footer', - }, - id: { - type: 'string', - default: undefined, - description: - 'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed', - }, - interval: { - type: 'number | requestAnimationFrame', - default: 'requestAnimationFrame', - description: 'The interval in milliseconds to update the countdown timer', - }, - isStatus: { - type: 'boolean', - default: false, - description: - "When set to 'true', makes the alert have attributes aria-live=polite and role=status. When 'false' aria-live will be 'assertive' and role will be 'alert'", - }, - modelValue: { - type: 'boolean | number', - default: false, - description: - 'Controls the visibility of the alert. A `boolean` value directly controls the visibility. A number starts the countdown timer', - }, - progressProps: { - type: "Omit", - default: undefined, - description: - 'The properties to define the progress bar in the alert. No progress will be shown if left undefined', - }, - showOnPause: { - type: 'boolean', - default: true, - description: - 'Setting this property to `false` will override the behavior of showing the Alert when the timer is paused', - }, - textVariant: { - type: 'TextColorVariant | null', - default: null, - }, - title: { - type: 'string', - default: undefined, - description: "The alert's title text", - }, - ...omit(showHideProps, ['modelValue']), - ...pick(buildCommonProps(), ['variant', 'noHoverPause', 'noResumeOnHoverLeave']), - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...linkProps, - }, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the Alert', - }, - { - name: 'close', - description: 'Content to place in the close button', - }, - ], - emits: [ - { - event: 'close', - description: 'Emitted when the alert begins its transition to close', - }, - { - event: 'closed', - description: 'Emitted after the alert ends its transition to close', - }, - { - event: 'close-countdown', - description: 'Content to place in the alert', - args: [ - { - arg: 'closeCountdown', - description: 'Time remaining on the timer', - type: 'number', - }, - ], - }, - { - event: 'update:model-value', - description: 'Standard event to update the v-model', - args: [ - { - arg: 'update:model-value', - description: 'modelValue', - type: 'boolean | number', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/avatar.data.ts b/apps/docs/src/data/components/avatar.data.ts deleted file mode 100644 index 12f76767e..000000000 --- a/apps/docs/src/data/components/avatar.data.ts +++ /dev/null @@ -1,213 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BAvatar', - styleSpec: {kind: StyleKind.BsvnClass}, - sourcePath: '/BAvatar/BAvatar.vue', - props: { - '': { - badge: { - type: 'boolean | string', - default: false, - description: - 'When `true` shows an empty badge on the avatar, alternatively set to a string for content in the badge', - }, - badgeBgVariant: { - type: 'ColorVariant | null', - default: null, - description: - 'Applies one of the Bootstrap theme color variants to the background of the badge', - }, - badgeDotIndicator: { - type: 'boolean', - default: false, - description: - 'When `true` shows a small dot indicator on the Avatar. All of the badge props are applied to the dot. `badge-dot-indicator` takes precedence over `badge`', - }, - badgeTextVariant: { - type: 'TextColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the text', - }, - badgeVariant: { - type: 'ColorVariant | null', - default: 'primary', - description: 'Applies one of the Bootstrap theme color variants to the badge', - }, - badgePlacement: { - type: 'CombinedPlacement', - default: 'bottom-end', - description: - 'Placement of the badge relative to the avatar. One of the values of `CombinedPlacement`', - }, - badgePill: { - type: 'boolean', - default: false, - description: 'Renders the badge with pill styling', - }, - button: { - type: 'boolean', - default: false, - description: 'When set to `true`, renders the avatar as a button', - }, - buttonType: { - type: 'ButtonType', - default: 'button', - description: - 'Type of button to render (i.e. `button`, `submit`, `reset`). Has no effect if prop button is not set', - }, - size: { - type: 'Size | string', - default: undefined, - description: 'Size of the avatar. Refer to the documentation for details', - }, - square: { - type: 'boolean', - default: false, - description: 'Disables rounding of the avatar, rending the avatar with square corners', - }, - text: { - type: 'string', - default: undefined, - description: 'Text to place in the avatar', - }, - ...pick( - buildCommonProps({ - alt: { - default: 'avatar', - }, - rounded: { - default: 'circle', - description: - 'Specifies the type of rounding to apply to the component or its children. The `square` prop takes precedence', - }, - src: { - description: 'Image URL to use for the avatar', - }, - variant: { - default: 'secondary', - }, - }), - [ - 'ariaLabel', - 'alt', - 'bgVariant', - 'rounded', - 'roundedBottom', - 'roundedEnd', - 'roundedStart', - 'roundedTop', - 'src', - 'textVariant', - 'variant', - ] - ), - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...linkProps, - }, - }, - emits: [ - { - event: 'click', - description: '', - args: [ - { - arg: 'click', - description: 'Native click event', - type: 'MouseEvent', - }, - ], - }, - { - event: 'img-error', - args: [ - { - arg: 'img-error', - description: 'On img-error', - type: 'Event', - }, - ], - description: 'On image error', - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the avatars optional badge. Overrides the `badge` prop', - }, - { - name: 'badge', - description: - 'Content to place in the avatar. Overrides props `text`, `src`, and `icon-name`', - }, - ], - }, - { - component: 'BAvatarGroup', - styleSpec: {kind: StyleKind.BsvnClass}, - sourcePath: '/BAvatar/BAvatarGroup.vue', - props: { - '': { - overlap: { - type: 'Numberish', - default: 0.3, - description: - 'Content to place in the avatar. Overrides props `text`, `src`, and `icon-name`', - }, - size: { - type: 'Size | string', - default: undefined, - description: 'Size of the child avatars. Refer to the documentation for details', - }, - square: { - type: 'boolean', - default: false, - description: - 'Disables rounding of the child avatars, rending the avatar with square corners', - }, - ...pick( - buildCommonProps({ - rounded: { - default: 'circle', - description: - 'Specifies the type of rounding to apply to the component or its children. The `square` prop takes precedence. Refer to the documentation for details.', - }, - variant: { - default: 'secondary', - }, - }), - [ - 'bgVariant', - 'rounded', - 'roundedBottom', - 'roundedEnd', - 'roundedStart', - 'roundedTop', - 'tag', - 'textVariant', - 'variant', - ] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content (avatars) to place in the avatar group', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/badge.data.ts b/apps/docs/src/data/components/badge.data.ts deleted file mode 100644 index 80c56cc93..000000000 --- a/apps/docs/src/data/components/badge.data.ts +++ /dev/null @@ -1,63 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {linkProps, linkTo} from '../../utils/link-props' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BBadge', - sourcePath: '/BBadge/BBadge.vue', - props: { - '': { - dotIndicator: { - type: 'boolean', - default: false, - description: 'Indication position and dot styling applied', - }, - pill: { - type: 'boolean', - default: false, - description: "When set to 'true', renders the badge in pill style", - }, - tag: { - type: 'string', - default: 'span', - description: 'Specify the HTML tag to render instead of the default tag', - }, - placement: { - type: 'CombinedPlacement', - default: undefined, - description: - 'Placement of the badge relative to the its parent. One of the values of `CombinedPlacement`', - }, - ...pick( - buildCommonProps({ - variant: { - default: 'secondary', - }, - }), - ['bgVariant', 'variant', 'textVariant'] - ), - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...linkProps, - }, - }, - emits: [], - slots: [ - { - name: 'default', - description: '', - scope: [], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/breadcrumb.data.ts b/apps/docs/src/data/components/breadcrumb.data.ts deleted file mode 100644 index 7b58d010b..000000000 --- a/apps/docs/src/data/components/breadcrumb.data.ts +++ /dev/null @@ -1,89 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BBreadcrumb', - sourcePath: '/BBreadcrumb/BBreadcrumb.vue', - props: { - '': { - items: { - type: 'BreadcrumbItemRaw[]', - default: undefined, - description: 'Array of `BreadCrumbItem`s or strings to render. See above for details.', - }, - id: { - type: 'string', - default: undefined, - description: - 'ID of the breadcrumb component. When combined with the `useBreadcrumb` composable, it will use this id as a breadcrumb trail instead of the global trail.', - }, - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content (breadcrumb items) to place in the breadcrumb', - }, - { - name: 'append', - description: 'Content to append to the breadcrumb', - }, - { - name: 'prepend', - description: 'Content to prepend to the breadcrumb', - }, - ], - }, - { - component: 'BBreadcrumbItem', - sourcePath: '/BBreadcrumb/BBreadcrumbItem.vue', - props: { - '': { - ariaCurrent: { - type: 'string', - default: 'location', - description: - "Sets the value of the 'aria-current' attribute (when the item is the active item). Supported string values are 'location', 'page', or 'true'", - }, - text: { - type: 'string', - default: undefined, - description: 'Text to render in the breadcrumb item', - }, - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...linkProps, - }, - }, - emits: [ - { - event: 'click', - description: 'Emitted when the breadcrumb item is clicked', - args: [ - { - type: 'MouseEvent', - arg: 'click', - description: 'Native click event object', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the breadcrumb item', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/button.data.ts b/apps/docs/src/data/components/button.data.ts deleted file mode 100644 index d04156ab3..000000000 --- a/apps/docs/src/data/components/button.data.ts +++ /dev/null @@ -1,153 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BButton', - styleSpec: {kind: StyleKind.OverrideClass, value: '.btn'}, - sourcePath: '/BButton/BButton.vue', - props: { - '': { - loading: { - type: 'boolean', - default: false, - description: 'When set to `true`, renders the button in loading state', - }, - loadingFill: { - type: 'boolean', - default: false, - description: - 'When set to `true`, fills the button with the loading spinner and ignores `loading-text`', - }, - loadingText: { - type: 'string', - default: 'Loading...', - description: 'The text to display when the button is in a loading state', - }, - pill: { - type: 'boolean', - default: false, - description: "Renders the button with the pill style appearance when set to 'true'", - }, - pressed: { - type: 'boolean', - default: undefined, - description: - "When set to 'true', gives the button the appearance of being pressed and adds attribute 'aria-pressed=\"true\"'. When set to `false` adds attribute 'aria-pressed=\"false\"'. Tri-state prop. Syncable with the .sync modifier", - }, - squared: { - type: 'boolean', - default: false, - description: "Renders the button with non-rounded corners when set to 'true'", - }, - type: { - type: 'ButtonType', - default: 'button', - description: - "The value to set the button's 'type' attribute to. Can be one of 'button', 'submit', or 'reset'", - }, - ...pick( - buildCommonProps({ - variant: { - default: 'secondary', - }, - }), - ['size', 'tag', 'variant'] - ), - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...pick(linkProps, [ - 'activeClass', - 'exactActiveClass', - 'replace', - 'routerComponentName', - 'routerTag', - ]), - }, - }, - emits: [ - { - args: [ - { - arg: 'click', - description: '', - type: 'MouseEvent', - }, - ], - description: 'On click event', - event: 'click', - }, - { - event: 'update:pressed', - description: 'Emitted when the `pressed` prop is changed', - args: [ - { - arg: 'value', - type: 'boolean', - description: 'The new value of the `pressed` prop', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the button', - }, - { - name: 'loading', - description: 'The content to replace the default loader', - }, - { - name: 'loading-spinner', - description: 'The content to replace the default loading spinner', - }, - ], - }, - { - component: 'BCloseButton', - styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-close'}, - sourcePath: '/BButton/BCloseButton.vue', - props: { - '': { - type: { - type: 'ButtonType', - default: 'button', - description: - "The value to set the button's 'type' attribute to. Can be one of 'button', 'submit', or 'reset'", - }, - ...pick( - buildCommonProps({ - ariaLabel: { - default: 'Close', - }, - }), - ['ariaLabel', 'disabled'] - ), - } satisfies Record, - }, - emits: [ - { - event: 'click', - description: 'Emitted when non-disabled button clicked', - args: [ - { - arg: 'click', - type: 'MouseEvent', - description: 'Native click event object', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/buttonGroup.data.ts b/apps/docs/src/data/components/buttonGroup.data.ts deleted file mode 100644 index 7354afd71..000000000 --- a/apps/docs/src/data/components/buttonGroup.data.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BButtonGroup', - styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-group'}, - sourcePath: '/BButton/BButtonGroup.vue', - props: { - '': { - vertical: { - type: 'boolean', - default: false, - description: 'When set, renders the button group in vertical mode', - }, - ...pick(buildCommonProps(), ['ariaLabel', 'size', 'tag']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content (buttons) to place in the button group', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/buttonToolbar.data.ts b/apps/docs/src/data/components/buttonToolbar.data.ts deleted file mode 100644 index 823293ae7..000000000 --- a/apps/docs/src/data/components/buttonToolbar.data.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BButtonToolbar', - styleSpec: {kind: StyleKind.OverrideClass, value: '.btn-toolbar'}, - sourcePath: '/BButton/BButtonToolbar.vue', - props: { - '': { - justify: { - type: 'boolean', - default: false, - description: - 'Make the toolbar span the maximum available width, by increasing spacing between the button groups, input groups and dropdowns', - }, - ...pick(buildCommonProps(), ['ariaLabel', 'role']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the button toolbar', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/card.data.ts b/apps/docs/src/data/components/card.data.ts deleted file mode 100644 index bc2839b3f..000000000 --- a/apps/docs/src/data/components/card.data.ts +++ /dev/null @@ -1,349 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, omit, pick} from '../../utils' -import {imageProps, linkTo} from '../../utils/image-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BCard', - sourcePath: '/BCard/BCard.vue', - props: { - '': { - align: { - type: 'AlignmentTextHorizontal', - default: undefined, - description: "Text alignment for the card's content: 'start', 'center' or 'end'", - }, - bodyText: { - type: 'string', - default: "''", - description: 'Text content to place in the card body, default slot takes precedence', - }, - imgAlt: { - type: 'string', - default: undefined, - description: 'URL for the optional image', - }, - imgHeight: { - type: 'Numberish', - default: undefined, - description: "The value to set on the image's 'height' attribute", - }, - imgPlacement: { - type: 'Placement | "overlay"', - default: 'top', - description: - "Placement for the optional image ('top', 'bottom', 'start', 'end', or 'overlay')", - }, - imgSrc: { - type: 'string', - default: undefined, - description: 'URL for the optional image', - }, - imgWidth: { - type: 'Numberish', - default: undefined, - description: "The value to set on the image's 'width' attribute", - }, - noBody: { - type: 'boolean', - default: false, - description: 'Disable rendering of the default inner card-body element', - }, - ...pick( - buildCommonProps({ - bodyBorderVariant: { - description: - 'Applies one of the Bootstrap theme color variants to the body border (NYI?)', - }, - }), - [ - 'bgVariant', - 'bodyBgVariant', - 'bodyBorderVariant', - 'bodyClass', - 'bodyTag', - 'bodyTextVariant', - 'borderVariant', - 'footer', - 'footerBgVariant', - 'footerBorderVariant', - 'footerClass', - 'footerTag', - 'footerTextVariant', - 'footerVariant', - 'header', - 'headerBgVariant', - 'headerBorderVariant', - 'headerClass', - 'headerTag', - 'headerTextVariant', - 'headerVariant', - 'subtitle', - 'subtitleTag', - 'subtitleTextVariant', - 'tag', - 'textVariant', - 'title', - 'titleTag', - 'variant', - ] - ), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content to place in the card', - }, - { - name: 'footer', - description: 'For custom rendering of footer content', - }, - { - name: 'header', - description: 'For custom rendering of header content', - }, - { - name: 'img', - description: 'For custom rendering of image content', - }, - ], - }, - { - component: 'BCardBody', - styleSpec: {kind: StyleKind.OverrideClass, value: '.card-body, .card-img-overlay'}, - sourcePath: '/BCard/BCardBody.vue', - emits: [], - props: { - '': { - overlay: { - type: 'boolean', - default: false, - }, - text: { - type: 'string', - default: undefined, - description: 'Text content to place in the card body, default slot takes precedence', - }, - ...pick(buildCommonProps(), [ - 'bgVariant', - 'subtitle', - 'subtitleTag', - 'subtitleTextVariant', - 'tag', - 'textVariant', - 'title', - 'titleTag', - 'variant', - ]), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the card body', - }, - { - name: 'title', - description: 'Content to place in the card title', - }, - { - name: 'subtitle', - description: 'Content to place in the card subtitle', - }, - ], - }, - { - component: 'BCardFooter', - sourcePath: '/BCard/BCardFooter.vue', - emits: [], - props: { - '': { - text: { - type: 'string', - default: undefined, - description: 'Text content to place in the card footer, default slot takes precedence', - }, - ...pick(buildCommonProps(), [ - 'bgVariant', - 'borderVariant', - 'tag', - 'textVariant', - 'variant', - ]), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the card footer', - }, - ], - }, - { - component: 'BCardGroup', - styleSpec: {kind: StyleKind.OverrideClass, value: '.card-deck, .ard-group, .card-columns'}, - sourcePath: '/BCard/BCardGroup.vue', - emits: [], - props: { - '': { - columns: { - type: 'boolean', - default: false, - description: 'When set, renders the card group in a masonry-like columnar style', - }, - deck: { - type: 'boolean', - default: false, - description: 'When set renders the card group with gutters between cards', - }, - ...pick(buildCommonProps(), ['tag']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content (cards) to place in the card group', - }, - ], - }, - { - component: 'BCardHeader', - sourcePath: '/BCard/BCardHeader.vue', - emits: [], - props: { - '': { - text: { - type: 'string', - default: undefined, - description: 'Text content to place in the card header, default slot takes precedence', - }, - ...pick(buildCommonProps(), [ - 'bgVariant', - 'borderVariant', - 'tag', - 'textVariant', - 'variant', - ]), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the card header', - }, - ], - }, - { - component: 'BCardImg', - sourcePath: '/BCard/BCardImg.vue', - props: { - '': { - placement: { - type: 'Placement | "overlay"', - default: 'top', - }, - } satisfies Record< - Exclude, - PropertyReference - >, - 'BImg props': { - _linkTo: {type: linkTo}, - ...omit(imageProps, ['placement']), - }, - }, - emits: [], - slots: [], - }, - { - component: 'BCardSubtitle', - sourcePath: '/BCard/BCardSubtitle.vue', - emits: [], - props: { - '': { - text: { - type: 'string', - default: undefined, - description: 'Text content to place in the card body, default slot takes precedence', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'h6', - }, - textVariant: { - default: 'body-secondary', - }, - }), - ['tag', 'textVariant'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the card subtitle', - }, - ], - }, - { - component: 'BCardText', - sourcePath: '/BCard/BCardText.vue', - emits: [], - props: { - '': { - text: { - type: 'string', - default: undefined, - description: 'Text content to place in the card text, default slot takes precedence', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'p', - }, - }), - ['tag'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the card text', - }, - ], - }, - { - component: 'BCardTitle', - sourcePath: '/BCard/BCardTitle.vue', - emits: [], - props: { - '': { - text: { - type: 'string', - default: undefined, - description: 'Text content to place in the card title, default slot takes precedence', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'h4', - }, - }), - ['tag'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the card title', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/carousel.data.ts b/apps/docs/src/data/components/carousel.data.ts deleted file mode 100644 index 77b75f1a5..000000000 --- a/apps/docs/src/data/components/carousel.data.ts +++ /dev/null @@ -1,291 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BCarousel', - sourcePath: '/BCarousel/BCarousel.vue', - props: { - '': { - background: { - type: 'string', - default: undefined, - description: "Set the CSS color of the carousel's background", - }, - controls: { - type: 'boolean', - default: false, - description: 'Enable the previous and next controls', - }, - controlsNextText: { - type: 'string', - default: 'Next', - description: 'Set the text for the "Next" control', - }, - controlsPrevText: { - type: 'string', - default: 'Previous', - description: 'Set the text for the "Previous" control', - }, - fade: { - type: 'boolean', - default: false, - description: - 'When set, changes the slide animation to a crossfade instead of a sliding effect', - }, - imgHeight: { - type: 'string', - default: undefined, - description: "Set the default image 'height' attribute for all b-tab children", - }, - imgWidth: { - type: 'string', - default: undefined, - description: "Set the default image 'width' attribute for all b-tab children", - }, - indicators: { - type: 'boolean', - default: false, - description: 'Enable the indicator buttons for jumping to specific slides', - }, - indicatorsButtonLabel: { - type: 'string', - default: 'Slide', - description: 'Set the aria-label for the indicator buttons', - }, - interval: { - type: 'number', - default: 5000, - description: 'Set the delay time (in milliseconds) between slides', - }, - keyboard: { - type: 'boolean', - default: true, - description: 'Enable keyboard navigation with the right and left arrow keys', - }, - labelIndicators: { - type: 'string', - default: 'Select a slide to display', - description: 'Set the aria-label for the indicators', - }, - modelValue: { - type: 'number', - default: 0, - description: 'The index of the currently active slide', - }, - noAnimation: { - type: 'boolean', - default: false, - description: 'When set, disables the animation', - }, - noHoverPause: { - type: 'boolean', - default: false, - description: - 'When set, disables the pausing of the slide show when the current slide is hovered', - }, - noTouch: { - type: 'boolean', - default: false, - description: 'Disable controlling the slides via touch swipes', - }, - noWrap: { - type: 'boolean', - default: false, - description: 'Do not restart the slide show when then end is reached', - }, - ride: { - type: "boolean | 'carousel'", - default: false, - description: - 'Set to "carousel" to animate slides automatically, true to animate on first interaction, false to disable animation', - }, - rideReverse: { - type: 'boolean', - default: false, - description: 'When set, the carousel will animate in the reverse direction', - }, - touchThreshold: { - type: 'Numberish', - default: 50, - description: - 'The minimum distance the touch swipe must move to prevent the slide show from being paused', - }, - ...pick(buildCommonProps({}), ['id']), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: 'Standard event to update the v-model', - args: [ - { - arg: 'update:model-value', - description: 'modelValue', - type: 'number', - }, - ], - }, - { - event: 'slide', - description: 'Fires immediately when the carousel starts its slide transition.', - args: [ - { - arg: 'value', - type: 'BvCarouselEvent', - description: 'Indicates the slide `direction`, `from`, and `to` indices', - }, - ], - }, - { - event: 'slid', - description: 'Fired when the carousel has completed its slide transition.', - args: [ - { - arg: 'value', - type: 'BvCarouselEvent', - description: 'Indicates the slide `direction`, `from`, and `to` indices', - }, - ], - }, - { - event: 'prev-click', - description: '', - args: [ - { - arg: 'click', - description: 'Native click event', - type: 'MouseEvent', - }, - ], - }, - { - event: 'next-click', - description: '', - args: [ - { - arg: 'click', - description: 'Native click event', - type: 'MouseEvent', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content (slides) to place in the carousel', - }, - ], - }, - { - component: 'BCarouselSlide', - styleSpec: {kind: StyleKind.OverrideClass, value: '.carousel-item'}, - sourcePath: '/BCarousel/BCarouselSlide.vue', - emits: [], - props: { - '': { - background: { - type: 'string', - default: undefined, - description: "CSS color to use as the slide's background color", - }, - caption: { - type: 'string', - default: undefined, - description: 'Text content to place in the caption', - }, - captionTag: { - type: 'string', - default: 'h3', - description: - 'Specify the HTML tag to render instead of the default tag for the caption wrapper', - }, - contentTag: { - type: 'string', - default: 'div', - description: - 'Specify the HTML tag to render instead of the default tag for the content wrapper', - }, - contentVisibleUp: { - type: 'string', - default: undefined, - description: - 'Specify the breakpoint that the textual content will start to be shown. Leave at default to always show the textual content', - }, - imgAlt: { - type: 'string', - default: undefined, - description: "Sets the value of the 'alt' attribute on the image", - }, - imgBlank: { - type: 'boolean', - default: false, - description: 'If set, will render a blank image instead of the img-src', - }, - imgBlankColor: { - type: 'string', - default: 'transparent', - description: 'Set the CSS color to use as the fill of the blank image', - }, - imgHeight: { - type: 'Numberish', - default: undefined, - description: "Set the default image 'height' attribute for all b-tab children", - }, - imgSrc: { - type: 'string', - default: undefined, - description: 'Sets the URL of the image', - }, - imgSrcset: { - type: 'string | string[]', - default: undefined, - }, - imgWidth: { - type: 'Numberish', - default: undefined, - description: "Set the default image 'width' attribute for all b-tab children", - }, - interval: { - type: 'number', - default: undefined, - description: 'Set the delay time (in milliseconds) before the slide is shown', - }, - text: { - type: 'string', - default: undefined, - description: 'Text content to place in the text of the slide', - }, - textTag: { - type: 'string', - default: 'p', - description: - 'Specify the HTML tag to render instead of the default tag for the text wrapper', - }, - ...pick(buildCommonProps({}), ['id']), - } satisfies Record, - }, - slots: [ - { - name: 'caption', - description: 'Content to place in caption', - }, - { - name: 'default', - description: 'Content to place in the carousel slide', - }, - { - name: 'img', - description: 'Slot for img element or image component', - }, - { - name: 'text', - description: 'Content to place in text area of the slide', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/collapse.data.ts b/apps/docs/src/data/components/collapse.data.ts deleted file mode 100644 index e59518632..000000000 --- a/apps/docs/src/data/components/collapse.data.ts +++ /dev/null @@ -1,165 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference, SlotScopeReference} from '../../types' -import {buildCommonProps, pick, showHideProps} from '../../utils' - -const sharedSlots: SlotScopeReference[] = [ - { - prop: 'hide', - type: '() => void', - description: "Hides the collapse and fires the 'hide' event", - }, - { - prop: 'id', - type: 'string', - description: 'The id of the collapse element', - }, - { - prop: 'show', - type: '() => void', - description: "Shows the collapse and fires the 'show' event", - }, - { - prop: 'toggle', - type: '() => void', - description: "Toggles the collapse and fires the 'hide' or 'show' event, as appropriate", - }, - { - prop: 'visible', - type: '() => void', - description: 'Visible state of the collapse. `true` if the collapse is visible', - }, -] - -export default { - load: (): ComponentReference[] => [ - { - component: 'BCollapse', - sourcePath: '/BCollapse/BCollapse.vue', - props: { - '': { - horizontal: { - type: 'boolean', - default: false, - }, - isNav: { - type: 'boolean', - default: false, - description: - 'When set, signifies that the collapse is part of a navbar, enabling certain features for navbar support', - }, - ...showHideProps, - ...pick(buildCommonProps(), ['id', 'tag']), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: 'Used to update the v-model', - args: [ - { - arg: 'value', - type: 'boolean', - description: 'Will be true if the collapse is visible', - }, - ], - }, - { - event: 'hide', - description: 'Emitted when collapse has started to close', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event object', - }, - ], - }, - { - event: 'hidden', - description: 'Emitted when collapse has finished closing', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event object', - }, - ], - }, - { - event: 'hide-prevented', - description: 'Emitted when the Collapse tried to close, but was prevented from doing so.', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event object', - }, - ], - }, - { - event: 'show', - description: 'Emitted when collapse has started to open', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event object', - }, - ], - }, - { - event: 'shown', - description: 'Emitted when collapse has finished opening', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event object', - }, - ], - }, - { - event: 'show-prevented', - description: 'Emitted when the Collapse tried to open, but was prevented from doing so.', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event object', - }, - ], - }, - { - event: 'toggle', - description: 'Emitted when collapse has started to toggle', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event object', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'The content shown and hidden by the collapse', - scope: sharedSlots, - }, - { - name: 'footer', - description: - 'Used to create custom toggles for your collapsible content. Placed directly below the content', - scope: sharedSlots, - }, - { - name: 'header', - description: - 'Used to create custom toggles for your collapsible content. Placed directly above the content', - scope: sharedSlots, - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/dropdown.data.ts b/apps/docs/src/data/components/dropdown.data.ts deleted file mode 100644 index 89175eb98..000000000 --- a/apps/docs/src/data/components/dropdown.data.ts +++ /dev/null @@ -1,229 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import { - buildCommonProps, - dropdownEmits, - dropdownProps, - dropdownSlots, - omit, - pick, -} from '../../utils' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BDropdown', - sourcePath: '/BDropdown/BDropdown.vue', - props: { - '': dropdownProps, - }, - emits: dropdownEmits, - slots: dropdownSlots, - }, - { - component: 'BDropdownDivider', - sourcePath: '/BDropdown/BDropdownDivider.vue', - props: { - '': { - dividerClass: { - default: undefined, - type: 'ClassValue', - description: 'CSS class (or classes) to add to the divider component', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'hr', - }, - }), - ['tag', 'variant', 'wrapperAttrs'] - ), - } satisfies Record, - }, - }, - { - component: 'BDropdownForm', - sourcePath: '/BDropdown/BDropdownForm.vue', - props: { - '': { - formClass: { - default: undefined, - type: 'ClassValue', - description: 'CSS class (or classes) to add to the form component', - }, - novalidate: {notYetImplemented: true}, - validated: {notYetImplemented: true}, - ...pick(buildCommonProps({}), ['wrapperAttrs']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the dropdown form', - }, - ], - }, - { - component: 'BDropdownGroup', - sourcePath: '/BDropdown/BDropdownGroup.vue', - emits: [], - props: { - '': { - header: { - type: 'string', - default: undefined, - }, - ...pick( - buildCommonProps({ - headerTag: { - default: 'header', - }, - }), - ['ariaDescribedby', 'headerClass', 'headerTag', 'headerVariant', 'id'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content (items) to place in the dropdown group', - }, - { - name: 'header', - description: 'Optional header content for the dropdown group', - }, - ], - }, - { - component: 'BDropdownHeader', - sourcePath: '/BDropdown/BDropdownHeader.vue', - emits: [], - props: { - '': { - text: { - default: undefined, - description: 'Content to place in the dropdown text. Default slot takes precedence', - type: 'string', - }, - ...pick(buildCommonProps({}), ['headerClass', 'tag', 'variant', 'wrapperAttrs']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the dropdown header', - }, - ], - }, - { - component: 'BDropdownItem', - sourcePath: '/BDropdown/BDropdownItem.vue', - props: { - '': { - ...pick(buildCommonProps({}), ['linkClass', 'wrapperAttrs']), - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...omit(linkProps, ['routerTag']), - }, - }, - emits: [ - { - event: 'click', - description: 'Emitted when item is clicked', - args: [ - { - arg: 'value', - type: 'MouseEvent', - description: 'Native click event object', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the dropdown item', - }, - ], - }, - { - component: 'BDropdownItemButton', - sourcePath: '/BDropdown/BDropdownItemButton.vue', - props: { - '': { - buttonClass: { - type: 'ClassValue', - default: undefined, - description: 'Class or classes to apply to the inner button element', - }, - ...pick(buildCommonProps({}), [ - 'active', - 'activeClass', - 'disabled', - 'variant', - 'wrapperAttrs', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'click', - description: 'Emitted when item is clicked', - args: [ - { - arg: 'value', - type: 'MouseEvent', - description: 'Native click event object', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the dropdown item button', - }, - ], - }, - { - component: 'BDropdownText', - sourcePath: '/BDropdown/BDropdownText.vue', - emits: [], - props: { - '': { - text: { - default: undefined, - description: 'Content to place in the dropdown text. Default slot takes precedence', - type: 'string', - }, - textClass: { - default: undefined, - type: 'ClassValue', - description: 'CSS class (or classes) to add to the text component', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'span', - }, - }), - ['tag', 'variant', 'wrapperAttrs'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the dropdown text', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/form.data.ts b/apps/docs/src/data/components/form.data.ts deleted file mode 100644 index ceb20cb5f..000000000 --- a/apps/docs/src/data/components/form.data.ts +++ /dev/null @@ -1,218 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BForm', - styleSpec: {kind: StyleKind.Tag, value: 'form'}, - sourcePath: '/BForm/BForm.vue', - props: { - '': { - ...pick(buildCommonProps(), ['floating', 'id', 'novalidate', 'validated']), - } satisfies Record, - }, - emits: [ - { - event: 'submit', - description: 'Emitted when the form is submitted', - args: [ - { - arg: 'submit', - type: 'Event', - description: 'Native submit event', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Contet to place in the form', - }, - ], - }, - { - component: 'BFormDatalist', - styleSpec: {kind: StyleKind.Tag, value: 'datalist'}, - sourcePath: '/BForm/BFormDatalist.vue', - props: { - '': { - ...pick( - buildCommonProps({ - options: { - type: 'readonly (unknown | Record)[]', - description: - 'Array of items to render in the component. Note that BFormDatalist only supports Options, not OptionsGroups', - }, - }), - ['disabledField', 'id', 'options', 'textField', 'valueField'] - ), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content to place in the from datalist', - }, - { - name: 'first', - description: "Slot to place options above options provided via the 'options' prop", - }, - { - name: 'option', - description: - 'Use this slot to have finer control over the content render inside each data item', - scope: [ - { - prop: 'value', - type: 'any (T)', - description: 'The value of the option', - }, - { - prop: 'text', - type: 'string', - description: 'The text of the option', - }, - { - prop: 'disabled', - type: 'boolean', - description: 'Is the option disabled', - }, - ], - }, - ], - }, - - { - component: 'BFormFloatingLabel', - styleSpec: {kind: StyleKind.OverrideClass, value: 'floating-label'}, - sourcePath: '/BForm/BFormFloatingLabel.vue', - props: { - '': { - label: { - type: 'string', - default: undefined, - description: 'The text of the floating label', - }, - labelFor: { - type: 'string', - default: undefined, - description: 'The id of the input control that the floating label is for', - }, - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'The input control that contains the floating label', - }, - { - name: 'label', - description: 'The content to display in the floating label', - }, - ], - }, - { - component: 'BFormInvalidFeedback', - styleSpec: {kind: StyleKind.OverrideClass, value: 'invalid-feedback, invalid-tooltip'}, - sourcePath: '/BForm/BFormInvalidFeedback.vue', - props: { - '': { - forceShow: { - type: 'boolean', - default: false, - description: "Shows the feedback text, regardless of the value of the 'state' prop", - }, - text: { - type: 'string', - default: undefined, - description: 'The feedback text to display', - }, - ...pick(buildCommonProps(), ['ariaLive', 'id', 'role', 'state', 'tag', 'tooltip']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content to place in the form invalid feedback', - }, - ], - }, - { - component: 'BFormRow', - styleSpec: {kind: StyleKind.OverrideClass, value: 'row'}, - sourcePath: '/BForm/BFormRow.vue', - props: { - '': { - ...pick(buildCommonProps(), ['tag']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content to place in the form row', - }, - ], - }, - { - component: 'BFormText', - sourcePath: '/BForm/BFormText.vue', - props: { - '': { - inline: { - type: 'boolean', - default: false, - description: - 'When set, renders the help text as an inline element, rather than a block element', - }, - text: { - type: 'string', - default: undefined, - description: 'The text to display', - }, - ...pick(buildCommonProps(), ['id', 'tag', 'textVariant']), - } satisfies Record, - }, - emits: [], - slots: [ - { - description: '', - name: 'Content to place in the form text', - }, - ], - }, - { - component: 'BFormValidFeedback', - styleSpec: {kind: StyleKind.OverrideClass, value: 'valid-feedback, valid-tooltip'}, - sourcePath: '/BForm/BFormValidFeedback.vue', - props: { - '': { - forceShow: { - type: 'boolean', - default: false, - description: "Shows the feedback text, regardless of the value of the 'state' prop", - }, - text: { - type: 'string', - default: undefined, - description: 'The feedback text to display', - }, - ...pick(buildCommonProps(), ['ariaLive', 'id', 'role', 'state', 'tag', 'tooltip']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content to place in the form invalid feedback', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts deleted file mode 100644 index f8240615b..000000000 --- a/apps/docs/src/data/components/formCheckbox.data.ts +++ /dev/null @@ -1,233 +0,0 @@ -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' -import type {BvnComponentProps} from 'bootstrap-vue-next' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormCheckbox', - sourcePath: '/BFormCheckbox/BFormCheckbox.vue', - props: { - '': { - button: { - type: 'boolean', - default: false, - description: 'When set, renders the checkbox with the appearance of a button', - }, - buttonGroup: { - type: 'boolean', - default: false, - description: - "When set, renders the checkbox as part of a button group (it doesn't enclose the checkbox and label with a div). It is not necessary to set this to true if this is part of a CheckboxGroup as it is handled internally", - }, - buttonVariant: { - type: 'ButtonVariant | null', - default: 'secondary', - description: "Applies one of Bootstrap's theme colors when in `button` mode", - }, - indeterminate: { - type: 'boolean', - default: false, - description: - 'Set to true to show the checkbox as indeterminate, false to show its normal checked/unchecked.', - }, - inline: { - type: 'boolean', - default: false, - description: - 'When set, renders the checkbox as an inline element rather than as a 100% width block', - }, - inputClass: { - type: 'ClassValue', - default: undefined, - description: 'Class to be applied to the body of the checkbox item', - }, - modelValue: { - type: 'CheckboxValue | readonly CheckboxValue[]', - default: undefined, - description: - 'The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model. Looking for `value` - use `modelValue` instead.', - }, - reverse: { - type: 'boolean', - default: false, - description: 'When set, renders the checkbox or switch on the opposite side', - }, - switch: { - type: 'boolean', - default: false, - description: 'When set, renders the checkbox with the appearance of a switch', - }, - uncheckedValue: { - type: 'CheckboxValue', - default: false, - description: - 'Value returned when this checkbox is unchecked. Note not applicable when multiple checkboxes bound to the same v-model array', - }, - value: { - type: 'CheckboxValue', - default: true, - description: 'Value returned when this checkbox is checked', - }, - ...pick(buildCommonProps(), [ - 'ariaLabel', - 'ariaLabelledby', - 'autofocus', - 'disabled', - 'form', - 'id', - 'name', - 'plain', - 'required', - 'size', - 'state', - 'wrapperAttrs', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: 'Emitted when the checked value is changed', - args: [ - { - arg: 'value', - description: - 'Value of the checkbox. Value will be an array for grouped checkboxes or a single value for standalone checkboxes. Looking for the `input` or `change` event - use `update:model-value` instead.', - type: 'CheckboxValue | readonly CheckboxValue[]', - }, - ], - }, - { - event: 'update:indeterminate', - description: 'Emitted when the indeterminaate state of the checkbox is changed', - args: [ - { - arg: 'value', - description: - 'Value of the indeterminate state - true for indeterminate, false for determinstic state.', - type: 'boolean', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the label of the form checkbox', - }, - ], - }, - { - component: 'BFormCheckboxGroup', - sourcePath: '/BFormCheckbox/BFormCheckboxGroup.vue', - props: { - '': { - buttonVariant: { - type: 'ButtonVariant | null', - default: 'secondary', - description: - 'Specifies the Bootstrap contextual color theme variant to apply to the button style checkboxes', - }, - buttons: { - type: 'boolean', - default: false, - description: 'When set, renderes the checkboxes in this group with button styling', - }, - modelValue: { - type: 'readonly CheckboxValue[]', - default: '() => []', - description: - 'The current value of the checked checkboxes in the group. Must be an array when there are multiple checkboxes. . Looking for `value` - use `modelValue` instead.', - }, - options: { - type: 'readonly CheckboxOptionRaw[]', - default: '() => []', - }, - reverse: { - type: 'boolean', - default: false, - description: 'When set, renders the checkboxes and switches on the opposite side', - }, - stacked: { - type: 'boolean', - default: false, - description: 'When set, renders the checkbox group in stacked mode', - }, - switches: { - type: 'boolean', - default: false, - description: 'When set, renders the checkboxes in the group with switch styling', - }, - validated: { - type: 'boolean', - default: false, - description: 'When set, adds the Bootstrap class `was-validated` to the group wrapper', - }, - ...pick(buildCommonProps(), [ - 'ariaInvalid', - 'autofocus', - 'disabled', - 'disabledField', - 'form', - 'id', - 'name', - 'plain', - 'required', - 'size', - 'state', - 'textField', - 'valueField', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: - 'Emitted when the selected value(s) are changed. Looking for the `input` or `change` event - use `update:model-value` instead.', - args: [ - { - arg: 'value', - type: 'CheckboxValue[]', - description: 'Value of the checkboxes. Value will be an array.', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content (form checkboxes) to place in the form checkbox group', - }, - { - name: 'first', - description: - 'Slot to place for checkboxes so that they appear before checks generated from options prop', - }, - { - name: 'option', - description: - 'Use this slot to have finer control over the content render inside each checkbox button.', - scope: [ - { - prop: 'value', - type: 'string | number | undefined', - description: 'The value of the checkbox button', - }, - { - prop: 'disabled', - type: 'boolean | undefined', - description: 'Whether the checkbox button is disabled', - }, - { - prop: 'text', - type: 'string | undefined', - description: 'The text to display for the checkbox button', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formFile.data.ts b/apps/docs/src/data/components/formFile.data.ts deleted file mode 100644 index 72822fc78..000000000 --- a/apps/docs/src/data/components/formFile.data.ts +++ /dev/null @@ -1,121 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormFile', - sourcePath: '/BForm/BFormFile.vue', - props: { - '': { - accept: { - type: 'string | string[]', - default: '', - description: "Value to set on the file input's `accept` attribute", - }, - capture: { - type: "'boolean' | 'user' | 'environment'", - default: false, - description: - 'When set, will instruction the browser to use the devices camera (if supported)', - }, - directory: { - type: 'boolean', - default: false, - description: 'Enable `directory` mode (on browsers that support it)', - }, - label: { - type: 'string', - default: '', - description: 'Sets the label for the form group which the file input is rendered', - }, - labelClass: { - type: 'ClassValue', - default: undefined, - description: 'Sets the styling for the label', - }, - modelValue: { - type: 'File[] | File | null', - default: undefined, - description: - 'The current value of the file input. Will be a single `File` object or an array of `File` objects (if `multiple` or `directory` is set). Can be set to `null`, or an empty array to reset the file input', - }, - multiple: { - type: 'boolean', - default: false, - description: - 'When set, will allow multiple files to be selected. `v-model` will be an array', - }, - noButton: { - type: 'boolean | null', - default: undefined, - description: 'hide the file input button', - }, - noDrop: { - type: 'boolean', - default: false, - description: 'Disable drag and drop mode', - }, - noTraverse: { - type: 'boolean', - default: false, - description: 'Wether to returns files as a flat array when in `directory` mode', - }, - ...pick( - buildCommonProps({ - plain: { - description: "Don't add any additional styling or classes to the file input", - }, - }), - [ - 'ariaLabel', - 'ariaLabelledby', - 'autofocus', - 'disabled', - 'form', - 'id', - 'name', - 'plain', - 'required', - 'size', - 'state', - ] - ), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: 'Updates the `v-model` value (see docs for more details)', - args: [ - { - arg: 'value', - type: 'File | File[] | null', - description: - 'Will be a single File object in single mode or an array of File objects in multiple mode', - }, - ], - }, - { - event: 'change', - description: 'Original change event of the input', - args: [ - { - arg: 'value', - type: 'Event', - description: 'The browsers default change event', - }, - ], - }, - ], - slots: [ - { - name: 'label', - description: '', - scope: [], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formGroup.data.ts b/apps/docs/src/data/components/formGroup.data.ts deleted file mode 100644 index 98133dc88..000000000 --- a/apps/docs/src/data/components/formGroup.data.ts +++ /dev/null @@ -1,216 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormGroup', - sourcePath: '/BFormGroup/BFormGroup.vue', - props: { - '': { - contentCols: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the content width 'xs' screens and up", - }, - contentColsLg: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the content width 'lg' screens and up", - }, - contentColsMd: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the content width 'md' screens and up", - }, - contentColsSm: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the content width 'sm' screens and up", - }, - contentColsXl: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the content width 'xl' screens and up", - }, - description: { - type: 'string', - default: 'undefined', - description: 'Text to place in the help text area of the form group', - }, - feedbackAriaLive: { - type: 'string', - default: "'assertive'", - description: 'Value to use for the `aria-live` attribute on the feedback text', - }, - floating: { - type: 'boolean', - default: 'undefined', - description: 'When set renders the lablel in the floating style', - }, - invalidFeedback: { - type: 'string', - default: 'undefined', - description: 'Text to show when the form group has an invalid state', - }, - label: { - type: 'string', - default: 'undefined', - description: 'Text to place in the label/legend of the form group', - }, - labelAlign: { - type: 'string', - default: 'undefined', - description: - "Text alignment 'left', 'center', 'right' for the label 'xs' screens and up", - }, - labelAlignLg: { - type: 'string', - default: 'undefined', - description: - "Text alignment 'left', 'center', 'right' for the label 'lg' screens and up", - }, - labelAlignMd: { - type: 'string', - default: 'undefined', - description: - "Text alignment 'left', 'center', 'right' for the label 'md' screens and up", - }, - labelAlignSm: { - type: 'string', - default: 'undefined', - description: - "Text alignment 'left', 'center', 'right' for the label 'sm' screens and up", - }, - labelAlignXl: { - type: 'string', - default: 'undefined', - description: - "Text alignment 'left', 'center', 'right' for the label 'xl' screens and up", - }, - labelClass: { - type: 'string[] | Record | string', - default: 'undefined', - description: 'CSS class (or classes) to add to the label/legend element', - }, - labelCols: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the label width 'xs' screens and up", - }, - labelColsLg: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the label width 'lg' screens and up", - }, - labelColsMd: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the label width 'md' screens and up", - }, - labelColsSm: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the label width 'sm' screens and up", - }, - labelColsXl: { - type: 'boolean | number | string', - default: 'undefined', - description: "Number of columns for the label width 'xl' screens and up", - }, - labelFor: { - type: 'string', - default: 'undefined', - description: - 'Set to the ID of the singular form control in the form group. Do not set a value if there is more than one form control in the group', - }, - labelSize: { - type: 'string', - default: 'undefined', - description: - "Sets the text size of the label: 'sm', 'md' (default) or 'lg'. Use this prop to have the label size match the form control size", - }, - labelVisuallyHidden: { - type: 'boolean', - default: 'false', - description: - 'Visually hides the label content, but makes it available to screen reader users', - }, - validFeedback: { - type: 'string', - default: 'undefined', - description: 'Text to show when the form group has a valid state', - }, - validated: { - type: 'boolean', - default: 'undefined', - description: - "When set, adds the Bootstrap validation trigger class 'was-validated' on the component", - }, - ...pick( - buildCommonProps( - buildCommonProps({ - disabled: { - description: - 'Disables the fieldset element, which in turn disables the form controls (on browsers that support disabled fieldsets). Has no effect if `label-for` is set', - }, - }) - ), - ['ariaInvalid', 'disabled', 'id', 'state', 'tooltip'] - ), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content (form checkboxes) to place in the form checkbox group', - scope: [ - { - prop: 'ariaDescribedby', - type: 'string', - description: - 'The value for the `aria-describedby` attribute for input elements in the form group. Will be auto-assigned when `label-for` prop is given', - }, - { - prop: 'id', - type: 'string', - description: 'The ID of the form group. Will equal `id` prop, when provided', - }, - { - prop: 'descriptionId ', - type: 'string', - description: - 'The ID of the description element. Will be `null` when no description content given', - }, - { - prop: 'labelId', - type: 'string', - description: - 'The ID of the label element. Will be `null` when no description content given', - }, - ], - }, - { - name: 'description', - description: 'Content to place in the description area. Overrides the `description` prop', - }, - { - name: 'invalid-feedback', - description: - 'Content to place in the invalid feedback area. Overrides the `invalid-feedback` prop', - }, - { - name: 'label', - description: 'Content to place inside the label element. Overrides the `label` prop', - }, - { - name: 'valid-feedback', - description: - 'Content to place in the valid feedback area. Overrides the `valid-feedback` prop', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formInput.data.ts b/apps/docs/src/data/components/formInput.data.ts deleted file mode 100644 index 9c48be4d6..000000000 --- a/apps/docs/src/data/components/formInput.data.ts +++ /dev/null @@ -1,81 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormInput', - sourcePath: '/BFormInput/BFormInput.vue', - props: { - '': { - max: { - type: 'Numberish', - default: 'undefined', - description: - "Value to set in the 'max' attribute on the input. Used by number-like inputs", - }, - min: { - type: 'Numberish', - default: 'undefined', - description: - "Value to set in the 'min' attribute on the input. Used by number-like inputs", - }, - modelValue: { - type: 'Numberish | null', - default: "''", - description: 'The current value of the input', - }, - step: { - type: 'Numberish', - default: 'undefined', - description: - "Value to set in the 'step' attribute on the input. Used by number-like inputs", - }, - type: { - type: 'InputType', - default: 'text', - description: 'The type of input to render. See the docs for supported types', - }, - ...pick(buildCommonProps(buildCommonProps()), [ - 'ariaInvalid', - 'autocomplete', - 'autofocus', - 'debounce', - 'debounceMaxWait', - 'disabled', - 'form', - 'formatter', - 'id', - 'lazyFormatter', - 'list', - 'name', - 'placeholder', - 'plaintext', - 'readonly', - 'required', - 'size', - 'state', - 'tooltip', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: - 'Emitted when the selected value(s) are changed. Looking for the `input` or `change` event - use `update:model-value` instead.', - args: [ - { - arg: 'value', - type: 'string', - description: - 'Value of input, after any formatting. Not emitted if the value does not change', - }, - ], - }, - ], - slots: [], - }, - ], -} diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts deleted file mode 100644 index ab8c7d7f7..000000000 --- a/apps/docs/src/data/components/formRadio.data.ts +++ /dev/null @@ -1,192 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormRadio', - styleSpec: {kind: StyleKind.Tag, value: 'input[type="radio"]'}, - sourcePath: '/BFormRadio/BFormRadio.vue', - props: { - '': { - button: { - type: 'boolean', - default: false, - description: 'When set, renders the radio button with the appearance of a button', - }, - buttonGroup: { - type: 'boolean', - default: false, - description: - "When set, renders the radio button as part of a button group (it doesn't enclose the radio and label with a div). It is not necessary to set this to true if this is part of a RadioGroup as it is handled internally", - }, - buttonVariant: { - type: 'ButtonVariant | null', - default: null, - description: "Applies one of Bootstrap's theme colors when in `button` mode", - }, - inline: { - type: 'boolean', - default: false, - description: - 'When set, renders the radio button as an inline element rather than as a 100% width block', - }, - modelValue: { - type: 'RadioValue | undefined', - default: undefined, - description: - 'The current value of the radio. Looking for `checked` - use `modelValue` instead.', - }, - reverse: { - type: 'boolean', - default: false, - description: 'When set, renders the radio button on the opposite side', - }, - value: { - type: 'RadioValue | undefined', - default: true, - description: 'Value returned when this radio button is selected', - }, - - ...pick(buildCommonProps(), [ - 'ariaLabel', - 'ariaLabelledby', - 'autofocus', - 'disabled', - 'form', - 'id', - 'name', - 'plain', - 'required', - 'size', - 'state', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: 'Emitted when the radio button value is changed', - args: [ - { - arg: 'value', - description: 'Value of the radio button.', - type: 'RadioValue', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the label of the radio button', - }, - ], - }, - { - component: 'BFormRadioGroup', - styleSpec: {kind: StyleKind.Tag, value: 'dev[role="radiogroup"]'}, - sourcePath: '/BFormRadio/BFormRadioGroup.vue', - props: { - '': { - buttonVariant: { - type: 'ButtonVariant | null', - default: 'secondary', - description: - 'Specifies the Bootstrap contextual color theme variant to apply to the button style radio buttons', - }, - buttons: { - type: 'boolean', - default: false, - description: 'When set, renderes the radio buttons in this group with button styling', - }, - modelValue: { - type: 'RadioValue | undefined', - default: undefined, - description: - 'The current value of the checked radio in the group. Looking for `checked` - use `modelValue` instead.', - }, - reverse: { - type: 'boolean', - default: false, - description: 'When set, renders the radio buttons on the opposite side', - }, - stacked: { - type: 'boolean', - default: false, - description: 'When set, renders the radio button group in stacked mode', - }, - validated: { - type: 'boolean', - default: false, - description: 'When set, adds the Bootstrap class `was-validated` to the group wrapper', - }, - ...pick(buildCommonProps(), [ - 'ariaInvalid', - 'autofocus', - 'disabled', - 'disabledField', - 'form', - 'id', - 'name', - 'options', - 'plain', - 'required', - 'size', - 'state', - 'textField', - 'valueField', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - args: [ - { - arg: 'value', - description: 'Currently selected value of the radio group.', - type: 'RadioValue | null', - }, - ], - description: - 'Emitted when the selected value(s) are changed. Looking for the `input` or `change` event - use `update:model-value` instead.', - }, - ], - slots: [ - { - name: 'default', - description: 'Content (form radio buttons) to place in the form radio button group', - }, - { - name: 'first', - description: - 'Slot to place for radio buttons so that they appear before radios generated from options prop', - }, - { - name: 'option', - description: - 'Use this slot to have finer control over the content render inside each radio button', - scope: [ - { - prop: 'value', - type: 'string | number | undefined', - description: 'The value of the radio button', - }, - { - prop: 'disabled', - type: 'boolean | undefined', - description: 'Whether the radio button is disabled', - }, - { - prop: 'text', - type: 'string | undefined', - description: 'The text to display for the radio button', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formSelect.data.ts b/apps/docs/src/data/components/formSelect.data.ts deleted file mode 100644 index 19d461398..000000000 --- a/apps/docs/src/data/components/formSelect.data.ts +++ /dev/null @@ -1,169 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -const optionSlot = { - name: 'option', - description: - 'Use this slot to have finer control over the content render inside each select item', - scope: [ - { - prop: 'value', - type: 'any (T)', - description: 'The value of the option', - }, - { - prop: 'text', - type: 'string', - description: 'The text of the option', - }, - { - prop: 'disabled', - type: 'boolean', - description: 'Is the option disabled', - }, - ], -} - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormSelect', - styleSpec: {kind: StyleKind.Tag, value: 'select'}, - sourcePath: '/BFormSelect/BFormSelect.vue', - props: { - '': { - labelField: { - type: 'string', - default: 'label', - description: 'The key to use from the option object to get the label', - }, - modelValue: { - type: `SelectValue`, - default: '', - description: 'The value of the select control', - }, - multiple: { - type: 'boolean', - default: false, - description: 'When set, allows multiple options to be selected (multi-select)', - }, - optionsField: { - type: 'string', - default: 'options', - description: 'The key to use from the option object to get the options', - }, - selectSize: { - type: 'Numberish', - default: 0, - description: - 'When set to a number larger than 0, will set the number of display option rows. Note not all browser will respect this setting', - }, - ...pick( - buildCommonProps({ - options: {type: 'unknown[] | Record'}, - }), - [ - 'ariaInvalid', - 'autofocus', - 'disabled', - 'disabledField', - 'form', - 'id', - 'name', - 'options', - 'plain', - 'required', - 'size', - 'state', - 'textField', - 'valueField', - ] - ), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - args: [ - { - arg: 'value', - description: 'Currently selected value of the select control.', - type: 'SelectValue', - }, - ], - description: - 'Emitted when the selected value(s) are changed. Looking for the `input` or `change` event - use `update:model-value` instead.', - }, - ], - slots: [ - { - description: 'Content to place in the form select', - name: 'default', - }, - { - description: - "Slot to place options or option groups above options provided via the 'options' prop", - name: 'first', - }, - optionSlot, - ], - }, - { - component: 'BFormSelectOption', - styleSpec: {kind: StyleKind.Tag, value: 'option'}, - sourcePath: '/BFormSelect/BFormSelectOption.vue', - props: { - '': { - value: { - type: 'any', - default: undefined, - description: 'The value of the option', - }, - disabled: { - type: 'boolean', - default: false, - description: 'The disabled state of the option', - }, - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the form select option', - }, - ], - }, - { - component: 'BFormSelectOptionGroup', - styleSpec: {kind: StyleKind.Tag, value: 'optgroup'}, - sourcePath: '/BFormSelect/BFormSelectOptionGroup.vue', - props: { - '': { - label: { - type: 'string', - default: undefined, - description: 'The label for the option group', - }, - ...pick( - buildCommonProps({ - options: {type: 'readonly (unknown | Record)[]'}, - }), - ['disabledField', 'options', 'textField', 'valueField'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'first', - description: 'Content to place in the form select option group', - }, - { - name: 'default', - description: "Slot to place options above options provided via the 'options' prop", - }, - optionSlot, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formSpinbutton.data.ts b/apps/docs/src/data/components/formSpinbutton.data.ts deleted file mode 100644 index 058519a34..000000000 --- a/apps/docs/src/data/components/formSpinbutton.data.ts +++ /dev/null @@ -1,160 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormSpinbutton', - styleSpec: {kind: StyleKind.BsvnClass}, - sourcePath: '/BFormSpinbutton/BFormSpinbutton.vue', - props: { - '': { - formatterFn: { - type: '(value: number) => string', - default: undefined, - }, - inline: { - type: 'boolean', - default: 'false', - description: 'When set, renders the component as an inline element', - }, - labelDecrement: { - type: 'string', - default: 'Decrement', - description: 'Text to be used for the `aria-label` attribute on the decrement button', - }, - labelIncrement: { - type: 'string', - default: 'Increment', - description: 'Text to be used for the `aria-label` attribute on the increment button', - }, - locale: { - type: 'string', - default: 'undefined', - description: - 'Specify the local to use for formatting the number. Defaults to the browser locale. Only applicable when using the internal formatter', - }, - max: { - type: 'Numberish', - default: '100', - description: - 'The maximum value that can be selected. Must be greater than the `min` prop. Negative numbers are allowed', - }, - min: { - type: 'Numberish', - default: '1', - description: 'The minimum value that can be selected. Negative numbers are allowed', - }, - placeholder: { - type: 'string', - default: 'undefined', - description: 'Value to show when the v-model is `null`', - }, - repeatDelay: { - type: 'Numberish', - default: '500', - description: - 'Delay in milliseconds after before auto repeat increment or decrement happens. Must be a positive integer. Requires the user to click/keydown and hold', - }, - repeatInterval: { - type: 'Numberish', - default: '100', - description: - 'Interval in milliseconds between increment or decrement repeats. Must be a positive integer', - }, - repeatStepMultiplier: { - type: 'Numberish', - default: '4', - description: - 'Number of steps to jump by once the `repeat-threshold` has been reached. Must be a positive integer. This value is also used for the page up and down keys', - }, - repeatThreshold: { - type: 'Numberish', - default: '10', - description: - 'Number of repeats to occur before increasing the step size by `repeat-step-multiplier`. Must be a positive integer', - }, - step: { - type: 'Numberish', - default: '1', - description: - 'A positive number that specifies the granularity that the value must adhere to', - }, - vertical: { - type: 'boolean', - default: 'false', - description: 'When set, renders the component with a vertical layout', - }, - wrap: { - type: 'boolean', - default: 'false', - description: 'When set, renders the component with a vertical layout', - }, - ...pick(buildCommonProps(), [ - 'ariaControls', - 'ariaLabel', - 'disabled', - 'form', - 'id', - 'name', - 'readonly', - 'required', - 'size', - 'state', - ]), - modelValue: {}, - } satisfies Record, - }, - emits: [ - { - event: 'change', - args: [ - { - arg: 'value', - type: 'number | null', - description: 'Currently value of the spinbutton control.', - }, - ], - description: 'Emitted when the user releases the mouse button or key', - }, - - { - event: 'update:model-value', - args: [ - { - arg: 'value', - type: 'number | null', - description: 'Currently value of the spinbutton control.', - }, - ], - description: 'Emitted to update the v-model on each value change', - }, - ], - slots: [ - { - name: 'decrement', - description: 'Custom content to place in the decrement button', - scope: [ - { - prop: 'hasFocus', - type: 'boolean', - description: '`true` when the spinbutton has focus', - }, - ], - }, - { - name: 'increment', - description: 'Custom content to place in the increment button', - scope: [ - { - prop: 'hasFocus', - type: 'boolean', - description: '`true` when the spinbutton has focus', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formTags.data.ts b/apps/docs/src/data/components/formTags.data.ts deleted file mode 100644 index d6724ef3f..000000000 --- a/apps/docs/src/data/components/formTags.data.ts +++ /dev/null @@ -1,526 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormTag', - styleSpec: {kind: StyleKind.BsvnClass}, - sourcePath: '/BFormTag/BFormTag.vue', - props: { - '': { - noRemove: { - type: 'boolean', - default: false, - description: 'When set, the tag will not have a remove button', - }, - pill: { - type: 'boolean', - default: false, - description: 'Makes the tag have a pill appearance', - }, - removeLabel: { - type: 'string', - default: 'Remove tag', - description: "The value of the 'aria-label' attribute on the remove button in the tag", - }, - ...pick( - buildCommonProps({ - title: { - description: - "Value to place in the 'title' attribute of the tag. Will also be used for the tag content if no default slot provided", - }, - tag: { - default: '', - }, - variant: { - default: 'secondary', - }, - }), - ['disabled', 'id', 'tag', 'title', 'variant'] - ), - } satisfies Record, - }, - emits: [ - { - event: 'remove', - args: [ - { - arg: 'remove', - type: 'string', - description: 'text of the tag to remove', - }, - ], - description: 'Emitted when the remove button is clicked', - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the tag. Overrides the `title` prop', - }, - ], - }, - { - component: 'BFormTags', - styleSpec: {kind: StyleKind.BsvnClass}, - sourcePath: '/BFormTags/BFormTags.vue', - props: { - '': { - addButtonText: { - type: 'string', - default: 'Add', - description: - "Text for the built in 'Add' button. Slot `add-button-text` takes precedence", - }, - addButtonVariant: { - type: 'ButtonVariant | null', - default: 'outline-secondary', - description: "Applies one of the Bootstrap theme color variants to the 'Add' button", - }, - addOnChange: { - type: 'boolean', - default: false, - description: "When set, enables adding the tag on the input's 'change' event", - }, - duplicateTagText: { - type: 'string', - default: 'Duplicate tag(s)', - description: - 'The message when duplicate tags are detected. Set to an empty string to disable the message', - }, - feedbackAriaLive: { - type: 'string', - default: "'assertive'", - description: 'Value to use for the `aria-live` attribute on the feedback text', - }, - inputAttrs: { - type: 'Readonly', - default: undefined, - description: 'Additional attributes to apply to the new tag input element', - }, - inputClass: { - type: 'ClassValue', - default: undefined, - description: 'Class (or classes) to apply to the new tag input element', - }, - inputId: { - type: 'string', - default: undefined, - description: - 'Id to apply to the new tag input element. If not provided, a unique Id will be auto generated', - }, - inputType: { - type: 'InputType', - default: 'text', - description: - "Specifies the type of input to use: 'text', 'email', 'tel', 'url', or 'number'. Default is 'text'", - }, - invalidTagText: { - type: 'string', - default: 'Invalid tag(s)', - description: - 'The error message when invalid tags are detected. Set to an empty string to disable the message', - }, - limit: { - type: 'Numberish', - default: undefined, - description: - 'The maximum amount of tags that can be added. The limit can still be exceeded if manipulated outside of the component', - }, - limitTagsText: { - type: 'string', - default: 'Tag limit reached', - description: - 'The message when the limit is reached. Set to an empty string to disable the message', - }, - modelValue: { - type: 'string[]', - default: '() => []', - }, - noAddOnEnter: { - type: 'boolean', - default: false, - description: "When set, disables adding the tag on the input's 'keydown.enter' event", - }, - noOuterFocus: { - type: 'boolean', - default: false, - description: 'When set, disables the focus styling of the component root element', - }, - noTagRemove: { - type: 'boolean', - default: false, - description: 'When set, the tags will not have a remove button', - }, - removeOnDelete: { - type: 'boolean', - default: false, - description: - 'When set, enables removal of last tag in tags when user presses delete or backspace and the input is empty', - }, - separator: { - type: 'string | readonly string[]', - default: undefined, - description: 'Separator character(s) that will trigger a tag to be created', - }, - tagClass: { - type: 'ClassValue', - default: undefined, - description: 'Class (or classes) to apply to the tags', - }, - tagPills: { - type: 'boolean', - default: false, - description: 'Makes the built in tags have a pill appearance', - }, - tagRemoveLabel: { - type: 'string', - default: undefined, - description: "The value of the 'aria-label' attribute on the remove button in the tag", - }, - tagRemovedLabel: { - type: 'string', - default: 'Tag removed', - }, - tagValidator: { - type: '(t: string) => boolean', - default: '() => true', - description: - "Optional tag validator method. Passed a single argument of tag being added. Should return 'true' if the tag passes validation, or 'false' if the tag cannot be added", - }, - tagVariant: { - type: 'ColorVariant | null', - default: 'secondary', - description: 'Applies one of the Bootstrap theme color variants to the tags', - }, - ...pick( - buildCommonProps({ - name: { - description: - "Sets the value of the 'name' attribute on the form control. When set, creates a hidden input for each tag", - }, - placeholder: { - default: 'Add tag...', - }, - }), - ['autofocus', 'disabled', 'form', 'name', 'placeholder', 'required', 'size', 'state'] - ), - } satisfies Record, - }, - emits: [ - { - event: 'blur', - description: 'Emitted when component loses focus', - args: [ - { - arg: 'event', - type: 'FocusEvent', - description: 'Native blur event (before any formatting)', - }, - ], - }, - { - event: 'focus', - description: 'Emitted when component gains focus', - args: [ - { - arg: 'event', - type: 'FocusEvent', - description: 'Native focus event (before any formatting)', - }, - ], - }, - { - event: 'focusin', - description: 'Emitted when internal elements of component gain focus.', - args: [ - { - arg: 'event', - type: 'FocusEvent', - description: 'Native focusin event (before any formatting)', - }, - ], - }, - { - event: 'focusout', - description: 'Emitted when internal elements of component lose focus.', - args: [ - { - arg: 'event', - type: 'FocusEvent', - description: 'Native focusout event (before any formatting)', - }, - ], - }, - { - event: 'tag-state', - description: 'Emitted when tags in the user input are parsed', - args: [ - { - arg: 'validTags', - type: 'Array', - description: - 'Array of new tag(s) added (or that will be added). Will be zero length if no tags added', - }, - { - arg: 'invalidTags', - type: 'Array', - description: - 'Array of tag(s) that cannot be added because they did not pass validation. Will be zero length if no invalid tags', - }, - { - arg: 'duplicateTags', - type: 'Array', - description: - 'Array of tag(s) that cannot be added because they would be a duplicate tag. Will be zero length if no duplicate tags', - }, - ], - }, - { - event: 'update:model-value', - description: 'Emitted when the tags changes. Updates the v-model', - args: [ - { - arg: 'value', - type: 'Array', - description: 'Array of current tags', - }, - ], - }, - ], - slots: [ - { - name: 'addButtonText', - description: - "Content to place in the built in 'Add' button. Takes precedence over the 'add-button-text' prop. Not used when the default scoped slot is provided", - }, - { - name: 'default', - description: 'Slot to override the default rendering of the tags component', - scope: [ - { - prop: 'addButtonText', - type: 'string', - description: "Value of the 'add-button-text' prop", - }, - { - prop: 'addButtonVariant', - type: 'string', - description: "Value of the 'add-button-variant' prop", - }, - { - prop: 'addTag', - type: '(tag?: string) => void', - description: - 'Method to add a new tag. Assumes the tag is the value of the input, but optionally accepts one argument which is the tag value to be added', - }, - { - prop: 'disableAddButton', - type: 'boolean', - description: - 'Will be `true` if the tag(s) in the input cannot be added (all invalid and/or duplicates)', - }, - { - prop: 'disabled', - type: 'boolean', - description: - "If the component is in the disabled state. Value of the 'disabled' prop", - }, - { - prop: 'duplicateTagText', - type: 'string', - description: "The value of the 'duplicate-tag-text' prop", - }, - { - prop: 'duplicateTags', - type: 'Array', - description: 'Array of duplicate tag(s) that could not be added', - }, - { - prop: 'form', - type: 'string', - description: "Value of the 'form' prop", - }, - { - prop: 'inputAttrs', - type: 'Record', - description: - 'Object of attributes to apply to native input elements via \'v-bind="inputAttrs"\'', - }, - { - prop: 'inputClass', - type: 'ClassValue', - description: - "Class (or classes) to apply to the new tag input element. Value of the 'input-class' prop", - }, - { - prop: 'inputHandlers', - type: 'Object', - description: - 'Object of event handlers to apply to native input elements via \'v-on="inputHandlers"\'', - }, - { - prop: 'inputId', - type: 'string', - description: - "Id to add to the new tag input element. Defaults to prop 'input-id'. If not provided a unique Id is auto-generated. Also available via 'inputAttrs.id'", - }, - { - prop: 'inputType', - type: 'InputType', - description: - "The type of input to use: 'type', 'email', 'tel', 'url', or 'number'. Default is 'text'. Normalized value of the 'input-type' prop", - }, - { - prop: 'invalidTagText', - type: 'string', - description: "The value of the 'invalid-tag-text' prop", - }, - { - prop: 'invalidTags', - type: 'Array', - description: - "Array of invalid tag(s) that could not be added. Requires a validator function via the 'tag-validator' prop", - }, - { - prop: 'isDuplicate', - type: 'boolean', - description: 'Will be `true` if the user has attempted to add duplicate tag(s)', - }, - { - prop: 'isInvalid', - type: 'boolean', - description: - "Will be `true` if the input has invalid tag(s). Requires a validator function via the 'tag-validator' prop", - }, - { - prop: 'isLimitReached', - type: 'boolean', - description: - "Will be `true` if the input has reached the maximum amount of tags defined by the 'limit' prop", - }, - { - prop: 'limitTagsText', - type: 'string', - description: "The value of the 'limit-tag-text' prop", - }, - { - prop: 'noTagRemove', - type: 'boolean', - description: "The value of the 'no-tag-remove' prop", - }, - { - prop: 'placeholder', - type: 'string', - description: "The value of the 'placeholder' prop", - }, - { - prop: 'remove', - type: '() => void', - description: 'Method to fully reset the tags input', - notYetImplemented: true, - }, - { - prop: 'removeTag', - type: '(tag?: string) => void', - description: - 'Method to remove a tag. Accepts one argument which is the tag value to remove', - }, - { - prop: 'required', - type: 'boolean', - description: "Value of the 'required' prop", - }, - { - prop: 'separator', - type: 'string | readonly string[]', - description: "The value of the 'separator' prop", - }, - { - prop: 'size', - type: 'Size', - description: "The value of the 'size' prop", - }, - { - prop: 'state', - type: 'ValidationState', - description: - "The contextual state of the component. Value of the 'state' prop. Possible values are true, false or null", - }, - { - prop: 'tagClass', - type: 'ClassValue', - description: - "Class (or classes) to apply to the tag elements. Value of the 'tag-class' prop", - }, - { - prop: 'tagPills', - type: 'boolean', - description: 'Value of the `tag-pills` prop', - }, - { - prop: 'tagRemoveLabel', - type: 'string', - description: - "ARIA label for the remove button on tags. Value of the 'tag-remove-label' prop", - }, - { - prop: 'tagRemovedLabel', - type: 'string', - description: "Value of the 'tag-removed-label' prop", - }, - { - prop: 'tagVariant', - type: 'ColorVariant', - description: "Value of the 'tag-variant' prop", - }, - { - prop: 'tagValidator', - type: '(t: string) => boolean', - description: "Value of the 'tag-variant' prop", - }, - { - prop: 'tagVariant', - type: 'ColorVariant | null', - description: "Value of the 'tag-variant' prop", - }, - ], - }, - { - name: 'tag', - description: 'Slot to override the default rendering an individual tag', - scope: [ - { - prop: 'tag', - type: 'string', - description: 'Value of the tag', - }, - { - prop: 'tagClass', - type: 'ClassValue', - description: 'Class (or classes) to apply to the tag element', - }, - { - prop: 'tagVariant', - type: 'ColorVariant | null', - description: 'Color variant to apply to the tag', - }, - { - prop: 'tagPills', - type: 'boolean', - description: 'Render the tag as a pill', - }, - { - prop: 'removeTag', - type: '(tag?: string) => void', - description: - 'Method to remove a tag. Accepts one argument which is the tag value to remove', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/formTextarea.data.ts b/apps/docs/src/data/components/formTextarea.data.ts deleted file mode 100644 index c09b575ec..000000000 --- a/apps/docs/src/data/components/formTextarea.data.ts +++ /dev/null @@ -1,86 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BFormTextarea', - styleSpec: {kind: StyleKind.Tag, value: 'textarea'}, - sourcePath: '/BFormTextarea/BFormTextarea.vue', - props: { - '': { - modelValue: { - type: 'Numberish | null', - default: '""', - description: 'The current value of the textarea', - }, - noResize: { - type: 'boolean', - default: false, - description: - "When set, disabled the browser's resize handle which prevents the user from changing the height of the textarea. Automatically set when in auto height mode", - }, - rows: { - type: 'Numberish', - default: 2, - description: 'The minimum number of rows to display. Must be a value greater than 1', - }, - wrap: { - type: 'string', - default: 'soft', - description: - "The value to place on the textarea's 'wrap' attribute. Controls how line break are returned", - }, - maxRows: { - type: 'Numberish', - default: 'undefined', - description: 'The maximum number of rows to display. Must be a value greater than 1', - }, - noAutoShrink: { - type: 'boolean', - default: false, - description: - 'When set, disables the auto-shrink feature when the textarea is in auto-height mode', - }, - ...pick(buildCommonProps(), [ - 'ariaInvalid', - 'autocomplete', - 'autofocus', - 'debounce', - 'debounceMaxWait', - 'disabled', - 'form', - 'formatter', - 'id', - 'lazyFormatter', - 'list', - 'name', - 'placeholder', - 'plaintext', - 'readonly', - 'required', - 'size', - 'state', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: - 'Emitted when the selected value(s) are changed. Looking for the `input` or `change` event - use `update:model-value` instead.', - args: [ - { - arg: 'value', - type: 'string', - description: - 'Value of textarea, after any formatting. Not emitted if the value does not change', - }, - ], - }, - ], - slots: [], - }, - ], -} diff --git a/apps/docs/src/data/components/gridSystem.data.ts b/apps/docs/src/data/components/gridSystem.data.ts deleted file mode 100644 index 979330e98..000000000 --- a/apps/docs/src/data/components/gridSystem.data.ts +++ /dev/null @@ -1,250 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BContainer', - styleSpec: {kind: StyleKind.OverrideClass, value: '.container[-*]'}, - sourcePath: '/BContainer/BContainer.vue', - props: { - '': { - fluid: { - type: 'boolean | Breakpoint', - default: false, - description: - 'When set to true, makes the row 100% wide all the time, or set to one of the Bootstrap breakpoint names for 100% width up to the breakpoint', - }, - gutterX: { - type: 'GutterNumbers', - default: undefined, - description: 'Horizontal gutter', - }, - gutterY: { - type: 'GutterNumbers', - default: undefined, - description: 'Vertical gutter', - }, - ...pick(buildCommonProps({}), ['tag']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the container', - }, - ], - }, - { - component: 'BRow', - sourcePath: '/BContainer/BRow.vue', - props: { - '': { - alignContent: { - type: 'AlignmentContent', - default: undefined, - description: - "Align columns items together on the cross axis: 'start', 'center', 'end', 'around', 'between', 'fill' or 'stretch'. Has no effect on single rows of items", - }, - alignH: { - type: 'AlignmentJustifyContent', - default: undefined, - description: - "Horizontal alignment/spacing of all columns: 'start', 'center', 'end', 'around', 'between', or 'evenly'", - }, - alignV: { - type: 'AlignmentVertical', - default: undefined, - description: - "Vertical alignment of all columns in a row: 'start', 'center', 'end', 'baseline', 'fill', or 'stretch'", - }, - cols: { - type: 'ColsNumbers', - default: undefined, - description: "The number row columns to create at the 'xs' breakpoint.", - }, - colsLg: { - type: 'ColsNumbers', - default: undefined, - description: "The number row columns to create at the 'ls' breakpoint.", - }, - colsMd: { - type: 'ColsNumbers', - default: undefined, - description: "The number row columns to create at the 'md' breakpoint.", - }, - colsSm: { - type: 'ColsNumbers', - default: undefined, - description: "The number row columns to create at the 'sm' breakpoint.", - }, - colsXl: { - type: 'ColsNumbers', - default: undefined, - description: "The number row columns to create at the 'xl' breakpoint.", - }, - colsXxl: { - type: 'ColsNumbers', - default: undefined, - description: "The number row columns to create at the 'xxl' breakpoint.", - }, - gutterX: { - type: 'GutterNumbers', - default: undefined, - description: 'Horizontal gutter', - }, - gutterY: { - type: 'GutterNumbers', - default: undefined, - description: 'Vertical gutter', - }, - noGutters: { - type: 'boolean', - default: false, - description: - 'When set, removes the margin from the row and removes the padding from the child columns', - }, - ...pick(buildCommonProps({}), ['tag']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the row', - }, - ], - }, - { - component: 'BCol', - styleSpec: {kind: StyleKind.OverrideClass, value: '.col[-*]'}, - sourcePath: '/BContainer/BCol.vue', - props: { - '': { - alignSelf: { - type: "AlignmentVertical | 'auto'", - default: undefined, - description: - "Vertical alignment of the grid cell with respect to the row: 'start', 'center', 'fill', 'end', 'baseline', or 'stretch'", - }, - col: { - type: 'boolean', - default: false, - description: - 'When true makes an equal width column grid cell spans for xs and up breakpoints', - }, - cols: { - type: "ColsNumbers | 'auto'", - default: undefined, - description: 'Number of columns the grid cell spans for xs and up breakpoints', - }, - lg: { - type: "boolean | ColsNumbers | 'auto'", - default: false, - description: 'Number of columns the grid cell spans for lg and up breakpoints', - }, - md: { - type: "boolean | ColsNumbers | 'auto'", - default: false, - description: 'Number of columns the grid cell spans for md and up breakpoints', - }, - sm: { - type: "boolean | ColsNumbers | 'auto'", - default: false, - description: 'Number of columns the grid cell spans for sm and up breakpoints', - }, - xl: { - type: "boolean | ColsNumbers | 'auto'", - default: false, - description: 'Number of columns the grid cell spans for xl and up breakpoints', - }, - xxl: { - type: "boolean | ColsNumbers | 'auto'", - default: false, - description: 'Number of columns the grid cell spans for xxl and up breakpoints', - }, - offset: { - type: 'ColsOffsetNumbers', - default: undefined, - description: - 'Number of columns the grid cell is offset for xs and up breakpoints (0-12)', - }, - offsetLg: { - type: 'ColsOffsetNumbers', - default: undefined, - description: - 'Number of columns the grid cell is offset for lg and up breakpoints (0-12)', - }, - offsetMd: { - type: 'ColsOffsetNumbers', - default: undefined, - description: - 'Number of columns the grid cell is offset for md and up breakpoints (0-12)', - }, - offsetSm: { - type: 'ColsOffsetNumbers', - default: undefined, - description: - 'Number of columns the grid cell is offset for sm and up breakpoints (0-12)', - }, - offsetXl: { - type: 'ColsOffsetNumbers', - default: undefined, - description: - 'Number of columns the grid cell is offset for xl and up breakpoints (0-12)', - }, - offsetXxl: { - type: 'ColsOffsetNumbers', - default: undefined, - description: - 'Number of columns the grid cell is offset for xxl and up breakpoints (0-12)', - }, - order: { - type: 'ColsOrderNumbers', - default: undefined, - description: - "Flex order of the grid cell for xs and up breakpoints (1-5, 'first', or 'last')", - }, - orderLg: { - type: 'ColsOrderNumbers', - default: undefined, - description: - "Flex order of the grid cell for lg and up breakpoints (1-5, 'first', or 'last')", - }, - orderMd: { - type: 'ColsOrderNumbers', - default: undefined, - description: - "Flex order of the grid cell for md and up breakpoints (1-5, 'first', or 'last')", - }, - orderSm: { - type: 'ColsOrderNumbers', - default: undefined, - description: - "Flex order of the grid cell for sm and up breakpoints (1-5, 'first', or 'last')", - }, - orderXl: { - type: 'ColsOrderNumbers', - default: undefined, - description: - "Flex order of the grid cell for xl and up breakpoints (1-5, 'first', or 'last')", - }, - orderXxl: { - type: 'ColsOrderNumbers', - default: undefined, - description: - "Flex order of the grid cell for xxl and up breakpoints (1-5, 'first', or 'last')", - }, - ...pick(buildCommonProps({}), ['tag']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content to place in the col', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/image.data.ts b/apps/docs/src/data/components/image.data.ts deleted file mode 100644 index 3b85ca401..000000000 --- a/apps/docs/src/data/components/image.data.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {type ComponentReference, StyleKind} from '../../types' -import {imageProps} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BImg', - styleSpec: {kind: StyleKind.BsvnClass}, - sourcePath: '/BImg/BImg.vue', - props: { - '': imageProps, - }, - emits: [ - { - event: 'load', - description: 'Fired when the image has finished loading', - args: [ - { - arg: 'load', - type: 'Event', - description: 'The native load event', - }, - ], - }, - ], - slots: [], - }, - ], -} diff --git a/apps/docs/src/data/components/inputGroup.data.ts b/apps/docs/src/data/components/inputGroup.data.ts deleted file mode 100644 index dc2869f4b..000000000 --- a/apps/docs/src/data/components/inputGroup.data.ts +++ /dev/null @@ -1,63 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BInputGroup', - sourcePath: '/BInputGroup/BInputGroup.vue', - props: { - '': { - append: { - type: 'string', - default: undefined, - description: 'Text to append to the input group', - }, - prepend: { - type: 'string', - default: undefined, - description: 'Text to prepend to the input group', - }, - ...pick(buildCommonProps(buildCommonProps()), ['id', 'size', 'tag']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'append', - description: 'Content to append to the input group', - }, - { - name: 'default', - description: 'Content to place in the input group', - }, - { - name: 'prepend', - description: 'Content to prepend to the input group', - }, - ], - }, - { - component: 'BInputGroupText', - sourcePath: '/BInputGroup/BInputGroupText.vue', - props: { - '': { - text: { - type: 'string', - default: undefined, - description: 'Content to place in the input group text', - }, - ...pick(buildCommonProps(buildCommonProps()), ['tag']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content to place in the input group text', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/link.data.ts b/apps/docs/src/data/components/link.data.ts deleted file mode 100644 index 1b3470e81..000000000 --- a/apps/docs/src/data/components/link.data.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {type ComponentReference, StyleKind} from '../../types' -import {linkProps} from '../../utils' -export default { - load: (): ComponentReference[] => [ - { - component: 'BLink', - styleSpec: {kind: StyleKind.Tag, value: 'a, router-link'}, - sourcePath: '/BLink/BLink.vue', - props: { - '': linkProps, - }, - emits: [ - { - event: 'click', - description: 'Emitted when link was clicked', - args: [ - { - arg: 'value', - type: 'MouseEvent', - description: 'Native click event', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the link', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/listGroup.data.ts b/apps/docs/src/data/components/listGroup.data.ts deleted file mode 100644 index e4b3821ea..000000000 --- a/apps/docs/src/data/components/listGroup.data.ts +++ /dev/null @@ -1,65 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, type linkProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BListGroup', - sourcePath: '/BListGroup/BListGroup.vue', - props: { - '': { - flush: { - type: 'boolean', - default: false, - description: 'When set, renders a flush list group with no left and right borders', - }, - horizontal: { - type: 'boolean | Breakpoint', - default: false, - description: - 'When set, renders the list-group horizontally rather than the default of vertical', - }, - numbered: { - type: 'boolean', - default: false, - description: 'When set, renders the list-group items with a number on the left side', - }, - ...pick(buildCommonProps({}), ['tag']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content (items) to place in the list group', - }, - ], - }, - { - component: 'BListGroupItem', - sourcePath: '/BListGroup/BListGroupItem.vue', - props: { - '': { - action: { - type: 'boolean', - default: false, - }, - button: { - type: 'boolean', - default: false, - }, - ...pick(buildCommonProps({}), ['tag']), - } satisfies Record< - Exclude, - PropertyReference - >, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the list group item', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/modal.data.ts b/apps/docs/src/data/components/modal.data.ts deleted file mode 100644 index fd37bf791..000000000 --- a/apps/docs/src/data/components/modal.data.ts +++ /dev/null @@ -1,484 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference, SlotScopeReference} from '../../types' -import {buildCommonProps, pick, showHideProps} from '../../utils' - -const sharedSlots: SlotScopeReference[] = [ - { - prop: 'cancel', - type: 'Function', - description: - "Closes the modal and fires the 'cancel' and 'hide' events, with `bvModalEvent.trigger = 'cancel'`", - }, - { - prop: 'close', - type: 'Function', - description: - "Closes the modal and fires the close and hide events, with `bvModalEvent.trigger = 'headerclose'`", - }, - { - prop: 'hide', - type: 'Function', - description: - "Accepts one argument 'trigger'. Closes the modal and fires the 'hide' event, with the `bvModalEvent.trigger = trigger` (`trigger` is optional)", - }, - { - prop: 'ok', - type: 'Function', - description: - "Closes the modal and fires the 'ok' and 'hide' events, with `bvModalEvent.trigger = 'ok'`", - }, - { - prop: 'visible', - type: 'boolean', - description: - "The visibility state of the modal. 'true' if the modal is visible and 'false' if not visible", - }, -] - -export default { - load: (): ComponentReference[] => [ - { - component: 'BModal', - sourcePath: '/BModal/BModal.vue', - props: { - '': { - focus: { - type: "'ok' | 'cancel' | 'close' | string | ComponentPublicInstance | HTMLElement | null", - default: undefined, - description: - "Specify where to focus once modal opens. Can be built-in button: 'ok', 'cancel', or 'close'. Can be ref, HTMLElement, id or selector string. If set to 'false', no focus will be set (if noTrap isn't set the focus trap will focus the modal element or failback element). If set to a string, the element with that id will be focused. If set to a ComponentPublicInstance, the $el property of the instance will be focused.", - }, - backdropFirst: { - type: 'boolean', - default: false, - description: - 'Animate the backdrop before the modal, and on leave animate the modal before the backdrop', - }, - body: { - type: 'string', - default: undefined, - }, - bodyAttrs: { - type: 'Readonly', - default: undefined, - }, - bodyBgVariant: { - type: 'ColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the body background', - }, - bodyClass: { - type: 'ClassValue', - default: null, - description: "CSS class (or classes) to apply to the '.modal-body' wrapper element", - }, - bodyScrolling: { - type: 'boolean', - default: false, - description: 'Enables/disables scrolling the body while modal is open', - }, - bodyTextVariant: { - type: 'TextColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the body text', - }, - bodyVariant: { - type: 'ColorVariant | null', - default: null, - description: - 'Applies one of the Bootstrap theme color variants to the body (this takes priority over bodyBgVariant and bodyTextVariant)', - }, - busy: { - type: 'boolean', - default: false, - description: - 'Places the built in default footer OK and Cancel buttons in the disabled state', - }, - buttonSize: { - type: 'Size', - default: 'md', - }, - cancelClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the '.modal-cancel' button", - }, - cancelDisabled: { - type: 'boolean', - default: false, - description: 'Places the built in default footer Cancel button in the disabled state', - }, - cancelTitle: { - type: 'string', - default: 'Cancel', - description: 'Text string to place in the default footer Cancel button', - }, - cancelVariant: { - type: 'ButtonVariant | null', - default: 'secondary', - description: 'Variant to use for the default footer Cancel button', - }, - centered: { - type: 'boolean', - default: false, - description: 'Vertically centers the modal in the viewport', - }, - contentClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the '.modal-content' wrapper element", - }, - dialogClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the '.modal-dialog' wrapper element", - }, - footerBgVariant: { - type: 'ColorVariant | null', - default: null, - description: - 'Applies one of the Bootstrap theme color variants to the footer background', - }, - footerBorderVariant: { - type: 'ColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the footer border', - }, - footerClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the '.modal-footer' wrapper element", - }, - footerTextVariant: { - type: 'ColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the footer text', - }, - footerVariant: { - type: 'ColorVariant | null', - default: null, - description: - 'Applies one of the Bootstrap theme color variants to the footer (this takes priority over footerBgVariant and footerTextVariant)', - }, - fullscreen: { - type: 'boolean | Breakpoint', - default: false, - description: - "A boolean value will enable/disable full screen mode. A Breakpoint value will set the breakpoint to enable full screen mode below the value of the breakpoint. Breakpoint values are: 'sm', 'md', 'lg', 'xl', 'xxl'", - }, - headerBgVariant: { - type: 'ColorVariant | null', - default: null, - description: - 'Applies one of the Bootstrap theme color variants to the header background', - }, - headerBorderVariant: { - type: 'ColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the header border', - }, - headerClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the '.modal-header' wrapper element", - }, - headerCloseClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the header close button', - }, - headerCloseLabel: { - type: 'string', - default: 'Close', - description: 'Accessibility label for the header close button', - }, - headerCloseVariant: { - type: 'ButtonVariant | null', - default: 'secondary', - description: - 'Applies a variant to the header close button when the header close button uses the header-close slot', - }, - headerTextVariant: { - type: 'TextColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the header text', - }, - headerVariant: { - type: 'ColorVariant | null', - default: null, - description: - 'Applies one of the Bootstrap theme color variants to the header (this takes priority over headerBgVariant and headerTextVariant)', - }, - noFooter: { - type: 'boolean', - default: false, - description: 'Disables rendering of the modal footer', - }, - modalClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the '.modal' wrapper element", - }, - noCloseOnBackdrop: { - type: 'boolean', - default: false, - description: - 'Disables closing the modal when clicking on the modal backdrop (outside the modal window)', - }, - noCloseOnEsc: { - type: 'boolean', - default: false, - description: 'Disables the ability to close the modal by pressing the ESC key', - }, - noStacking: { - type: 'boolean', - default: false, - }, - noTrap: { - type: 'boolean', - default: false, - description: 'Disables the focus trap feature', - }, - okClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the '.modal-ok' button", - }, - okDisabled: { - type: 'boolean', - default: false, - description: 'Places the built in default footer OK button in the disabled state', - }, - okOnly: { - type: 'boolean', - default: false, - description: 'Disables rendering of the default footer Cancel button', - }, - okTitle: { - type: 'string', - default: 'OK', - description: 'Text string to place in the default footer OK button', - }, - okVariant: { - type: 'ButtonVariant | null', - default: 'primary', - description: 'Button color theme variant to apply to the default footer OK button', - }, - scrollable: { - type: 'boolean', - default: false, - description: 'Enables scrolling of the modal body', - }, - size: { - type: "Size | 'xl'", - default: 'md', - description: "Set the size of the modal's width. 'sm', 'md' (default), 'lg', or 'xl'", - }, - teleportDisabled: { - type: 'boolean', - default: false, - description: 'Renders the modal in the exact place it was defined', - }, - teleportTo: { - type: 'string | RendererElement | null | undefined', - default: 'body', - description: 'Overrides the default teleport location', - }, - title: { - type: 'string', - default: undefined, - description: 'Text content to place in the title', - }, - titleClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the title', - }, - titleVisuallyHidden: { - type: 'boolean', - default: false, - description: "Wraps the title in an '.visually-hidden' wrapper", - }, - titleTag: { - type: 'string', - default: 'h5', - description: 'Specify the HTML tag to render instead of the default tag for the title', - }, - ...showHideProps, - ...pick(buildCommonProps(), ['id', 'noBackdrop', 'noHeader', 'noHeaderClose']), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - args: [ - { - arg: 'value', - description: "The new value of the modal's visible state", - type: 'boolean', - }, - ], - description: 'Emitted when modal visibility changes', - }, - { - event: 'show', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Always emits just before modal is shown. Cancelable', - }, - { - event: 'shown', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Always emits just after modal is shown. Cancelable', - }, - { - event: 'hide', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: - "Always emits just before modal has hidden. Cancelable (as long as modal wasn't forcibly hidden)", - }, - { - event: 'hidden', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Always emits after modal is hidden', - }, - { - event: 'hide-prevented', - args: [], - description: - 'Emitted when the modal tried to close, but was prevented from closing. This occurs when preventDefault() is called on the event, the user clicks escape and no-close-onbackdrop is set to true, or the user clicks on the backdrop and no-close-onbackdrop is set to true.', - }, - { - event: 'show-prevented', - args: [], - description: - 'Emitted when the modal tried to open, but was prevented from opening. This occurs when preventDefault() is called on the event', - }, - { - event: 'ok', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Emitted when the default footer ok button is clicked. Cancelable', - }, - { - event: 'cancel', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Emitted when the default footer cancel button is clicked. Cancelable', - }, - { - event: 'close', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Emitted when the default header close button is clicked. Cancelable', - }, - { - event: 'backdrop', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Emitted when the backdrop is clicked. Cancelable', - }, - { - event: 'esc', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: 'Emitted when the esc keyboard button is clicked. Cancelable', - }, - ], - slots: [ - { - name: 'backdrop', - description: 'Modal Backdrop content', - scope: [], - }, - { - name: 'cancel', - description: 'Modal CANCEL button content. Optionally scoped', - scope: sharedSlots, - }, - { - name: 'default', - description: 'Content of modal body. Optionally scoped', - scope: sharedSlots, - }, - { - name: 'footer', - description: - 'Modal footer content. Also removes default OK and Cancel buttons. Optionally scoped', - scope: sharedSlots, - }, - { - name: 'header', - description: - 'Entire modal header container contents. Also removes the top right X close button. Optionally scoped', - scope: sharedSlots, - }, - { - name: 'header-close', - description: - "Content of Modal header close button. If 'header' slot is used, this slot will not be shown", - scope: [], - }, - { - name: 'ok', - description: 'Modal OK button content. Optionally scoped', - scope: sharedSlots, - }, - { - name: 'title', - description: - "Modal title. If 'header' slot is used, this slot will not be shown. Optionally scoped", - scope: sharedSlots, - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/nav.data.ts b/apps/docs/src/data/components/nav.data.ts deleted file mode 100644 index 1defaa2b8..000000000 --- a/apps/docs/src/data/components/nav.data.ts +++ /dev/null @@ -1,206 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import { - buildCommonProps, - dropdownEmits, - dropdownProps, - dropdownSlots, - omit, - pick, -} from '../../utils' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BNav', - sourcePath: '/BNav/BNav.vue', - props: { - '': { - align: { - type: 'AlignmentJustifyContent', - default: undefined, - description: 'Align the nav items in the nav to any value of AlignmentJustifyContent', - }, - cardHeader: { - type: 'boolean', - default: false, - description: 'Set this prop when the nav is placed inside a card header', - }, - fill: { - type: 'boolean', - default: false, - description: - 'Proportionately fills all horizontal space with nav items. All horizontal space is occupied, but not every nav item has the same width', - }, - justified: { - type: 'boolean', - default: false, - description: - "Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width", - }, - pills: { - type: 'boolean', - default: false, - description: 'Renders the nav items with the appearance of pill buttons', - }, - small: { - type: 'boolean', - default: false, - description: 'Makes the nav smaller', - }, - tabs: { - type: 'boolean', - default: false, - description: 'Renders the nav items with the appearance of tabs', - }, - underline: { - type: 'boolean', - default: false, - description: 'Adds an underline to the active nav item', - }, - vertical: { - type: 'boolean', - default: false, - description: 'Stacks the nav items vertically', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'ul', - }, - }), - ['tag'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the nav', - }, - ], - }, - { - component: 'BNavForm', - styleSpec: {kind: StyleKind.Tag, value: 'li > form'}, - sourcePath: '/BNav/BNavForm.vue', - props: { - '': { - formClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to add to the form element', - }, - ...pick(buildCommonProps(), [ - 'floating', - 'id', - 'novalidate', - 'role', - 'validated', - 'wrapperAttrs', - ]), - } satisfies Record, - }, - emits: [ - { - event: 'submit', - description: 'Emitted when the form is submitted', - args: [ - { - arg: 'submit', - type: 'Event', - description: 'Native submit event', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content to place in the nav form', - }, - ], - }, - { - component: 'BNavItem', - sourcePath: '/BNav/BNavItem.vue', - props: { - '': { - linkAttrs: { - type: 'Readonly', - default: undefined, - description: 'Additional attributes to place on the nested link element', - }, - linkClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to place on the nested link element', - }, - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...omit(linkProps, ['routerTag']), - }, - }, - emits: [ - { - event: 'click', - description: 'Emitted when non-disabled nav item clicked', - args: [ - { - arg: 'click', - description: 'On click event', - type: 'MouseEvent', - }, - ], - }, - ], - slots: [ - { - name: 'after', - description: 'Content to place after the nav item link (useful for nested navs)', - }, - { - name: 'default', - description: 'Content to place in the nav item', - }, - ], - }, - { - component: 'BNavItemDropdown', - styleSpec: {kind: StyleKind.OverrideClass, value: '.nav-item.dropdown'}, - sourcePath: '/BNav/BNavItemDropdown.vue', - props: { - '': dropdownProps, - }, - emits: dropdownEmits, - slots: dropdownSlots, - }, - { - component: 'BNavText', - styleSpec: {kind: StyleKind.OverrideClass, value: '.navbar-text'}, - sourcePath: '/BNav/BNavText.vue', - props: { - '': { - text: { - description: 'Plain text to display in the nav', - type: 'string', - default: undefined, - }, - } satisfies Record, - }, - slots: [ - { - description: 'Content to display in the nav', - name: 'default', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/navbar.data.ts b/apps/docs/src/data/components/navbar.data.ts deleted file mode 100644 index 7c2df0f63..000000000 --- a/apps/docs/src/data/components/navbar.data.ts +++ /dev/null @@ -1,191 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, omit, pick} from '../../utils' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BNavbar', - sourcePath: '/BNavbar/BNavbar.vue', - props: { - '': { - container: { - type: "boolean | 'fluid' | Breakpoint", - default: 'fluid', - description: - "Use the container option to change the layout of the navbar. By default, the navbar is a fluid container. Use 'fluid' for a full width navbar, or a responsive breakpoint for a container width navbar.", - }, - fixed: { - type: "'top' | 'bottom'", - default: undefined, - description: - "Set to 'top' for fixed to the top of the viewport, or 'bottom' for fixed to the bottom of the viewport", - }, - print: { - type: 'boolean', - default: false, - description: - 'Navbars are hidden by default when printing. When this prop is set it will be printed', - }, - sticky: { - type: "'top' | 'bottom'", - default: undefined, - description: - "Set to true to make the navbar stick to the top of the viewport (or parent container that has 'position: relative' set) when scrolled", - }, - toggleable: { - type: 'boolean | Breakpoint', - default: false, - description: - "Set to 'true' for an always collapsed navbar, or to a specific breakpoint at which point the navbar will be expanded: 'sm', 'md', 'lg', 'xl', or 'xxl'", - }, - ...pick( - buildCommonProps({ - tag: { - default: 'nav', - }, - }), - ['autoClose', 'tag', 'variant'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the navbar', - }, - ], - }, - { - component: 'BNavbarBrand', - sourcePath: '/BNavbar/BNavbarBrand.vue', - props: { - '': { - ...pick( - buildCommonProps({ - tag: { - default: 'ul', - }, - }), - ['tag'] - ), - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...omit(linkProps, ['routerTag']), - }, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the navbar brand', - }, - ], - }, - { - component: 'BNavbarNav', - sourcePath: '/BNavbar/BNavbarNav.vue', - props: { - '': { - align: { - type: 'AlignmentJustifyContent', - default: undefined, - description: - "Align the nav items in the nav: 'start', 'end', 'center', 'between', 'around', or 'evenly'", - }, - fill: { - type: 'boolean', - default: false, - description: - 'Proportionately fills all horizontal space with nav items. All horizontal space is occupied, but not every nav item has the same width', - }, - justified: { - type: 'boolean', - default: false, - description: - "Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width", - }, - small: { - type: 'boolean', - default: false, - description: 'Makes the nav smaller', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'ul', - }, - }), - ['tag'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the navbar nav', - }, - ], - }, - { - component: 'BNavbarToggle', - sourcePath: '/BNavbar/BNavbarToggle.vue', - props: { - '': { - label: { - type: 'string', - default: 'Toggle navigation', - description: "String to place in the toggle's 'aria-label' attribute", - }, - target: { - type: 'string | readonly string[]', - default: undefined, - description: - 'ID (or array of IDs) of the collapse/sidebar components that should be toggled', - }, - ...pick( - buildCommonProps({ - tag: { - default: 'ul', - }, - }), - ['disabled'] - ), - } satisfies Record, - }, - emits: [ - { - event: 'click', - description: 'Emitted when the toggle is clicked', - args: [ - { - arg: 'click', - description: 'Native mouse event object', - type: 'MouseEvent', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Alternate content to replace the default Bootstrap hamburger', - scope: [ - { - prop: 'expanded', - type: 'boolean', - description: '`true` if the collapse is expanded, `false` otherwise', - notYetImplemented: true, - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/offcanvas.data.ts b/apps/docs/src/data/components/offcanvas.data.ts deleted file mode 100644 index 838b868db..000000000 --- a/apps/docs/src/data/components/offcanvas.data.ts +++ /dev/null @@ -1,306 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {showHideProps} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BOffcanvas', - styleSpec: {kind: StyleKind.OverrideClass, value: '.offcanvas[-*]'}, - sourcePath: '/BOffcanvas/BOffcanvas.vue', - props: { - '': { - backdropFirst: { - type: 'boolean', - default: false, - description: - 'Animate the backdrop before the offcanvas, and on leave animate the offcanvas before the backdrop', - }, - bodyAttrs: { - type: 'Readonly', - default: undefined, - }, - bodyClass: { - type: 'ClassValue', - default: undefined, - }, - bodyScrolling: { - type: 'boolean', - default: false, - }, - focus: { - type: "'ok' | 'cancel' | 'close' | string | ComponentPublicInstance | HTMLElement | null", - default: undefined, - description: - "Specify where to focus once offcanvas opens. Can be built-in button 'close'. Can be ref, HTMLElement, id or selector string. If set to 'false', no focus will be set (if noTrap isn't set the focus trap will focus the modal element or failback element). If set to a string, the element with that id will be focused. If set to a ComponentPublicInstance, the $el property of the instance will be focused.", - }, - footerClass: { - type: 'string', - default: undefined, - }, - headerClass: { - type: 'string', - default: undefined, - }, - headerCloseClass: { - type: 'ClassValue', - default: undefined, - }, - headerCloseLabel: { - type: 'string', - default: 'Close', - }, - headerCloseVariant: { - type: 'ButtonVariant | null', - default: 'secondary', - }, - noBackdrop: { - type: 'boolean', - default: false, - }, - id: { - type: 'string', - default: undefined, - }, - noCloseOnBackdrop: { - type: 'boolean', - default: false, - }, - noCloseOnEsc: { - type: 'boolean', - default: false, - }, - noHeader: { - type: 'boolean', - default: false, - }, - noHeaderClose: { - type: 'boolean', - default: false, - }, - noTrap: { - type: 'boolean', - default: false, - description: 'Disables the focus trap feature', - }, - placement: { - type: 'Placement', - default: 'start', - }, - responsive: { - type: 'Breakpoint', - }, - shadow: { - type: 'Size | boolean', - default: false, - }, - teleportDisabled: { - type: 'boolean', - default: false, - }, - teleportTo: { - type: 'string | RendererElement | null | undefined', - default: 'body', - }, - title: { - type: 'string', - default: undefined, - }, - width: { - type: 'string', - default: undefined, - }, - ...showHideProps, - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - args: [ - { - arg: 'update:model-value', - description: '', - type: 'boolean', - }, - ], - }, - { - event: 'breakpoint', - args: [ - { - arg: 'value', - type: 'BvTriggerableEvent', - description: 'The event', - }, - { - arg: 'opened', - type: 'boolean', - description: 'Whether or not the offcanvas is above the breakpoint and is open by it', - }, - ], - description: "Emitted when the offcanvas' breakpoint state changes", - }, - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'show', - }, - { - event: 'show-prevented', - description: '', - args: [], - }, - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'shown', - }, - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'hide', - }, - { - event: 'hide-prevented', - description: '', - args: [], - }, - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'hidden', - }, - { - event: 'close', - description: '', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - }, - { - event: 'esc', - description: '', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - }, - ], - slots: [ - { - description: '', - name: 'title', - scope: [ - { - prop: 'visible', - type: 'boolean', - }, - { - prop: 'placement', - type: "'top' | 'bottom' | 'start' | 'end'", - }, - { - prop: 'hide', - type: '(trigger?: string) => void', - }, - ], - }, - { - description: '', - name: 'default', - scope: [ - { - prop: 'visible', - type: 'boolean', - }, - { - prop: 'placement', - type: "'top' | 'bottom' | 'start' | 'end'", - }, - { - prop: 'hide', - type: '(trigger?: string) => void', - }, - ], - }, - { - name: 'backdrop', - description: '', - scope: [], - }, - { - name: 'footer', - description: '', - scope: [ - { - prop: 'visible', - type: 'boolean', - }, - { - prop: 'placement', - type: "'top' | 'bottom' | 'start' | 'end'", - }, - { - prop: 'hide', - type: '(trigger?: string) => void', - }, - ], - }, - { - name: 'header', - description: '', - scope: [ - { - prop: 'visible', - type: 'boolean', - }, - { - prop: 'placement', - type: "'top' | 'bottom' | 'start' | 'end'", - }, - { - prop: 'hide', - type: '(trigger?: string) => void', - }, - ], - }, - { - name: 'header-close', - description: '', - scope: [], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/overlay.data.ts b/apps/docs/src/data/components/overlay.data.ts deleted file mode 100644 index d9a6cc591..000000000 --- a/apps/docs/src/data/components/overlay.data.ts +++ /dev/null @@ -1,148 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BOverlay', - styleSpec: {kind: StyleKind.BsvnClass}, - sourcePath: '/BOverlay/BOverlay.vue', - props: { - '': { - bgColor: { - type: 'string', - default: undefined, - }, - blur: { - type: 'string | null', - default: '2px', - }, - fixed: { - type: 'boolean', - default: false, - }, - noCenter: { - type: 'boolean', - default: false, - }, - noFade: { - type: 'boolean', - default: false, - }, - noSpinner: { - type: 'boolean', - default: false, - }, - noWrap: { - type: 'boolean', - default: false, - }, - opacity: { - type: 'Numberish', - default: 0.85, - }, - overlayTag: { - type: 'string', - default: 'div', - }, - rounded: { - type: 'boolean | RadiusElement', - default: false, - }, - roundedTop: { - type: 'boolean | RadiusElement', - default: undefined, - }, - roundedBottom: { - type: 'boolean | RadiusElement', - default: undefined, - }, - roundedStart: { - type: 'boolean | RadiusElement', - default: undefined, - }, - roundedEnd: { - type: 'boolean | RadiusElement', - default: undefined, - }, - show: { - type: 'boolean', - default: false, - }, - spinnerSmall: { - type: 'boolean', - default: false, - }, - spinnerType: { - type: 'SpinnerType', - default: 'border', - }, - spinnerVariant: { - type: 'ColorVariant | null', - default: undefined, - }, - variant: { - type: "ColorVariant | 'white' | 'transparent' | null", - default: 'light', - }, - wrapTag: { - type: 'string', - default: 'div', - }, - zIndex: { - type: 'Numberish', - default: 10, - }, - } satisfies Record, - }, - emits: [ - { - args: [ - { - arg: 'click', - description: '', - type: 'MouseEvent', - }, - ], - description: '', - event: 'click', - }, - { - args: [], - description: '', - event: 'hidden', - }, - { - args: [], - description: '', - event: 'shown', - }, - ], - slots: [ - { - description: '', - name: 'default', - scope: [], - }, - { - name: 'overlay', - description: '', - scope: [ - { - prop: 'type', - type: 'SpinnerType', - }, - { - prop: 'variant', - type: 'ColorVariant | null', - }, - { - prop: 'small', - type: 'boolean', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/pagination.data.ts b/apps/docs/src/data/components/pagination.data.ts deleted file mode 100644 index 025fa34d4..000000000 --- a/apps/docs/src/data/components/pagination.data.ts +++ /dev/null @@ -1,245 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -const sharedScope = [ - { - prop: 'disabled', - type: 'Boolean', - description: 'Will be `true` if this button is disabled (non-clickable)', - }, - { - prop: 'index', - type: 'Number', - description: 'Page number (indexed from `0` to `numberOfPages - 1`)', - }, - { - prop: 'page', - type: 'Number', - description: 'Page number (from `1` to `numberOfPages`)', - }, -] - -export default { - load: (): ComponentReference[] => [ - { - component: 'BPagination', - sourcePath: '/BPagination/BPagination.vue', - props: { - '': { - align: { - type: 'AlignmentJustifyContent | fill', - description: - "Alignment of the page buttons: 'start' (or 'left'), 'center', 'end' (or 'right'), or 'fill'", - }, - ellipsisClass: { - type: 'ClassValue', - default: undefined, - description: "Class(es) to apply to the 'ellipsis' placeholders", - }, - ellipsisText: { - type: 'string', - default: '\u2026', - description: 'Content to place in the ellipsis placeholder', - }, - firstClass: { - type: 'ClassValue', - default: undefined, - description: 'Class(es) to apply to the go to first page button', - }, - firstNumber: { - type: 'boolean', - default: false, - description: 'Display first page number instead of go to first page button', - }, - firstText: { - type: 'string', - default: '\u00AB', - description: 'Content to place in the go to first page button', - }, - labelFirstPage: { - type: 'string', - default: 'Go to first page', - description: - "Value to place in the 'aria-label' attribute of the go to first page button", - }, - labelLastPage: { - type: 'string', - default: 'Go to last page', - description: - "Value to place in the 'aria-label' attribute of the go to last page button", - }, - labelNextPage: { - type: 'string', - default: 'Go to next page', - description: - "Value to place in the 'aria-label' attribute of the go to next page button", - }, - labelPage: { - type: 'string', - default: 'Go to page', - description: - "Value to place in the 'aria-label' attribute of the go to page button. Page number will be appended automatically", - }, - labelPrevPage: { - type: 'string', - default: 'Go to previous page', - description: - "Value to place in the 'aria-label' attribute of the go to previous page button", - }, - lastClass: { - type: 'ClassValue', - default: undefined, - description: 'Class(es) to apply to the go to last page button', - }, - lastNumber: { - type: 'boolean', - default: false, - description: 'Display last page number instead of go to Last button', - }, - lastText: { - type: 'string', - default: '\u00BB', - description: 'Content to place in the go to last page button', - }, - limit: { - type: 'Numberish', - default: 5, - description: - 'Maximum number of buttons to show (including ellipsis if shown, but excluding the bookend buttons)', - }, - modelValue: { - type: 'Numberish', - default: 1, - description: 'Current page number, starting from 1', - }, - nextClass: { - type: 'ClassValue', - default: undefined, - description: 'Class(es) to apply to the go to next page button', - }, - nextText: { - type: 'string', - default: '\u203A', - description: 'Content to place in the go to next page button', - }, - pageClass: { - type: 'ClassValue', - default: undefined, - description: 'Class(es) to apply to the go to page # buttons', - }, - perPage: { - type: 'Numberish', - default: 20, - description: 'Number of rows per page', - }, - pills: { - type: 'boolean', - default: false, - description: 'Applies pill styling to the pagination buttons', - }, - prevClass: { - type: 'ClassValue', - default: undefined, - description: "Class(es) to apply to the 'Go to previous page' button", - }, - prevText: { - type: 'string', - default: '\u2039', - description: 'Content to place in the go to previous page button', - }, - totalRows: { - type: 'Numberish', - default: 0, - description: 'Total number of rows in the dataset', - }, - ...pick( - buildCommonProps({ - ariaLabel: { - default: 'Pagination', - }, - size: { - default: undefined, - }, - }), - ['ariaControls', 'ariaLabel', 'disabled', 'noEllipsis', 'noGotoEndButtons', 'size'] - ), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - description: 'Emitted when page changes via user interaction', - args: [ - { - type: 'number', - arg: 'page', - description: 'Selected page number (starting with `1`)', - }, - ], - }, - { - event: 'page-click', - description: 'Emitted when a page button was clicked. Cancelable', - args: [ - { - arg: 'BvEvent', - type: 'BvEvent', - description: - 'The `BvEvent` object. Call `BvEvent.preventDefault()` to cancel page selection', - }, - { - type: 'number', - arg: 'page', - description: 'Page number to select (starting with `1`)', - }, - ], - }, - ], - slots: [ - { - name: 'ellipsis-text', - scope: [], - description: "The '...' indicator content. Overrides the `ellipsis-text` prop", - }, - { - name: 'first-text', - description: 'The go to first page button content', - scope: sharedScope, - }, - { - name: 'last-text', - description: 'The go to last page button content', - scope: sharedScope, - }, - { - name: 'next-text', - description: 'The go to next page button content', - scope: sharedScope, - }, - { - name: 'page', - description: 'Page number button content', - scope: [ - ...sharedScope, - { - prop: 'active', - type: 'Boolean', - description: 'If the page is the active page', - }, - { - prop: 'content', - type: 'String', - description: 'Default button content', - }, - ], - }, - { - name: 'prev-text', - description: 'The go to previous page button content', - scope: sharedScope, - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/placeholder.data.ts b/apps/docs/src/data/components/placeholder.data.ts deleted file mode 100644 index 9bb7991a0..000000000 --- a/apps/docs/src/data/components/placeholder.data.ts +++ /dev/null @@ -1,310 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BPlaceholder', - sourcePath: '/BPlaceholder/BPlaceholder.vue', - props: { - '': { - animation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - cols: { - type: 'Numberish', - default: 12, - }, - size: { - type: 'PlaceholderSize', - default: 'md', - }, - tag: { - type: 'string', - default: 'span', - }, - variant: { - type: 'ColorVariant | null', - default: null, - }, - width: { - type: 'Numberish', - default: undefined, - }, - wrapperTag: { - type: 'string', - default: 'span', - }, - } satisfies Record, - }, - emits: [], - slots: [], - }, - { - component: 'BPlaceholderCard', - styleSpec: {kind: StyleKind.OverrideClass, value: '.card'}, - sourcePath: '/BPlaceholder/BPlaceholderCard.vue', - emits: [], - props: { - '': { - animation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - footerAnimation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - footerSize: { - type: 'PlaceholderSize', - default: 'md', - }, - footerVariant: { - type: 'ColorVariant | null', - default: undefined, - }, - footerWidth: { - type: 'Numberish', - default: 100, - }, - headerAnimation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - headerSize: { - type: 'PlaceholderSize', - default: 'md', - }, - headerVariant: { - type: 'ColorVariant | null', - default: undefined, - }, - headerWidth: { - type: 'Numberish', - default: 100, - }, - imgBlankColor: { - type: 'string', - default: '#868e96', - }, - imgPlacement: { - type: "'top' | 'bottom'", - default: 'top', - }, - imgHeight: { - type: 'Numberish', - default: 100, - }, - imgSrc: { - type: 'string', - default: undefined, - }, - noButton: { - type: 'boolean', - default: false, - }, - noFooter: { - type: 'boolean', - default: false, - }, - noHeader: { - type: 'boolean', - default: false, - }, - noImg: { - type: 'boolean', - default: false, - }, - size: { - type: 'PlaceholderSize', - default: 'md', - }, - variant: { - type: 'ColorVariant | null', - default: undefined, - }, - } satisfies Record, - }, - slots: [ - { - description: 'Overrides the img default', - name: 'img', - scope: [], - }, - { - description: 'Overrides the header default', - name: 'header', - scope: [], - }, - { - description: 'Overrides the default placeholders', - name: 'default', - scope: [], - }, - { - description: 'Overrides the footer default', - name: 'footer', - scope: [], - }, - ], - }, - { - component: 'BPlaceholderWrapper', - styleSpec: {kind: StyleKind.None}, - sourcePath: '/BPlaceholder/BPlaceholderWrapper.vue', - emits: [], - props: { - '': { - loading: { - description: 'Determines whether the loading slot should be displayed', - type: 'boolean', - default: false, - }, - } satisfies Record, - }, - slots: [ - { - description: 'Content to show when the `loading` prop is `false`', - name: 'default', - scope: [], - }, - { - description: 'Content to show when the `loading` prop is `true`', - name: 'loading', - scope: [], - }, - ], - }, - { - component: 'BPlaceholderTable', - styleSpec: {kind: StyleKind.OverrideClass, value: '.table'}, - sourcePath: '/BPlaceholder/BPlaceholderTable.vue', - emits: [], - props: { - '': { - animation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - cellWidth: { - type: 'Numberish', - default: 100, - }, - columns: { - type: 'Numberish', - default: 5, - }, - footerAnimation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - footerCellWidth: { - type: 'Numberish', - default: 100, - }, - footerColumns: { - type: 'Numberish', - default: undefined, - }, - footerSize: { - type: 'PlaceholderSize', - default: 'md', - }, - footerVariant: { - type: 'ColorVariant | null', - default: undefined, - }, - headerAnimation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - headerCellWidth: { - type: 'Numberish', - default: 100, - }, - headerColumns: { - type: 'Numberish', - default: undefined, - }, - headerSize: { - type: 'PlaceholderSize', - default: 'md', - }, - headerVariant: { - type: 'ColorVariant | null', - default: undefined, - }, - noHeader: { - type: 'boolean', - default: false, - }, - rows: { - type: 'Numberish', - default: 3, - }, - showFooter: { - type: 'boolean', - default: false, - }, - size: { - type: 'PlaceholderSize', - default: 'md', - }, - variant: { - type: 'ColorVariant | null', - default: undefined, - }, - } satisfies Record, - }, - slots: [ - { - description: 'Overwrites the thead of the table', - name: 'thead', - scope: [], - }, - { - description: 'Overwrites the tfoot of the table', - name: 'tfoot', - scope: [], - }, - { - description: 'Overwrites the tbody of the table', - name: 'default', - scope: [], - }, - ], - }, - { - component: 'BPlaceholderButton', - styleSpec: {kind: StyleKind.OverrideClass, value: '.placeholder.btn'}, - sourcePath: '/BPlaceholder/BPlaceholderButton.vue', - emits: [], - slots: [], - props: { - '': { - animation: { - type: 'PlaceholderAnimation', - default: undefined, - }, - cols: { - type: 'Numberish', - default: undefined, - }, - tag: { - type: 'string', - default: 'div', - }, - variant: { - type: 'ColorVariant | null', - default: 'primary', - }, - width: { - type: 'Numberish', - default: undefined, - }, - } satisfies Record, - }, - }, - ], -} diff --git a/apps/docs/src/data/components/popover.data.ts b/apps/docs/src/data/components/popover.data.ts deleted file mode 100644 index b322db438..000000000 --- a/apps/docs/src/data/components/popover.data.ts +++ /dev/null @@ -1,227 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {showHideProps} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BPopover', - styleSpec: {kind: StyleKind.OverrideClass, value: '.tooltip, .popover'}, - sourcePath: '/BPopover/BPopover.vue', - props: { - '': { - boundary: { - type: 'Boundary | RootBoundary', - default: 'clippingAncestors', - }, - boundaryPadding: { - type: 'Padding', - default: undefined, - }, - click: { - type: 'boolean', - default: false, - }, - body: { - type: 'string', - default: undefined, - }, - bodyClass: { - type: 'ClassValue', - default: undefined, - }, - delay: { - type: 'number | { show: number; hide: number }', - default: '() => {show: 100, hide: 300})', - }, - floatingMiddleware: { - type: 'Middleware[]', - default: undefined, - }, - id: { - type: 'string', - default: undefined, - }, - inline: { - type: 'boolean', - default: false, - }, - manual: { - type: 'boolean', - default: false, - }, - noAutoClose: { - type: 'boolean', - default: false, - }, - noFlip: { - type: 'boolean', - default: false, - }, - noHide: { - type: 'boolean', - default: false, - }, - noShift: { - type: 'boolean', - default: false, - }, - noSize: { - type: 'boolean', - default: false, - }, - noninteractive: { - type: 'boolean', - default: false, - }, - offset: { - type: 'Numberish | null', - default: null, - }, - placement: { - type: 'PopoverPlacement', - default: 'top', - }, - realtime: { - type: 'boolean', - default: false, - }, - reference: { - type: 'string | ComponentPublicInstance | HTMLElement | null', - default: null, - }, - strategy: { - type: 'Strategy', - default: 'absolute', - }, - target: { - type: 'string | ComponentPublicInstance | HTMLElement | null ', - default: null, - }, - teleportDisabled: { - type: 'boolean', - default: false, - }, - teleportTo: { - type: 'string | RendererElement | null | undefined', - default: undefined, - }, - title: { - type: 'string', - default: undefined, - }, - titleClass: { - type: 'ClassValue', - default: undefined, - }, - tooltip: { - type: 'boolean', - default: false, - }, - variant: { - type: 'ColorVariant | null', - default: null, - }, - closeOnHide: {}, - hideMargin: { - type: 'number', - default: 0, - description: - 'The margin to apply when hiding the popover on pointer leave (how far the pointer can move off the target before hiding the popover)', - }, - ...showHideProps, - } satisfies Record, - }, - emits: [ - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'show', - }, - { - event: 'show-prevented', - description: '', - args: [], - }, - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'shown', - }, - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'hide', - }, - { - event: 'hide-prevented', - description: '', - args: [], - }, - { - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - description: '', - event: 'hidden', - }, - ], - slots: [ - { - description: '', - name: 'title', - scope: [], - }, - { - description: '', - name: 'default', - scope: [], - }, - { - name: 'target', - description: '', - scope: [ - { - prop: 'show', - type: '() => void', - }, - { - prop: 'hide', - type: '(trigger: string) => void', - }, - { - prop: 'toggle', - type: '() => void', - }, - { - prop: 'visible', - type: 'boolean', - }, - ], - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/progress.data.ts b/apps/docs/src/data/components/progress.data.ts deleted file mode 100644 index 3e22cd4df..000000000 --- a/apps/docs/src/data/components/progress.data.ts +++ /dev/null @@ -1,122 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BProgress', - sourcePath: '/BProgress/BProgress.vue', - props: { - '': { - animated: { - type: 'boolean', - default: undefined, - description: "Enable the animated background. Also automatically sets 'striped'", - }, - height: { - type: 'string', - default: undefined, - description: - 'Override the default height by specifying a CSS height value (including units)', - }, - max: { - type: 'Numberish', - default: 100, - description: 'Set the maximum value', - }, - precision: { - type: 'Numberish', - default: undefined, - description: 'The number of digits after the decimal to round the value to', - }, - showProgress: { - type: 'boolean', - default: undefined, - description: 'Displays the current progress value as a percentage', - }, - showValue: { - type: 'boolean', - default: undefined, - description: 'Displays the current progress value', - }, - striped: { - type: 'boolean', - default: undefined, - description: 'Enable the striped background', - }, - value: { - type: 'Numberish', - default: undefined, - description: 'The current value of the progress bar', - }, - ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Content (progress bars) to place in the progress element', - }, - ], - }, - { - component: 'BProgressBar', - sourcePath: '/BProgress/BProgressBar.vue', - props: { - '': { - animated: { - type: 'boolean', - default: false, - description: "Enable the animated background. Also automatically sets 'striped'", - }, - label: { - type: 'string', - default: undefined, - description: 'Text string to explicitly set the label as', - }, - max: { - type: 'Numberish', - default: undefined, - description: 'Set the maximum value', - }, - precision: { - type: 'Numberish', - default: 0, - description: 'The number of digits after the decimal to round the value to', - }, - showProgress: { - type: 'boolean', - default: false, - description: 'Displays the current progress value as a percentage', - }, - showValue: { - type: 'boolean', - default: false, - description: 'Displays the current progress value', - }, - striped: { - type: 'boolean', - default: false, - description: 'Enable the striped background', - }, - value: { - type: 'Numberish', - default: 0, - description: 'The current value of the progress bar', - }, - ...pick(buildCommonProps(), ['bgVariant', 'textVariant', 'variant']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: - 'Content to place in the progress bar. Overrides the `label`, `show-progress` and `show-value` props', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/spinner.data.ts b/apps/docs/src/data/components/spinner.data.ts deleted file mode 100644 index 35fda229b..000000000 --- a/apps/docs/src/data/components/spinner.data.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BSpinner', - styleSpec: {kind: StyleKind.OverrideClass, value: '.spinner-*'}, - sourcePath: '/BSpinner/BSpinner.vue', - props: { - '': { - label: { - type: 'string', - default: undefined, - description: 'Text content to place in the visually-hidden label', - }, - small: { - type: 'boolean', - default: false, - description: 'When set, rendered a smaller spinner suitable for placing in buttons', - }, - type: { - type: 'SpinnerType', - default: 'border', - description: "Type of spinner to show. Current supported types are 'border' and 'grow'", - }, - ...pick( - buildCommonProps({ - tag: { - default: 'span', - }, - }), - ['role', 'tag', 'variant'] - ), - } satisfies Record, - }, - slots: [ - { - name: 'label', - description: 'Content to place in the visually-hidden label', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/table.data.ts b/apps/docs/src/data/components/table.data.ts deleted file mode 100644 index 5a0014fcf..000000000 --- a/apps/docs/src/data/components/table.data.ts +++ /dev/null @@ -1,1002 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick} from '../../utils' - -export default { - load: (): ComponentReference[] => { - const tableRowEventArgs = (action: string) => [ - { - arg: 'item', - type: 'TableItem', - description: `Item data of the row ${action}`, - }, - { - arg: 'index', - type: 'number', - description: `Index of the row ${action}`, - }, - { - arg: 'event', - description: '', - type: 'MouseEvent|KeyboardEvent', - }, - ] - - const rowSelectionScope = [ - { - prop: 'rowSelected', - type: 'boolean', - description: - 'Will be true if the row has been selected. Only applicable when table is in selectable mode', - }, - { - prop: 'selectRow', - type: '(index?: number) => void', - description: - 'Can be called to select the current row. Only applicable when table is in selectable mode', - }, - ] - - const endRowScope = [ - { - prop: 'columns', - type: 'number', - description: 'The number of columns in the table', - }, - { - prop: 'fields', - type: 'TableField[]', - description: 'The normalized fields definition array (in the array of objects format)', - }, - ] - - const BTableSimpleProps = { - bordered: { - type: 'boolean', - default: false, - description: 'Adds borders to all the cells and headers', - }, - borderless: { - type: 'boolean', - default: false, - description: 'Removes all borders from cells', - }, - borderVariant: { - type: 'ColorVariant | null', - default: null, - description: 'Applies one of the Bootstrap theme color variants to the table border', - }, - captionTop: { - type: 'boolean', - default: false, - description: 'When set, the table caption will appear above the table', - }, - dark: { - type: 'boolean', - default: false, - description: 'Places the table in dark mode', - }, - fixed: { - type: 'boolean', - default: false, - description: - 'Makes all columns equal width (fixed layout table). Will speed up rendering for large tables. Column widths can be set via CSS or colgroup', - }, - hover: { - type: 'boolean', - default: false, - description: 'Enables hover styling on rows', - }, - noBorderCollapse: { - type: 'boolean', - default: false, - description: - "Disable's the collapsing of table borders. Useful when table has sticky headers or columns", - }, - outlined: { - type: 'boolean', - default: false, - description: 'Adds an outline border to the table element', - }, - responsive: { - type: 'boolean | Breakpoint', - default: false, - description: - "Makes the table responsive in width, adding a horizontal scrollbar. Set to true for always responsive or set to one of the breakpoints to switch from responsive to normal: 'sm', 'md', 'lg', 'xl'", - }, - small: { - type: 'boolean', - default: false, - description: 'Renders the table with smaller cell padding', - }, - stacked: { - type: 'boolean | Breakpoint', - default: false, - description: - "Place the table in stacked mode. Set to true for always stacked, or set to one of the breakpoints to switch from stacked to normal: 'sm', 'md', 'lg', 'xl'", - }, - stickyHeader: { - type: 'boolean | Numberish', - default: false, - description: - 'Makes the table header sticky. Set to true for a maximum height 300px tall table, or set to any valid CSS height (including units). Inputting a number type is converted to px height', - }, - striped: { - type: 'boolean', - default: false, - description: 'Applies striping to the tbody rows', - }, - stripedColumns: { - type: 'boolean', - default: false, - description: 'Applies striping to the table columns', - }, - tableAttrs: { - type: 'AttrsValue', - default: undefined, - description: 'Attributes to apply to the table element', - }, - tableClass: { - type: 'ClassValue', - default: undefined, - description: 'Classes to apply to the table element', - }, - ...pick(buildCommonProps(buildCommonProps()), ['id', 'variant']), - } as const satisfies Record - - const BTableLiteProps = { - align: { - type: 'VerticalAlign', - default: undefined, - }, - caption: { - type: 'string', - default: undefined, - description: 'Text string to place in the caption element', - }, - detailsTdClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the td element in the details row', - }, - fieldColumnClass: { - type: '(field: TableField) => Record[] | string | Record | any[]', - default: undefined, - }, - fields: { - type: 'TableFieldRaw[]', - default: '() => []', - description: 'Array of field names or array of field definition objects', - }, - footClone: { - type: 'boolean', - default: false, - description: 'Enable the footer of the table, and clone the header content by default', - }, - footRowVariant: { - type: 'ColorVariant | null', - default: undefined, - description: - 'Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant', - }, - footVariant: { - type: 'ColorVariant | null', - default: undefined, - description: - 'Apply a Bootstrap theme color variant to the foot, falls back to head-variant if that prop is specified. May take precedence over foot-row-variant', - }, - headRowVariant: { - type: 'ColorVariant | null', - default: undefined, - description: 'Apply a Bootstrap theme color variant to the tr element in the thead', - }, - headVariant: { - type: 'ColorVariant | null', - default: undefined, - description: - 'Apply a Bootstrap theme color variant to the head. May take precedence over head-row-variant', - }, - items: { - type: 'readonly Items[]', - default: '() => []', - }, - labelStacked: { - type: 'boolean', - default: false, - description: - 'When set, the labels will appear as actual label elements, rather than with the data-label attribute', - }, - modelValue: { - type: 'any', - default: undefined, - }, - primaryKey: { - type: 'string', - default: undefined, - description: - 'Name of a table field that contains a guaranteed unique value per row. Needed for tbody transition support, and also speeds up table rendering', - }, - tbodyClass: { - type: 'ClassValue', - default: undefined, - }, - tbodyTrAttrs: { - type: '((item: Items | null, type: TableRowType) => AttrsValue) | AttrsValue', - default: undefined, - }, - tbodyTrClass: { - type: '((item: TableItem | null, type: string) => string | any[] | null | undefined) | string | Record | any[]', - default: undefined, - }, - tfootClass: { - type: 'ClassValue', - default: undefined, - }, - tfootTrClass: { - type: 'ClassValue', - default: undefined, - }, - theadClass: { - type: 'ClassValue', - default: undefined, - }, - theadTrClass: { - type: 'ClassValue', - default: undefined, - }, - } as const satisfies Record< - Exclude, - PropertyReference - > - - const tableLiteEmits = [ - { - event: 'head-clicked', - description: - "Emitted when a header or footer cell is clicked. Not applicable for 'custom-foot' slot", - args: [ - { - arg: 'key', - type: 'TableField>.key: LiteralUnion', - description: 'Column key clicked (field name)', - }, - { - arg: 'field', - type: 'TableField', - description: 'Field definition object', - }, - { - arg: 'event', - description: 'Native event object', - type: 'MouseEvent|KeyboardEvent', - }, - { - arg: 'isFooter', - description: '`true` if this event originated from clicking on the footer cell', - type: 'boolean', - }, - ], - }, - { - event: 'row-clicked', - description: 'Emitted when a row is clicked', - args: tableRowEventArgs('being clicked'), - }, - { - event: 'row-contextmenu', - description: 'Emitted when a context menu is displayed for a row', - args: tableRowEventArgs('showing the context menu'), - }, - { - event: 'row-dblclicked', - description: 'Emitted when a row is double clicked', - args: tableRowEventArgs('being double clicked'), - }, - { - event: 'row-hovered', - description: 'Emitted when a row is hovered', - args: tableRowEventArgs('being hovered'), - }, - { - event: 'row-unhovered', - description: 'Emitted when a row is unhovered', - args: tableRowEventArgs('being unhovered'), - }, - ] - - const tableLiteSlots: ComponentReference['slots'] = [ - { - name: 'bottom-row', - description: 'Fixed bottom row slot for user supplied B-TD cells. Optionally Scoped', - scope: endRowScope, - }, - { - name: 'cell({key})', - description: - 'Default scoped slot for custom data rendering of field data. See docs for scoped data', - scope: [ - { - prop: 'detailsShowing', - type: 'boolean', - description: "Will be true if the row's row-details scoped slot is visible", - }, - { - prop: 'field', - type: 'TableField', - description: "The field's normalized definition object (from the fields prop)", - }, - { - prop: 'index', - type: 'number', - description: "The row's index (zero-based) with respect to the displayed rows", - }, - { - prop: 'item', - type: 'readonly Items[]', - description: "The row's item data object", - }, - { - prop: 'toggleDetails', - type: '() => void', - description: - 'Can be called to toggle the visibility of the rows row-details scoped slot', - }, - { - prop: 'unformatted', - type: 'unknown', - description: - "The raw value for this key in the item record (null or undefined if a virtual column), before being passed to the field's formatter function", - }, - { - prop: 'value', - type: 'unknown', - description: - "The value for this key in the record (null or undefined if a virtual column), or the output of the field's formatter function", - }, - ...rowSelectionScope, - ], - }, - { - name: 'custom-foot', - description: - 'Custom footer content slot for user supplied B-TR, B-TH, B-TD. Optionally Scoped', - scope: [ - { - prop: 'fields', - type: 'TableField[]', - description: 'The normalized fields definition array (in the array of objects format)', - }, - { - prop: 'items', - type: 'readonly Items[]', - description: 'Array of items that are currently being displayed', - }, - { - prop: 'columns', - type: 'number', - description: 'The number of columns in the table', - }, - ], - }, - { - name: 'foot({key})', - description: - "Scoped slot for custom rendering of field footer. '{key}' is the field's key name. See docs for scoped footer", - scope: [ - { - prop: 'clearSelected', - type: '() => void', - description: 'Unselect all rows (applicable if the table is in selectable mode)', - }, - { - prop: 'column', - type: 'LiteralUnion', - description: "The field's key value", - }, - { - prop: 'field', - type: 'TableField', - description: "The field's normalized definition object (from the fields prop)", - }, - { - prop: 'isFoot', - type: 'true', - description: 'Used to distinguish foot when falling back to head()', - }, - { - prop: 'label', - type: 'string | undefined', - description: "The field's label value", - }, - { - prop: 'selectAllRows', - type: '() => void', - description: 'Select all rows (applicable if the table is in selectable mode)', - }, - ], - }, - { - name: 'head({key})', - description: - "Scoped slot for custom rendering of field header. '{key}' is the field's key name", - scope: [ - { - prop: 'clearSelected', - type: '() => void', - description: 'Unselect all rows (applicable if the table is in selectable mode)', - }, - { - prop: 'column', - type: 'LiteralUnion', - description: "The field's key value", - }, - { - prop: 'field', - type: 'TableField', - description: "The field's normalized definition object (from the fields prop)", - }, - { - prop: 'isFoot', - type: 'boolean', - description: 'Will be true if the slot is being rendered in the table footer', - }, - { - prop: 'label', - type: 'string | undefined', - description: "The field's label value", - }, - { - prop: 'selectAllRows', - type: '() => void', - description: 'Select all rows (applicable if the table is in selectable mode)', - }, - ], - }, - { - name: 'row-details', - description: - 'Scoped slot for optional rendering additional record details. See docs for Row details support', - scope: [ - { - prop: 'fields', - type: 'TableField[]', - description: 'The normalized fields definition array (in the array of objects format)', - }, - { - prop: 'index', - type: 'Number', - description: "The item's row index number (with respect to the displayed item rows)", - }, - { - prop: 'item', - type: 'Items', - description: "The entire row's record data object", - }, - { - prop: 'toggleDetails', - type: '() => void', - description: "Function to toggle visibility of the row's details slot", - }, - ...rowSelectionScope, - ], - }, - { - name: 'table-caption', - description: "Content to display in the table's caption element", - }, - { - name: 'thead-top', - description: - 'Slot above the column headers in the `thead` element for user-supplied B-TR with B-TH/B-TD. Optionally scoped', - scope: [ - { - prop: 'clearSelected', - type: '() => void', - description: 'Unselect all rows (applicable if the table is in selectable mode)', - }, - { - prop: 'columns', - type: 'number', - description: 'The number of columns in the table', - }, - { - prop: 'label', - type: 'string | undefined', - description: "The field's label value", - }, - { - prop: 'fields', - type: 'TableField[]', - description: 'The normalized fields definition array (in the array of objects format)', - }, - { - prop: 'selectAllRows', - type: '() => void', - description: 'Select all rows (applicable if the table is in selectable mode)', - }, - ], - }, - { - name: 'table-colgroup', - description: 'Slot for user supplied `` element', - scope: [ - { - prop: 'fields', - type: 'TableField[]', - description: 'The normalized fields definition array (in the array of objects format)', - }, - ], - }, - { - name: 'top-row', - description: 'Fixed top row slot for user supplied B-TD cells. Optionally scoped', - scope: endRowScope, - }, - ] - - return [ - { - component: 'BTable', - sourcePath: '/BTable/BTable.vue', - props: { - '': { - busy: { - type: 'boolean', - default: false, - description: - 'When set, forces the table into the busy state. Automatically set when an items provider function is being called', - }, - busyLoadingText: { - type: 'string', - default: 'Loading...', - notYetImplemented: true, - }, - currentPage: { - type: 'Numberish', - default: 1, - description: - 'The current page number to display when the table is paginated. Starting from 1 and up', - }, - filter: { - type: 'string', - default: undefined, - description: - 'Criteria for filtering. Internal filtering supports only string or RegExpr criteria (RegExp is not yet implemented)', - }, - filterFunction: { - type: '(item: Readonly, filter: string | undefined) => boolean', - default: undefined, - description: - 'Function called during filtering of items, gets passed the current item being filtered. See docs for details.', - }, - filterable: { - type: 'string[]', - default: undefined, - description: 'Array of fields to include when filtering.', - }, - emptyFilteredText: { - type: 'string', - default: 'There are no records matching your request', - description: - 'Text to display when no items are present in the `items` array after filtering', - }, - emptyText: { - type: 'string', - default: 'There are no records to show', - description: 'Text to display when no items are present in the `items` array', - }, - showEmpty: { - type: 'boolean', - default: false, - description: 'Show the empty text when no items are present in the `items` array', - }, - multisort: { - type: 'boolean', - default: false, - }, - mustSort: { - type: 'boolean | string[]', - default: false, - }, - noLocalSorting: { - type: 'boolean', - default: false, - }, - noProvider: { - type: 'NoProviderTypes[]', - default: undefined, - description: - 'Alternate way to set provider functionality, equivalent to using no-provider-filtering, no-provider-paging, and no-provider-sorting', - }, - noProviderFiltering: { - type: 'boolean', - default: false, - description: - 'When set, uses internal filtering to filter the data. Otherwise the provider is expected to perform the filtering', - }, - noProviderPaging: { - type: 'boolean', - default: false, - description: - 'When set, uses internal paging to paginate the data. Otherwise the items provider is expected to perform the paging', - }, - noProviderSorting: { - type: 'boolean', - default: false, - description: - 'When set, uses internal sorting to sort the data. Otherwise the items provider is expected to perform the sorting', - }, - noSelectOnClick: { - type: 'boolean', - default: false, - description: 'Do not select row when clicked', - }, - noSortableIcon: { - type: 'boolean', - default: false, - }, - perPage: { - type: 'Numberish', - default: Number.POSITIVE_INFINITY, - }, - provider: { - type: 'BTableProvider', - default: undefined, - }, - selectable: { - type: 'boolean', - default: false, - description: 'When set, places the table body rows in selectable mode', - }, - selectedItems: { - type: 'TableItem[]', - }, - selectHead: { - type: 'boolean | string', - default: true, - }, - selectionVariant: { - type: 'ColorVariant | null', - default: 'primary', - description: - "Bootstrap color theme variant to set selected rows to. Use any of the standard Bootstrap theme color variants, or the special table row variant 'active' (default). Set to an empty string to not use a variant", - }, - selectMode: { - type: "'multi' | 'single' | 'range'", - default: 'multi', - description: - "The selectable mode for the table when 'selectable' is set. Possible values: 'single', 'multi' or 'range'", - }, - sortBy: { - type: 'BTableSortBy[]', - default: undefined, - description: 'Model representing the current sort state', - }, - stickySelect: { - type: 'boolean', - default: false, - }, - } satisfies Record< - Exclude< - keyof BvnComponentProps['BTable'], - keyof BvnComponentProps['BTableSimple'] | keyof BvnComponentProps['BTableLite'] - >, - PropertyReference - >, - 'BTableLite Props': BTableLiteProps, - 'BTableSimple Props': BTableSimpleProps, - }, - emits: [ - { - event: 'changed', - description: 'Emitted when the displayed items change', - args: [ - { - arg: 'value', - type: 'Items[]', - description: 'Array of items displayed in the table', - }, - ], - }, - { - event: 'filtered', - description: 'Emitted when local filtering causes a change in the number of items', - args: [ - { - arg: 'value', - type: 'Items[]', - description: 'Array of items after filtering (before local pagination occurs)', - }, - ], - }, - { - event: 'row-selected', - description: 'Emitted when a row or rows have been selected', - args: [ - { - arg: 'value', - type: 'Items[]', - description: 'Array of the row items that are selected', - }, - ], - }, - { - event: 'row-unselected', - description: 'Emitted when a row or rows have been unselected', - args: [ - { - arg: 'value', - type: 'Items[]', - description: 'Array of the row items that are unselected', - }, - ], - }, - { - event: 'update:sortBy', - description: - 'Emitted when the `sortBy` model is changed and represents the current sort state', - args: [ - { - arg: 'value', - type: 'BTableSortBy[] | undefined', - description: 'New sortBy model value', - }, - ], - }, - { - event: 'sorted', - description: - 'Updated when the user clicks a sortable column heading and represents the column click and the sort state (`asc`, `desc`, or undefined)', - args: [ - { - arg: 'value', - description: '', - type: 'BTableSortBy', - }, - ], - }, - ...tableLiteEmits, - ], - slots: [ - ...tableLiteSlots, - { - name: 'empty', - description: - 'Content to display when no items are present in the `items` array. Optionally scoped', - scope: [ - { - prop: 'emptyFilteredText', - type: 'string', - description: 'The value of the empty-filtered-text prop', - }, - { - prop: 'emptyText', - type: 'string', - description: 'The value of the empty-text prop', - }, - { - prop: 'fields', - type: 'TableField[]', - description: - 'The normalized fields definition array (in the array of objects format)', - }, - { - prop: 'items', - type: 'Items[] | null', - description: 'The items array.', - }, - ], - }, - { - name: 'empty-filtered', - description: - 'Content to display when no items are present in the filtered `items` array. Optionally scoped', - scope: [ - { - prop: 'emptyFilteredText', - type: 'string', - description: 'The value of the empty-filtered-text prop', - }, - { - prop: 'emptyText', - type: 'string', - description: 'The value of the empty-text prop', - }, - { - prop: 'fields', - type: 'TableField[]', - description: - 'The normalized fields definition array (in the array of objects format)', - }, - { - prop: 'items', - type: 'Items[]', - description: 'The items array.', - }, - ], - }, - { - name: 'table-busy', - description: 'Optional slot to place loading message when table is in the busy state', - }, - ], - }, - { - component: 'BTableLite', - sourcePath: '/BTable/BTableLite.vue', - props: { - '': BTableLiteProps, - 'BTableSimple Props': BTableSimpleProps, - }, - emits: tableLiteEmits, - slots: tableLiteSlots, - }, - { - component: 'BTableSimple', - sourcePath: '/BTable/BTableSimple.vue', - props: { - '': BTableSimpleProps, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the table', - }, - ], - }, - { - component: 'BTbody', - styleSpec: {kind: StyleKind.Tag, value: 'tbody'}, - sourcePath: '/BTable/BTbody.vue', - props: { - '': { - ...pick(buildCommonProps(), ['variant']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the tbody', - }, - ], - }, - { - component: 'BTd', - styleSpec: {kind: StyleKind.Tag, value: 'td'}, - sourcePath: '/BTable/BTd.vue', - props: { - '': { - colspan: { - type: 'Numberish', - default: undefined, - description: 'Number of columns this cell spans', - }, - rowspan: { - type: 'Numberish', - default: undefined, - description: 'Number of rows this cell spans', - }, - stackedHeading: { - type: 'string', - default: undefined, - description: - "Heading for the cell when in stacked mode. Only applicable to cells in the 'tbody' element", - }, - stickyColumn: { - type: 'boolean', - default: false, - description: - 'If this will be a sticky column. Must be set on all cells in this column. Table must be in sticky-header or responsive mode to work', - }, - ...pick(buildCommonProps(), ['variant']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the td', - }, - ], - }, - { - component: 'BTfoot', - styleSpec: {kind: StyleKind.Tag, value: 'tfoot'}, - sourcePath: '/BTable/BTfoot.vue', - props: { - '': { - ...pick(buildCommonProps(), ['variant']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the tfoot', - }, - ], - }, - { - component: 'BTh', - styleSpec: {kind: StyleKind.Tag, value: 'th'}, - sourcePath: '/BTable/BTh.vue', - props: { - '': { - colspan: { - type: 'Numberish', - default: undefined, - }, - rowspan: { - type: 'Numberish', - default: undefined, - }, - stackedHeading: { - type: 'string', - default: undefined, - description: - "Heading for the cell when in stacked mode. Only applicable to cells in the 'tbody' element", - }, - stickyColumn: { - type: 'boolean', - default: false, - description: - 'If this will be a sticky colum. Must be set on all cells in this column. table must be in sticky-header or responsive mode to work', - }, - scope: { - type: 'TableThScope', - default: undefined, - description: 'Scope of the header cell. Can be one of: col, row, colgroup, rowgroup', - }, - ...pick(buildCommonProps(), ['variant']), - } satisfies Record, - }, - slots: [ - { - name: 'default', - description: 'Content to place in the th', - }, - ], - }, - { - component: 'BThead', - styleSpec: {kind: StyleKind.Tag, value: 'thead'}, - sourcePath: '/BTable/BThead.vue', - props: { - '': { - variant: { - type: 'ColorVariant', - default: null, - }, - } satisfies Record, - }, - emits: [], - slots: [ - { - description: '', - name: 'default', - scope: [], - }, - ], - }, - { - component: 'BTr', - styleSpec: {kind: StyleKind.Tag, value: 'tr'}, - sourcePath: '/BTable/BTr.vue', - props: { - '': { - variant: { - type: 'ColorVariant', - default: null, - }, - } satisfies Record, - }, - emits: [], - slots: [ - { - description: '', - name: 'default', - scope: [], - }, - ], - }, - ] - }, -} diff --git a/apps/docs/src/data/components/tabs.data.ts b/apps/docs/src/data/components/tabs.data.ts deleted file mode 100644 index 36c9e089e..000000000 --- a/apps/docs/src/data/components/tabs.data.ts +++ /dev/null @@ -1,276 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import {type ComponentReference, type PropertyReference, StyleKind} from '../../types' -import {buildCommonProps, pick, showHideProps} from '../../utils' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BTab', - styleSpec: {kind: StyleKind.OverrideClass, value: '.tab-pane'}, - sourcePath: '/BTabs/BTab.vue', - props: { - '': { - buttonId: { - type: 'string', - default: undefined, - description: - "Use a specific ID for this tab's tab control button. If not provided, one will automatically be generated", - }, - unmountLazy: { - type: 'boolean', - default: undefined, - description: - 'When set and lazy is also set, the content will be unmounted when the tab is not active', - }, - noBody: { - type: 'boolean', - default: false, - description: - "When the parent b-tabs has the 'card' prop set, do not render a card-body wrapper", - }, - titleItemClass: { - type: 'ClassValue', - default: undefined, - description: "CSS class (or classes) to apply to the tab's control button 'li' element", - }, - titleLinkAttrs: { - type: 'AttrsValue', - default: undefined, - description: "Attributes to apply to the tab's control button inner link element", - }, - titleLinkClass: { - type: 'ClassValue', - default: undefined, - description: - "CSS class (or classes) to apply to the tab's control button inner link element", - }, - ...pick(showHideProps, ['lazy']), - ...pick(buildCommonProps(), ['active', 'disabled', 'id', 'tag', 'title']), - } satisfies Record, - }, - emits: [], - slots: [ - { - name: 'default', - description: 'Slot for custom tab content', - }, - { - name: 'title', - description: 'Slot for custom tab title', - }, - ], - }, - { - component: 'BTabs', - sourcePath: '/BTabs/BTabs.vue', - props: { - '': { - index: { - type: 'number', - default: -1, - description: - 'The index (zero-based) of the currently active tab. Id (modelValue) takes priority over index.', - }, - activeNavItemClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the active nav item tab control', - }, - activeTabClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the currently active tab', - }, - align: { - type: 'AlignmentJustifyContent', - default: undefined, - description: - "Align the nav items in the nav: 'start' , 'end' , 'center' , 'between' , 'around' or 'evenly'", - }, - card: { - type: 'boolean', - default: false, - description: - "When set to true, renders the tabs the the appropriate styles to be placed into a 'b-card'", - }, - contentClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the tab-content wrapper', - }, - end: { - type: 'boolean', - default: false, - description: - 'Place the tab controls at the bottom (horizontal tabs), or right (vertical tabs)', - }, - fill: { - type: 'boolean', - default: false, - description: - 'Proportionately fills all horizontal space with nav items. All horizontal space is occupied, but not every nav item has the same width', - }, - inactiveNavItemClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to inactive nav item tab controls', - }, - inactiveTabClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to inactive tabs', - }, - justified: { - type: 'boolean', - default: false, - description: - "Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width", - }, - lazy: { - type: 'boolean', - default: false, - description: 'Lazily render the tab contents when shown', - }, - modelValue: { - type: 'string', - default: undefined, - description: 'The id of the currently active tab', - }, - navClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the tablist (nav) wrapper', - }, - navItemClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the tab item element', - }, - navWrapperClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the tab controls wrapper element', - }, - noFade: { - type: 'boolean', - default: false, - description: 'When set, disables the fade animation', - }, - noKeyNav: { - type: 'boolean', - default: false, - description: 'Disable keyboard navigation of the tab controls', - }, - noNavStyle: { - type: 'boolean', - default: false, - description: 'Do not render the tab controls with tab styling', - }, - pills: { - type: 'boolean', - default: false, - description: 'Renders the nav items with the appearance of pill buttons', - }, - small: { - type: 'boolean', - default: false, - description: 'Makes the nav smaller', - }, - underline: { - type: 'boolean', - default: false, - description: 'Renders the active name item with an underline', - }, - tabClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to apply to the tab element', - }, - vertical: { - type: 'boolean', - default: false, - description: 'Renders the tab controls vertically', - }, - ...pick(buildCommonProps(), ['id', 'tag']), - } satisfies Record, - }, - emits: [ - { - event: 'update:model-value', - args: [ - { - arg: 'value', - type: 'string', - description: 'The id of the currently active tab', - }, - ], - description: 'The active tab has changed. The id of the currently active tab', - }, - { - event: 'update:index', - args: [ - { - arg: 'value', - type: 'number', - description: 'The index (zero-based) of the currently active tab', - }, - ], - description: - 'The active tab has changed. The index (zero-based) of the currently active tab', - }, - { - description: 'Emitted just before a tab is shown/activated. Cancelable', - event: 'activate-tab', - args: [ - { - arg: 'newTabId', - type: 'string', - description: 'Tab being activated (id)', - }, - { - arg: 'prevTabId', - type: 'string', - description: 'Current active tab (id)', - }, - { - arg: 'newTabIndex', - type: 'number', - description: 'Tab being activated (0-based index)', - }, - { - arg: 'prevTabIndex', - type: 'number', - description: - 'Tab that is currently active (0-based index). Will be -1 if no current active tab', - }, - { - arg: 'event', - type: 'BvEvent', - description: 'BvEvent object. Call bvEvent.preventDefault() to cancel', - }, - ], - }, - ], - slots: [ - { - name: 'default', - description: 'Content (tabs) to place in the tabs element', - }, - { - name: 'empty', - description: 'Renders this slot if no tabs are present', - }, - { - name: 'tabs-end', - description: - 'Additional tab buttons without tab content placed after content tab buttons', - }, - { - name: 'tabs-start', - description: - 'Additional tab buttons without tab content placed before content tab buttons', - }, - ], - }, - ], -} diff --git a/apps/docs/src/data/components/toast.data.ts b/apps/docs/src/data/components/toast.data.ts deleted file mode 100644 index a2b46a37e..000000000 --- a/apps/docs/src/data/components/toast.data.ts +++ /dev/null @@ -1,250 +0,0 @@ -import type {BvnComponentProps} from 'bootstrap-vue-next' -import type {ComponentReference, PropertyReference} from '../../types' -import {buildCommonProps, omit, pick, showHideProps} from '../../utils' -import {linkProps, linkTo} from '../../utils/link-props' - -export default { - load: (): ComponentReference[] => [ - { - component: 'BToast', - sourcePath: '/BToast/BToast.vue', - props: { - '': { - bgVariant: { - type: 'ColorVariant | null', - default: null, - }, - body: { - type: 'string', - default: undefined, - description: 'The text content of the body', - }, - bodyClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to add to the toast body element', - }, - closeClass: { - type: 'ClassValue', - default: undefined, - description: 'Applies one or more custom classes to the close button', - }, - closeContent: { - type: 'string', - default: undefined, - description: 'Sets the text of the close button. The `close` slot takes precedence', - }, - closeLabel: { - type: 'string', - default: 'Close', - description: 'Sets the aria-label attribute on the close button', - }, - closeVariant: { - type: 'string | null', - default: null, - description: 'Color variant for the close button', - }, - headerClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to add to the toast header element', - }, - headerTag: { - type: 'string', - default: 'div', - description: 'Specify the HTML tag to render instead of the default tag for the footer', - }, - id: { - type: 'string', - default: undefined, - description: - 'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed', - }, - interval: { - type: 'number | requestAnimationFrame', - default: 'requestAnimationFrame', - description: 'The interval of which the countdown timer will refresh itself', - }, - isStatus: { - type: 'boolean', - default: false, - description: - "When set to 'true', makes the toast have attributes aria-live=polite and role=status. When 'false' aria-live will be 'assertive' and role will be 'alert'", - }, - modelValue: { - type: 'boolean | number', - default: false, - description: - 'Sets if the toast is visible or the number of milliseconds that the toast will be dismissed', - }, - noCloseButton: { - type: 'boolean', - default: false, - description: 'When set, hides the close button in the toast header', - }, - noProgress: { - type: 'boolean', - default: false, - description: 'When set, hides the progress bar in the toast', - }, - progressProps: { - type: "Omit", - default: undefined, - description: - 'The properties to define the progress bar in the toast. No progress will be shown if left undefined', - }, - showOnPause: { - type: 'boolean', - default: true, - description: "When set, keeps the toast visible when it's paused", - }, - solid: { - type: 'boolean', - default: false, - description: - 'When set, renders the toast with a solid background rather than translucent', - }, - textVariant: { - type: 'TextColorVariant | null', - default: null, - }, - title: { - type: 'string', - default: undefined, - description: "The toast's title text", - }, - toastClass: { - type: 'ClassValue', - default: undefined, - description: 'CSS class (or classes) to add to the toast wrapper element', - }, - ...omit(showHideProps, ['modelValue']), - ...pick(buildCommonProps(), ['variant', 'noHoverPause', 'noResumeOnHoverLeave']), - } satisfies Record< - Exclude, - PropertyReference - >, - 'BLink props': { - _linkTo: { - type: linkTo, - }, - ...linkProps, - }, - }, - slots: [], - emits: [ - { - event: 'update:model-value', - description: 'Emitted when toast visibility changes', - args: [ - { - arg: 'value', - type: 'Boolean', - description: 'The resulting value that was changed', - }, - ], - }, - { - args: [ - { - arg: 'destroyed', - description: '', - type: 'string', - }, - ], - description: '', - event: 'destroyed', - }, - { - event: 'close', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - }, - { - event: 'close-countdown', - args: [ - { - arg: 'value', - description: '', - type: 'number', - }, - ], - }, - { - event: 'hide', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - }, - { - event: 'hide-prevented', - args: [], - }, - { - event: 'hidden', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - }, - { - event: 'show', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - }, - { - event: 'show-prevented', - args: [], - }, - { - event: 'shown', - args: [ - { - arg: 'value', - description: '', - type: 'BvTriggerableEvent', - }, - ], - }, - ], - }, - { - component: 'BToastOrchestrator', - sourcePath: '/BToast/BToastOrchestrator.vue', - emits: [], - slots: [], - props: { - '': { - teleportTo: { - description: 'Overrides the default teleport location', - type: 'string | RendererElement | null | undefined', - default: 'body', - }, - teleportDisabled: { - description: 'Renders the Toaster in the exact place it was defined', - type: 'boolean', - default: false, - }, - appendToast: {}, - } satisfies Record, - }, - }, - ], -} diff --git a/apps/docs/src/data/opencollective.data.ts b/apps/docs/src/data/opencollective.data.ts deleted file mode 100644 index d015371d9..000000000 --- a/apps/docs/src/data/opencollective.data.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {type CollectivePartialResponse} from '../types' - -const collectiveSlug = 'bootstrap-vue-next' -const openCollectiveBaseURL = 'https://opencollective.com' -const openCollectiveMembersFetchUrl = `${openCollectiveBaseURL}/${collectiveSlug}/members/all.json` - -export default { - load: async (): Promise => { - const response = await fetch(openCollectiveMembersFetchUrl) - const data = await response.json() - return { - members: data, - } - }, -} diff --git a/apps/docs/src/docs.md b/apps/docs/src/docs.md deleted file mode 100644 index bc5e56d1b..000000000 --- a/apps/docs/src/docs.md +++ /dev/null @@ -1,426 +0,0 @@ -# Introduction - -
- -Get started with BootstrapVueNext and Bootstrap `v5`, the world’s most popular framework for building responsive, mobile-first sites. - -
- -## Why BootstrapVueNext? - -BootstrapVueNext is an attempt to have the [BootstrapVue](https://bootstrap-vue.github.io/bootstrap-vue/) components in Vue3, Bootstrap 5, and typescript. Another goal is to have the components written in a simple and readable way for a better developer experience. - -## Migrating from BootstrapVue - -If you are migrating from BootstrapVue, please refer to our [migration guide](/docs/migration-guide) - -## Contribute and Support 🙌 - -This project is in the **late stages of alpha version**. While most features are functioning as expected, you may still encounter some issues. Your contributions at this stage can be particularly impactful in shaping the final product. If you're interested in contributing, here's how you can help: - -- submit an [issue](https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues) -- or better, a [pull request](https://github.com/bootstrap-vue-next/bootstrap-vue-next/pulls) - -Read our [Contribution Guide](https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/main/CONTRIBUTING.md) on how to start helping. - -## Install - -### Installation - Vue.js - -- First install the package - - - - - - - -```bash -pnpm add bootstrap bootstrap-vue-next -``` - - - - - - - - -```bash -bun add bootstrap bootstrap-vue-next -``` - - - - - - - - -```bash -yarn add bootstrap bootstrap-vue-next -``` - - - - - - - - -```bash -npm i bootstrap bootstrap-vue-next -``` - - - - - - - - - -```typescript -// main.js/ts -import {createApp} from 'vue' -import {createBootstrap} from 'bootstrap-vue-next' - -// Add the necessary CSS -import 'bootstrap/dist/css/bootstrap.css' -import 'bootstrap-vue-next/dist/bootstrap-vue-next.css' - -const app = createApp(App) -app.use(createBootstrap()) // Important -app.mount('#app') -``` - - - -Now, you can begin importing and using components - -#### Automatic Registering of Components - -To have components automatically registered **and** tree-shaken, we recommend [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components). Read their docs for additional details. This is in addition to the above installation steps. We supply a resolver - - - - - - - -```bash -pnpm add unplugin-vue-components -D -``` - - - - - - - - -```bash -bun add unplugin-vue-components -D -``` - - - - - - - - -```bash -yarn add unplugin-vue-components -D -``` - - - - - - - - -```bash -npm i unplugin-vue-components -D -``` - - - - - - - -The following is an example of a basic `vite.config.js/ts`. All you need to do is add **Components** to the Vite **plugins** option, with the additional imports: - - - -```ts -// vite.config.js/ts -import {defineConfig} from 'vite' -import vue from '@vitejs/plugin-vue' -import Components from 'unplugin-vue-components/vite' -import {BootstrapVueNextResolver} from 'bootstrap-vue-next' - -export default defineConfig({ - plugins: [ - vue(), - Components({ - resolvers: [BootstrapVueNextResolver()], - }), - ], -}) -``` - - - - -The resolver import is from `bootstrap-vue-next`, not `unplugin-vue-components` - - -##### Aliasing - -With the `BootstrapVueNextResolver` we also have an option for aliasing components like so: - -```ts -import {Components} from 'unplugin-vue-components' -import {BootstrapVueNextResolver} from 'bootstrap-vue-next' - -Components({ - resolvers: [ - BootstrapVueNextResolver({ - aliases: { - BInput: 'BFormInput', - }, - }), - ], -}) -``` - -### Installation - Nuxt.js 3 - -In your Nuxt3 application, install the necessary packages for `bootstrap-vue-next`. - - - - - - - -```bash -pnpm add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt -D -``` - - - - - - - - -```bash -bun add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt -D -``` - - - - - - - - -```bash -yarn add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt -D -``` - - - - - - - - -```bash -npm i bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt -D -``` - - - - - - - -Open your `nuxt.config.js/ts` file and configure your application to use `bootstrap-vue-next`. The components will be imported automatically as needed. - - - -```ts -// nuxt.config.js/ts -export default defineNuxtConfig({ - modules: ['@bootstrap-vue-next/nuxt'], - css: ['bootstrap/dist/css/bootstrap.min.css'], -}) -``` - - - -Enjoy it in your app without manual imports, and automatic tree-shaking. - - - -```vue - - - -``` - - - -You can customize the options with the bootstrapVueNext key in your nuxt.config. - - - -```ts -// nuxt.config.js/ts -export default defineNuxtConfig({ - modules: ['@bootstrap-vue-next/nuxt'], - bootstrapVueNext: { - composables: true, // Will include all composables - // composables: {useBreadcrumb: true, useColorMode: true, all: false}, // Will include only useBreadcrumb & useColorMode - // composables: {useBreadcrumb: false, useColorMode: false, all: true} // Will include everything except useBreadcrumb & useColorMode - directives: {all: true}, // Will include all directives - css: true, // Will include the module's CSS. If set to false, you can add the CSS manually in the 'css' property below - }, - css: [ - // 'bootstrap/dist/css/bootstrap.min.css' // Not necessary if `css: true` - ], -}) -``` - - - -This is mainly for the purpose of naming conflicts with other imports. It should not effect tree-shaking - -### Installation - TypeScript - -This package uses optional peer dependencies to generate type definitions for enhanced functionality. These dependencies are not installed by default to avoid unnecessary bloat in projects that don’t require these features. However, if you want full type support, you need to manually install the required packages. - - - - - - - -```bash -pnpm add -D @floating-ui/vue @vueuse/core vue-router -``` - - - - - - - - -```bash -bun add -D @floating-ui/vue @vueuse/core vue-router -``` - - - - - - - - -```bash -yarn add -D @floating-ui/vue @vueuse/core vue-router -``` - - - - - - - - -```bash -npm i -D @floating-ui/vue @vueuse/core vue-router -``` - - - - - - - -### Installation - CDN - -BootstrapVueNext is available through `jsdelivr`. You can add the package by using the following - - - -```html - - -``` - - - -- **NOTE** Do not forget to set the version! - - -Links should be loaded after Bootstrap and Vue - - -Alternatively the ESM package is available as well - - - -```html - -``` - - - -## Tree-shake CSS - -If you are using one of the preferred installation methods, JS will be tree-shaken by default. The one thing we are not able to do automatically is optimize CSS. Methods like PurgeCSS are not ideal because of a limitation with the dynamic nature of class renderings and Vue (Problematic code like: `[btn-${props.variant}]: props.variant !== undefined`). With that being said, BootstrapVueNext does not handle CSS imports from Bootstrap, we only add some additional CSS ourselves. So, using a method such as [Lean Sass Imports](https://getbootstrap.com/docs/5.3/customize/optimize/#lean-sass-imports) from the Bootstrap documentation is likely the best way to achieve the tiniest possible application size. Though it is not automatic, it should prove the safest bet for minifying your application. - -### Tree-shake JS plugins - -`createBootstrap` is a simple utility that provides everything that is required for the library to work. However, some plugins may not be needed. -One could individually import each needed plugin, they are all appended with `Plugin` (`toastPlugin`, `breadcrumbPlugin`, etc). So, one could pick and choose what is needed -Practically the `createBootstrap` plugin is ~20kb gzipped with `toast` and `modalController` accounting for the majority. Use this if you really want the tiniest possible size. - - - -## Comparison with BootstrapVue - -BootstrapVue is the parent project for which this is based on. We consider BootstrapVue as the best implementation of Bootstrap `v4`. We strive for a full compatibility list for BootstrapVue. However, due to the nature of the rewrite, some features may be missing or changed. If anyone has spotted a missing compatibility feature, we request that you submit a GitHub issue or contribute to the [parity report](https://github.com/bootstrap-vue-next/bootstrap-vue-next/blob/main/CONTRIBUTING.md#help-verify-bootstrapvue-and-bootstrap-v5-parity). - -If you are migrating from BootstrapVue, please refer to our [migration guide](/docs/migration-guide) - - diff --git a/apps/docs/src/docs/components.md b/apps/docs/src/docs/components.md deleted file mode 100644 index 0c2334f15..000000000 --- a/apps/docs/src/docs/components.md +++ /dev/null @@ -1,212 +0,0 @@ -# Components - Table of Contents - -
- -BootstrapVueNext components list. - -
- - - - diff --git a/apps/docs/src/docs/components/_options.md b/apps/docs/src/docs/components/_options.md deleted file mode 100644 index d76f66463..000000000 --- a/apps/docs/src/docs/components/_options.md +++ /dev/null @@ -1,46 +0,0 @@ -# Options - -## Options Property - -`options` can be an array of strings or objects, or a key-value object. Available fields: - -- **`value`** The selected value which will be set on `v-model` -- **`disabled`** Disables item for selection -- **`text`** Display text - -`value` can be a string, number, or simple object. Avoid using complex types in values. - -::: info NOTE -The BootstrapVue field `html` on the `options` object has been deprecated. See our -[Migration Guide](/docs/migration-guide/#v-html) for details. -::: - -### Options as an array - -<<< FRAGMENT ./demo/OptionsArray.ts#snippet{ts} - -If an array entry is a string, it will be used for both the generated `value` and `text` fields. - -You can mix using strings and [objects](#options-as-an-array-of-objects) in the array. - -Internally, BootstrapVueNext will convert the above array to the following array (the -[array of objects](#options-as-an-array-of-objects)) format: - -<<< FRAGMENT ./demo/OptionsObjectArray.ts#snippet{ts} - -### Options as an array of objects - -<<< FRAGMENT ./demo/OptionsObjectArrayRaw.ts#snippet{ts} - -If `value` is missing, then `text` will be used as both the `value` and `text` fields. - -Internally, BootstrapVueNext will convert the above array to the following array (the -[array of objects](#options-as-an-array-of-objects)) format: - -<<< FRAGMENT ./demo/OptionsObjectArrayNormalized.ts#snippet{ts} - -### Changing the option field names - -If you want to customize the field property names (for example using `name` field for display -`text`) you can easily change them by setting the `text-field`, `value-field`, and -`disabled-field` props to a string that contains the property name you would like to use: diff --git a/apps/docs/src/docs/components/accordion.md b/apps/docs/src/docs/components/accordion.md deleted file mode 100644 index d67c86fca..000000000 --- a/apps/docs/src/docs/components/accordion.md +++ /dev/null @@ -1,47 +0,0 @@ -# Accordion - - - -Build vertically collapsing accordions in combination with `BCollapse` component. - - - -## How it works - -The `BAccordionItem` uses the `BCollapse` component internally to make it collapsible. To render an accordion that’s expanded, add the `visible` property on the `BAccordionItem` component. - - - -The animation effect of this component is dependent on the prefers-reduced-motion media query. See the [reduced motion section of bootstrap's accessibility documentation](https://getbootstrap.com/docs/5.3/getting-started/accessibility/#reduced-motion). - - - -## Example - -Click the accordions below to expand/collapse the accordion content. - -<<< DEMO ./demo/AccordionOverview.vue#template{vue-html} - -### Flush - -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. - -<<< DEMO ./demo/AccordionFlush.vue#template{vue-html} - -### Always open - -Add `free` property to make accordion items stay open when another item is opened. - -<<< DEMO ./demo/AccordionFree.vue#template{vue-html} - - - - diff --git a/apps/docs/src/docs/components/alert.md b/apps/docs/src/docs/components/alert.md deleted file mode 100644 index fdb8c3fb1..000000000 --- a/apps/docs/src/docs/components/alert.md +++ /dev/null @@ -1,90 +0,0 @@ -# Alert - - - -Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. - - - -## Overview - -Alerts are available for any length of text, as well as an optional dismiss button (and optional auto-dismissing). - -<<< DEMO ./demo/AlertOverview.vue - -### `v-model` Support - -You can use the `v-model` directive to create two-way data bindings as in `v-model="showDismissibleAlert"`. This is useful when you use dismissible because when the user closes the alert, your variable will be updated. The v-model prop accepts boolean `true` or `false` to show and hide the alert respectively. It can also be set to a positive integer (representing seconds) to create a self-dismissing alert. See the [Auto Dismissing Alerts](#auto-dismissing-alerts) section below for details. `:model-value="true"` can be used to unconditionally show the alert, as the `show` prop did in `bootstrap-vue`. See the -[migration guide](/docs/migration-guide#balert) for details. - -## Contextual Variants - -For proper styling of `BAlert`, use one of the four required contextual variants by setting the `variant` prop to one of the following: `info`, `success`, `warning`, or `danger`. The default is `info`. - -<<< DEMO ./demo/AlertVariants.vue#template{vue-html} - -### Conveying Meaning to Assistive Technologies - -Using color variants to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class. - -## Additional Content Inside Alerts - -`BAlerts` can also contain additional HTML elements like headings and paragraphs, which will be styled with the appropriate color matching the variant. - -<<< DEMO ./demo/AlertContent.vue#template{vue-html} - -### Color of Links Within Alerts - -Use the `.alert-link` utility CSS class to quickly provide matching colored links within any alert. Use on `` or `BLink`. - -<<< DEMO ./demo/AlertLinkColors.vue#template{vue-html} - -## Dismissible Alerts - -Using the `dismissible` prop it is possible to dismiss any `BAlert` inline. The alert must be v-modeled to a reactive value. This will add a close `X` button. Use the `dismiss-label` prop to change the hidden aria-label text associated with the dismiss button. - -<<< DEMO ./demo/AlertDismissible.vue - -### Auto-dismissing Alerts - -To create a `BAlert` that dismisses automatically after a specified duration, set the `v-model` to the number of **milliseconds** you want the `BAlert` to remain visible. By default, the timer updates using `requestAnimationFrame`, which triggers an update approximately every second. Timed Alerts automatically pause when hovered over with a mouse, but you can disable this behavior using the `noHoverPause` prop. Ensure that the `v-model` value is an integer representing milliseconds. Any change to the `v-model` will reset the timer. - -The **interval** prop determines how frequently the timer updates. While the default is `requestAnimationFrame`, you can set a custom interval. Negative values for either `v-model` or `interval` will stop the timer. If the `v-model` value does not divide evenly by the interval, the timer will continue to the nearest interval. For example, a `v-model` of 5400 ms with an interval of 1000 ms will run for 6000 ms. To avoid this, choose an interval that divides evenly into the `v-model`, such as 540 ms or 1080 ms. - -<<< DEMO ./demo/AlertAutoDismissible.vue - -## Fading alerts - -Use the `fade` prop to enable animation. By default alerts are not animated. - -Note that `bootstrap-vue-next` uses Vue's transitions for this animation rather than bootstrap's `.fade` class. - -<<< DEMO ./demo/AlertFade.vue - -## Exposed functions - -The BAlert exposes four functions to manipulate the state of an active timer: `pause(), resume(), restart() & stop()`. These are accessed through the [template ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs). - -1. Pause: pauses the active timer at the time that it is currently at -2. Resume: resumes the active timer at the place saved by `pause()` -3. Restart: restarts the timer back to its v-model saved spot. Ex: v-model="5400" and restarted at 3200ms will restart back to 5400ms -4. Stop: stops the timer. Unlike pause, it sets the value to 0ms and cannot be `resumed`, only `restarted` - -<<< DEMO ./demo/AlertFunctions.vue - -## Timer Props - -- `Immediate`: Setting this property to `false` will cause a timer to not start immediately upon render. A timer that is not started is not rendered. It must manually be started with `resume()` or `restart()`. Default is `true`. -- `showOnPause`: Setting this property to `false` will override the behavior of showing the Alert when the timer is paused. Default is `true`. - - - - diff --git a/apps/docs/src/docs/components/avatar.md b/apps/docs/src/docs/components/avatar.md deleted file mode 100644 index 7e26b53c5..000000000 --- a/apps/docs/src/docs/components/avatar.md +++ /dev/null @@ -1,260 +0,0 @@ -# Avatar - - - -Avatars are a custom component, and are typically used to display a user profile as a -picture or short text. `BAvatar` provides several props for customizing its -appearance such as color variant and roundness, and optionally supports acting as a button, link, -or a [router link](/docs/reference/router-links). - - - -## Overview - -Avatars are lightweight components, which render inline by default, so that they are vertically -centered beside any adjoining plain text. They also can be used as children of other components. - -<<< DEMO ./demo/AvatarOverview.vue#template{vue-html} - -## Avatar types - -The avatar content can be either an image or short text string. Avatar content defaults -to the [`'person-fill'` icon](<[/docs/icons](https://icons.getbootstrap.com/icons/person-fill/)>) -when no other content is specified. - -You can also supply custom content via the default slot, although you may need to apply additional -styling on the content. - -### Image content - -Use the `src` prop to specify a URL of an image to use as the avatar content. The image should have -an aspect ratio of `1:1` (meaning the width and height should be equal), otherwise image aspect -distortion will occur. The image will be scaled up or down to fit within the avatar's bounding box. - -<<< DEMO ./demo/AvatarImage.vue#template{vue-html} - -**Notes:** - -- When using a module bundler and project relative image URLs, please refer to the - [Image Support](/docs/reference/images) reference section for additional details -- The `src` prop takes precedence over the `text` prop -- If the image fails to load, the avatar will - fall back to the value of the `text` prop. If the `text` props is not - provided, then the default avatar image will be shown. Also, when the image fails to load, the - `img-error` event will be emitted -- [Variant colors](#variants) when using images not normally visible, unless the image fails load. - The variant will affect the focus styling when the image avatar is also an - [actionable avatar](#actionable-avatars) -- If neither the `text` or `src` prop is provided _and_ the [default slot](#custom-content) - has no content, then the `person-fill` image will be used - -### Text content - -You can specify a short string as the content of an avatar via the `text` prop. The string should be -short (1 to 3 characters), and will be transformed via CSS to be all uppercase. The font size will -be scaled relative to the [`size` prop setting](#sizing). - -<<< DEMO ./demo/AvatarText.vue#template{vue-html} - -### Custom content - -Use the `default` slot to render custom content in the avatar, for finer grained control of its -appearance, or if using custom icons or SVGs e.g.: - -<<< DEMO ./demo/AvatarCustom.vue#template{vue-html} - -**Notes:** - -- The default slot takes precedence over the `text` or `src` props. -- The default slot content will be wrapped in a `` element to ensure proper centering. -- You may need additional styling applied to the custom content to compensate for the - [shape of avatar component](#rounding). - -## Styling - -### Variants - -Use the `variant` prop to specify one of Bootstrap theme variant colors. The default variant is -`secondary`. - -<<< DEMO ./demo/AvatarVariants.vue#template{vue-html} - -When displaying text inside the avatar, text colors are calculated based on the `variant` prop. The result is either `light` or `dark`. You can override the calculated text color by manually specifying the `bg-variant` and `text-variant` props. Note that -`bg-variant` and `text-variant` take precedence over `variant`. See the -[Color Variant Reference](/docs/reference/color-variants#variant-interactions) for details. - -<<< DEMO ./demo/AvatarVariantOverride.vue#template{vue-html} - -### Sizing - -By default, avatars are sized to `2.5em` (which is relative to the current font size). You can -change the size of the avatar by changing the current font size, or use the prop `size` to specify -an explicit size. The sizes `sm`, `md` and `lg` default to `1.5em`, `2.5em` and `3.5em`. Numbers get -converted to pixel values. Any other value _must_ include the units (such as `px`, `em`, or `rem`). - -<<< DEMO ./demo/AvatarSize.vue#template{vue-html} - -**Note:** Avatars are _always_ rendered with an aspect ratio of `1:1`. - -### Square - -Prefer a square avatar? simply set the `square` prop to `true`. - -<<< DEMO ./demo/AvatarSquare.vue#template{vue-html} - -### Rounding - -`BAvatar` renders with a circular border radius. You can change the rounding by setting the prop -`rounded` to any of the values of [`RadiusElement`](/docs/types#radiuselement). -When set to `true` (or the empty string `''`), it uses the Bootstrap default of medium rounding. -When set to `circle`, it uses a border radius of 50%, resulting in a circle. -Rounding specific edges is accomplished via the `rounded-top`, `rounded-bottom`, `rounded-start` and -`rounded-end` props. See the [migration guide](/docs/migration-guide#BAvatar) for differences -from `bootstrap-vue` - -<<< DEMO ./demo/AvatarRounding.vue#template{vue-html} - -**Notes:** - -- The `square` prop takes precedence over the `rounded` prop -- Rather than `square` prop, you can set the `rounded` prop to the string `'0'` to - achieve a square avatar - -### Alignment - -By default, `BAvatar` will be vertically centered with its adjoining content. In some cases you -may want to alter the alignment, such as ensuring that a text-only avatar aligns its text with the -adjoining text. Simply set a [vertical alignment utility](/docs/reference/utility-classes) class on -the component, such as `` or -``, etc. - -## Actionable avatars - -Easily create avatars that respond to clicks. Actionable avatars will appear in the document tab sequence, -and are accessible for both screen reader and keyboard-only users. - -Image avatars, when actionable, employ a basic scale transform on the image when hovered. - -### Button - -Want to trigger the opening of a modal or trigger an action? Set the `button` prop to instruct -`BAvatar` to render as a `