diff --git a/.github/.git_commit_msg.txt b/.github/.git_commit_msg.txt new file mode 100644 index 0000000..e708aef --- /dev/null +++ b/.github/.git_commit_msg.txt @@ -0,0 +1,32 @@ + +# ------------------------ >8 ------------------------ +# |<---- Using a Maximum Of 50 Characters ---->| Hard limit to 72 -->| +# : +# +# +# +# fixes # +# +# ---------------------------------------------------- +# +# can be +# feat (new feature) +# fix (bug fix) +# docs (documentation only) +# refactor (refactoring production code) +# style (formatting, missing semicolons, etc. no code change) +# test (adding or refactoring tests; no production code change) +# chore (updating npm scripts etc. no production code change) +# revert (revert a commit +# must be the reverted commit's title +# must contain "This reverts commit .") +# +# Remember to +# Not capitalize the subject line +# Use the imperative mood in the subject line +# Do not end the subject line with a period +# Separate subject from body with a blank line (comments don't count) +# Use the body to explain what and why vs. how +# +# If you can't summarize your changes in a single line, they should +# probably be split into multiple commits diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..b867d98 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,23 @@ +# Vuetify Contributing Guide +Hello and thank you for your interest in helping make Vuetify better. Please take a few moments to review the following guidelines: + +## IMPORTANT INFORMATION +* A detailed guide on how to [develop in Vuetify](https://vuetifyjs.com/getting-started/contributing/) is located in the documentation. +* For general questions, please join [our Discord Community](https://community.vuetifyjs.com/). + +## Reporting Issues +* Issues **not** created with https://issues.vuetifyjs.com/ will be immediately closed. +* The issue list of this repo is **exclusively** for Bug Reports and Feature Requests. +* Bug reproductions should be as **concise** as possible. +* **Search** for your issue, it _may_ have been answered. +* See if the error is **reproduceable** with the latest version. +* If reproduceable, please provide a [Codepen](https://template.vuetifyjs.com) or public repository that can be cloned to produce the expected behavior. It is preferred that you create an initial commit with no changes first, then another one that will cause the issue. +* **Never** comment "+1" or "me too!" on issues without leaving additional information, use the :+1: button in the top right instead. + +## Pull Requests +* Always work on a new branch. Making changes on your fork's `dev` or `master` branch can cause problems. (See [The beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/)) +* Bug fixes should be submitted to the `master` branch. +* New features and breaking changes should be submitted to the `dev` branch. +* Use a descriptive title no more than 64 characters long. This will be used as the commit message when your PR is merged. +* For changes and feature requests, please include an example of what you are trying to solve and an example of the markup. It is preferred that you create an issue first however, as that will allow the team to review your proposal before you start. +* Please reference the issue # that the PR resolves, something like `Fixes #1234` or `Resolves #6458` (See [closing issues using keywords](https://help.github.com/articles/closing-issues-using-keywords/)) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..0702977 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,8 @@ +# These are supported funding model platforms + +github: [johnleider, KaelWD, MajesticPotatoe, yuwu9145] +patreon: vuetify +open_collective: vuetify +ko_fi: # Replace with a single Ko-fi username +tidelift: npm/vuetify +custom: # Replace with a single custom sponsorship URL diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..41bdfb6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,5 @@ +blank_issues_enabled: false +contact_links: + - name: Vuetify Issue Creator + url: https://issues.vuetifyjs.com + about: Create Vuetify issues here. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..c387458 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,28 @@ + + +## Description + + +## Markup: + + + +```vue + +``` diff --git a/.github/actions/download-artifact/action.yml b/.github/actions/download-artifact/action.yml new file mode 100644 index 0000000..92acd2f --- /dev/null +++ b/.github/actions/download-artifact/action.yml @@ -0,0 +1,31 @@ +name: Download artifact +description: Wrapper around GitHub's official action, with additional extraction before download +# https://github.com/actions/upload-artifact/issues/199#issuecomment-1516555821 + +inputs: + name: + description: Artifact name + required: true + path: + description: Destination path + required: false + default: . + +runs: + using: composite + steps: + - name: Download artifacts + uses: actions/download-artifact@v3 + with: + name: ${{ inputs.name }} + path: ${{ inputs.path }} + + - name: Extract artifacts + run: tar -xvf ${{ inputs.name }}.tar + shell: bash + working-directory: ${{ inputs.path }} + + - name: Remove archive + run: rm -f ${{ inputs.name }}.tar + shell: bash + working-directory: ${{ inputs.path }} diff --git a/.github/actions/download-locales/action.yml b/.github/actions/download-locales/action.yml new file mode 100644 index 0000000..c1422d2 --- /dev/null +++ b/.github/actions/download-locales/action.yml @@ -0,0 +1,42 @@ +name: Download translations +description: Download translations from Crowdin + +inputs: + crowdin-branch: + description: 'Crowdin branch name' + required: false + default: 'v3' + +runs: + using: composite + steps: + - name: Download eo-UY + uses: crowdin/github-action@v1.19.0 + with: + download_language: eo + config: crowdin.yml + upload_sources: false + download_translations: true + push_translations: false + export_only_approved: false + crowdin_branch_name: ${{ inputs.crowdin-branch }} + - name: Download ja-JP + uses: crowdin/github-action@v1.19.0 + with: + download_language: ja + config: crowdin.yml + upload_sources: false + download_translations: true + push_translations: false + export_only_approved: false + crowdin_branch_name: ${{ inputs.crowdin-branch }} + - name: Download zh-CN + uses: crowdin/github-action@v1.19.0 + with: + download_language: zh-CN + config: crowdin.yml + upload_sources: false + download_translations: true + push_translations: false + export_only_approved: false + crowdin_branch_name: ${{ inputs.crowdin-branch }} diff --git a/.github/actions/nightly-release/action.yml b/.github/actions/nightly-release/action.yml new file mode 100644 index 0000000..fe8d525 --- /dev/null +++ b/.github/actions/nightly-release/action.yml @@ -0,0 +1,69 @@ +name: Nightly Release +description: Automatically release nightly builds + +inputs: + checkout-repo: + description: 'Repository to checkout' + required: true + checkout-ref: + description: 'Ref to checkout' + required: true + release-id: + description: 'Release ID' + required: true + npm-tag: + description: 'NPM tag' + required: true + npm-token: + description: 'NPM token' + required: true + +outputs: + full-version: + description: 'Full version' + value: ${{ steps.get-version.outputs.full-version }} + +runs: + using: composite + steps: + - run: | + git config --global user.email "actions@github.com" + git config --global user.name "GitHub Actions" + shell: bash + - uses: actions/checkout@v4 + with: + repository: ${{ inputs.checkout-repo }} + ref: ${{ inputs.checkout-ref }} + fetch-depth: 0 + - uses: ./.github/actions/yarn-install + - run: >- + node -e " + const json = require('./lerna.json'); + delete json.command.publish.allowBranch; + fs.writeFileSync('./lerna.json', JSON.stringify(json, null, 2))" + shell: bash + - id: get-version + run: echo "full-version=$(node -e "console.log(require('./lerna.json').version)")-${{ inputs.release-id }}" >> $GITHUB_OUTPUT + shell: bash + - run: yarn lerna version ${{ steps.get-version.outputs.full-version }} --no-push --no-commit-hooks --force-publish --yes + shell: bash + - run: yarn conventional-changelog -p angular --outfile ./packages/vuetify/CHANGELOG.md -r 2 + shell: bash + - run: >- + node -e "fs.writeFileSync( + './package.json', + JSON.stringify({ ...require('./package.json'), name: '@vuetify/nightly' }, null, 2) + )" + shell: bash + working-directory: ./packages/vuetify + - run: yarn lerna run build --scope @vuetify/nightly + shell: bash + - run: yarn lerna run build --scope @vuetify/api-generator + shell: bash + - name: NPM Release + run: | + npm config set //registry.npmjs.org/:_authToken ${NPM_API_KEY:?} + npm publish ./packages/vuetify --tag ${{ inputs.npm-tag }} --access public + shell: bash + env: + NPM_API_KEY: ${{ inputs.npm-token }} diff --git a/.github/actions/upload-artifact/action.yml b/.github/actions/upload-artifact/action.yml new file mode 100644 index 0000000..5b0d1de --- /dev/null +++ b/.github/actions/upload-artifact/action.yml @@ -0,0 +1,46 @@ +name: Upload artifact +description: Wrapper around GitHub's official action, with additional archiving before upload +# https://github.com/actions/upload-artifact/issues/199#issuecomment-1516555821 + +inputs: + name: + description: Artifact name + required: true + path: + description: A file, directory or wildcard pattern that describes what to upload + required: true + if-no-files-found: + description: > + The desired behavior if no files are found using the provided path. + Available Options: + warn: Output a warning but do not fail the action + error: Fail the action with an error message + ignore: Do not output any warnings or errors, the action does not fail + required: false + default: warn + retention-days: + description: > + Duration after which artifact will expire in days. 0 means using default retention. + Minimum 1 day. + Maximum 90 days unless changed from the repository settings page. + required: false + default: '0' + +runs: + using: composite + steps: + - name: Archive artifacts + run: tar -cvf ${{ inputs.name }}.tar ${{ inputs.path }} + shell: bash + + - name: Upload artifacts + uses: actions/upload-artifact@v3 + with: + if-no-files-found: ${{ inputs.if-no-files-found }} + name: ${{ inputs.name }} + path: ${{ inputs.name }}.tar + retention-days: ${{ inputs.retention-days }} + + - name: Remove archive + run: rm -f ${{ inputs.name }}.tar + shell: bash diff --git a/.github/actions/yarn-install/action.yml b/.github/actions/yarn-install/action.yml new file mode 100644 index 0000000..4148990 --- /dev/null +++ b/.github/actions/yarn-install/action.yml @@ -0,0 +1,17 @@ +name: Yarn install +description: Restore node_modules and cache, then run yarn install + +runs: + using: composite + steps: + - uses: actions/cache@v4 + with: + path: | + node_modules + **/node_modules + /home/runner/.config/yarn + /home/runner/.cache/yarn + /home/runner/.cache/Cypress + key: yarn-${{ runner.os }}-${{ hashFiles('./yarn.lock') }} + - run: yarn --frozen-lockfile --non-interactive + shell: bash diff --git a/.github/issue-close-app.yml b/.github/issue-close-app.yml new file mode 100644 index 0000000..2448103 --- /dev/null +++ b/.github/issue-close-app.yml @@ -0,0 +1,13 @@ +comment: "Please only create issues with the provided [issue creator](https://issues.vuetifyjs.com). In the boilerplate for creating an issue, it explains that any ticket made without this will be automatically closed. For general questions, please join [the Discord chat room](https://community.vuetifyjs.com). You can also check [reddit](https://www.reddit.com/r/vuetifyjs/) or [stackoverflow](https://stackoverflow.com/questions/tagged/vuetify.js). Thank you." +issueConfigs: +- content: + - "" +- content: + - "" +label: "invalid" +exception: + - "johnleider" + - "KaelWD" + - "MajesticPotatoe" + - "jacekkarczmarczyk" + - "nekosaur" diff --git a/.github/lock.yml b/.github/lock.yml new file mode 100644 index 0000000..e9905d6 --- /dev/null +++ b/.github/lock.yml @@ -0,0 +1,6 @@ +daysUntilLock: 365 +lockComment: false + +pulls: + daysUntilLock: 30 + exemptLabels: ['S: on hold', 'S: work in progress'] diff --git a/.github/semantic.yml b/.github/semantic.yml new file mode 100644 index 0000000..fd160e5 --- /dev/null +++ b/.github/semantic.yml @@ -0,0 +1 @@ +titleOnly: true diff --git a/.github/sponsors.yml b/.github/sponsors.yml new file mode 100644 index 0000000..0d6ea71 --- /dev/null +++ b/.github/sponsors.yml @@ -0,0 +1,5 @@ +- label: 'P: sponsor' + members: + +- label: 'P: elite sponsor' + members: diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..9ee9cbc --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,168 @@ +name: CI +on: [push, pull_request] +concurrency: + group: ci-${{ github.ref }} + cancel-in-progress: true + +env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }} + CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + +jobs: + pre_job: + runs-on: ubuntu-latest + outputs: + should_skip: ${{ steps.skip_check.outputs.should_skip }} + steps: + - id: skip_check + if: ${{ !startswith(github.ref, 'refs/tags/v') && github.ref != 'refs/heads/master' }} + uses: fkirc/skip-duplicate-actions@master + with: + skip_after_successful_duplicate: 'true' + concurrent_skipping: same_content + do_not_skip: '["pull_request", "workflow_dispatch", "schedule"]' + + build-vuetify: + name: Build vuetify + needs: pre_job + if: needs.pre_job.outputs.should_skip != 'true' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/yarn-install + - run: yarn build vuetify + - uses: ./.github/actions/upload-artifact + with: + name: vuetify-dist + path: > + packages/vuetify/dist + packages/vuetify/lib + + lint: + name: Lint + needs: [pre_job, build-vuetify] + if: needs.pre_job.outputs.should_skip != 'true' + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + scopes: ['--scope vuetify --scope @vuetify/api-generator', '--scope vuetifyjs.com'] + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/download-artifact + with: + name: vuetify-dist + - uses: ./.github/actions/yarn-install + - run: yarn lerna run lint $SCOPES + env: + SCOPES: ${{ matrix.scopes }} + + test-jest: + name: Test (Jest) + needs: pre_job + if: needs.pre_job.outputs.should_skip != 'true' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/yarn-install + - run: yarn run test:coverage -i + working-directory: ./packages/vuetify + - uses: codecov/codecov-action@v4 + + test-cypress: + name: Test (Cypress) + needs: pre_job + if: needs.pre_job.outputs.should_skip != 'true' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/yarn-install + - run: yarn cy:run --record --parallel --ci-build-id $GITHUB_RUN_ID + if: ${{ !startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs' }} + working-directory: ./packages/vuetify + env: + CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} + - run: yarn cy:run + if: ${{ !startswith(github.ref, 'refs/tags/v') && github.repository_owner != 'vuetifyjs' }} + working-directory: ./packages/vuetify + - uses: actions/upload-artifact@v3 + if: failure() + with: + name: cypress-screenshots + path: ./packages/vuetify/cypress/screenshots/ + if-no-files-found: ignore + + deploy: + needs: [lint, test-jest, test-cypress, build-vuetify] + runs-on: ubuntu-latest + if: github.event_name == 'push' && startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs' + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - uses: ./.github/actions/download-artifact + with: + name: vuetify-dist + - uses: ./.github/actions/yarn-install + - run: yarn build api + - run: echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV + - name: NPM Release + run: bash scripts/deploy.sh + env: + NPM_API_KEY: ${{ secrets.NPM_TOKEN }} + RELEASE_TAG: ${{ env.RELEASE_TAG }} + - name: GitHub release + id: create_release + run: yarn conventional-github-releaser -p vuetify + env: + DEBUG: '*' + CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + build-docs: + name: Build docs + needs: [pre_job, build-vuetify] + if: needs.pre_job.outputs.should_skip != 'true' && github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next') + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/download-artifact + with: + name: vuetify-dist + - uses: ./.github/actions/yarn-install + - uses: ./.github/actions/download-locales + - run: yarn build api + - run: yarn build docs + env: + NODE_OPTIONS: --max-old-space-size=4096 + VITE_COSMIC_2_BUCKET_SLUG: ${{ secrets.COSMIC_2_BUCKET_SLUG }} + VITE_COSMIC_2_BUCKET_READ_KEY: ${{ secrets.COSMIC_2_BUCKET_READ_KEY }} + VITE_COSMIC_BUCKET_SLUG: ${{ secrets.COSMIC_BUCKET_SLUG }} + VITE_COSMIC_BUCKET_READ_KEY: ${{ secrets.COSMIC_BUCKET_READ_KEY }} + VITE_COSMIC_BUCKET_SLUG_STORE: ${{ secrets.COSMIC_BUCKET_SLUG_STORE }} + VITE_COSMIC_BUCKET_READ_KEY_STORE: ${{ secrets.COSMIC_BUCKET_READ_KEY_STORE }} + VITE_EMAILJS_PUBLIC_KEY: ${{ secrets.EMAILJS_PUBLIC_KEY }} + VITE_EMAILJS_SERVICE_ID: ${{ secrets.EMAILJS_SERVICE_ID }} + VITE_EMAILJS_TEMPLATE_ID: ${{ secrets.EMAILJS_TEMPLATE_ID }} + VITE_API_SERVER_URL: ${{ secrets.API_SERVER_URL }} + VITE_GITHUB_SHA: ${{ github.sha }} + - uses: ./.github/actions/upload-artifact + with: + name: docs-dist + path: packages/docs/dist + + publish-docs: + needs: [lint, test-jest, build-docs] + runs-on: ubuntu-latest + if: github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next') + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/download-artifact + with: + name: docs-dist + - uses: ./.github/actions/yarn-install + - run: yarn global add vercel + - run: node scripts/deploy-and-alias.js ${{ github.ref }} + env: + NOW_TOKEN: ${{ secrets.NOW_TOKEN }} diff --git a/.github/workflows/close-issue.yml b/.github/workflows/close-issue.yml new file mode 100644 index 0000000..1122540 --- /dev/null +++ b/.github/workflows/close-issue.yml @@ -0,0 +1,20 @@ +name: Close issues +on: + push: + branches: + - dev + - next + - v2-stable + - v2-dev + +env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + +jobs: + close: + runs-on: ubuntu-latest + if: github.repository_owner == 'vuetifyjs' + steps: + - uses: vuetifyjs/close-action@master + with: + token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/crowdin-uploads.yml b/.github/workflows/crowdin-uploads.yml new file mode 100644 index 0000000..01e839d --- /dev/null +++ b/.github/workflows/crowdin-uploads.yml @@ -0,0 +1,35 @@ +name: Crowdin Uploads +concurrency: + group: crowdin-${{ github.ref }} + cancel-in-progress: true + +on: + push: + branches: + - 'master' + paths: + - 'packages/api-generator/src/locale/en/**' + - 'packages/docs/src/i18n/messages/en.json' + - 'packages/docs/src/pages/en/**' + - '.github/workflows/**' + +env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }} + CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }} + CROWDIN_BRANCH: v3 + +jobs: + upload-to-crowdin: + runs-on: ubuntu-latest + + steps: + + - name: Checkout + uses: actions/checkout@v4 + + - name: Upload + uses: crowdin/github-action@v1.19.0 + with: + config: crowdin.yml + crowdin_branch_name: ${{ env.CROWDIN_BRANCH }} diff --git a/.github/workflows/nightly-pr.yml b/.github/workflows/nightly-pr.yml new file mode 100644 index 0000000..b55f165 --- /dev/null +++ b/.github/workflows/nightly-pr.yml @@ -0,0 +1,47 @@ +name: Nightly Release +on: + workflow_dispatch: + inputs: + pr: + description: 'Pull Request number' + required: false + type: string + +jobs: + deploy: + runs-on: ubuntu-latest + if: ${{ github.repository_owner == 'vuetifyjs' }} + steps: + - uses: actions/checkout@v4 + - uses: actions/github-script@v7 + with: + script: | + const pr = await github.rest.pulls.get({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: ${{ github.event.inputs.pr }} + }) + core.exportVariable('CHECKOUT_REPO', pr.data.head.repo.full_name) + core.exportVariable('CHECKOUT_REF', pr.data.head.ref) + core.exportVariable('SHORT_SHA', pr.data.head.sha.slice(0, 7)) + - id: nightly-release + uses: ./.github/actions/nightly-release + with: + checkout-repo: ${{ env.CHECKOUT_REPO }} + checkout-ref: ${{ env.CHECKOUT_REF }} + release-id: pr-${{ github.event.inputs.pr }}.${{ env.SHORT_SHA }} + npm-tag: pr + npm-token: ${{ secrets.NPM_TOKEN }} + - uses: actions/checkout@v4 + - uses: actions/github-script@v7 + with: + script: | + const fullVersion = process.env.FULL_VERSION + const pr = await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: ${{ github.event.inputs.pr }}, + body: `:rocket: Nightly release published to [@vuetify/nightly@${fullVersion}](https://www.npmjs.com/package/@vuetify/nightly/v/${fullVersion}).` + }) + env: + FULL_VERSION: ${{ steps.nightly-release.outputs.full-version }} diff --git a/.github/workflows/nightly-schedule.yml b/.github/workflows/nightly-schedule.yml new file mode 100644 index 0000000..2429f33 --- /dev/null +++ b/.github/workflows/nightly-schedule.yml @@ -0,0 +1,81 @@ +name: Scheduled Nightly Release +on: + workflow_dispatch: + schedule: + - cron: '0 12 * * *' # 1200 UTC + +jobs: + deploy: + runs-on: ubuntu-latest + if: ${{ github.repository_owner == 'vuetifyjs' }} + strategy: + max-parallel: 1 + fail-fast: false + matrix: + branch: ['master', 'dev', 'next', 'v2-stable', 'v2-dev'] + include: + - branch: 'master' + tag: 'latest' + - branch: 'dev' + tag: 'dev' + - branch: 'next' + tag: 'next' + - branch: 'v2-stable' + tag: 'v2-stable' + - branch: 'v2-dev' + tag: 'v2-dev' + steps: + - uses: actions/checkout@v4 + with: + ref: ${{ matrix.branch }} + fetch-depth: 0 + - run: | + last=$(git show -s --format=%ct HEAD) + now=$(date +%s) + diff=$(($now - $last)) + if [ $diff -gt 86400 ]; then + echo "Last commit was more than 24 hours ago, skipping release" + exit 1 + fi + - run: echo "RELEASE_ID=$(date +'%Y-%m-%d')" >> $GITHUB_ENV + - uses: ./.github/actions/nightly-release + with: + checkout-repo: ${{ github.repository }} + checkout-ref: ${{ matrix.branch }} + release-id: ${{ matrix.branch }}.${{ env.RELEASE_ID }} + npm-tag: ${{ matrix.tag }} + npm-token: ${{ secrets.NPM_TOKEN }} + - uses: actions/checkout@v4 + + percy: + name: Visual regression tests + runs-on: ubuntu-latest + if: ${{ github.repository_owner == 'vuetifyjs' }} + steps: + - uses: actions/checkout@v4 + with: + ref: master + fetch-depth: 0 + - run: | + last=$(git show -s --format=%ct HEAD) + now=$(date +%s) + diff=$(($now - $last)) + if [ $diff -gt 86400 ]; then + echo "Last commit was more than 24 hours ago, skipping tests" + exit 1 + fi + - uses: ./.github/actions/yarn-install + - run: echo "COMMIT=$(git rev-parse HEAD)" >> $GITHUB_ENV + - run: yarn cy:run + working-directory: ./packages/vuetify + env: + PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} + PERCY_BRANCH: master + PERCY_TARGET_BRANCH: master + PERCY_COMMIT: ${{ env.COMMIT }} + - uses: actions/upload-artifact@v3 + if: failure() + with: + name: cypress-screenshots + path: ./packages/vuetify/cypress/screenshots/ + if-no-files-found: ignore diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 0000000..2b7abfd --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,19 @@ +name: 'Close stale issues' +on: + workflow_dispatch: + schedule: + - cron: '08 11 * * *' + +jobs: + stale: + runs-on: ubuntu-latest + steps: + - uses: actions/stale@v9 + with: + days-before-stale: 180 + days-before-close: 14 + only-labels: 'S: triage' + stale-issue-label: 'S: stale' + stale-pr-label: 'S: stale' + exempt-all-milestones: true + exempt-draft-pr: true diff --git a/.github/workflows/triage.yml b/.github/workflows/triage.yml new file mode 100644 index 0000000..6b25c9f --- /dev/null +++ b/.github/workflows/triage.yml @@ -0,0 +1,27 @@ +name: Issue triage +on: + issues: + types: [opened, labeled, unlabeled] + +jobs: + triage: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: vuetifyjs/triage-action@master + with: + token: ${{ secrets.GITHUB_TOKEN }} + triageLabel: 'S: triage' + sponsorsFile: '.github/sponsors.yml' + triagedLabels: |- + T: documentation + T: bug + T: enhancement + T: feature + T: question + Epic + duplicate + layer 8 issue + invalid + wontfix + working as intended diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 0000000..be2cda0 --- /dev/null +++ b/.vercelignore @@ -0,0 +1,6 @@ +node_modules +/scripts +/packages/vuetify +/packages/api-generator +/packages/docs/src +!/packages/docs/dist diff --git a/.yarn/releases/yarn-1.19.0.cjs b/.yarn/releases/yarn-1.19.0.cjs new file mode 100644 index 0000000..d73fc8a --- /dev/null +++ b/.yarn/releases/yarn-1.19.0.cjs @@ -0,0 +1,147191 @@ +#!/usr/bin/env node +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // identity function for calling harmony imports with the correct context +/******/ __webpack_require__.i = function(value) { return value; }; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 549); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports) { + +module.exports = require("path"); + +/***/ }), +/* 1 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony export (immutable) */ __webpack_exports__["a"] = __extends; +/* unused harmony export __assign */ +/* unused harmony export __rest */ +/* unused harmony export __decorate */ +/* unused harmony export __param */ +/* unused harmony export __metadata */ +/* unused harmony export __awaiter */ +/* unused harmony export __generator */ +/* unused harmony export __exportStar */ +/* unused harmony export __values */ +/* unused harmony export __read */ +/* unused harmony export __spread */ +/* unused harmony export __await */ +/* unused harmony export __asyncGenerator */ +/* unused harmony export __asyncDelegator */ +/* unused harmony export __asyncValues */ +/* unused harmony export __makeTemplateObject */ +/* unused harmony export __importStar */ +/* unused harmony export __importDefault */ +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ +/* global Reflect, Promise */ + +var extendStatics = function(d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); +}; + +function __extends(d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +} + +var __assign = function() { + __assign = Object.assign || function __assign(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; + } + return t; + } + return __assign.apply(this, arguments); +} + +function __rest(s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) + t[p[i]] = s[p[i]]; + return t; +} + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +function __param(paramIndex, decorator) { + return function (target, key) { decorator(target, key, paramIndex); } +} + +function __metadata(metadataKey, metadataValue) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); +} + +function __awaiter(thisArg, _arguments, P, generator) { + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +} + +function __generator(thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (_) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +} + +function __exportStar(m, exports) { + for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; +} + +function __values(o) { + var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0; + if (m) return m.call(o); + return { + next: function () { + if (o && i >= o.length) o = void 0; + return { value: o && o[i++], done: !o }; + } + }; +} + +function __read(o, n) { + var m = typeof Symbol === "function" && o[Symbol.iterator]; + if (!m) return o; + var i = m.call(o), r, ar = [], e; + try { + while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); + } + catch (error) { e = { error: error }; } + finally { + try { + if (r && !r.done && (m = i["return"])) m.call(i); + } + finally { if (e) throw e.error; } + } + return ar; +} + +function __spread() { + for (var ar = [], i = 0; i < arguments.length; i++) + ar = ar.concat(__read(arguments[i])); + return ar; +} + +function __await(v) { + return this instanceof __await ? (this.v = v, this) : new __await(v); +} + +function __asyncGenerator(thisArg, _arguments, generator) { + if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); + var g = generator.apply(thisArg, _arguments || []), i, q = []; + return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i; + function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; } + function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } } + function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); } + function fulfill(value) { resume("next", value); } + function reject(value) { resume("throw", value); } + function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); } +} + +function __asyncDelegator(o) { + var i, p; + return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i; + function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; } +} + +function __asyncValues(o) { + if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); + var m = o[Symbol.asyncIterator], i; + return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i); + function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; } + function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); } +} + +function __makeTemplateObject(cooked, raw) { + if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } + return cooked; +}; + +function __importStar(mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + result.default = mod; + return result; +} + +function __importDefault(mod) { + return (mod && mod.__esModule) ? mod : { default: mod }; +} + + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _promise = __webpack_require__(227); + +var _promise2 = _interopRequireDefault(_promise); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = function (fn) { + return function () { + var gen = fn.apply(this, arguments); + return new _promise2.default(function (resolve, reject) { + function step(key, arg) { + try { + var info = gen[key](arg); + var value = info.value; + } catch (error) { + reject(error); + return; + } + + if (info.done) { + resolve(value); + } else { + return _promise2.default.resolve(value).then(function (value) { + step("next", value); + }, function (err) { + step("throw", err); + }); + } + } + + return step("next"); + }); + }; +}; + +/***/ }), +/* 3 */ +/***/ (function(module, exports) { + +module.exports = require("util"); + +/***/ }), +/* 4 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.getFirstSuitableFolder = exports.readFirstAvailableStream = exports.makeTempDir = exports.hardlinksWork = exports.writeFilePreservingEol = exports.getFileSizeOnDisk = exports.walk = exports.symlink = exports.find = exports.readJsonAndFile = exports.readJson = exports.readFileAny = exports.hardlinkBulk = exports.copyBulk = exports.unlink = exports.glob = exports.link = exports.chmod = exports.lstat = exports.exists = exports.mkdirp = exports.stat = exports.access = exports.rename = exports.readdir = exports.realpath = exports.readlink = exports.writeFile = exports.open = exports.readFileBuffer = exports.lockQueue = exports.constants = undefined; + +var _asyncToGenerator2; + +function _load_asyncToGenerator() { + return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2)); +} + +let buildActionsForCopy = (() => { + var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, events, possibleExtraneous, reporter) { + + // + let build = (() => { + var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) { + const src = data.src, + dest = data.dest, + type = data.type; + + const onFresh = data.onFresh || noop; + const onDone = data.onDone || noop; + + // TODO https://github.com/yarnpkg/yarn/issues/3751 + // related to bundled dependencies handling + if (files.has(dest.toLowerCase())) { + reporter.verbose(`The case-insensitive file ${dest} shouldn't be copied twice in one bulk copy`); + } else { + files.add(dest.toLowerCase()); + } + + if (type === 'symlink') { + yield mkdirp((_path || _load_path()).default.dirname(dest)); + onFresh(); + actions.symlink.push({ + dest, + linkname: src + }); + onDone(); + return; + } + + if (events.ignoreBasenames.indexOf((_path || _load_path()).default.basename(src)) >= 0) { + // ignored file + return; + } + + const srcStat = yield lstat(src); + let srcFiles; + + if (srcStat.isDirectory()) { + srcFiles = yield readdir(src); + } + + let destStat; + try { + // try accessing the destination + destStat = yield lstat(dest); + } catch (e) { + // proceed if destination doesn't exist, otherwise error + if (e.code !== 'ENOENT') { + throw e; + } + } + + // if destination exists + if (destStat) { + const bothSymlinks = srcStat.isSymbolicLink() && destStat.isSymbolicLink(); + const bothFolders = srcStat.isDirectory() && destStat.isDirectory(); + const bothFiles = srcStat.isFile() && destStat.isFile(); + + // EINVAL access errors sometimes happen which shouldn't because node shouldn't be giving + // us modes that aren't valid. investigate this, it's generally safe to proceed. + + /* if (srcStat.mode !== destStat.mode) { + try { + await access(dest, srcStat.mode); + } catch (err) {} + } */ + + if (bothFiles && artifactFiles.has(dest)) { + // this file gets changed during build, likely by a custom install script. Don't bother checking it. + onDone(); + reporter.verbose(reporter.lang('verboseFileSkipArtifact', src)); + return; + } + + if (bothFiles && srcStat.size === destStat.size && (0, (_fsNormalized || _load_fsNormalized()).fileDatesEqual)(srcStat.mtime, destStat.mtime)) { + // we can safely assume this is the same file + onDone(); + reporter.verbose(reporter.lang('verboseFileSkip', src, dest, srcStat.size, +srcStat.mtime)); + return; + } + + if (bothSymlinks) { + const srcReallink = yield readlink(src); + if (srcReallink === (yield readlink(dest))) { + // if both symlinks are the same then we can continue on + onDone(); + reporter.verbose(reporter.lang('verboseFileSkipSymlink', src, dest, srcReallink)); + return; + } + } + + if (bothFolders) { + // mark files that aren't in this folder as possibly extraneous + const destFiles = yield readdir(dest); + invariant(srcFiles, 'src files not initialised'); + + for (var _iterator4 = destFiles, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { + var _ref6; + + if (_isArray4) { + if (_i4 >= _iterator4.length) break; + _ref6 = _iterator4[_i4++]; + } else { + _i4 = _iterator4.next(); + if (_i4.done) break; + _ref6 = _i4.value; + } + + const file = _ref6; + + if (srcFiles.indexOf(file) < 0) { + const loc = (_path || _load_path()).default.join(dest, file); + possibleExtraneous.add(loc); + + if ((yield lstat(loc)).isDirectory()) { + for (var _iterator5 = yield readdir(loc), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) { + var _ref7; + + if (_isArray5) { + if (_i5 >= _iterator5.length) break; + _ref7 = _iterator5[_i5++]; + } else { + _i5 = _iterator5.next(); + if (_i5.done) break; + _ref7 = _i5.value; + } + + const file = _ref7; + + possibleExtraneous.add((_path || _load_path()).default.join(loc, file)); + } + } + } + } + } + } + + if (destStat && destStat.isSymbolicLink()) { + yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(dest); + destStat = null; + } + + if (srcStat.isSymbolicLink()) { + onFresh(); + const linkname = yield readlink(src); + actions.symlink.push({ + dest, + linkname + }); + onDone(); + } else if (srcStat.isDirectory()) { + if (!destStat) { + reporter.verbose(reporter.lang('verboseFileFolder', dest)); + yield mkdirp(dest); + } + + const destParts = dest.split((_path || _load_path()).default.sep); + while (destParts.length) { + files.add(destParts.join((_path || _load_path()).default.sep).toLowerCase()); + destParts.pop(); + } + + // push all files to queue + invariant(srcFiles, 'src files not initialised'); + let remaining = srcFiles.length; + if (!remaining) { + onDone(); + } + for (var _iterator6 = srcFiles, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) { + var _ref8; + + if (_isArray6) { + if (_i6 >= _iterator6.length) break; + _ref8 = _iterator6[_i6++]; + } else { + _i6 = _iterator6.next(); + if (_i6.done) break; + _ref8 = _i6.value; + } + + const file = _ref8; + + queue.push({ + dest: (_path || _load_path()).default.join(dest, file), + onFresh, + onDone: function (_onDone) { + function onDone() { + return _onDone.apply(this, arguments); + } + + onDone.toString = function () { + return _onDone.toString(); + }; + + return onDone; + }(function () { + if (--remaining === 0) { + onDone(); + } + }), + src: (_path || _load_path()).default.join(src, file) + }); + } + } else if (srcStat.isFile()) { + onFresh(); + actions.file.push({ + src, + dest, + atime: srcStat.atime, + mtime: srcStat.mtime, + mode: srcStat.mode + }); + onDone(); + } else { + throw new Error(`unsure how to copy this: ${src}`); + } + }); + + return function build(_x5) { + return _ref5.apply(this, arguments); + }; + })(); + + const artifactFiles = new Set(events.artifactFiles || []); + const files = new Set(); + + // initialise events + for (var _iterator = queue, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { + var _ref2; + + if (_isArray) { + if (_i >= _iterator.length) break; + _ref2 = _iterator[_i++]; + } else { + _i = _iterator.next(); + if (_i.done) break; + _ref2 = _i.value; + } + + const item = _ref2; + + const onDone = item.onDone; + item.onDone = function () { + events.onProgress(item.dest); + if (onDone) { + onDone(); + } + }; + } + events.onStart(queue.length); + + // start building actions + const actions = { + file: [], + symlink: [], + link: [] + }; + + // custom concurrency logic as we're always executing stacks of CONCURRENT_QUEUE_ITEMS queue items + // at a time due to the requirement to push items onto the queue + while (queue.length) { + const items = queue.splice(0, CONCURRENT_QUEUE_ITEMS); + yield Promise.all(items.map(build)); + } + + // simulate the existence of some files to prevent considering them extraneous + for (var _iterator2 = artifactFiles, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { + var _ref3; + + if (_isArray2) { + if (_i2 >= _iterator2.length) break; + _ref3 = _iterator2[_i2++]; + } else { + _i2 = _iterator2.next(); + if (_i2.done) break; + _ref3 = _i2.value; + } + + const file = _ref3; + + if (possibleExtraneous.has(file)) { + reporter.verbose(reporter.lang('verboseFilePhantomExtraneous', file)); + possibleExtraneous.delete(file); + } + } + + for (var _iterator3 = possibleExtraneous, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { + var _ref4; + + if (_isArray3) { + if (_i3 >= _iterator3.length) break; + _ref4 = _iterator3[_i3++]; + } else { + _i3 = _iterator3.next(); + if (_i3.done) break; + _ref4 = _i3.value; + } + + const loc = _ref4; + + if (files.has(loc.toLowerCase())) { + possibleExtraneous.delete(loc); + } + } + + return actions; + }); + + return function buildActionsForCopy(_x, _x2, _x3, _x4) { + return _ref.apply(this, arguments); + }; +})(); + +let buildActionsForHardlink = (() => { + var _ref9 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, events, possibleExtraneous, reporter) { + + // + let build = (() => { + var _ref13 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) { + const src = data.src, + dest = data.dest; + + const onFresh = data.onFresh || noop; + const onDone = data.onDone || noop; + if (files.has(dest.toLowerCase())) { + // Fixes issue https://github.com/yarnpkg/yarn/issues/2734 + // When bulk hardlinking we have A -> B structure that we want to hardlink to A1 -> B1, + // package-linker passes that modules A1 and B1 need to be hardlinked, + // the recursive linking algorithm of A1 ends up scheduling files in B1 to be linked twice which will case + // an exception. + onDone(); + return; + } + files.add(dest.toLowerCase()); + + if (events.ignoreBasenames.indexOf((_path || _load_path()).default.basename(src)) >= 0) { + // ignored file + return; + } + + const srcStat = yield lstat(src); + let srcFiles; + + if (srcStat.isDirectory()) { + srcFiles = yield readdir(src); + } + + const destExists = yield exists(dest); + if (destExists) { + const destStat = yield lstat(dest); + + const bothSymlinks = srcStat.isSymbolicLink() && destStat.isSymbolicLink(); + const bothFolders = srcStat.isDirectory() && destStat.isDirectory(); + const bothFiles = srcStat.isFile() && destStat.isFile(); + + if (srcStat.mode !== destStat.mode) { + try { + yield access(dest, srcStat.mode); + } catch (err) { + // EINVAL access errors sometimes happen which shouldn't because node shouldn't be giving + // us modes that aren't valid. investigate this, it's generally safe to proceed. + reporter.verbose(err); + } + } + + if (bothFiles && artifactFiles.has(dest)) { + // this file gets changed during build, likely by a custom install script. Don't bother checking it. + onDone(); + reporter.verbose(reporter.lang('verboseFileSkipArtifact', src)); + return; + } + + // correct hardlink + if (bothFiles && srcStat.ino !== null && srcStat.ino === destStat.ino) { + onDone(); + reporter.verbose(reporter.lang('verboseFileSkip', src, dest, srcStat.ino)); + return; + } + + if (bothSymlinks) { + const srcReallink = yield readlink(src); + if (srcReallink === (yield readlink(dest))) { + // if both symlinks are the same then we can continue on + onDone(); + reporter.verbose(reporter.lang('verboseFileSkipSymlink', src, dest, srcReallink)); + return; + } + } + + if (bothFolders) { + // mark files that aren't in this folder as possibly extraneous + const destFiles = yield readdir(dest); + invariant(srcFiles, 'src files not initialised'); + + for (var _iterator10 = destFiles, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) { + var _ref14; + + if (_isArray10) { + if (_i10 >= _iterator10.length) break; + _ref14 = _iterator10[_i10++]; + } else { + _i10 = _iterator10.next(); + if (_i10.done) break; + _ref14 = _i10.value; + } + + const file = _ref14; + + if (srcFiles.indexOf(file) < 0) { + const loc = (_path || _load_path()).default.join(dest, file); + possibleExtraneous.add(loc); + + if ((yield lstat(loc)).isDirectory()) { + for (var _iterator11 = yield readdir(loc), _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) { + var _ref15; + + if (_isArray11) { + if (_i11 >= _iterator11.length) break; + _ref15 = _iterator11[_i11++]; + } else { + _i11 = _iterator11.next(); + if (_i11.done) break; + _ref15 = _i11.value; + } + + const file = _ref15; + + possibleExtraneous.add((_path || _load_path()).default.join(loc, file)); + } + } + } + } + } + } + + if (srcStat.isSymbolicLink()) { + onFresh(); + const linkname = yield readlink(src); + actions.symlink.push({ + dest, + linkname + }); + onDone(); + } else if (srcStat.isDirectory()) { + reporter.verbose(reporter.lang('verboseFileFolder', dest)); + yield mkdirp(dest); + + const destParts = dest.split((_path || _load_path()).default.sep); + while (destParts.length) { + files.add(destParts.join((_path || _load_path()).default.sep).toLowerCase()); + destParts.pop(); + } + + // push all files to queue + invariant(srcFiles, 'src files not initialised'); + let remaining = srcFiles.length; + if (!remaining) { + onDone(); + } + for (var _iterator12 = srcFiles, _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) { + var _ref16; + + if (_isArray12) { + if (_i12 >= _iterator12.length) break; + _ref16 = _iterator12[_i12++]; + } else { + _i12 = _iterator12.next(); + if (_i12.done) break; + _ref16 = _i12.value; + } + + const file = _ref16; + + queue.push({ + onFresh, + src: (_path || _load_path()).default.join(src, file), + dest: (_path || _load_path()).default.join(dest, file), + onDone: function (_onDone2) { + function onDone() { + return _onDone2.apply(this, arguments); + } + + onDone.toString = function () { + return _onDone2.toString(); + }; + + return onDone; + }(function () { + if (--remaining === 0) { + onDone(); + } + }) + }); + } + } else if (srcStat.isFile()) { + onFresh(); + actions.link.push({ + src, + dest, + removeDest: destExists + }); + onDone(); + } else { + throw new Error(`unsure how to copy this: ${src}`); + } + }); + + return function build(_x10) { + return _ref13.apply(this, arguments); + }; + })(); + + const artifactFiles = new Set(events.artifactFiles || []); + const files = new Set(); + + // initialise events + for (var _iterator7 = queue, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) { + var _ref10; + + if (_isArray7) { + if (_i7 >= _iterator7.length) break; + _ref10 = _iterator7[_i7++]; + } else { + _i7 = _iterator7.next(); + if (_i7.done) break; + _ref10 = _i7.value; + } + + const item = _ref10; + + const onDone = item.onDone || noop; + item.onDone = function () { + events.onProgress(item.dest); + onDone(); + }; + } + events.onStart(queue.length); + + // start building actions + const actions = { + file: [], + symlink: [], + link: [] + }; + + // custom concurrency logic as we're always executing stacks of CONCURRENT_QUEUE_ITEMS queue items + // at a time due to the requirement to push items onto the queue + while (queue.length) { + const items = queue.splice(0, CONCURRENT_QUEUE_ITEMS); + yield Promise.all(items.map(build)); + } + + // simulate the existence of some files to prevent considering them extraneous + for (var _iterator8 = artifactFiles, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) { + var _ref11; + + if (_isArray8) { + if (_i8 >= _iterator8.length) break; + _ref11 = _iterator8[_i8++]; + } else { + _i8 = _iterator8.next(); + if (_i8.done) break; + _ref11 = _i8.value; + } + + const file = _ref11; + + if (possibleExtraneous.has(file)) { + reporter.verbose(reporter.lang('verboseFilePhantomExtraneous', file)); + possibleExtraneous.delete(file); + } + } + + for (var _iterator9 = possibleExtraneous, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) { + var _ref12; + + if (_isArray9) { + if (_i9 >= _iterator9.length) break; + _ref12 = _iterator9[_i9++]; + } else { + _i9 = _iterator9.next(); + if (_i9.done) break; + _ref12 = _i9.value; + } + + const loc = _ref12; + + if (files.has(loc.toLowerCase())) { + possibleExtraneous.delete(loc); + } + } + + return actions; + }); + + return function buildActionsForHardlink(_x6, _x7, _x8, _x9) { + return _ref9.apply(this, arguments); + }; +})(); + +let copyBulk = exports.copyBulk = (() => { + var _ref17 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, reporter, _events) { + const events = { + onStart: _events && _events.onStart || noop, + onProgress: _events && _events.onProgress || noop, + possibleExtraneous: _events ? _events.possibleExtraneous : new Set(), + ignoreBasenames: _events && _events.ignoreBasenames || [], + artifactFiles: _events && _events.artifactFiles || [] + }; + + const actions = yield buildActionsForCopy(queue, events, events.possibleExtraneous, reporter); + events.onStart(actions.file.length + actions.symlink.length + actions.link.length); + + const fileActions = actions.file; + + const currentlyWriting = new Map(); + + yield (_promise || _load_promise()).queue(fileActions, (() => { + var _ref18 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) { + let writePromise; + while (writePromise = currentlyWriting.get(data.dest)) { + yield writePromise; + } + + reporter.verbose(reporter.lang('verboseFileCopy', data.src, data.dest)); + const copier = (0, (_fsNormalized || _load_fsNormalized()).copyFile)(data, function () { + return currentlyWriting.delete(data.dest); + }); + currentlyWriting.set(data.dest, copier); + events.onProgress(data.dest); + return copier; + }); + + return function (_x14) { + return _ref18.apply(this, arguments); + }; + })(), CONCURRENT_QUEUE_ITEMS); + + // we need to copy symlinks last as they could reference files we were copying + const symlinkActions = actions.symlink; + yield (_promise || _load_promise()).queue(symlinkActions, function (data) { + const linkname = (_path || _load_path()).default.resolve((_path || _load_path()).default.dirname(data.dest), data.linkname); + reporter.verbose(reporter.lang('verboseFileSymlink', data.dest, linkname)); + return symlink(linkname, data.dest); + }); + }); + + return function copyBulk(_x11, _x12, _x13) { + return _ref17.apply(this, arguments); + }; +})(); + +let hardlinkBulk = exports.hardlinkBulk = (() => { + var _ref19 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, reporter, _events) { + const events = { + onStart: _events && _events.onStart || noop, + onProgress: _events && _events.onProgress || noop, + possibleExtraneous: _events ? _events.possibleExtraneous : new Set(), + artifactFiles: _events && _events.artifactFiles || [], + ignoreBasenames: [] + }; + + const actions = yield buildActionsForHardlink(queue, events, events.possibleExtraneous, reporter); + events.onStart(actions.file.length + actions.symlink.length + actions.link.length); + + const fileActions = actions.link; + + yield (_promise || _load_promise()).queue(fileActions, (() => { + var _ref20 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) { + reporter.verbose(reporter.lang('verboseFileLink', data.src, data.dest)); + if (data.removeDest) { + yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(data.dest); + } + yield link(data.src, data.dest); + }); + + return function (_x18) { + return _ref20.apply(this, arguments); + }; + })(), CONCURRENT_QUEUE_ITEMS); + + // we need to copy symlinks last as they could reference files we were copying + const symlinkActions = actions.symlink; + yield (_promise || _load_promise()).queue(symlinkActions, function (data) { + const linkname = (_path || _load_path()).default.resolve((_path || _load_path()).default.dirname(data.dest), data.linkname); + reporter.verbose(reporter.lang('verboseFileSymlink', data.dest, linkname)); + return symlink(linkname, data.dest); + }); + }); + + return function hardlinkBulk(_x15, _x16, _x17) { + return _ref19.apply(this, arguments); + }; +})(); + +let readFileAny = exports.readFileAny = (() => { + var _ref21 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (files) { + for (var _iterator13 = files, _isArray13 = Array.isArray(_iterator13), _i13 = 0, _iterator13 = _isArray13 ? _iterator13 : _iterator13[Symbol.iterator]();;) { + var _ref22; + + if (_isArray13) { + if (_i13 >= _iterator13.length) break; + _ref22 = _iterator13[_i13++]; + } else { + _i13 = _iterator13.next(); + if (_i13.done) break; + _ref22 = _i13.value; + } + + const file = _ref22; + + if (yield exists(file)) { + return readFile(file); + } + } + return null; + }); + + return function readFileAny(_x19) { + return _ref21.apply(this, arguments); + }; +})(); + +let readJson = exports.readJson = (() => { + var _ref23 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) { + return (yield readJsonAndFile(loc)).object; + }); + + return function readJson(_x20) { + return _ref23.apply(this, arguments); + }; +})(); + +let readJsonAndFile = exports.readJsonAndFile = (() => { + var _ref24 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) { + const file = yield readFile(loc); + try { + return { + object: (0, (_map || _load_map()).default)(JSON.parse(stripBOM(file))), + content: file + }; + } catch (err) { + err.message = `${loc}: ${err.message}`; + throw err; + } + }); + + return function readJsonAndFile(_x21) { + return _ref24.apply(this, arguments); + }; +})(); + +let find = exports.find = (() => { + var _ref25 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (filename, dir) { + const parts = dir.split((_path || _load_path()).default.sep); + + while (parts.length) { + const loc = parts.concat(filename).join((_path || _load_path()).default.sep); + + if (yield exists(loc)) { + return loc; + } else { + parts.pop(); + } + } + + return false; + }); + + return function find(_x22, _x23) { + return _ref25.apply(this, arguments); + }; +})(); + +let symlink = exports.symlink = (() => { + var _ref26 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (src, dest) { + if (process.platform !== 'win32') { + // use relative paths otherwise which will be retained if the directory is moved + src = (_path || _load_path()).default.relative((_path || _load_path()).default.dirname(dest), src); + // When path.relative returns an empty string for the current directory, we should instead use + // '.', which is a valid fs.symlink target. + src = src || '.'; + } + + try { + const stats = yield lstat(dest); + if (stats.isSymbolicLink()) { + const resolved = dest; + if (resolved === src) { + return; + } + } + } catch (err) { + if (err.code !== 'ENOENT') { + throw err; + } + } + + // We use rimraf for unlink which never throws an ENOENT on missing target + yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(dest); + + if (process.platform === 'win32') { + // use directory junctions if possible on win32, this requires absolute paths + yield fsSymlink(src, dest, 'junction'); + } else { + yield fsSymlink(src, dest); + } + }); + + return function symlink(_x24, _x25) { + return _ref26.apply(this, arguments); + }; +})(); + +let walk = exports.walk = (() => { + var _ref27 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (dir, relativeDir, ignoreBasenames = new Set()) { + let files = []; + + let filenames = yield readdir(dir); + if (ignoreBasenames.size) { + filenames = filenames.filter(function (name) { + return !ignoreBasenames.has(name); + }); + } + + for (var _iterator14 = filenames, _isArray14 = Array.isArray(_iterator14), _i14 = 0, _iterator14 = _isArray14 ? _iterator14 : _iterator14[Symbol.iterator]();;) { + var _ref28; + + if (_isArray14) { + if (_i14 >= _iterator14.length) break; + _ref28 = _iterator14[_i14++]; + } else { + _i14 = _iterator14.next(); + if (_i14.done) break; + _ref28 = _i14.value; + } + + const name = _ref28; + + const relative = relativeDir ? (_path || _load_path()).default.join(relativeDir, name) : name; + const loc = (_path || _load_path()).default.join(dir, name); + const stat = yield lstat(loc); + + files.push({ + relative, + basename: name, + absolute: loc, + mtime: +stat.mtime + }); + + if (stat.isDirectory()) { + files = files.concat((yield walk(loc, relative, ignoreBasenames))); + } + } + + return files; + }); + + return function walk(_x26, _x27) { + return _ref27.apply(this, arguments); + }; +})(); + +let getFileSizeOnDisk = exports.getFileSizeOnDisk = (() => { + var _ref29 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) { + const stat = yield lstat(loc); + const size = stat.size, + blockSize = stat.blksize; + + + return Math.ceil(size / blockSize) * blockSize; + }); + + return function getFileSizeOnDisk(_x28) { + return _ref29.apply(this, arguments); + }; +})(); + +let getEolFromFile = (() => { + var _ref30 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (path) { + if (!(yield exists(path))) { + return undefined; + } + + const buffer = yield readFileBuffer(path); + + for (let i = 0; i < buffer.length; ++i) { + if (buffer[i] === cr) { + return '\r\n'; + } + if (buffer[i] === lf) { + return '\n'; + } + } + return undefined; + }); + + return function getEolFromFile(_x29) { + return _ref30.apply(this, arguments); + }; +})(); + +let writeFilePreservingEol = exports.writeFilePreservingEol = (() => { + var _ref31 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (path, data) { + const eol = (yield getEolFromFile(path)) || (_os || _load_os()).default.EOL; + if (eol !== '\n') { + data = data.replace(/\n/g, eol); + } + yield writeFile(path, data); + }); + + return function writeFilePreservingEol(_x30, _x31) { + return _ref31.apply(this, arguments); + }; +})(); + +let hardlinksWork = exports.hardlinksWork = (() => { + var _ref32 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (dir) { + const filename = 'test-file' + Math.random(); + const file = (_path || _load_path()).default.join(dir, filename); + const fileLink = (_path || _load_path()).default.join(dir, filename + '-link'); + try { + yield writeFile(file, 'test'); + yield link(file, fileLink); + } catch (err) { + return false; + } finally { + yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(file); + yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(fileLink); + } + return true; + }); + + return function hardlinksWork(_x32) { + return _ref32.apply(this, arguments); + }; +})(); + +// not a strict polyfill for Node's fs.mkdtemp + + +let makeTempDir = exports.makeTempDir = (() => { + var _ref33 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (prefix) { + const dir = (_path || _load_path()).default.join((_os || _load_os()).default.tmpdir(), `yarn-${prefix || ''}-${Date.now()}-${Math.random()}`); + yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(dir); + yield mkdirp(dir); + return dir; + }); + + return function makeTempDir(_x33) { + return _ref33.apply(this, arguments); + }; +})(); + +let readFirstAvailableStream = exports.readFirstAvailableStream = (() => { + var _ref34 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (paths) { + for (var _iterator15 = paths, _isArray15 = Array.isArray(_iterator15), _i15 = 0, _iterator15 = _isArray15 ? _iterator15 : _iterator15[Symbol.iterator]();;) { + var _ref35; + + if (_isArray15) { + if (_i15 >= _iterator15.length) break; + _ref35 = _iterator15[_i15++]; + } else { + _i15 = _iterator15.next(); + if (_i15.done) break; + _ref35 = _i15.value; + } + + const path = _ref35; + + try { + const fd = yield open(path, 'r'); + return (_fs || _load_fs()).default.createReadStream(path, { fd }); + } catch (err) { + // Try the next one + } + } + return null; + }); + + return function readFirstAvailableStream(_x34) { + return _ref34.apply(this, arguments); + }; +})(); + +let getFirstSuitableFolder = exports.getFirstSuitableFolder = (() => { + var _ref36 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (paths, mode = constants.W_OK | constants.X_OK) { + const result = { + skipped: [], + folder: null + }; + + for (var _iterator16 = paths, _isArray16 = Array.isArray(_iterator16), _i16 = 0, _iterator16 = _isArray16 ? _iterator16 : _iterator16[Symbol.iterator]();;) { + var _ref37; + + if (_isArray16) { + if (_i16 >= _iterator16.length) break; + _ref37 = _iterator16[_i16++]; + } else { + _i16 = _iterator16.next(); + if (_i16.done) break; + _ref37 = _i16.value; + } + + const folder = _ref37; + + try { + yield mkdirp(folder); + yield access(folder, mode); + + result.folder = folder; + + return result; + } catch (error) { + result.skipped.push({ + error, + folder + }); + } + } + return result; + }); + + return function getFirstSuitableFolder(_x35) { + return _ref36.apply(this, arguments); + }; +})(); + +exports.copy = copy; +exports.readFile = readFile; +exports.readFileRaw = readFileRaw; +exports.normalizeOS = normalizeOS; + +var _fs; + +function _load_fs() { + return _fs = _interopRequireDefault(__webpack_require__(5)); +} + +var _glob; + +function _load_glob() { + return _glob = _interopRequireDefault(__webpack_require__(99)); +} + +var _os; + +function _load_os() { + return _os = _interopRequireDefault(__webpack_require__(49)); +} + +var _path; + +function _load_path() { + return _path = _interopRequireDefault(__webpack_require__(0)); +} + +var _blockingQueue; + +function _load_blockingQueue() { + return _blockingQueue = _interopRequireDefault(__webpack_require__(110)); +} + +var _promise; + +function _load_promise() { + return _promise = _interopRequireWildcard(__webpack_require__(50)); +} + +var _promise2; + +function _load_promise2() { + return _promise2 = __webpack_require__(50); +} + +var _map; + +function _load_map() { + return _map = _interopRequireDefault(__webpack_require__(29)); +} + +var _fsNormalized; + +function _load_fsNormalized() { + return _fsNormalized = __webpack_require__(218); +} + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +const constants = exports.constants = typeof (_fs || _load_fs()).default.constants !== 'undefined' ? (_fs || _load_fs()).default.constants : { + R_OK: (_fs || _load_fs()).default.R_OK, + W_OK: (_fs || _load_fs()).default.W_OK, + X_OK: (_fs || _load_fs()).default.X_OK +}; + +const lockQueue = exports.lockQueue = new (_blockingQueue || _load_blockingQueue()).default('fs lock'); + +const readFileBuffer = exports.readFileBuffer = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.readFile); +const open = exports.open = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.open); +const writeFile = exports.writeFile = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.writeFile); +const readlink = exports.readlink = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.readlink); +const realpath = exports.realpath = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.realpath); +const readdir = exports.readdir = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.readdir); +const rename = exports.rename = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.rename); +const access = exports.access = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.access); +const stat = exports.stat = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.stat); +const mkdirp = exports.mkdirp = (0, (_promise2 || _load_promise2()).promisify)(__webpack_require__(145)); +const exists = exports.exists = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.exists, true); +const lstat = exports.lstat = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.lstat); +const chmod = exports.chmod = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.chmod); +const link = exports.link = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.link); +const glob = exports.glob = (0, (_promise2 || _load_promise2()).promisify)((_glob || _load_glob()).default); +exports.unlink = (_fsNormalized || _load_fsNormalized()).unlink; + +// fs.copyFile uses the native file copying instructions on the system, performing much better +// than any JS-based solution and consumes fewer resources. Repeated testing to fine tune the +// concurrency level revealed 128 as the sweet spot on a quad-core, 16 CPU Intel system with SSD. + +const CONCURRENT_QUEUE_ITEMS = (_fs || _load_fs()).default.copyFile ? 128 : 4; + +const fsSymlink = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.symlink); +const invariant = __webpack_require__(9); +const stripBOM = __webpack_require__(160); + +const noop = () => {}; + +function copy(src, dest, reporter) { + return copyBulk([{ src, dest }], reporter); +} + +function _readFile(loc, encoding) { + return new Promise((resolve, reject) => { + (_fs || _load_fs()).default.readFile(loc, encoding, function (err, content) { + if (err) { + reject(err); + } else { + resolve(content); + } + }); + }); +} + +function readFile(loc) { + return _readFile(loc, 'utf8').then(normalizeOS); +} + +function readFileRaw(loc) { + return _readFile(loc, 'binary'); +} + +function normalizeOS(body) { + return body.replace(/\r\n/g, '\n'); +} + +const cr = '\r'.charCodeAt(0); +const lf = '\n'.charCodeAt(0); + +/***/ }), +/* 5 */ +/***/ (function(module, exports) { + +module.exports = require("fs"); + +/***/ }), +/* 6 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +class MessageError extends Error { + constructor(msg, code) { + super(msg); + this.code = code; + } + +} + +exports.MessageError = MessageError; +class ProcessSpawnError extends MessageError { + constructor(msg, code, process) { + super(msg, code); + this.process = process; + } + +} + +exports.ProcessSpawnError = ProcessSpawnError; +class SecurityError extends MessageError {} + +exports.SecurityError = SecurityError; +class ProcessTermError extends MessageError {} + +exports.ProcessTermError = ProcessTermError; +class ResponseError extends Error { + constructor(msg, responseCode) { + super(msg); + this.responseCode = responseCode; + } + +} + +exports.ResponseError = ResponseError; +class OneTimePasswordError extends Error {} +exports.OneTimePasswordError = OneTimePasswordError; + +/***/ }), +/* 7 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Subscriber; }); +/* unused harmony export SafeSubscriber */ +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isFunction__ = __webpack_require__(154); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Observer__ = __webpack_require__(420); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscription__ = __webpack_require__(25); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__internal_symbol_rxSubscriber__ = __webpack_require__(321); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__config__ = __webpack_require__(185); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__util_hostReportError__ = __webpack_require__(323); +/** PURE_IMPORTS_START tslib,_util_isFunction,_Observer,_Subscription,_internal_symbol_rxSubscriber,_config,_util_hostReportError PURE_IMPORTS_END */ + + + + + + + +var Subscriber = /*@__PURE__*/ (function (_super) { + __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](Subscriber, _super); + function Subscriber(destinationOrNext, error, complete) { + var _this = _super.call(this) || this; + _this.syncErrorValue = null; + _this.syncErrorThrown = false; + _this.syncErrorThrowable = false; + _this.isStopped = false; + _this._parentSubscription = null; + switch (arguments.length) { + case 0: + _this.destination = __WEBPACK_IMPORTED_MODULE_2__Observer__["a" /* empty */]; + break; + case 1: + if (!destinationOrNext) { + _this.destination = __WEBPACK_IMPORTED_MODULE_2__Observer__["a" /* empty */]; + break; + } + if (typeof destinationOrNext === 'object') { + if (destinationOrNext instanceof Subscriber) { + _this.syncErrorThrowable = destinationOrNext.syncErrorThrowable; + _this.destination = destinationOrNext; + destinationOrNext.add(_this); + } + else { + _this.syncErrorThrowable = true; + _this.destination = new SafeSubscriber(_this, destinationOrNext); + } + break; + } + default: + _this.syncErrorThrowable = true; + _this.destination = new SafeSubscriber(_this, destinationOrNext, error, complete); + break; + } + return _this; + } + Subscriber.prototype[__WEBPACK_IMPORTED_MODULE_4__internal_symbol_rxSubscriber__["a" /* rxSubscriber */]] = function () { return this; }; + Subscriber.create = function (next, error, complete) { + var subscriber = new Subscriber(next, error, complete); + subscriber.syncErrorThrowable = false; + return subscriber; + }; + Subscriber.prototype.next = function (value) { + if (!this.isStopped) { + this._next(value); + } + }; + Subscriber.prototype.error = function (err) { + if (!this.isStopped) { + this.isStopped = true; + this._error(err); + } + }; + Subscriber.prototype.complete = function () { + if (!this.isStopped) { + this.isStopped = true; + this._complete(); + } + }; + Subscriber.prototype.unsubscribe = function () { + if (this.closed) { + return; + } + this.isStopped = true; + _super.prototype.unsubscribe.call(this); + }; + Subscriber.prototype._next = function (value) { + this.destination.next(value); + }; + Subscriber.prototype._error = function (err) { + this.destination.error(err); + this.unsubscribe(); + }; + Subscriber.prototype._complete = function () { + this.destination.complete(); + this.unsubscribe(); + }; + Subscriber.prototype._unsubscribeAndRecycle = function () { + var _a = this, _parent = _a._parent, _parents = _a._parents; + this._parent = null; + this._parents = null; + this.unsubscribe(); + this.closed = false; + this.isStopped = false; + this._parent = _parent; + this._parents = _parents; + this._parentSubscription = null; + return this; + }; + return Subscriber; +}(__WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */])); + +var SafeSubscriber = /*@__PURE__*/ (function (_super) { + __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SafeSubscriber, _super); + function SafeSubscriber(_parentSubscriber, observerOrNext, error, complete) { + var _this = _super.call(this) || this; + _this._parentSubscriber = _parentSubscriber; + var next; + var context = _this; + if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isFunction__["a" /* isFunction */])(observerOrNext)) { + next = observerOrNext; + } + else if (observerOrNext) { + next = observerOrNext.next; + error = observerOrNext.error; + complete = observerOrNext.complete; + if (observerOrNext !== __WEBPACK_IMPORTED_MODULE_2__Observer__["a" /* empty */]) { + context = Object.create(observerOrNext); + if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isFunction__["a" /* isFunction */])(context.unsubscribe)) { + _this.add(context.unsubscribe.bind(context)); + } + context.unsubscribe = _this.unsubscribe.bind(_this); + } + } + _this._context = context; + _this._next = next; + _this._error = error; + _this._complete = complete; + return _this; + } + SafeSubscriber.prototype.next = function (value) { + if (!this.isStopped && this._next) { + var _parentSubscriber = this._parentSubscriber; + if (!__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) { + this.__tryOrUnsub(this._next, value); + } + else if (this.__tryOrSetError(_parentSubscriber, this._next, value)) { + this.unsubscribe(); + } + } + }; + SafeSubscriber.prototype.error = function (err) { + if (!this.isStopped) { + var _parentSubscriber = this._parentSubscriber; + var useDeprecatedSynchronousErrorHandling = __WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling; + if (this._error) { + if (!useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) { + this.__tryOrUnsub(this._error, err); + this.unsubscribe(); + } + else { + this.__tryOrSetError(_parentSubscriber, this._error, err); + this.unsubscribe(); + } + } + else if (!_parentSubscriber.syncErrorThrowable) { + this.unsubscribe(); + if (useDeprecatedSynchronousErrorHandling) { + throw err; + } + __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err); + } + else { + if (useDeprecatedSynchronousErrorHandling) { + _parentSubscriber.syncErrorValue = err; + _parentSubscriber.syncErrorThrown = true; + } + else { + __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err); + } + this.unsubscribe(); + } + } + }; + SafeSubscriber.prototype.complete = function () { + var _this = this; + if (!this.isStopped) { + var _parentSubscriber = this._parentSubscriber; + if (this._complete) { + var wrappedComplete = function () { return _this._complete.call(_this._context); }; + if (!__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) { + this.__tryOrUnsub(wrappedComplete); + this.unsubscribe(); + } + else { + this.__tryOrSetError(_parentSubscriber, wrappedComplete); + this.unsubscribe(); + } + } + else { + this.unsubscribe(); + } + } + }; + SafeSubscriber.prototype.__tryOrUnsub = function (fn, value) { + try { + fn.call(this._context, value); + } + catch (err) { + this.unsubscribe(); + if (__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) { + throw err; + } + else { + __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err); + } + } + }; + SafeSubscriber.prototype.__tryOrSetError = function (parent, fn, value) { + if (!__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) { + throw new Error('bad call'); + } + try { + fn.call(this._context, value); + } + catch (err) { + if (__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) { + parent.syncErrorValue = err; + parent.syncErrorThrown = true; + return true; + } + else { + __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err); + return true; + } + } + return false; + }; + SafeSubscriber.prototype._unsubscribe = function () { + var _parentSubscriber = this._parentSubscriber; + this._context = null; + this._parentSubscriber = null; + _parentSubscriber.unsubscribe(); + }; + return SafeSubscriber; +}(Subscriber)); + +//# sourceMappingURL=Subscriber.js.map + + +/***/ }), +/* 8 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.getPathKey = getPathKey; +const os = __webpack_require__(49); +const path = __webpack_require__(0); +const userHome = __webpack_require__(67).default; + +var _require = __webpack_require__(225); + +const getCacheDir = _require.getCacheDir, + getConfigDir = _require.getConfigDir, + getDataDir = _require.getDataDir; + +const isWebpackBundle = __webpack_require__(278); + +const DEPENDENCY_TYPES = exports.DEPENDENCY_TYPES = ['devDependencies', 'dependencies', 'optionalDependencies', 'peerDependencies']; +const OWNED_DEPENDENCY_TYPES = exports.OWNED_DEPENDENCY_TYPES = ['devDependencies', 'dependencies', 'optionalDependencies']; + +const RESOLUTIONS = exports.RESOLUTIONS = 'resolutions'; +const MANIFEST_FIELDS = exports.MANIFEST_FIELDS = [RESOLUTIONS, ...DEPENDENCY_TYPES]; + +const SUPPORTED_NODE_VERSIONS = exports.SUPPORTED_NODE_VERSIONS = '^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0'; + +const YARN_REGISTRY = exports.YARN_REGISTRY = 'https://registry.yarnpkg.com'; +const NPM_REGISTRY_RE = exports.NPM_REGISTRY_RE = /https?:\/\/registry\.npmjs\.org/g; + +const YARN_DOCS = exports.YARN_DOCS = 'https://yarnpkg.com/en/docs/cli/'; +const YARN_INSTALLER_SH = exports.YARN_INSTALLER_SH = 'https://yarnpkg.com/install.sh'; +const YARN_INSTALLER_MSI = exports.YARN_INSTALLER_MSI = 'https://yarnpkg.com/latest.msi'; + +const SELF_UPDATE_VERSION_URL = exports.SELF_UPDATE_VERSION_URL = 'https://yarnpkg.com/latest-version'; + +// cache version, bump whenever we make backwards incompatible changes +const CACHE_VERSION = exports.CACHE_VERSION = 5; + +// lockfile version, bump whenever we make backwards incompatible changes +const LOCKFILE_VERSION = exports.LOCKFILE_VERSION = 1; + +// max amount of network requests to perform concurrently +const NETWORK_CONCURRENCY = exports.NETWORK_CONCURRENCY = 8; + +// HTTP timeout used when downloading packages +const NETWORK_TIMEOUT = exports.NETWORK_TIMEOUT = 30 * 1000; // in milliseconds + +// max amount of child processes to execute concurrently +const CHILD_CONCURRENCY = exports.CHILD_CONCURRENCY = 5; + +const REQUIRED_PACKAGE_KEYS = exports.REQUIRED_PACKAGE_KEYS = ['name', 'version', '_uid']; + +function getPreferredCacheDirectories() { + const preferredCacheDirectories = [getCacheDir()]; + + if (process.getuid) { + // $FlowFixMe: process.getuid exists, dammit + preferredCacheDirectories.push(path.join(os.tmpdir(), `.yarn-cache-${process.getuid()}`)); + } + + preferredCacheDirectories.push(path.join(os.tmpdir(), `.yarn-cache`)); + + return preferredCacheDirectories; +} + +const PREFERRED_MODULE_CACHE_DIRECTORIES = exports.PREFERRED_MODULE_CACHE_DIRECTORIES = getPreferredCacheDirectories(); +const CONFIG_DIRECTORY = exports.CONFIG_DIRECTORY = getConfigDir(); +const DATA_DIRECTORY = exports.DATA_DIRECTORY = getDataDir(); +const LINK_REGISTRY_DIRECTORY = exports.LINK_REGISTRY_DIRECTORY = path.join(DATA_DIRECTORY, 'link'); +const GLOBAL_MODULE_DIRECTORY = exports.GLOBAL_MODULE_DIRECTORY = path.join(DATA_DIRECTORY, 'global'); + +const NODE_BIN_PATH = exports.NODE_BIN_PATH = process.execPath; +const YARN_BIN_PATH = exports.YARN_BIN_PATH = getYarnBinPath(); + +// Webpack needs to be configured with node.__dirname/__filename = false +function getYarnBinPath() { + if (isWebpackBundle) { + return __filename; + } else { + return path.join(__dirname, '..', 'bin', 'yarn.js'); + } +} + +const NODE_MODULES_FOLDER = exports.NODE_MODULES_FOLDER = 'node_modules'; +const NODE_PACKAGE_JSON = exports.NODE_PACKAGE_JSON = 'package.json'; + +const PNP_FILENAME = exports.PNP_FILENAME = '.pnp.js'; + +const POSIX_GLOBAL_PREFIX = exports.POSIX_GLOBAL_PREFIX = `${process.env.DESTDIR || ''}/usr/local`; +const FALLBACK_GLOBAL_PREFIX = exports.FALLBACK_GLOBAL_PREFIX = path.join(userHome, '.yarn'); + +const META_FOLDER = exports.META_FOLDER = '.yarn-meta'; +const INTEGRITY_FILENAME = exports.INTEGRITY_FILENAME = '.yarn-integrity'; +const LOCKFILE_FILENAME = exports.LOCKFILE_FILENAME = 'yarn.lock'; +const METADATA_FILENAME = exports.METADATA_FILENAME = '.yarn-metadata.json'; +const TARBALL_FILENAME = exports.TARBALL_FILENAME = '.yarn-tarball.tgz'; +const CLEAN_FILENAME = exports.CLEAN_FILENAME = '.yarnclean'; + +const NPM_LOCK_FILENAME = exports.NPM_LOCK_FILENAME = 'package-lock.json'; +const NPM_SHRINKWRAP_FILENAME = exports.NPM_SHRINKWRAP_FILENAME = 'npm-shrinkwrap.json'; + +const DEFAULT_INDENT = exports.DEFAULT_INDENT = ' '; +const SINGLE_INSTANCE_PORT = exports.SINGLE_INSTANCE_PORT = 31997; +const SINGLE_INSTANCE_FILENAME = exports.SINGLE_INSTANCE_FILENAME = '.yarn-single-instance'; + +const ENV_PATH_KEY = exports.ENV_PATH_KEY = getPathKey(process.platform, process.env); + +function getPathKey(platform, env) { + let pathKey = 'PATH'; + + // windows calls its path "Path" usually, but this is not guaranteed. + if (platform === 'win32') { + pathKey = 'Path'; + + for (const key in env) { + if (key.toLowerCase() === 'path') { + pathKey = key; + } + } + } + + return pathKey; +} + +const VERSION_COLOR_SCHEME = exports.VERSION_COLOR_SCHEME = { + major: 'red', + premajor: 'red', + minor: 'yellow', + preminor: 'yellow', + patch: 'green', + prepatch: 'green', + prerelease: 'red', + unchanged: 'white', + unknown: 'red' +}; + +/***/ }), +/* 9 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + + +/** + * Use invariant() to assert state which your program assumes to be true. + * + * Provide sprintf-style format (only %s is supported) and arguments + * to provide information about what broke and what you were + * expecting. + * + * The invariant message will be stripped in production, but the invariant + * will remain to ensure logic does not differ in production. + */ + +var NODE_ENV = process.env.NODE_ENV; + +var invariant = function(condition, format, a, b, c, d, e, f) { + if (NODE_ENV !== 'production') { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + } + + if (!condition) { + var error; + if (format === undefined) { + error = new Error( + 'Minified exception occurred; use the non-minified dev environment ' + + 'for the full error message and additional helpful warnings.' + ); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error( + format.replace(/%s/g, function() { return args[argIndex++]; }) + ); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } +}; + +module.exports = invariant; + + +/***/ }), +/* 10 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +var YAMLException = __webpack_require__(54); + +var TYPE_CONSTRUCTOR_OPTIONS = [ + 'kind', + 'resolve', + 'construct', + 'instanceOf', + 'predicate', + 'represent', + 'defaultStyle', + 'styleAliases' +]; + +var YAML_NODE_KINDS = [ + 'scalar', + 'sequence', + 'mapping' +]; + +function compileStyleAliases(map) { + var result = {}; + + if (map !== null) { + Object.keys(map).forEach(function (style) { + map[style].forEach(function (alias) { + result[String(alias)] = style; + }); + }); + } + + return result; +} + +function Type(tag, options) { + options = options || {}; + + Object.keys(options).forEach(function (name) { + if (TYPE_CONSTRUCTOR_OPTIONS.indexOf(name) === -1) { + throw new YAMLException('Unknown option "' + name + '" is met in definition of "' + tag + '" YAML type.'); + } + }); + + // TODO: Add tag format check. + this.tag = tag; + this.kind = options['kind'] || null; + this.resolve = options['resolve'] || function () { return true; }; + this.construct = options['construct'] || function (data) { return data; }; + this.instanceOf = options['instanceOf'] || null; + this.predicate = options['predicate'] || null; + this.represent = options['represent'] || null; + this.defaultStyle = options['defaultStyle'] || null; + this.styleAliases = compileStyleAliases(options['styleAliases'] || null); + + if (YAML_NODE_KINDS.indexOf(this.kind) === -1) { + throw new YAMLException('Unknown kind "' + this.kind + '" is specified for "' + tag + '" YAML type.'); + } +} + +module.exports = Type; + + +/***/ }), +/* 11 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Observable; }); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_canReportError__ = __webpack_require__(322); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_toSubscriber__ = __webpack_require__(932); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__internal_symbol_observable__ = __webpack_require__(117); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_pipe__ = __webpack_require__(324); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__config__ = __webpack_require__(185); +/** PURE_IMPORTS_START _util_canReportError,_util_toSubscriber,_internal_symbol_observable,_util_pipe,_config PURE_IMPORTS_END */ + + + + + +var Observable = /*@__PURE__*/ (function () { + function Observable(subscribe) { + this._isScalar = false; + if (subscribe) { + this._subscribe = subscribe; + } + } + Observable.prototype.lift = function (operator) { + var observable = new Observable(); + observable.source = this; + observable.operator = operator; + return observable; + }; + Observable.prototype.subscribe = function (observerOrNext, error, complete) { + var operator = this.operator; + var sink = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_toSubscriber__["a" /* toSubscriber */])(observerOrNext, error, complete); + if (operator) { + operator.call(sink, this.source); + } + else { + sink.add(this.source || (__WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ? + this._subscribe(sink) : + this._trySubscribe(sink)); + } + if (__WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) { + if (sink.syncErrorThrowable) { + sink.syncErrorThrowable = false; + if (sink.syncErrorThrown) { + throw sink.syncErrorValue; + } + } + } + return sink; + }; + Observable.prototype._trySubscribe = function (sink) { + try { + return this._subscribe(sink); + } + catch (err) { + if (__WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) { + sink.syncErrorThrown = true; + sink.syncErrorValue = err; + } + if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_canReportError__["a" /* canReportError */])(sink)) { + sink.error(err); + } + else { + console.warn(err); + } + } + }; + Observable.prototype.forEach = function (next, promiseCtor) { + var _this = this; + promiseCtor = getPromiseCtor(promiseCtor); + return new promiseCtor(function (resolve, reject) { + var subscription; + subscription = _this.subscribe(function (value) { + try { + next(value); + } + catch (err) { + reject(err); + if (subscription) { + subscription.unsubscribe(); + } + } + }, reject, resolve); + }); + }; + Observable.prototype._subscribe = function (subscriber) { + var source = this.source; + return source && source.subscribe(subscriber); + }; + Observable.prototype[__WEBPACK_IMPORTED_MODULE_2__internal_symbol_observable__["a" /* observable */]] = function () { + return this; + }; + Observable.prototype.pipe = function () { + var operations = []; + for (var _i = 0; _i < arguments.length; _i++) { + operations[_i] = arguments[_i]; + } + if (operations.length === 0) { + return this; + } + return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_pipe__["b" /* pipeFromArray */])(operations)(this); + }; + Observable.prototype.toPromise = function (promiseCtor) { + var _this = this; + promiseCtor = getPromiseCtor(promiseCtor); + return new promiseCtor(function (resolve, reject) { + var value; + _this.subscribe(function (x) { return value = x; }, function (err) { return reject(err); }, function () { return resolve(value); }); + }); + }; + Observable.create = function (subscribe) { + return new Observable(subscribe); + }; + return Observable; +}()); + +function getPromiseCtor(promiseCtor) { + if (!promiseCtor) { + promiseCtor = __WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].Promise || Promise; + } + if (!promiseCtor) { + throw new Error('no Promise impl found'); + } + return promiseCtor; +} +//# sourceMappingURL=Observable.js.map + + +/***/ }), +/* 12 */ +/***/ (function(module, exports) { + +module.exports = require("crypto"); + +/***/ }), +/* 13 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return OuterSubscriber; }); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7); +/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */ + + +var OuterSubscriber = /*@__PURE__*/ (function (_super) { + __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](OuterSubscriber, _super); + function OuterSubscriber() { + return _super !== null && _super.apply(this, arguments) || this; + } + OuterSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) { + this.destination.next(innerValue); + }; + OuterSubscriber.prototype.notifyError = function (error, innerSub) { + this.destination.error(error); + }; + OuterSubscriber.prototype.notifyComplete = function (innerSub) { + this.destination.complete(); + }; + return OuterSubscriber; +}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */])); + +//# sourceMappingURL=OuterSubscriber.js.map + + +/***/ }), +/* 14 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony export (immutable) */ __webpack_exports__["a"] = subscribeToResult; +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__InnerSubscriber__ = __webpack_require__(84); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__subscribeTo__ = __webpack_require__(446); +/** PURE_IMPORTS_START _InnerSubscriber,_subscribeTo PURE_IMPORTS_END */ + + +function subscribeToResult(outerSubscriber, result, outerValue, outerIndex, destination) { + if (destination === void 0) { + destination = new __WEBPACK_IMPORTED_MODULE_0__InnerSubscriber__["a" /* InnerSubscriber */](outerSubscriber, outerValue, outerIndex); + } + if (destination.closed) { + return; + } + return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__subscribeTo__["a" /* subscribeTo */])(result)(destination); +} +//# sourceMappingURL=subscribeToResult.js.map + + +/***/ }), +/* 15 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/* eslint-disable node/no-deprecated-api */ + + + +var buffer = __webpack_require__(64) +var Buffer = buffer.Buffer + +var safer = {} + +var key + +for (key in buffer) { + if (!buffer.hasOwnProperty(key)) continue + if (key === 'SlowBuffer' || key === 'Buffer') continue + safer[key] = buffer[key] +} + +var Safer = safer.Buffer = {} +for (key in Buffer) { + if (!Buffer.hasOwnProperty(key)) continue + if (key === 'allocUnsafe' || key === 'allocUnsafeSlow') continue + Safer[key] = Buffer[key] +} + +safer.Buffer.prototype = Buffer.prototype + +if (!Safer.from || Safer.from === Uint8Array.from) { + Safer.from = function (value, encodingOrOffset, length) { + if (typeof value === 'number') { + throw new TypeError('The "value" argument must not be of type number. Received type ' + typeof value) + } + if (value && typeof value.length === 'undefined') { + throw new TypeError('The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type ' + typeof value) + } + return Buffer(value, encodingOrOffset, length) + } +} + +if (!Safer.alloc) { + Safer.alloc = function (size, fill, encoding) { + if (typeof size !== 'number') { + throw new TypeError('The "size" argument must be of type number. Received type ' + typeof size) + } + if (size < 0 || size >= 2 * (1 << 30)) { + throw new RangeError('The value "' + size + '" is invalid for option "size"') + } + var buf = Buffer(size) + if (!fill || fill.length === 0) { + buf.fill(0) + } else if (typeof encoding === 'string') { + buf.fill(fill, encoding) + } else { + buf.fill(fill) + } + return buf + } +} + +if (!safer.kStringMaxLength) { + try { + safer.kStringMaxLength = process.binding('buffer').kStringMaxLength + } catch (e) { + // we can't determine kStringMaxLength in environments where process.binding + // is unsupported, so let's not set it + } +} + +if (!safer.constants) { + safer.constants = { + MAX_LENGTH: safer.kMaxLength + } + if (safer.kStringMaxLength) { + safer.constants.MAX_STRING_LENGTH = safer.kStringMaxLength + } +} + +module.exports = safer + + +/***/ }), +/* 16 */ +/***/ (function(module, exports, __webpack_require__) { + +// Copyright (c) 2012, Mark Cavage. All rights reserved. +// Copyright 2015 Joyent, Inc. + +var assert = __webpack_require__(28); +var Stream = __webpack_require__(23).Stream; +var util = __webpack_require__(3); + + +///--- Globals + +/* JSSTYLED */ +var UUID_REGEXP = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/; + + +///--- Internal + +function _capitalize(str) { + return (str.charAt(0).toUpperCase() + str.slice(1)); +} + +function _toss(name, expected, oper, arg, actual) { + throw new assert.AssertionError({ + message: util.format('%s (%s) is required', name, expected), + actual: (actual === undefined) ? typeof (arg) : actual(arg), + expected: expected, + operator: oper || '===', + stackStartFunction: _toss.caller + }); +} + +function _getClass(arg) { + return (Object.prototype.toString.call(arg).slice(8, -1)); +} + +function noop() { + // Why even bother with asserts? +} + + +///--- Exports + +var types = { + bool: { + check: function (arg) { return typeof (arg) === 'boolean'; } + }, + func: { + check: function (arg) { return typeof (arg) === 'function'; } + }, + string: { + check: function (arg) { return typeof (arg) === 'string'; } + }, + object: { + check: function (arg) { + return typeof (arg) === 'object' && arg !== null; + } + }, + number: { + check: function (arg) { + return typeof (arg) === 'number' && !isNaN(arg); + } + }, + finite: { + check: function (arg) { + return typeof (arg) === 'number' && !isNaN(arg) && isFinite(arg); + } + }, + buffer: { + check: function (arg) { return Buffer.isBuffer(arg); }, + operator: 'Buffer.isBuffer' + }, + array: { + check: function (arg) { return Array.isArray(arg); }, + operator: 'Array.isArray' + }, + stream: { + check: function (arg) { return arg instanceof Stream; }, + operator: 'instanceof', + actual: _getClass + }, + date: { + check: function (arg) { return arg instanceof Date; }, + operator: 'instanceof', + actual: _getClass + }, + regexp: { + check: function (arg) { return arg instanceof RegExp; }, + operator: 'instanceof', + actual: _getClass + }, + uuid: { + check: function (arg) { + return typeof (arg) === 'string' && UUID_REGEXP.test(arg); + }, + operator: 'isUUID' + } +}; + +function _setExports(ndebug) { + var keys = Object.keys(types); + var out; + + /* re-export standard assert */ + if (process.env.NODE_NDEBUG) { + out = noop; + } else { + out = function (arg, msg) { + if (!arg) { + _toss(msg, 'true', arg); + } + }; + } + + /* standard checks */ + keys.forEach(function (k) { + if (ndebug) { + out[k] = noop; + return; + } + var type = types[k]; + out[k] = function (arg, msg) { + if (!type.check(arg)) { + _toss(msg, k, type.operator, arg, type.actual); + } + }; + }); + + /* optional checks */ + keys.forEach(function (k) { + var name = 'optional' + _capitalize(k); + if (ndebug) { + out[name] = noop; + return; + } + var type = types[k]; + out[name] = function (arg, msg) { + if (arg === undefined || arg === null) { + return; + } + if (!type.check(arg)) { + _toss(msg, k, type.operator, arg, type.actual); + } + }; + }); + + /* arrayOf checks */ + keys.forEach(function (k) { + var name = 'arrayOf' + _capitalize(k); + if (ndebug) { + out[name] = noop; + return; + } + var type = types[k]; + var expected = '[' + k + ']'; + out[name] = function (arg, msg) { + if (!Array.isArray(arg)) { + _toss(msg, expected, type.operator, arg, type.actual); + } + var i; + for (i = 0; i < arg.length; i++) { + if (!type.check(arg[i])) { + _toss(msg, expected, type.operator, arg, type.actual); + } + } + }; + }); + + /* optionalArrayOf checks */ + keys.forEach(function (k) { + var name = 'optionalArrayOf' + _capitalize(k); + if (ndebug) { + out[name] = noop; + return; + } + var type = types[k]; + var expected = '[' + k + ']'; + out[name] = function (arg, msg) { + if (arg === undefined || arg === null) { + return; + } + if (!Array.isArray(arg)) { + _toss(msg, expected, type.operator, arg, type.actual); + } + var i; + for (i = 0; i < arg.length; i++) { + if (!type.check(arg[i])) { + _toss(msg, expected, type.operator, arg, type.actual); + } + } + }; + }); + + /* re-export built-in assertions */ + Object.keys(assert).forEach(function (k) { + if (k === 'AssertionError') { + out[k] = assert[k]; + return; + } + if (ndebug) { + out[k] = noop; + return; + } + out[k] = assert[k]; + }); + + /* export ourselves (for unit tests _only_) */ + out._setExports = _setExports; + + return out; +} + +module.exports = _setExports(process.env.NODE_NDEBUG); + + +/***/ }), +/* 17 */ +/***/ (function(module, exports) { + +// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 +var global = module.exports = typeof window != 'undefined' && window.Math == Math + ? window : typeof self != 'undefined' && self.Math == Math ? self + // eslint-disable-next-line no-new-func + : Function('return this')(); +if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef + + +/***/ }), +/* 18 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.sortAlpha = sortAlpha; +exports.sortOptionsByFlags = sortOptionsByFlags; +exports.entries = entries; +exports.removePrefix = removePrefix; +exports.removeSuffix = removeSuffix; +exports.addSuffix = addSuffix; +exports.hyphenate = hyphenate; +exports.camelCase = camelCase; +exports.compareSortedArrays = compareSortedArrays; +exports.sleep = sleep; +const _camelCase = __webpack_require__(230); + +function sortAlpha(a, b) { + // sort alphabetically in a deterministic way + const shortLen = Math.min(a.length, b.length); + for (let i = 0; i < shortLen; i++) { + const aChar = a.charCodeAt(i); + const bChar = b.charCodeAt(i); + if (aChar !== bChar) { + return aChar - bChar; + } + } + return a.length - b.length; +} + +function sortOptionsByFlags(a, b) { + const aOpt = a.flags.replace(/-/g, ''); + const bOpt = b.flags.replace(/-/g, ''); + return sortAlpha(aOpt, bOpt); +} + +function entries(obj) { + const entries = []; + if (obj) { + for (const key in obj) { + entries.push([key, obj[key]]); + } + } + return entries; +} + +function removePrefix(pattern, prefix) { + if (pattern.startsWith(prefix)) { + pattern = pattern.slice(prefix.length); + } + + return pattern; +} + +function removeSuffix(pattern, suffix) { + if (pattern.endsWith(suffix)) { + return pattern.slice(0, -suffix.length); + } + + return pattern; +} + +function addSuffix(pattern, suffix) { + if (!pattern.endsWith(suffix)) { + return pattern + suffix; + } + + return pattern; +} + +function hyphenate(str) { + return str.replace(/[A-Z]/g, match => { + return '-' + match.charAt(0).toLowerCase(); + }); +} + +function camelCase(str) { + if (/[A-Z]/.test(str)) { + return null; + } else { + return _camelCase(str); + } +} + +function compareSortedArrays(array1, array2) { + if (array1.length !== array2.length) { + return false; + } + for (let i = 0, len = array1.length; i < len; i++) { + if (array1[i] !== array2[i]) { + return false; + } + } + return true; +} + +function sleep(ms) { + return new Promise(resolve => { + setTimeout(resolve, ms); + }); +} + +/***/ }), +/* 19 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.stringify = exports.parse = undefined; + +var _asyncToGenerator2; + +function _load_asyncToGenerator() { + return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2)); +} + +var _parse; + +function _load_parse() { + return _parse = __webpack_require__(105); +} + +Object.defineProperty(exports, 'parse', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_parse || _load_parse()).default; + } +}); + +var _stringify; + +function _load_stringify() { + return _stringify = __webpack_require__(199); +} + +Object.defineProperty(exports, 'stringify', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_stringify || _load_stringify()).default; + } +}); +exports.implodeEntry = implodeEntry; +exports.explodeEntry = explodeEntry; + +var _misc; + +function _load_misc() { + return _misc = __webpack_require__(18); +} + +var _normalizePattern; + +function _load_normalizePattern() { + return _normalizePattern = __webpack_require__(37); +} + +var _parse2; + +function _load_parse2() { + return _parse2 = _interopRequireDefault(__webpack_require__(105)); +} + +var _constants; + +function _load_constants() { + return _constants = __webpack_require__(8); +} + +var _fs; + +function _load_fs() { + return _fs = _interopRequireWildcard(__webpack_require__(4)); +} + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +const invariant = __webpack_require__(9); + +const path = __webpack_require__(0); +const ssri = __webpack_require__(65); + +function getName(pattern) { + return (0, (_normalizePattern || _load_normalizePattern()).normalizePattern)(pattern).name; +} + +function blankObjectUndefined(obj) { + return obj && Object.keys(obj).length ? obj : undefined; +} + +function keyForRemote(remote) { + return remote.resolved || (remote.reference && remote.hash ? `${remote.reference}#${remote.hash}` : null); +} + +function serializeIntegrity(integrity) { + // We need this because `Integrity.toString()` does not use sorting to ensure a stable string output + // See https://git.io/vx2Hy + return integrity.toString().split(' ').sort().join(' '); +} + +function implodeEntry(pattern, obj) { + const inferredName = getName(pattern); + const integrity = obj.integrity ? serializeIntegrity(obj.integrity) : ''; + const imploded = { + name: inferredName === obj.name ? undefined : obj.name, + version: obj.version, + uid: obj.uid === obj.version ? undefined : obj.uid, + resolved: obj.resolved, + registry: obj.registry === 'npm' ? undefined : obj.registry, + dependencies: blankObjectUndefined(obj.dependencies), + optionalDependencies: blankObjectUndefined(obj.optionalDependencies), + permissions: blankObjectUndefined(obj.permissions), + prebuiltVariants: blankObjectUndefined(obj.prebuiltVariants) + }; + if (integrity) { + imploded.integrity = integrity; + } + return imploded; +} + +function explodeEntry(pattern, obj) { + obj.optionalDependencies = obj.optionalDependencies || {}; + obj.dependencies = obj.dependencies || {}; + obj.uid = obj.uid || obj.version; + obj.permissions = obj.permissions || {}; + obj.registry = obj.registry || 'npm'; + obj.name = obj.name || getName(pattern); + const integrity = obj.integrity; + if (integrity && integrity.isIntegrity) { + obj.integrity = ssri.parse(integrity); + } + return obj; +} + +class Lockfile { + constructor({ cache, source, parseResultType } = {}) { + this.source = source || ''; + this.cache = cache; + this.parseResultType = parseResultType; + } + + // source string if the `cache` was parsed + + + // if true, we're parsing an old yarn file and need to update integrity fields + hasEntriesExistWithoutIntegrity() { + if (!this.cache) { + return false; + } + + for (const key in this.cache) { + // $FlowFixMe - `this.cache` is clearly defined at this point + if (!/^.*@(file:|http)/.test(key) && this.cache[key] && !this.cache[key].integrity) { + return true; + } + } + + return false; + } + + static fromDirectory(dir, reporter) { + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + // read the manifest in this directory + const lockfileLoc = path.join(dir, (_constants || _load_constants()).LOCKFILE_FILENAME); + + let lockfile; + let rawLockfile = ''; + let parseResult; + + if (yield (_fs || _load_fs()).exists(lockfileLoc)) { + rawLockfile = yield (_fs || _load_fs()).readFile(lockfileLoc); + parseResult = (0, (_parse2 || _load_parse2()).default)(rawLockfile, lockfileLoc); + + if (reporter) { + if (parseResult.type === 'merge') { + reporter.info(reporter.lang('lockfileMerged')); + } else if (parseResult.type === 'conflict') { + reporter.warn(reporter.lang('lockfileConflict')); + } + } + + lockfile = parseResult.object; + } else if (reporter) { + reporter.info(reporter.lang('noLockfileFound')); + } + + if (lockfile && lockfile.__metadata) { + const lockfilev2 = lockfile; + lockfile = {}; + } + + return new Lockfile({ cache: lockfile, source: rawLockfile, parseResultType: parseResult && parseResult.type }); + })(); + } + + getLocked(pattern) { + const cache = this.cache; + if (!cache) { + return undefined; + } + + const shrunk = pattern in cache && cache[pattern]; + + if (typeof shrunk === 'string') { + return this.getLocked(shrunk); + } else if (shrunk) { + explodeEntry(pattern, shrunk); + return shrunk; + } + + return undefined; + } + + removePattern(pattern) { + const cache = this.cache; + if (!cache) { + return; + } + delete cache[pattern]; + } + + getLockfile(patterns) { + const lockfile = {}; + const seen = new Map(); + + // order by name so that lockfile manifest is assigned to the first dependency with this manifest + // the others that have the same remoteKey will just refer to the first + // ordering allows for consistency in lockfile when it is serialized + const sortedPatternsKeys = Object.keys(patterns).sort((_misc || _load_misc()).sortAlpha); + + for (var _iterator = sortedPatternsKeys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { + var _ref; + + if (_isArray) { + if (_i >= _iterator.length) break; + _ref = _iterator[_i++]; + } else { + _i = _iterator.next(); + if (_i.done) break; + _ref = _i.value; + } + + const pattern = _ref; + + const pkg = patterns[pattern]; + const remote = pkg._remote, + ref = pkg._reference; + + invariant(ref, 'Package is missing a reference'); + invariant(remote, 'Package is missing a remote'); + + const remoteKey = keyForRemote(remote); + const seenPattern = remoteKey && seen.get(remoteKey); + if (seenPattern) { + // no point in duplicating it + lockfile[pattern] = seenPattern; + + // if we're relying on our name being inferred and two of the patterns have + // different inferred names then we need to set it + if (!seenPattern.name && getName(pattern) !== pkg.name) { + seenPattern.name = pkg.name; + } + continue; + } + const obj = implodeEntry(pattern, { + name: pkg.name, + version: pkg.version, + uid: pkg._uid, + resolved: remote.resolved, + integrity: remote.integrity, + registry: remote.registry, + dependencies: pkg.dependencies, + peerDependencies: pkg.peerDependencies, + optionalDependencies: pkg.optionalDependencies, + permissions: ref.permissions, + prebuiltVariants: pkg.prebuiltVariants + }); + + lockfile[pattern] = obj; + + if (remoteKey) { + seen.set(remoteKey, obj); + } + } + + return lockfile; + } +} +exports.default = Lockfile; + +/***/ }), +/* 20 */ +/***/ (function(module, exports, __webpack_require__) { + +var store = __webpack_require__(133)('wks'); +var uid = __webpack_require__(137); +var Symbol = __webpack_require__(17).Symbol; +var USE_SYMBOL = typeof Symbol == 'function'; + +var $exports = module.exports = function (name) { + return store[name] || (store[name] = + USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name)); +}; + +$exports.store = store; + + +/***/ }), +/* 21 */ +/***/ (function(module, exports) { + +exports = module.exports = SemVer; + +// The debug function is excluded entirely from the minified version. +/* nomin */ var debug; +/* nomin */ if (typeof process === 'object' && + /* nomin */ process.env && + /* nomin */ process.env.NODE_DEBUG && + /* nomin */ /\bsemver\b/i.test(process.env.NODE_DEBUG)) + /* nomin */ debug = function() { + /* nomin */ var args = Array.prototype.slice.call(arguments, 0); + /* nomin */ args.unshift('SEMVER'); + /* nomin */ console.log.apply(console, args); + /* nomin */ }; +/* nomin */ else + /* nomin */ debug = function() {}; + +// Note: this is the semver.org version of the spec that it implements +// Not necessarily the package version of this code. +exports.SEMVER_SPEC_VERSION = '2.0.0'; + +var MAX_LENGTH = 256; +var MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991; + +// Max safe segment length for coercion. +var MAX_SAFE_COMPONENT_LENGTH = 16; + +// The actual regexps go on exports.re +var re = exports.re = []; +var src = exports.src = []; +var R = 0; + +// The following Regular Expressions can be used for tokenizing, +// validating, and parsing SemVer version strings. + +// ## Numeric Identifier +// A single `0`, or a non-zero digit followed by zero or more digits. + +var NUMERICIDENTIFIER = R++; +src[NUMERICIDENTIFIER] = '0|[1-9]\\d*'; +var NUMERICIDENTIFIERLOOSE = R++; +src[NUMERICIDENTIFIERLOOSE] = '[0-9]+'; + + +// ## Non-numeric Identifier +// Zero or more digits, followed by a letter or hyphen, and then zero or +// more letters, digits, or hyphens. + +var NONNUMERICIDENTIFIER = R++; +src[NONNUMERICIDENTIFIER] = '\\d*[a-zA-Z-][a-zA-Z0-9-]*'; + + +// ## Main Version +// Three dot-separated numeric identifiers. + +var MAINVERSION = R++; +src[MAINVERSION] = '(' + src[NUMERICIDENTIFIER] + ')\\.' + + '(' + src[NUMERICIDENTIFIER] + ')\\.' + + '(' + src[NUMERICIDENTIFIER] + ')'; + +var MAINVERSIONLOOSE = R++; +src[MAINVERSIONLOOSE] = '(' + src[NUMERICIDENTIFIERLOOSE] + ')\\.' + + '(' + src[NUMERICIDENTIFIERLOOSE] + ')\\.' + + '(' + src[NUMERICIDENTIFIERLOOSE] + ')'; + +// ## Pre-release Version Identifier +// A numeric identifier, or a non-numeric identifier. + +var PRERELEASEIDENTIFIER = R++; +src[PRERELEASEIDENTIFIER] = '(?:' + src[NUMERICIDENTIFIER] + + '|' + src[NONNUMERICIDENTIFIER] + ')'; + +var PRERELEASEIDENTIFIERLOOSE = R++; +src[PRERELEASEIDENTIFIERLOOSE] = '(?:' + src[NUMERICIDENTIFIERLOOSE] + + '|' + src[NONNUMERICIDENTIFIER] + ')'; + + +// ## Pre-release Version +// Hyphen, followed by one or more dot-separated pre-release version +// identifiers. + +var PRERELEASE = R++; +src[PRERELEASE] = '(?:-(' + src[PRERELEASEIDENTIFIER] + + '(?:\\.' + src[PRERELEASEIDENTIFIER] + ')*))'; + +var PRERELEASELOOSE = R++; +src[PRERELEASELOOSE] = '(?:-?(' + src[PRERELEASEIDENTIFIERLOOSE] + + '(?:\\.' + src[PRERELEASEIDENTIFIERLOOSE] + ')*))'; + +// ## Build Metadata Identifier +// Any combination of digits, letters, or hyphens. + +var BUILDIDENTIFIER = R++; +src[BUILDIDENTIFIER] = '[0-9A-Za-z-]+'; + +// ## Build Metadata +// Plus sign, followed by one or more period-separated build metadata +// identifiers. + +var BUILD = R++; +src[BUILD] = '(?:\\+(' + src[BUILDIDENTIFIER] + + '(?:\\.' + src[BUILDIDENTIFIER] + ')*))'; + + +// ## Full Version String +// A main version, followed optionally by a pre-release version and +// build metadata. + +// Note that the only major, minor, patch, and pre-release sections of +// the version string are capturing groups. The build metadata is not a +// capturing group, because it should not ever be used in version +// comparison. + +var FULL = R++; +var FULLPLAIN = 'v?' + src[MAINVERSION] + + src[PRERELEASE] + '?' + + src[BUILD] + '?'; + +src[FULL] = '^' + FULLPLAIN + '$'; + +// like full, but allows v1.2.3 and =1.2.3, which people do sometimes. +// also, 1.0.0alpha1 (prerelease without the hyphen) which is pretty +// common in the npm registry. +var LOOSEPLAIN = '[v=\\s]*' + src[MAINVERSIONLOOSE] + + src[PRERELEASELOOSE] + '?' + + src[BUILD] + '?'; + +var LOOSE = R++; +src[LOOSE] = '^' + LOOSEPLAIN + '$'; + +var GTLT = R++; +src[GTLT] = '((?:<|>)?=?)'; + +// Something like "2.*" or "1.2.x". +// Note that "x.x" is a valid xRange identifer, meaning "any version" +// Only the first item is strictly required. +var XRANGEIDENTIFIERLOOSE = R++; +src[XRANGEIDENTIFIERLOOSE] = src[NUMERICIDENTIFIERLOOSE] + '|x|X|\\*'; +var XRANGEIDENTIFIER = R++; +src[XRANGEIDENTIFIER] = src[NUMERICIDENTIFIER] + '|x|X|\\*'; + +var XRANGEPLAIN = R++; +src[XRANGEPLAIN] = '[v=\\s]*(' + src[XRANGEIDENTIFIER] + ')' + + '(?:\\.(' + src[XRANGEIDENTIFIER] + ')' + + '(?:\\.(' + src[XRANGEIDENTIFIER] + ')' + + '(?:' + src[PRERELEASE] + ')?' + + src[BUILD] + '?' + + ')?)?'; + +var XRANGEPLAINLOOSE = R++; +src[XRANGEPLAINLOOSE] = '[v=\\s]*(' + src[XRANGEIDENTIFIERLOOSE] + ')' + + '(?:\\.(' + src[XRANGEIDENTIFIERLOOSE] + ')' + + '(?:\\.(' + src[XRANGEIDENTIFIERLOOSE] + ')' + + '(?:' + src[PRERELEASELOOSE] + ')?' + + src[BUILD] + '?' + + ')?)?'; + +var XRANGE = R++; +src[XRANGE] = '^' + src[GTLT] + '\\s*' + src[XRANGEPLAIN] + '$'; +var XRANGELOOSE = R++; +src[XRANGELOOSE] = '^' + src[GTLT] + '\\s*' + src[XRANGEPLAINLOOSE] + '$'; + +// Coercion. +// Extract anything that could conceivably be a part of a valid semver +var COERCE = R++; +src[COERCE] = '(?:^|[^\\d])' + + '(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '})' + + '(?:\\.(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '}))?' + + '(?:\\.(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '}))?' + + '(?:$|[^\\d])'; + +// Tilde ranges. +// Meaning is "reasonably at or greater than" +var LONETILDE = R++; +src[LONETILDE] = '(?:~>?)'; + +var TILDETRIM = R++; +src[TILDETRIM] = '(\\s*)' + src[LONETILDE] + '\\s+'; +re[TILDETRIM] = new RegExp(src[TILDETRIM], 'g'); +var tildeTrimReplace = '$1~'; + +var TILDE = R++; +src[TILDE] = '^' + src[LONETILDE] + src[XRANGEPLAIN] + '$'; +var TILDELOOSE = R++; +src[TILDELOOSE] = '^' + src[LONETILDE] + src[XRANGEPLAINLOOSE] + '$'; + +// Caret ranges. +// Meaning is "at least and backwards compatible with" +var LONECARET = R++; +src[LONECARET] = '(?:\\^)'; + +var CARETTRIM = R++; +src[CARETTRIM] = '(\\s*)' + src[LONECARET] + '\\s+'; +re[CARETTRIM] = new RegExp(src[CARETTRIM], 'g'); +var caretTrimReplace = '$1^'; + +var CARET = R++; +src[CARET] = '^' + src[LONECARET] + src[XRANGEPLAIN] + '$'; +var CARETLOOSE = R++; +src[CARETLOOSE] = '^' + src[LONECARET] + src[XRANGEPLAINLOOSE] + '$'; + +// A simple gt/lt/eq thing, or just "" to indicate "any version" +var COMPARATORLOOSE = R++; +src[COMPARATORLOOSE] = '^' + src[GTLT] + '\\s*(' + LOOSEPLAIN + ')$|^$'; +var COMPARATOR = R++; +src[COMPARATOR] = '^' + src[GTLT] + '\\s*(' + FULLPLAIN + ')$|^$'; + + +// An expression to strip any whitespace between the gtlt and the thing +// it modifies, so that `> 1.2.3` ==> `>1.2.3` +var COMPARATORTRIM = R++; +src[COMPARATORTRIM] = '(\\s*)' + src[GTLT] + + '\\s*(' + LOOSEPLAIN + '|' + src[XRANGEPLAIN] + ')'; + +// this one has to use the /g flag +re[COMPARATORTRIM] = new RegExp(src[COMPARATORTRIM], 'g'); +var comparatorTrimReplace = '$1$2$3'; + + +// Something like `1.2.3 - 1.2.4` +// Note that these all use the loose form, because they'll be +// checked against either the strict or loose comparator form +// later. +var HYPHENRANGE = R++; +src[HYPHENRANGE] = '^\\s*(' + src[XRANGEPLAIN] + ')' + + '\\s+-\\s+' + + '(' + src[XRANGEPLAIN] + ')' + + '\\s*$'; + +var HYPHENRANGELOOSE = R++; +src[HYPHENRANGELOOSE] = '^\\s*(' + src[XRANGEPLAINLOOSE] + ')' + + '\\s+-\\s+' + + '(' + src[XRANGEPLAINLOOSE] + ')' + + '\\s*$'; + +// Star ranges basically just allow anything at all. +var STAR = R++; +src[STAR] = '(<|>)?=?\\s*\\*'; + +// Compile to actual regexp objects. +// All are flag-free, unless they were created above with a flag. +for (var i = 0; i < R; i++) { + debug(i, src[i]); + if (!re[i]) + re[i] = new RegExp(src[i]); +} + +exports.parse = parse; +function parse(version, loose) { + if (version instanceof SemVer) + return version; + + if (typeof version !== 'string') + return null; + + if (version.length > MAX_LENGTH) + return null; + + var r = loose ? re[LOOSE] : re[FULL]; + if (!r.test(version)) + return null; + + try { + return new SemVer(version, loose); + } catch (er) { + return null; + } +} + +exports.valid = valid; +function valid(version, loose) { + var v = parse(version, loose); + return v ? v.version : null; +} + + +exports.clean = clean; +function clean(version, loose) { + var s = parse(version.trim().replace(/^[=v]+/, ''), loose); + return s ? s.version : null; +} + +exports.SemVer = SemVer; + +function SemVer(version, loose) { + if (version instanceof SemVer) { + if (version.loose === loose) + return version; + else + version = version.version; + } else if (typeof version !== 'string') { + throw new TypeError('Invalid Version: ' + version); + } + + if (version.length > MAX_LENGTH) + throw new TypeError('version is longer than ' + MAX_LENGTH + ' characters') + + if (!(this instanceof SemVer)) + return new SemVer(version, loose); + + debug('SemVer', version, loose); + this.loose = loose; + var m = version.trim().match(loose ? re[LOOSE] : re[FULL]); + + if (!m) + throw new TypeError('Invalid Version: ' + version); + + this.raw = version; + + // these are actually numbers + this.major = +m[1]; + this.minor = +m[2]; + this.patch = +m[3]; + + if (this.major > MAX_SAFE_INTEGER || this.major < 0) + throw new TypeError('Invalid major version') + + if (this.minor > MAX_SAFE_INTEGER || this.minor < 0) + throw new TypeError('Invalid minor version') + + if (this.patch > MAX_SAFE_INTEGER || this.patch < 0) + throw new TypeError('Invalid patch version') + + // numberify any prerelease numeric ids + if (!m[4]) + this.prerelease = []; + else + this.prerelease = m[4].split('.').map(function(id) { + if (/^[0-9]+$/.test(id)) { + var num = +id; + if (num >= 0 && num < MAX_SAFE_INTEGER) + return num; + } + return id; + }); + + this.build = m[5] ? m[5].split('.') : []; + this.format(); +} + +SemVer.prototype.format = function() { + this.version = this.major + '.' + this.minor + '.' + this.patch; + if (this.prerelease.length) + this.version += '-' + this.prerelease.join('.'); + return this.version; +}; + +SemVer.prototype.toString = function() { + return this.version; +}; + +SemVer.prototype.compare = function(other) { + debug('SemVer.compare', this.version, this.loose, other); + if (!(other instanceof SemVer)) + other = new SemVer(other, this.loose); + + return this.compareMain(other) || this.comparePre(other); +}; + +SemVer.prototype.compareMain = function(other) { + if (!(other instanceof SemVer)) + other = new SemVer(other, this.loose); + + return compareIdentifiers(this.major, other.major) || + compareIdentifiers(this.minor, other.minor) || + compareIdentifiers(this.patch, other.patch); +}; + +SemVer.prototype.comparePre = function(other) { + if (!(other instanceof SemVer)) + other = new SemVer(other, this.loose); + + // NOT having a prerelease is > having one + if (this.prerelease.length && !other.prerelease.length) + return -1; + else if (!this.prerelease.length && other.prerelease.length) + return 1; + else if (!this.prerelease.length && !other.prerelease.length) + return 0; + + var i = 0; + do { + var a = this.prerelease[i]; + var b = other.prerelease[i]; + debug('prerelease compare', i, a, b); + if (a === undefined && b === undefined) + return 0; + else if (b === undefined) + return 1; + else if (a === undefined) + return -1; + else if (a === b) + continue; + else + return compareIdentifiers(a, b); + } while (++i); +}; + +// preminor will bump the version up to the next minor release, and immediately +// down to pre-release. premajor and prepatch work the same way. +SemVer.prototype.inc = function(release, identifier) { + switch (release) { + case 'premajor': + this.prerelease.length = 0; + this.patch = 0; + this.minor = 0; + this.major++; + this.inc('pre', identifier); + break; + case 'preminor': + this.prerelease.length = 0; + this.patch = 0; + this.minor++; + this.inc('pre', identifier); + break; + case 'prepatch': + // If this is already a prerelease, it will bump to the next version + // drop any prereleases that might already exist, since they are not + // relevant at this point. + this.prerelease.length = 0; + this.inc('patch', identifier); + this.inc('pre', identifier); + break; + // If the input is a non-prerelease version, this acts the same as + // prepatch. + case 'prerelease': + if (this.prerelease.length === 0) + this.inc('patch', identifier); + this.inc('pre', identifier); + break; + + case 'major': + // If this is a pre-major version, bump up to the same major version. + // Otherwise increment major. + // 1.0.0-5 bumps to 1.0.0 + // 1.1.0 bumps to 2.0.0 + if (this.minor !== 0 || this.patch !== 0 || this.prerelease.length === 0) + this.major++; + this.minor = 0; + this.patch = 0; + this.prerelease = []; + break; + case 'minor': + // If this is a pre-minor version, bump up to the same minor version. + // Otherwise increment minor. + // 1.2.0-5 bumps to 1.2.0 + // 1.2.1 bumps to 1.3.0 + if (this.patch !== 0 || this.prerelease.length === 0) + this.minor++; + this.patch = 0; + this.prerelease = []; + break; + case 'patch': + // If this is not a pre-release version, it will increment the patch. + // If it is a pre-release it will bump up to the same patch version. + // 1.2.0-5 patches to 1.2.0 + // 1.2.0 patches to 1.2.1 + if (this.prerelease.length === 0) + this.patch++; + this.prerelease = []; + break; + // This probably shouldn't be used publicly. + // 1.0.0 "pre" would become 1.0.0-0 which is the wrong direction. + case 'pre': + if (this.prerelease.length === 0) + this.prerelease = [0]; + else { + var i = this.prerelease.length; + while (--i >= 0) { + if (typeof this.prerelease[i] === 'number') { + this.prerelease[i]++; + i = -2; + } + } + if (i === -1) // didn't increment anything + this.prerelease.push(0); + } + if (identifier) { + // 1.2.0-beta.1 bumps to 1.2.0-beta.2, + // 1.2.0-beta.fooblz or 1.2.0-beta bumps to 1.2.0-beta.0 + if (this.prerelease[0] === identifier) { + if (isNaN(this.prerelease[1])) + this.prerelease = [identifier, 0]; + } else + this.prerelease = [identifier, 0]; + } + break; + + default: + throw new Error('invalid increment argument: ' + release); + } + this.format(); + this.raw = this.version; + return this; +}; + +exports.inc = inc; +function inc(version, release, loose, identifier) { + if (typeof(loose) === 'string') { + identifier = loose; + loose = undefined; + } + + try { + return new SemVer(version, loose).inc(release, identifier).version; + } catch (er) { + return null; + } +} + +exports.diff = diff; +function diff(version1, version2) { + if (eq(version1, version2)) { + return null; + } else { + var v1 = parse(version1); + var v2 = parse(version2); + if (v1.prerelease.length || v2.prerelease.length) { + for (var key in v1) { + if (key === 'major' || key === 'minor' || key === 'patch') { + if (v1[key] !== v2[key]) { + return 'pre'+key; + } + } + } + return 'prerelease'; + } + for (var key in v1) { + if (key === 'major' || key === 'minor' || key === 'patch') { + if (v1[key] !== v2[key]) { + return key; + } + } + } + } +} + +exports.compareIdentifiers = compareIdentifiers; + +var numeric = /^[0-9]+$/; +function compareIdentifiers(a, b) { + var anum = numeric.test(a); + var bnum = numeric.test(b); + + if (anum && bnum) { + a = +a; + b = +b; + } + + return (anum && !bnum) ? -1 : + (bnum && !anum) ? 1 : + a < b ? -1 : + a > b ? 1 : + 0; +} + +exports.rcompareIdentifiers = rcompareIdentifiers; +function rcompareIdentifiers(a, b) { + return compareIdentifiers(b, a); +} + +exports.major = major; +function major(a, loose) { + return new SemVer(a, loose).major; +} + +exports.minor = minor; +function minor(a, loose) { + return new SemVer(a, loose).minor; +} + +exports.patch = patch; +function patch(a, loose) { + return new SemVer(a, loose).patch; +} + +exports.compare = compare; +function compare(a, b, loose) { + return new SemVer(a, loose).compare(new SemVer(b, loose)); +} + +exports.compareLoose = compareLoose; +function compareLoose(a, b) { + return compare(a, b, true); +} + +exports.rcompare = rcompare; +function rcompare(a, b, loose) { + return compare(b, a, loose); +} + +exports.sort = sort; +function sort(list, loose) { + return list.sort(function(a, b) { + return exports.compare(a, b, loose); + }); +} + +exports.rsort = rsort; +function rsort(list, loose) { + return list.sort(function(a, b) { + return exports.rcompare(a, b, loose); + }); +} + +exports.gt = gt; +function gt(a, b, loose) { + return compare(a, b, loose) > 0; +} + +exports.lt = lt; +function lt(a, b, loose) { + return compare(a, b, loose) < 0; +} + +exports.eq = eq; +function eq(a, b, loose) { + return compare(a, b, loose) === 0; +} + +exports.neq = neq; +function neq(a, b, loose) { + return compare(a, b, loose) !== 0; +} + +exports.gte = gte; +function gte(a, b, loose) { + return compare(a, b, loose) >= 0; +} + +exports.lte = lte; +function lte(a, b, loose) { + return compare(a, b, loose) <= 0; +} + +exports.cmp = cmp; +function cmp(a, op, b, loose) { + var ret; + switch (op) { + case '===': + if (typeof a === 'object') a = a.version; + if (typeof b === 'object') b = b.version; + ret = a === b; + break; + case '!==': + if (typeof a === 'object') a = a.version; + if (typeof b === 'object') b = b.version; + ret = a !== b; + break; + case '': case '=': case '==': ret = eq(a, b, loose); break; + case '!=': ret = neq(a, b, loose); break; + case '>': ret = gt(a, b, loose); break; + case '>=': ret = gte(a, b, loose); break; + case '<': ret = lt(a, b, loose); break; + case '<=': ret = lte(a, b, loose); break; + default: throw new TypeError('Invalid operator: ' + op); + } + return ret; +} + +exports.Comparator = Comparator; +function Comparator(comp, loose) { + if (comp instanceof Comparator) { + if (comp.loose === loose) + return comp; + else + comp = comp.value; + } + + if (!(this instanceof Comparator)) + return new Comparator(comp, loose); + + debug('comparator', comp, loose); + this.loose = loose; + this.parse(comp); + + if (this.semver === ANY) + this.value = ''; + else + this.value = this.operator + this.semver.version; + + debug('comp', this); +} + +var ANY = {}; +Comparator.prototype.parse = function(comp) { + var r = this.loose ? re[COMPARATORLOOSE] : re[COMPARATOR]; + var m = comp.match(r); + + if (!m) + throw new TypeError('Invalid comparator: ' + comp); + + this.operator = m[1]; + if (this.operator === '=') + this.operator = ''; + + // if it literally is just '>' or '' then allow anything. + if (!m[2]) + this.semver = ANY; + else + this.semver = new SemVer(m[2], this.loose); +}; + +Comparator.prototype.toString = function() { + return this.value; +}; + +Comparator.prototype.test = function(version) { + debug('Comparator.test', version, this.loose); + + if (this.semver === ANY) + return true; + + if (typeof version === 'string') + version = new SemVer(version, this.loose); + + return cmp(version, this.operator, this.semver, this.loose); +}; + +Comparator.prototype.intersects = function(comp, loose) { + if (!(comp instanceof Comparator)) { + throw new TypeError('a Comparator is required'); + } + + var rangeTmp; + + if (this.operator === '') { + rangeTmp = new Range(comp.value, loose); + return satisfies(this.value, rangeTmp, loose); + } else if (comp.operator === '') { + rangeTmp = new Range(this.value, loose); + return satisfies(comp.semver, rangeTmp, loose); + } + + var sameDirectionIncreasing = + (this.operator === '>=' || this.operator === '>') && + (comp.operator === '>=' || comp.operator === '>'); + var sameDirectionDecreasing = + (this.operator === '<=' || this.operator === '<') && + (comp.operator === '<=' || comp.operator === '<'); + var sameSemVer = this.semver.version === comp.semver.version; + var differentDirectionsInclusive = + (this.operator === '>=' || this.operator === '<=') && + (comp.operator === '>=' || comp.operator === '<='); + var oppositeDirectionsLessThan = + cmp(this.semver, '<', comp.semver, loose) && + ((this.operator === '>=' || this.operator === '>') && + (comp.operator === '<=' || comp.operator === '<')); + var oppositeDirectionsGreaterThan = + cmp(this.semver, '>', comp.semver, loose) && + ((this.operator === '<=' || this.operator === '<') && + (comp.operator === '>=' || comp.operator === '>')); + + return sameDirectionIncreasing || sameDirectionDecreasing || + (sameSemVer && differentDirectionsInclusive) || + oppositeDirectionsLessThan || oppositeDirectionsGreaterThan; +}; + + +exports.Range = Range; +function Range(range, loose) { + if (range instanceof Range) { + if (range.loose === loose) { + return range; + } else { + return new Range(range.raw, loose); + } + } + + if (range instanceof Comparator) { + return new Range(range.value, loose); + } + + if (!(this instanceof Range)) + return new Range(range, loose); + + this.loose = loose; + + // First, split based on boolean or || + this.raw = range; + this.set = range.split(/\s*\|\|\s*/).map(function(range) { + return this.parseRange(range.trim()); + }, this).filter(function(c) { + // throw out any that are not relevant for whatever reason + return c.length; + }); + + if (!this.set.length) { + throw new TypeError('Invalid SemVer Range: ' + range); + } + + this.format(); +} + +Range.prototype.format = function() { + this.range = this.set.map(function(comps) { + return comps.join(' ').trim(); + }).join('||').trim(); + return this.range; +}; + +Range.prototype.toString = function() { + return this.range; +}; + +Range.prototype.parseRange = function(range) { + var loose = this.loose; + range = range.trim(); + debug('range', range, loose); + // `1.2.3 - 1.2.4` => `>=1.2.3 <=1.2.4` + var hr = loose ? re[HYPHENRANGELOOSE] : re[HYPHENRANGE]; + range = range.replace(hr, hyphenReplace); + debug('hyphen replace', range); + // `> 1.2.3 < 1.2.5` => `>1.2.3 <1.2.5` + range = range.replace(re[COMPARATORTRIM], comparatorTrimReplace); + debug('comparator trim', range, re[COMPARATORTRIM]); + + // `~ 1.2.3` => `~1.2.3` + range = range.replace(re[TILDETRIM], tildeTrimReplace); + + // `^ 1.2.3` => `^1.2.3` + range = range.replace(re[CARETTRIM], caretTrimReplace); + + // normalize spaces + range = range.split(/\s+/).join(' '); + + // At this point, the range is completely trimmed and + // ready to be split into comparators. + + var compRe = loose ? re[COMPARATORLOOSE] : re[COMPARATOR]; + var set = range.split(' ').map(function(comp) { + return parseComparator(comp, loose); + }).join(' ').split(/\s+/); + if (this.loose) { + // in loose mode, throw out any that are not valid comparators + set = set.filter(function(comp) { + return !!comp.match(compRe); + }); + } + set = set.map(function(comp) { + return new Comparator(comp, loose); + }); + + return set; +}; + +Range.prototype.intersects = function(range, loose) { + if (!(range instanceof Range)) { + throw new TypeError('a Range is required'); + } + + return this.set.some(function(thisComparators) { + return thisComparators.every(function(thisComparator) { + return range.set.some(function(rangeComparators) { + return rangeComparators.every(function(rangeComparator) { + return thisComparator.intersects(rangeComparator, loose); + }); + }); + }); + }); +}; + +// Mostly just for testing and legacy API reasons +exports.toComparators = toComparators; +function toComparators(range, loose) { + return new Range(range, loose).set.map(function(comp) { + return comp.map(function(c) { + return c.value; + }).join(' ').trim().split(' '); + }); +} + +// comprised of xranges, tildes, stars, and gtlt's at this point. +// already replaced the hyphen ranges +// turn into a set of JUST comparators. +function parseComparator(comp, loose) { + debug('comp', comp); + comp = replaceCarets(comp, loose); + debug('caret', comp); + comp = replaceTildes(comp, loose); + debug('tildes', comp); + comp = replaceXRanges(comp, loose); + debug('xrange', comp); + comp = replaceStars(comp, loose); + debug('stars', comp); + return comp; +} + +function isX(id) { + return !id || id.toLowerCase() === 'x' || id === '*'; +} + +// ~, ~> --> * (any, kinda silly) +// ~2, ~2.x, ~2.x.x, ~>2, ~>2.x ~>2.x.x --> >=2.0.0 <3.0.0 +// ~2.0, ~2.0.x, ~>2.0, ~>2.0.x --> >=2.0.0 <2.1.0 +// ~1.2, ~1.2.x, ~>1.2, ~>1.2.x --> >=1.2.0 <1.3.0 +// ~1.2.3, ~>1.2.3 --> >=1.2.3 <1.3.0 +// ~1.2.0, ~>1.2.0 --> >=1.2.0 <1.3.0 +function replaceTildes(comp, loose) { + return comp.trim().split(/\s+/).map(function(comp) { + return replaceTilde(comp, loose); + }).join(' '); +} + +function replaceTilde(comp, loose) { + var r = loose ? re[TILDELOOSE] : re[TILDE]; + return comp.replace(r, function(_, M, m, p, pr) { + debug('tilde', comp, _, M, m, p, pr); + var ret; + + if (isX(M)) + ret = ''; + else if (isX(m)) + ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0'; + else if (isX(p)) + // ~1.2 == >=1.2.0 <1.3.0 + ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0'; + else if (pr) { + debug('replaceTilde pr', pr); + if (pr.charAt(0) !== '-') + pr = '-' + pr; + ret = '>=' + M + '.' + m + '.' + p + pr + + ' <' + M + '.' + (+m + 1) + '.0'; + } else + // ~1.2.3 == >=1.2.3 <1.3.0 + ret = '>=' + M + '.' + m + '.' + p + + ' <' + M + '.' + (+m + 1) + '.0'; + + debug('tilde return', ret); + return ret; + }); +} + +// ^ --> * (any, kinda silly) +// ^2, ^2.x, ^2.x.x --> >=2.0.0 <3.0.0 +// ^2.0, ^2.0.x --> >=2.0.0 <3.0.0 +// ^1.2, ^1.2.x --> >=1.2.0 <2.0.0 +// ^1.2.3 --> >=1.2.3 <2.0.0 +// ^1.2.0 --> >=1.2.0 <2.0.0 +function replaceCarets(comp, loose) { + return comp.trim().split(/\s+/).map(function(comp) { + return replaceCaret(comp, loose); + }).join(' '); +} + +function replaceCaret(comp, loose) { + debug('caret', comp, loose); + var r = loose ? re[CARETLOOSE] : re[CARET]; + return comp.replace(r, function(_, M, m, p, pr) { + debug('caret', comp, _, M, m, p, pr); + var ret; + + if (isX(M)) + ret = ''; + else if (isX(m)) + ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0'; + else if (isX(p)) { + if (M === '0') + ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0'; + else + ret = '>=' + M + '.' + m + '.0 <' + (+M + 1) + '.0.0'; + } else if (pr) { + debug('replaceCaret pr', pr); + if (pr.charAt(0) !== '-') + pr = '-' + pr; + if (M === '0') { + if (m === '0') + ret = '>=' + M + '.' + m + '.' + p + pr + + ' <' + M + '.' + m + '.' + (+p + 1); + else + ret = '>=' + M + '.' + m + '.' + p + pr + + ' <' + M + '.' + (+m + 1) + '.0'; + } else + ret = '>=' + M + '.' + m + '.' + p + pr + + ' <' + (+M + 1) + '.0.0'; + } else { + debug('no pr'); + if (M === '0') { + if (m === '0') + ret = '>=' + M + '.' + m + '.' + p + + ' <' + M + '.' + m + '.' + (+p + 1); + else + ret = '>=' + M + '.' + m + '.' + p + + ' <' + M + '.' + (+m + 1) + '.0'; + } else + ret = '>=' + M + '.' + m + '.' + p + + ' <' + (+M + 1) + '.0.0'; + } + + debug('caret return', ret); + return ret; + }); +} + +function replaceXRanges(comp, loose) { + debug('replaceXRanges', comp, loose); + return comp.split(/\s+/).map(function(comp) { + return replaceXRange(comp, loose); + }).join(' '); +} + +function replaceXRange(comp, loose) { + comp = comp.trim(); + var r = loose ? re[XRANGELOOSE] : re[XRANGE]; + return comp.replace(r, function(ret, gtlt, M, m, p, pr) { + debug('xRange', comp, ret, gtlt, M, m, p, pr); + var xM = isX(M); + var xm = xM || isX(m); + var xp = xm || isX(p); + var anyX = xp; + + if (gtlt === '=' && anyX) + gtlt = ''; + + if (xM) { + if (gtlt === '>' || gtlt === '<') { + // nothing is allowed + ret = '<0.0.0'; + } else { + // nothing is forbidden + ret = '*'; + } + } else if (gtlt && anyX) { + // replace X with 0 + if (xm) + m = 0; + if (xp) + p = 0; + + if (gtlt === '>') { + // >1 => >=2.0.0 + // >1.2 => >=1.3.0 + // >1.2.3 => >= 1.2.4 + gtlt = '>='; + if (xm) { + M = +M + 1; + m = 0; + p = 0; + } else if (xp) { + m = +m + 1; + p = 0; + } + } else if (gtlt === '<=') { + // <=0.7.x is actually <0.8.0, since any 0.7.x should + // pass. Similarly, <=7.x is actually <8.0.0, etc. + gtlt = '<'; + if (xm) + M = +M + 1; + else + m = +m + 1; + } + + ret = gtlt + M + '.' + m + '.' + p; + } else if (xm) { + ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0'; + } else if (xp) { + ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0'; + } + + debug('xRange return', ret); + + return ret; + }); +} + +// Because * is AND-ed with everything else in the comparator, +// and '' means "any version", just remove the *s entirely. +function replaceStars(comp, loose) { + debug('replaceStars', comp, loose); + // Looseness is ignored here. star is always as loose as it gets! + return comp.trim().replace(re[STAR], ''); +} + +// This function is passed to string.replace(re[HYPHENRANGE]) +// M, m, patch, prerelease, build +// 1.2 - 3.4.5 => >=1.2.0 <=3.4.5 +// 1.2.3 - 3.4 => >=1.2.0 <3.5.0 Any 3.4.x will do +// 1.2 - 3.4 => >=1.2.0 <3.5.0 +function hyphenReplace($0, + from, fM, fm, fp, fpr, fb, + to, tM, tm, tp, tpr, tb) { + + if (isX(fM)) + from = ''; + else if (isX(fm)) + from = '>=' + fM + '.0.0'; + else if (isX(fp)) + from = '>=' + fM + '.' + fm + '.0'; + else + from = '>=' + from; + + if (isX(tM)) + to = ''; + else if (isX(tm)) + to = '<' + (+tM + 1) + '.0.0'; + else if (isX(tp)) + to = '<' + tM + '.' + (+tm + 1) + '.0'; + else if (tpr) + to = '<=' + tM + '.' + tm + '.' + tp + '-' + tpr; + else + to = '<=' + to; + + return (from + ' ' + to).trim(); +} + + +// if ANY of the sets match ALL of its comparators, then pass +Range.prototype.test = function(version) { + if (!version) + return false; + + if (typeof version === 'string') + version = new SemVer(version, this.loose); + + for (var i = 0; i < this.set.length; i++) { + if (testSet(this.set[i], version)) + return true; + } + return false; +}; + +function testSet(set, version) { + for (var i = 0; i < set.length; i++) { + if (!set[i].test(version)) + return false; + } + + if (version.prerelease.length) { + // Find the set of versions that are allowed to have prereleases + // For example, ^1.2.3-pr.1 desugars to >=1.2.3-pr.1 <2.0.0 + // That should allow `1.2.3-pr.2` to pass. + // However, `1.2.4-alpha.notready` should NOT be allowed, + // even though it's within the range set by the comparators. + for (var i = 0; i < set.length; i++) { + debug(set[i].semver); + if (set[i].semver === ANY) + continue; + + if (set[i].semver.prerelease.length > 0) { + var allowed = set[i].semver; + if (allowed.major === version.major && + allowed.minor === version.minor && + allowed.patch === version.patch) + return true; + } + } + + // Version has a -pre, but it's not one of the ones we like. + return false; + } + + return true; +} + +exports.satisfies = satisfies; +function satisfies(version, range, loose) { + try { + range = new Range(range, loose); + } catch (er) { + return false; + } + return range.test(version); +} + +exports.maxSatisfying = maxSatisfying; +function maxSatisfying(versions, range, loose) { + var max = null; + var maxSV = null; + try { + var rangeObj = new Range(range, loose); + } catch (er) { + return null; + } + versions.forEach(function (v) { + if (rangeObj.test(v)) { // satisfies(v, range, loose) + if (!max || maxSV.compare(v) === -1) { // compare(max, v, true) + max = v; + maxSV = new SemVer(max, loose); + } + } + }) + return max; +} + +exports.minSatisfying = minSatisfying; +function minSatisfying(versions, range, loose) { + var min = null; + var minSV = null; + try { + var rangeObj = new Range(range, loose); + } catch (er) { + return null; + } + versions.forEach(function (v) { + if (rangeObj.test(v)) { // satisfies(v, range, loose) + if (!min || minSV.compare(v) === 1) { // compare(min, v, true) + min = v; + minSV = new SemVer(min, loose); + } + } + }) + return min; +} + +exports.validRange = validRange; +function validRange(range, loose) { + try { + // Return '*' instead of '' so that truthiness works. + // This will throw if it's invalid anyway + return new Range(range, loose).range || '*'; + } catch (er) { + return null; + } +} + +// Determine if version is less than all the versions possible in the range +exports.ltr = ltr; +function ltr(version, range, loose) { + return outside(version, range, '<', loose); +} + +// Determine if version is greater than all the versions possible in the range. +exports.gtr = gtr; +function gtr(version, range, loose) { + return outside(version, range, '>', loose); +} + +exports.outside = outside; +function outside(version, range, hilo, loose) { + version = new SemVer(version, loose); + range = new Range(range, loose); + + var gtfn, ltefn, ltfn, comp, ecomp; + switch (hilo) { + case '>': + gtfn = gt; + ltefn = lte; + ltfn = lt; + comp = '>'; + ecomp = '>='; + break; + case '<': + gtfn = lt; + ltefn = gte; + ltfn = gt; + comp = '<'; + ecomp = '<='; + break; + default: + throw new TypeError('Must provide a hilo val of "<" or ">"'); + } + + // If it satisifes the range it is not outside + if (satisfies(version, range, loose)) { + return false; + } + + // From now on, variable terms are as if we're in "gtr" mode. + // but note that everything is flipped for the "ltr" function. + + for (var i = 0; i < range.set.length; ++i) { + var comparators = range.set[i]; + + var high = null; + var low = null; + + comparators.forEach(function(comparator) { + if (comparator.semver === ANY) { + comparator = new Comparator('>=0.0.0') + } + high = high || comparator; + low = low || comparator; + if (gtfn(comparator.semver, high.semver, loose)) { + high = comparator; + } else if (ltfn(comparator.semver, low.semver, loose)) { + low = comparator; + } + }); + + // If the edge version comparator has a operator then our version + // isn't outside it + if (high.operator === comp || high.operator === ecomp) { + return false; + } + + // If the lowest version comparator has an operator and our version + // is less than it then it isn't higher than the range + if ((!low.operator || low.operator === comp) && + ltefn(version, low.semver)) { + return false; + } else if (low.operator === ecomp && ltfn(version, low.semver)) { + return false; + } + } + return true; +} + +exports.prerelease = prerelease; +function prerelease(version, loose) { + var parsed = parse(version, loose); + return (parsed && parsed.prerelease.length) ? parsed.prerelease : null; +} + +exports.intersects = intersects; +function intersects(r1, r2, loose) { + r1 = new Range(r1, loose) + r2 = new Range(r2, loose) + return r1.intersects(r2) +} + +exports.coerce = coerce; +function coerce(version) { + if (version instanceof SemVer) + return version; + + if (typeof version !== 'string') + return null; + + var match = version.match(re[COERCE]); + + if (match == null) + return null; + + return parse((match[1] || '0') + '.' + (match[2] || '0') + '.' + (match[3] || '0')); +} + + +/***/ }), +/* 22 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _assign = __webpack_require__(591); + +var _assign2 = _interopRequireDefault(_assign); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _assign2.default || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; +}; + +/***/ }), +/* 23 */ +/***/ (function(module, exports) { + +module.exports = require("stream"); + +/***/ }), +/* 24 */ +/***/ (function(module, exports) { + +module.exports = require("url"); + +/***/ }), +/* 25 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Subscription; }); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_isArray__ = __webpack_require__(41); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isObject__ = __webpack_require__(444); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isFunction__ = __webpack_require__(154); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_tryCatch__ = __webpack_require__(56); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_errorObject__ = __webpack_require__(47); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__ = __webpack_require__(441); +/** PURE_IMPORTS_START _util_isArray,_util_isObject,_util_isFunction,_util_tryCatch,_util_errorObject,_util_UnsubscriptionError PURE_IMPORTS_END */ + + + + + + +var Subscription = /*@__PURE__*/ (function () { + function Subscription(unsubscribe) { + this.closed = false; + this._parent = null; + this._parents = null; + this._subscriptions = null; + if (unsubscribe) { + this._unsubscribe = unsubscribe; + } + } + Subscription.prototype.unsubscribe = function () { + var hasErrors = false; + var errors; + if (this.closed) { + return; + } + var _a = this, _parent = _a._parent, _parents = _a._parents, _unsubscribe = _a._unsubscribe, _subscriptions = _a._subscriptions; + this.closed = true; + this._parent = null; + this._parents = null; + this._subscriptions = null; + var index = -1; + var len = _parents ? _parents.length : 0; + while (_parent) { + _parent.remove(this); + _parent = ++index < len && _parents[index] || null; + } + if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isFunction__["a" /* isFunction */])(_unsubscribe)) { + var trial = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_tryCatch__["a" /* tryCatch */])(_unsubscribe).call(this); + if (trial === __WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */]) { + hasErrors = true; + errors = errors || (__WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e instanceof __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */] ? + flattenUnsubscriptionErrors(__WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e.errors) : [__WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e]); + } + } + if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_isArray__["a" /* isArray */])(_subscriptions)) { + index = -1; + len = _subscriptions.length; + while (++index < len) { + var sub = _subscriptions[index]; + if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isObject__["a" /* isObject */])(sub)) { + var trial = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_tryCatch__["a" /* tryCatch */])(sub.unsubscribe).call(sub); + if (trial === __WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */]) { + hasErrors = true; + errors = errors || []; + var err = __WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e; + if (err instanceof __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */]) { + errors = errors.concat(flattenUnsubscriptionErrors(err.errors)); + } + else { + errors.push(err); + } + } + } + } + } + if (hasErrors) { + throw new __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */](errors); + } + }; + Subscription.prototype.add = function (teardown) { + if (!teardown || (teardown === Subscription.EMPTY)) { + return Subscription.EMPTY; + } + if (teardown === this) { + return this; + } + var subscription = teardown; + switch (typeof teardown) { + case 'function': + subscription = new Subscription(teardown); + case 'object': + if (subscription.closed || typeof subscription.unsubscribe !== 'function') { + return subscription; + } + else if (this.closed) { + subscription.unsubscribe(); + return subscription; + } + else if (typeof subscription._addParent !== 'function') { + var tmp = subscription; + subscription = new Subscription(); + subscription._subscriptions = [tmp]; + } + break; + default: + throw new Error('unrecognized teardown ' + teardown + ' added to Subscription.'); + } + var subscriptions = this._subscriptions || (this._subscriptions = []); + subscriptions.push(subscription); + subscription._addParent(this); + return subscription; + }; + Subscription.prototype.remove = function (subscription) { + var subscriptions = this._subscriptions; + if (subscriptions) { + var subscriptionIndex = subscriptions.indexOf(subscription); + if (subscriptionIndex !== -1) { + subscriptions.splice(subscriptionIndex, 1); + } + } + }; + Subscription.prototype._addParent = function (parent) { + var _a = this, _parent = _a._parent, _parents = _a._parents; + if (!_parent || _parent === parent) { + this._parent = parent; + } + else if (!_parents) { + this._parents = [parent]; + } + else if (_parents.indexOf(parent) === -1) { + _parents.push(parent); + } + }; + Subscription.EMPTY = (function (empty) { + empty.closed = true; + return empty; + }(new Subscription())); + return Subscription; +}()); + +function flattenUnsubscriptionErrors(errors) { + return errors.reduce(function (errs, err) { return errs.concat((err instanceof __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */]) ? err.errors : err); }, []); +} +//# sourceMappingURL=Subscription.js.map + + +/***/ }), +/* 26 */ +/***/ (function(module, exports, __webpack_require__) { + +// Copyright 2015 Joyent, Inc. + +module.exports = { + bufferSplit: bufferSplit, + addRSAMissing: addRSAMissing, + calculateDSAPublic: calculateDSAPublic, + calculateED25519Public: calculateED25519Public, + calculateX25519Public: calculateX25519Public, + mpNormalize: mpNormalize, + mpDenormalize: mpDenormalize, + ecNormalize: ecNormalize, + countZeros: countZeros, + assertCompatible: assertCompatible, + isCompatible: isCompatible, + opensslKeyDeriv: opensslKeyDeriv, + opensshCipherInfo: opensshCipherInfo, + publicFromPrivateECDSA: publicFromPrivateECDSA, + zeroPadToLength: zeroPadToLength, + writeBitString: writeBitString, + readBitString: readBitString +}; + +var assert = __webpack_require__(16); +var Buffer = __webpack_require__(15).Buffer; +var PrivateKey = __webpack_require__(33); +var Key = __webpack_require__(27); +var crypto = __webpack_require__(12); +var algs = __webpack_require__(32); +var asn1 = __webpack_require__(66); + +var ec, jsbn; +var nacl; + +var MAX_CLASS_DEPTH = 3; + +function isCompatible(obj, klass, needVer) { + if (obj === null || typeof (obj) !== 'object') + return (false); + if (needVer === undefined) + needVer = klass.prototype._sshpkApiVersion; + if (obj instanceof klass && + klass.prototype._sshpkApiVersion[0] == needVer[0]) + return (true); + var proto = Object.getPrototypeOf(obj); + var depth = 0; + while (proto.constructor.name !== klass.name) { + proto = Object.getPrototypeOf(proto); + if (!proto || ++depth > MAX_CLASS_DEPTH) + return (false); + } + if (proto.constructor.name !== klass.name) + return (false); + var ver = proto._sshpkApiVersion; + if (ver === undefined) + ver = klass._oldVersionDetect(obj); + if (ver[0] != needVer[0] || ver[1] < needVer[1]) + return (false); + return (true); +} + +function assertCompatible(obj, klass, needVer, name) { + if (name === undefined) + name = 'object'; + assert.ok(obj, name + ' must not be null'); + assert.object(obj, name + ' must be an object'); + if (needVer === undefined) + needVer = klass.prototype._sshpkApiVersion; + if (obj instanceof klass && + klass.prototype._sshpkApiVersion[0] == needVer[0]) + return; + var proto = Object.getPrototypeOf(obj); + var depth = 0; + while (proto.constructor.name !== klass.name) { + proto = Object.getPrototypeOf(proto); + assert.ok(proto && ++depth <= MAX_CLASS_DEPTH, + name + ' must be a ' + klass.name + ' instance'); + } + assert.strictEqual(proto.constructor.name, klass.name, + name + ' must be a ' + klass.name + ' instance'); + var ver = proto._sshpkApiVersion; + if (ver === undefined) + ver = klass._oldVersionDetect(obj); + assert.ok(ver[0] == needVer[0] && ver[1] >= needVer[1], + name + ' must be compatible with ' + klass.name + ' klass ' + + 'version ' + needVer[0] + '.' + needVer[1]); +} + +var CIPHER_LEN = { + 'des-ede3-cbc': { key: 7, iv: 8 }, + 'aes-128-cbc': { key: 16, iv: 16 } +}; +var PKCS5_SALT_LEN = 8; + +function opensslKeyDeriv(cipher, salt, passphrase, count) { + assert.buffer(salt, 'salt'); + assert.buffer(passphrase, 'passphrase'); + assert.number(count, 'iteration count'); + + var clen = CIPHER_LEN[cipher]; + assert.object(clen, 'supported cipher'); + + salt = salt.slice(0, PKCS5_SALT_LEN); + + var D, D_prev, bufs; + var material = Buffer.alloc(0); + while (material.length < clen.key + clen.iv) { + bufs = []; + if (D_prev) + bufs.push(D_prev); + bufs.push(passphrase); + bufs.push(salt); + D = Buffer.concat(bufs); + for (var j = 0; j < count; ++j) + D = crypto.createHash('md5').update(D).digest(); + material = Buffer.concat([material, D]); + D_prev = D; + } + + return ({ + key: material.slice(0, clen.key), + iv: material.slice(clen.key, clen.key + clen.iv) + }); +} + +/* Count leading zero bits on a buffer */ +function countZeros(buf) { + var o = 0, obit = 8; + while (o < buf.length) { + var mask = (1 << obit); + if ((buf[o] & mask) === mask) + break; + obit--; + if (obit < 0) { + o++; + obit = 8; + } + } + return (o*8 + (8 - obit) - 1); +} + +function bufferSplit(buf, chr) { + assert.buffer(buf); + assert.string(chr); + + var parts = []; + var lastPart = 0; + var matches = 0; + for (var i = 0; i < buf.length; ++i) { + if (buf[i] === chr.charCodeAt(matches)) + ++matches; + else if (buf[i] === chr.charCodeAt(0)) + matches = 1; + else + matches = 0; + + if (matches >= chr.length) { + var newPart = i + 1; + parts.push(buf.slice(lastPart, newPart - matches)); + lastPart = newPart; + matches = 0; + } + } + if (lastPart <= buf.length) + parts.push(buf.slice(lastPart, buf.length)); + + return (parts); +} + +function ecNormalize(buf, addZero) { + assert.buffer(buf); + if (buf[0] === 0x00 && buf[1] === 0x04) { + if (addZero) + return (buf); + return (buf.slice(1)); + } else if (buf[0] === 0x04) { + if (!addZero) + return (buf); + } else { + while (buf[0] === 0x00) + buf = buf.slice(1); + if (buf[0] === 0x02 || buf[0] === 0x03) + throw (new Error('Compressed elliptic curve points ' + + 'are not supported')); + if (buf[0] !== 0x04) + throw (new Error('Not a valid elliptic curve point')); + if (!addZero) + return (buf); + } + var b = Buffer.alloc(buf.length + 1); + b[0] = 0x0; + buf.copy(b, 1); + return (b); +} + +function readBitString(der, tag) { + if (tag === undefined) + tag = asn1.Ber.BitString; + var buf = der.readString(tag, true); + assert.strictEqual(buf[0], 0x00, 'bit strings with unused bits are ' + + 'not supported (0x' + buf[0].toString(16) + ')'); + return (buf.slice(1)); +} + +function writeBitString(der, buf, tag) { + if (tag === undefined) + tag = asn1.Ber.BitString; + var b = Buffer.alloc(buf.length + 1); + b[0] = 0x00; + buf.copy(b, 1); + der.writeBuffer(b, tag); +} + +function mpNormalize(buf) { + assert.buffer(buf); + while (buf.length > 1 && buf[0] === 0x00 && (buf[1] & 0x80) === 0x00) + buf = buf.slice(1); + if ((buf[0] & 0x80) === 0x80) { + var b = Buffer.alloc(buf.length + 1); + b[0] = 0x00; + buf.copy(b, 1); + buf = b; + } + return (buf); +} + +function mpDenormalize(buf) { + assert.buffer(buf); + while (buf.length > 1 && buf[0] === 0x00) + buf = buf.slice(1); + return (buf); +} + +function zeroPadToLength(buf, len) { + assert.buffer(buf); + assert.number(len); + while (buf.length > len) { + assert.equal(buf[0], 0x00); + buf = buf.slice(1); + } + while (buf.length < len) { + var b = Buffer.alloc(buf.length + 1); + b[0] = 0x00; + buf.copy(b, 1); + buf = b; + } + return (buf); +} + +function bigintToMpBuf(bigint) { + var buf = Buffer.from(bigint.toByteArray()); + buf = mpNormalize(buf); + return (buf); +} + +function calculateDSAPublic(g, p, x) { + assert.buffer(g); + assert.buffer(p); + assert.buffer(x); + try { + var bigInt = __webpack_require__(81).BigInteger; + } catch (e) { + throw (new Error('To load a PKCS#8 format DSA private key, ' + + 'the node jsbn library is required.')); + } + g = new bigInt(g); + p = new bigInt(p); + x = new bigInt(x); + var y = g.modPow(x, p); + var ybuf = bigintToMpBuf(y); + return (ybuf); +} + +function calculateED25519Public(k) { + assert.buffer(k); + + if (nacl === undefined) + nacl = __webpack_require__(76); + + var kp = nacl.sign.keyPair.fromSeed(new Uint8Array(k)); + return (Buffer.from(kp.publicKey)); +} + +function calculateX25519Public(k) { + assert.buffer(k); + + if (nacl === undefined) + nacl = __webpack_require__(76); + + var kp = nacl.box.keyPair.fromSeed(new Uint8Array(k)); + return (Buffer.from(kp.publicKey)); +} + +function addRSAMissing(key) { + assert.object(key); + assertCompatible(key, PrivateKey, [1, 1]); + try { + var bigInt = __webpack_require__(81).BigInteger; + } catch (e) { + throw (new Error('To write a PEM private key from ' + + 'this source, the node jsbn lib is required.')); + } + + var d = new bigInt(key.part.d.data); + var buf; + + if (!key.part.dmodp) { + var p = new bigInt(key.part.p.data); + var dmodp = d.mod(p.subtract(1)); + + buf = bigintToMpBuf(dmodp); + key.part.dmodp = {name: 'dmodp', data: buf}; + key.parts.push(key.part.dmodp); + } + if (!key.part.dmodq) { + var q = new bigInt(key.part.q.data); + var dmodq = d.mod(q.subtract(1)); + + buf = bigintToMpBuf(dmodq); + key.part.dmodq = {name: 'dmodq', data: buf}; + key.parts.push(key.part.dmodq); + } +} + +function publicFromPrivateECDSA(curveName, priv) { + assert.string(curveName, 'curveName'); + assert.buffer(priv); + if (ec === undefined) + ec = __webpack_require__(139); + if (jsbn === undefined) + jsbn = __webpack_require__(81).BigInteger; + var params = algs.curves[curveName]; + var p = new jsbn(params.p); + var a = new jsbn(params.a); + var b = new jsbn(params.b); + var curve = new ec.ECCurveFp(p, a, b); + var G = curve.decodePointHex(params.G.toString('hex')); + + var d = new jsbn(mpNormalize(priv)); + var pub = G.multiply(d); + pub = Buffer.from(curve.encodePointHex(pub), 'hex'); + + var parts = []; + parts.push({name: 'curve', data: Buffer.from(curveName)}); + parts.push({name: 'Q', data: pub}); + + var key = new Key({type: 'ecdsa', curve: curve, parts: parts}); + return (key); +} + +function opensshCipherInfo(cipher) { + var inf = {}; + switch (cipher) { + case '3des-cbc': + inf.keySize = 24; + inf.blockSize = 8; + inf.opensslName = 'des-ede3-cbc'; + break; + case 'blowfish-cbc': + inf.keySize = 16; + inf.blockSize = 8; + inf.opensslName = 'bf-cbc'; + break; + case 'aes128-cbc': + case 'aes128-ctr': + case 'aes128-gcm@openssh.com': + inf.keySize = 16; + inf.blockSize = 16; + inf.opensslName = 'aes-128-' + cipher.slice(7, 10); + break; + case 'aes192-cbc': + case 'aes192-ctr': + case 'aes192-gcm@openssh.com': + inf.keySize = 24; + inf.blockSize = 16; + inf.opensslName = 'aes-192-' + cipher.slice(7, 10); + break; + case 'aes256-cbc': + case 'aes256-ctr': + case 'aes256-gcm@openssh.com': + inf.keySize = 32; + inf.blockSize = 16; + inf.opensslName = 'aes-256-' + cipher.slice(7, 10); + break; + default: + throw (new Error( + 'Unsupported openssl cipher "' + cipher + '"')); + } + return (inf); +} + + +/***/ }), +/* 27 */ +/***/ (function(module, exports, __webpack_require__) { + +// Copyright 2017 Joyent, Inc. + +module.exports = Key; + +var assert = __webpack_require__(16); +var algs = __webpack_require__(32); +var crypto = __webpack_require__(12); +var Fingerprint = __webpack_require__(156); +var Signature = __webpack_require__(75); +var DiffieHellman = __webpack_require__(325).DiffieHellman; +var errs = __webpack_require__(74); +var utils = __webpack_require__(26); +var PrivateKey = __webpack_require__(33); +var edCompat; + +try { + edCompat = __webpack_require__(454); +} catch (e) { + /* Just continue through, and bail out if we try to use it. */ +} + +var InvalidAlgorithmError = errs.InvalidAlgorithmError; +var KeyParseError = errs.KeyParseError; + +var formats = {}; +formats['auto'] = __webpack_require__(455); +formats['pem'] = __webpack_require__(86); +formats['pkcs1'] = __webpack_require__(327); +formats['pkcs8'] = __webpack_require__(157); +formats['rfc4253'] = __webpack_require__(103); +formats['ssh'] = __webpack_require__(456); +formats['ssh-private'] = __webpack_require__(192); +formats['openssh'] = formats['ssh-private']; +formats['dnssec'] = __webpack_require__(326); + +function Key(opts) { + assert.object(opts, 'options'); + assert.arrayOfObject(opts.parts, 'options.parts'); + assert.string(opts.type, 'options.type'); + assert.optionalString(opts.comment, 'options.comment'); + + var algInfo = algs.info[opts.type]; + if (typeof (algInfo) !== 'object') + throw (new InvalidAlgorithmError(opts.type)); + + var partLookup = {}; + for (var i = 0; i < opts.parts.length; ++i) { + var part = opts.parts[i]; + partLookup[part.name] = part; + } + + this.type = opts.type; + this.parts = opts.parts; + this.part = partLookup; + this.comment = undefined; + this.source = opts.source; + + /* for speeding up hashing/fingerprint operations */ + this._rfc4253Cache = opts._rfc4253Cache; + this._hashCache = {}; + + var sz; + this.curve = undefined; + if (this.type === 'ecdsa') { + var curve = this.part.curve.data.toString(); + this.curve = curve; + sz = algs.curves[curve].size; + } else if (this.type === 'ed25519' || this.type === 'curve25519') { + sz = 256; + this.curve = 'curve25519'; + } else { + var szPart = this.part[algInfo.sizePart]; + sz = szPart.data.length; + sz = sz * 8 - utils.countZeros(szPart.data); + } + this.size = sz; +} + +Key.formats = formats; + +Key.prototype.toBuffer = function (format, options) { + if (format === undefined) + format = 'ssh'; + assert.string(format, 'format'); + assert.object(formats[format], 'formats[format]'); + assert.optionalObject(options, 'options'); + + if (format === 'rfc4253') { + if (this._rfc4253Cache === undefined) + this._rfc4253Cache = formats['rfc4253'].write(this); + return (this._rfc4253Cache); + } + + return (formats[format].write(this, options)); +}; + +Key.prototype.toString = function (format, options) { + return (this.toBuffer(format, options).toString()); +}; + +Key.prototype.hash = function (algo) { + assert.string(algo, 'algorithm'); + algo = algo.toLowerCase(); + if (algs.hashAlgs[algo] === undefined) + throw (new InvalidAlgorithmError(algo)); + + if (this._hashCache[algo]) + return (this._hashCache[algo]); + var hash = crypto.createHash(algo). + update(this.toBuffer('rfc4253')).digest(); + this._hashCache[algo] = hash; + return (hash); +}; + +Key.prototype.fingerprint = function (algo) { + if (algo === undefined) + algo = 'sha256'; + assert.string(algo, 'algorithm'); + var opts = { + type: 'key', + hash: this.hash(algo), + algorithm: algo + }; + return (new Fingerprint(opts)); +}; + +Key.prototype.defaultHashAlgorithm = function () { + var hashAlgo = 'sha1'; + if (this.type === 'rsa') + hashAlgo = 'sha256'; + if (this.type === 'dsa' && this.size > 1024) + hashAlgo = 'sha256'; + if (this.type === 'ed25519') + hashAlgo = 'sha512'; + if (this.type === 'ecdsa') { + if (this.size <= 256) + hashAlgo = 'sha256'; + else if (this.size <= 384) + hashAlgo = 'sha384'; + else + hashAlgo = 'sha512'; + } + return (hashAlgo); +}; + +Key.prototype.createVerify = function (hashAlgo) { + if (hashAlgo === undefined) + hashAlgo = this.defaultHashAlgorithm(); + assert.string(hashAlgo, 'hash algorithm'); + + /* ED25519 is not supported by OpenSSL, use a javascript impl. */ + if (this.type === 'ed25519' && edCompat !== undefined) + return (new edCompat.Verifier(this, hashAlgo)); + if (this.type === 'curve25519') + throw (new Error('Curve25519 keys are not suitable for ' + + 'signing or verification')); + + var v, nm, err; + try { + nm = hashAlgo.toUpperCase(); + v = crypto.createVerify(nm); + } catch (e) { + err = e; + } + if (v === undefined || (err instanceof Error && + err.message.match(/Unknown message digest/))) { + nm = 'RSA-'; + nm += hashAlgo.toUpperCase(); + v = crypto.createVerify(nm); + } + assert.ok(v, 'failed to create verifier'); + var oldVerify = v.verify.bind(v); + var key = this.toBuffer('pkcs8'); + var curve = this.curve; + var self = this; + v.verify = function (signature, fmt) { + if (Signature.isSignature(signature, [2, 0])) { + if (signature.type !== self.type) + return (false); + if (signature.hashAlgorithm && + signature.hashAlgorithm !== hashAlgo) + return (false); + if (signature.curve && self.type === 'ecdsa' && + signature.curve !== curve) + return (false); + return (oldVerify(key, signature.toBuffer('asn1'))); + + } else if (typeof (signature) === 'string' || + Buffer.isBuffer(signature)) { + return (oldVerify(key, signature, fmt)); + + /* + * Avoid doing this on valid arguments, walking the prototype + * chain can be quite slow. + */ + } else if (Signature.isSignature(signature, [1, 0])) { + throw (new Error('signature was created by too old ' + + 'a version of sshpk and cannot be verified')); + + } else { + throw (new TypeError('signature must be a string, ' + + 'Buffer, or Signature object')); + } + }; + return (v); +}; + +Key.prototype.createDiffieHellman = function () { + if (this.type === 'rsa') + throw (new Error('RSA keys do not support Diffie-Hellman')); + + return (new DiffieHellman(this)); +}; +Key.prototype.createDH = Key.prototype.createDiffieHellman; + +Key.parse = function (data, format, options) { + if (typeof (data) !== 'string') + assert.buffer(data, 'data'); + if (format === undefined) + format = 'auto'; + assert.string(format, 'format'); + if (typeof (options) === 'string') + options = { filename: options }; + assert.optionalObject(options, 'options'); + if (options === undefined) + options = {}; + assert.optionalString(options.filename, 'options.filename'); + if (options.filename === undefined) + options.filename = '(unnamed)'; + + assert.object(formats[format], 'formats[format]'); + + try { + var k = formats[format].read(data, options); + if (k instanceof PrivateKey) + k = k.toPublic(); + if (!k.comment) + k.comment = options.filename; + return (k); + } catch (e) { + if (e.name === 'KeyEncryptedError') + throw (e); + throw (new KeyParseError(options.filename, format, e)); + } +}; + +Key.isKey = function (obj, ver) { + return (utils.isCompatible(obj, Key, ver)); +}; + +/* + * API versions for Key: + * [1,0] -- initial ver, may take Signature for createVerify or may not + * [1,1] -- added pkcs1, pkcs8 formats + * [1,2] -- added auto, ssh-private, openssh formats + * [1,3] -- added defaultHashAlgorithm + * [1,4] -- added ed support, createDH + * [1,5] -- first explicitly tagged version + * [1,6] -- changed ed25519 part names + */ +Key.prototype._sshpkApiVersion = [1, 6]; + +Key._oldVersionDetect = function (obj) { + assert.func(obj.toBuffer); + assert.func(obj.fingerprint); + if (obj.createDH) + return ([1, 4]); + if (obj.defaultHashAlgorithm) + return ([1, 3]); + if (obj.formats['auto']) + return ([1, 2]); + if (obj.formats['pkcs1']) + return ([1, 1]); + return ([1, 0]); +}; + + +/***/ }), +/* 28 */ +/***/ (function(module, exports) { + +module.exports = require("assert"); + +/***/ }), +/* 29 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = nullify; +function nullify(obj = {}) { + if (Array.isArray(obj)) { + for (var _iterator = obj, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { + var _ref; + + if (_isArray) { + if (_i >= _iterator.length) break; + _ref = _iterator[_i++]; + } else { + _i = _iterator.next(); + if (_i.done) break; + _ref = _i.value; + } + + const item = _ref; + + nullify(item); + } + } else if (obj !== null && typeof obj === 'object' || typeof obj === 'function') { + Object.setPrototypeOf(obj, null); + + // for..in can only be applied to 'object', not 'function' + if (typeof obj === 'object') { + for (const key in obj) { + nullify(obj[key]); + } + } + } + + return obj; +} + +/***/ }), +/* 30 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +const escapeStringRegexp = __webpack_require__(388); +const ansiStyles = __webpack_require__(506); +const stdoutColor = __webpack_require__(598).stdout; + +const template = __webpack_require__(599); + +const isSimpleWindowsTerm = process.platform === 'win32' && !(process.env.TERM || '').toLowerCase().startsWith('xterm'); + +// `supportsColor.level` → `ansiStyles.color[name]` mapping +const levelMapping = ['ansi', 'ansi', 'ansi256', 'ansi16m']; + +// `color-convert` models to exclude from the Chalk API due to conflicts and such +const skipModels = new Set(['gray']); + +const styles = Object.create(null); + +function applyOptions(obj, options) { + options = options || {}; + + // Detect level if not set manually + const scLevel = stdoutColor ? stdoutColor.level : 0; + obj.level = options.level === undefined ? scLevel : options.level; + obj.enabled = 'enabled' in options ? options.enabled : obj.level > 0; +} + +function Chalk(options) { + // We check for this.template here since calling `chalk.constructor()` + // by itself will have a `this` of a previously constructed chalk object + if (!this || !(this instanceof Chalk) || this.template) { + const chalk = {}; + applyOptions(chalk, options); + + chalk.template = function () { + const args = [].slice.call(arguments); + return chalkTag.apply(null, [chalk.template].concat(args)); + }; + + Object.setPrototypeOf(chalk, Chalk.prototype); + Object.setPrototypeOf(chalk.template, chalk); + + chalk.template.constructor = Chalk; + + return chalk.template; + } + + applyOptions(this, options); +} + +// Use bright blue on Windows as the normal blue color is illegible +if (isSimpleWindowsTerm) { + ansiStyles.blue.open = '\u001B[94m'; +} + +for (const key of Object.keys(ansiStyles)) { + ansiStyles[key].closeRe = new RegExp(escapeStringRegexp(ansiStyles[key].close), 'g'); + + styles[key] = { + get() { + const codes = ansiStyles[key]; + return build.call(this, this._styles ? this._styles.concat(codes) : [codes], this._empty, key); + } + }; +} + +styles.visible = { + get() { + return build.call(this, this._styles || [], true, 'visible'); + } +}; + +ansiStyles.color.closeRe = new RegExp(escapeStringRegexp(ansiStyles.color.close), 'g'); +for (const model of Object.keys(ansiStyles.color.ansi)) { + if (skipModels.has(model)) { + continue; + } + + styles[model] = { + get() { + const level = this.level; + return function () { + const open = ansiStyles.color[levelMapping[level]][model].apply(null, arguments); + const codes = { + open, + close: ansiStyles.color.close, + closeRe: ansiStyles.color.closeRe + }; + return build.call(this, this._styles ? this._styles.concat(codes) : [codes], this._empty, model); + }; + } + }; +} + +ansiStyles.bgColor.closeRe = new RegExp(escapeStringRegexp(ansiStyles.bgColor.close), 'g'); +for (const model of Object.keys(ansiStyles.bgColor.ansi)) { + if (skipModels.has(model)) { + continue; + } + + const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1); + styles[bgModel] = { + get() { + const level = this.level; + return function () { + const open = ansiStyles.bgColor[levelMapping[level]][model].apply(null, arguments); + const codes = { + open, + close: ansiStyles.bgColor.close, + closeRe: ansiStyles.bgColor.closeRe + }; + return build.call(this, this._styles ? this._styles.concat(codes) : [codes], this._empty, model); + }; + } + }; +} + +const proto = Object.defineProperties(() => {}, styles); + +function build(_styles, _empty, key) { + const builder = function () { + return applyStyle.apply(builder, arguments); + }; + + builder._styles = _styles; + builder._empty = _empty; + + const self = this; + + Object.defineProperty(builder, 'level', { + enumerable: true, + get() { + return self.level; + }, + set(level) { + self.level = level; + } + }); + + Object.defineProperty(builder, 'enabled', { + enumerable: true, + get() { + return self.enabled; + }, + set(enabled) { + self.enabled = enabled; + } + }); + + // See below for fix regarding invisible grey/dim combination on Windows + builder.hasGrey = this.hasGrey || key === 'gray' || key === 'grey'; + + // `__proto__` is used because we must return a function, but there is + // no way to create a function with a different prototype + builder.__proto__ = proto; // eslint-disable-line no-proto + + return builder; +} + +function applyStyle() { + // Support varags, but simply cast to string in case there's only one arg + const args = arguments; + const argsLen = args.length; + let str = String(arguments[0]); + + if (argsLen === 0) { + return ''; + } + + if (argsLen > 1) { + // Don't slice `arguments`, it prevents V8 optimizations + for (let a = 1; a < argsLen; a++) { + str += ' ' + args[a]; + } + } + + if (!this.enabled || this.level <= 0 || !str) { + return this._empty ? '' : str; + } + + // Turns out that on Windows dimmed gray text becomes invisible in cmd.exe, + // see https://github.com/chalk/chalk/issues/58 + // If we're on Windows and we're dealing with a gray color, temporarily make 'dim' a noop. + const originalDim = ansiStyles.dim.open; + if (isSimpleWindowsTerm && this.hasGrey) { + ansiStyles.dim.open = ''; + } + + for (const code of this._styles.slice().reverse()) { + // Replace any instances already present with a re-opening code + // otherwise only the part of the string until said closing code + // will be colored, and the rest will simply be 'plain'. + str = code.open + str.replace(code.closeRe, code.open) + code.close; + + // Close the styling before a linebreak and reopen + // after next line to fix a bleed issue on macOS + // https://github.com/chalk/chalk/pull/92 + str = str.replace(/\r?\n/g, `${code.close}$&${code.open}`); + } + + // Reset the original `dim` if we changed it to work around the Windows dimmed gray issue + ansiStyles.dim.open = originalDim; + + return str; +} + +function chalkTag(chalk, strings) { + if (!Array.isArray(strings)) { + // If chalk() was called by itself or with a string, + // return the string itself as a string. + return [].slice.call(arguments, 1).join(' '); + } + + const args = [].slice.call(arguments, 2); + const parts = [strings.raw[0]]; + + for (let i = 1; i < strings.length; i++) { + parts.push(String(args[i - 1]).replace(/[{}\\]/g, '\\$&')); + parts.push(String(strings.raw[i])); + } + + return template(chalk, parts.join('')); +} + +Object.defineProperties(Chalk.prototype, styles); + +module.exports = Chalk(); // eslint-disable-line new-cap +module.exports.supportsColor = stdoutColor; +module.exports.default = module.exports; // For TypeScript + + +/***/ }), +/* 31 */ +/***/ (function(module, exports) { + +var core = module.exports = { version: '2.5.7' }; +if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef + + +/***/ }), +/* 32 */ +/***/ (function(module, exports, __webpack_require__) { + +// Copyright 2015 Joyent, Inc. + +var Buffer = __webpack_require__(15).Buffer; + +var algInfo = { + 'dsa': { + parts: ['p', 'q', 'g', 'y'], + sizePart: 'p' + }, + 'rsa': { + parts: ['e', 'n'], + sizePart: 'n' + }, + 'ecdsa': { + parts: ['curve', 'Q'], + sizePart: 'Q' + }, + 'ed25519': { + parts: ['A'], + sizePart: 'A' + } +}; +algInfo['curve25519'] = algInfo['ed25519']; + +var algPrivInfo = { + 'dsa': { + parts: ['p', 'q', 'g', 'y', 'x'] + }, + 'rsa': { + parts: ['n', 'e', 'd', 'iqmp', 'p', 'q'] + }, + 'ecdsa': { + parts: ['curve', 'Q', 'd'] + }, + 'ed25519': { + parts: ['A', 'k'] + } +}; +algPrivInfo['curve25519'] = algPrivInfo['ed25519']; + +var hashAlgs = { + 'md5': true, + 'sha1': true, + 'sha256': true, + 'sha384': true, + 'sha512': true +}; + +/* + * Taken from + * http://csrc.nist.gov/groups/ST/toolkit/documents/dss/NISTReCur.pdf + */ +var curves = { + 'nistp256': { + size: 256, + pkcs8oid: '1.2.840.10045.3.1.7', + p: Buffer.from(('00' + + 'ffffffff 00000001 00000000 00000000' + + '00000000 ffffffff ffffffff ffffffff'). + replace(/ /g, ''), 'hex'), + a: Buffer.from(('00' + + 'FFFFFFFF 00000001 00000000 00000000' + + '00000000 FFFFFFFF FFFFFFFF FFFFFFFC'). + replace(/ /g, ''), 'hex'), + b: Buffer.from(( + '5ac635d8 aa3a93e7 b3ebbd55 769886bc' + + '651d06b0 cc53b0f6 3bce3c3e 27d2604b'). + replace(/ /g, ''), 'hex'), + s: Buffer.from(('00' + + 'c49d3608 86e70493 6a6678e1 139d26b7' + + '819f7e90'). + replace(/ /g, ''), 'hex'), + n: Buffer.from(('00' + + 'ffffffff 00000000 ffffffff ffffffff' + + 'bce6faad a7179e84 f3b9cac2 fc632551'). + replace(/ /g, ''), 'hex'), + G: Buffer.from(('04' + + '6b17d1f2 e12c4247 f8bce6e5 63a440f2' + + '77037d81 2deb33a0 f4a13945 d898c296' + + '4fe342e2 fe1a7f9b 8ee7eb4a 7c0f9e16' + + '2bce3357 6b315ece cbb64068 37bf51f5'). + replace(/ /g, ''), 'hex') + }, + 'nistp384': { + size: 384, + pkcs8oid: '1.3.132.0.34', + p: Buffer.from(('00' + + 'ffffffff ffffffff ffffffff ffffffff' + + 'ffffffff ffffffff ffffffff fffffffe' + + 'ffffffff 00000000 00000000 ffffffff'). + replace(/ /g, ''), 'hex'), + a: Buffer.from(('00' + + 'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' + + 'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFE' + + 'FFFFFFFF 00000000 00000000 FFFFFFFC'). + replace(/ /g, ''), 'hex'), + b: Buffer.from(( + 'b3312fa7 e23ee7e4 988e056b e3f82d19' + + '181d9c6e fe814112 0314088f 5013875a' + + 'c656398d 8a2ed19d 2a85c8ed d3ec2aef'). + replace(/ /g, ''), 'hex'), + s: Buffer.from(('00' + + 'a335926a a319a27a 1d00896a 6773a482' + + '7acdac73'). + replace(/ /g, ''), 'hex'), + n: Buffer.from(('00' + + 'ffffffff ffffffff ffffffff ffffffff' + + 'ffffffff ffffffff c7634d81 f4372ddf' + + '581a0db2 48b0a77a ecec196a ccc52973'). + replace(/ /g, ''), 'hex'), + G: Buffer.from(('04' + + 'aa87ca22 be8b0537 8eb1c71e f320ad74' + + '6e1d3b62 8ba79b98 59f741e0 82542a38' + + '5502f25d bf55296c 3a545e38 72760ab7' + + '3617de4a 96262c6f 5d9e98bf 9292dc29' + + 'f8f41dbd 289a147c e9da3113 b5f0b8c0' + + '0a60b1ce 1d7e819d 7a431d7c 90ea0e5f'). + replace(/ /g, ''), 'hex') + }, + 'nistp521': { + size: 521, + pkcs8oid: '1.3.132.0.35', + p: Buffer.from(( + '01ffffff ffffffff ffffffff ffffffff' + + 'ffffffff ffffffff ffffffff ffffffff' + + 'ffffffff ffffffff ffffffff ffffffff' + + 'ffffffff ffffffff ffffffff ffffffff' + + 'ffff').replace(/ /g, ''), 'hex'), + a: Buffer.from(('01FF' + + 'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' + + 'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' + + 'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' + + 'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFC'). + replace(/ /g, ''), 'hex'), + b: Buffer.from(('51' + + '953eb961 8e1c9a1f 929a21a0 b68540ee' + + 'a2da725b 99b315f3 b8b48991 8ef109e1' + + '56193951 ec7e937b 1652c0bd 3bb1bf07' + + '3573df88 3d2c34f1 ef451fd4 6b503f00'). + replace(/ /g, ''), 'hex'), + s: Buffer.from(('00' + + 'd09e8800 291cb853 96cc6717 393284aa' + + 'a0da64ba').replace(/ /g, ''), 'hex'), + n: Buffer.from(('01ff' + + 'ffffffff ffffffff ffffffff ffffffff' + + 'ffffffff ffffffff ffffffff fffffffa' + + '51868783 bf2f966b 7fcc0148 f709a5d0' + + '3bb5c9b8 899c47ae bb6fb71e 91386409'). + replace(/ /g, ''), 'hex'), + G: Buffer.from(('04' + + '00c6 858e06b7 0404e9cd 9e3ecb66 2395b442' + + '9c648139 053fb521 f828af60 6b4d3dba' + + 'a14b5e77 efe75928 fe1dc127 a2ffa8de' + + '3348b3c1 856a429b f97e7e31 c2e5bd66' + + '0118 39296a78 9a3bc004 5c8a5fb4 2c7d1bd9' + + '98f54449 579b4468 17afbd17 273e662c' + + '97ee7299 5ef42640 c550b901 3fad0761' + + '353c7086 a272c240 88be9476 9fd16650'). + replace(/ /g, ''), 'hex') + } +}; + +module.exports = { + info: algInfo, + privInfo: algPrivInfo, + hashAlgs: hashAlgs, + curves: curves +}; + + +/***/ }), +/* 33 */ +/***/ (function(module, exports, __webpack_require__) { + +// Copyright 2017 Joyent, Inc. + +module.exports = PrivateKey; + +var assert = __webpack_require__(16); +var Buffer = __webpack_require__(15).Buffer; +var algs = __webpack_require__(32); +var crypto = __webpack_require__(12); +var Fingerprint = __webpack_require__(156); +var Signature = __webpack_require__(75); +var errs = __webpack_require__(74); +var util = __webpack_require__(3); +var utils = __webpack_require__(26); +var dhe = __webpack_require__(325); +var generateECDSA = dhe.generateECDSA; +var generateED25519 = dhe.generateED25519; +var edCompat; +var nacl; + +try { + edCompat = __webpack_require__(454); +} catch (e) { + /* Just continue through, and bail out if we try to use it. */ +} + +var Key = __webpack_require__(27); + +var InvalidAlgorithmError = errs.InvalidAlgorithmError; +var KeyParseError = errs.KeyParseError; +var KeyEncryptedError = errs.KeyEncryptedError; + +var formats = {}; +formats['auto'] = __webpack_require__(455); +formats['pem'] = __webpack_require__(86); +formats['pkcs1'] = __webpack_require__(327); +formats['pkcs8'] = __webpack_require__(157); +formats['rfc4253'] = __webpack_require__(103); +formats['ssh-private'] = __webpack_require__(192); +formats['openssh'] = formats['ssh-private']; +formats['ssh'] = formats['ssh-private']; +formats['dnssec'] = __webpack_require__(326); + +function PrivateKey(opts) { + assert.object(opts, 'options'); + Key.call(this, opts); + + this._pubCache = undefined; +} +util.inherits(PrivateKey, Key); + +PrivateKey.formats = formats; + +PrivateKey.prototype.toBuffer = function (format, options) { + if (format === undefined) + format = 'pkcs1'; + assert.string(format, 'format'); + assert.object(formats[format], 'formats[format]'); + assert.optionalObject(options, 'options'); + + return (formats[format].write(this, options)); +}; + +PrivateKey.prototype.hash = function (algo) { + return (this.toPublic().hash(algo)); +}; + +PrivateKey.prototype.toPublic = function () { + if (this._pubCache) + return (this._pubCache); + + var algInfo = algs.info[this.type]; + var pubParts = []; + for (var i = 0; i < algInfo.parts.length; ++i) { + var p = algInfo.parts[i]; + pubParts.push(this.part[p]); + } + + this._pubCache = new Key({ + type: this.type, + source: this, + parts: pubParts + }); + if (this.comment) + this._pubCache.comment = this.comment; + return (this._pubCache); +}; + +PrivateKey.prototype.derive = function (newType) { + assert.string(newType, 'type'); + var priv, pub, pair; + + if (this.type === 'ed25519' && newType === 'curve25519') { + if (nacl === undefined) + nacl = __webpack_require__(76); + + priv = this.part.k.data; + if (priv[0] === 0x00) + priv = priv.slice(1); + + pair = nacl.box.keyPair.fromSecretKey(new Uint8Array(priv)); + pub = Buffer.from(pair.publicKey); + + return (new PrivateKey({ + type: 'curve25519', + parts: [ + { name: 'A', data: utils.mpNormalize(pub) }, + { name: 'k', data: utils.mpNormalize(priv) } + ] + })); + } else if (this.type === 'curve25519' && newType === 'ed25519') { + if (nacl === undefined) + nacl = __webpack_require__(76); + + priv = this.part.k.data; + if (priv[0] === 0x00) + priv = priv.slice(1); + + pair = nacl.sign.keyPair.fromSeed(new Uint8Array(priv)); + pub = Buffer.from(pair.publicKey); + + return (new PrivateKey({ + type: 'ed25519', + parts: [ + { name: 'A', data: utils.mpNormalize(pub) }, + { name: 'k', data: utils.mpNormalize(priv) } + ] + })); + } + throw (new Error('Key derivation not supported from ' + this.type + + ' to ' + newType)); +}; + +PrivateKey.prototype.createVerify = function (hashAlgo) { + return (this.toPublic().createVerify(hashAlgo)); +}; + +PrivateKey.prototype.createSign = function (hashAlgo) { + if (hashAlgo === undefined) + hashAlgo = this.defaultHashAlgorithm(); + assert.string(hashAlgo, 'hash algorithm'); + + /* ED25519 is not supported by OpenSSL, use a javascript impl. */ + if (this.type === 'ed25519' && edCompat !== undefined) + return (new edCompat.Signer(this, hashAlgo)); + if (this.type === 'curve25519') + throw (new Error('Curve25519 keys are not suitable for ' + + 'signing or verification')); + + var v, nm, err; + try { + nm = hashAlgo.toUpperCase(); + v = crypto.createSign(nm); + } catch (e) { + err = e; + } + if (v === undefined || (err instanceof Error && + err.message.match(/Unknown message digest/))) { + nm = 'RSA-'; + nm += hashAlgo.toUpperCase(); + v = crypto.createSign(nm); + } + assert.ok(v, 'failed to create verifier'); + var oldSign = v.sign.bind(v); + var key = this.toBuffer('pkcs1'); + var type = this.type; + var curve = this.curve; + v.sign = function () { + var sig = oldSign(key); + if (typeof (sig) === 'string') + sig = Buffer.from(sig, 'binary'); + sig = Signature.parse(sig, type, 'asn1'); + sig.hashAlgorithm = hashAlgo; + sig.curve = curve; + return (sig); + }; + return (v); +}; + +PrivateKey.parse = function (data, format, options) { + if (typeof (data) !== 'string') + assert.buffer(data, 'data'); + if (format === undefined) + format = 'auto'; + assert.string(format, 'format'); + if (typeof (options) === 'string') + options = { filename: options }; + assert.optionalObject(options, 'options'); + if (options === undefined) + options = {}; + assert.optionalString(options.filename, 'options.filename'); + if (options.filename === undefined) + options.filename = '(unnamed)'; + + assert.object(formats[format], 'formats[format]'); + + try { + var k = formats[format].read(data, options); + assert.ok(k instanceof PrivateKey, 'key is not a private key'); + if (!k.comment) + k.comment = options.filename; + return (k); + } catch (e) { + if (e.name === 'KeyEncryptedError') + throw (e); + throw (new KeyParseError(options.filename, format, e)); + } +}; + +PrivateKey.isPrivateKey = function (obj, ver) { + return (utils.isCompatible(obj, PrivateKey, ver)); +}; + +PrivateKey.generate = function (type, options) { + if (options === undefined) + options = {}; + assert.object(options, 'options'); + + switch (type) { + case 'ecdsa': + if (options.curve === undefined) + options.curve = 'nistp256'; + assert.string(options.curve, 'options.curve'); + return (generateECDSA(options.curve)); + case 'ed25519': + return (generateED25519()); + default: + throw (new Error('Key generation not supported with key ' + + 'type "' + type + '"')); + } +}; + +/* + * API versions for PrivateKey: + * [1,0] -- initial ver + * [1,1] -- added auto, pkcs[18], openssh/ssh-private formats + * [1,2] -- added defaultHashAlgorithm + * [1,3] -- added derive, ed, createDH + * [1,4] -- first tagged version + * [1,5] -- changed ed25519 part names and format + */ +PrivateKey.prototype._sshpkApiVersion = [1, 5]; + +PrivateKey._oldVersionDetect = function (obj) { + assert.func(obj.toPublic); + assert.func(obj.createSign); + if (obj.derive) + return ([1, 3]); + if (obj.defaultHashAlgorithm) + return ([1, 2]); + if (obj.formats['auto']) + return ([1, 1]); + return ([1, 0]); +}; + + +/***/ }), +/* 34 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.wrapLifecycle = exports.run = exports.install = exports.Install = undefined; + +var _extends2; + +function _load_extends() { + return _extends2 = _interopRequireDefault(__webpack_require__(22)); +} + +var _asyncToGenerator2; + +function _load_asyncToGenerator() { + return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2)); +} + +let install = exports.install = (() => { + var _ref29 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, lockfile) { + yield wrapLifecycle(config, flags, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + const install = new Install(flags, config, reporter, lockfile); + yield install.init(); + })); + }); + + return function install(_x7, _x8, _x9, _x10) { + return _ref29.apply(this, arguments); + }; +})(); + +let run = exports.run = (() => { + var _ref31 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) { + let lockfile; + let error = 'installCommandRenamed'; + if (flags.lockfile === false) { + lockfile = new (_lockfile || _load_lockfile()).default(); + } else { + lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter); + } + + if (args.length) { + const exampleArgs = args.slice(); + + if (flags.saveDev) { + exampleArgs.push('--dev'); + } + if (flags.savePeer) { + exampleArgs.push('--peer'); + } + if (flags.saveOptional) { + exampleArgs.push('--optional'); + } + if (flags.saveExact) { + exampleArgs.push('--exact'); + } + if (flags.saveTilde) { + exampleArgs.push('--tilde'); + } + let command = 'add'; + if (flags.global) { + error = 'globalFlagRemoved'; + command = 'global add'; + } + throw new (_errors || _load_errors()).MessageError(reporter.lang(error, `yarn ${command} ${exampleArgs.join(' ')}`)); + } + + yield install(config, reporter, flags, lockfile); + }); + + return function run(_x11, _x12, _x13, _x14) { + return _ref31.apply(this, arguments); + }; +})(); + +let wrapLifecycle = exports.wrapLifecycle = (() => { + var _ref32 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, flags, factory) { + yield config.executeLifecycleScript('preinstall'); + + yield factory(); + + // npm behaviour, seems kinda funky but yay compatibility + yield config.executeLifecycleScript('install'); + yield config.executeLifecycleScript('postinstall'); + + if (!config.production) { + if (!config.disablePrepublish) { + yield config.executeLifecycleScript('prepublish'); + } + yield config.executeLifecycleScript('prepare'); + } + }); + + return function wrapLifecycle(_x15, _x16, _x17) { + return _ref32.apply(this, arguments); + }; +})(); + +exports.hasWrapper = hasWrapper; +exports.setFlags = setFlags; + +var _objectPath; + +function _load_objectPath() { + return _objectPath = _interopRequireDefault(__webpack_require__(304)); +} + +var _hooks; + +function _load_hooks() { + return _hooks = __webpack_require__(374); +} + +var _index; + +function _load_index() { + return _index = _interopRequireDefault(__webpack_require__(220)); +} + +var _errors; + +function _load_errors() { + return _errors = __webpack_require__(6); +} + +var _integrityChecker; + +function _load_integrityChecker() { + return _integrityChecker = _interopRequireDefault(__webpack_require__(208)); +} + +var _lockfile; + +function _load_lockfile() { + return _lockfile = _interopRequireDefault(__webpack_require__(19)); +} + +var _lockfile2; + +function _load_lockfile2() { + return _lockfile2 = __webpack_require__(19); +} + +var _packageFetcher; + +function _load_packageFetcher() { + return _packageFetcher = _interopRequireWildcard(__webpack_require__(210)); +} + +var _packageInstallScripts; + +function _load_packageInstallScripts() { + return _packageInstallScripts = _interopRequireDefault(__webpack_require__(557)); +} + +var _packageCompatibility; + +function _load_packageCompatibility() { + return _packageCompatibility = _interopRequireWildcard(__webpack_require__(209)); +} + +var _packageResolver; + +function _load_packageResolver() { + return _packageResolver = _interopRequireDefault(__webpack_require__(366)); +} + +var _packageLinker; + +function _load_packageLinker() { + return _packageLinker = _interopRequireDefault(__webpack_require__(211)); +} + +var _index2; + +function _load_index2() { + return _index2 = __webpack_require__(57); +} + +var _index3; + +function _load_index3() { + return _index3 = __webpack_require__(78); +} + +var _autoclean; + +function _load_autoclean() { + return _autoclean = __webpack_require__(354); +} + +var _constants; + +function _load_constants() { + return _constants = _interopRequireWildcard(__webpack_require__(8)); +} + +var _normalizePattern; + +function _load_normalizePattern() { + return _normalizePattern = __webpack_require__(37); +} + +var _fs; + +function _load_fs() { + return _fs = _interopRequireWildcard(__webpack_require__(4)); +} + +var _map; + +function _load_map() { + return _map = _interopRequireDefault(__webpack_require__(29)); +} + +var _yarnVersion; + +function _load_yarnVersion() { + return _yarnVersion = __webpack_require__(120); +} + +var _generatePnpMap; + +function _load_generatePnpMap() { + return _generatePnpMap = __webpack_require__(579); +} + +var _workspaceLayout; + +function _load_workspaceLayout() { + return _workspaceLayout = _interopRequireDefault(__webpack_require__(90)); +} + +var _resolutionMap; + +function _load_resolutionMap() { + return _resolutionMap = _interopRequireDefault(__webpack_require__(214)); +} + +var _guessName; + +function _load_guessName() { + return _guessName = _interopRequireDefault(__webpack_require__(169)); +} + +var _audit; + +function _load_audit() { + return _audit = _interopRequireDefault(__webpack_require__(353)); +} + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +const deepEqual = __webpack_require__(631); + +const emoji = __webpack_require__(302); +const invariant = __webpack_require__(9); +const path = __webpack_require__(0); +const semver = __webpack_require__(21); +const uuid = __webpack_require__(119); +const ssri = __webpack_require__(65); + +const ONE_DAY = 1000 * 60 * 60 * 24; + +/** + * Try and detect the installation method for Yarn and provide a command to update it with. + */ + +function getUpdateCommand(installationMethod) { + if (installationMethod === 'tar') { + return `curl --compressed -o- -L ${(_constants || _load_constants()).YARN_INSTALLER_SH} | bash`; + } + + if (installationMethod === 'homebrew') { + return 'brew upgrade yarn'; + } + + if (installationMethod === 'deb') { + return 'sudo apt-get update && sudo apt-get install yarn'; + } + + if (installationMethod === 'rpm') { + return 'sudo yum install yarn'; + } + + if (installationMethod === 'npm') { + return 'npm install --global yarn'; + } + + if (installationMethod === 'chocolatey') { + return 'choco upgrade yarn'; + } + + if (installationMethod === 'apk') { + return 'apk update && apk add -u yarn'; + } + + if (installationMethod === 'portage') { + return 'sudo emerge --sync && sudo emerge -au sys-apps/yarn'; + } + + return null; +} + +function getUpdateInstaller(installationMethod) { + // Windows + if (installationMethod === 'msi') { + return (_constants || _load_constants()).YARN_INSTALLER_MSI; + } + + return null; +} + +function normalizeFlags(config, rawFlags) { + const flags = { + // install + har: !!rawFlags.har, + ignorePlatform: !!rawFlags.ignorePlatform, + ignoreEngines: !!rawFlags.ignoreEngines, + ignoreScripts: !!rawFlags.ignoreScripts, + ignoreOptional: !!rawFlags.ignoreOptional, + force: !!rawFlags.force, + flat: !!rawFlags.flat, + lockfile: rawFlags.lockfile !== false, + pureLockfile: !!rawFlags.pureLockfile, + updateChecksums: !!rawFlags.updateChecksums, + skipIntegrityCheck: !!rawFlags.skipIntegrityCheck, + frozenLockfile: !!rawFlags.frozenLockfile, + linkDuplicates: !!rawFlags.linkDuplicates, + checkFiles: !!rawFlags.checkFiles, + audit: !!rawFlags.audit, + + // add + peer: !!rawFlags.peer, + dev: !!rawFlags.dev, + optional: !!rawFlags.optional, + exact: !!rawFlags.exact, + tilde: !!rawFlags.tilde, + ignoreWorkspaceRootCheck: !!rawFlags.ignoreWorkspaceRootCheck, + + // outdated, update-interactive + includeWorkspaceDeps: !!rawFlags.includeWorkspaceDeps, + + // add, remove, update + workspaceRootIsCwd: rawFlags.workspaceRootIsCwd !== false + }; + + if (config.getOption('ignore-scripts')) { + flags.ignoreScripts = true; + } + + if (config.getOption('ignore-platform')) { + flags.ignorePlatform = true; + } + + if (config.getOption('ignore-engines')) { + flags.ignoreEngines = true; + } + + if (config.getOption('ignore-optional')) { + flags.ignoreOptional = true; + } + + if (config.getOption('force')) { + flags.force = true; + } + + return flags; +} + +class Install { + constructor(flags, config, reporter, lockfile) { + this.rootManifestRegistries = []; + this.rootPatternsToOrigin = (0, (_map || _load_map()).default)(); + this.lockfile = lockfile; + this.reporter = reporter; + this.config = config; + this.flags = normalizeFlags(config, flags); + this.resolutions = (0, (_map || _load_map()).default)(); // Legacy resolutions field used for flat install mode + this.resolutionMap = new (_resolutionMap || _load_resolutionMap()).default(config); // Selective resolutions for nested dependencies + this.resolver = new (_packageResolver || _load_packageResolver()).default(config, lockfile, this.resolutionMap); + this.integrityChecker = new (_integrityChecker || _load_integrityChecker()).default(config); + this.linker = new (_packageLinker || _load_packageLinker()).default(config, this.resolver); + this.scripts = new (_packageInstallScripts || _load_packageInstallScripts()).default(config, this.resolver, this.flags.force); + } + + /** + * Create a list of dependency requests from the current directories manifests. + */ + + fetchRequestFromCwd(excludePatterns = [], ignoreUnusedPatterns = false) { + var _this = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + const patterns = []; + const deps = []; + let resolutionDeps = []; + const manifest = {}; + + const ignorePatterns = []; + const usedPatterns = []; + let workspaceLayout; + + // some commands should always run in the context of the entire workspace + const cwd = _this.flags.includeWorkspaceDeps || _this.flags.workspaceRootIsCwd ? _this.config.lockfileFolder : _this.config.cwd; + + // non-workspaces are always root, otherwise check for workspace root + const cwdIsRoot = !_this.config.workspaceRootFolder || _this.config.lockfileFolder === cwd; + + // exclude package names that are in install args + const excludeNames = []; + for (var _iterator = excludePatterns, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { + var _ref; + + if (_isArray) { + if (_i >= _iterator.length) break; + _ref = _iterator[_i++]; + } else { + _i = _iterator.next(); + if (_i.done) break; + _ref = _i.value; + } + + const pattern = _ref; + + if ((0, (_index3 || _load_index3()).getExoticResolver)(pattern)) { + excludeNames.push((0, (_guessName || _load_guessName()).default)(pattern)); + } else { + // extract the name + const parts = (0, (_normalizePattern || _load_normalizePattern()).normalizePattern)(pattern); + excludeNames.push(parts.name); + } + } + + const stripExcluded = function stripExcluded(manifest) { + for (var _iterator2 = excludeNames, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { + var _ref2; + + if (_isArray2) { + if (_i2 >= _iterator2.length) break; + _ref2 = _iterator2[_i2++]; + } else { + _i2 = _iterator2.next(); + if (_i2.done) break; + _ref2 = _i2.value; + } + + const exclude = _ref2; + + if (manifest.dependencies && manifest.dependencies[exclude]) { + delete manifest.dependencies[exclude]; + } + if (manifest.devDependencies && manifest.devDependencies[exclude]) { + delete manifest.devDependencies[exclude]; + } + if (manifest.optionalDependencies && manifest.optionalDependencies[exclude]) { + delete manifest.optionalDependencies[exclude]; + } + } + }; + + for (var _iterator3 = Object.keys((_index2 || _load_index2()).registries), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { + var _ref3; + + if (_isArray3) { + if (_i3 >= _iterator3.length) break; + _ref3 = _iterator3[_i3++]; + } else { + _i3 = _iterator3.next(); + if (_i3.done) break; + _ref3 = _i3.value; + } + + const registry = _ref3; + + const filename = (_index2 || _load_index2()).registries[registry].filename; + + const loc = path.join(cwd, filename); + if (!(yield (_fs || _load_fs()).exists(loc))) { + continue; + } + + _this.rootManifestRegistries.push(registry); + + const projectManifestJson = yield _this.config.readJson(loc); + yield (0, (_index || _load_index()).default)(projectManifestJson, cwd, _this.config, cwdIsRoot); + + Object.assign(_this.resolutions, projectManifestJson.resolutions); + Object.assign(manifest, projectManifestJson); + + _this.resolutionMap.init(_this.resolutions); + for (var _iterator4 = Object.keys(_this.resolutionMap.resolutionsByPackage), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { + var _ref4; + + if (_isArray4) { + if (_i4 >= _iterator4.length) break; + _ref4 = _iterator4[_i4++]; + } else { + _i4 = _iterator4.next(); + if (_i4.done) break; + _ref4 = _i4.value; + } + + const packageName = _ref4; + + const optional = (_objectPath || _load_objectPath()).default.has(manifest.optionalDependencies, packageName) && _this.flags.ignoreOptional; + for (var _iterator8 = _this.resolutionMap.resolutionsByPackage[packageName], _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) { + var _ref9; + + if (_isArray8) { + if (_i8 >= _iterator8.length) break; + _ref9 = _iterator8[_i8++]; + } else { + _i8 = _iterator8.next(); + if (_i8.done) break; + _ref9 = _i8.value; + } + + const _ref8 = _ref9; + const pattern = _ref8.pattern; + + resolutionDeps = [...resolutionDeps, { registry, pattern, optional, hint: 'resolution' }]; + } + } + + const pushDeps = function pushDeps(depType, manifest, { hint, optional }, isUsed) { + if (ignoreUnusedPatterns && !isUsed) { + return; + } + // We only take unused dependencies into consideration to get deterministic hoisting. + // Since flat mode doesn't care about hoisting and everything is top level and specified then we can safely + // leave these out. + if (_this.flags.flat && !isUsed) { + return; + } + const depMap = manifest[depType]; + for (const name in depMap) { + if (excludeNames.indexOf(name) >= 0) { + continue; + } + + let pattern = name; + if (!_this.lockfile.getLocked(pattern)) { + // when we use --save we save the dependency to the lockfile with just the name rather than the + // version combo + pattern += '@' + depMap[name]; + } + + // normalization made sure packages are mentioned only once + if (isUsed) { + usedPatterns.push(pattern); + } else { + ignorePatterns.push(pattern); + } + + _this.rootPatternsToOrigin[pattern] = depType; + patterns.push(pattern); + deps.push({ pattern, registry, hint, optional, workspaceName: manifest.name, workspaceLoc: manifest._loc }); + } + }; + + if (cwdIsRoot) { + pushDeps('dependencies', projectManifestJson, { hint: null, optional: false }, true); + pushDeps('devDependencies', projectManifestJson, { hint: 'dev', optional: false }, !_this.config.production); + pushDeps('optionalDependencies', projectManifestJson, { hint: 'optional', optional: true }, true); + } + + if (_this.config.workspaceRootFolder) { + const workspaceLoc = cwdIsRoot ? loc : path.join(_this.config.lockfileFolder, filename); + const workspacesRoot = path.dirname(workspaceLoc); + + let workspaceManifestJson = projectManifestJson; + if (!cwdIsRoot) { + // the manifest we read before was a child workspace, so get the root + workspaceManifestJson = yield _this.config.readJson(workspaceLoc); + yield (0, (_index || _load_index()).default)(workspaceManifestJson, workspacesRoot, _this.config, true); + } + + const workspaces = yield _this.config.resolveWorkspaces(workspacesRoot, workspaceManifestJson); + workspaceLayout = new (_workspaceLayout || _load_workspaceLayout()).default(workspaces, _this.config); + + // add virtual manifest that depends on all workspaces, this way package hoisters and resolvers will work fine + const workspaceDependencies = (0, (_extends2 || _load_extends()).default)({}, workspaceManifestJson.dependencies); + for (var _iterator5 = Object.keys(workspaces), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) { + var _ref5; + + if (_isArray5) { + if (_i5 >= _iterator5.length) break; + _ref5 = _iterator5[_i5++]; + } else { + _i5 = _iterator5.next(); + if (_i5.done) break; + _ref5 = _i5.value; + } + + const workspaceName = _ref5; + + const workspaceManifest = workspaces[workspaceName].manifest; + workspaceDependencies[workspaceName] = workspaceManifest.version; + + // include dependencies from all workspaces + if (_this.flags.includeWorkspaceDeps) { + pushDeps('dependencies', workspaceManifest, { hint: null, optional: false }, true); + pushDeps('devDependencies', workspaceManifest, { hint: 'dev', optional: false }, !_this.config.production); + pushDeps('optionalDependencies', workspaceManifest, { hint: 'optional', optional: true }, true); + } + } + const virtualDependencyManifest = { + _uid: '', + name: `workspace-aggregator-${uuid.v4()}`, + version: '1.0.0', + _registry: 'npm', + _loc: workspacesRoot, + dependencies: workspaceDependencies, + devDependencies: (0, (_extends2 || _load_extends()).default)({}, workspaceManifestJson.devDependencies), + optionalDependencies: (0, (_extends2 || _load_extends()).default)({}, workspaceManifestJson.optionalDependencies), + private: workspaceManifestJson.private, + workspaces: workspaceManifestJson.workspaces + }; + workspaceLayout.virtualManifestName = virtualDependencyManifest.name; + const virtualDep = {}; + virtualDep[virtualDependencyManifest.name] = virtualDependencyManifest.version; + workspaces[virtualDependencyManifest.name] = { loc: workspacesRoot, manifest: virtualDependencyManifest }; + + // ensure dependencies that should be excluded are stripped from the correct manifest + stripExcluded(cwdIsRoot ? virtualDependencyManifest : workspaces[projectManifestJson.name].manifest); + + pushDeps('workspaces', { workspaces: virtualDep }, { hint: 'workspaces', optional: false }, true); + + const implicitWorkspaceDependencies = (0, (_extends2 || _load_extends()).default)({}, workspaceDependencies); + + for (var _iterator6 = (_constants || _load_constants()).OWNED_DEPENDENCY_TYPES, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) { + var _ref6; + + if (_isArray6) { + if (_i6 >= _iterator6.length) break; + _ref6 = _iterator6[_i6++]; + } else { + _i6 = _iterator6.next(); + if (_i6.done) break; + _ref6 = _i6.value; + } + + const type = _ref6; + + for (var _iterator7 = Object.keys(projectManifestJson[type] || {}), _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) { + var _ref7; + + if (_isArray7) { + if (_i7 >= _iterator7.length) break; + _ref7 = _iterator7[_i7++]; + } else { + _i7 = _iterator7.next(); + if (_i7.done) break; + _ref7 = _i7.value; + } + + const dependencyName = _ref7; + + delete implicitWorkspaceDependencies[dependencyName]; + } + } + + pushDeps('dependencies', { dependencies: implicitWorkspaceDependencies }, { hint: 'workspaces', optional: false }, true); + } + + break; + } + + // inherit root flat flag + if (manifest.flat) { + _this.flags.flat = true; + } + + return { + requests: [...resolutionDeps, ...deps], + patterns, + manifest, + usedPatterns, + ignorePatterns, + workspaceLayout + }; + })(); + } + + /** + * TODO description + */ + + prepareRequests(requests) { + return requests; + } + + preparePatterns(patterns) { + return patterns; + } + preparePatternsForLinking(patterns, cwdManifest, cwdIsRoot) { + return patterns; + } + + prepareManifests() { + var _this2 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + const manifests = yield _this2.config.getRootManifests(); + return manifests; + })(); + } + + bailout(patterns, workspaceLayout) { + var _this3 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + // We don't want to skip the audit - it could yield important errors + if (_this3.flags.audit) { + return false; + } + // PNP is so fast that the integrity check isn't pertinent + if (_this3.config.plugnplayEnabled) { + return false; + } + if (_this3.flags.skipIntegrityCheck || _this3.flags.force) { + return false; + } + const lockfileCache = _this3.lockfile.cache; + if (!lockfileCache) { + return false; + } + const lockfileClean = _this3.lockfile.parseResultType === 'success'; + const match = yield _this3.integrityChecker.check(patterns, lockfileCache, _this3.flags, workspaceLayout); + if (_this3.flags.frozenLockfile && (!lockfileClean || match.missingPatterns.length > 0)) { + throw new (_errors || _load_errors()).MessageError(_this3.reporter.lang('frozenLockfileError')); + } + + const haveLockfile = yield (_fs || _load_fs()).exists(path.join(_this3.config.lockfileFolder, (_constants || _load_constants()).LOCKFILE_FILENAME)); + + const lockfileIntegrityPresent = !_this3.lockfile.hasEntriesExistWithoutIntegrity(); + const integrityBailout = lockfileIntegrityPresent || !_this3.config.autoAddIntegrity; + + if (match.integrityMatches && haveLockfile && lockfileClean && integrityBailout) { + _this3.reporter.success(_this3.reporter.lang('upToDate')); + return true; + } + + if (match.integrityFileMissing && haveLockfile) { + // Integrity file missing, force script installations + _this3.scripts.setForce(true); + return false; + } + + if (match.hardRefreshRequired) { + // e.g. node version doesn't match, force script installations + _this3.scripts.setForce(true); + return false; + } + + if (!patterns.length && !match.integrityFileMissing) { + _this3.reporter.success(_this3.reporter.lang('nothingToInstall')); + yield _this3.createEmptyManifestFolders(); + yield _this3.saveLockfileAndIntegrity(patterns, workspaceLayout); + return true; + } + + return false; + })(); + } + + /** + * Produce empty folders for all used root manifests. + */ + + createEmptyManifestFolders() { + var _this4 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + if (_this4.config.modulesFolder) { + // already created + return; + } + + for (var _iterator9 = _this4.rootManifestRegistries, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) { + var _ref10; + + if (_isArray9) { + if (_i9 >= _iterator9.length) break; + _ref10 = _iterator9[_i9++]; + } else { + _i9 = _iterator9.next(); + if (_i9.done) break; + _ref10 = _i9.value; + } + + const registryName = _ref10; + const folder = _this4.config.registries[registryName].folder; + + yield (_fs || _load_fs()).mkdirp(path.join(_this4.config.lockfileFolder, folder)); + } + })(); + } + + /** + * TODO description + */ + + markIgnored(patterns) { + for (var _iterator10 = patterns, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) { + var _ref11; + + if (_isArray10) { + if (_i10 >= _iterator10.length) break; + _ref11 = _iterator10[_i10++]; + } else { + _i10 = _iterator10.next(); + if (_i10.done) break; + _ref11 = _i10.value; + } + + const pattern = _ref11; + + const manifest = this.resolver.getStrictResolvedPattern(pattern); + const ref = manifest._reference; + invariant(ref, 'expected package reference'); + + // just mark the package as ignored. if the package is used by a required package, the hoister + // will take care of that. + ref.ignore = true; + } + } + + /** + * helper method that gets only recent manifests + * used by global.ls command + */ + getFlattenedDeps() { + var _this5 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + var _ref12 = yield _this5.fetchRequestFromCwd(); + + const depRequests = _ref12.requests, + rawPatterns = _ref12.patterns; + + + yield _this5.resolver.init(depRequests, {}); + + const manifests = yield (_packageFetcher || _load_packageFetcher()).fetch(_this5.resolver.getManifests(), _this5.config); + _this5.resolver.updateManifests(manifests); + + return _this5.flatten(rawPatterns); + })(); + } + + /** + * TODO description + */ + + init() { + var _this6 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + _this6.checkUpdate(); + + // warn if we have a shrinkwrap + if (yield (_fs || _load_fs()).exists(path.join(_this6.config.lockfileFolder, (_constants || _load_constants()).NPM_SHRINKWRAP_FILENAME))) { + _this6.reporter.warn(_this6.reporter.lang('shrinkwrapWarning')); + } + + // warn if we have an npm lockfile + if (yield (_fs || _load_fs()).exists(path.join(_this6.config.lockfileFolder, (_constants || _load_constants()).NPM_LOCK_FILENAME))) { + _this6.reporter.warn(_this6.reporter.lang('npmLockfileWarning')); + } + + if (_this6.config.plugnplayEnabled) { + _this6.reporter.info(_this6.reporter.lang('plugnplaySuggestV2L1')); + _this6.reporter.info(_this6.reporter.lang('plugnplaySuggestV2L2')); + } + + let flattenedTopLevelPatterns = []; + const steps = []; + + var _ref13 = yield _this6.fetchRequestFromCwd(); + + const depRequests = _ref13.requests, + rawPatterns = _ref13.patterns, + ignorePatterns = _ref13.ignorePatterns, + workspaceLayout = _ref13.workspaceLayout, + manifest = _ref13.manifest; + + let topLevelPatterns = []; + + const artifacts = yield _this6.integrityChecker.getArtifacts(); + if (artifacts) { + _this6.linker.setArtifacts(artifacts); + _this6.scripts.setArtifacts(artifacts); + } + + if ((_packageCompatibility || _load_packageCompatibility()).shouldCheck(manifest, _this6.flags)) { + steps.push((() => { + var _ref14 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (curr, total) { + _this6.reporter.step(curr, total, _this6.reporter.lang('checkingManifest'), emoji.get('mag')); + yield _this6.checkCompatibility(); + }); + + return function (_x, _x2) { + return _ref14.apply(this, arguments); + }; + })()); + } + + const audit = new (_audit || _load_audit()).default(_this6.config, _this6.reporter, { groups: (_constants || _load_constants()).OWNED_DEPENDENCY_TYPES }); + let auditFoundProblems = false; + + steps.push(function (curr, total) { + return (0, (_hooks || _load_hooks()).callThroughHook)('resolveStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + _this6.reporter.step(curr, total, _this6.reporter.lang('resolvingPackages'), emoji.get('mag')); + yield _this6.resolver.init(_this6.prepareRequests(depRequests), { + isFlat: _this6.flags.flat, + isFrozen: _this6.flags.frozenLockfile, + workspaceLayout + }); + topLevelPatterns = _this6.preparePatterns(rawPatterns); + flattenedTopLevelPatterns = yield _this6.flatten(topLevelPatterns); + return { bailout: !_this6.flags.audit && (yield _this6.bailout(topLevelPatterns, workspaceLayout)) }; + })); + }); + + if (_this6.flags.audit) { + steps.push(function (curr, total) { + return (0, (_hooks || _load_hooks()).callThroughHook)('auditStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + _this6.reporter.step(curr, total, _this6.reporter.lang('auditRunning'), emoji.get('mag')); + if (_this6.flags.offline) { + _this6.reporter.warn(_this6.reporter.lang('auditOffline')); + return { bailout: false }; + } + const preparedManifests = yield _this6.prepareManifests(); + // $FlowFixMe - Flow considers `m` in the map operation to be "mixed", so does not recognize `m.object` + const mergedManifest = Object.assign({}, ...Object.values(preparedManifests).map(function (m) { + return m.object; + })); + const auditVulnerabilityCounts = yield audit.performAudit(mergedManifest, _this6.lockfile, _this6.resolver, _this6.linker, topLevelPatterns); + auditFoundProblems = auditVulnerabilityCounts.info || auditVulnerabilityCounts.low || auditVulnerabilityCounts.moderate || auditVulnerabilityCounts.high || auditVulnerabilityCounts.critical; + return { bailout: yield _this6.bailout(topLevelPatterns, workspaceLayout) }; + })); + }); + } + + steps.push(function (curr, total) { + return (0, (_hooks || _load_hooks()).callThroughHook)('fetchStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + _this6.markIgnored(ignorePatterns); + _this6.reporter.step(curr, total, _this6.reporter.lang('fetchingPackages'), emoji.get('truck')); + const manifests = yield (_packageFetcher || _load_packageFetcher()).fetch(_this6.resolver.getManifests(), _this6.config); + _this6.resolver.updateManifests(manifests); + yield (_packageCompatibility || _load_packageCompatibility()).check(_this6.resolver.getManifests(), _this6.config, _this6.flags.ignoreEngines); + })); + }); + + steps.push(function (curr, total) { + return (0, (_hooks || _load_hooks()).callThroughHook)('linkStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + // remove integrity hash to make this operation atomic + yield _this6.integrityChecker.removeIntegrityFile(); + _this6.reporter.step(curr, total, _this6.reporter.lang('linkingDependencies'), emoji.get('link')); + flattenedTopLevelPatterns = _this6.preparePatternsForLinking(flattenedTopLevelPatterns, manifest, _this6.config.lockfileFolder === _this6.config.cwd); + yield _this6.linker.init(flattenedTopLevelPatterns, workspaceLayout, { + linkDuplicates: _this6.flags.linkDuplicates, + ignoreOptional: _this6.flags.ignoreOptional + }); + })); + }); + + if (_this6.config.plugnplayEnabled) { + steps.push(function (curr, total) { + return (0, (_hooks || _load_hooks()).callThroughHook)('pnpStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + const pnpPath = `${_this6.config.lockfileFolder}/${(_constants || _load_constants()).PNP_FILENAME}`; + + const code = yield (0, (_generatePnpMap || _load_generatePnpMap()).generatePnpMap)(_this6.config, flattenedTopLevelPatterns, { + resolver: _this6.resolver, + reporter: _this6.reporter, + targetPath: pnpPath, + workspaceLayout + }); + + try { + const file = yield (_fs || _load_fs()).readFile(pnpPath); + if (file === code) { + return; + } + } catch (error) {} + + yield (_fs || _load_fs()).writeFile(pnpPath, code); + yield (_fs || _load_fs()).chmod(pnpPath, 0o755); + })); + }); + } + + steps.push(function (curr, total) { + return (0, (_hooks || _load_hooks()).callThroughHook)('buildStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + _this6.reporter.step(curr, total, _this6.flags.force ? _this6.reporter.lang('rebuildingPackages') : _this6.reporter.lang('buildingFreshPackages'), emoji.get('hammer')); + + if (_this6.config.ignoreScripts) { + _this6.reporter.warn(_this6.reporter.lang('ignoredScripts')); + } else { + yield _this6.scripts.init(flattenedTopLevelPatterns); + } + })); + }); + + if (_this6.flags.har) { + steps.push((() => { + var _ref21 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (curr, total) { + const formattedDate = new Date().toISOString().replace(/:/g, '-'); + const filename = `yarn-install_${formattedDate}.har`; + _this6.reporter.step(curr, total, _this6.reporter.lang('savingHar', filename), emoji.get('black_circle_for_record')); + yield _this6.config.requestManager.saveHar(filename); + }); + + return function (_x3, _x4) { + return _ref21.apply(this, arguments); + }; + })()); + } + + if (yield _this6.shouldClean()) { + steps.push((() => { + var _ref22 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (curr, total) { + _this6.reporter.step(curr, total, _this6.reporter.lang('cleaningModules'), emoji.get('recycle')); + yield (0, (_autoclean || _load_autoclean()).clean)(_this6.config, _this6.reporter); + }); + + return function (_x5, _x6) { + return _ref22.apply(this, arguments); + }; + })()); + } + + let currentStep = 0; + for (var _iterator11 = steps, _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) { + var _ref23; + + if (_isArray11) { + if (_i11 >= _iterator11.length) break; + _ref23 = _iterator11[_i11++]; + } else { + _i11 = _iterator11.next(); + if (_i11.done) break; + _ref23 = _i11.value; + } + + const step = _ref23; + + const stepResult = yield step(++currentStep, steps.length); + if (stepResult && stepResult.bailout) { + if (_this6.flags.audit) { + audit.summary(); + } + if (auditFoundProblems) { + _this6.reporter.warn(_this6.reporter.lang('auditRunAuditForDetails')); + } + _this6.maybeOutputUpdate(); + return flattenedTopLevelPatterns; + } + } + + // fin! + if (_this6.flags.audit) { + audit.summary(); + } + if (auditFoundProblems) { + _this6.reporter.warn(_this6.reporter.lang('auditRunAuditForDetails')); + } + yield _this6.saveLockfileAndIntegrity(topLevelPatterns, workspaceLayout); + yield _this6.persistChanges(); + _this6.maybeOutputUpdate(); + _this6.config.requestManager.clearCache(); + return flattenedTopLevelPatterns; + })(); + } + + checkCompatibility() { + var _this7 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + var _ref24 = yield _this7.fetchRequestFromCwd(); + + const manifest = _ref24.manifest; + + yield (_packageCompatibility || _load_packageCompatibility()).checkOne(manifest, _this7.config, _this7.flags.ignoreEngines); + })(); + } + + persistChanges() { + var _this8 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + // get all the different registry manifests in this folder + const manifests = yield _this8.config.getRootManifests(); + + if (yield _this8.applyChanges(manifests)) { + yield _this8.config.saveRootManifests(manifests); + } + })(); + } + + applyChanges(manifests) { + let hasChanged = false; + + if (this.config.plugnplayPersist) { + const object = manifests.npm.object; + + + if (typeof object.installConfig !== 'object') { + object.installConfig = {}; + } + + if (this.config.plugnplayEnabled && object.installConfig.pnp !== true) { + object.installConfig.pnp = true; + hasChanged = true; + } else if (!this.config.plugnplayEnabled && typeof object.installConfig.pnp !== 'undefined') { + delete object.installConfig.pnp; + hasChanged = true; + } + + if (Object.keys(object.installConfig).length === 0) { + delete object.installConfig; + } + } + + return Promise.resolve(hasChanged); + } + + /** + * Check if we should run the cleaning step. + */ + + shouldClean() { + return (_fs || _load_fs()).exists(path.join(this.config.lockfileFolder, (_constants || _load_constants()).CLEAN_FILENAME)); + } + + /** + * TODO + */ + + flatten(patterns) { + var _this9 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + if (!_this9.flags.flat) { + return patterns; + } + + const flattenedPatterns = []; + + for (var _iterator12 = _this9.resolver.getAllDependencyNamesByLevelOrder(patterns), _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) { + var _ref25; + + if (_isArray12) { + if (_i12 >= _iterator12.length) break; + _ref25 = _iterator12[_i12++]; + } else { + _i12 = _iterator12.next(); + if (_i12.done) break; + _ref25 = _i12.value; + } + + const name = _ref25; + + const infos = _this9.resolver.getAllInfoForPackageName(name).filter(function (manifest) { + const ref = manifest._reference; + invariant(ref, 'expected package reference'); + return !ref.ignore; + }); + + if (infos.length === 0) { + continue; + } + + if (infos.length === 1) { + // single version of this package + // take out a single pattern as multiple patterns may have resolved to this package + flattenedPatterns.push(_this9.resolver.patternsByPackage[name][0]); + continue; + } + + const options = infos.map(function (info) { + const ref = info._reference; + invariant(ref, 'expected reference'); + return { + // TODO `and is required by {PARENT}`, + name: _this9.reporter.lang('manualVersionResolutionOption', ref.patterns.join(', '), info.version), + + value: info.version + }; + }); + const versions = infos.map(function (info) { + return info.version; + }); + let version; + + const resolutionVersion = _this9.resolutions[name]; + if (resolutionVersion && versions.indexOf(resolutionVersion) >= 0) { + // use json `resolution` version + version = resolutionVersion; + } else { + version = yield _this9.reporter.select(_this9.reporter.lang('manualVersionResolution', name), _this9.reporter.lang('answer'), options); + _this9.resolutions[name] = version; + } + + flattenedPatterns.push(_this9.resolver.collapseAllVersionsOfPackage(name, version)); + } + + // save resolutions to their appropriate root manifest + if (Object.keys(_this9.resolutions).length) { + const manifests = yield _this9.config.getRootManifests(); + + for (const name in _this9.resolutions) { + const version = _this9.resolutions[name]; + + const patterns = _this9.resolver.patternsByPackage[name]; + if (!patterns) { + continue; + } + + let manifest; + for (var _iterator13 = patterns, _isArray13 = Array.isArray(_iterator13), _i13 = 0, _iterator13 = _isArray13 ? _iterator13 : _iterator13[Symbol.iterator]();;) { + var _ref26; + + if (_isArray13) { + if (_i13 >= _iterator13.length) break; + _ref26 = _iterator13[_i13++]; + } else { + _i13 = _iterator13.next(); + if (_i13.done) break; + _ref26 = _i13.value; + } + + const pattern = _ref26; + + manifest = _this9.resolver.getResolvedPattern(pattern); + if (manifest) { + break; + } + } + invariant(manifest, 'expected manifest'); + + const ref = manifest._reference; + invariant(ref, 'expected reference'); + + const object = manifests[ref.registry].object; + object.resolutions = object.resolutions || {}; + object.resolutions[name] = version; + } + + yield _this9.config.saveRootManifests(manifests); + } + + return flattenedPatterns; + })(); + } + + /** + * Remove offline tarballs that are no longer required + */ + + pruneOfflineMirror(lockfile) { + var _this10 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + const mirror = _this10.config.getOfflineMirrorPath(); + if (!mirror) { + return; + } + + const requiredTarballs = new Set(); + for (const dependency in lockfile) { + const resolved = lockfile[dependency].resolved; + if (resolved) { + const basename = path.basename(resolved.split('#')[0]); + if (dependency[0] === '@' && basename[0] !== '@') { + requiredTarballs.add(`${dependency.split('/')[0]}-${basename}`); + } + requiredTarballs.add(basename); + } + } + + const mirrorFiles = yield (_fs || _load_fs()).walk(mirror); + for (var _iterator14 = mirrorFiles, _isArray14 = Array.isArray(_iterator14), _i14 = 0, _iterator14 = _isArray14 ? _iterator14 : _iterator14[Symbol.iterator]();;) { + var _ref27; + + if (_isArray14) { + if (_i14 >= _iterator14.length) break; + _ref27 = _iterator14[_i14++]; + } else { + _i14 = _iterator14.next(); + if (_i14.done) break; + _ref27 = _i14.value; + } + + const file = _ref27; + + const isTarball = path.extname(file.basename) === '.tgz'; + // if using experimental-pack-script-packages-in-mirror flag, don't unlink prebuilt packages + const hasPrebuiltPackage = file.relative.startsWith('prebuilt/'); + if (isTarball && !hasPrebuiltPackage && !requiredTarballs.has(file.basename)) { + yield (_fs || _load_fs()).unlink(file.absolute); + } + } + })(); + } + + /** + * Save updated integrity and lockfiles. + */ + + saveLockfileAndIntegrity(patterns, workspaceLayout) { + var _this11 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + const resolvedPatterns = {}; + Object.keys(_this11.resolver.patterns).forEach(function (pattern) { + if (!workspaceLayout || !workspaceLayout.getManifestByPattern(pattern)) { + resolvedPatterns[pattern] = _this11.resolver.patterns[pattern]; + } + }); + + // TODO this code is duplicated in a few places, need a common way to filter out workspace patterns from lockfile + patterns = patterns.filter(function (p) { + return !workspaceLayout || !workspaceLayout.getManifestByPattern(p); + }); + + const lockfileBasedOnResolver = _this11.lockfile.getLockfile(resolvedPatterns); + + if (_this11.config.pruneOfflineMirror) { + yield _this11.pruneOfflineMirror(lockfileBasedOnResolver); + } + + // write integrity hash + if (!_this11.config.plugnplayEnabled) { + yield _this11.integrityChecker.save(patterns, lockfileBasedOnResolver, _this11.flags, workspaceLayout, _this11.scripts.getArtifacts()); + } + + // --no-lockfile or --pure-lockfile or --frozen-lockfile + if (_this11.flags.lockfile === false || _this11.flags.pureLockfile || _this11.flags.frozenLockfile) { + return; + } + + const lockFileHasAllPatterns = patterns.every(function (p) { + return _this11.lockfile.getLocked(p); + }); + const lockfilePatternsMatch = Object.keys(_this11.lockfile.cache || {}).every(function (p) { + return lockfileBasedOnResolver[p]; + }); + const resolverPatternsAreSameAsInLockfile = Object.keys(lockfileBasedOnResolver).every(function (pattern) { + const manifest = _this11.lockfile.getLocked(pattern); + return manifest && manifest.resolved === lockfileBasedOnResolver[pattern].resolved && deepEqual(manifest.prebuiltVariants, lockfileBasedOnResolver[pattern].prebuiltVariants); + }); + const integrityPatternsAreSameAsInLockfile = Object.keys(lockfileBasedOnResolver).every(function (pattern) { + const existingIntegrityInfo = lockfileBasedOnResolver[pattern].integrity; + if (!existingIntegrityInfo) { + // if this entry does not have an integrity, no need to re-write the lockfile because of it + return true; + } + const manifest = _this11.lockfile.getLocked(pattern); + if (manifest && manifest.integrity) { + const manifestIntegrity = ssri.stringify(manifest.integrity); + return manifestIntegrity === existingIntegrityInfo; + } + return false; + }); + + // remove command is followed by install with force, lockfile will be rewritten in any case then + if (!_this11.flags.force && _this11.lockfile.parseResultType === 'success' && lockFileHasAllPatterns && lockfilePatternsMatch && resolverPatternsAreSameAsInLockfile && integrityPatternsAreSameAsInLockfile && patterns.length) { + return; + } + + // build lockfile location + const loc = path.join(_this11.config.lockfileFolder, (_constants || _load_constants()).LOCKFILE_FILENAME); + + // write lockfile + const lockSource = (0, (_lockfile2 || _load_lockfile2()).stringify)(lockfileBasedOnResolver, false, _this11.config.enableLockfileVersions); + yield (_fs || _load_fs()).writeFilePreservingEol(loc, lockSource); + + _this11._logSuccessSaveLockfile(); + })(); + } + + _logSuccessSaveLockfile() { + this.reporter.success(this.reporter.lang('savedLockfile')); + } + + /** + * Load the dependency graph of the current install. Only does package resolving and wont write to the cwd. + */ + hydrate(ignoreUnusedPatterns) { + var _this12 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + const request = yield _this12.fetchRequestFromCwd([], ignoreUnusedPatterns); + const depRequests = request.requests, + rawPatterns = request.patterns, + ignorePatterns = request.ignorePatterns, + workspaceLayout = request.workspaceLayout; + + + yield _this12.resolver.init(depRequests, { + isFlat: _this12.flags.flat, + isFrozen: _this12.flags.frozenLockfile, + workspaceLayout + }); + yield _this12.flatten(rawPatterns); + _this12.markIgnored(ignorePatterns); + + // fetch packages, should hit cache most of the time + const manifests = yield (_packageFetcher || _load_packageFetcher()).fetch(_this12.resolver.getManifests(), _this12.config); + _this12.resolver.updateManifests(manifests); + yield (_packageCompatibility || _load_packageCompatibility()).check(_this12.resolver.getManifests(), _this12.config, _this12.flags.ignoreEngines); + + // expand minimal manifests + for (var _iterator15 = _this12.resolver.getManifests(), _isArray15 = Array.isArray(_iterator15), _i15 = 0, _iterator15 = _isArray15 ? _iterator15 : _iterator15[Symbol.iterator]();;) { + var _ref28; + + if (_isArray15) { + if (_i15 >= _iterator15.length) break; + _ref28 = _iterator15[_i15++]; + } else { + _i15 = _iterator15.next(); + if (_i15.done) break; + _ref28 = _i15.value; + } + + const manifest = _ref28; + + const ref = manifest._reference; + invariant(ref, 'expected reference'); + const type = ref.remote.type; + // link specifier won't ever hit cache + + let loc = ''; + if (type === 'link') { + continue; + } else if (type === 'workspace') { + if (!ref.remote.reference) { + continue; + } + loc = ref.remote.reference; + } else { + loc = _this12.config.generateModuleCachePath(ref); + } + const newPkg = yield _this12.config.readManifest(loc); + yield _this12.resolver.updateManifest(ref, newPkg); + } + + return request; + })(); + } + + /** + * Check for updates every day and output a nag message if there's a newer version. + */ + + checkUpdate() { + if (this.config.nonInteractive) { + // don't show upgrade dialog on CI or non-TTY terminals + return; + } + + // don't check if disabled + if (this.config.getOption('disable-self-update-check')) { + return; + } + + // only check for updates once a day + const lastUpdateCheck = Number(this.config.getOption('lastUpdateCheck')) || 0; + if (lastUpdateCheck && Date.now() - lastUpdateCheck < ONE_DAY) { + return; + } + + // don't bug for updates on tagged releases + if ((_yarnVersion || _load_yarnVersion()).version.indexOf('-') >= 0) { + return; + } + + this._checkUpdate().catch(() => { + // swallow errors + }); + } + + _checkUpdate() { + var _this13 = this; + + return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () { + let latestVersion = yield _this13.config.requestManager.request({ + url: (_constants || _load_constants()).SELF_UPDATE_VERSION_URL + }); + invariant(typeof latestVersion === 'string', 'expected string'); + latestVersion = latestVersion.trim(); + if (!semver.valid(latestVersion)) { + return; + } + + // ensure we only check for updates periodically + _this13.config.registries.yarn.saveHomeConfig({ + lastUpdateCheck: Date.now() + }); + + if (semver.gt(latestVersion, (_yarnVersion || _load_yarnVersion()).version)) { + const installationMethod = yield (0, (_yarnVersion || _load_yarnVersion()).getInstallationMethod)(); + _this13.maybeOutputUpdate = function () { + _this13.reporter.warn(_this13.reporter.lang('yarnOutdated', latestVersion, (_yarnVersion || _load_yarnVersion()).version)); + + const command = getUpdateCommand(installationMethod); + if (command) { + _this13.reporter.info(_this13.reporter.lang('yarnOutdatedCommand')); + _this13.reporter.command(command); + } else { + const installer = getUpdateInstaller(installationMethod); + if (installer) { + _this13.reporter.info(_this13.reporter.lang('yarnOutdatedInstaller', installer)); + } + } + }; + } + })(); + } + + /** + * Method to override with a possible upgrade message. + */ + + maybeOutputUpdate() {} +} + +exports.Install = Install; +function hasWrapper(commander, args) { + return true; +} + +function setFlags(commander) { + commander.description('Yarn install is used to install all dependencies for a project.'); + commander.usage('install [flags]'); + commander.option('-A, --audit', 'Run vulnerability audit on installed packages'); + commander.option('-g, --global', 'DEPRECATED'); + commander.option('-S, --save', 'DEPRECATED - save package to your `dependencies`'); + commander.option('-D, --save-dev', 'DEPRECATED - save package to your `devDependencies`'); + commander.option('-P, --save-peer', 'DEPRECATED - save package to your `peerDependencies`'); + commander.option('-O, --save-optional', 'DEPRECATED - save package to your `optionalDependencies`'); + commander.option('-E, --save-exact', 'DEPRECATED'); + commander.option('-T, --save-tilde', 'DEPRECATED'); +} + +/***/ }), +/* 35 */ +/***/ (function(module, exports, __webpack_require__) { + +var isObject = __webpack_require__(52); +module.exports = function (it) { + if (!isObject(it)) throw TypeError(it + ' is not an object!'); + return it; +}; + + +/***/ }), +/* 36 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return SubjectSubscriber; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Subject; }); +/* unused harmony export AnonymousSubject */ +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Observable__ = __webpack_require__(11); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subscriber__ = __webpack_require__(7); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscription__ = __webpack_require__(25); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__ = __webpack_require__(189); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__SubjectSubscription__ = __webpack_require__(422); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__internal_symbol_rxSubscriber__ = __webpack_require__(321); +/** PURE_IMPORTS_START tslib,_Observable,_Subscriber,_Subscription,_util_ObjectUnsubscribedError,_SubjectSubscription,_internal_symbol_rxSubscriber PURE_IMPORTS_END */ + + + + + + + +var SubjectSubscriber = /*@__PURE__*/ (function (_super) { + __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SubjectSubscriber, _super); + function SubjectSubscriber(destination) { + var _this = _super.call(this, destination) || this; + _this.destination = destination; + return _this; + } + return SubjectSubscriber; +}(__WEBPACK_IMPORTED_MODULE_2__Subscriber__["a" /* Subscriber */])); + +var Subject = /*@__PURE__*/ (function (_super) { + __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](Subject, _super); + function Subject() { + var _this = _super.call(this) || this; + _this.observers = []; + _this.closed = false; + _this.isStopped = false; + _this.hasError = false; + _this.thrownError = null; + return _this; + } + Subject.prototype[__WEBPACK_IMPORTED_MODULE_6__internal_symbol_rxSubscriber__["a" /* rxSubscriber */]] = function () { + return new SubjectSubscriber(this); + }; + Subject.prototype.lift = function (operator) { + var subject = new AnonymousSubject(this, this); + subject.operator = operator; + return subject; + }; + Subject.prototype.next = function (value) { + if (this.closed) { + throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */](); + } + if (!this.isStopped) { + var observers = this.observers; + var len = observers.length; + var copy = observers.slice(); + for (var i = 0; i < len; i++) { + copy[i].next(value); + } + } + }; + Subject.prototype.error = function (err) { + if (this.closed) { + throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */](); + } + this.hasError = true; + this.thrownError = err; + this.isStopped = true; + var observers = this.observers; + var len = observers.length; + var copy = observers.slice(); + for (var i = 0; i < len; i++) { + copy[i].error(err); + } + this.observers.length = 0; + }; + Subject.prototype.complete = function () { + if (this.closed) { + throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */](); + } + this.isStopped = true; + var observers = this.observers; + var len = observers.length; + var copy = observers.slice(); + for (var i = 0; i < len; i++) { + copy[i].complete(); + } + this.observers.length = 0; + }; + Subject.prototype.unsubscribe = function () { + this.isStopped = true; + this.closed = true; + this.observers = null; + }; + Subject.prototype._trySubscribe = function (subscriber) { + if (this.closed) { + throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */](); + } + else { + return _super.prototype._trySubscribe.call(this, subscriber); + } + }; + Subject.prototype._subscribe = function (subscriber) { + if (this.closed) { + throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */](); + } + else if (this.hasError) { + subscriber.error(this.thrownError); + return __WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */].EMPTY; + } + else if (this.isStopped) { + subscriber.complete(); + return __WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */].EMPTY; + } + else { + this.observers.push(subscriber); + return new __WEBPACK_IMPORTED_MODULE_5__SubjectSubscription__["a" /* SubjectSubscription */](this, subscriber); + } + }; + Subject.prototype.asObservable = function () { + var observable = new __WEBPACK_IMPORTED_MODULE_1__Observable__["a" /* Observable */](); + observable.source = this; + return observable; + }; + Subject.create = function (destination, source) { + return new AnonymousSubject(destination, source); + }; + return Subject; +}(__WEBPACK_IMPORTED_MODULE_1__Observable__["a" /* Observable */])); + +var AnonymousSubject = /*@__PURE__*/ (function (_super) { + __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AnonymousSubject, _super); + function AnonymousSubject(destination, source) { + var _this = _super.call(this) || this; + _this.destination = destination; + _this.source = source; + return _this; + } + AnonymousSubject.prototype.next = function (value) { + var destination = this.destination; + if (destination && destination.next) { + destination.next(value); + } + }; + AnonymousSubject.prototype.error = function (err) { + var destination = this.destination; + if (destination && destination.error) { + this.destination.error(err); + } + }; + AnonymousSubject.prototype.complete = function () { + var destination = this.destination; + if (destination && destination.complete) { + this.destination.complete(); + } + }; + AnonymousSubject.prototype._subscribe = function (subscriber) { + var source = this.source; + if (source) { + return this.source.subscribe(subscriber); + } + else { + return __WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */].EMPTY; + } + }; + return AnonymousSubject; +}(Subject)); + +//# sourceMappingURL=Subject.js.map + + +/***/ }), +/* 37 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.normalizePattern = normalizePattern; + +/** + * Explode and normalize a pattern into its name and range. + */ + +function normalizePattern(pattern) { + let hasVersion = false; + let range = 'latest'; + let name = pattern; + + // if we're a scope then remove the @ and add it back later + let isScoped = false; + if (name[0] === '@') { + isScoped = true; + name = name.slice(1); + } + + // take first part as the name + const parts = name.split('@'); + if (parts.length > 1) { + name = parts.shift(); + range = parts.join('@'); + + if (range) { + hasVersion = true; + } else { + range = '*'; + } + } + + // add back @ scope suffix + if (isScoped) { + name = `@${name}`; + } + + return { name, range, hasVersion }; +} + +/***/ }), +/* 38 */ +/***/ (function(module, exports, __webpack_require__) { + +/* WEBPACK VAR INJECTION */(function(module) {var __WEBPACK_AMD_DEFINE_RESULT__;/** + * @license + * Lodash + * Copyright JS Foundation and other contributors + * Released under MIT license + * Based on Underscore.js 1.8.3 + * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors + */ +;(function() { + + /** Used as a safe reference for `undefined` in pre-ES5 environments. */ + var undefined; + + /** Used as the semantic version number. */ + var VERSION = '4.17.10'; + + /** Used as the size to enable large array optimizations. */ + var LARGE_ARRAY_SIZE = 200; + + /** Error message constants. */ + var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.', + FUNC_ERROR_TEXT = 'Expected a function'; + + /** Used to stand-in for `undefined` hash values. */ + var HASH_UNDEFINED = '__lodash_hash_undefined__'; + + /** Used as the maximum memoize cache size. */ + var MAX_MEMOIZE_SIZE = 500; + + /** Used as the internal argument placeholder. */ + var PLACEHOLDER = '__lodash_placeholder__'; + + /** Used to compose bitmasks for cloning. */ + var CLONE_DEEP_FLAG = 1, + CLONE_FLAT_FLAG = 2, + CLONE_SYMBOLS_FLAG = 4; + + /** Used to compose bitmasks for value comparisons. */ + var COMPARE_PARTIAL_FLAG = 1, + COMPARE_UNORDERED_FLAG = 2; + + /** Used to compose bitmasks for function metadata. */ + var WRAP_BIND_FLAG = 1, + WRAP_BIND_KEY_FLAG = 2, + WRAP_CURRY_BOUND_FLAG = 4, + WRAP_CURRY_FLAG = 8, + WRAP_CURRY_RIGHT_FLAG = 16, + WRAP_PARTIAL_FLAG = 32, + WRAP_PARTIAL_RIGHT_FLAG = 64, + WRAP_ARY_FLAG = 128, + WRAP_REARG_FLAG = 256, + WRAP_FLIP_FLAG = 512; + + /** Used as default options for `_.truncate`. */ + var DEFAULT_TRUNC_LENGTH = 30, + DEFAULT_TRUNC_OMISSION = '...'; + + /** Used to detect hot functions by number of calls within a span of milliseconds. */ + var HOT_COUNT = 800, + HOT_SPAN = 16; + + /** Used to indicate the type of lazy iteratees. */ + var LAZY_FILTER_FLAG = 1, + LAZY_MAP_FLAG = 2, + LAZY_WHILE_FLAG = 3; + + /** Used as references for various `Number` constants. */ + var INFINITY = 1 / 0, + MAX_SAFE_INTEGER = 9007199254740991, + MAX_INTEGER = 1.7976931348623157e+308, + NAN = 0 / 0; + + /** Used as references for the maximum length and index of an array. */ + var MAX_ARRAY_LENGTH = 4294967295, + MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH - 1, + HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH >>> 1; + + /** Used to associate wrap methods with their bit flags. */ + var wrapFlags = [ + ['ary', WRAP_ARY_FLAG], + ['bind', WRAP_BIND_FLAG], + ['bindKey', WRAP_BIND_KEY_FLAG], + ['curry', WRAP_CURRY_FLAG], + ['curryRight', WRAP_CURRY_RIGHT_FLAG], + ['flip', WRAP_FLIP_FLAG], + ['partial', WRAP_PARTIAL_FLAG], + ['partialRight', WRAP_PARTIAL_RIGHT_FLAG], + ['rearg', WRAP_REARG_FLAG] + ]; + + /** `Object#toString` result references. */ + var argsTag = '[object Arguments]', + arrayTag = '[object Array]', + asyncTag = '[object AsyncFunction]', + boolTag = '[object Boolean]', + dateTag = '[object Date]', + domExcTag = '[object DOMException]', + errorTag = '[object Error]', + funcTag = '[object Function]', + genTag = '[object GeneratorFunction]', + mapTag = '[object Map]', + numberTag = '[object Number]', + nullTag = '[object Null]', + objectTag = '[object Object]', + promiseTag = '[object Promise]', + proxyTag = '[object Proxy]', + regexpTag = '[object RegExp]', + setTag = '[object Set]', + stringTag = '[object String]', + symbolTag = '[object Symbol]', + undefinedTag = '[object Undefined]', + weakMapTag = '[object WeakMap]', + weakSetTag = '[object WeakSet]'; + + var arrayBufferTag = '[object ArrayBuffer]', + dataViewTag = '[object DataView]', + float32Tag = '[object Float32Array]', + float64Tag = '[object Float64Array]', + int8Tag = '[object Int8Array]', + int16Tag = '[object Int16Array]', + int32Tag = '[object Int32Array]', + uint8Tag = '[object Uint8Array]', + uint8ClampedTag = '[object Uint8ClampedArray]', + uint16Tag = '[object Uint16Array]', + uint32Tag = '[object Uint32Array]'; + + /** Used to match empty string literals in compiled template source. */ + var reEmptyStringLeading = /\b__p \+= '';/g, + reEmptyStringMiddle = /\b(__p \+=) '' \+/g, + reEmptyStringTrailing = /(__e\(.*?\)|\b__t\)) \+\n'';/g; + + /** Used to match HTML entities and HTML characters. */ + var reEscapedHtml = /&(?:amp|lt|gt|quot|#39);/g, + reUnescapedHtml = /[&<>"']/g, + reHasEscapedHtml = RegExp(reEscapedHtml.source), + reHasUnescapedHtml = RegExp(reUnescapedHtml.source); + + /** Used to match template delimiters. */ + var reEscape = /<%-([\s\S]+?)%>/g, + reEvaluate = /<%([\s\S]+?)%>/g, + reInterpolate = /<%=([\s\S]+?)%>/g; + + /** Used to match property names within property paths. */ + var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/, + reIsPlainProp = /^\w*$/, + rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g; + + /** + * Used to match `RegExp` + * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns). + */ + var reRegExpChar = /[\\^$.*+?()[\]{}|]/g, + reHasRegExpChar = RegExp(reRegExpChar.source); + + /** Used to match leading and trailing whitespace. */ + var reTrim = /^\s+|\s+$/g, + reTrimStart = /^\s+/, + reTrimEnd = /\s+$/; + + /** Used to match wrap detail comments. */ + var reWrapComment = /\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/, + reWrapDetails = /\{\n\/\* \[wrapped with (.+)\] \*/, + reSplitDetails = /,? & /; + + /** Used to match words composed of alphanumeric characters. */ + var reAsciiWord = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g; + + /** Used to match backslashes in property paths. */ + var reEscapeChar = /\\(\\)?/g; + + /** + * Used to match + * [ES template delimiters](http://ecma-international.org/ecma-262/7.0/#sec-template-literal-lexical-components). + */ + var reEsTemplate = /\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g; + + /** Used to match `RegExp` flags from their coerced string values. */ + var reFlags = /\w*$/; + + /** Used to detect bad signed hexadecimal string values. */ + var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; + + /** Used to detect binary string values. */ + var reIsBinary = /^0b[01]+$/i; + + /** Used to detect host constructors (Safari). */ + var reIsHostCtor = /^\[object .+?Constructor\]$/; + + /** Used to detect octal string values. */ + var reIsOctal = /^0o[0-7]+$/i; + + /** Used to detect unsigned integer values. */ + var reIsUint = /^(?:0|[1-9]\d*)$/; + + /** Used to match Latin Unicode letters (excluding mathematical operators). */ + var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g; + + /** Used to ensure capturing order of template delimiters. */ + var reNoMatch = /($^)/; + + /** Used to match unescaped characters in compiled string literals. */ + var reUnescapedString = /['\n\r\u2028\u2029\\]/g; + + /** Used to compose unicode character classes. */ + var rsAstralRange = '\\ud800-\\udfff', + rsComboMarksRange = '\\u0300-\\u036f', + reComboHalfMarksRange = '\\ufe20-\\ufe2f', + rsComboSymbolsRange = '\\u20d0-\\u20ff', + rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange, + rsDingbatRange = '\\u2700-\\u27bf', + rsLowerRange = 'a-z\\xdf-\\xf6\\xf8-\\xff', + rsMathOpRange = '\\xac\\xb1\\xd7\\xf7', + rsNonCharRange = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf', + rsPunctuationRange = '\\u2000-\\u206f', + rsSpaceRange = ' \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000', + rsUpperRange = 'A-Z\\xc0-\\xd6\\xd8-\\xde', + rsVarRange = '\\ufe0e\\ufe0f', + rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange; + + /** Used to compose unicode capture groups. */ + var rsApos = "['\u2019]", + rsAstral = '[' + rsAstralRange + ']', + rsBreak = '[' + rsBreakRange + ']', + rsCombo = '[' + rsComboRange + ']', + rsDigits = '\\d+', + rsDingbat = '[' + rsDingbatRange + ']', + rsLower = '[' + rsLowerRange + ']', + rsMisc = '[^' + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + ']', + rsFitz = '\\ud83c[\\udffb-\\udfff]', + rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')', + rsNonAstral = '[^' + rsAstralRange + ']', + rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}', + rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]', + rsUpper = '[' + rsUpperRange + ']', + rsZWJ = '\\u200d'; + + /** Used to compose unicode regexes. */ + var rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')', + rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')', + rsOptContrLower = '(?:' + rsApos + '(?:d|ll|m|re|s|t|ve))?', + rsOptContrUpper = '(?:' + rsApos + '(?:D|LL|M|RE|S|T|VE))?', + reOptMod = rsModifier + '?', + rsOptVar = '[' + rsVarRange + ']?', + rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*', + rsOrdLower = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])', + rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])', + rsSeq = rsOptVar + reOptMod + rsOptJoin, + rsEmoji = '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq, + rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')'; + + /** Used to match apostrophes. */ + var reApos = RegExp(rsApos, 'g'); + + /** + * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and + * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols). + */ + var reComboMark = RegExp(rsCombo, 'g'); + + /** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */ + var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g'); + + /** Used to match complex or compound words. */ + var reUnicodeWord = RegExp([ + rsUpper + '?' + rsLower + '+' + rsOptContrLower + '(?=' + [rsBreak, rsUpper, '$'].join('|') + ')', + rsMiscUpper + '+' + rsOptContrUpper + '(?=' + [rsBreak, rsUpper + rsMiscLower, '$'].join('|') + ')', + rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower, + rsUpper + '+' + rsOptContrUpper, + rsOrdUpper, + rsOrdLower, + rsDigits, + rsEmoji + ].join('|'), 'g'); + + /** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */ + var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']'); + + /** Used to detect strings that need a more robust regexp to match words. */ + var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2,}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/; + + /** Used to assign default `context` object properties. */ + var contextProps = [ + 'Array', 'Buffer', 'DataView', 'Date', 'Error', 'Float32Array', 'Float64Array', + 'Function', 'Int8Array', 'Int16Array', 'Int32Array', 'Map', 'Math', 'Object', + 'Promise', 'RegExp', 'Set', 'String', 'Symbol', 'TypeError', 'Uint8Array', + 'Uint8ClampedArray', 'Uint16Array', 'Uint32Array', 'WeakMap', + '_', 'clearTimeout', 'isFinite', 'parseInt', 'setTimeout' + ]; + + /** Used to make template sourceURLs easier to identify. */ + var templateCounter = -1; + + /** Used to identify `toStringTag` values of typed arrays. */ + var typedArrayTags = {}; + typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = + typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = + typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = + typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = + typedArrayTags[uint32Tag] = true; + typedArrayTags[argsTag] = typedArrayTags[arrayTag] = + typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = + typedArrayTags[dataViewTag] = typedArrayTags[dateTag] = + typedArrayTags[errorTag] = typedArrayTags[funcTag] = + typedArrayTags[mapTag] = typedArrayTags[numberTag] = + typedArrayTags[objectTag] = typedArrayTags[regexpTag] = + typedArrayTags[setTag] = typedArrayTags[stringTag] = + typedArrayTags[weakMapTag] = false; + + /** Used to identify `toStringTag` values supported by `_.clone`. */ + var cloneableTags = {}; + cloneableTags[argsTag] = cloneableTags[arrayTag] = + cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] = + cloneableTags[boolTag] = cloneableTags[dateTag] = + cloneableTags[float32Tag] = cloneableTags[float64Tag] = + cloneableTags[int8Tag] = cloneableTags[int16Tag] = + cloneableTags[int32Tag] = cloneableTags[mapTag] = + cloneableTags[numberTag] = cloneableTags[objectTag] = + cloneableTags[regexpTag] = cloneableTags[setTag] = + cloneableTags[stringTag] = cloneableTags[symbolTag] = + cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] = + cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true; + cloneableTags[errorTag] = cloneableTags[funcTag] = + cloneableTags[weakMapTag] = false; + + /** Used to map Latin Unicode letters to basic Latin letters. */ + var deburredLetters = { + // Latin-1 Supplement block. + '\xc0': 'A', '\xc1': 'A', '\xc2': 'A', '\xc3': 'A', '\xc4': 'A', '\xc5': 'A', + '\xe0': 'a', '\xe1': 'a', '\xe2': 'a', '\xe3': 'a', '\xe4': 'a', '\xe5': 'a', + '\xc7': 'C', '\xe7': 'c', + '\xd0': 'D', '\xf0': 'd', + '\xc8': 'E', '\xc9': 'E', '\xca': 'E', '\xcb': 'E', + '\xe8': 'e', '\xe9': 'e', '\xea': 'e', '\xeb': 'e', + '\xcc': 'I', '\xcd': 'I', '\xce': 'I', '\xcf': 'I', + '\xec': 'i', '\xed': 'i', '\xee': 'i', '\xef': 'i', + '\xd1': 'N', '\xf1': 'n', + '\xd2': 'O', '\xd3': 'O', '\xd4': 'O', '\xd5': 'O', '\xd6': 'O', '\xd8': 'O', + '\xf2': 'o', '\xf3': 'o', '\xf4': 'o', '\xf5': 'o', '\xf6': 'o', '\xf8': 'o', + '\xd9': 'U', '\xda': 'U', '\xdb': 'U', '\xdc': 'U', + '\xf9': 'u', '\xfa': 'u', '\xfb': 'u', '\xfc': 'u', + '\xdd': 'Y', '\xfd': 'y', '\xff': 'y', + '\xc6': 'Ae', '\xe6': 'ae', + '\xde': 'Th', '\xfe': 'th', + '\xdf': 'ss', + // Latin Extended-A block. + '\u0100': 'A', '\u0102': 'A', '\u0104': 'A', + '\u0101': 'a', '\u0103': 'a', '\u0105': 'a', + '\u0106': 'C', '\u0108': 'C', '\u010a': 'C', '\u010c': 'C', + '\u0107': 'c', '\u0109': 'c', '\u010b': 'c', '\u010d': 'c', + '\u010e': 'D', '\u0110': 'D', '\u010f': 'd', '\u0111': 'd', + '\u0112': 'E', '\u0114': 'E', '\u0116': 'E', '\u0118': 'E', '\u011a': 'E', + '\u0113': 'e', '\u0115': 'e', '\u0117': 'e', '\u0119': 'e', '\u011b': 'e', + '\u011c': 'G', '\u011e': 'G', '\u0120': 'G', '\u0122': 'G', + '\u011d': 'g', '\u011f': 'g', '\u0121': 'g', '\u0123': 'g', + '\u0124': 'H', '\u0126': 'H', '\u0125': 'h', '\u0127': 'h', + '\u0128': 'I', '\u012a': 'I', '\u012c': 'I', '\u012e': 'I', '\u0130': 'I', + '\u0129': 'i', '\u012b': 'i', '\u012d': 'i', '\u012f': 'i', '\u0131': 'i', + '\u0134': 'J', '\u0135': 'j', + '\u0136': 'K', '\u0137': 'k', '\u0138': 'k', + '\u0139': 'L', '\u013b': 'L', '\u013d': 'L', '\u013f': 'L', '\u0141': 'L', + '\u013a': 'l', '\u013c': 'l', '\u013e': 'l', '\u0140': 'l', '\u0142': 'l', + '\u0143': 'N', '\u0145': 'N', '\u0147': 'N', '\u014a': 'N', + '\u0144': 'n', '\u0146': 'n', '\u0148': 'n', '\u014b': 'n', + '\u014c': 'O', '\u014e': 'O', '\u0150': 'O', + '\u014d': 'o', '\u014f': 'o', '\u0151': 'o', + '\u0154': 'R', '\u0156': 'R', '\u0158': 'R', + '\u0155': 'r', '\u0157': 'r', '\u0159': 'r', + '\u015a': 'S', '\u015c': 'S', '\u015e': 'S', '\u0160': 'S', + '\u015b': 's', '\u015d': 's', '\u015f': 's', '\u0161': 's', + '\u0162': 'T', '\u0164': 'T', '\u0166': 'T', + '\u0163': 't', '\u0165': 't', '\u0167': 't', + '\u0168': 'U', '\u016a': 'U', '\u016c': 'U', '\u016e': 'U', '\u0170': 'U', '\u0172': 'U', + '\u0169': 'u', '\u016b': 'u', '\u016d': 'u', '\u016f': 'u', '\u0171': 'u', '\u0173': 'u', + '\u0174': 'W', '\u0175': 'w', + '\u0176': 'Y', '\u0177': 'y', '\u0178': 'Y', + '\u0179': 'Z', '\u017b': 'Z', '\u017d': 'Z', + '\u017a': 'z', '\u017c': 'z', '\u017e': 'z', + '\u0132': 'IJ', '\u0133': 'ij', + '\u0152': 'Oe', '\u0153': 'oe', + '\u0149': "'n", '\u017f': 's' + }; + + /** Used to map characters to HTML entities. */ + var htmlEscapes = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''' + }; + + /** Used to map HTML entities to characters. */ + var htmlUnescapes = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + ''': "'" + }; + + /** Used to escape characters for inclusion in compiled string literals. */ + var stringEscapes = { + '\\': '\\', + "'": "'", + '\n': 'n', + '\r': 'r', + '\u2028': 'u2028', + '\u2029': 'u2029' + }; + + /** Built-in method references without a dependency on `root`. */ + var freeParseFloat = parseFloat, + freeParseInt = parseInt; + + /** Detect free variable `global` from Node.js. */ + var freeGlobal = typeof global == 'object' && global && global.Object === Object && global; + + /** Detect free variable `self`. */ + var freeSelf = typeof self == 'object' && self && self.Object === Object && self; + + /** Used as a reference to the global object. */ + var root = freeGlobal || freeSelf || Function('return this')(); + + /** Detect free variable `exports`. */ + var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports; + + /** Detect free variable `module`. */ + var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module; + + /** Detect the popular CommonJS extension `module.exports`. */ + var moduleExports = freeModule && freeModule.exports === freeExports; + + /** Detect free variable `process` from Node.js. */ + var freeProcess = moduleExports && freeGlobal.process; + + /** Used to access faster Node.js helpers. */ + var nodeUtil = (function() { + try { + // Use `util.types` for Node.js 10+. + var types = freeModule && freeModule.require && freeModule.require('util').types; + + if (types) { + return types; + } + + // Legacy `process.binding('util')` for Node.js < 10. + return freeProcess && freeProcess.binding && freeProcess.binding('util'); + } catch (e) {} + }()); + + /* Node.js helper references. */ + var nodeIsArrayBuffer = nodeUtil && nodeUtil.isArrayBuffer, + nodeIsDate = nodeUtil && nodeUtil.isDate, + nodeIsMap = nodeUtil && nodeUtil.isMap, + nodeIsRegExp = nodeUtil && nodeUtil.isRegExp, + nodeIsSet = nodeUtil && nodeUtil.isSet, + nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray; + + /*--------------------------------------------------------------------------*/ + + /** + * A faster alternative to `Function#apply`, this function invokes `func` + * with the `this` binding of `thisArg` and the arguments of `args`. + * + * @private + * @param {Function} func The function to invoke. + * @param {*} thisArg The `this` binding of `func`. + * @param {Array} args The arguments to invoke `func` with. + * @returns {*} Returns the result of `func`. + */ + function apply(func, thisArg, args) { + switch (args.length) { + case 0: return func.call(thisArg); + case 1: return func.call(thisArg, args[0]); + case 2: return func.call(thisArg, args[0], args[1]); + case 3: return func.call(thisArg, args[0], args[1], args[2]); + } + return func.apply(thisArg, args); + } + + /** + * A specialized version of `baseAggregator` for arrays. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} setter The function to set `accumulator` values. + * @param {Function} iteratee The iteratee to transform keys. + * @param {Object} accumulator The initial aggregated object. + * @returns {Function} Returns `accumulator`. + */ + function arrayAggregator(array, setter, iteratee, accumulator) { + var index = -1, + length = array == null ? 0 : array.length; + + while (++index < length) { + var value = array[index]; + setter(accumulator, value, iteratee(value), array); + } + return accumulator; + } + + /** + * A specialized version of `_.forEach` for arrays without support for + * iteratee shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Array} Returns `array`. + */ + function arrayEach(array, iteratee) { + var index = -1, + length = array == null ? 0 : array.length; + + while (++index < length) { + if (iteratee(array[index], index, array) === false) { + break; + } + } + return array; + } + + /** + * A specialized version of `_.forEachRight` for arrays without support for + * iteratee shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Array} Returns `array`. + */ + function arrayEachRight(array, iteratee) { + var length = array == null ? 0 : array.length; + + while (length--) { + if (iteratee(array[length], length, array) === false) { + break; + } + } + return array; + } + + /** + * A specialized version of `_.every` for arrays without support for + * iteratee shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} predicate The function invoked per iteration. + * @returns {boolean} Returns `true` if all elements pass the predicate check, + * else `false`. + */ + function arrayEvery(array, predicate) { + var index = -1, + length = array == null ? 0 : array.length; + + while (++index < length) { + if (!predicate(array[index], index, array)) { + return false; + } + } + return true; + } + + /** + * A specialized version of `_.filter` for arrays without support for + * iteratee shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} predicate The function invoked per iteration. + * @returns {Array} Returns the new filtered array. + */ + function arrayFilter(array, predicate) { + var index = -1, + length = array == null ? 0 : array.length, + resIndex = 0, + result = []; + + while (++index < length) { + var value = array[index]; + if (predicate(value, index, array)) { + result[resIndex++] = value; + } + } + return result; + } + + /** + * A specialized version of `_.includes` for arrays without support for + * specifying an index to search from. + * + * @private + * @param {Array} [array] The array to inspect. + * @param {*} target The value to search for. + * @returns {boolean} Returns `true` if `target` is found, else `false`. + */ + function arrayIncludes(array, value) { + var length = array == null ? 0 : array.length; + return !!length && baseIndexOf(array, value, 0) > -1; + } + + /** + * This function is like `arrayIncludes` except that it accepts a comparator. + * + * @private + * @param {Array} [array] The array to inspect. + * @param {*} target The value to search for. + * @param {Function} comparator The comparator invoked per element. + * @returns {boolean} Returns `true` if `target` is found, else `false`. + */ + function arrayIncludesWith(array, value, comparator) { + var index = -1, + length = array == null ? 0 : array.length; + + while (++index < length) { + if (comparator(value, array[index])) { + return true; + } + } + return false; + } + + /** + * A specialized version of `_.map` for arrays without support for iteratee + * shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Array} Returns the new mapped array. + */ + function arrayMap(array, iteratee) { + var index = -1, + length = array == null ? 0 : array.length, + result = Array(length); + + while (++index < length) { + result[index] = iteratee(array[index], index, array); + } + return result; + } + + /** + * Appends the elements of `values` to `array`. + * + * @private + * @param {Array} array The array to modify. + * @param {Array} values The values to append. + * @returns {Array} Returns `array`. + */ + function arrayPush(array, values) { + var index = -1, + length = values.length, + offset = array.length; + + while (++index < length) { + array[offset + index] = values[index]; + } + return array; + } + + /** + * A specialized version of `_.reduce` for arrays without support for + * iteratee shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @param {*} [accumulator] The initial value. + * @param {boolean} [initAccum] Specify using the first element of `array` as + * the initial value. + * @returns {*} Returns the accumulated value. + */ + function arrayReduce(array, iteratee, accumulator, initAccum) { + var index = -1, + length = array == null ? 0 : array.length; + + if (initAccum && length) { + accumulator = array[++index]; + } + while (++index < length) { + accumulator = iteratee(accumulator, array[index], index, array); + } + return accumulator; + } + + /** + * A specialized version of `_.reduceRight` for arrays without support for + * iteratee shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @param {*} [accumulator] The initial value. + * @param {boolean} [initAccum] Specify using the last element of `array` as + * the initial value. + * @returns {*} Returns the accumulated value. + */ + function arrayReduceRight(array, iteratee, accumulator, initAccum) { + var length = array == null ? 0 : array.length; + if (initAccum && length) { + accumulator = array[--length]; + } + while (length--) { + accumulator = iteratee(accumulator, array[length], length, array); + } + return accumulator; + } + + /** + * A specialized version of `_.some` for arrays without support for iteratee + * shorthands. + * + * @private + * @param {Array} [array] The array to iterate over. + * @param {Function} predicate The function invoked per iteration. + * @returns {boolean} Returns `true` if any element passes the predicate check, + * else `false`. + */ + function arraySome(array, predicate) { + var index = -1, + length = array == null ? 0 : array.length; + + while (++index < length) { + if (predicate(array[index], index, array)) { + return true; + } + } + return false; + } + + /** + * Gets the size of an ASCII `string`. + * + * @private + * @param {string} string The string inspect. + * @returns {number} Returns the string size. + */ + var asciiSize = baseProperty('length'); + + /** + * Converts an ASCII `string` to an array. + * + * @private + * @param {string} string The string to convert. + * @returns {Array} Returns the converted array. + */ + function asciiToArray(string) { + return string.split(''); + } + + /** + * Splits an ASCII `string` into an array of its words. + * + * @private + * @param {string} The string to inspect. + * @returns {Array} Returns the words of `string`. + */ + function asciiWords(string) { + return string.match(reAsciiWord) || []; + } + + /** + * The base implementation of methods like `_.findKey` and `_.findLastKey`, + * without support for iteratee shorthands, which iterates over `collection` + * using `eachFunc`. + * + * @private + * @param {Array|Object} collection The collection to inspect. + * @param {Function} predicate The function invoked per iteration. + * @param {Function} eachFunc The function to iterate over `collection`. + * @returns {*} Returns the found element or its key, else `undefined`. + */ + function baseFindKey(collection, predicate, eachFunc) { + var result; + eachFunc(collection, function(value, key, collection) { + if (predicate(value, key, collection)) { + result = key; + return false; + } + }); + return result; + } + + /** + * The base implementation of `_.findIndex` and `_.findLastIndex` without + * support for iteratee shorthands. + * + * @private + * @param {Array} array The array to inspect. + * @param {Function} predicate The function invoked per iteration. + * @param {number} fromIndex The index to search from. + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {number} Returns the index of the matched value, else `-1`. + */ + function baseFindIndex(array, predicate, fromIndex, fromRight) { + var length = array.length, + index = fromIndex + (fromRight ? 1 : -1); + + while ((fromRight ? index-- : ++index < length)) { + if (predicate(array[index], index, array)) { + return index; + } + } + return -1; + } + + /** + * The base implementation of `_.indexOf` without `fromIndex` bounds checks. + * + * @private + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @param {number} fromIndex The index to search from. + * @returns {number} Returns the index of the matched value, else `-1`. + */ + function baseIndexOf(array, value, fromIndex) { + return value === value + ? strictIndexOf(array, value, fromIndex) + : baseFindIndex(array, baseIsNaN, fromIndex); + } + + /** + * This function is like `baseIndexOf` except that it accepts a comparator. + * + * @private + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @param {number} fromIndex The index to search from. + * @param {Function} comparator The comparator invoked per element. + * @returns {number} Returns the index of the matched value, else `-1`. + */ + function baseIndexOfWith(array, value, fromIndex, comparator) { + var index = fromIndex - 1, + length = array.length; + + while (++index < length) { + if (comparator(array[index], value)) { + return index; + } + } + return -1; + } + + /** + * The base implementation of `_.isNaN` without support for number objects. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`. + */ + function baseIsNaN(value) { + return value !== value; + } + + /** + * The base implementation of `_.mean` and `_.meanBy` without support for + * iteratee shorthands. + * + * @private + * @param {Array} array The array to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {number} Returns the mean. + */ + function baseMean(array, iteratee) { + var length = array == null ? 0 : array.length; + return length ? (baseSum(array, iteratee) / length) : NAN; + } + + /** + * The base implementation of `_.property` without support for deep paths. + * + * @private + * @param {string} key The key of the property to get. + * @returns {Function} Returns the new accessor function. + */ + function baseProperty(key) { + return function(object) { + return object == null ? undefined : object[key]; + }; + } + + /** + * The base implementation of `_.propertyOf` without support for deep paths. + * + * @private + * @param {Object} object The object to query. + * @returns {Function} Returns the new accessor function. + */ + function basePropertyOf(object) { + return function(key) { + return object == null ? undefined : object[key]; + }; + } + + /** + * The base implementation of `_.reduce` and `_.reduceRight`, without support + * for iteratee shorthands, which iterates over `collection` using `eachFunc`. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @param {*} accumulator The initial value. + * @param {boolean} initAccum Specify using the first or last element of + * `collection` as the initial value. + * @param {Function} eachFunc The function to iterate over `collection`. + * @returns {*} Returns the accumulated value. + */ + function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) { + eachFunc(collection, function(value, index, collection) { + accumulator = initAccum + ? (initAccum = false, value) + : iteratee(accumulator, value, index, collection); + }); + return accumulator; + } + + /** + * The base implementation of `_.sortBy` which uses `comparer` to define the + * sort order of `array` and replaces criteria objects with their corresponding + * values. + * + * @private + * @param {Array} array The array to sort. + * @param {Function} comparer The function to define sort order. + * @returns {Array} Returns `array`. + */ + function baseSortBy(array, comparer) { + var length = array.length; + + array.sort(comparer); + while (length--) { + array[length] = array[length].value; + } + return array; + } + + /** + * The base implementation of `_.sum` and `_.sumBy` without support for + * iteratee shorthands. + * + * @private + * @param {Array} array The array to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {number} Returns the sum. + */ + function baseSum(array, iteratee) { + var result, + index = -1, + length = array.length; + + while (++index < length) { + var current = iteratee(array[index]); + if (current !== undefined) { + result = result === undefined ? current : (result + current); + } + } + return result; + } + + /** + * The base implementation of `_.times` without support for iteratee shorthands + * or max array length checks. + * + * @private + * @param {number} n The number of times to invoke `iteratee`. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Array} Returns the array of results. + */ + function baseTimes(n, iteratee) { + var index = -1, + result = Array(n); + + while (++index < n) { + result[index] = iteratee(index); + } + return result; + } + + /** + * The base implementation of `_.toPairs` and `_.toPairsIn` which creates an array + * of key-value pairs for `object` corresponding to the property names of `props`. + * + * @private + * @param {Object} object The object to query. + * @param {Array} props The property names to get values for. + * @returns {Object} Returns the key-value pairs. + */ + function baseToPairs(object, props) { + return arrayMap(props, function(key) { + return [key, object[key]]; + }); + } + + /** + * The base implementation of `_.unary` without support for storing metadata. + * + * @private + * @param {Function} func The function to cap arguments for. + * @returns {Function} Returns the new capped function. + */ + function baseUnary(func) { + return function(value) { + return func(value); + }; + } + + /** + * The base implementation of `_.values` and `_.valuesIn` which creates an + * array of `object` property values corresponding to the property names + * of `props`. + * + * @private + * @param {Object} object The object to query. + * @param {Array} props The property names to get values for. + * @returns {Object} Returns the array of property values. + */ + function baseValues(object, props) { + return arrayMap(props, function(key) { + return object[key]; + }); + } + + /** + * Checks if a `cache` value for `key` exists. + * + * @private + * @param {Object} cache The cache to query. + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ + function cacheHas(cache, key) { + return cache.has(key); + } + + /** + * Used by `_.trim` and `_.trimStart` to get the index of the first string symbol + * that is not found in the character symbols. + * + * @private + * @param {Array} strSymbols The string symbols to inspect. + * @param {Array} chrSymbols The character symbols to find. + * @returns {number} Returns the index of the first unmatched string symbol. + */ + function charsStartIndex(strSymbols, chrSymbols) { + var index = -1, + length = strSymbols.length; + + while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {} + return index; + } + + /** + * Used by `_.trim` and `_.trimEnd` to get the index of the last string symbol + * that is not found in the character symbols. + * + * @private + * @param {Array} strSymbols The string symbols to inspect. + * @param {Array} chrSymbols The character symbols to find. + * @returns {number} Returns the index of the last unmatched string symbol. + */ + function charsEndIndex(strSymbols, chrSymbols) { + var index = strSymbols.length; + + while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {} + return index; + } + + /** + * Gets the number of `placeholder` occurrences in `array`. + * + * @private + * @param {Array} array The array to inspect. + * @param {*} placeholder The placeholder to search for. + * @returns {number} Returns the placeholder count. + */ + function countHolders(array, placeholder) { + var length = array.length, + result = 0; + + while (length--) { + if (array[length] === placeholder) { + ++result; + } + } + return result; + } + + /** + * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A + * letters to basic Latin letters. + * + * @private + * @param {string} letter The matched letter to deburr. + * @returns {string} Returns the deburred letter. + */ + var deburrLetter = basePropertyOf(deburredLetters); + + /** + * Used by `_.escape` to convert characters to HTML entities. + * + * @private + * @param {string} chr The matched character to escape. + * @returns {string} Returns the escaped character. + */ + var escapeHtmlChar = basePropertyOf(htmlEscapes); + + /** + * Used by `_.template` to escape characters for inclusion in compiled string literals. + * + * @private + * @param {string} chr The matched character to escape. + * @returns {string} Returns the escaped character. + */ + function escapeStringChar(chr) { + return '\\' + stringEscapes[chr]; + } + + /** + * Gets the value at `key` of `object`. + * + * @private + * @param {Object} [object] The object to query. + * @param {string} key The key of the property to get. + * @returns {*} Returns the property value. + */ + function getValue(object, key) { + return object == null ? undefined : object[key]; + } + + /** + * Checks if `string` contains Unicode symbols. + * + * @private + * @param {string} string The string to inspect. + * @returns {boolean} Returns `true` if a symbol is found, else `false`. + */ + function hasUnicode(string) { + return reHasUnicode.test(string); + } + + /** + * Checks if `string` contains a word composed of Unicode symbols. + * + * @private + * @param {string} string The string to inspect. + * @returns {boolean} Returns `true` if a word is found, else `false`. + */ + function hasUnicodeWord(string) { + return reHasUnicodeWord.test(string); + } + + /** + * Converts `iterator` to an array. + * + * @private + * @param {Object} iterator The iterator to convert. + * @returns {Array} Returns the converted array. + */ + function iteratorToArray(iterator) { + var data, + result = []; + + while (!(data = iterator.next()).done) { + result.push(data.value); + } + return result; + } + + /** + * Converts `map` to its key-value pairs. + * + * @private + * @param {Object} map The map to convert. + * @returns {Array} Returns the key-value pairs. + */ + function mapToArray(map) { + var index = -1, + result = Array(map.size); + + map.forEach(function(value, key) { + result[++index] = [key, value]; + }); + return result; + } + + /** + * Creates a unary function that invokes `func` with its argument transformed. + * + * @private + * @param {Function} func The function to wrap. + * @param {Function} transform The argument transform. + * @returns {Function} Returns the new function. + */ + function overArg(func, transform) { + return function(arg) { + return func(transform(arg)); + }; + } + + /** + * Replaces all `placeholder` elements in `array` with an internal placeholder + * and returns an array of their indexes. + * + * @private + * @param {Array} array The array to modify. + * @param {*} placeholder The placeholder to replace. + * @returns {Array} Returns the new array of placeholder indexes. + */ + function replaceHolders(array, placeholder) { + var index = -1, + length = array.length, + resIndex = 0, + result = []; + + while (++index < length) { + var value = array[index]; + if (value === placeholder || value === PLACEHOLDER) { + array[index] = PLACEHOLDER; + result[resIndex++] = index; + } + } + return result; + } + + /** + * Gets the value at `key`, unless `key` is "__proto__". + * + * @private + * @param {Object} object The object to query. + * @param {string} key The key of the property to get. + * @returns {*} Returns the property value. + */ + function safeGet(object, key) { + return key == '__proto__' + ? undefined + : object[key]; + } + + /** + * Converts `set` to an array of its values. + * + * @private + * @param {Object} set The set to convert. + * @returns {Array} Returns the values. + */ + function setToArray(set) { + var index = -1, + result = Array(set.size); + + set.forEach(function(value) { + result[++index] = value; + }); + return result; + } + + /** + * Converts `set` to its value-value pairs. + * + * @private + * @param {Object} set The set to convert. + * @returns {Array} Returns the value-value pairs. + */ + function setToPairs(set) { + var index = -1, + result = Array(set.size); + + set.forEach(function(value) { + result[++index] = [value, value]; + }); + return result; + } + + /** + * A specialized version of `_.indexOf` which performs strict equality + * comparisons of values, i.e. `===`. + * + * @private + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @param {number} fromIndex The index to search from. + * @returns {number} Returns the index of the matched value, else `-1`. + */ + function strictIndexOf(array, value, fromIndex) { + var index = fromIndex - 1, + length = array.length; + + while (++index < length) { + if (array[index] === value) { + return index; + } + } + return -1; + } + + /** + * A specialized version of `_.lastIndexOf` which performs strict equality + * comparisons of values, i.e. `===`. + * + * @private + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @param {number} fromIndex The index to search from. + * @returns {number} Returns the index of the matched value, else `-1`. + */ + function strictLastIndexOf(array, value, fromIndex) { + var index = fromIndex + 1; + while (index--) { + if (array[index] === value) { + return index; + } + } + return index; + } + + /** + * Gets the number of symbols in `string`. + * + * @private + * @param {string} string The string to inspect. + * @returns {number} Returns the string size. + */ + function stringSize(string) { + return hasUnicode(string) + ? unicodeSize(string) + : asciiSize(string); + } + + /** + * Converts `string` to an array. + * + * @private + * @param {string} string The string to convert. + * @returns {Array} Returns the converted array. + */ + function stringToArray(string) { + return hasUnicode(string) + ? unicodeToArray(string) + : asciiToArray(string); + } + + /** + * Used by `_.unescape` to convert HTML entities to characters. + * + * @private + * @param {string} chr The matched character to unescape. + * @returns {string} Returns the unescaped character. + */ + var unescapeHtmlChar = basePropertyOf(htmlUnescapes); + + /** + * Gets the size of a Unicode `string`. + * + * @private + * @param {string} string The string inspect. + * @returns {number} Returns the string size. + */ + function unicodeSize(string) { + var result = reUnicode.lastIndex = 0; + while (reUnicode.test(string)) { + ++result; + } + return result; + } + + /** + * Converts a Unicode `string` to an array. + * + * @private + * @param {string} string The string to convert. + * @returns {Array} Returns the converted array. + */ + function unicodeToArray(string) { + return string.match(reUnicode) || []; + } + + /** + * Splits a Unicode `string` into an array of its words. + * + * @private + * @param {string} The string to inspect. + * @returns {Array} Returns the words of `string`. + */ + function unicodeWords(string) { + return string.match(reUnicodeWord) || []; + } + + /*--------------------------------------------------------------------------*/ + + /** + * Create a new pristine `lodash` function using the `context` object. + * + * @static + * @memberOf _ + * @since 1.1.0 + * @category Util + * @param {Object} [context=root] The context object. + * @returns {Function} Returns a new `lodash` function. + * @example + * + * _.mixin({ 'foo': _.constant('foo') }); + * + * var lodash = _.runInContext(); + * lodash.mixin({ 'bar': lodash.constant('bar') }); + * + * _.isFunction(_.foo); + * // => true + * _.isFunction(_.bar); + * // => false + * + * lodash.isFunction(lodash.foo); + * // => false + * lodash.isFunction(lodash.bar); + * // => true + * + * // Create a suped-up `defer` in Node.js. + * var defer = _.runInContext({ 'setTimeout': setImmediate }).defer; + */ + var runInContext = (function runInContext(context) { + context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps)); + + /** Built-in constructor references. */ + var Array = context.Array, + Date = context.Date, + Error = context.Error, + Function = context.Function, + Math = context.Math, + Object = context.Object, + RegExp = context.RegExp, + String = context.String, + TypeError = context.TypeError; + + /** Used for built-in method references. */ + var arrayProto = Array.prototype, + funcProto = Function.prototype, + objectProto = Object.prototype; + + /** Used to detect overreaching core-js shims. */ + var coreJsData = context['__core-js_shared__']; + + /** Used to resolve the decompiled source of functions. */ + var funcToString = funcProto.toString; + + /** Used to check objects for own properties. */ + var hasOwnProperty = objectProto.hasOwnProperty; + + /** Used to generate unique IDs. */ + var idCounter = 0; + + /** Used to detect methods masquerading as native. */ + var maskSrcKey = (function() { + var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || ''); + return uid ? ('Symbol(src)_1.' + uid) : ''; + }()); + + /** + * Used to resolve the + * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) + * of values. + */ + var nativeObjectToString = objectProto.toString; + + /** Used to infer the `Object` constructor. */ + var objectCtorString = funcToString.call(Object); + + /** Used to restore the original `_` reference in `_.noConflict`. */ + var oldDash = root._; + + /** Used to detect if a method is native. */ + var reIsNative = RegExp('^' + + funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&') + .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$' + ); + + /** Built-in value references. */ + var Buffer = moduleExports ? context.Buffer : undefined, + Symbol = context.Symbol, + Uint8Array = context.Uint8Array, + allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined, + getPrototype = overArg(Object.getPrototypeOf, Object), + objectCreate = Object.create, + propertyIsEnumerable = objectProto.propertyIsEnumerable, + splice = arrayProto.splice, + spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined, + symIterator = Symbol ? Symbol.iterator : undefined, + symToStringTag = Symbol ? Symbol.toStringTag : undefined; + + var defineProperty = (function() { + try { + var func = getNative(Object, 'defineProperty'); + func({}, '', {}); + return func; + } catch (e) {} + }()); + + /** Mocked built-ins. */ + var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, + ctxNow = Date && Date.now !== root.Date.now && Date.now, + ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout; + + /* Built-in method references for those with the same name as other `lodash` methods. */ + var nativeCeil = Math.ceil, + nativeFloor = Math.floor, + nativeGetSymbols = Object.getOwnPropertySymbols, + nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined, + nativeIsFinite = context.isFinite, + nativeJoin = arrayProto.join, + nativeKeys = overArg(Object.keys, Object), + nativeMax = Math.max, + nativeMin = Math.min, + nativeNow = Date.now, + nativeParseInt = context.parseInt, + nativeRandom = Math.random, + nativeReverse = arrayProto.reverse; + + /* Built-in method references that are verified to be native. */ + var DataView = getNative(context, 'DataView'), + Map = getNative(context, 'Map'), + Promise = getNative(context, 'Promise'), + Set = getNative(context, 'Set'), + WeakMap = getNative(context, 'WeakMap'), + nativeCreate = getNative(Object, 'create'); + + /** Used to store function metadata. */ + var metaMap = WeakMap && new WeakMap; + + /** Used to lookup unminified function names. */ + var realNames = {}; + + /** Used to detect maps, sets, and weakmaps. */ + var dataViewCtorString = toSource(DataView), + mapCtorString = toSource(Map), + promiseCtorString = toSource(Promise), + setCtorString = toSource(Set), + weakMapCtorString = toSource(WeakMap); + + /** Used to convert symbols to primitives and strings. */ + var symbolProto = Symbol ? Symbol.prototype : undefined, + symbolValueOf = symbolProto ? symbolProto.valueOf : undefined, + symbolToString = symbolProto ? symbolProto.toString : undefined; + + /*------------------------------------------------------------------------*/ + + /** + * Creates a `lodash` object which wraps `value` to enable implicit method + * chain sequences. Methods that operate on and return arrays, collections, + * and functions can be chained together. Methods that retrieve a single value + * or may return a primitive value will automatically end the chain sequence + * and return the unwrapped value. Otherwise, the value must be unwrapped + * with `_#value`. + * + * Explicit chain sequences, which must be unwrapped with `_#value`, may be + * enabled using `_.chain`. + * + * The execution of chained methods is lazy, that is, it's deferred until + * `_#value` is implicitly or explicitly called. + * + * Lazy evaluation allows several methods to support shortcut fusion. + * Shortcut fusion is an optimization to merge iteratee calls; this avoids + * the creation of intermediate arrays and can greatly reduce the number of + * iteratee executions. Sections of a chain sequence qualify for shortcut + * fusion if the section is applied to an array and iteratees accept only + * one argument. The heuristic for whether a section qualifies for shortcut + * fusion is subject to change. + * + * Chaining is supported in custom builds as long as the `_#value` method is + * directly or indirectly included in the build. + * + * In addition to lodash methods, wrappers have `Array` and `String` methods. + * + * The wrapper `Array` methods are: + * `concat`, `join`, `pop`, `push`, `shift`, `sort`, `splice`, and `unshift` + * + * The wrapper `String` methods are: + * `replace` and `split` + * + * The wrapper methods that support shortcut fusion are: + * `at`, `compact`, `drop`, `dropRight`, `dropWhile`, `filter`, `find`, + * `findLast`, `head`, `initial`, `last`, `map`, `reject`, `reverse`, `slice`, + * `tail`, `take`, `takeRight`, `takeRightWhile`, `takeWhile`, and `toArray` + * + * The chainable wrapper methods are: + * `after`, `ary`, `assign`, `assignIn`, `assignInWith`, `assignWith`, `at`, + * `before`, `bind`, `bindAll`, `bindKey`, `castArray`, `chain`, `chunk`, + * `commit`, `compact`, `concat`, `conforms`, `constant`, `countBy`, `create`, + * `curry`, `debounce`, `defaults`, `defaultsDeep`, `defer`, `delay`, + * `difference`, `differenceBy`, `differenceWith`, `drop`, `dropRight`, + * `dropRightWhile`, `dropWhile`, `extend`, `extendWith`, `fill`, `filter`, + * `flatMap`, `flatMapDeep`, `flatMapDepth`, `flatten`, `flattenDeep`, + * `flattenDepth`, `flip`, `flow`, `flowRight`, `fromPairs`, `functions`, + * `functionsIn`, `groupBy`, `initial`, `intersection`, `intersectionBy`, + * `intersectionWith`, `invert`, `invertBy`, `invokeMap`, `iteratee`, `keyBy`, + * `keys`, `keysIn`, `map`, `mapKeys`, `mapValues`, `matches`, `matchesProperty`, + * `memoize`, `merge`, `mergeWith`, `method`, `methodOf`, `mixin`, `negate`, + * `nthArg`, `omit`, `omitBy`, `once`, `orderBy`, `over`, `overArgs`, + * `overEvery`, `overSome`, `partial`, `partialRight`, `partition`, `pick`, + * `pickBy`, `plant`, `property`, `propertyOf`, `pull`, `pullAll`, `pullAllBy`, + * `pullAllWith`, `pullAt`, `push`, `range`, `rangeRight`, `rearg`, `reject`, + * `remove`, `rest`, `reverse`, `sampleSize`, `set`, `setWith`, `shuffle`, + * `slice`, `sort`, `sortBy`, `splice`, `spread`, `tail`, `take`, `takeRight`, + * `takeRightWhile`, `takeWhile`, `tap`, `throttle`, `thru`, `toArray`, + * `toPairs`, `toPairsIn`, `toPath`, `toPlainObject`, `transform`, `unary`, + * `union`, `unionBy`, `unionWith`, `uniq`, `uniqBy`, `uniqWith`, `unset`, + * `unshift`, `unzip`, `unzipWith`, `update`, `updateWith`, `values`, + * `valuesIn`, `without`, `wrap`, `xor`, `xorBy`, `xorWith`, `zip`, + * `zipObject`, `zipObjectDeep`, and `zipWith` + * + * The wrapper methods that are **not** chainable by default are: + * `add`, `attempt`, `camelCase`, `capitalize`, `ceil`, `clamp`, `clone`, + * `cloneDeep`, `cloneDeepWith`, `cloneWith`, `conformsTo`, `deburr`, + * `defaultTo`, `divide`, `each`, `eachRight`, `endsWith`, `eq`, `escape`, + * `escapeRegExp`, `every`, `find`, `findIndex`, `findKey`, `findLast`, + * `findLastIndex`, `findLastKey`, `first`, `floor`, `forEach`, `forEachRight`, + * `forIn`, `forInRight`, `forOwn`, `forOwnRight`, `get`, `gt`, `gte`, `has`, + * `hasIn`, `head`, `identity`, `includes`, `indexOf`, `inRange`, `invoke`, + * `isArguments`, `isArray`, `isArrayBuffer`, `isArrayLike`, `isArrayLikeObject`, + * `isBoolean`, `isBuffer`, `isDate`, `isElement`, `isEmpty`, `isEqual`, + * `isEqualWith`, `isError`, `isFinite`, `isFunction`, `isInteger`, `isLength`, + * `isMap`, `isMatch`, `isMatchWith`, `isNaN`, `isNative`, `isNil`, `isNull`, + * `isNumber`, `isObject`, `isObjectLike`, `isPlainObject`, `isRegExp`, + * `isSafeInteger`, `isSet`, `isString`, `isUndefined`, `isTypedArray`, + * `isWeakMap`, `isWeakSet`, `join`, `kebabCase`, `last`, `lastIndexOf`, + * `lowerCase`, `lowerFirst`, `lt`, `lte`, `max`, `maxBy`, `mean`, `meanBy`, + * `min`, `minBy`, `multiply`, `noConflict`, `noop`, `now`, `nth`, `pad`, + * `padEnd`, `padStart`, `parseInt`, `pop`, `random`, `reduce`, `reduceRight`, + * `repeat`, `result`, `round`, `runInContext`, `sample`, `shift`, `size`, + * `snakeCase`, `some`, `sortedIndex`, `sortedIndexBy`, `sortedLastIndex`, + * `sortedLastIndexBy`, `startCase`, `startsWith`, `stubArray`, `stubFalse`, + * `stubObject`, `stubString`, `stubTrue`, `subtract`, `sum`, `sumBy`, + * `template`, `times`, `toFinite`, `toInteger`, `toJSON`, `toLength`, + * `toLower`, `toNumber`, `toSafeInteger`, `toString`, `toUpper`, `trim`, + * `trimEnd`, `trimStart`, `truncate`, `unescape`, `uniqueId`, `upperCase`, + * `upperFirst`, `value`, and `words` + * + * @name _ + * @constructor + * @category Seq + * @param {*} value The value to wrap in a `lodash` instance. + * @returns {Object} Returns the new `lodash` wrapper instance. + * @example + * + * function square(n) { + * return n * n; + * } + * + * var wrapped = _([1, 2, 3]); + * + * // Returns an unwrapped value. + * wrapped.reduce(_.add); + * // => 6 + * + * // Returns a wrapped value. + * var squares = wrapped.map(square); + * + * _.isArray(squares); + * // => false + * + * _.isArray(squares.value()); + * // => true + */ + function lodash(value) { + if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) { + if (value instanceof LodashWrapper) { + return value; + } + if (hasOwnProperty.call(value, '__wrapped__')) { + return wrapperClone(value); + } + } + return new LodashWrapper(value); + } + + /** + * The base implementation of `_.create` without support for assigning + * properties to the created object. + * + * @private + * @param {Object} proto The object to inherit from. + * @returns {Object} Returns the new object. + */ + var baseCreate = (function() { + function object() {} + return function(proto) { + if (!isObject(proto)) { + return {}; + } + if (objectCreate) { + return objectCreate(proto); + } + object.prototype = proto; + var result = new object; + object.prototype = undefined; + return result; + }; + }()); + + /** + * The function whose prototype chain sequence wrappers inherit from. + * + * @private + */ + function baseLodash() { + // No operation performed. + } + + /** + * The base constructor for creating `lodash` wrapper objects. + * + * @private + * @param {*} value The value to wrap. + * @param {boolean} [chainAll] Enable explicit method chain sequences. + */ + function LodashWrapper(value, chainAll) { + this.__wrapped__ = value; + this.__actions__ = []; + this.__chain__ = !!chainAll; + this.__index__ = 0; + this.__values__ = undefined; + } + + /** + * By default, the template delimiters used by lodash are like those in + * embedded Ruby (ERB) as well as ES2015 template strings. Change the + * following template settings to use alternative delimiters. + * + * @static + * @memberOf _ + * @type {Object} + */ + lodash.templateSettings = { + + /** + * Used to detect `data` property values to be HTML-escaped. + * + * @memberOf _.templateSettings + * @type {RegExp} + */ + 'escape': reEscape, + + /** + * Used to detect code to be evaluated. + * + * @memberOf _.templateSettings + * @type {RegExp} + */ + 'evaluate': reEvaluate, + + /** + * Used to detect `data` property values to inject. + * + * @memberOf _.templateSettings + * @type {RegExp} + */ + 'interpolate': reInterpolate, + + /** + * Used to reference the data object in the template text. + * + * @memberOf _.templateSettings + * @type {string} + */ + 'variable': '', + + /** + * Used to import variables into the compiled template. + * + * @memberOf _.templateSettings + * @type {Object} + */ + 'imports': { + + /** + * A reference to the `lodash` function. + * + * @memberOf _.templateSettings.imports + * @type {Function} + */ + '_': lodash + } + }; + + // Ensure wrappers are instances of `baseLodash`. + lodash.prototype = baseLodash.prototype; + lodash.prototype.constructor = lodash; + + LodashWrapper.prototype = baseCreate(baseLodash.prototype); + LodashWrapper.prototype.constructor = LodashWrapper; + + /*------------------------------------------------------------------------*/ + + /** + * Creates a lazy wrapper object which wraps `value` to enable lazy evaluation. + * + * @private + * @constructor + * @param {*} value The value to wrap. + */ + function LazyWrapper(value) { + this.__wrapped__ = value; + this.__actions__ = []; + this.__dir__ = 1; + this.__filtered__ = false; + this.__iteratees__ = []; + this.__takeCount__ = MAX_ARRAY_LENGTH; + this.__views__ = []; + } + + /** + * Creates a clone of the lazy wrapper object. + * + * @private + * @name clone + * @memberOf LazyWrapper + * @returns {Object} Returns the cloned `LazyWrapper` object. + */ + function lazyClone() { + var result = new LazyWrapper(this.__wrapped__); + result.__actions__ = copyArray(this.__actions__); + result.__dir__ = this.__dir__; + result.__filtered__ = this.__filtered__; + result.__iteratees__ = copyArray(this.__iteratees__); + result.__takeCount__ = this.__takeCount__; + result.__views__ = copyArray(this.__views__); + return result; + } + + /** + * Reverses the direction of lazy iteration. + * + * @private + * @name reverse + * @memberOf LazyWrapper + * @returns {Object} Returns the new reversed `LazyWrapper` object. + */ + function lazyReverse() { + if (this.__filtered__) { + var result = new LazyWrapper(this); + result.__dir__ = -1; + result.__filtered__ = true; + } else { + result = this.clone(); + result.__dir__ *= -1; + } + return result; + } + + /** + * Extracts the unwrapped value from its lazy wrapper. + * + * @private + * @name value + * @memberOf LazyWrapper + * @returns {*} Returns the unwrapped value. + */ + function lazyValue() { + var array = this.__wrapped__.value(), + dir = this.__dir__, + isArr = isArray(array), + isRight = dir < 0, + arrLength = isArr ? array.length : 0, + view = getView(0, arrLength, this.__views__), + start = view.start, + end = view.end, + length = end - start, + index = isRight ? end : (start - 1), + iteratees = this.__iteratees__, + iterLength = iteratees.length, + resIndex = 0, + takeCount = nativeMin(length, this.__takeCount__); + + if (!isArr || (!isRight && arrLength == length && takeCount == length)) { + return baseWrapperValue(array, this.__actions__); + } + var result = []; + + outer: + while (length-- && resIndex < takeCount) { + index += dir; + + var iterIndex = -1, + value = array[index]; + + while (++iterIndex < iterLength) { + var data = iteratees[iterIndex], + iteratee = data.iteratee, + type = data.type, + computed = iteratee(value); + + if (type == LAZY_MAP_FLAG) { + value = computed; + } else if (!computed) { + if (type == LAZY_FILTER_FLAG) { + continue outer; + } else { + break outer; + } + } + } + result[resIndex++] = value; + } + return result; + } + + // Ensure `LazyWrapper` is an instance of `baseLodash`. + LazyWrapper.prototype = baseCreate(baseLodash.prototype); + LazyWrapper.prototype.constructor = LazyWrapper; + + /*------------------------------------------------------------------------*/ + + /** + * Creates a hash object. + * + * @private + * @constructor + * @param {Array} [entries] The key-value pairs to cache. + */ + function Hash(entries) { + var index = -1, + length = entries == null ? 0 : entries.length; + + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } + } + + /** + * Removes all key-value entries from the hash. + * + * @private + * @name clear + * @memberOf Hash + */ + function hashClear() { + this.__data__ = nativeCreate ? nativeCreate(null) : {}; + this.size = 0; + } + + /** + * Removes `key` and its value from the hash. + * + * @private + * @name delete + * @memberOf Hash + * @param {Object} hash The hash to modify. + * @param {string} key The key of the value to remove. + * @returns {boolean} Returns `true` if the entry was removed, else `false`. + */ + function hashDelete(key) { + var result = this.has(key) && delete this.__data__[key]; + this.size -= result ? 1 : 0; + return result; + } + + /** + * Gets the hash value for `key`. + * + * @private + * @name get + * @memberOf Hash + * @param {string} key The key of the value to get. + * @returns {*} Returns the entry value. + */ + function hashGet(key) { + var data = this.__data__; + if (nativeCreate) { + var result = data[key]; + return result === HASH_UNDEFINED ? undefined : result; + } + return hasOwnProperty.call(data, key) ? data[key] : undefined; + } + + /** + * Checks if a hash value for `key` exists. + * + * @private + * @name has + * @memberOf Hash + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ + function hashHas(key) { + var data = this.__data__; + return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key); + } + + /** + * Sets the hash `key` to `value`. + * + * @private + * @name set + * @memberOf Hash + * @param {string} key The key of the value to set. + * @param {*} value The value to set. + * @returns {Object} Returns the hash instance. + */ + function hashSet(key, value) { + var data = this.__data__; + this.size += this.has(key) ? 0 : 1; + data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value; + return this; + } + + // Add methods to `Hash`. + Hash.prototype.clear = hashClear; + Hash.prototype['delete'] = hashDelete; + Hash.prototype.get = hashGet; + Hash.prototype.has = hashHas; + Hash.prototype.set = hashSet; + + /*------------------------------------------------------------------------*/ + + /** + * Creates an list cache object. + * + * @private + * @constructor + * @param {Array} [entries] The key-value pairs to cache. + */ + function ListCache(entries) { + var index = -1, + length = entries == null ? 0 : entries.length; + + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } + } + + /** + * Removes all key-value entries from the list cache. + * + * @private + * @name clear + * @memberOf ListCache + */ + function listCacheClear() { + this.__data__ = []; + this.size = 0; + } + + /** + * Removes `key` and its value from the list cache. + * + * @private + * @name delete + * @memberOf ListCache + * @param {string} key The key of the value to remove. + * @returns {boolean} Returns `true` if the entry was removed, else `false`. + */ + function listCacheDelete(key) { + var data = this.__data__, + index = assocIndexOf(data, key); + + if (index < 0) { + return false; + } + var lastIndex = data.length - 1; + if (index == lastIndex) { + data.pop(); + } else { + splice.call(data, index, 1); + } + --this.size; + return true; + } + + /** + * Gets the list cache value for `key`. + * + * @private + * @name get + * @memberOf ListCache + * @param {string} key The key of the value to get. + * @returns {*} Returns the entry value. + */ + function listCacheGet(key) { + var data = this.__data__, + index = assocIndexOf(data, key); + + return index < 0 ? undefined : data[index][1]; + } + + /** + * Checks if a list cache value for `key` exists. + * + * @private + * @name has + * @memberOf ListCache + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ + function listCacheHas(key) { + return assocIndexOf(this.__data__, key) > -1; + } + + /** + * Sets the list cache `key` to `value`. + * + * @private + * @name set + * @memberOf ListCache + * @param {string} key The key of the value to set. + * @param {*} value The value to set. + * @returns {Object} Returns the list cache instance. + */ + function listCacheSet(key, value) { + var data = this.__data__, + index = assocIndexOf(data, key); + + if (index < 0) { + ++this.size; + data.push([key, value]); + } else { + data[index][1] = value; + } + return this; + } + + // Add methods to `ListCache`. + ListCache.prototype.clear = listCacheClear; + ListCache.prototype['delete'] = listCacheDelete; + ListCache.prototype.get = listCacheGet; + ListCache.prototype.has = listCacheHas; + ListCache.prototype.set = listCacheSet; + + /*------------------------------------------------------------------------*/ + + /** + * Creates a map cache object to store key-value pairs. + * + * @private + * @constructor + * @param {Array} [entries] The key-value pairs to cache. + */ + function MapCache(entries) { + var index = -1, + length = entries == null ? 0 : entries.length; + + this.clear(); + while (++index < length) { + var entry = entries[index]; + this.set(entry[0], entry[1]); + } + } + + /** + * Removes all key-value entries from the map. + * + * @private + * @name clear + * @memberOf MapCache + */ + function mapCacheClear() { + this.size = 0; + this.__data__ = { + 'hash': new Hash, + 'map': new (Map || ListCache), + 'string': new Hash + }; + } + + /** + * Removes `key` and its value from the map. + * + * @private + * @name delete + * @memberOf MapCache + * @param {string} key The key of the value to remove. + * @returns {boolean} Returns `true` if the entry was removed, else `false`. + */ + function mapCacheDelete(key) { + var result = getMapData(this, key)['delete'](key); + this.size -= result ? 1 : 0; + return result; + } + + /** + * Gets the map value for `key`. + * + * @private + * @name get + * @memberOf MapCache + * @param {string} key The key of the value to get. + * @returns {*} Returns the entry value. + */ + function mapCacheGet(key) { + return getMapData(this, key).get(key); + } + + /** + * Checks if a map value for `key` exists. + * + * @private + * @name has + * @memberOf MapCache + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ + function mapCacheHas(key) { + return getMapData(this, key).has(key); + } + + /** + * Sets the map `key` to `value`. + * + * @private + * @name set + * @memberOf MapCache + * @param {string} key The key of the value to set. + * @param {*} value The value to set. + * @returns {Object} Returns the map cache instance. + */ + function mapCacheSet(key, value) { + var data = getMapData(this, key), + size = data.size; + + data.set(key, value); + this.size += data.size == size ? 0 : 1; + return this; + } + + // Add methods to `MapCache`. + MapCache.prototype.clear = mapCacheClear; + MapCache.prototype['delete'] = mapCacheDelete; + MapCache.prototype.get = mapCacheGet; + MapCache.prototype.has = mapCacheHas; + MapCache.prototype.set = mapCacheSet; + + /*------------------------------------------------------------------------*/ + + /** + * + * Creates an array cache object to store unique values. + * + * @private + * @constructor + * @param {Array} [values] The values to cache. + */ + function SetCache(values) { + var index = -1, + length = values == null ? 0 : values.length; + + this.__data__ = new MapCache; + while (++index < length) { + this.add(values[index]); + } + } + + /** + * Adds `value` to the array cache. + * + * @private + * @name add + * @memberOf SetCache + * @alias push + * @param {*} value The value to cache. + * @returns {Object} Returns the cache instance. + */ + function setCacheAdd(value) { + this.__data__.set(value, HASH_UNDEFINED); + return this; + } + + /** + * Checks if `value` is in the array cache. + * + * @private + * @name has + * @memberOf SetCache + * @param {*} value The value to search for. + * @returns {number} Returns `true` if `value` is found, else `false`. + */ + function setCacheHas(value) { + return this.__data__.has(value); + } + + // Add methods to `SetCache`. + SetCache.prototype.add = SetCache.prototype.push = setCacheAdd; + SetCache.prototype.has = setCacheHas; + + /*------------------------------------------------------------------------*/ + + /** + * Creates a stack cache object to store key-value pairs. + * + * @private + * @constructor + * @param {Array} [entries] The key-value pairs to cache. + */ + function Stack(entries) { + var data = this.__data__ = new ListCache(entries); + this.size = data.size; + } + + /** + * Removes all key-value entries from the stack. + * + * @private + * @name clear + * @memberOf Stack + */ + function stackClear() { + this.__data__ = new ListCache; + this.size = 0; + } + + /** + * Removes `key` and its value from the stack. + * + * @private + * @name delete + * @memberOf Stack + * @param {string} key The key of the value to remove. + * @returns {boolean} Returns `true` if the entry was removed, else `false`. + */ + function stackDelete(key) { + var data = this.__data__, + result = data['delete'](key); + + this.size = data.size; + return result; + } + + /** + * Gets the stack value for `key`. + * + * @private + * @name get + * @memberOf Stack + * @param {string} key The key of the value to get. + * @returns {*} Returns the entry value. + */ + function stackGet(key) { + return this.__data__.get(key); + } + + /** + * Checks if a stack value for `key` exists. + * + * @private + * @name has + * @memberOf Stack + * @param {string} key The key of the entry to check. + * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`. + */ + function stackHas(key) { + return this.__data__.has(key); + } + + /** + * Sets the stack `key` to `value`. + * + * @private + * @name set + * @memberOf Stack + * @param {string} key The key of the value to set. + * @param {*} value The value to set. + * @returns {Object} Returns the stack cache instance. + */ + function stackSet(key, value) { + var data = this.__data__; + if (data instanceof ListCache) { + var pairs = data.__data__; + if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) { + pairs.push([key, value]); + this.size = ++data.size; + return this; + } + data = this.__data__ = new MapCache(pairs); + } + data.set(key, value); + this.size = data.size; + return this; + } + + // Add methods to `Stack`. + Stack.prototype.clear = stackClear; + Stack.prototype['delete'] = stackDelete; + Stack.prototype.get = stackGet; + Stack.prototype.has = stackHas; + Stack.prototype.set = stackSet; + + /*------------------------------------------------------------------------*/ + + /** + * Creates an array of the enumerable property names of the array-like `value`. + * + * @private + * @param {*} value The value to query. + * @param {boolean} inherited Specify returning inherited property names. + * @returns {Array} Returns the array of property names. + */ + function arrayLikeKeys(value, inherited) { + var isArr = isArray(value), + isArg = !isArr && isArguments(value), + isBuff = !isArr && !isArg && isBuffer(value), + isType = !isArr && !isArg && !isBuff && isTypedArray(value), + skipIndexes = isArr || isArg || isBuff || isType, + result = skipIndexes ? baseTimes(value.length, String) : [], + length = result.length; + + for (var key in value) { + if ((inherited || hasOwnProperty.call(value, key)) && + !(skipIndexes && ( + // Safari 9 has enumerable `arguments.length` in strict mode. + key == 'length' || + // Node.js 0.10 has enumerable non-index properties on buffers. + (isBuff && (key == 'offset' || key == 'parent')) || + // PhantomJS 2 has enumerable non-index properties on typed arrays. + (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) || + // Skip index properties. + isIndex(key, length) + ))) { + result.push(key); + } + } + return result; + } + + /** + * A specialized version of `_.sample` for arrays. + * + * @private + * @param {Array} array The array to sample. + * @returns {*} Returns the random element. + */ + function arraySample(array) { + var length = array.length; + return length ? array[baseRandom(0, length - 1)] : undefined; + } + + /** + * A specialized version of `_.sampleSize` for arrays. + * + * @private + * @param {Array} array The array to sample. + * @param {number} n The number of elements to sample. + * @returns {Array} Returns the random elements. + */ + function arraySampleSize(array, n) { + return shuffleSelf(copyArray(array), baseClamp(n, 0, array.length)); + } + + /** + * A specialized version of `_.shuffle` for arrays. + * + * @private + * @param {Array} array The array to shuffle. + * @returns {Array} Returns the new shuffled array. + */ + function arrayShuffle(array) { + return shuffleSelf(copyArray(array)); + } + + /** + * This function is like `assignValue` except that it doesn't assign + * `undefined` values. + * + * @private + * @param {Object} object The object to modify. + * @param {string} key The key of the property to assign. + * @param {*} value The value to assign. + */ + function assignMergeValue(object, key, value) { + if ((value !== undefined && !eq(object[key], value)) || + (value === undefined && !(key in object))) { + baseAssignValue(object, key, value); + } + } + + /** + * Assigns `value` to `key` of `object` if the existing value is not equivalent + * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons. + * + * @private + * @param {Object} object The object to modify. + * @param {string} key The key of the property to assign. + * @param {*} value The value to assign. + */ + function assignValue(object, key, value) { + var objValue = object[key]; + if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || + (value === undefined && !(key in object))) { + baseAssignValue(object, key, value); + } + } + + /** + * Gets the index at which the `key` is found in `array` of key-value pairs. + * + * @private + * @param {Array} array The array to inspect. + * @param {*} key The key to search for. + * @returns {number} Returns the index of the matched value, else `-1`. + */ + function assocIndexOf(array, key) { + var length = array.length; + while (length--) { + if (eq(array[length][0], key)) { + return length; + } + } + return -1; + } + + /** + * Aggregates elements of `collection` on `accumulator` with keys transformed + * by `iteratee` and values set by `setter`. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} setter The function to set `accumulator` values. + * @param {Function} iteratee The iteratee to transform keys. + * @param {Object} accumulator The initial aggregated object. + * @returns {Function} Returns `accumulator`. + */ + function baseAggregator(collection, setter, iteratee, accumulator) { + baseEach(collection, function(value, key, collection) { + setter(accumulator, value, iteratee(value), collection); + }); + return accumulator; + } + + /** + * The base implementation of `_.assign` without support for multiple sources + * or `customizer` functions. + * + * @private + * @param {Object} object The destination object. + * @param {Object} source The source object. + * @returns {Object} Returns `object`. + */ + function baseAssign(object, source) { + return object && copyObject(source, keys(source), object); + } + + /** + * The base implementation of `_.assignIn` without support for multiple sources + * or `customizer` functions. + * + * @private + * @param {Object} object The destination object. + * @param {Object} source The source object. + * @returns {Object} Returns `object`. + */ + function baseAssignIn(object, source) { + return object && copyObject(source, keysIn(source), object); + } + + /** + * The base implementation of `assignValue` and `assignMergeValue` without + * value checks. + * + * @private + * @param {Object} object The object to modify. + * @param {string} key The key of the property to assign. + * @param {*} value The value to assign. + */ + function baseAssignValue(object, key, value) { + if (key == '__proto__' && defineProperty) { + defineProperty(object, key, { + 'configurable': true, + 'enumerable': true, + 'value': value, + 'writable': true + }); + } else { + object[key] = value; + } + } + + /** + * The base implementation of `_.at` without support for individual paths. + * + * @private + * @param {Object} object The object to iterate over. + * @param {string[]} paths The property paths to pick. + * @returns {Array} Returns the picked elements. + */ + function baseAt(object, paths) { + var index = -1, + length = paths.length, + result = Array(length), + skip = object == null; + + while (++index < length) { + result[index] = skip ? undefined : get(object, paths[index]); + } + return result; + } + + /** + * The base implementation of `_.clamp` which doesn't coerce arguments. + * + * @private + * @param {number} number The number to clamp. + * @param {number} [lower] The lower bound. + * @param {number} upper The upper bound. + * @returns {number} Returns the clamped number. + */ + function baseClamp(number, lower, upper) { + if (number === number) { + if (upper !== undefined) { + number = number <= upper ? number : upper; + } + if (lower !== undefined) { + number = number >= lower ? number : lower; + } + } + return number; + } + + /** + * The base implementation of `_.clone` and `_.cloneDeep` which tracks + * traversed objects. + * + * @private + * @param {*} value The value to clone. + * @param {boolean} bitmask The bitmask flags. + * 1 - Deep clone + * 2 - Flatten inherited properties + * 4 - Clone symbols + * @param {Function} [customizer] The function to customize cloning. + * @param {string} [key] The key of `value`. + * @param {Object} [object] The parent object of `value`. + * @param {Object} [stack] Tracks traversed objects and their clone counterparts. + * @returns {*} Returns the cloned value. + */ + function baseClone(value, bitmask, customizer, key, object, stack) { + var result, + isDeep = bitmask & CLONE_DEEP_FLAG, + isFlat = bitmask & CLONE_FLAT_FLAG, + isFull = bitmask & CLONE_SYMBOLS_FLAG; + + if (customizer) { + result = object ? customizer(value, key, object, stack) : customizer(value); + } + if (result !== undefined) { + return result; + } + if (!isObject(value)) { + return value; + } + var isArr = isArray(value); + if (isArr) { + result = initCloneArray(value); + if (!isDeep) { + return copyArray(value, result); + } + } else { + var tag = getTag(value), + isFunc = tag == funcTag || tag == genTag; + + if (isBuffer(value)) { + return cloneBuffer(value, isDeep); + } + if (tag == objectTag || tag == argsTag || (isFunc && !object)) { + result = (isFlat || isFunc) ? {} : initCloneObject(value); + if (!isDeep) { + return isFlat + ? copySymbolsIn(value, baseAssignIn(result, value)) + : copySymbols(value, baseAssign(result, value)); + } + } else { + if (!cloneableTags[tag]) { + return object ? value : {}; + } + result = initCloneByTag(value, tag, isDeep); + } + } + // Check for circular references and return its corresponding clone. + stack || (stack = new Stack); + var stacked = stack.get(value); + if (stacked) { + return stacked; + } + stack.set(value, result); + + if (isSet(value)) { + value.forEach(function(subValue) { + result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack)); + }); + + return result; + } + + if (isMap(value)) { + value.forEach(function(subValue, key) { + result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack)); + }); + + return result; + } + + var keysFunc = isFull + ? (isFlat ? getAllKeysIn : getAllKeys) + : (isFlat ? keysIn : keys); + + var props = isArr ? undefined : keysFunc(value); + arrayEach(props || value, function(subValue, key) { + if (props) { + key = subValue; + subValue = value[key]; + } + // Recursively populate clone (susceptible to call stack limits). + assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack)); + }); + return result; + } + + /** + * The base implementation of `_.conforms` which doesn't clone `source`. + * + * @private + * @param {Object} source The object of property predicates to conform to. + * @returns {Function} Returns the new spec function. + */ + function baseConforms(source) { + var props = keys(source); + return function(object) { + return baseConformsTo(object, source, props); + }; + } + + /** + * The base implementation of `_.conformsTo` which accepts `props` to check. + * + * @private + * @param {Object} object The object to inspect. + * @param {Object} source The object of property predicates to conform to. + * @returns {boolean} Returns `true` if `object` conforms, else `false`. + */ + function baseConformsTo(object, source, props) { + var length = props.length; + if (object == null) { + return !length; + } + object = Object(object); + while (length--) { + var key = props[length], + predicate = source[key], + value = object[key]; + + if ((value === undefined && !(key in object)) || !predicate(value)) { + return false; + } + } + return true; + } + + /** + * The base implementation of `_.delay` and `_.defer` which accepts `args` + * to provide to `func`. + * + * @private + * @param {Function} func The function to delay. + * @param {number} wait The number of milliseconds to delay invocation. + * @param {Array} args The arguments to provide to `func`. + * @returns {number|Object} Returns the timer id or timeout object. + */ + function baseDelay(func, wait, args) { + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + return setTimeout(function() { func.apply(undefined, args); }, wait); + } + + /** + * The base implementation of methods like `_.difference` without support + * for excluding multiple arrays or iteratee shorthands. + * + * @private + * @param {Array} array The array to inspect. + * @param {Array} values The values to exclude. + * @param {Function} [iteratee] The iteratee invoked per element. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new array of filtered values. + */ + function baseDifference(array, values, iteratee, comparator) { + var index = -1, + includes = arrayIncludes, + isCommon = true, + length = array.length, + result = [], + valuesLength = values.length; + + if (!length) { + return result; + } + if (iteratee) { + values = arrayMap(values, baseUnary(iteratee)); + } + if (comparator) { + includes = arrayIncludesWith; + isCommon = false; + } + else if (values.length >= LARGE_ARRAY_SIZE) { + includes = cacheHas; + isCommon = false; + values = new SetCache(values); + } + outer: + while (++index < length) { + var value = array[index], + computed = iteratee == null ? value : iteratee(value); + + value = (comparator || value !== 0) ? value : 0; + if (isCommon && computed === computed) { + var valuesIndex = valuesLength; + while (valuesIndex--) { + if (values[valuesIndex] === computed) { + continue outer; + } + } + result.push(value); + } + else if (!includes(values, computed, comparator)) { + result.push(value); + } + } + return result; + } + + /** + * The base implementation of `_.forEach` without support for iteratee shorthands. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Array|Object} Returns `collection`. + */ + var baseEach = createBaseEach(baseForOwn); + + /** + * The base implementation of `_.forEachRight` without support for iteratee shorthands. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Array|Object} Returns `collection`. + */ + var baseEachRight = createBaseEach(baseForOwnRight, true); + + /** + * The base implementation of `_.every` without support for iteratee shorthands. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} predicate The function invoked per iteration. + * @returns {boolean} Returns `true` if all elements pass the predicate check, + * else `false` + */ + function baseEvery(collection, predicate) { + var result = true; + baseEach(collection, function(value, index, collection) { + result = !!predicate(value, index, collection); + return result; + }); + return result; + } + + /** + * The base implementation of methods like `_.max` and `_.min` which accepts a + * `comparator` to determine the extremum value. + * + * @private + * @param {Array} array The array to iterate over. + * @param {Function} iteratee The iteratee invoked per iteration. + * @param {Function} comparator The comparator used to compare values. + * @returns {*} Returns the extremum value. + */ + function baseExtremum(array, iteratee, comparator) { + var index = -1, + length = array.length; + + while (++index < length) { + var value = array[index], + current = iteratee(value); + + if (current != null && (computed === undefined + ? (current === current && !isSymbol(current)) + : comparator(current, computed) + )) { + var computed = current, + result = value; + } + } + return result; + } + + /** + * The base implementation of `_.fill` without an iteratee call guard. + * + * @private + * @param {Array} array The array to fill. + * @param {*} value The value to fill `array` with. + * @param {number} [start=0] The start position. + * @param {number} [end=array.length] The end position. + * @returns {Array} Returns `array`. + */ + function baseFill(array, value, start, end) { + var length = array.length; + + start = toInteger(start); + if (start < 0) { + start = -start > length ? 0 : (length + start); + } + end = (end === undefined || end > length) ? length : toInteger(end); + if (end < 0) { + end += length; + } + end = start > end ? 0 : toLength(end); + while (start < end) { + array[start++] = value; + } + return array; + } + + /** + * The base implementation of `_.filter` without support for iteratee shorthands. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} predicate The function invoked per iteration. + * @returns {Array} Returns the new filtered array. + */ + function baseFilter(collection, predicate) { + var result = []; + baseEach(collection, function(value, index, collection) { + if (predicate(value, index, collection)) { + result.push(value); + } + }); + return result; + } + + /** + * The base implementation of `_.flatten` with support for restricting flattening. + * + * @private + * @param {Array} array The array to flatten. + * @param {number} depth The maximum recursion depth. + * @param {boolean} [predicate=isFlattenable] The function invoked per iteration. + * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks. + * @param {Array} [result=[]] The initial result value. + * @returns {Array} Returns the new flattened array. + */ + function baseFlatten(array, depth, predicate, isStrict, result) { + var index = -1, + length = array.length; + + predicate || (predicate = isFlattenable); + result || (result = []); + + while (++index < length) { + var value = array[index]; + if (depth > 0 && predicate(value)) { + if (depth > 1) { + // Recursively flatten arrays (susceptible to call stack limits). + baseFlatten(value, depth - 1, predicate, isStrict, result); + } else { + arrayPush(result, value); + } + } else if (!isStrict) { + result[result.length] = value; + } + } + return result; + } + + /** + * The base implementation of `baseForOwn` which iterates over `object` + * properties returned by `keysFunc` and invokes `iteratee` for each property. + * Iteratee functions may exit iteration early by explicitly returning `false`. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @param {Function} keysFunc The function to get the keys of `object`. + * @returns {Object} Returns `object`. + */ + var baseFor = createBaseFor(); + + /** + * This function is like `baseFor` except that it iterates over properties + * in the opposite order. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @param {Function} keysFunc The function to get the keys of `object`. + * @returns {Object} Returns `object`. + */ + var baseForRight = createBaseFor(true); + + /** + * The base implementation of `_.forOwn` without support for iteratee shorthands. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Object} Returns `object`. + */ + function baseForOwn(object, iteratee) { + return object && baseFor(object, iteratee, keys); + } + + /** + * The base implementation of `_.forOwnRight` without support for iteratee shorthands. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Object} Returns `object`. + */ + function baseForOwnRight(object, iteratee) { + return object && baseForRight(object, iteratee, keys); + } + + /** + * The base implementation of `_.functions` which creates an array of + * `object` function property names filtered from `props`. + * + * @private + * @param {Object} object The object to inspect. + * @param {Array} props The property names to filter. + * @returns {Array} Returns the function names. + */ + function baseFunctions(object, props) { + return arrayFilter(props, function(key) { + return isFunction(object[key]); + }); + } + + /** + * The base implementation of `_.get` without support for default values. + * + * @private + * @param {Object} object The object to query. + * @param {Array|string} path The path of the property to get. + * @returns {*} Returns the resolved value. + */ + function baseGet(object, path) { + path = castPath(path, object); + + var index = 0, + length = path.length; + + while (object != null && index < length) { + object = object[toKey(path[index++])]; + } + return (index && index == length) ? object : undefined; + } + + /** + * The base implementation of `getAllKeys` and `getAllKeysIn` which uses + * `keysFunc` and `symbolsFunc` to get the enumerable property names and + * symbols of `object`. + * + * @private + * @param {Object} object The object to query. + * @param {Function} keysFunc The function to get the keys of `object`. + * @param {Function} symbolsFunc The function to get the symbols of `object`. + * @returns {Array} Returns the array of property names and symbols. + */ + function baseGetAllKeys(object, keysFunc, symbolsFunc) { + var result = keysFunc(object); + return isArray(object) ? result : arrayPush(result, symbolsFunc(object)); + } + + /** + * The base implementation of `getTag` without fallbacks for buggy environments. + * + * @private + * @param {*} value The value to query. + * @returns {string} Returns the `toStringTag`. + */ + function baseGetTag(value) { + if (value == null) { + return value === undefined ? undefinedTag : nullTag; + } + return (symToStringTag && symToStringTag in Object(value)) + ? getRawTag(value) + : objectToString(value); + } + + /** + * The base implementation of `_.gt` which doesn't coerce arguments. + * + * @private + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if `value` is greater than `other`, + * else `false`. + */ + function baseGt(value, other) { + return value > other; + } + + /** + * The base implementation of `_.has` without support for deep paths. + * + * @private + * @param {Object} [object] The object to query. + * @param {Array|string} key The key to check. + * @returns {boolean} Returns `true` if `key` exists, else `false`. + */ + function baseHas(object, key) { + return object != null && hasOwnProperty.call(object, key); + } + + /** + * The base implementation of `_.hasIn` without support for deep paths. + * + * @private + * @param {Object} [object] The object to query. + * @param {Array|string} key The key to check. + * @returns {boolean} Returns `true` if `key` exists, else `false`. + */ + function baseHasIn(object, key) { + return object != null && key in Object(object); + } + + /** + * The base implementation of `_.inRange` which doesn't coerce arguments. + * + * @private + * @param {number} number The number to check. + * @param {number} start The start of the range. + * @param {number} end The end of the range. + * @returns {boolean} Returns `true` if `number` is in the range, else `false`. + */ + function baseInRange(number, start, end) { + return number >= nativeMin(start, end) && number < nativeMax(start, end); + } + + /** + * The base implementation of methods like `_.intersection`, without support + * for iteratee shorthands, that accepts an array of arrays to inspect. + * + * @private + * @param {Array} arrays The arrays to inspect. + * @param {Function} [iteratee] The iteratee invoked per element. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new array of shared values. + */ + function baseIntersection(arrays, iteratee, comparator) { + var includes = comparator ? arrayIncludesWith : arrayIncludes, + length = arrays[0].length, + othLength = arrays.length, + othIndex = othLength, + caches = Array(othLength), + maxLength = Infinity, + result = []; + + while (othIndex--) { + var array = arrays[othIndex]; + if (othIndex && iteratee) { + array = arrayMap(array, baseUnary(iteratee)); + } + maxLength = nativeMin(array.length, maxLength); + caches[othIndex] = !comparator && (iteratee || (length >= 120 && array.length >= 120)) + ? new SetCache(othIndex && array) + : undefined; + } + array = arrays[0]; + + var index = -1, + seen = caches[0]; + + outer: + while (++index < length && result.length < maxLength) { + var value = array[index], + computed = iteratee ? iteratee(value) : value; + + value = (comparator || value !== 0) ? value : 0; + if (!(seen + ? cacheHas(seen, computed) + : includes(result, computed, comparator) + )) { + othIndex = othLength; + while (--othIndex) { + var cache = caches[othIndex]; + if (!(cache + ? cacheHas(cache, computed) + : includes(arrays[othIndex], computed, comparator)) + ) { + continue outer; + } + } + if (seen) { + seen.push(computed); + } + result.push(value); + } + } + return result; + } + + /** + * The base implementation of `_.invert` and `_.invertBy` which inverts + * `object` with values transformed by `iteratee` and set by `setter`. + * + * @private + * @param {Object} object The object to iterate over. + * @param {Function} setter The function to set `accumulator` values. + * @param {Function} iteratee The iteratee to transform values. + * @param {Object} accumulator The initial inverted object. + * @returns {Function} Returns `accumulator`. + */ + function baseInverter(object, setter, iteratee, accumulator) { + baseForOwn(object, function(value, key, object) { + setter(accumulator, iteratee(value), key, object); + }); + return accumulator; + } + + /** + * The base implementation of `_.invoke` without support for individual + * method arguments. + * + * @private + * @param {Object} object The object to query. + * @param {Array|string} path The path of the method to invoke. + * @param {Array} args The arguments to invoke the method with. + * @returns {*} Returns the result of the invoked method. + */ + function baseInvoke(object, path, args) { + path = castPath(path, object); + object = parent(object, path); + var func = object == null ? object : object[toKey(last(path))]; + return func == null ? undefined : apply(func, object, args); + } + + /** + * The base implementation of `_.isArguments`. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an `arguments` object, + */ + function baseIsArguments(value) { + return isObjectLike(value) && baseGetTag(value) == argsTag; + } + + /** + * The base implementation of `_.isArrayBuffer` without Node.js optimizations. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`. + */ + function baseIsArrayBuffer(value) { + return isObjectLike(value) && baseGetTag(value) == arrayBufferTag; + } + + /** + * The base implementation of `_.isDate` without Node.js optimizations. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a date object, else `false`. + */ + function baseIsDate(value) { + return isObjectLike(value) && baseGetTag(value) == dateTag; + } + + /** + * The base implementation of `_.isEqual` which supports partial comparisons + * and tracks traversed objects. + * + * @private + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @param {boolean} bitmask The bitmask flags. + * 1 - Unordered comparison + * 2 - Partial comparison + * @param {Function} [customizer] The function to customize comparisons. + * @param {Object} [stack] Tracks traversed `value` and `other` objects. + * @returns {boolean} Returns `true` if the values are equivalent, else `false`. + */ + function baseIsEqual(value, other, bitmask, customizer, stack) { + if (value === other) { + return true; + } + if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) { + return value !== value && other !== other; + } + return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack); + } + + /** + * A specialized version of `baseIsEqual` for arrays and objects which performs + * deep comparisons and tracks traversed objects enabling objects with circular + * references to be compared. + * + * @private + * @param {Object} object The object to compare. + * @param {Object} other The other object to compare. + * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details. + * @param {Function} customizer The function to customize comparisons. + * @param {Function} equalFunc The function to determine equivalents of values. + * @param {Object} [stack] Tracks traversed `object` and `other` objects. + * @returns {boolean} Returns `true` if the objects are equivalent, else `false`. + */ + function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) { + var objIsArr = isArray(object), + othIsArr = isArray(other), + objTag = objIsArr ? arrayTag : getTag(object), + othTag = othIsArr ? arrayTag : getTag(other); + + objTag = objTag == argsTag ? objectTag : objTag; + othTag = othTag == argsTag ? objectTag : othTag; + + var objIsObj = objTag == objectTag, + othIsObj = othTag == objectTag, + isSameTag = objTag == othTag; + + if (isSameTag && isBuffer(object)) { + if (!isBuffer(other)) { + return false; + } + objIsArr = true; + objIsObj = false; + } + if (isSameTag && !objIsObj) { + stack || (stack = new Stack); + return (objIsArr || isTypedArray(object)) + ? equalArrays(object, other, bitmask, customizer, equalFunc, stack) + : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack); + } + if (!(bitmask & COMPARE_PARTIAL_FLAG)) { + var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'), + othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__'); + + if (objIsWrapped || othIsWrapped) { + var objUnwrapped = objIsWrapped ? object.value() : object, + othUnwrapped = othIsWrapped ? other.value() : other; + + stack || (stack = new Stack); + return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack); + } + } + if (!isSameTag) { + return false; + } + stack || (stack = new Stack); + return equalObjects(object, other, bitmask, customizer, equalFunc, stack); + } + + /** + * The base implementation of `_.isMap` without Node.js optimizations. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a map, else `false`. + */ + function baseIsMap(value) { + return isObjectLike(value) && getTag(value) == mapTag; + } + + /** + * The base implementation of `_.isMatch` without support for iteratee shorthands. + * + * @private + * @param {Object} object The object to inspect. + * @param {Object} source The object of property values to match. + * @param {Array} matchData The property names, values, and compare flags to match. + * @param {Function} [customizer] The function to customize comparisons. + * @returns {boolean} Returns `true` if `object` is a match, else `false`. + */ + function baseIsMatch(object, source, matchData, customizer) { + var index = matchData.length, + length = index, + noCustomizer = !customizer; + + if (object == null) { + return !length; + } + object = Object(object); + while (index--) { + var data = matchData[index]; + if ((noCustomizer && data[2]) + ? data[1] !== object[data[0]] + : !(data[0] in object) + ) { + return false; + } + } + while (++index < length) { + data = matchData[index]; + var key = data[0], + objValue = object[key], + srcValue = data[1]; + + if (noCustomizer && data[2]) { + if (objValue === undefined && !(key in object)) { + return false; + } + } else { + var stack = new Stack; + if (customizer) { + var result = customizer(objValue, srcValue, key, object, source, stack); + } + if (!(result === undefined + ? baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG, customizer, stack) + : result + )) { + return false; + } + } + } + return true; + } + + /** + * The base implementation of `_.isNative` without bad shim checks. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a native function, + * else `false`. + */ + function baseIsNative(value) { + if (!isObject(value) || isMasked(value)) { + return false; + } + var pattern = isFunction(value) ? reIsNative : reIsHostCtor; + return pattern.test(toSource(value)); + } + + /** + * The base implementation of `_.isRegExp` without Node.js optimizations. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a regexp, else `false`. + */ + function baseIsRegExp(value) { + return isObjectLike(value) && baseGetTag(value) == regexpTag; + } + + /** + * The base implementation of `_.isSet` without Node.js optimizations. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a set, else `false`. + */ + function baseIsSet(value) { + return isObjectLike(value) && getTag(value) == setTag; + } + + /** + * The base implementation of `_.isTypedArray` without Node.js optimizations. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a typed array, else `false`. + */ + function baseIsTypedArray(value) { + return isObjectLike(value) && + isLength(value.length) && !!typedArrayTags[baseGetTag(value)]; + } + + /** + * The base implementation of `_.iteratee`. + * + * @private + * @param {*} [value=_.identity] The value to convert to an iteratee. + * @returns {Function} Returns the iteratee. + */ + function baseIteratee(value) { + // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9. + // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details. + if (typeof value == 'function') { + return value; + } + if (value == null) { + return identity; + } + if (typeof value == 'object') { + return isArray(value) + ? baseMatchesProperty(value[0], value[1]) + : baseMatches(value); + } + return property(value); + } + + /** + * The base implementation of `_.keys` which doesn't treat sparse arrays as dense. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + */ + function baseKeys(object) { + if (!isPrototype(object)) { + return nativeKeys(object); + } + var result = []; + for (var key in Object(object)) { + if (hasOwnProperty.call(object, key) && key != 'constructor') { + result.push(key); + } + } + return result; + } + + /** + * The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + */ + function baseKeysIn(object) { + if (!isObject(object)) { + return nativeKeysIn(object); + } + var isProto = isPrototype(object), + result = []; + + for (var key in object) { + if (!(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) { + result.push(key); + } + } + return result; + } + + /** + * The base implementation of `_.lt` which doesn't coerce arguments. + * + * @private + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if `value` is less than `other`, + * else `false`. + */ + function baseLt(value, other) { + return value < other; + } + + /** + * The base implementation of `_.map` without support for iteratee shorthands. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} iteratee The function invoked per iteration. + * @returns {Array} Returns the new mapped array. + */ + function baseMap(collection, iteratee) { + var index = -1, + result = isArrayLike(collection) ? Array(collection.length) : []; + + baseEach(collection, function(value, key, collection) { + result[++index] = iteratee(value, key, collection); + }); + return result; + } + + /** + * The base implementation of `_.matches` which doesn't clone `source`. + * + * @private + * @param {Object} source The object of property values to match. + * @returns {Function} Returns the new spec function. + */ + function baseMatches(source) { + var matchData = getMatchData(source); + if (matchData.length == 1 && matchData[0][2]) { + return matchesStrictComparable(matchData[0][0], matchData[0][1]); + } + return function(object) { + return object === source || baseIsMatch(object, source, matchData); + }; + } + + /** + * The base implementation of `_.matchesProperty` which doesn't clone `srcValue`. + * + * @private + * @param {string} path The path of the property to get. + * @param {*} srcValue The value to match. + * @returns {Function} Returns the new spec function. + */ + function baseMatchesProperty(path, srcValue) { + if (isKey(path) && isStrictComparable(srcValue)) { + return matchesStrictComparable(toKey(path), srcValue); + } + return function(object) { + var objValue = get(object, path); + return (objValue === undefined && objValue === srcValue) + ? hasIn(object, path) + : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG); + }; + } + + /** + * The base implementation of `_.merge` without support for multiple sources. + * + * @private + * @param {Object} object The destination object. + * @param {Object} source The source object. + * @param {number} srcIndex The index of `source`. + * @param {Function} [customizer] The function to customize merged values. + * @param {Object} [stack] Tracks traversed source values and their merged + * counterparts. + */ + function baseMerge(object, source, srcIndex, customizer, stack) { + if (object === source) { + return; + } + baseFor(source, function(srcValue, key) { + if (isObject(srcValue)) { + stack || (stack = new Stack); + baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack); + } + else { + var newValue = customizer + ? customizer(safeGet(object, key), srcValue, (key + ''), object, source, stack) + : undefined; + + if (newValue === undefined) { + newValue = srcValue; + } + assignMergeValue(object, key, newValue); + } + }, keysIn); + } + + /** + * A specialized version of `baseMerge` for arrays and objects which performs + * deep merges and tracks traversed objects enabling objects with circular + * references to be merged. + * + * @private + * @param {Object} object The destination object. + * @param {Object} source The source object. + * @param {string} key The key of the value to merge. + * @param {number} srcIndex The index of `source`. + * @param {Function} mergeFunc The function to merge values. + * @param {Function} [customizer] The function to customize assigned values. + * @param {Object} [stack] Tracks traversed source values and their merged + * counterparts. + */ + function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) { + var objValue = safeGet(object, key), + srcValue = safeGet(source, key), + stacked = stack.get(srcValue); + + if (stacked) { + assignMergeValue(object, key, stacked); + return; + } + var newValue = customizer + ? customizer(objValue, srcValue, (key + ''), object, source, stack) + : undefined; + + var isCommon = newValue === undefined; + + if (isCommon) { + var isArr = isArray(srcValue), + isBuff = !isArr && isBuffer(srcValue), + isTyped = !isArr && !isBuff && isTypedArray(srcValue); + + newValue = srcValue; + if (isArr || isBuff || isTyped) { + if (isArray(objValue)) { + newValue = objValue; + } + else if (isArrayLikeObject(objValue)) { + newValue = copyArray(objValue); + } + else if (isBuff) { + isCommon = false; + newValue = cloneBuffer(srcValue, true); + } + else if (isTyped) { + isCommon = false; + newValue = cloneTypedArray(srcValue, true); + } + else { + newValue = []; + } + } + else if (isPlainObject(srcValue) || isArguments(srcValue)) { + newValue = objValue; + if (isArguments(objValue)) { + newValue = toPlainObject(objValue); + } + else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) { + newValue = initCloneObject(srcValue); + } + } + else { + isCommon = false; + } + } + if (isCommon) { + // Recursively merge objects and arrays (susceptible to call stack limits). + stack.set(srcValue, newValue); + mergeFunc(newValue, srcValue, srcIndex, customizer, stack); + stack['delete'](srcValue); + } + assignMergeValue(object, key, newValue); + } + + /** + * The base implementation of `_.nth` which doesn't coerce arguments. + * + * @private + * @param {Array} array The array to query. + * @param {number} n The index of the element to return. + * @returns {*} Returns the nth element of `array`. + */ + function baseNth(array, n) { + var length = array.length; + if (!length) { + return; + } + n += n < 0 ? length : 0; + return isIndex(n, length) ? array[n] : undefined; + } + + /** + * The base implementation of `_.orderBy` without param guards. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function[]|Object[]|string[]} iteratees The iteratees to sort by. + * @param {string[]} orders The sort orders of `iteratees`. + * @returns {Array} Returns the new sorted array. + */ + function baseOrderBy(collection, iteratees, orders) { + var index = -1; + iteratees = arrayMap(iteratees.length ? iteratees : [identity], baseUnary(getIteratee())); + + var result = baseMap(collection, function(value, key, collection) { + var criteria = arrayMap(iteratees, function(iteratee) { + return iteratee(value); + }); + return { 'criteria': criteria, 'index': ++index, 'value': value }; + }); + + return baseSortBy(result, function(object, other) { + return compareMultiple(object, other, orders); + }); + } + + /** + * The base implementation of `_.pick` without support for individual + * property identifiers. + * + * @private + * @param {Object} object The source object. + * @param {string[]} paths The property paths to pick. + * @returns {Object} Returns the new object. + */ + function basePick(object, paths) { + return basePickBy(object, paths, function(value, path) { + return hasIn(object, path); + }); + } + + /** + * The base implementation of `_.pickBy` without support for iteratee shorthands. + * + * @private + * @param {Object} object The source object. + * @param {string[]} paths The property paths to pick. + * @param {Function} predicate The function invoked per property. + * @returns {Object} Returns the new object. + */ + function basePickBy(object, paths, predicate) { + var index = -1, + length = paths.length, + result = {}; + + while (++index < length) { + var path = paths[index], + value = baseGet(object, path); + + if (predicate(value, path)) { + baseSet(result, castPath(path, object), value); + } + } + return result; + } + + /** + * A specialized version of `baseProperty` which supports deep paths. + * + * @private + * @param {Array|string} path The path of the property to get. + * @returns {Function} Returns the new accessor function. + */ + function basePropertyDeep(path) { + return function(object) { + return baseGet(object, path); + }; + } + + /** + * The base implementation of `_.pullAllBy` without support for iteratee + * shorthands. + * + * @private + * @param {Array} array The array to modify. + * @param {Array} values The values to remove. + * @param {Function} [iteratee] The iteratee invoked per element. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns `array`. + */ + function basePullAll(array, values, iteratee, comparator) { + var indexOf = comparator ? baseIndexOfWith : baseIndexOf, + index = -1, + length = values.length, + seen = array; + + if (array === values) { + values = copyArray(values); + } + if (iteratee) { + seen = arrayMap(array, baseUnary(iteratee)); + } + while (++index < length) { + var fromIndex = 0, + value = values[index], + computed = iteratee ? iteratee(value) : value; + + while ((fromIndex = indexOf(seen, computed, fromIndex, comparator)) > -1) { + if (seen !== array) { + splice.call(seen, fromIndex, 1); + } + splice.call(array, fromIndex, 1); + } + } + return array; + } + + /** + * The base implementation of `_.pullAt` without support for individual + * indexes or capturing the removed elements. + * + * @private + * @param {Array} array The array to modify. + * @param {number[]} indexes The indexes of elements to remove. + * @returns {Array} Returns `array`. + */ + function basePullAt(array, indexes) { + var length = array ? indexes.length : 0, + lastIndex = length - 1; + + while (length--) { + var index = indexes[length]; + if (length == lastIndex || index !== previous) { + var previous = index; + if (isIndex(index)) { + splice.call(array, index, 1); + } else { + baseUnset(array, index); + } + } + } + return array; + } + + /** + * The base implementation of `_.random` without support for returning + * floating-point numbers. + * + * @private + * @param {number} lower The lower bound. + * @param {number} upper The upper bound. + * @returns {number} Returns the random number. + */ + function baseRandom(lower, upper) { + return lower + nativeFloor(nativeRandom() * (upper - lower + 1)); + } + + /** + * The base implementation of `_.range` and `_.rangeRight` which doesn't + * coerce arguments. + * + * @private + * @param {number} start The start of the range. + * @param {number} end The end of the range. + * @param {number} step The value to increment or decrement by. + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {Array} Returns the range of numbers. + */ + function baseRange(start, end, step, fromRight) { + var index = -1, + length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), + result = Array(length); + + while (length--) { + result[fromRight ? length : ++index] = start; + start += step; + } + return result; + } + + /** + * The base implementation of `_.repeat` which doesn't coerce arguments. + * + * @private + * @param {string} string The string to repeat. + * @param {number} n The number of times to repeat the string. + * @returns {string} Returns the repeated string. + */ + function baseRepeat(string, n) { + var result = ''; + if (!string || n < 1 || n > MAX_SAFE_INTEGER) { + return result; + } + // Leverage the exponentiation by squaring algorithm for a faster repeat. + // See https://en.wikipedia.org/wiki/Exponentiation_by_squaring for more details. + do { + if (n % 2) { + result += string; + } + n = nativeFloor(n / 2); + if (n) { + string += string; + } + } while (n); + + return result; + } + + /** + * The base implementation of `_.rest` which doesn't validate or coerce arguments. + * + * @private + * @param {Function} func The function to apply a rest parameter to. + * @param {number} [start=func.length-1] The start position of the rest parameter. + * @returns {Function} Returns the new function. + */ + function baseRest(func, start) { + return setToString(overRest(func, start, identity), func + ''); + } + + /** + * The base implementation of `_.sample`. + * + * @private + * @param {Array|Object} collection The collection to sample. + * @returns {*} Returns the random element. + */ + function baseSample(collection) { + return arraySample(values(collection)); + } + + /** + * The base implementation of `_.sampleSize` without param guards. + * + * @private + * @param {Array|Object} collection The collection to sample. + * @param {number} n The number of elements to sample. + * @returns {Array} Returns the random elements. + */ + function baseSampleSize(collection, n) { + var array = values(collection); + return shuffleSelf(array, baseClamp(n, 0, array.length)); + } + + /** + * The base implementation of `_.set`. + * + * @private + * @param {Object} object The object to modify. + * @param {Array|string} path The path of the property to set. + * @param {*} value The value to set. + * @param {Function} [customizer] The function to customize path creation. + * @returns {Object} Returns `object`. + */ + function baseSet(object, path, value, customizer) { + if (!isObject(object)) { + return object; + } + path = castPath(path, object); + + var index = -1, + length = path.length, + lastIndex = length - 1, + nested = object; + + while (nested != null && ++index < length) { + var key = toKey(path[index]), + newValue = value; + + if (index != lastIndex) { + var objValue = nested[key]; + newValue = customizer ? customizer(objValue, key, nested) : undefined; + if (newValue === undefined) { + newValue = isObject(objValue) + ? objValue + : (isIndex(path[index + 1]) ? [] : {}); + } + } + assignValue(nested, key, newValue); + nested = nested[key]; + } + return object; + } + + /** + * The base implementation of `setData` without support for hot loop shorting. + * + * @private + * @param {Function} func The function to associate metadata with. + * @param {*} data The metadata. + * @returns {Function} Returns `func`. + */ + var baseSetData = !metaMap ? identity : function(func, data) { + metaMap.set(func, data); + return func; + }; + + /** + * The base implementation of `setToString` without support for hot loop shorting. + * + * @private + * @param {Function} func The function to modify. + * @param {Function} string The `toString` result. + * @returns {Function} Returns `func`. + */ + var baseSetToString = !defineProperty ? identity : function(func, string) { + return defineProperty(func, 'toString', { + 'configurable': true, + 'enumerable': false, + 'value': constant(string), + 'writable': true + }); + }; + + /** + * The base implementation of `_.shuffle`. + * + * @private + * @param {Array|Object} collection The collection to shuffle. + * @returns {Array} Returns the new shuffled array. + */ + function baseShuffle(collection) { + return shuffleSelf(values(collection)); + } + + /** + * The base implementation of `_.slice` without an iteratee call guard. + * + * @private + * @param {Array} array The array to slice. + * @param {number} [start=0] The start position. + * @param {number} [end=array.length] The end position. + * @returns {Array} Returns the slice of `array`. + */ + function baseSlice(array, start, end) { + var index = -1, + length = array.length; + + if (start < 0) { + start = -start > length ? 0 : (length + start); + } + end = end > length ? length : end; + if (end < 0) { + end += length; + } + length = start > end ? 0 : ((end - start) >>> 0); + start >>>= 0; + + var result = Array(length); + while (++index < length) { + result[index] = array[index + start]; + } + return result; + } + + /** + * The base implementation of `_.some` without support for iteratee shorthands. + * + * @private + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} predicate The function invoked per iteration. + * @returns {boolean} Returns `true` if any element passes the predicate check, + * else `false`. + */ + function baseSome(collection, predicate) { + var result; + + baseEach(collection, function(value, index, collection) { + result = predicate(value, index, collection); + return !result; + }); + return !!result; + } + + /** + * The base implementation of `_.sortedIndex` and `_.sortedLastIndex` which + * performs a binary search of `array` to determine the index at which `value` + * should be inserted into `array` in order to maintain its sort order. + * + * @private + * @param {Array} array The sorted array to inspect. + * @param {*} value The value to evaluate. + * @param {boolean} [retHighest] Specify returning the highest qualified index. + * @returns {number} Returns the index at which `value` should be inserted + * into `array`. + */ + function baseSortedIndex(array, value, retHighest) { + var low = 0, + high = array == null ? low : array.length; + + if (typeof value == 'number' && value === value && high <= HALF_MAX_ARRAY_LENGTH) { + while (low < high) { + var mid = (low + high) >>> 1, + computed = array[mid]; + + if (computed !== null && !isSymbol(computed) && + (retHighest ? (computed <= value) : (computed < value))) { + low = mid + 1; + } else { + high = mid; + } + } + return high; + } + return baseSortedIndexBy(array, value, identity, retHighest); + } + + /** + * The base implementation of `_.sortedIndexBy` and `_.sortedLastIndexBy` + * which invokes `iteratee` for `value` and each element of `array` to compute + * their sort ranking. The iteratee is invoked with one argument; (value). + * + * @private + * @param {Array} array The sorted array to inspect. + * @param {*} value The value to evaluate. + * @param {Function} iteratee The iteratee invoked per element. + * @param {boolean} [retHighest] Specify returning the highest qualified index. + * @returns {number} Returns the index at which `value` should be inserted + * into `array`. + */ + function baseSortedIndexBy(array, value, iteratee, retHighest) { + value = iteratee(value); + + var low = 0, + high = array == null ? 0 : array.length, + valIsNaN = value !== value, + valIsNull = value === null, + valIsSymbol = isSymbol(value), + valIsUndefined = value === undefined; + + while (low < high) { + var mid = nativeFloor((low + high) / 2), + computed = iteratee(array[mid]), + othIsDefined = computed !== undefined, + othIsNull = computed === null, + othIsReflexive = computed === computed, + othIsSymbol = isSymbol(computed); + + if (valIsNaN) { + var setLow = retHighest || othIsReflexive; + } else if (valIsUndefined) { + setLow = othIsReflexive && (retHighest || othIsDefined); + } else if (valIsNull) { + setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull); + } else if (valIsSymbol) { + setLow = othIsReflexive && othIsDefined && !othIsNull && (retHighest || !othIsSymbol); + } else if (othIsNull || othIsSymbol) { + setLow = false; + } else { + setLow = retHighest ? (computed <= value) : (computed < value); + } + if (setLow) { + low = mid + 1; + } else { + high = mid; + } + } + return nativeMin(high, MAX_ARRAY_INDEX); + } + + /** + * The base implementation of `_.sortedUniq` and `_.sortedUniqBy` without + * support for iteratee shorthands. + * + * @private + * @param {Array} array The array to inspect. + * @param {Function} [iteratee] The iteratee invoked per element. + * @returns {Array} Returns the new duplicate free array. + */ + function baseSortedUniq(array, iteratee) { + var index = -1, + length = array.length, + resIndex = 0, + result = []; + + while (++index < length) { + var value = array[index], + computed = iteratee ? iteratee(value) : value; + + if (!index || !eq(computed, seen)) { + var seen = computed; + result[resIndex++] = value === 0 ? 0 : value; + } + } + return result; + } + + /** + * The base implementation of `_.toNumber` which doesn't ensure correct + * conversions of binary, hexadecimal, or octal string values. + * + * @private + * @param {*} value The value to process. + * @returns {number} Returns the number. + */ + function baseToNumber(value) { + if (typeof value == 'number') { + return value; + } + if (isSymbol(value)) { + return NAN; + } + return +value; + } + + /** + * The base implementation of `_.toString` which doesn't convert nullish + * values to empty strings. + * + * @private + * @param {*} value The value to process. + * @returns {string} Returns the string. + */ + function baseToString(value) { + // Exit early for strings to avoid a performance hit in some environments. + if (typeof value == 'string') { + return value; + } + if (isArray(value)) { + // Recursively convert values (susceptible to call stack limits). + return arrayMap(value, baseToString) + ''; + } + if (isSymbol(value)) { + return symbolToString ? symbolToString.call(value) : ''; + } + var result = (value + ''); + return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result; + } + + /** + * The base implementation of `_.uniqBy` without support for iteratee shorthands. + * + * @private + * @param {Array} array The array to inspect. + * @param {Function} [iteratee] The iteratee invoked per element. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new duplicate free array. + */ + function baseUniq(array, iteratee, comparator) { + var index = -1, + includes = arrayIncludes, + length = array.length, + isCommon = true, + result = [], + seen = result; + + if (comparator) { + isCommon = false; + includes = arrayIncludesWith; + } + else if (length >= LARGE_ARRAY_SIZE) { + var set = iteratee ? null : createSet(array); + if (set) { + return setToArray(set); + } + isCommon = false; + includes = cacheHas; + seen = new SetCache; + } + else { + seen = iteratee ? [] : result; + } + outer: + while (++index < length) { + var value = array[index], + computed = iteratee ? iteratee(value) : value; + + value = (comparator || value !== 0) ? value : 0; + if (isCommon && computed === computed) { + var seenIndex = seen.length; + while (seenIndex--) { + if (seen[seenIndex] === computed) { + continue outer; + } + } + if (iteratee) { + seen.push(computed); + } + result.push(value); + } + else if (!includes(seen, computed, comparator)) { + if (seen !== result) { + seen.push(computed); + } + result.push(value); + } + } + return result; + } + + /** + * The base implementation of `_.unset`. + * + * @private + * @param {Object} object The object to modify. + * @param {Array|string} path The property path to unset. + * @returns {boolean} Returns `true` if the property is deleted, else `false`. + */ + function baseUnset(object, path) { + path = castPath(path, object); + object = parent(object, path); + return object == null || delete object[toKey(last(path))]; + } + + /** + * The base implementation of `_.update`. + * + * @private + * @param {Object} object The object to modify. + * @param {Array|string} path The path of the property to update. + * @param {Function} updater The function to produce the updated value. + * @param {Function} [customizer] The function to customize path creation. + * @returns {Object} Returns `object`. + */ + function baseUpdate(object, path, updater, customizer) { + return baseSet(object, path, updater(baseGet(object, path)), customizer); + } + + /** + * The base implementation of methods like `_.dropWhile` and `_.takeWhile` + * without support for iteratee shorthands. + * + * @private + * @param {Array} array The array to query. + * @param {Function} predicate The function invoked per iteration. + * @param {boolean} [isDrop] Specify dropping elements instead of taking them. + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {Array} Returns the slice of `array`. + */ + function baseWhile(array, predicate, isDrop, fromRight) { + var length = array.length, + index = fromRight ? length : -1; + + while ((fromRight ? index-- : ++index < length) && + predicate(array[index], index, array)) {} + + return isDrop + ? baseSlice(array, (fromRight ? 0 : index), (fromRight ? index + 1 : length)) + : baseSlice(array, (fromRight ? index + 1 : 0), (fromRight ? length : index)); + } + + /** + * The base implementation of `wrapperValue` which returns the result of + * performing a sequence of actions on the unwrapped `value`, where each + * successive action is supplied the return value of the previous. + * + * @private + * @param {*} value The unwrapped value. + * @param {Array} actions Actions to perform to resolve the unwrapped value. + * @returns {*} Returns the resolved value. + */ + function baseWrapperValue(value, actions) { + var result = value; + if (result instanceof LazyWrapper) { + result = result.value(); + } + return arrayReduce(actions, function(result, action) { + return action.func.apply(action.thisArg, arrayPush([result], action.args)); + }, result); + } + + /** + * The base implementation of methods like `_.xor`, without support for + * iteratee shorthands, that accepts an array of arrays to inspect. + * + * @private + * @param {Array} arrays The arrays to inspect. + * @param {Function} [iteratee] The iteratee invoked per element. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new array of values. + */ + function baseXor(arrays, iteratee, comparator) { + var length = arrays.length; + if (length < 2) { + return length ? baseUniq(arrays[0]) : []; + } + var index = -1, + result = Array(length); + + while (++index < length) { + var array = arrays[index], + othIndex = -1; + + while (++othIndex < length) { + if (othIndex != index) { + result[index] = baseDifference(result[index] || array, arrays[othIndex], iteratee, comparator); + } + } + } + return baseUniq(baseFlatten(result, 1), iteratee, comparator); + } + + /** + * This base implementation of `_.zipObject` which assigns values using `assignFunc`. + * + * @private + * @param {Array} props The property identifiers. + * @param {Array} values The property values. + * @param {Function} assignFunc The function to assign values. + * @returns {Object} Returns the new object. + */ + function baseZipObject(props, values, assignFunc) { + var index = -1, + length = props.length, + valsLength = values.length, + result = {}; + + while (++index < length) { + var value = index < valsLength ? values[index] : undefined; + assignFunc(result, props[index], value); + } + return result; + } + + /** + * Casts `value` to an empty array if it's not an array like object. + * + * @private + * @param {*} value The value to inspect. + * @returns {Array|Object} Returns the cast array-like object. + */ + function castArrayLikeObject(value) { + return isArrayLikeObject(value) ? value : []; + } + + /** + * Casts `value` to `identity` if it's not a function. + * + * @private + * @param {*} value The value to inspect. + * @returns {Function} Returns cast function. + */ + function castFunction(value) { + return typeof value == 'function' ? value : identity; + } + + /** + * Casts `value` to a path array if it's not one. + * + * @private + * @param {*} value The value to inspect. + * @param {Object} [object] The object to query keys on. + * @returns {Array} Returns the cast property path array. + */ + function castPath(value, object) { + if (isArray(value)) { + return value; + } + return isKey(value, object) ? [value] : stringToPath(toString(value)); + } + + /** + * A `baseRest` alias which can be replaced with `identity` by module + * replacement plugins. + * + * @private + * @type {Function} + * @param {Function} func The function to apply a rest parameter to. + * @returns {Function} Returns the new function. + */ + var castRest = baseRest; + + /** + * Casts `array` to a slice if it's needed. + * + * @private + * @param {Array} array The array to inspect. + * @param {number} start The start position. + * @param {number} [end=array.length] The end position. + * @returns {Array} Returns the cast slice. + */ + function castSlice(array, start, end) { + var length = array.length; + end = end === undefined ? length : end; + return (!start && end >= length) ? array : baseSlice(array, start, end); + } + + /** + * A simple wrapper around the global [`clearTimeout`](https://mdn.io/clearTimeout). + * + * @private + * @param {number|Object} id The timer id or timeout object of the timer to clear. + */ + var clearTimeout = ctxClearTimeout || function(id) { + return root.clearTimeout(id); + }; + + /** + * Creates a clone of `buffer`. + * + * @private + * @param {Buffer} buffer The buffer to clone. + * @param {boolean} [isDeep] Specify a deep clone. + * @returns {Buffer} Returns the cloned buffer. + */ + function cloneBuffer(buffer, isDeep) { + if (isDeep) { + return buffer.slice(); + } + var length = buffer.length, + result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length); + + buffer.copy(result); + return result; + } + + /** + * Creates a clone of `arrayBuffer`. + * + * @private + * @param {ArrayBuffer} arrayBuffer The array buffer to clone. + * @returns {ArrayBuffer} Returns the cloned array buffer. + */ + function cloneArrayBuffer(arrayBuffer) { + var result = new arrayBuffer.constructor(arrayBuffer.byteLength); + new Uint8Array(result).set(new Uint8Array(arrayBuffer)); + return result; + } + + /** + * Creates a clone of `dataView`. + * + * @private + * @param {Object} dataView The data view to clone. + * @param {boolean} [isDeep] Specify a deep clone. + * @returns {Object} Returns the cloned data view. + */ + function cloneDataView(dataView, isDeep) { + var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer; + return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength); + } + + /** + * Creates a clone of `regexp`. + * + * @private + * @param {Object} regexp The regexp to clone. + * @returns {Object} Returns the cloned regexp. + */ + function cloneRegExp(regexp) { + var result = new regexp.constructor(regexp.source, reFlags.exec(regexp)); + result.lastIndex = regexp.lastIndex; + return result; + } + + /** + * Creates a clone of the `symbol` object. + * + * @private + * @param {Object} symbol The symbol object to clone. + * @returns {Object} Returns the cloned symbol object. + */ + function cloneSymbol(symbol) { + return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {}; + } + + /** + * Creates a clone of `typedArray`. + * + * @private + * @param {Object} typedArray The typed array to clone. + * @param {boolean} [isDeep] Specify a deep clone. + * @returns {Object} Returns the cloned typed array. + */ + function cloneTypedArray(typedArray, isDeep) { + var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer; + return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length); + } + + /** + * Compares values to sort them in ascending order. + * + * @private + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {number} Returns the sort order indicator for `value`. + */ + function compareAscending(value, other) { + if (value !== other) { + var valIsDefined = value !== undefined, + valIsNull = value === null, + valIsReflexive = value === value, + valIsSymbol = isSymbol(value); + + var othIsDefined = other !== undefined, + othIsNull = other === null, + othIsReflexive = other === other, + othIsSymbol = isSymbol(other); + + if ((!othIsNull && !othIsSymbol && !valIsSymbol && value > other) || + (valIsSymbol && othIsDefined && othIsReflexive && !othIsNull && !othIsSymbol) || + (valIsNull && othIsDefined && othIsReflexive) || + (!valIsDefined && othIsReflexive) || + !valIsReflexive) { + return 1; + } + if ((!valIsNull && !valIsSymbol && !othIsSymbol && value < other) || + (othIsSymbol && valIsDefined && valIsReflexive && !valIsNull && !valIsSymbol) || + (othIsNull && valIsDefined && valIsReflexive) || + (!othIsDefined && valIsReflexive) || + !othIsReflexive) { + return -1; + } + } + return 0; + } + + /** + * Used by `_.orderBy` to compare multiple properties of a value to another + * and stable sort them. + * + * If `orders` is unspecified, all values are sorted in ascending order. Otherwise, + * specify an order of "desc" for descending or "asc" for ascending sort order + * of corresponding values. + * + * @private + * @param {Object} object The object to compare. + * @param {Object} other The other object to compare. + * @param {boolean[]|string[]} orders The order to sort by for each property. + * @returns {number} Returns the sort order indicator for `object`. + */ + function compareMultiple(object, other, orders) { + var index = -1, + objCriteria = object.criteria, + othCriteria = other.criteria, + length = objCriteria.length, + ordersLength = orders.length; + + while (++index < length) { + var result = compareAscending(objCriteria[index], othCriteria[index]); + if (result) { + if (index >= ordersLength) { + return result; + } + var order = orders[index]; + return result * (order == 'desc' ? -1 : 1); + } + } + // Fixes an `Array#sort` bug in the JS engine embedded in Adobe applications + // that causes it, under certain circumstances, to provide the same value for + // `object` and `other`. See https://github.com/jashkenas/underscore/pull/1247 + // for more details. + // + // This also ensures a stable sort in V8 and other engines. + // See https://bugs.chromium.org/p/v8/issues/detail?id=90 for more details. + return object.index - other.index; + } + + /** + * Creates an array that is the composition of partially applied arguments, + * placeholders, and provided arguments into a single array of arguments. + * + * @private + * @param {Array} args The provided arguments. + * @param {Array} partials The arguments to prepend to those provided. + * @param {Array} holders The `partials` placeholder indexes. + * @params {boolean} [isCurried] Specify composing for a curried function. + * @returns {Array} Returns the new array of composed arguments. + */ + function composeArgs(args, partials, holders, isCurried) { + var argsIndex = -1, + argsLength = args.length, + holdersLength = holders.length, + leftIndex = -1, + leftLength = partials.length, + rangeLength = nativeMax(argsLength - holdersLength, 0), + result = Array(leftLength + rangeLength), + isUncurried = !isCurried; + + while (++leftIndex < leftLength) { + result[leftIndex] = partials[leftIndex]; + } + while (++argsIndex < holdersLength) { + if (isUncurried || argsIndex < argsLength) { + result[holders[argsIndex]] = args[argsIndex]; + } + } + while (rangeLength--) { + result[leftIndex++] = args[argsIndex++]; + } + return result; + } + + /** + * This function is like `composeArgs` except that the arguments composition + * is tailored for `_.partialRight`. + * + * @private + * @param {Array} args The provided arguments. + * @param {Array} partials The arguments to append to those provided. + * @param {Array} holders The `partials` placeholder indexes. + * @params {boolean} [isCurried] Specify composing for a curried function. + * @returns {Array} Returns the new array of composed arguments. + */ + function composeArgsRight(args, partials, holders, isCurried) { + var argsIndex = -1, + argsLength = args.length, + holdersIndex = -1, + holdersLength = holders.length, + rightIndex = -1, + rightLength = partials.length, + rangeLength = nativeMax(argsLength - holdersLength, 0), + result = Array(rangeLength + rightLength), + isUncurried = !isCurried; + + while (++argsIndex < rangeLength) { + result[argsIndex] = args[argsIndex]; + } + var offset = argsIndex; + while (++rightIndex < rightLength) { + result[offset + rightIndex] = partials[rightIndex]; + } + while (++holdersIndex < holdersLength) { + if (isUncurried || argsIndex < argsLength) { + result[offset + holders[holdersIndex]] = args[argsIndex++]; + } + } + return result; + } + + /** + * Copies the values of `source` to `array`. + * + * @private + * @param {Array} source The array to copy values from. + * @param {Array} [array=[]] The array to copy values to. + * @returns {Array} Returns `array`. + */ + function copyArray(source, array) { + var index = -1, + length = source.length; + + array || (array = Array(length)); + while (++index < length) { + array[index] = source[index]; + } + return array; + } + + /** + * Copies properties of `source` to `object`. + * + * @private + * @param {Object} source The object to copy properties from. + * @param {Array} props The property identifiers to copy. + * @param {Object} [object={}] The object to copy properties to. + * @param {Function} [customizer] The function to customize copied values. + * @returns {Object} Returns `object`. + */ + function copyObject(source, props, object, customizer) { + var isNew = !object; + object || (object = {}); + + var index = -1, + length = props.length; + + while (++index < length) { + var key = props[index]; + + var newValue = customizer + ? customizer(object[key], source[key], key, object, source) + : undefined; + + if (newValue === undefined) { + newValue = source[key]; + } + if (isNew) { + baseAssignValue(object, key, newValue); + } else { + assignValue(object, key, newValue); + } + } + return object; + } + + /** + * Copies own symbols of `source` to `object`. + * + * @private + * @param {Object} source The object to copy symbols from. + * @param {Object} [object={}] The object to copy symbols to. + * @returns {Object} Returns `object`. + */ + function copySymbols(source, object) { + return copyObject(source, getSymbols(source), object); + } + + /** + * Copies own and inherited symbols of `source` to `object`. + * + * @private + * @param {Object} source The object to copy symbols from. + * @param {Object} [object={}] The object to copy symbols to. + * @returns {Object} Returns `object`. + */ + function copySymbolsIn(source, object) { + return copyObject(source, getSymbolsIn(source), object); + } + + /** + * Creates a function like `_.groupBy`. + * + * @private + * @param {Function} setter The function to set accumulator values. + * @param {Function} [initializer] The accumulator object initializer. + * @returns {Function} Returns the new aggregator function. + */ + function createAggregator(setter, initializer) { + return function(collection, iteratee) { + var func = isArray(collection) ? arrayAggregator : baseAggregator, + accumulator = initializer ? initializer() : {}; + + return func(collection, setter, getIteratee(iteratee, 2), accumulator); + }; + } + + /** + * Creates a function like `_.assign`. + * + * @private + * @param {Function} assigner The function to assign values. + * @returns {Function} Returns the new assigner function. + */ + function createAssigner(assigner) { + return baseRest(function(object, sources) { + var index = -1, + length = sources.length, + customizer = length > 1 ? sources[length - 1] : undefined, + guard = length > 2 ? sources[2] : undefined; + + customizer = (assigner.length > 3 && typeof customizer == 'function') + ? (length--, customizer) + : undefined; + + if (guard && isIterateeCall(sources[0], sources[1], guard)) { + customizer = length < 3 ? undefined : customizer; + length = 1; + } + object = Object(object); + while (++index < length) { + var source = sources[index]; + if (source) { + assigner(object, source, index, customizer); + } + } + return object; + }); + } + + /** + * Creates a `baseEach` or `baseEachRight` function. + * + * @private + * @param {Function} eachFunc The function to iterate over a collection. + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {Function} Returns the new base function. + */ + function createBaseEach(eachFunc, fromRight) { + return function(collection, iteratee) { + if (collection == null) { + return collection; + } + if (!isArrayLike(collection)) { + return eachFunc(collection, iteratee); + } + var length = collection.length, + index = fromRight ? length : -1, + iterable = Object(collection); + + while ((fromRight ? index-- : ++index < length)) { + if (iteratee(iterable[index], index, iterable) === false) { + break; + } + } + return collection; + }; + } + + /** + * Creates a base function for methods like `_.forIn` and `_.forOwn`. + * + * @private + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {Function} Returns the new base function. + */ + function createBaseFor(fromRight) { + return function(object, iteratee, keysFunc) { + var index = -1, + iterable = Object(object), + props = keysFunc(object), + length = props.length; + + while (length--) { + var key = props[fromRight ? length : ++index]; + if (iteratee(iterable[key], key, iterable) === false) { + break; + } + } + return object; + }; + } + + /** + * Creates a function that wraps `func` to invoke it with the optional `this` + * binding of `thisArg`. + * + * @private + * @param {Function} func The function to wrap. + * @param {number} bitmask The bitmask flags. See `createWrap` for more details. + * @param {*} [thisArg] The `this` binding of `func`. + * @returns {Function} Returns the new wrapped function. + */ + function createBind(func, bitmask, thisArg) { + var isBind = bitmask & WRAP_BIND_FLAG, + Ctor = createCtor(func); + + function wrapper() { + var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func; + return fn.apply(isBind ? thisArg : this, arguments); + } + return wrapper; + } + + /** + * Creates a function like `_.lowerFirst`. + * + * @private + * @param {string} methodName The name of the `String` case method to use. + * @returns {Function} Returns the new case function. + */ + function createCaseFirst(methodName) { + return function(string) { + string = toString(string); + + var strSymbols = hasUnicode(string) + ? stringToArray(string) + : undefined; + + var chr = strSymbols + ? strSymbols[0] + : string.charAt(0); + + var trailing = strSymbols + ? castSlice(strSymbols, 1).join('') + : string.slice(1); + + return chr[methodName]() + trailing; + }; + } + + /** + * Creates a function like `_.camelCase`. + * + * @private + * @param {Function} callback The function to combine each word. + * @returns {Function} Returns the new compounder function. + */ + function createCompounder(callback) { + return function(string) { + return arrayReduce(words(deburr(string).replace(reApos, '')), callback, ''); + }; + } + + /** + * Creates a function that produces an instance of `Ctor` regardless of + * whether it was invoked as part of a `new` expression or by `call` or `apply`. + * + * @private + * @param {Function} Ctor The constructor to wrap. + * @returns {Function} Returns the new wrapped function. + */ + function createCtor(Ctor) { + return function() { + // Use a `switch` statement to work with class constructors. See + // http://ecma-international.org/ecma-262/7.0/#sec-ecmascript-function-objects-call-thisargument-argumentslist + // for more details. + var args = arguments; + switch (args.length) { + case 0: return new Ctor; + case 1: return new Ctor(args[0]); + case 2: return new Ctor(args[0], args[1]); + case 3: return new Ctor(args[0], args[1], args[2]); + case 4: return new Ctor(args[0], args[1], args[2], args[3]); + case 5: return new Ctor(args[0], args[1], args[2], args[3], args[4]); + case 6: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]); + case 7: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]); + } + var thisBinding = baseCreate(Ctor.prototype), + result = Ctor.apply(thisBinding, args); + + // Mimic the constructor's `return` behavior. + // See https://es5.github.io/#x13.2.2 for more details. + return isObject(result) ? result : thisBinding; + }; + } + + /** + * Creates a function that wraps `func` to enable currying. + * + * @private + * @param {Function} func The function to wrap. + * @param {number} bitmask The bitmask flags. See `createWrap` for more details. + * @param {number} arity The arity of `func`. + * @returns {Function} Returns the new wrapped function. + */ + function createCurry(func, bitmask, arity) { + var Ctor = createCtor(func); + + function wrapper() { + var length = arguments.length, + args = Array(length), + index = length, + placeholder = getHolder(wrapper); + + while (index--) { + args[index] = arguments[index]; + } + var holders = (length < 3 && args[0] !== placeholder && args[length - 1] !== placeholder) + ? [] + : replaceHolders(args, placeholder); + + length -= holders.length; + if (length < arity) { + return createRecurry( + func, bitmask, createHybrid, wrapper.placeholder, undefined, + args, holders, undefined, undefined, arity - length); + } + var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func; + return apply(fn, this, args); + } + return wrapper; + } + + /** + * Creates a `_.find` or `_.findLast` function. + * + * @private + * @param {Function} findIndexFunc The function to find the collection index. + * @returns {Function} Returns the new find function. + */ + function createFind(findIndexFunc) { + return function(collection, predicate, fromIndex) { + var iterable = Object(collection); + if (!isArrayLike(collection)) { + var iteratee = getIteratee(predicate, 3); + collection = keys(collection); + predicate = function(key) { return iteratee(iterable[key], key, iterable); }; + } + var index = findIndexFunc(collection, predicate, fromIndex); + return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined; + }; + } + + /** + * Creates a `_.flow` or `_.flowRight` function. + * + * @private + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {Function} Returns the new flow function. + */ + function createFlow(fromRight) { + return flatRest(function(funcs) { + var length = funcs.length, + index = length, + prereq = LodashWrapper.prototype.thru; + + if (fromRight) { + funcs.reverse(); + } + while (index--) { + var func = funcs[index]; + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + if (prereq && !wrapper && getFuncName(func) == 'wrapper') { + var wrapper = new LodashWrapper([], true); + } + } + index = wrapper ? index : length; + while (++index < length) { + func = funcs[index]; + + var funcName = getFuncName(func), + data = funcName == 'wrapper' ? getData(func) : undefined; + + if (data && isLaziable(data[0]) && + data[1] == (WRAP_ARY_FLAG | WRAP_CURRY_FLAG | WRAP_PARTIAL_FLAG | WRAP_REARG_FLAG) && + !data[4].length && data[9] == 1 + ) { + wrapper = wrapper[getFuncName(data[0])].apply(wrapper, data[3]); + } else { + wrapper = (func.length == 1 && isLaziable(func)) + ? wrapper[funcName]() + : wrapper.thru(func); + } + } + return function() { + var args = arguments, + value = args[0]; + + if (wrapper && args.length == 1 && isArray(value)) { + return wrapper.plant(value).value(); + } + var index = 0, + result = length ? funcs[index].apply(this, args) : value; + + while (++index < length) { + result = funcs[index].call(this, result); + } + return result; + }; + }); + } + + /** + * Creates a function that wraps `func` to invoke it with optional `this` + * binding of `thisArg`, partial application, and currying. + * + * @private + * @param {Function|string} func The function or method name to wrap. + * @param {number} bitmask The bitmask flags. See `createWrap` for more details. + * @param {*} [thisArg] The `this` binding of `func`. + * @param {Array} [partials] The arguments to prepend to those provided to + * the new function. + * @param {Array} [holders] The `partials` placeholder indexes. + * @param {Array} [partialsRight] The arguments to append to those provided + * to the new function. + * @param {Array} [holdersRight] The `partialsRight` placeholder indexes. + * @param {Array} [argPos] The argument positions of the new function. + * @param {number} [ary] The arity cap of `func`. + * @param {number} [arity] The arity of `func`. + * @returns {Function} Returns the new wrapped function. + */ + function createHybrid(func, bitmask, thisArg, partials, holders, partialsRight, holdersRight, argPos, ary, arity) { + var isAry = bitmask & WRAP_ARY_FLAG, + isBind = bitmask & WRAP_BIND_FLAG, + isBindKey = bitmask & WRAP_BIND_KEY_FLAG, + isCurried = bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG), + isFlip = bitmask & WRAP_FLIP_FLAG, + Ctor = isBindKey ? undefined : createCtor(func); + + function wrapper() { + var length = arguments.length, + args = Array(length), + index = length; + + while (index--) { + args[index] = arguments[index]; + } + if (isCurried) { + var placeholder = getHolder(wrapper), + holdersCount = countHolders(args, placeholder); + } + if (partials) { + args = composeArgs(args, partials, holders, isCurried); + } + if (partialsRight) { + args = composeArgsRight(args, partialsRight, holdersRight, isCurried); + } + length -= holdersCount; + if (isCurried && length < arity) { + var newHolders = replaceHolders(args, placeholder); + return createRecurry( + func, bitmask, createHybrid, wrapper.placeholder, thisArg, + args, newHolders, argPos, ary, arity - length + ); + } + var thisBinding = isBind ? thisArg : this, + fn = isBindKey ? thisBinding[func] : func; + + length = args.length; + if (argPos) { + args = reorder(args, argPos); + } else if (isFlip && length > 1) { + args.reverse(); + } + if (isAry && ary < length) { + args.length = ary; + } + if (this && this !== root && this instanceof wrapper) { + fn = Ctor || createCtor(fn); + } + return fn.apply(thisBinding, args); + } + return wrapper; + } + + /** + * Creates a function like `_.invertBy`. + * + * @private + * @param {Function} setter The function to set accumulator values. + * @param {Function} toIteratee The function to resolve iteratees. + * @returns {Function} Returns the new inverter function. + */ + function createInverter(setter, toIteratee) { + return function(object, iteratee) { + return baseInverter(object, setter, toIteratee(iteratee), {}); + }; + } + + /** + * Creates a function that performs a mathematical operation on two values. + * + * @private + * @param {Function} operator The function to perform the operation. + * @param {number} [defaultValue] The value used for `undefined` arguments. + * @returns {Function} Returns the new mathematical operation function. + */ + function createMathOperation(operator, defaultValue) { + return function(value, other) { + var result; + if (value === undefined && other === undefined) { + return defaultValue; + } + if (value !== undefined) { + result = value; + } + if (other !== undefined) { + if (result === undefined) { + return other; + } + if (typeof value == 'string' || typeof other == 'string') { + value = baseToString(value); + other = baseToString(other); + } else { + value = baseToNumber(value); + other = baseToNumber(other); + } + result = operator(value, other); + } + return result; + }; + } + + /** + * Creates a function like `_.over`. + * + * @private + * @param {Function} arrayFunc The function to iterate over iteratees. + * @returns {Function} Returns the new over function. + */ + function createOver(arrayFunc) { + return flatRest(function(iteratees) { + iteratees = arrayMap(iteratees, baseUnary(getIteratee())); + return baseRest(function(args) { + var thisArg = this; + return arrayFunc(iteratees, function(iteratee) { + return apply(iteratee, thisArg, args); + }); + }); + }); + } + + /** + * Creates the padding for `string` based on `length`. The `chars` string + * is truncated if the number of characters exceeds `length`. + * + * @private + * @param {number} length The padding length. + * @param {string} [chars=' '] The string used as padding. + * @returns {string} Returns the padding for `string`. + */ + function createPadding(length, chars) { + chars = chars === undefined ? ' ' : baseToString(chars); + + var charsLength = chars.length; + if (charsLength < 2) { + return charsLength ? baseRepeat(chars, length) : chars; + } + var result = baseRepeat(chars, nativeCeil(length / stringSize(chars))); + return hasUnicode(chars) + ? castSlice(stringToArray(result), 0, length).join('') + : result.slice(0, length); + } + + /** + * Creates a function that wraps `func` to invoke it with the `this` binding + * of `thisArg` and `partials` prepended to the arguments it receives. + * + * @private + * @param {Function} func The function to wrap. + * @param {number} bitmask The bitmask flags. See `createWrap` for more details. + * @param {*} thisArg The `this` binding of `func`. + * @param {Array} partials The arguments to prepend to those provided to + * the new function. + * @returns {Function} Returns the new wrapped function. + */ + function createPartial(func, bitmask, thisArg, partials) { + var isBind = bitmask & WRAP_BIND_FLAG, + Ctor = createCtor(func); + + function wrapper() { + var argsIndex = -1, + argsLength = arguments.length, + leftIndex = -1, + leftLength = partials.length, + args = Array(leftLength + argsLength), + fn = (this && this !== root && this instanceof wrapper) ? Ctor : func; + + while (++leftIndex < leftLength) { + args[leftIndex] = partials[leftIndex]; + } + while (argsLength--) { + args[leftIndex++] = arguments[++argsIndex]; + } + return apply(fn, isBind ? thisArg : this, args); + } + return wrapper; + } + + /** + * Creates a `_.range` or `_.rangeRight` function. + * + * @private + * @param {boolean} [fromRight] Specify iterating from right to left. + * @returns {Function} Returns the new range function. + */ + function createRange(fromRight) { + return function(start, end, step) { + if (step && typeof step != 'number' && isIterateeCall(start, end, step)) { + end = step = undefined; + } + // Ensure the sign of `-0` is preserved. + start = toFinite(start); + if (end === undefined) { + end = start; + start = 0; + } else { + end = toFinite(end); + } + step = step === undefined ? (start < end ? 1 : -1) : toFinite(step); + return baseRange(start, end, step, fromRight); + }; + } + + /** + * Creates a function that performs a relational operation on two values. + * + * @private + * @param {Function} operator The function to perform the operation. + * @returns {Function} Returns the new relational operation function. + */ + function createRelationalOperation(operator) { + return function(value, other) { + if (!(typeof value == 'string' && typeof other == 'string')) { + value = toNumber(value); + other = toNumber(other); + } + return operator(value, other); + }; + } + + /** + * Creates a function that wraps `func` to continue currying. + * + * @private + * @param {Function} func The function to wrap. + * @param {number} bitmask The bitmask flags. See `createWrap` for more details. + * @param {Function} wrapFunc The function to create the `func` wrapper. + * @param {*} placeholder The placeholder value. + * @param {*} [thisArg] The `this` binding of `func`. + * @param {Array} [partials] The arguments to prepend to those provided to + * the new function. + * @param {Array} [holders] The `partials` placeholder indexes. + * @param {Array} [argPos] The argument positions of the new function. + * @param {number} [ary] The arity cap of `func`. + * @param {number} [arity] The arity of `func`. + * @returns {Function} Returns the new wrapped function. + */ + function createRecurry(func, bitmask, wrapFunc, placeholder, thisArg, partials, holders, argPos, ary, arity) { + var isCurry = bitmask & WRAP_CURRY_FLAG, + newHolders = isCurry ? holders : undefined, + newHoldersRight = isCurry ? undefined : holders, + newPartials = isCurry ? partials : undefined, + newPartialsRight = isCurry ? undefined : partials; + + bitmask |= (isCurry ? WRAP_PARTIAL_FLAG : WRAP_PARTIAL_RIGHT_FLAG); + bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG); + + if (!(bitmask & WRAP_CURRY_BOUND_FLAG)) { + bitmask &= ~(WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG); + } + var newData = [ + func, bitmask, thisArg, newPartials, newHolders, newPartialsRight, + newHoldersRight, argPos, ary, arity + ]; + + var result = wrapFunc.apply(undefined, newData); + if (isLaziable(func)) { + setData(result, newData); + } + result.placeholder = placeholder; + return setWrapToString(result, func, bitmask); + } + + /** + * Creates a function like `_.round`. + * + * @private + * @param {string} methodName The name of the `Math` method to use when rounding. + * @returns {Function} Returns the new round function. + */ + function createRound(methodName) { + var func = Math[methodName]; + return function(number, precision) { + number = toNumber(number); + precision = precision == null ? 0 : nativeMin(toInteger(precision), 292); + if (precision) { + // Shift with exponential notation to avoid floating-point issues. + // See [MDN](https://mdn.io/round#Examples) for more details. + var pair = (toString(number) + 'e').split('e'), + value = func(pair[0] + 'e' + (+pair[1] + precision)); + + pair = (toString(value) + 'e').split('e'); + return +(pair[0] + 'e' + (+pair[1] - precision)); + } + return func(number); + }; + } + + /** + * Creates a set object of `values`. + * + * @private + * @param {Array} values The values to add to the set. + * @returns {Object} Returns the new set. + */ + var createSet = !(Set && (1 / setToArray(new Set([,-0]))[1]) == INFINITY) ? noop : function(values) { + return new Set(values); + }; + + /** + * Creates a `_.toPairs` or `_.toPairsIn` function. + * + * @private + * @param {Function} keysFunc The function to get the keys of a given object. + * @returns {Function} Returns the new pairs function. + */ + function createToPairs(keysFunc) { + return function(object) { + var tag = getTag(object); + if (tag == mapTag) { + return mapToArray(object); + } + if (tag == setTag) { + return setToPairs(object); + } + return baseToPairs(object, keysFunc(object)); + }; + } + + /** + * Creates a function that either curries or invokes `func` with optional + * `this` binding and partially applied arguments. + * + * @private + * @param {Function|string} func The function or method name to wrap. + * @param {number} bitmask The bitmask flags. + * 1 - `_.bind` + * 2 - `_.bindKey` + * 4 - `_.curry` or `_.curryRight` of a bound function + * 8 - `_.curry` + * 16 - `_.curryRight` + * 32 - `_.partial` + * 64 - `_.partialRight` + * 128 - `_.rearg` + * 256 - `_.ary` + * 512 - `_.flip` + * @param {*} [thisArg] The `this` binding of `func`. + * @param {Array} [partials] The arguments to be partially applied. + * @param {Array} [holders] The `partials` placeholder indexes. + * @param {Array} [argPos] The argument positions of the new function. + * @param {number} [ary] The arity cap of `func`. + * @param {number} [arity] The arity of `func`. + * @returns {Function} Returns the new wrapped function. + */ + function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary, arity) { + var isBindKey = bitmask & WRAP_BIND_KEY_FLAG; + if (!isBindKey && typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + var length = partials ? partials.length : 0; + if (!length) { + bitmask &= ~(WRAP_PARTIAL_FLAG | WRAP_PARTIAL_RIGHT_FLAG); + partials = holders = undefined; + } + ary = ary === undefined ? ary : nativeMax(toInteger(ary), 0); + arity = arity === undefined ? arity : toInteger(arity); + length -= holders ? holders.length : 0; + + if (bitmask & WRAP_PARTIAL_RIGHT_FLAG) { + var partialsRight = partials, + holdersRight = holders; + + partials = holders = undefined; + } + var data = isBindKey ? undefined : getData(func); + + var newData = [ + func, bitmask, thisArg, partials, holders, partialsRight, holdersRight, + argPos, ary, arity + ]; + + if (data) { + mergeData(newData, data); + } + func = newData[0]; + bitmask = newData[1]; + thisArg = newData[2]; + partials = newData[3]; + holders = newData[4]; + arity = newData[9] = newData[9] === undefined + ? (isBindKey ? 0 : func.length) + : nativeMax(newData[9] - length, 0); + + if (!arity && bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG)) { + bitmask &= ~(WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG); + } + if (!bitmask || bitmask == WRAP_BIND_FLAG) { + var result = createBind(func, bitmask, thisArg); + } else if (bitmask == WRAP_CURRY_FLAG || bitmask == WRAP_CURRY_RIGHT_FLAG) { + result = createCurry(func, bitmask, arity); + } else if ((bitmask == WRAP_PARTIAL_FLAG || bitmask == (WRAP_BIND_FLAG | WRAP_PARTIAL_FLAG)) && !holders.length) { + result = createPartial(func, bitmask, thisArg, partials); + } else { + result = createHybrid.apply(undefined, newData); + } + var setter = data ? baseSetData : setData; + return setWrapToString(setter(result, newData), func, bitmask); + } + + /** + * Used by `_.defaults` to customize its `_.assignIn` use to assign properties + * of source objects to the destination object for all destination properties + * that resolve to `undefined`. + * + * @private + * @param {*} objValue The destination value. + * @param {*} srcValue The source value. + * @param {string} key The key of the property to assign. + * @param {Object} object The parent object of `objValue`. + * @returns {*} Returns the value to assign. + */ + function customDefaultsAssignIn(objValue, srcValue, key, object) { + if (objValue === undefined || + (eq(objValue, objectProto[key]) && !hasOwnProperty.call(object, key))) { + return srcValue; + } + return objValue; + } + + /** + * Used by `_.defaultsDeep` to customize its `_.merge` use to merge source + * objects into destination objects that are passed thru. + * + * @private + * @param {*} objValue The destination value. + * @param {*} srcValue The source value. + * @param {string} key The key of the property to merge. + * @param {Object} object The parent object of `objValue`. + * @param {Object} source The parent object of `srcValue`. + * @param {Object} [stack] Tracks traversed source values and their merged + * counterparts. + * @returns {*} Returns the value to assign. + */ + function customDefaultsMerge(objValue, srcValue, key, object, source, stack) { + if (isObject(objValue) && isObject(srcValue)) { + // Recursively merge objects and arrays (susceptible to call stack limits). + stack.set(srcValue, objValue); + baseMerge(objValue, srcValue, undefined, customDefaultsMerge, stack); + stack['delete'](srcValue); + } + return objValue; + } + + /** + * Used by `_.omit` to customize its `_.cloneDeep` use to only clone plain + * objects. + * + * @private + * @param {*} value The value to inspect. + * @param {string} key The key of the property to inspect. + * @returns {*} Returns the uncloned value or `undefined` to defer cloning to `_.cloneDeep`. + */ + function customOmitClone(value) { + return isPlainObject(value) ? undefined : value; + } + + /** + * A specialized version of `baseIsEqualDeep` for arrays with support for + * partial deep comparisons. + * + * @private + * @param {Array} array The array to compare. + * @param {Array} other The other array to compare. + * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details. + * @param {Function} customizer The function to customize comparisons. + * @param {Function} equalFunc The function to determine equivalents of values. + * @param {Object} stack Tracks traversed `array` and `other` objects. + * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`. + */ + function equalArrays(array, other, bitmask, customizer, equalFunc, stack) { + var isPartial = bitmask & COMPARE_PARTIAL_FLAG, + arrLength = array.length, + othLength = other.length; + + if (arrLength != othLength && !(isPartial && othLength > arrLength)) { + return false; + } + // Assume cyclic values are equal. + var stacked = stack.get(array); + if (stacked && stack.get(other)) { + return stacked == other; + } + var index = -1, + result = true, + seen = (bitmask & COMPARE_UNORDERED_FLAG) ? new SetCache : undefined; + + stack.set(array, other); + stack.set(other, array); + + // Ignore non-index properties. + while (++index < arrLength) { + var arrValue = array[index], + othValue = other[index]; + + if (customizer) { + var compared = isPartial + ? customizer(othValue, arrValue, index, other, array, stack) + : customizer(arrValue, othValue, index, array, other, stack); + } + if (compared !== undefined) { + if (compared) { + continue; + } + result = false; + break; + } + // Recursively compare arrays (susceptible to call stack limits). + if (seen) { + if (!arraySome(other, function(othValue, othIndex) { + if (!cacheHas(seen, othIndex) && + (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) { + return seen.push(othIndex); + } + })) { + result = false; + break; + } + } else if (!( + arrValue === othValue || + equalFunc(arrValue, othValue, bitmask, customizer, stack) + )) { + result = false; + break; + } + } + stack['delete'](array); + stack['delete'](other); + return result; + } + + /** + * A specialized version of `baseIsEqualDeep` for comparing objects of + * the same `toStringTag`. + * + * **Note:** This function only supports comparing values with tags of + * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`. + * + * @private + * @param {Object} object The object to compare. + * @param {Object} other The other object to compare. + * @param {string} tag The `toStringTag` of the objects to compare. + * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details. + * @param {Function} customizer The function to customize comparisons. + * @param {Function} equalFunc The function to determine equivalents of values. + * @param {Object} stack Tracks traversed `object` and `other` objects. + * @returns {boolean} Returns `true` if the objects are equivalent, else `false`. + */ + function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) { + switch (tag) { + case dataViewTag: + if ((object.byteLength != other.byteLength) || + (object.byteOffset != other.byteOffset)) { + return false; + } + object = object.buffer; + other = other.buffer; + + case arrayBufferTag: + if ((object.byteLength != other.byteLength) || + !equalFunc(new Uint8Array(object), new Uint8Array(other))) { + return false; + } + return true; + + case boolTag: + case dateTag: + case numberTag: + // Coerce booleans to `1` or `0` and dates to milliseconds. + // Invalid dates are coerced to `NaN`. + return eq(+object, +other); + + case errorTag: + return object.name == other.name && object.message == other.message; + + case regexpTag: + case stringTag: + // Coerce regexes to strings and treat strings, primitives and objects, + // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring + // for more details. + return object == (other + ''); + + case mapTag: + var convert = mapToArray; + + case setTag: + var isPartial = bitmask & COMPARE_PARTIAL_FLAG; + convert || (convert = setToArray); + + if (object.size != other.size && !isPartial) { + return false; + } + // Assume cyclic values are equal. + var stacked = stack.get(object); + if (stacked) { + return stacked == other; + } + bitmask |= COMPARE_UNORDERED_FLAG; + + // Recursively compare objects (susceptible to call stack limits). + stack.set(object, other); + var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack); + stack['delete'](object); + return result; + + case symbolTag: + if (symbolValueOf) { + return symbolValueOf.call(object) == symbolValueOf.call(other); + } + } + return false; + } + + /** + * A specialized version of `baseIsEqualDeep` for objects with support for + * partial deep comparisons. + * + * @private + * @param {Object} object The object to compare. + * @param {Object} other The other object to compare. + * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details. + * @param {Function} customizer The function to customize comparisons. + * @param {Function} equalFunc The function to determine equivalents of values. + * @param {Object} stack Tracks traversed `object` and `other` objects. + * @returns {boolean} Returns `true` if the objects are equivalent, else `false`. + */ + function equalObjects(object, other, bitmask, customizer, equalFunc, stack) { + var isPartial = bitmask & COMPARE_PARTIAL_FLAG, + objProps = getAllKeys(object), + objLength = objProps.length, + othProps = getAllKeys(other), + othLength = othProps.length; + + if (objLength != othLength && !isPartial) { + return false; + } + var index = objLength; + while (index--) { + var key = objProps[index]; + if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) { + return false; + } + } + // Assume cyclic values are equal. + var stacked = stack.get(object); + if (stacked && stack.get(other)) { + return stacked == other; + } + var result = true; + stack.set(object, other); + stack.set(other, object); + + var skipCtor = isPartial; + while (++index < objLength) { + key = objProps[index]; + var objValue = object[key], + othValue = other[key]; + + if (customizer) { + var compared = isPartial + ? customizer(othValue, objValue, key, other, object, stack) + : customizer(objValue, othValue, key, object, other, stack); + } + // Recursively compare objects (susceptible to call stack limits). + if (!(compared === undefined + ? (objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack)) + : compared + )) { + result = false; + break; + } + skipCtor || (skipCtor = key == 'constructor'); + } + if (result && !skipCtor) { + var objCtor = object.constructor, + othCtor = other.constructor; + + // Non `Object` object instances with different constructors are not equal. + if (objCtor != othCtor && + ('constructor' in object && 'constructor' in other) && + !(typeof objCtor == 'function' && objCtor instanceof objCtor && + typeof othCtor == 'function' && othCtor instanceof othCtor)) { + result = false; + } + } + stack['delete'](object); + stack['delete'](other); + return result; + } + + /** + * A specialized version of `baseRest` which flattens the rest array. + * + * @private + * @param {Function} func The function to apply a rest parameter to. + * @returns {Function} Returns the new function. + */ + function flatRest(func) { + return setToString(overRest(func, undefined, flatten), func + ''); + } + + /** + * Creates an array of own enumerable property names and symbols of `object`. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names and symbols. + */ + function getAllKeys(object) { + return baseGetAllKeys(object, keys, getSymbols); + } + + /** + * Creates an array of own and inherited enumerable property names and + * symbols of `object`. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names and symbols. + */ + function getAllKeysIn(object) { + return baseGetAllKeys(object, keysIn, getSymbolsIn); + } + + /** + * Gets metadata for `func`. + * + * @private + * @param {Function} func The function to query. + * @returns {*} Returns the metadata for `func`. + */ + var getData = !metaMap ? noop : function(func) { + return metaMap.get(func); + }; + + /** + * Gets the name of `func`. + * + * @private + * @param {Function} func The function to query. + * @returns {string} Returns the function name. + */ + function getFuncName(func) { + var result = (func.name + ''), + array = realNames[result], + length = hasOwnProperty.call(realNames, result) ? array.length : 0; + + while (length--) { + var data = array[length], + otherFunc = data.func; + if (otherFunc == null || otherFunc == func) { + return data.name; + } + } + return result; + } + + /** + * Gets the argument placeholder value for `func`. + * + * @private + * @param {Function} func The function to inspect. + * @returns {*} Returns the placeholder value. + */ + function getHolder(func) { + var object = hasOwnProperty.call(lodash, 'placeholder') ? lodash : func; + return object.placeholder; + } + + /** + * Gets the appropriate "iteratee" function. If `_.iteratee` is customized, + * this function returns the custom method, otherwise it returns `baseIteratee`. + * If arguments are provided, the chosen function is invoked with them and + * its result is returned. + * + * @private + * @param {*} [value] The value to convert to an iteratee. + * @param {number} [arity] The arity of the created iteratee. + * @returns {Function} Returns the chosen function or its result. + */ + function getIteratee() { + var result = lodash.iteratee || iteratee; + result = result === iteratee ? baseIteratee : result; + return arguments.length ? result(arguments[0], arguments[1]) : result; + } + + /** + * Gets the data for `map`. + * + * @private + * @param {Object} map The map to query. + * @param {string} key The reference key. + * @returns {*} Returns the map data. + */ + function getMapData(map, key) { + var data = map.__data__; + return isKeyable(key) + ? data[typeof key == 'string' ? 'string' : 'hash'] + : data.map; + } + + /** + * Gets the property names, values, and compare flags of `object`. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the match data of `object`. + */ + function getMatchData(object) { + var result = keys(object), + length = result.length; + + while (length--) { + var key = result[length], + value = object[key]; + + result[length] = [key, value, isStrictComparable(value)]; + } + return result; + } + + /** + * Gets the native function at `key` of `object`. + * + * @private + * @param {Object} object The object to query. + * @param {string} key The key of the method to get. + * @returns {*} Returns the function if it's native, else `undefined`. + */ + function getNative(object, key) { + var value = getValue(object, key); + return baseIsNative(value) ? value : undefined; + } + + /** + * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values. + * + * @private + * @param {*} value The value to query. + * @returns {string} Returns the raw `toStringTag`. + */ + function getRawTag(value) { + var isOwn = hasOwnProperty.call(value, symToStringTag), + tag = value[symToStringTag]; + + try { + value[symToStringTag] = undefined; + var unmasked = true; + } catch (e) {} + + var result = nativeObjectToString.call(value); + if (unmasked) { + if (isOwn) { + value[symToStringTag] = tag; + } else { + delete value[symToStringTag]; + } + } + return result; + } + + /** + * Creates an array of the own enumerable symbols of `object`. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of symbols. + */ + var getSymbols = !nativeGetSymbols ? stubArray : function(object) { + if (object == null) { + return []; + } + object = Object(object); + return arrayFilter(nativeGetSymbols(object), function(symbol) { + return propertyIsEnumerable.call(object, symbol); + }); + }; + + /** + * Creates an array of the own and inherited enumerable symbols of `object`. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of symbols. + */ + var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) { + var result = []; + while (object) { + arrayPush(result, getSymbols(object)); + object = getPrototype(object); + } + return result; + }; + + /** + * Gets the `toStringTag` of `value`. + * + * @private + * @param {*} value The value to query. + * @returns {string} Returns the `toStringTag`. + */ + var getTag = baseGetTag; + + // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6. + if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) || + (Map && getTag(new Map) != mapTag) || + (Promise && getTag(Promise.resolve()) != promiseTag) || + (Set && getTag(new Set) != setTag) || + (WeakMap && getTag(new WeakMap) != weakMapTag)) { + getTag = function(value) { + var result = baseGetTag(value), + Ctor = result == objectTag ? value.constructor : undefined, + ctorString = Ctor ? toSource(Ctor) : ''; + + if (ctorString) { + switch (ctorString) { + case dataViewCtorString: return dataViewTag; + case mapCtorString: return mapTag; + case promiseCtorString: return promiseTag; + case setCtorString: return setTag; + case weakMapCtorString: return weakMapTag; + } + } + return result; + }; + } + + /** + * Gets the view, applying any `transforms` to the `start` and `end` positions. + * + * @private + * @param {number} start The start of the view. + * @param {number} end The end of the view. + * @param {Array} transforms The transformations to apply to the view. + * @returns {Object} Returns an object containing the `start` and `end` + * positions of the view. + */ + function getView(start, end, transforms) { + var index = -1, + length = transforms.length; + + while (++index < length) { + var data = transforms[index], + size = data.size; + + switch (data.type) { + case 'drop': start += size; break; + case 'dropRight': end -= size; break; + case 'take': end = nativeMin(end, start + size); break; + case 'takeRight': start = nativeMax(start, end - size); break; + } + } + return { 'start': start, 'end': end }; + } + + /** + * Extracts wrapper details from the `source` body comment. + * + * @private + * @param {string} source The source to inspect. + * @returns {Array} Returns the wrapper details. + */ + function getWrapDetails(source) { + var match = source.match(reWrapDetails); + return match ? match[1].split(reSplitDetails) : []; + } + + /** + * Checks if `path` exists on `object`. + * + * @private + * @param {Object} object The object to query. + * @param {Array|string} path The path to check. + * @param {Function} hasFunc The function to check properties. + * @returns {boolean} Returns `true` if `path` exists, else `false`. + */ + function hasPath(object, path, hasFunc) { + path = castPath(path, object); + + var index = -1, + length = path.length, + result = false; + + while (++index < length) { + var key = toKey(path[index]); + if (!(result = object != null && hasFunc(object, key))) { + break; + } + object = object[key]; + } + if (result || ++index != length) { + return result; + } + length = object == null ? 0 : object.length; + return !!length && isLength(length) && isIndex(key, length) && + (isArray(object) || isArguments(object)); + } + + /** + * Initializes an array clone. + * + * @private + * @param {Array} array The array to clone. + * @returns {Array} Returns the initialized clone. + */ + function initCloneArray(array) { + var length = array.length, + result = new array.constructor(length); + + // Add properties assigned by `RegExp#exec`. + if (length && typeof array[0] == 'string' && hasOwnProperty.call(array, 'index')) { + result.index = array.index; + result.input = array.input; + } + return result; + } + + /** + * Initializes an object clone. + * + * @private + * @param {Object} object The object to clone. + * @returns {Object} Returns the initialized clone. + */ + function initCloneObject(object) { + return (typeof object.constructor == 'function' && !isPrototype(object)) + ? baseCreate(getPrototype(object)) + : {}; + } + + /** + * Initializes an object clone based on its `toStringTag`. + * + * **Note:** This function only supports cloning values with tags of + * `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`. + * + * @private + * @param {Object} object The object to clone. + * @param {string} tag The `toStringTag` of the object to clone. + * @param {boolean} [isDeep] Specify a deep clone. + * @returns {Object} Returns the initialized clone. + */ + function initCloneByTag(object, tag, isDeep) { + var Ctor = object.constructor; + switch (tag) { + case arrayBufferTag: + return cloneArrayBuffer(object); + + case boolTag: + case dateTag: + return new Ctor(+object); + + case dataViewTag: + return cloneDataView(object, isDeep); + + case float32Tag: case float64Tag: + case int8Tag: case int16Tag: case int32Tag: + case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag: + return cloneTypedArray(object, isDeep); + + case mapTag: + return new Ctor; + + case numberTag: + case stringTag: + return new Ctor(object); + + case regexpTag: + return cloneRegExp(object); + + case setTag: + return new Ctor; + + case symbolTag: + return cloneSymbol(object); + } + } + + /** + * Inserts wrapper `details` in a comment at the top of the `source` body. + * + * @private + * @param {string} source The source to modify. + * @returns {Array} details The details to insert. + * @returns {string} Returns the modified source. + */ + function insertWrapDetails(source, details) { + var length = details.length; + if (!length) { + return source; + } + var lastIndex = length - 1; + details[lastIndex] = (length > 1 ? '& ' : '') + details[lastIndex]; + details = details.join(length > 2 ? ', ' : ' '); + return source.replace(reWrapComment, '{\n/* [wrapped with ' + details + '] */\n'); + } + + /** + * Checks if `value` is a flattenable `arguments` object or array. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is flattenable, else `false`. + */ + function isFlattenable(value) { + return isArray(value) || isArguments(value) || + !!(spreadableSymbol && value && value[spreadableSymbol]); + } + + /** + * Checks if `value` is a valid array-like index. + * + * @private + * @param {*} value The value to check. + * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index. + * @returns {boolean} Returns `true` if `value` is a valid index, else `false`. + */ + function isIndex(value, length) { + var type = typeof value; + length = length == null ? MAX_SAFE_INTEGER : length; + + return !!length && + (type == 'number' || + (type != 'symbol' && reIsUint.test(value))) && + (value > -1 && value % 1 == 0 && value < length); + } + + /** + * Checks if the given arguments are from an iteratee call. + * + * @private + * @param {*} value The potential iteratee value argument. + * @param {*} index The potential iteratee index or key argument. + * @param {*} object The potential iteratee object argument. + * @returns {boolean} Returns `true` if the arguments are from an iteratee call, + * else `false`. + */ + function isIterateeCall(value, index, object) { + if (!isObject(object)) { + return false; + } + var type = typeof index; + if (type == 'number' + ? (isArrayLike(object) && isIndex(index, object.length)) + : (type == 'string' && index in object) + ) { + return eq(object[index], value); + } + return false; + } + + /** + * Checks if `value` is a property name and not a property path. + * + * @private + * @param {*} value The value to check. + * @param {Object} [object] The object to query keys on. + * @returns {boolean} Returns `true` if `value` is a property name, else `false`. + */ + function isKey(value, object) { + if (isArray(value)) { + return false; + } + var type = typeof value; + if (type == 'number' || type == 'symbol' || type == 'boolean' || + value == null || isSymbol(value)) { + return true; + } + return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || + (object != null && value in Object(object)); + } + + /** + * Checks if `value` is suitable for use as unique object key. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is suitable, else `false`. + */ + function isKeyable(value) { + var type = typeof value; + return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean') + ? (value !== '__proto__') + : (value === null); + } + + /** + * Checks if `func` has a lazy counterpart. + * + * @private + * @param {Function} func The function to check. + * @returns {boolean} Returns `true` if `func` has a lazy counterpart, + * else `false`. + */ + function isLaziable(func) { + var funcName = getFuncName(func), + other = lodash[funcName]; + + if (typeof other != 'function' || !(funcName in LazyWrapper.prototype)) { + return false; + } + if (func === other) { + return true; + } + var data = getData(other); + return !!data && func === data[0]; + } + + /** + * Checks if `func` has its source masked. + * + * @private + * @param {Function} func The function to check. + * @returns {boolean} Returns `true` if `func` is masked, else `false`. + */ + function isMasked(func) { + return !!maskSrcKey && (maskSrcKey in func); + } + + /** + * Checks if `func` is capable of being masked. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `func` is maskable, else `false`. + */ + var isMaskable = coreJsData ? isFunction : stubFalse; + + /** + * Checks if `value` is likely a prototype object. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a prototype, else `false`. + */ + function isPrototype(value) { + var Ctor = value && value.constructor, + proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto; + + return value === proto; + } + + /** + * Checks if `value` is suitable for strict equality comparisons, i.e. `===`. + * + * @private + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` if suitable for strict + * equality comparisons, else `false`. + */ + function isStrictComparable(value) { + return value === value && !isObject(value); + } + + /** + * A specialized version of `matchesProperty` for source values suitable + * for strict equality comparisons, i.e. `===`. + * + * @private + * @param {string} key The key of the property to get. + * @param {*} srcValue The value to match. + * @returns {Function} Returns the new spec function. + */ + function matchesStrictComparable(key, srcValue) { + return function(object) { + if (object == null) { + return false; + } + return object[key] === srcValue && + (srcValue !== undefined || (key in Object(object))); + }; + } + + /** + * A specialized version of `_.memoize` which clears the memoized function's + * cache when it exceeds `MAX_MEMOIZE_SIZE`. + * + * @private + * @param {Function} func The function to have its output memoized. + * @returns {Function} Returns the new memoized function. + */ + function memoizeCapped(func) { + var result = memoize(func, function(key) { + if (cache.size === MAX_MEMOIZE_SIZE) { + cache.clear(); + } + return key; + }); + + var cache = result.cache; + return result; + } + + /** + * Merges the function metadata of `source` into `data`. + * + * Merging metadata reduces the number of wrappers used to invoke a function. + * This is possible because methods like `_.bind`, `_.curry`, and `_.partial` + * may be applied regardless of execution order. Methods like `_.ary` and + * `_.rearg` modify function arguments, making the order in which they are + * executed important, preventing the merging of metadata. However, we make + * an exception for a safe combined case where curried functions have `_.ary` + * and or `_.rearg` applied. + * + * @private + * @param {Array} data The destination metadata. + * @param {Array} source The source metadata. + * @returns {Array} Returns `data`. + */ + function mergeData(data, source) { + var bitmask = data[1], + srcBitmask = source[1], + newBitmask = bitmask | srcBitmask, + isCommon = newBitmask < (WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG | WRAP_ARY_FLAG); + + var isCombo = + ((srcBitmask == WRAP_ARY_FLAG) && (bitmask == WRAP_CURRY_FLAG)) || + ((srcBitmask == WRAP_ARY_FLAG) && (bitmask == WRAP_REARG_FLAG) && (data[7].length <= source[8])) || + ((srcBitmask == (WRAP_ARY_FLAG | WRAP_REARG_FLAG)) && (source[7].length <= source[8]) && (bitmask == WRAP_CURRY_FLAG)); + + // Exit early if metadata can't be merged. + if (!(isCommon || isCombo)) { + return data; + } + // Use source `thisArg` if available. + if (srcBitmask & WRAP_BIND_FLAG) { + data[2] = source[2]; + // Set when currying a bound function. + newBitmask |= bitmask & WRAP_BIND_FLAG ? 0 : WRAP_CURRY_BOUND_FLAG; + } + // Compose partial arguments. + var value = source[3]; + if (value) { + var partials = data[3]; + data[3] = partials ? composeArgs(partials, value, source[4]) : value; + data[4] = partials ? replaceHolders(data[3], PLACEHOLDER) : source[4]; + } + // Compose partial right arguments. + value = source[5]; + if (value) { + partials = data[5]; + data[5] = partials ? composeArgsRight(partials, value, source[6]) : value; + data[6] = partials ? replaceHolders(data[5], PLACEHOLDER) : source[6]; + } + // Use source `argPos` if available. + value = source[7]; + if (value) { + data[7] = value; + } + // Use source `ary` if it's smaller. + if (srcBitmask & WRAP_ARY_FLAG) { + data[8] = data[8] == null ? source[8] : nativeMin(data[8], source[8]); + } + // Use source `arity` if one is not provided. + if (data[9] == null) { + data[9] = source[9]; + } + // Use source `func` and merge bitmasks. + data[0] = source[0]; + data[1] = newBitmask; + + return data; + } + + /** + * This function is like + * [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys) + * except that it includes inherited enumerable properties. + * + * @private + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + */ + function nativeKeysIn(object) { + var result = []; + if (object != null) { + for (var key in Object(object)) { + result.push(key); + } + } + return result; + } + + /** + * Converts `value` to a string using `Object.prototype.toString`. + * + * @private + * @param {*} value The value to convert. + * @returns {string} Returns the converted string. + */ + function objectToString(value) { + return nativeObjectToString.call(value); + } + + /** + * A specialized version of `baseRest` which transforms the rest array. + * + * @private + * @param {Function} func The function to apply a rest parameter to. + * @param {number} [start=func.length-1] The start position of the rest parameter. + * @param {Function} transform The rest array transform. + * @returns {Function} Returns the new function. + */ + function overRest(func, start, transform) { + start = nativeMax(start === undefined ? (func.length - 1) : start, 0); + return function() { + var args = arguments, + index = -1, + length = nativeMax(args.length - start, 0), + array = Array(length); + + while (++index < length) { + array[index] = args[start + index]; + } + index = -1; + var otherArgs = Array(start + 1); + while (++index < start) { + otherArgs[index] = args[index]; + } + otherArgs[start] = transform(array); + return apply(func, this, otherArgs); + }; + } + + /** + * Gets the parent value at `path` of `object`. + * + * @private + * @param {Object} object The object to query. + * @param {Array} path The path to get the parent value of. + * @returns {*} Returns the parent value. + */ + function parent(object, path) { + return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1)); + } + + /** + * Reorder `array` according to the specified indexes where the element at + * the first index is assigned as the first element, the element at + * the second index is assigned as the second element, and so on. + * + * @private + * @param {Array} array The array to reorder. + * @param {Array} indexes The arranged array indexes. + * @returns {Array} Returns `array`. + */ + function reorder(array, indexes) { + var arrLength = array.length, + length = nativeMin(indexes.length, arrLength), + oldArray = copyArray(array); + + while (length--) { + var index = indexes[length]; + array[length] = isIndex(index, arrLength) ? oldArray[index] : undefined; + } + return array; + } + + /** + * Sets metadata for `func`. + * + * **Note:** If this function becomes hot, i.e. is invoked a lot in a short + * period of time, it will trip its breaker and transition to an identity + * function to avoid garbage collection pauses in V8. See + * [V8 issue 2070](https://bugs.chromium.org/p/v8/issues/detail?id=2070) + * for more details. + * + * @private + * @param {Function} func The function to associate metadata with. + * @param {*} data The metadata. + * @returns {Function} Returns `func`. + */ + var setData = shortOut(baseSetData); + + /** + * A simple wrapper around the global [`setTimeout`](https://mdn.io/setTimeout). + * + * @private + * @param {Function} func The function to delay. + * @param {number} wait The number of milliseconds to delay invocation. + * @returns {number|Object} Returns the timer id or timeout object. + */ + var setTimeout = ctxSetTimeout || function(func, wait) { + return root.setTimeout(func, wait); + }; + + /** + * Sets the `toString` method of `func` to return `string`. + * + * @private + * @param {Function} func The function to modify. + * @param {Function} string The `toString` result. + * @returns {Function} Returns `func`. + */ + var setToString = shortOut(baseSetToString); + + /** + * Sets the `toString` method of `wrapper` to mimic the source of `reference` + * with wrapper details in a comment at the top of the source body. + * + * @private + * @param {Function} wrapper The function to modify. + * @param {Function} reference The reference function. + * @param {number} bitmask The bitmask flags. See `createWrap` for more details. + * @returns {Function} Returns `wrapper`. + */ + function setWrapToString(wrapper, reference, bitmask) { + var source = (reference + ''); + return setToString(wrapper, insertWrapDetails(source, updateWrapDetails(getWrapDetails(source), bitmask))); + } + + /** + * Creates a function that'll short out and invoke `identity` instead + * of `func` when it's called `HOT_COUNT` or more times in `HOT_SPAN` + * milliseconds. + * + * @private + * @param {Function} func The function to restrict. + * @returns {Function} Returns the new shortable function. + */ + function shortOut(func) { + var count = 0, + lastCalled = 0; + + return function() { + var stamp = nativeNow(), + remaining = HOT_SPAN - (stamp - lastCalled); + + lastCalled = stamp; + if (remaining > 0) { + if (++count >= HOT_COUNT) { + return arguments[0]; + } + } else { + count = 0; + } + return func.apply(undefined, arguments); + }; + } + + /** + * A specialized version of `_.shuffle` which mutates and sets the size of `array`. + * + * @private + * @param {Array} array The array to shuffle. + * @param {number} [size=array.length] The size of `array`. + * @returns {Array} Returns `array`. + */ + function shuffleSelf(array, size) { + var index = -1, + length = array.length, + lastIndex = length - 1; + + size = size === undefined ? length : size; + while (++index < size) { + var rand = baseRandom(index, lastIndex), + value = array[rand]; + + array[rand] = array[index]; + array[index] = value; + } + array.length = size; + return array; + } + + /** + * Converts `string` to a property path array. + * + * @private + * @param {string} string The string to convert. + * @returns {Array} Returns the property path array. + */ + var stringToPath = memoizeCapped(function(string) { + var result = []; + if (string.charCodeAt(0) === 46 /* . */) { + result.push(''); + } + string.replace(rePropName, function(match, number, quote, subString) { + result.push(quote ? subString.replace(reEscapeChar, '$1') : (number || match)); + }); + return result; + }); + + /** + * Converts `value` to a string key if it's not a string or symbol. + * + * @private + * @param {*} value The value to inspect. + * @returns {string|symbol} Returns the key. + */ + function toKey(value) { + if (typeof value == 'string' || isSymbol(value)) { + return value; + } + var result = (value + ''); + return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result; + } + + /** + * Converts `func` to its source code. + * + * @private + * @param {Function} func The function to convert. + * @returns {string} Returns the source code. + */ + function toSource(func) { + if (func != null) { + try { + return funcToString.call(func); + } catch (e) {} + try { + return (func + ''); + } catch (e) {} + } + return ''; + } + + /** + * Updates wrapper `details` based on `bitmask` flags. + * + * @private + * @returns {Array} details The details to modify. + * @param {number} bitmask The bitmask flags. See `createWrap` for more details. + * @returns {Array} Returns `details`. + */ + function updateWrapDetails(details, bitmask) { + arrayEach(wrapFlags, function(pair) { + var value = '_.' + pair[0]; + if ((bitmask & pair[1]) && !arrayIncludes(details, value)) { + details.push(value); + } + }); + return details.sort(); + } + + /** + * Creates a clone of `wrapper`. + * + * @private + * @param {Object} wrapper The wrapper to clone. + * @returns {Object} Returns the cloned wrapper. + */ + function wrapperClone(wrapper) { + if (wrapper instanceof LazyWrapper) { + return wrapper.clone(); + } + var result = new LodashWrapper(wrapper.__wrapped__, wrapper.__chain__); + result.__actions__ = copyArray(wrapper.__actions__); + result.__index__ = wrapper.__index__; + result.__values__ = wrapper.__values__; + return result; + } + + /*------------------------------------------------------------------------*/ + + /** + * Creates an array of elements split into groups the length of `size`. + * If `array` can't be split evenly, the final chunk will be the remaining + * elements. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to process. + * @param {number} [size=1] The length of each chunk + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Array} Returns the new array of chunks. + * @example + * + * _.chunk(['a', 'b', 'c', 'd'], 2); + * // => [['a', 'b'], ['c', 'd']] + * + * _.chunk(['a', 'b', 'c', 'd'], 3); + * // => [['a', 'b', 'c'], ['d']] + */ + function chunk(array, size, guard) { + if ((guard ? isIterateeCall(array, size, guard) : size === undefined)) { + size = 1; + } else { + size = nativeMax(toInteger(size), 0); + } + var length = array == null ? 0 : array.length; + if (!length || size < 1) { + return []; + } + var index = 0, + resIndex = 0, + result = Array(nativeCeil(length / size)); + + while (index < length) { + result[resIndex++] = baseSlice(array, index, (index += size)); + } + return result; + } + + /** + * Creates an array with all falsey values removed. The values `false`, `null`, + * `0`, `""`, `undefined`, and `NaN` are falsey. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to compact. + * @returns {Array} Returns the new array of filtered values. + * @example + * + * _.compact([0, 1, false, 2, '', 3]); + * // => [1, 2, 3] + */ + function compact(array) { + var index = -1, + length = array == null ? 0 : array.length, + resIndex = 0, + result = []; + + while (++index < length) { + var value = array[index]; + if (value) { + result[resIndex++] = value; + } + } + return result; + } + + /** + * Creates a new array concatenating `array` with any additional arrays + * and/or values. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to concatenate. + * @param {...*} [values] The values to concatenate. + * @returns {Array} Returns the new concatenated array. + * @example + * + * var array = [1]; + * var other = _.concat(array, 2, [3], [[4]]); + * + * console.log(other); + * // => [1, 2, 3, [4]] + * + * console.log(array); + * // => [1] + */ + function concat() { + var length = arguments.length; + if (!length) { + return []; + } + var args = Array(length - 1), + array = arguments[0], + index = length; + + while (index--) { + args[index - 1] = arguments[index]; + } + return arrayPush(isArray(array) ? copyArray(array) : [array], baseFlatten(args, 1)); + } + + /** + * Creates an array of `array` values not included in the other given arrays + * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons. The order and references of result values are + * determined by the first array. + * + * **Note:** Unlike `_.pullAll`, this method returns a new array. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {...Array} [values] The values to exclude. + * @returns {Array} Returns the new array of filtered values. + * @see _.without, _.xor + * @example + * + * _.difference([2, 1], [2, 3]); + * // => [1] + */ + var difference = baseRest(function(array, values) { + return isArrayLikeObject(array) + ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true)) + : []; + }); + + /** + * This method is like `_.difference` except that it accepts `iteratee` which + * is invoked for each element of `array` and `values` to generate the criterion + * by which they're compared. The order and references of result values are + * determined by the first array. The iteratee is invoked with one argument: + * (value). + * + * **Note:** Unlike `_.pullAllBy`, this method returns a new array. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {...Array} [values] The values to exclude. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {Array} Returns the new array of filtered values. + * @example + * + * _.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); + * // => [1.2] + * + * // The `_.property` iteratee shorthand. + * _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x'); + * // => [{ 'x': 2 }] + */ + var differenceBy = baseRest(function(array, values) { + var iteratee = last(values); + if (isArrayLikeObject(iteratee)) { + iteratee = undefined; + } + return isArrayLikeObject(array) + ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), getIteratee(iteratee, 2)) + : []; + }); + + /** + * This method is like `_.difference` except that it accepts `comparator` + * which is invoked to compare elements of `array` to `values`. The order and + * references of result values are determined by the first array. The comparator + * is invoked with two arguments: (arrVal, othVal). + * + * **Note:** Unlike `_.pullAllWith`, this method returns a new array. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {...Array} [values] The values to exclude. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new array of filtered values. + * @example + * + * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; + * + * _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual); + * // => [{ 'x': 2, 'y': 1 }] + */ + var differenceWith = baseRest(function(array, values) { + var comparator = last(values); + if (isArrayLikeObject(comparator)) { + comparator = undefined; + } + return isArrayLikeObject(array) + ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), undefined, comparator) + : []; + }); + + /** + * Creates a slice of `array` with `n` elements dropped from the beginning. + * + * @static + * @memberOf _ + * @since 0.5.0 + * @category Array + * @param {Array} array The array to query. + * @param {number} [n=1] The number of elements to drop. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Array} Returns the slice of `array`. + * @example + * + * _.drop([1, 2, 3]); + * // => [2, 3] + * + * _.drop([1, 2, 3], 2); + * // => [3] + * + * _.drop([1, 2, 3], 5); + * // => [] + * + * _.drop([1, 2, 3], 0); + * // => [1, 2, 3] + */ + function drop(array, n, guard) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + n = (guard || n === undefined) ? 1 : toInteger(n); + return baseSlice(array, n < 0 ? 0 : n, length); + } + + /** + * Creates a slice of `array` with `n` elements dropped from the end. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to query. + * @param {number} [n=1] The number of elements to drop. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Array} Returns the slice of `array`. + * @example + * + * _.dropRight([1, 2, 3]); + * // => [1, 2] + * + * _.dropRight([1, 2, 3], 2); + * // => [1] + * + * _.dropRight([1, 2, 3], 5); + * // => [] + * + * _.dropRight([1, 2, 3], 0); + * // => [1, 2, 3] + */ + function dropRight(array, n, guard) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + n = (guard || n === undefined) ? 1 : toInteger(n); + n = length - n; + return baseSlice(array, 0, n < 0 ? 0 : n); + } + + /** + * Creates a slice of `array` excluding elements dropped from the end. + * Elements are dropped until `predicate` returns falsey. The predicate is + * invoked with three arguments: (value, index, array). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to query. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the slice of `array`. + * @example + * + * var users = [ + * { 'user': 'barney', 'active': true }, + * { 'user': 'fred', 'active': false }, + * { 'user': 'pebbles', 'active': false } + * ]; + * + * _.dropRightWhile(users, function(o) { return !o.active; }); + * // => objects for ['barney'] + * + * // The `_.matches` iteratee shorthand. + * _.dropRightWhile(users, { 'user': 'pebbles', 'active': false }); + * // => objects for ['barney', 'fred'] + * + * // The `_.matchesProperty` iteratee shorthand. + * _.dropRightWhile(users, ['active', false]); + * // => objects for ['barney'] + * + * // The `_.property` iteratee shorthand. + * _.dropRightWhile(users, 'active'); + * // => objects for ['barney', 'fred', 'pebbles'] + */ + function dropRightWhile(array, predicate) { + return (array && array.length) + ? baseWhile(array, getIteratee(predicate, 3), true, true) + : []; + } + + /** + * Creates a slice of `array` excluding elements dropped from the beginning. + * Elements are dropped until `predicate` returns falsey. The predicate is + * invoked with three arguments: (value, index, array). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to query. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the slice of `array`. + * @example + * + * var users = [ + * { 'user': 'barney', 'active': false }, + * { 'user': 'fred', 'active': false }, + * { 'user': 'pebbles', 'active': true } + * ]; + * + * _.dropWhile(users, function(o) { return !o.active; }); + * // => objects for ['pebbles'] + * + * // The `_.matches` iteratee shorthand. + * _.dropWhile(users, { 'user': 'barney', 'active': false }); + * // => objects for ['fred', 'pebbles'] + * + * // The `_.matchesProperty` iteratee shorthand. + * _.dropWhile(users, ['active', false]); + * // => objects for ['pebbles'] + * + * // The `_.property` iteratee shorthand. + * _.dropWhile(users, 'active'); + * // => objects for ['barney', 'fred', 'pebbles'] + */ + function dropWhile(array, predicate) { + return (array && array.length) + ? baseWhile(array, getIteratee(predicate, 3), true) + : []; + } + + /** + * Fills elements of `array` with `value` from `start` up to, but not + * including, `end`. + * + * **Note:** This method mutates `array`. + * + * @static + * @memberOf _ + * @since 3.2.0 + * @category Array + * @param {Array} array The array to fill. + * @param {*} value The value to fill `array` with. + * @param {number} [start=0] The start position. + * @param {number} [end=array.length] The end position. + * @returns {Array} Returns `array`. + * @example + * + * var array = [1, 2, 3]; + * + * _.fill(array, 'a'); + * console.log(array); + * // => ['a', 'a', 'a'] + * + * _.fill(Array(3), 2); + * // => [2, 2, 2] + * + * _.fill([4, 6, 8, 10], '*', 1, 3); + * // => [4, '*', '*', 10] + */ + function fill(array, value, start, end) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + if (start && typeof start != 'number' && isIterateeCall(array, value, start)) { + start = 0; + end = length; + } + return baseFill(array, value, start, end); + } + + /** + * This method is like `_.find` except that it returns the index of the first + * element `predicate` returns truthy for instead of the element itself. + * + * @static + * @memberOf _ + * @since 1.1.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @param {number} [fromIndex=0] The index to search from. + * @returns {number} Returns the index of the found element, else `-1`. + * @example + * + * var users = [ + * { 'user': 'barney', 'active': false }, + * { 'user': 'fred', 'active': false }, + * { 'user': 'pebbles', 'active': true } + * ]; + * + * _.findIndex(users, function(o) { return o.user == 'barney'; }); + * // => 0 + * + * // The `_.matches` iteratee shorthand. + * _.findIndex(users, { 'user': 'fred', 'active': false }); + * // => 1 + * + * // The `_.matchesProperty` iteratee shorthand. + * _.findIndex(users, ['active', false]); + * // => 0 + * + * // The `_.property` iteratee shorthand. + * _.findIndex(users, 'active'); + * // => 2 + */ + function findIndex(array, predicate, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = fromIndex == null ? 0 : toInteger(fromIndex); + if (index < 0) { + index = nativeMax(length + index, 0); + } + return baseFindIndex(array, getIteratee(predicate, 3), index); + } + + /** + * This method is like `_.findIndex` except that it iterates over elements + * of `collection` from right to left. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @param {number} [fromIndex=array.length-1] The index to search from. + * @returns {number} Returns the index of the found element, else `-1`. + * @example + * + * var users = [ + * { 'user': 'barney', 'active': true }, + * { 'user': 'fred', 'active': false }, + * { 'user': 'pebbles', 'active': false } + * ]; + * + * _.findLastIndex(users, function(o) { return o.user == 'pebbles'; }); + * // => 2 + * + * // The `_.matches` iteratee shorthand. + * _.findLastIndex(users, { 'user': 'barney', 'active': true }); + * // => 0 + * + * // The `_.matchesProperty` iteratee shorthand. + * _.findLastIndex(users, ['active', false]); + * // => 2 + * + * // The `_.property` iteratee shorthand. + * _.findLastIndex(users, 'active'); + * // => 0 + */ + function findLastIndex(array, predicate, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = length - 1; + if (fromIndex !== undefined) { + index = toInteger(fromIndex); + index = fromIndex < 0 + ? nativeMax(length + index, 0) + : nativeMin(index, length - 1); + } + return baseFindIndex(array, getIteratee(predicate, 3), index, true); + } + + /** + * Flattens `array` a single level deep. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to flatten. + * @returns {Array} Returns the new flattened array. + * @example + * + * _.flatten([1, [2, [3, [4]], 5]]); + * // => [1, 2, [3, [4]], 5] + */ + function flatten(array) { + var length = array == null ? 0 : array.length; + return length ? baseFlatten(array, 1) : []; + } + + /** + * Recursively flattens `array`. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to flatten. + * @returns {Array} Returns the new flattened array. + * @example + * + * _.flattenDeep([1, [2, [3, [4]], 5]]); + * // => [1, 2, 3, 4, 5] + */ + function flattenDeep(array) { + var length = array == null ? 0 : array.length; + return length ? baseFlatten(array, INFINITY) : []; + } + + /** + * Recursively flatten `array` up to `depth` times. + * + * @static + * @memberOf _ + * @since 4.4.0 + * @category Array + * @param {Array} array The array to flatten. + * @param {number} [depth=1] The maximum recursion depth. + * @returns {Array} Returns the new flattened array. + * @example + * + * var array = [1, [2, [3, [4]], 5]]; + * + * _.flattenDepth(array, 1); + * // => [1, 2, [3, [4]], 5] + * + * _.flattenDepth(array, 2); + * // => [1, 2, 3, [4], 5] + */ + function flattenDepth(array, depth) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + depth = depth === undefined ? 1 : toInteger(depth); + return baseFlatten(array, depth); + } + + /** + * The inverse of `_.toPairs`; this method returns an object composed + * from key-value `pairs`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} pairs The key-value pairs. + * @returns {Object} Returns the new object. + * @example + * + * _.fromPairs([['a', 1], ['b', 2]]); + * // => { 'a': 1, 'b': 2 } + */ + function fromPairs(pairs) { + var index = -1, + length = pairs == null ? 0 : pairs.length, + result = {}; + + while (++index < length) { + var pair = pairs[index]; + result[pair[0]] = pair[1]; + } + return result; + } + + /** + * Gets the first element of `array`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @alias first + * @category Array + * @param {Array} array The array to query. + * @returns {*} Returns the first element of `array`. + * @example + * + * _.head([1, 2, 3]); + * // => 1 + * + * _.head([]); + * // => undefined + */ + function head(array) { + return (array && array.length) ? array[0] : undefined; + } + + /** + * Gets the index at which the first occurrence of `value` is found in `array` + * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons. If `fromIndex` is negative, it's used as the + * offset from the end of `array`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @param {number} [fromIndex=0] The index to search from. + * @returns {number} Returns the index of the matched value, else `-1`. + * @example + * + * _.indexOf([1, 2, 1, 2], 2); + * // => 1 + * + * // Search from the `fromIndex`. + * _.indexOf([1, 2, 1, 2], 2, 2); + * // => 3 + */ + function indexOf(array, value, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = fromIndex == null ? 0 : toInteger(fromIndex); + if (index < 0) { + index = nativeMax(length + index, 0); + } + return baseIndexOf(array, value, index); + } + + /** + * Gets all but the last element of `array`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to query. + * @returns {Array} Returns the slice of `array`. + * @example + * + * _.initial([1, 2, 3]); + * // => [1, 2] + */ + function initial(array) { + var length = array == null ? 0 : array.length; + return length ? baseSlice(array, 0, -1) : []; + } + + /** + * Creates an array of unique values that are included in all given arrays + * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons. The order and references of result values are + * determined by the first array. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @returns {Array} Returns the new array of intersecting values. + * @example + * + * _.intersection([2, 1], [2, 3]); + * // => [2] + */ + var intersection = baseRest(function(arrays) { + var mapped = arrayMap(arrays, castArrayLikeObject); + return (mapped.length && mapped[0] === arrays[0]) + ? baseIntersection(mapped) + : []; + }); + + /** + * This method is like `_.intersection` except that it accepts `iteratee` + * which is invoked for each element of each `arrays` to generate the criterion + * by which they're compared. The order and references of result values are + * determined by the first array. The iteratee is invoked with one argument: + * (value). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {Array} Returns the new array of intersecting values. + * @example + * + * _.intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); + * // => [2.1] + * + * // The `_.property` iteratee shorthand. + * _.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x'); + * // => [{ 'x': 1 }] + */ + var intersectionBy = baseRest(function(arrays) { + var iteratee = last(arrays), + mapped = arrayMap(arrays, castArrayLikeObject); + + if (iteratee === last(mapped)) { + iteratee = undefined; + } else { + mapped.pop(); + } + return (mapped.length && mapped[0] === arrays[0]) + ? baseIntersection(mapped, getIteratee(iteratee, 2)) + : []; + }); + + /** + * This method is like `_.intersection` except that it accepts `comparator` + * which is invoked to compare elements of `arrays`. The order and references + * of result values are determined by the first array. The comparator is + * invoked with two arguments: (arrVal, othVal). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new array of intersecting values. + * @example + * + * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; + * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]; + * + * _.intersectionWith(objects, others, _.isEqual); + * // => [{ 'x': 1, 'y': 2 }] + */ + var intersectionWith = baseRest(function(arrays) { + var comparator = last(arrays), + mapped = arrayMap(arrays, castArrayLikeObject); + + comparator = typeof comparator == 'function' ? comparator : undefined; + if (comparator) { + mapped.pop(); + } + return (mapped.length && mapped[0] === arrays[0]) + ? baseIntersection(mapped, undefined, comparator) + : []; + }); + + /** + * Converts all elements in `array` into a string separated by `separator`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to convert. + * @param {string} [separator=','] The element separator. + * @returns {string} Returns the joined string. + * @example + * + * _.join(['a', 'b', 'c'], '~'); + * // => 'a~b~c' + */ + function join(array, separator) { + return array == null ? '' : nativeJoin.call(array, separator); + } + + /** + * Gets the last element of `array`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to query. + * @returns {*} Returns the last element of `array`. + * @example + * + * _.last([1, 2, 3]); + * // => 3 + */ + function last(array) { + var length = array == null ? 0 : array.length; + return length ? array[length - 1] : undefined; + } + + /** + * This method is like `_.indexOf` except that it iterates over elements of + * `array` from right to left. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @param {number} [fromIndex=array.length-1] The index to search from. + * @returns {number} Returns the index of the matched value, else `-1`. + * @example + * + * _.lastIndexOf([1, 2, 1, 2], 2); + * // => 3 + * + * // Search from the `fromIndex`. + * _.lastIndexOf([1, 2, 1, 2], 2, 2); + * // => 1 + */ + function lastIndexOf(array, value, fromIndex) { + var length = array == null ? 0 : array.length; + if (!length) { + return -1; + } + var index = length; + if (fromIndex !== undefined) { + index = toInteger(fromIndex); + index = index < 0 ? nativeMax(length + index, 0) : nativeMin(index, length - 1); + } + return value === value + ? strictLastIndexOf(array, value, index) + : baseFindIndex(array, baseIsNaN, index, true); + } + + /** + * Gets the element at index `n` of `array`. If `n` is negative, the nth + * element from the end is returned. + * + * @static + * @memberOf _ + * @since 4.11.0 + * @category Array + * @param {Array} array The array to query. + * @param {number} [n=0] The index of the element to return. + * @returns {*} Returns the nth element of `array`. + * @example + * + * var array = ['a', 'b', 'c', 'd']; + * + * _.nth(array, 1); + * // => 'b' + * + * _.nth(array, -2); + * // => 'c'; + */ + function nth(array, n) { + return (array && array.length) ? baseNth(array, toInteger(n)) : undefined; + } + + /** + * Removes all given values from `array` using + * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons. + * + * **Note:** Unlike `_.without`, this method mutates `array`. Use `_.remove` + * to remove elements from an array by predicate. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Array + * @param {Array} array The array to modify. + * @param {...*} [values] The values to remove. + * @returns {Array} Returns `array`. + * @example + * + * var array = ['a', 'b', 'c', 'a', 'b', 'c']; + * + * _.pull(array, 'a', 'c'); + * console.log(array); + * // => ['b', 'b'] + */ + var pull = baseRest(pullAll); + + /** + * This method is like `_.pull` except that it accepts an array of values to remove. + * + * **Note:** Unlike `_.difference`, this method mutates `array`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to modify. + * @param {Array} values The values to remove. + * @returns {Array} Returns `array`. + * @example + * + * var array = ['a', 'b', 'c', 'a', 'b', 'c']; + * + * _.pullAll(array, ['a', 'c']); + * console.log(array); + * // => ['b', 'b'] + */ + function pullAll(array, values) { + return (array && array.length && values && values.length) + ? basePullAll(array, values) + : array; + } + + /** + * This method is like `_.pullAll` except that it accepts `iteratee` which is + * invoked for each element of `array` and `values` to generate the criterion + * by which they're compared. The iteratee is invoked with one argument: (value). + * + * **Note:** Unlike `_.differenceBy`, this method mutates `array`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to modify. + * @param {Array} values The values to remove. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {Array} Returns `array`. + * @example + * + * var array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }]; + * + * _.pullAllBy(array, [{ 'x': 1 }, { 'x': 3 }], 'x'); + * console.log(array); + * // => [{ 'x': 2 }] + */ + function pullAllBy(array, values, iteratee) { + return (array && array.length && values && values.length) + ? basePullAll(array, values, getIteratee(iteratee, 2)) + : array; + } + + /** + * This method is like `_.pullAll` except that it accepts `comparator` which + * is invoked to compare elements of `array` to `values`. The comparator is + * invoked with two arguments: (arrVal, othVal). + * + * **Note:** Unlike `_.differenceWith`, this method mutates `array`. + * + * @static + * @memberOf _ + * @since 4.6.0 + * @category Array + * @param {Array} array The array to modify. + * @param {Array} values The values to remove. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns `array`. + * @example + * + * var array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }]; + * + * _.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual); + * console.log(array); + * // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }] + */ + function pullAllWith(array, values, comparator) { + return (array && array.length && values && values.length) + ? basePullAll(array, values, undefined, comparator) + : array; + } + + /** + * Removes elements from `array` corresponding to `indexes` and returns an + * array of removed elements. + * + * **Note:** Unlike `_.at`, this method mutates `array`. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to modify. + * @param {...(number|number[])} [indexes] The indexes of elements to remove. + * @returns {Array} Returns the new array of removed elements. + * @example + * + * var array = ['a', 'b', 'c', 'd']; + * var pulled = _.pullAt(array, [1, 3]); + * + * console.log(array); + * // => ['a', 'c'] + * + * console.log(pulled); + * // => ['b', 'd'] + */ + var pullAt = flatRest(function(array, indexes) { + var length = array == null ? 0 : array.length, + result = baseAt(array, indexes); + + basePullAt(array, arrayMap(indexes, function(index) { + return isIndex(index, length) ? +index : index; + }).sort(compareAscending)); + + return result; + }); + + /** + * Removes all elements from `array` that `predicate` returns truthy for + * and returns an array of the removed elements. The predicate is invoked + * with three arguments: (value, index, array). + * + * **Note:** Unlike `_.filter`, this method mutates `array`. Use `_.pull` + * to pull elements from an array by value. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Array + * @param {Array} array The array to modify. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the new array of removed elements. + * @example + * + * var array = [1, 2, 3, 4]; + * var evens = _.remove(array, function(n) { + * return n % 2 == 0; + * }); + * + * console.log(array); + * // => [1, 3] + * + * console.log(evens); + * // => [2, 4] + */ + function remove(array, predicate) { + var result = []; + if (!(array && array.length)) { + return result; + } + var index = -1, + indexes = [], + length = array.length; + + predicate = getIteratee(predicate, 3); + while (++index < length) { + var value = array[index]; + if (predicate(value, index, array)) { + result.push(value); + indexes.push(index); + } + } + basePullAt(array, indexes); + return result; + } + + /** + * Reverses `array` so that the first element becomes the last, the second + * element becomes the second to last, and so on. + * + * **Note:** This method mutates `array` and is based on + * [`Array#reverse`](https://mdn.io/Array/reverse). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to modify. + * @returns {Array} Returns `array`. + * @example + * + * var array = [1, 2, 3]; + * + * _.reverse(array); + * // => [3, 2, 1] + * + * console.log(array); + * // => [3, 2, 1] + */ + function reverse(array) { + return array == null ? array : nativeReverse.call(array); + } + + /** + * Creates a slice of `array` from `start` up to, but not including, `end`. + * + * **Note:** This method is used instead of + * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are + * returned. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to slice. + * @param {number} [start=0] The start position. + * @param {number} [end=array.length] The end position. + * @returns {Array} Returns the slice of `array`. + */ + function slice(array, start, end) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + if (end && typeof end != 'number' && isIterateeCall(array, start, end)) { + start = 0; + end = length; + } + else { + start = start == null ? 0 : toInteger(start); + end = end === undefined ? length : toInteger(end); + } + return baseSlice(array, start, end); + } + + /** + * Uses a binary search to determine the lowest index at which `value` + * should be inserted into `array` in order to maintain its sort order. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The sorted array to inspect. + * @param {*} value The value to evaluate. + * @returns {number} Returns the index at which `value` should be inserted + * into `array`. + * @example + * + * _.sortedIndex([30, 50], 40); + * // => 1 + */ + function sortedIndex(array, value) { + return baseSortedIndex(array, value); + } + + /** + * This method is like `_.sortedIndex` except that it accepts `iteratee` + * which is invoked for `value` and each element of `array` to compute their + * sort ranking. The iteratee is invoked with one argument: (value). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The sorted array to inspect. + * @param {*} value The value to evaluate. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {number} Returns the index at which `value` should be inserted + * into `array`. + * @example + * + * var objects = [{ 'x': 4 }, { 'x': 5 }]; + * + * _.sortedIndexBy(objects, { 'x': 4 }, function(o) { return o.x; }); + * // => 0 + * + * // The `_.property` iteratee shorthand. + * _.sortedIndexBy(objects, { 'x': 4 }, 'x'); + * // => 0 + */ + function sortedIndexBy(array, value, iteratee) { + return baseSortedIndexBy(array, value, getIteratee(iteratee, 2)); + } + + /** + * This method is like `_.indexOf` except that it performs a binary + * search on a sorted `array`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @returns {number} Returns the index of the matched value, else `-1`. + * @example + * + * _.sortedIndexOf([4, 5, 5, 5, 6], 5); + * // => 1 + */ + function sortedIndexOf(array, value) { + var length = array == null ? 0 : array.length; + if (length) { + var index = baseSortedIndex(array, value); + if (index < length && eq(array[index], value)) { + return index; + } + } + return -1; + } + + /** + * This method is like `_.sortedIndex` except that it returns the highest + * index at which `value` should be inserted into `array` in order to + * maintain its sort order. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The sorted array to inspect. + * @param {*} value The value to evaluate. + * @returns {number} Returns the index at which `value` should be inserted + * into `array`. + * @example + * + * _.sortedLastIndex([4, 5, 5, 5, 6], 5); + * // => 4 + */ + function sortedLastIndex(array, value) { + return baseSortedIndex(array, value, true); + } + + /** + * This method is like `_.sortedLastIndex` except that it accepts `iteratee` + * which is invoked for `value` and each element of `array` to compute their + * sort ranking. The iteratee is invoked with one argument: (value). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The sorted array to inspect. + * @param {*} value The value to evaluate. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {number} Returns the index at which `value` should be inserted + * into `array`. + * @example + * + * var objects = [{ 'x': 4 }, { 'x': 5 }]; + * + * _.sortedLastIndexBy(objects, { 'x': 4 }, function(o) { return o.x; }); + * // => 1 + * + * // The `_.property` iteratee shorthand. + * _.sortedLastIndexBy(objects, { 'x': 4 }, 'x'); + * // => 1 + */ + function sortedLastIndexBy(array, value, iteratee) { + return baseSortedIndexBy(array, value, getIteratee(iteratee, 2), true); + } + + /** + * This method is like `_.lastIndexOf` except that it performs a binary + * search on a sorted `array`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {*} value The value to search for. + * @returns {number} Returns the index of the matched value, else `-1`. + * @example + * + * _.sortedLastIndexOf([4, 5, 5, 5, 6], 5); + * // => 3 + */ + function sortedLastIndexOf(array, value) { + var length = array == null ? 0 : array.length; + if (length) { + var index = baseSortedIndex(array, value, true) - 1; + if (eq(array[index], value)) { + return index; + } + } + return -1; + } + + /** + * This method is like `_.uniq` except that it's designed and optimized + * for sorted arrays. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @returns {Array} Returns the new duplicate free array. + * @example + * + * _.sortedUniq([1, 1, 2]); + * // => [1, 2] + */ + function sortedUniq(array) { + return (array && array.length) + ? baseSortedUniq(array) + : []; + } + + /** + * This method is like `_.uniqBy` except that it's designed and optimized + * for sorted arrays. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {Function} [iteratee] The iteratee invoked per element. + * @returns {Array} Returns the new duplicate free array. + * @example + * + * _.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor); + * // => [1.1, 2.3] + */ + function sortedUniqBy(array, iteratee) { + return (array && array.length) + ? baseSortedUniq(array, getIteratee(iteratee, 2)) + : []; + } + + /** + * Gets all but the first element of `array`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to query. + * @returns {Array} Returns the slice of `array`. + * @example + * + * _.tail([1, 2, 3]); + * // => [2, 3] + */ + function tail(array) { + var length = array == null ? 0 : array.length; + return length ? baseSlice(array, 1, length) : []; + } + + /** + * Creates a slice of `array` with `n` elements taken from the beginning. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to query. + * @param {number} [n=1] The number of elements to take. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Array} Returns the slice of `array`. + * @example + * + * _.take([1, 2, 3]); + * // => [1] + * + * _.take([1, 2, 3], 2); + * // => [1, 2] + * + * _.take([1, 2, 3], 5); + * // => [1, 2, 3] + * + * _.take([1, 2, 3], 0); + * // => [] + */ + function take(array, n, guard) { + if (!(array && array.length)) { + return []; + } + n = (guard || n === undefined) ? 1 : toInteger(n); + return baseSlice(array, 0, n < 0 ? 0 : n); + } + + /** + * Creates a slice of `array` with `n` elements taken from the end. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to query. + * @param {number} [n=1] The number of elements to take. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Array} Returns the slice of `array`. + * @example + * + * _.takeRight([1, 2, 3]); + * // => [3] + * + * _.takeRight([1, 2, 3], 2); + * // => [2, 3] + * + * _.takeRight([1, 2, 3], 5); + * // => [1, 2, 3] + * + * _.takeRight([1, 2, 3], 0); + * // => [] + */ + function takeRight(array, n, guard) { + var length = array == null ? 0 : array.length; + if (!length) { + return []; + } + n = (guard || n === undefined) ? 1 : toInteger(n); + n = length - n; + return baseSlice(array, n < 0 ? 0 : n, length); + } + + /** + * Creates a slice of `array` with elements taken from the end. Elements are + * taken until `predicate` returns falsey. The predicate is invoked with + * three arguments: (value, index, array). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to query. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the slice of `array`. + * @example + * + * var users = [ + * { 'user': 'barney', 'active': true }, + * { 'user': 'fred', 'active': false }, + * { 'user': 'pebbles', 'active': false } + * ]; + * + * _.takeRightWhile(users, function(o) { return !o.active; }); + * // => objects for ['fred', 'pebbles'] + * + * // The `_.matches` iteratee shorthand. + * _.takeRightWhile(users, { 'user': 'pebbles', 'active': false }); + * // => objects for ['pebbles'] + * + * // The `_.matchesProperty` iteratee shorthand. + * _.takeRightWhile(users, ['active', false]); + * // => objects for ['fred', 'pebbles'] + * + * // The `_.property` iteratee shorthand. + * _.takeRightWhile(users, 'active'); + * // => [] + */ + function takeRightWhile(array, predicate) { + return (array && array.length) + ? baseWhile(array, getIteratee(predicate, 3), false, true) + : []; + } + + /** + * Creates a slice of `array` with elements taken from the beginning. Elements + * are taken until `predicate` returns falsey. The predicate is invoked with + * three arguments: (value, index, array). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Array + * @param {Array} array The array to query. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the slice of `array`. + * @example + * + * var users = [ + * { 'user': 'barney', 'active': false }, + * { 'user': 'fred', 'active': false }, + * { 'user': 'pebbles', 'active': true } + * ]; + * + * _.takeWhile(users, function(o) { return !o.active; }); + * // => objects for ['barney', 'fred'] + * + * // The `_.matches` iteratee shorthand. + * _.takeWhile(users, { 'user': 'barney', 'active': false }); + * // => objects for ['barney'] + * + * // The `_.matchesProperty` iteratee shorthand. + * _.takeWhile(users, ['active', false]); + * // => objects for ['barney', 'fred'] + * + * // The `_.property` iteratee shorthand. + * _.takeWhile(users, 'active'); + * // => [] + */ + function takeWhile(array, predicate) { + return (array && array.length) + ? baseWhile(array, getIteratee(predicate, 3)) + : []; + } + + /** + * Creates an array of unique values, in order, from all given arrays using + * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @returns {Array} Returns the new array of combined values. + * @example + * + * _.union([2], [1, 2]); + * // => [2, 1] + */ + var union = baseRest(function(arrays) { + return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true)); + }); + + /** + * This method is like `_.union` except that it accepts `iteratee` which is + * invoked for each element of each `arrays` to generate the criterion by + * which uniqueness is computed. Result values are chosen from the first + * array in which the value occurs. The iteratee is invoked with one argument: + * (value). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {Array} Returns the new array of combined values. + * @example + * + * _.unionBy([2.1], [1.2, 2.3], Math.floor); + * // => [2.1, 1.2] + * + * // The `_.property` iteratee shorthand. + * _.unionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x'); + * // => [{ 'x': 1 }, { 'x': 2 }] + */ + var unionBy = baseRest(function(arrays) { + var iteratee = last(arrays); + if (isArrayLikeObject(iteratee)) { + iteratee = undefined; + } + return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), getIteratee(iteratee, 2)); + }); + + /** + * This method is like `_.union` except that it accepts `comparator` which + * is invoked to compare elements of `arrays`. Result values are chosen from + * the first array in which the value occurs. The comparator is invoked + * with two arguments: (arrVal, othVal). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new array of combined values. + * @example + * + * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; + * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]; + * + * _.unionWith(objects, others, _.isEqual); + * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }] + */ + var unionWith = baseRest(function(arrays) { + var comparator = last(arrays); + comparator = typeof comparator == 'function' ? comparator : undefined; + return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), undefined, comparator); + }); + + /** + * Creates a duplicate-free version of an array, using + * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons, in which only the first occurrence of each element + * is kept. The order of result values is determined by the order they occur + * in the array. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to inspect. + * @returns {Array} Returns the new duplicate free array. + * @example + * + * _.uniq([2, 1, 2]); + * // => [2, 1] + */ + function uniq(array) { + return (array && array.length) ? baseUniq(array) : []; + } + + /** + * This method is like `_.uniq` except that it accepts `iteratee` which is + * invoked for each element in `array` to generate the criterion by which + * uniqueness is computed. The order of result values is determined by the + * order they occur in the array. The iteratee is invoked with one argument: + * (value). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {Array} Returns the new duplicate free array. + * @example + * + * _.uniqBy([2.1, 1.2, 2.3], Math.floor); + * // => [2.1, 1.2] + * + * // The `_.property` iteratee shorthand. + * _.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'); + * // => [{ 'x': 1 }, { 'x': 2 }] + */ + function uniqBy(array, iteratee) { + return (array && array.length) ? baseUniq(array, getIteratee(iteratee, 2)) : []; + } + + /** + * This method is like `_.uniq` except that it accepts `comparator` which + * is invoked to compare elements of `array`. The order of result values is + * determined by the order they occur in the array.The comparator is invoked + * with two arguments: (arrVal, othVal). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new duplicate free array. + * @example + * + * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }]; + * + * _.uniqWith(objects, _.isEqual); + * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }] + */ + function uniqWith(array, comparator) { + comparator = typeof comparator == 'function' ? comparator : undefined; + return (array && array.length) ? baseUniq(array, undefined, comparator) : []; + } + + /** + * This method is like `_.zip` except that it accepts an array of grouped + * elements and creates an array regrouping the elements to their pre-zip + * configuration. + * + * @static + * @memberOf _ + * @since 1.2.0 + * @category Array + * @param {Array} array The array of grouped elements to process. + * @returns {Array} Returns the new array of regrouped elements. + * @example + * + * var zipped = _.zip(['a', 'b'], [1, 2], [true, false]); + * // => [['a', 1, true], ['b', 2, false]] + * + * _.unzip(zipped); + * // => [['a', 'b'], [1, 2], [true, false]] + */ + function unzip(array) { + if (!(array && array.length)) { + return []; + } + var length = 0; + array = arrayFilter(array, function(group) { + if (isArrayLikeObject(group)) { + length = nativeMax(group.length, length); + return true; + } + }); + return baseTimes(length, function(index) { + return arrayMap(array, baseProperty(index)); + }); + } + + /** + * This method is like `_.unzip` except that it accepts `iteratee` to specify + * how regrouped values should be combined. The iteratee is invoked with the + * elements of each group: (...group). + * + * @static + * @memberOf _ + * @since 3.8.0 + * @category Array + * @param {Array} array The array of grouped elements to process. + * @param {Function} [iteratee=_.identity] The function to combine + * regrouped values. + * @returns {Array} Returns the new array of regrouped elements. + * @example + * + * var zipped = _.zip([1, 2], [10, 20], [100, 200]); + * // => [[1, 10, 100], [2, 20, 200]] + * + * _.unzipWith(zipped, _.add); + * // => [3, 30, 300] + */ + function unzipWith(array, iteratee) { + if (!(array && array.length)) { + return []; + } + var result = unzip(array); + if (iteratee == null) { + return result; + } + return arrayMap(result, function(group) { + return apply(iteratee, undefined, group); + }); + } + + /** + * Creates an array excluding all given values using + * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * for equality comparisons. + * + * **Note:** Unlike `_.pull`, this method returns a new array. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {Array} array The array to inspect. + * @param {...*} [values] The values to exclude. + * @returns {Array} Returns the new array of filtered values. + * @see _.difference, _.xor + * @example + * + * _.without([2, 1, 2, 3], 1, 2); + * // => [3] + */ + var without = baseRest(function(array, values) { + return isArrayLikeObject(array) + ? baseDifference(array, values) + : []; + }); + + /** + * Creates an array of unique values that is the + * [symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference) + * of the given arrays. The order of result values is determined by the order + * they occur in the arrays. + * + * @static + * @memberOf _ + * @since 2.4.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @returns {Array} Returns the new array of filtered values. + * @see _.difference, _.without + * @example + * + * _.xor([2, 1], [2, 3]); + * // => [1, 3] + */ + var xor = baseRest(function(arrays) { + return baseXor(arrayFilter(arrays, isArrayLikeObject)); + }); + + /** + * This method is like `_.xor` except that it accepts `iteratee` which is + * invoked for each element of each `arrays` to generate the criterion by + * which by which they're compared. The order of result values is determined + * by the order they occur in the arrays. The iteratee is invoked with one + * argument: (value). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {Array} Returns the new array of filtered values. + * @example + * + * _.xorBy([2.1, 1.2], [2.3, 3.4], Math.floor); + * // => [1.2, 3.4] + * + * // The `_.property` iteratee shorthand. + * _.xorBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x'); + * // => [{ 'x': 2 }] + */ + var xorBy = baseRest(function(arrays) { + var iteratee = last(arrays); + if (isArrayLikeObject(iteratee)) { + iteratee = undefined; + } + return baseXor(arrayFilter(arrays, isArrayLikeObject), getIteratee(iteratee, 2)); + }); + + /** + * This method is like `_.xor` except that it accepts `comparator` which is + * invoked to compare elements of `arrays`. The order of result values is + * determined by the order they occur in the arrays. The comparator is invoked + * with two arguments: (arrVal, othVal). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Array + * @param {...Array} [arrays] The arrays to inspect. + * @param {Function} [comparator] The comparator invoked per element. + * @returns {Array} Returns the new array of filtered values. + * @example + * + * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; + * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }]; + * + * _.xorWith(objects, others, _.isEqual); + * // => [{ 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }] + */ + var xorWith = baseRest(function(arrays) { + var comparator = last(arrays); + comparator = typeof comparator == 'function' ? comparator : undefined; + return baseXor(arrayFilter(arrays, isArrayLikeObject), undefined, comparator); + }); + + /** + * Creates an array of grouped elements, the first of which contains the + * first elements of the given arrays, the second of which contains the + * second elements of the given arrays, and so on. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Array + * @param {...Array} [arrays] The arrays to process. + * @returns {Array} Returns the new array of grouped elements. + * @example + * + * _.zip(['a', 'b'], [1, 2], [true, false]); + * // => [['a', 1, true], ['b', 2, false]] + */ + var zip = baseRest(unzip); + + /** + * This method is like `_.fromPairs` except that it accepts two arrays, + * one of property identifiers and one of corresponding values. + * + * @static + * @memberOf _ + * @since 0.4.0 + * @category Array + * @param {Array} [props=[]] The property identifiers. + * @param {Array} [values=[]] The property values. + * @returns {Object} Returns the new object. + * @example + * + * _.zipObject(['a', 'b'], [1, 2]); + * // => { 'a': 1, 'b': 2 } + */ + function zipObject(props, values) { + return baseZipObject(props || [], values || [], assignValue); + } + + /** + * This method is like `_.zipObject` except that it supports property paths. + * + * @static + * @memberOf _ + * @since 4.1.0 + * @category Array + * @param {Array} [props=[]] The property identifiers. + * @param {Array} [values=[]] The property values. + * @returns {Object} Returns the new object. + * @example + * + * _.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]); + * // => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } } + */ + function zipObjectDeep(props, values) { + return baseZipObject(props || [], values || [], baseSet); + } + + /** + * This method is like `_.zip` except that it accepts `iteratee` to specify + * how grouped values should be combined. The iteratee is invoked with the + * elements of each group: (...group). + * + * @static + * @memberOf _ + * @since 3.8.0 + * @category Array + * @param {...Array} [arrays] The arrays to process. + * @param {Function} [iteratee=_.identity] The function to combine + * grouped values. + * @returns {Array} Returns the new array of grouped elements. + * @example + * + * _.zipWith([1, 2], [10, 20], [100, 200], function(a, b, c) { + * return a + b + c; + * }); + * // => [111, 222] + */ + var zipWith = baseRest(function(arrays) { + var length = arrays.length, + iteratee = length > 1 ? arrays[length - 1] : undefined; + + iteratee = typeof iteratee == 'function' ? (arrays.pop(), iteratee) : undefined; + return unzipWith(arrays, iteratee); + }); + + /*------------------------------------------------------------------------*/ + + /** + * Creates a `lodash` wrapper instance that wraps `value` with explicit method + * chain sequences enabled. The result of such sequences must be unwrapped + * with `_#value`. + * + * @static + * @memberOf _ + * @since 1.3.0 + * @category Seq + * @param {*} value The value to wrap. + * @returns {Object} Returns the new `lodash` wrapper instance. + * @example + * + * var users = [ + * { 'user': 'barney', 'age': 36 }, + * { 'user': 'fred', 'age': 40 }, + * { 'user': 'pebbles', 'age': 1 } + * ]; + * + * var youngest = _ + * .chain(users) + * .sortBy('age') + * .map(function(o) { + * return o.user + ' is ' + o.age; + * }) + * .head() + * .value(); + * // => 'pebbles is 1' + */ + function chain(value) { + var result = lodash(value); + result.__chain__ = true; + return result; + } + + /** + * This method invokes `interceptor` and returns `value`. The interceptor + * is invoked with one argument; (value). The purpose of this method is to + * "tap into" a method chain sequence in order to modify intermediate results. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Seq + * @param {*} value The value to provide to `interceptor`. + * @param {Function} interceptor The function to invoke. + * @returns {*} Returns `value`. + * @example + * + * _([1, 2, 3]) + * .tap(function(array) { + * // Mutate input array. + * array.pop(); + * }) + * .reverse() + * .value(); + * // => [2, 1] + */ + function tap(value, interceptor) { + interceptor(value); + return value; + } + + /** + * This method is like `_.tap` except that it returns the result of `interceptor`. + * The purpose of this method is to "pass thru" values replacing intermediate + * results in a method chain sequence. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Seq + * @param {*} value The value to provide to `interceptor`. + * @param {Function} interceptor The function to invoke. + * @returns {*} Returns the result of `interceptor`. + * @example + * + * _(' abc ') + * .chain() + * .trim() + * .thru(function(value) { + * return [value]; + * }) + * .value(); + * // => ['abc'] + */ + function thru(value, interceptor) { + return interceptor(value); + } + + /** + * This method is the wrapper version of `_.at`. + * + * @name at + * @memberOf _ + * @since 1.0.0 + * @category Seq + * @param {...(string|string[])} [paths] The property paths to pick. + * @returns {Object} Returns the new `lodash` wrapper instance. + * @example + * + * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] }; + * + * _(object).at(['a[0].b.c', 'a[1]']).value(); + * // => [3, 4] + */ + var wrapperAt = flatRest(function(paths) { + var length = paths.length, + start = length ? paths[0] : 0, + value = this.__wrapped__, + interceptor = function(object) { return baseAt(object, paths); }; + + if (length > 1 || this.__actions__.length || + !(value instanceof LazyWrapper) || !isIndex(start)) { + return this.thru(interceptor); + } + value = value.slice(start, +start + (length ? 1 : 0)); + value.__actions__.push({ + 'func': thru, + 'args': [interceptor], + 'thisArg': undefined + }); + return new LodashWrapper(value, this.__chain__).thru(function(array) { + if (length && !array.length) { + array.push(undefined); + } + return array; + }); + }); + + /** + * Creates a `lodash` wrapper instance with explicit method chain sequences enabled. + * + * @name chain + * @memberOf _ + * @since 0.1.0 + * @category Seq + * @returns {Object} Returns the new `lodash` wrapper instance. + * @example + * + * var users = [ + * { 'user': 'barney', 'age': 36 }, + * { 'user': 'fred', 'age': 40 } + * ]; + * + * // A sequence without explicit chaining. + * _(users).head(); + * // => { 'user': 'barney', 'age': 36 } + * + * // A sequence with explicit chaining. + * _(users) + * .chain() + * .head() + * .pick('user') + * .value(); + * // => { 'user': 'barney' } + */ + function wrapperChain() { + return chain(this); + } + + /** + * Executes the chain sequence and returns the wrapped result. + * + * @name commit + * @memberOf _ + * @since 3.2.0 + * @category Seq + * @returns {Object} Returns the new `lodash` wrapper instance. + * @example + * + * var array = [1, 2]; + * var wrapped = _(array).push(3); + * + * console.log(array); + * // => [1, 2] + * + * wrapped = wrapped.commit(); + * console.log(array); + * // => [1, 2, 3] + * + * wrapped.last(); + * // => 3 + * + * console.log(array); + * // => [1, 2, 3] + */ + function wrapperCommit() { + return new LodashWrapper(this.value(), this.__chain__); + } + + /** + * Gets the next value on a wrapped object following the + * [iterator protocol](https://mdn.io/iteration_protocols#iterator). + * + * @name next + * @memberOf _ + * @since 4.0.0 + * @category Seq + * @returns {Object} Returns the next iterator value. + * @example + * + * var wrapped = _([1, 2]); + * + * wrapped.next(); + * // => { 'done': false, 'value': 1 } + * + * wrapped.next(); + * // => { 'done': false, 'value': 2 } + * + * wrapped.next(); + * // => { 'done': true, 'value': undefined } + */ + function wrapperNext() { + if (this.__values__ === undefined) { + this.__values__ = toArray(this.value()); + } + var done = this.__index__ >= this.__values__.length, + value = done ? undefined : this.__values__[this.__index__++]; + + return { 'done': done, 'value': value }; + } + + /** + * Enables the wrapper to be iterable. + * + * @name Symbol.iterator + * @memberOf _ + * @since 4.0.0 + * @category Seq + * @returns {Object} Returns the wrapper object. + * @example + * + * var wrapped = _([1, 2]); + * + * wrapped[Symbol.iterator]() === wrapped; + * // => true + * + * Array.from(wrapped); + * // => [1, 2] + */ + function wrapperToIterator() { + return this; + } + + /** + * Creates a clone of the chain sequence planting `value` as the wrapped value. + * + * @name plant + * @memberOf _ + * @since 3.2.0 + * @category Seq + * @param {*} value The value to plant. + * @returns {Object} Returns the new `lodash` wrapper instance. + * @example + * + * function square(n) { + * return n * n; + * } + * + * var wrapped = _([1, 2]).map(square); + * var other = wrapped.plant([3, 4]); + * + * other.value(); + * // => [9, 16] + * + * wrapped.value(); + * // => [1, 4] + */ + function wrapperPlant(value) { + var result, + parent = this; + + while (parent instanceof baseLodash) { + var clone = wrapperClone(parent); + clone.__index__ = 0; + clone.__values__ = undefined; + if (result) { + previous.__wrapped__ = clone; + } else { + result = clone; + } + var previous = clone; + parent = parent.__wrapped__; + } + previous.__wrapped__ = value; + return result; + } + + /** + * This method is the wrapper version of `_.reverse`. + * + * **Note:** This method mutates the wrapped array. + * + * @name reverse + * @memberOf _ + * @since 0.1.0 + * @category Seq + * @returns {Object} Returns the new `lodash` wrapper instance. + * @example + * + * var array = [1, 2, 3]; + * + * _(array).reverse().value() + * // => [3, 2, 1] + * + * console.log(array); + * // => [3, 2, 1] + */ + function wrapperReverse() { + var value = this.__wrapped__; + if (value instanceof LazyWrapper) { + var wrapped = value; + if (this.__actions__.length) { + wrapped = new LazyWrapper(this); + } + wrapped = wrapped.reverse(); + wrapped.__actions__.push({ + 'func': thru, + 'args': [reverse], + 'thisArg': undefined + }); + return new LodashWrapper(wrapped, this.__chain__); + } + return this.thru(reverse); + } + + /** + * Executes the chain sequence to resolve the unwrapped value. + * + * @name value + * @memberOf _ + * @since 0.1.0 + * @alias toJSON, valueOf + * @category Seq + * @returns {*} Returns the resolved unwrapped value. + * @example + * + * _([1, 2, 3]).value(); + * // => [1, 2, 3] + */ + function wrapperValue() { + return baseWrapperValue(this.__wrapped__, this.__actions__); + } + + /*------------------------------------------------------------------------*/ + + /** + * Creates an object composed of keys generated from the results of running + * each element of `collection` thru `iteratee`. The corresponding value of + * each key is the number of times the key was returned by `iteratee`. The + * iteratee is invoked with one argument: (value). + * + * @static + * @memberOf _ + * @since 0.5.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The iteratee to transform keys. + * @returns {Object} Returns the composed aggregate object. + * @example + * + * _.countBy([6.1, 4.2, 6.3], Math.floor); + * // => { '4': 1, '6': 2 } + * + * // The `_.property` iteratee shorthand. + * _.countBy(['one', 'two', 'three'], 'length'); + * // => { '3': 2, '5': 1 } + */ + var countBy = createAggregator(function(result, value, key) { + if (hasOwnProperty.call(result, key)) { + ++result[key]; + } else { + baseAssignValue(result, key, 1); + } + }); + + /** + * Checks if `predicate` returns truthy for **all** elements of `collection`. + * Iteration is stopped once `predicate` returns falsey. The predicate is + * invoked with three arguments: (value, index|key, collection). + * + * **Note:** This method returns `true` for + * [empty collections](https://en.wikipedia.org/wiki/Empty_set) because + * [everything is true](https://en.wikipedia.org/wiki/Vacuous_truth) of + * elements of empty collections. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {boolean} Returns `true` if all elements pass the predicate check, + * else `false`. + * @example + * + * _.every([true, 1, null, 'yes'], Boolean); + * // => false + * + * var users = [ + * { 'user': 'barney', 'age': 36, 'active': false }, + * { 'user': 'fred', 'age': 40, 'active': false } + * ]; + * + * // The `_.matches` iteratee shorthand. + * _.every(users, { 'user': 'barney', 'active': false }); + * // => false + * + * // The `_.matchesProperty` iteratee shorthand. + * _.every(users, ['active', false]); + * // => true + * + * // The `_.property` iteratee shorthand. + * _.every(users, 'active'); + * // => false + */ + function every(collection, predicate, guard) { + var func = isArray(collection) ? arrayEvery : baseEvery; + if (guard && isIterateeCall(collection, predicate, guard)) { + predicate = undefined; + } + return func(collection, getIteratee(predicate, 3)); + } + + /** + * Iterates over elements of `collection`, returning an array of all elements + * `predicate` returns truthy for. The predicate is invoked with three + * arguments: (value, index|key, collection). + * + * **Note:** Unlike `_.remove`, this method returns a new array. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the new filtered array. + * @see _.reject + * @example + * + * var users = [ + * { 'user': 'barney', 'age': 36, 'active': true }, + * { 'user': 'fred', 'age': 40, 'active': false } + * ]; + * + * _.filter(users, function(o) { return !o.active; }); + * // => objects for ['fred'] + * + * // The `_.matches` iteratee shorthand. + * _.filter(users, { 'age': 36, 'active': true }); + * // => objects for ['barney'] + * + * // The `_.matchesProperty` iteratee shorthand. + * _.filter(users, ['active', false]); + * // => objects for ['fred'] + * + * // The `_.property` iteratee shorthand. + * _.filter(users, 'active'); + * // => objects for ['barney'] + */ + function filter(collection, predicate) { + var func = isArray(collection) ? arrayFilter : baseFilter; + return func(collection, getIteratee(predicate, 3)); + } + + /** + * Iterates over elements of `collection`, returning the first element + * `predicate` returns truthy for. The predicate is invoked with three + * arguments: (value, index|key, collection). + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to inspect. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @param {number} [fromIndex=0] The index to search from. + * @returns {*} Returns the matched element, else `undefined`. + * @example + * + * var users = [ + * { 'user': 'barney', 'age': 36, 'active': true }, + * { 'user': 'fred', 'age': 40, 'active': false }, + * { 'user': 'pebbles', 'age': 1, 'active': true } + * ]; + * + * _.find(users, function(o) { return o.age < 40; }); + * // => object for 'barney' + * + * // The `_.matches` iteratee shorthand. + * _.find(users, { 'age': 1, 'active': true }); + * // => object for 'pebbles' + * + * // The `_.matchesProperty` iteratee shorthand. + * _.find(users, ['active', false]); + * // => object for 'fred' + * + * // The `_.property` iteratee shorthand. + * _.find(users, 'active'); + * // => object for 'barney' + */ + var find = createFind(findIndex); + + /** + * This method is like `_.find` except that it iterates over elements of + * `collection` from right to left. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Collection + * @param {Array|Object} collection The collection to inspect. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @param {number} [fromIndex=collection.length-1] The index to search from. + * @returns {*} Returns the matched element, else `undefined`. + * @example + * + * _.findLast([1, 2, 3, 4], function(n) { + * return n % 2 == 1; + * }); + * // => 3 + */ + var findLast = createFind(findLastIndex); + + /** + * Creates a flattened array of values by running each element in `collection` + * thru `iteratee` and flattening the mapped results. The iteratee is invoked + * with three arguments: (value, index|key, collection). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Array} Returns the new flattened array. + * @example + * + * function duplicate(n) { + * return [n, n]; + * } + * + * _.flatMap([1, 2], duplicate); + * // => [1, 1, 2, 2] + */ + function flatMap(collection, iteratee) { + return baseFlatten(map(collection, iteratee), 1); + } + + /** + * This method is like `_.flatMap` except that it recursively flattens the + * mapped results. + * + * @static + * @memberOf _ + * @since 4.7.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Array} Returns the new flattened array. + * @example + * + * function duplicate(n) { + * return [[[n, n]]]; + * } + * + * _.flatMapDeep([1, 2], duplicate); + * // => [1, 1, 2, 2] + */ + function flatMapDeep(collection, iteratee) { + return baseFlatten(map(collection, iteratee), INFINITY); + } + + /** + * This method is like `_.flatMap` except that it recursively flattens the + * mapped results up to `depth` times. + * + * @static + * @memberOf _ + * @since 4.7.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @param {number} [depth=1] The maximum recursion depth. + * @returns {Array} Returns the new flattened array. + * @example + * + * function duplicate(n) { + * return [[[n, n]]]; + * } + * + * _.flatMapDepth([1, 2], duplicate, 2); + * // => [[1, 1], [2, 2]] + */ + function flatMapDepth(collection, iteratee, depth) { + depth = depth === undefined ? 1 : toInteger(depth); + return baseFlatten(map(collection, iteratee), depth); + } + + /** + * Iterates over elements of `collection` and invokes `iteratee` for each element. + * The iteratee is invoked with three arguments: (value, index|key, collection). + * Iteratee functions may exit iteration early by explicitly returning `false`. + * + * **Note:** As with other "Collections" methods, objects with a "length" + * property are iterated like arrays. To avoid this behavior use `_.forIn` + * or `_.forOwn` for object iteration. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @alias each + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Array|Object} Returns `collection`. + * @see _.forEachRight + * @example + * + * _.forEach([1, 2], function(value) { + * console.log(value); + * }); + * // => Logs `1` then `2`. + * + * _.forEach({ 'a': 1, 'b': 2 }, function(value, key) { + * console.log(key); + * }); + * // => Logs 'a' then 'b' (iteration order is not guaranteed). + */ + function forEach(collection, iteratee) { + var func = isArray(collection) ? arrayEach : baseEach; + return func(collection, getIteratee(iteratee, 3)); + } + + /** + * This method is like `_.forEach` except that it iterates over elements of + * `collection` from right to left. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @alias eachRight + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Array|Object} Returns `collection`. + * @see _.forEach + * @example + * + * _.forEachRight([1, 2], function(value) { + * console.log(value); + * }); + * // => Logs `2` then `1`. + */ + function forEachRight(collection, iteratee) { + var func = isArray(collection) ? arrayEachRight : baseEachRight; + return func(collection, getIteratee(iteratee, 3)); + } + + /** + * Creates an object composed of keys generated from the results of running + * each element of `collection` thru `iteratee`. The order of grouped values + * is determined by the order they occur in `collection`. The corresponding + * value of each key is an array of elements responsible for generating the + * key. The iteratee is invoked with one argument: (value). + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The iteratee to transform keys. + * @returns {Object} Returns the composed aggregate object. + * @example + * + * _.groupBy([6.1, 4.2, 6.3], Math.floor); + * // => { '4': [4.2], '6': [6.1, 6.3] } + * + * // The `_.property` iteratee shorthand. + * _.groupBy(['one', 'two', 'three'], 'length'); + * // => { '3': ['one', 'two'], '5': ['three'] } + */ + var groupBy = createAggregator(function(result, value, key) { + if (hasOwnProperty.call(result, key)) { + result[key].push(value); + } else { + baseAssignValue(result, key, [value]); + } + }); + + /** + * Checks if `value` is in `collection`. If `collection` is a string, it's + * checked for a substring of `value`, otherwise + * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * is used for equality comparisons. If `fromIndex` is negative, it's used as + * the offset from the end of `collection`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object|string} collection The collection to inspect. + * @param {*} value The value to search for. + * @param {number} [fromIndex=0] The index to search from. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`. + * @returns {boolean} Returns `true` if `value` is found, else `false`. + * @example + * + * _.includes([1, 2, 3], 1); + * // => true + * + * _.includes([1, 2, 3], 1, 2); + * // => false + * + * _.includes({ 'a': 1, 'b': 2 }, 1); + * // => true + * + * _.includes('abcd', 'bc'); + * // => true + */ + function includes(collection, value, fromIndex, guard) { + collection = isArrayLike(collection) ? collection : values(collection); + fromIndex = (fromIndex && !guard) ? toInteger(fromIndex) : 0; + + var length = collection.length; + if (fromIndex < 0) { + fromIndex = nativeMax(length + fromIndex, 0); + } + return isString(collection) + ? (fromIndex <= length && collection.indexOf(value, fromIndex) > -1) + : (!!length && baseIndexOf(collection, value, fromIndex) > -1); + } + + /** + * Invokes the method at `path` of each element in `collection`, returning + * an array of the results of each invoked method. Any additional arguments + * are provided to each invoked method. If `path` is a function, it's invoked + * for, and `this` bound to, each element in `collection`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Array|Function|string} path The path of the method to invoke or + * the function invoked per iteration. + * @param {...*} [args] The arguments to invoke each method with. + * @returns {Array} Returns the array of results. + * @example + * + * _.invokeMap([[5, 1, 7], [3, 2, 1]], 'sort'); + * // => [[1, 5, 7], [1, 2, 3]] + * + * _.invokeMap([123, 456], String.prototype.split, ''); + * // => [['1', '2', '3'], ['4', '5', '6']] + */ + var invokeMap = baseRest(function(collection, path, args) { + var index = -1, + isFunc = typeof path == 'function', + result = isArrayLike(collection) ? Array(collection.length) : []; + + baseEach(collection, function(value) { + result[++index] = isFunc ? apply(path, value, args) : baseInvoke(value, path, args); + }); + return result; + }); + + /** + * Creates an object composed of keys generated from the results of running + * each element of `collection` thru `iteratee`. The corresponding value of + * each key is the last element responsible for generating the key. The + * iteratee is invoked with one argument: (value). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The iteratee to transform keys. + * @returns {Object} Returns the composed aggregate object. + * @example + * + * var array = [ + * { 'dir': 'left', 'code': 97 }, + * { 'dir': 'right', 'code': 100 } + * ]; + * + * _.keyBy(array, function(o) { + * return String.fromCharCode(o.code); + * }); + * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } } + * + * _.keyBy(array, 'dir'); + * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } } + */ + var keyBy = createAggregator(function(result, value, key) { + baseAssignValue(result, key, value); + }); + + /** + * Creates an array of values by running each element in `collection` thru + * `iteratee`. The iteratee is invoked with three arguments: + * (value, index|key, collection). + * + * Many lodash methods are guarded to work as iteratees for methods like + * `_.every`, `_.filter`, `_.map`, `_.mapValues`, `_.reject`, and `_.some`. + * + * The guarded methods are: + * `ary`, `chunk`, `curry`, `curryRight`, `drop`, `dropRight`, `every`, + * `fill`, `invert`, `parseInt`, `random`, `range`, `rangeRight`, `repeat`, + * `sampleSize`, `slice`, `some`, `sortBy`, `split`, `take`, `takeRight`, + * `template`, `trim`, `trimEnd`, `trimStart`, and `words` + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Array} Returns the new mapped array. + * @example + * + * function square(n) { + * return n * n; + * } + * + * _.map([4, 8], square); + * // => [16, 64] + * + * _.map({ 'a': 4, 'b': 8 }, square); + * // => [16, 64] (iteration order is not guaranteed) + * + * var users = [ + * { 'user': 'barney' }, + * { 'user': 'fred' } + * ]; + * + * // The `_.property` iteratee shorthand. + * _.map(users, 'user'); + * // => ['barney', 'fred'] + */ + function map(collection, iteratee) { + var func = isArray(collection) ? arrayMap : baseMap; + return func(collection, getIteratee(iteratee, 3)); + } + + /** + * This method is like `_.sortBy` except that it allows specifying the sort + * orders of the iteratees to sort by. If `orders` is unspecified, all values + * are sorted in ascending order. Otherwise, specify an order of "desc" for + * descending or "asc" for ascending sort order of corresponding values. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Array[]|Function[]|Object[]|string[]} [iteratees=[_.identity]] + * The iteratees to sort by. + * @param {string[]} [orders] The sort orders of `iteratees`. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`. + * @returns {Array} Returns the new sorted array. + * @example + * + * var users = [ + * { 'user': 'fred', 'age': 48 }, + * { 'user': 'barney', 'age': 34 }, + * { 'user': 'fred', 'age': 40 }, + * { 'user': 'barney', 'age': 36 } + * ]; + * + * // Sort by `user` in ascending order and by `age` in descending order. + * _.orderBy(users, ['user', 'age'], ['asc', 'desc']); + * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] + */ + function orderBy(collection, iteratees, orders, guard) { + if (collection == null) { + return []; + } + if (!isArray(iteratees)) { + iteratees = iteratees == null ? [] : [iteratees]; + } + orders = guard ? undefined : orders; + if (!isArray(orders)) { + orders = orders == null ? [] : [orders]; + } + return baseOrderBy(collection, iteratees, orders); + } + + /** + * Creates an array of elements split into two groups, the first of which + * contains elements `predicate` returns truthy for, the second of which + * contains elements `predicate` returns falsey for. The predicate is + * invoked with one argument: (value). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the array of grouped elements. + * @example + * + * var users = [ + * { 'user': 'barney', 'age': 36, 'active': false }, + * { 'user': 'fred', 'age': 40, 'active': true }, + * { 'user': 'pebbles', 'age': 1, 'active': false } + * ]; + * + * _.partition(users, function(o) { return o.active; }); + * // => objects for [['fred'], ['barney', 'pebbles']] + * + * // The `_.matches` iteratee shorthand. + * _.partition(users, { 'age': 1, 'active': false }); + * // => objects for [['pebbles'], ['barney', 'fred']] + * + * // The `_.matchesProperty` iteratee shorthand. + * _.partition(users, ['active', false]); + * // => objects for [['barney', 'pebbles'], ['fred']] + * + * // The `_.property` iteratee shorthand. + * _.partition(users, 'active'); + * // => objects for [['fred'], ['barney', 'pebbles']] + */ + var partition = createAggregator(function(result, value, key) { + result[key ? 0 : 1].push(value); + }, function() { return [[], []]; }); + + /** + * Reduces `collection` to a value which is the accumulated result of running + * each element in `collection` thru `iteratee`, where each successive + * invocation is supplied the return value of the previous. If `accumulator` + * is not given, the first element of `collection` is used as the initial + * value. The iteratee is invoked with four arguments: + * (accumulator, value, index|key, collection). + * + * Many lodash methods are guarded to work as iteratees for methods like + * `_.reduce`, `_.reduceRight`, and `_.transform`. + * + * The guarded methods are: + * `assign`, `defaults`, `defaultsDeep`, `includes`, `merge`, `orderBy`, + * and `sortBy` + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @param {*} [accumulator] The initial value. + * @returns {*} Returns the accumulated value. + * @see _.reduceRight + * @example + * + * _.reduce([1, 2], function(sum, n) { + * return sum + n; + * }, 0); + * // => 3 + * + * _.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) { + * (result[value] || (result[value] = [])).push(key); + * return result; + * }, {}); + * // => { '1': ['a', 'c'], '2': ['b'] } (iteration order is not guaranteed) + */ + function reduce(collection, iteratee, accumulator) { + var func = isArray(collection) ? arrayReduce : baseReduce, + initAccum = arguments.length < 3; + + return func(collection, getIteratee(iteratee, 4), accumulator, initAccum, baseEach); + } + + /** + * This method is like `_.reduce` except that it iterates over elements of + * `collection` from right to left. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @param {*} [accumulator] The initial value. + * @returns {*} Returns the accumulated value. + * @see _.reduce + * @example + * + * var array = [[0, 1], [2, 3], [4, 5]]; + * + * _.reduceRight(array, function(flattened, other) { + * return flattened.concat(other); + * }, []); + * // => [4, 5, 2, 3, 0, 1] + */ + function reduceRight(collection, iteratee, accumulator) { + var func = isArray(collection) ? arrayReduceRight : baseReduce, + initAccum = arguments.length < 3; + + return func(collection, getIteratee(iteratee, 4), accumulator, initAccum, baseEachRight); + } + + /** + * The opposite of `_.filter`; this method returns the elements of `collection` + * that `predicate` does **not** return truthy for. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {Array} Returns the new filtered array. + * @see _.filter + * @example + * + * var users = [ + * { 'user': 'barney', 'age': 36, 'active': false }, + * { 'user': 'fred', 'age': 40, 'active': true } + * ]; + * + * _.reject(users, function(o) { return !o.active; }); + * // => objects for ['fred'] + * + * // The `_.matches` iteratee shorthand. + * _.reject(users, { 'age': 40, 'active': true }); + * // => objects for ['barney'] + * + * // The `_.matchesProperty` iteratee shorthand. + * _.reject(users, ['active', false]); + * // => objects for ['fred'] + * + * // The `_.property` iteratee shorthand. + * _.reject(users, 'active'); + * // => objects for ['barney'] + */ + function reject(collection, predicate) { + var func = isArray(collection) ? arrayFilter : baseFilter; + return func(collection, negate(getIteratee(predicate, 3))); + } + + /** + * Gets a random element from `collection`. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Collection + * @param {Array|Object} collection The collection to sample. + * @returns {*} Returns the random element. + * @example + * + * _.sample([1, 2, 3, 4]); + * // => 2 + */ + function sample(collection) { + var func = isArray(collection) ? arraySample : baseSample; + return func(collection); + } + + /** + * Gets `n` random elements at unique keys from `collection` up to the + * size of `collection`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Collection + * @param {Array|Object} collection The collection to sample. + * @param {number} [n=1] The number of elements to sample. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Array} Returns the random elements. + * @example + * + * _.sampleSize([1, 2, 3], 2); + * // => [3, 1] + * + * _.sampleSize([1, 2, 3], 4); + * // => [2, 3, 1] + */ + function sampleSize(collection, n, guard) { + if ((guard ? isIterateeCall(collection, n, guard) : n === undefined)) { + n = 1; + } else { + n = toInteger(n); + } + var func = isArray(collection) ? arraySampleSize : baseSampleSize; + return func(collection, n); + } + + /** + * Creates an array of shuffled values, using a version of the + * [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher-Yates_shuffle). + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to shuffle. + * @returns {Array} Returns the new shuffled array. + * @example + * + * _.shuffle([1, 2, 3, 4]); + * // => [4, 1, 3, 2] + */ + function shuffle(collection) { + var func = isArray(collection) ? arrayShuffle : baseShuffle; + return func(collection); + } + + /** + * Gets the size of `collection` by returning its length for array-like + * values or the number of own enumerable string keyed properties for objects. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object|string} collection The collection to inspect. + * @returns {number} Returns the collection size. + * @example + * + * _.size([1, 2, 3]); + * // => 3 + * + * _.size({ 'a': 1, 'b': 2 }); + * // => 2 + * + * _.size('pebbles'); + * // => 7 + */ + function size(collection) { + if (collection == null) { + return 0; + } + if (isArrayLike(collection)) { + return isString(collection) ? stringSize(collection) : collection.length; + } + var tag = getTag(collection); + if (tag == mapTag || tag == setTag) { + return collection.size; + } + return baseKeys(collection).length; + } + + /** + * Checks if `predicate` returns truthy for **any** element of `collection`. + * Iteration is stopped once `predicate` returns truthy. The predicate is + * invoked with three arguments: (value, index|key, collection). + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {boolean} Returns `true` if any element passes the predicate check, + * else `false`. + * @example + * + * _.some([null, 0, 'yes', false], Boolean); + * // => true + * + * var users = [ + * { 'user': 'barney', 'active': true }, + * { 'user': 'fred', 'active': false } + * ]; + * + * // The `_.matches` iteratee shorthand. + * _.some(users, { 'user': 'barney', 'active': false }); + * // => false + * + * // The `_.matchesProperty` iteratee shorthand. + * _.some(users, ['active', false]); + * // => true + * + * // The `_.property` iteratee shorthand. + * _.some(users, 'active'); + * // => true + */ + function some(collection, predicate, guard) { + var func = isArray(collection) ? arraySome : baseSome; + if (guard && isIterateeCall(collection, predicate, guard)) { + predicate = undefined; + } + return func(collection, getIteratee(predicate, 3)); + } + + /** + * Creates an array of elements, sorted in ascending order by the results of + * running each element in a collection thru each iteratee. This method + * performs a stable sort, that is, it preserves the original sort order of + * equal elements. The iteratees are invoked with one argument: (value). + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Collection + * @param {Array|Object} collection The collection to iterate over. + * @param {...(Function|Function[])} [iteratees=[_.identity]] + * The iteratees to sort by. + * @returns {Array} Returns the new sorted array. + * @example + * + * var users = [ + * { 'user': 'fred', 'age': 48 }, + * { 'user': 'barney', 'age': 36 }, + * { 'user': 'fred', 'age': 40 }, + * { 'user': 'barney', 'age': 34 } + * ]; + * + * _.sortBy(users, [function(o) { return o.user; }]); + * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] + * + * _.sortBy(users, ['user', 'age']); + * // => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] + */ + var sortBy = baseRest(function(collection, iteratees) { + if (collection == null) { + return []; + } + var length = iteratees.length; + if (length > 1 && isIterateeCall(collection, iteratees[0], iteratees[1])) { + iteratees = []; + } else if (length > 2 && isIterateeCall(iteratees[0], iteratees[1], iteratees[2])) { + iteratees = [iteratees[0]]; + } + return baseOrderBy(collection, baseFlatten(iteratees, 1), []); + }); + + /*------------------------------------------------------------------------*/ + + /** + * Gets the timestamp of the number of milliseconds that have elapsed since + * the Unix epoch (1 January 1970 00:00:00 UTC). + * + * @static + * @memberOf _ + * @since 2.4.0 + * @category Date + * @returns {number} Returns the timestamp. + * @example + * + * _.defer(function(stamp) { + * console.log(_.now() - stamp); + * }, _.now()); + * // => Logs the number of milliseconds it took for the deferred invocation. + */ + var now = ctxNow || function() { + return root.Date.now(); + }; + + /*------------------------------------------------------------------------*/ + + /** + * The opposite of `_.before`; this method creates a function that invokes + * `func` once it's called `n` or more times. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {number} n The number of calls before `func` is invoked. + * @param {Function} func The function to restrict. + * @returns {Function} Returns the new restricted function. + * @example + * + * var saves = ['profile', 'settings']; + * + * var done = _.after(saves.length, function() { + * console.log('done saving!'); + * }); + * + * _.forEach(saves, function(type) { + * asyncSave({ 'type': type, 'complete': done }); + * }); + * // => Logs 'done saving!' after the two async saves have completed. + */ + function after(n, func) { + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + n = toInteger(n); + return function() { + if (--n < 1) { + return func.apply(this, arguments); + } + }; + } + + /** + * Creates a function that invokes `func`, with up to `n` arguments, + * ignoring any additional arguments. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Function + * @param {Function} func The function to cap arguments for. + * @param {number} [n=func.length] The arity cap. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Function} Returns the new capped function. + * @example + * + * _.map(['6', '8', '10'], _.ary(parseInt, 1)); + * // => [6, 8, 10] + */ + function ary(func, n, guard) { + n = guard ? undefined : n; + n = (func && n == null) ? func.length : n; + return createWrap(func, WRAP_ARY_FLAG, undefined, undefined, undefined, undefined, n); + } + + /** + * Creates a function that invokes `func`, with the `this` binding and arguments + * of the created function, while it's called less than `n` times. Subsequent + * calls to the created function return the result of the last `func` invocation. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Function + * @param {number} n The number of calls at which `func` is no longer invoked. + * @param {Function} func The function to restrict. + * @returns {Function} Returns the new restricted function. + * @example + * + * jQuery(element).on('click', _.before(5, addContactToList)); + * // => Allows adding up to 4 contacts to the list. + */ + function before(n, func) { + var result; + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + n = toInteger(n); + return function() { + if (--n > 0) { + result = func.apply(this, arguments); + } + if (n <= 1) { + func = undefined; + } + return result; + }; + } + + /** + * Creates a function that invokes `func` with the `this` binding of `thisArg` + * and `partials` prepended to the arguments it receives. + * + * The `_.bind.placeholder` value, which defaults to `_` in monolithic builds, + * may be used as a placeholder for partially applied arguments. + * + * **Note:** Unlike native `Function#bind`, this method doesn't set the "length" + * property of bound functions. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to bind. + * @param {*} thisArg The `this` binding of `func`. + * @param {...*} [partials] The arguments to be partially applied. + * @returns {Function} Returns the new bound function. + * @example + * + * function greet(greeting, punctuation) { + * return greeting + ' ' + this.user + punctuation; + * } + * + * var object = { 'user': 'fred' }; + * + * var bound = _.bind(greet, object, 'hi'); + * bound('!'); + * // => 'hi fred!' + * + * // Bound with placeholders. + * var bound = _.bind(greet, object, _, '!'); + * bound('hi'); + * // => 'hi fred!' + */ + var bind = baseRest(function(func, thisArg, partials) { + var bitmask = WRAP_BIND_FLAG; + if (partials.length) { + var holders = replaceHolders(partials, getHolder(bind)); + bitmask |= WRAP_PARTIAL_FLAG; + } + return createWrap(func, bitmask, thisArg, partials, holders); + }); + + /** + * Creates a function that invokes the method at `object[key]` with `partials` + * prepended to the arguments it receives. + * + * This method differs from `_.bind` by allowing bound functions to reference + * methods that may be redefined or don't yet exist. See + * [Peter Michaux's article](http://peter.michaux.ca/articles/lazy-function-definition-pattern) + * for more details. + * + * The `_.bindKey.placeholder` value, which defaults to `_` in monolithic + * builds, may be used as a placeholder for partially applied arguments. + * + * @static + * @memberOf _ + * @since 0.10.0 + * @category Function + * @param {Object} object The object to invoke the method on. + * @param {string} key The key of the method. + * @param {...*} [partials] The arguments to be partially applied. + * @returns {Function} Returns the new bound function. + * @example + * + * var object = { + * 'user': 'fred', + * 'greet': function(greeting, punctuation) { + * return greeting + ' ' + this.user + punctuation; + * } + * }; + * + * var bound = _.bindKey(object, 'greet', 'hi'); + * bound('!'); + * // => 'hi fred!' + * + * object.greet = function(greeting, punctuation) { + * return greeting + 'ya ' + this.user + punctuation; + * }; + * + * bound('!'); + * // => 'hiya fred!' + * + * // Bound with placeholders. + * var bound = _.bindKey(object, 'greet', _, '!'); + * bound('hi'); + * // => 'hiya fred!' + */ + var bindKey = baseRest(function(object, key, partials) { + var bitmask = WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG; + if (partials.length) { + var holders = replaceHolders(partials, getHolder(bindKey)); + bitmask |= WRAP_PARTIAL_FLAG; + } + return createWrap(key, bitmask, object, partials, holders); + }); + + /** + * Creates a function that accepts arguments of `func` and either invokes + * `func` returning its result, if at least `arity` number of arguments have + * been provided, or returns a function that accepts the remaining `func` + * arguments, and so on. The arity of `func` may be specified if `func.length` + * is not sufficient. + * + * The `_.curry.placeholder` value, which defaults to `_` in monolithic builds, + * may be used as a placeholder for provided arguments. + * + * **Note:** This method doesn't set the "length" property of curried functions. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Function + * @param {Function} func The function to curry. + * @param {number} [arity=func.length] The arity of `func`. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Function} Returns the new curried function. + * @example + * + * var abc = function(a, b, c) { + * return [a, b, c]; + * }; + * + * var curried = _.curry(abc); + * + * curried(1)(2)(3); + * // => [1, 2, 3] + * + * curried(1, 2)(3); + * // => [1, 2, 3] + * + * curried(1, 2, 3); + * // => [1, 2, 3] + * + * // Curried with placeholders. + * curried(1)(_, 3)(2); + * // => [1, 2, 3] + */ + function curry(func, arity, guard) { + arity = guard ? undefined : arity; + var result = createWrap(func, WRAP_CURRY_FLAG, undefined, undefined, undefined, undefined, undefined, arity); + result.placeholder = curry.placeholder; + return result; + } + + /** + * This method is like `_.curry` except that arguments are applied to `func` + * in the manner of `_.partialRight` instead of `_.partial`. + * + * The `_.curryRight.placeholder` value, which defaults to `_` in monolithic + * builds, may be used as a placeholder for provided arguments. + * + * **Note:** This method doesn't set the "length" property of curried functions. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Function + * @param {Function} func The function to curry. + * @param {number} [arity=func.length] The arity of `func`. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Function} Returns the new curried function. + * @example + * + * var abc = function(a, b, c) { + * return [a, b, c]; + * }; + * + * var curried = _.curryRight(abc); + * + * curried(3)(2)(1); + * // => [1, 2, 3] + * + * curried(2, 3)(1); + * // => [1, 2, 3] + * + * curried(1, 2, 3); + * // => [1, 2, 3] + * + * // Curried with placeholders. + * curried(3)(1, _)(2); + * // => [1, 2, 3] + */ + function curryRight(func, arity, guard) { + arity = guard ? undefined : arity; + var result = createWrap(func, WRAP_CURRY_RIGHT_FLAG, undefined, undefined, undefined, undefined, undefined, arity); + result.placeholder = curryRight.placeholder; + return result; + } + + /** + * Creates a debounced function that delays invoking `func` until after `wait` + * milliseconds have elapsed since the last time the debounced function was + * invoked. The debounced function comes with a `cancel` method to cancel + * delayed `func` invocations and a `flush` method to immediately invoke them. + * Provide `options` to indicate whether `func` should be invoked on the + * leading and/or trailing edge of the `wait` timeout. The `func` is invoked + * with the last arguments provided to the debounced function. Subsequent + * calls to the debounced function return the result of the last `func` + * invocation. + * + * **Note:** If `leading` and `trailing` options are `true`, `func` is + * invoked on the trailing edge of the timeout only if the debounced function + * is invoked more than once during the `wait` timeout. + * + * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred + * until to the next tick, similar to `setTimeout` with a timeout of `0`. + * + * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) + * for details over the differences between `_.debounce` and `_.throttle`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to debounce. + * @param {number} [wait=0] The number of milliseconds to delay. + * @param {Object} [options={}] The options object. + * @param {boolean} [options.leading=false] + * Specify invoking on the leading edge of the timeout. + * @param {number} [options.maxWait] + * The maximum time `func` is allowed to be delayed before it's invoked. + * @param {boolean} [options.trailing=true] + * Specify invoking on the trailing edge of the timeout. + * @returns {Function} Returns the new debounced function. + * @example + * + * // Avoid costly calculations while the window size is in flux. + * jQuery(window).on('resize', _.debounce(calculateLayout, 150)); + * + * // Invoke `sendMail` when clicked, debouncing subsequent calls. + * jQuery(element).on('click', _.debounce(sendMail, 300, { + * 'leading': true, + * 'trailing': false + * })); + * + * // Ensure `batchLog` is invoked once after 1 second of debounced calls. + * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); + * var source = new EventSource('/stream'); + * jQuery(source).on('message', debounced); + * + * // Cancel the trailing debounced invocation. + * jQuery(window).on('popstate', debounced.cancel); + */ + function debounce(func, wait, options) { + var lastArgs, + lastThis, + maxWait, + result, + timerId, + lastCallTime, + lastInvokeTime = 0, + leading = false, + maxing = false, + trailing = true; + + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + wait = toNumber(wait) || 0; + if (isObject(options)) { + leading = !!options.leading; + maxing = 'maxWait' in options; + maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait; + trailing = 'trailing' in options ? !!options.trailing : trailing; + } + + function invokeFunc(time) { + var args = lastArgs, + thisArg = lastThis; + + lastArgs = lastThis = undefined; + lastInvokeTime = time; + result = func.apply(thisArg, args); + return result; + } + + function leadingEdge(time) { + // Reset any `maxWait` timer. + lastInvokeTime = time; + // Start the timer for the trailing edge. + timerId = setTimeout(timerExpired, wait); + // Invoke the leading edge. + return leading ? invokeFunc(time) : result; + } + + function remainingWait(time) { + var timeSinceLastCall = time - lastCallTime, + timeSinceLastInvoke = time - lastInvokeTime, + timeWaiting = wait - timeSinceLastCall; + + return maxing + ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) + : timeWaiting; + } + + function shouldInvoke(time) { + var timeSinceLastCall = time - lastCallTime, + timeSinceLastInvoke = time - lastInvokeTime; + + // Either this is the first call, activity has stopped and we're at the + // trailing edge, the system time has gone backwards and we're treating + // it as the trailing edge, or we've hit the `maxWait` limit. + return (lastCallTime === undefined || (timeSinceLastCall >= wait) || + (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait)); + } + + function timerExpired() { + var time = now(); + if (shouldInvoke(time)) { + return trailingEdge(time); + } + // Restart the timer. + timerId = setTimeout(timerExpired, remainingWait(time)); + } + + function trailingEdge(time) { + timerId = undefined; + + // Only invoke if we have `lastArgs` which means `func` has been + // debounced at least once. + if (trailing && lastArgs) { + return invokeFunc(time); + } + lastArgs = lastThis = undefined; + return result; + } + + function cancel() { + if (timerId !== undefined) { + clearTimeout(timerId); + } + lastInvokeTime = 0; + lastArgs = lastCallTime = lastThis = timerId = undefined; + } + + function flush() { + return timerId === undefined ? result : trailingEdge(now()); + } + + function debounced() { + var time = now(), + isInvoking = shouldInvoke(time); + + lastArgs = arguments; + lastThis = this; + lastCallTime = time; + + if (isInvoking) { + if (timerId === undefined) { + return leadingEdge(lastCallTime); + } + if (maxing) { + // Handle invocations in a tight loop. + timerId = setTimeout(timerExpired, wait); + return invokeFunc(lastCallTime); + } + } + if (timerId === undefined) { + timerId = setTimeout(timerExpired, wait); + } + return result; + } + debounced.cancel = cancel; + debounced.flush = flush; + return debounced; + } + + /** + * Defers invoking the `func` until the current call stack has cleared. Any + * additional arguments are provided to `func` when it's invoked. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to defer. + * @param {...*} [args] The arguments to invoke `func` with. + * @returns {number} Returns the timer id. + * @example + * + * _.defer(function(text) { + * console.log(text); + * }, 'deferred'); + * // => Logs 'deferred' after one millisecond. + */ + var defer = baseRest(function(func, args) { + return baseDelay(func, 1, args); + }); + + /** + * Invokes `func` after `wait` milliseconds. Any additional arguments are + * provided to `func` when it's invoked. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to delay. + * @param {number} wait The number of milliseconds to delay invocation. + * @param {...*} [args] The arguments to invoke `func` with. + * @returns {number} Returns the timer id. + * @example + * + * _.delay(function(text) { + * console.log(text); + * }, 1000, 'later'); + * // => Logs 'later' after one second. + */ + var delay = baseRest(function(func, wait, args) { + return baseDelay(func, toNumber(wait) || 0, args); + }); + + /** + * Creates a function that invokes `func` with arguments reversed. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Function + * @param {Function} func The function to flip arguments for. + * @returns {Function} Returns the new flipped function. + * @example + * + * var flipped = _.flip(function() { + * return _.toArray(arguments); + * }); + * + * flipped('a', 'b', 'c', 'd'); + * // => ['d', 'c', 'b', 'a'] + */ + function flip(func) { + return createWrap(func, WRAP_FLIP_FLAG); + } + + /** + * Creates a function that memoizes the result of `func`. If `resolver` is + * provided, it determines the cache key for storing the result based on the + * arguments provided to the memoized function. By default, the first argument + * provided to the memoized function is used as the map cache key. The `func` + * is invoked with the `this` binding of the memoized function. + * + * **Note:** The cache is exposed as the `cache` property on the memoized + * function. Its creation may be customized by replacing the `_.memoize.Cache` + * constructor with one whose instances implement the + * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object) + * method interface of `clear`, `delete`, `get`, `has`, and `set`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to have its output memoized. + * @param {Function} [resolver] The function to resolve the cache key. + * @returns {Function} Returns the new memoized function. + * @example + * + * var object = { 'a': 1, 'b': 2 }; + * var other = { 'c': 3, 'd': 4 }; + * + * var values = _.memoize(_.values); + * values(object); + * // => [1, 2] + * + * values(other); + * // => [3, 4] + * + * object.a = 2; + * values(object); + * // => [1, 2] + * + * // Modify the result cache. + * values.cache.set(object, ['a', 'b']); + * values(object); + * // => ['a', 'b'] + * + * // Replace `_.memoize.Cache`. + * _.memoize.Cache = WeakMap; + */ + function memoize(func, resolver) { + if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) { + throw new TypeError(FUNC_ERROR_TEXT); + } + var memoized = function() { + var args = arguments, + key = resolver ? resolver.apply(this, args) : args[0], + cache = memoized.cache; + + if (cache.has(key)) { + return cache.get(key); + } + var result = func.apply(this, args); + memoized.cache = cache.set(key, result) || cache; + return result; + }; + memoized.cache = new (memoize.Cache || MapCache); + return memoized; + } + + // Expose `MapCache`. + memoize.Cache = MapCache; + + /** + * Creates a function that negates the result of the predicate `func`. The + * `func` predicate is invoked with the `this` binding and arguments of the + * created function. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Function + * @param {Function} predicate The predicate to negate. + * @returns {Function} Returns the new negated function. + * @example + * + * function isEven(n) { + * return n % 2 == 0; + * } + * + * _.filter([1, 2, 3, 4, 5, 6], _.negate(isEven)); + * // => [1, 3, 5] + */ + function negate(predicate) { + if (typeof predicate != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + return function() { + var args = arguments; + switch (args.length) { + case 0: return !predicate.call(this); + case 1: return !predicate.call(this, args[0]); + case 2: return !predicate.call(this, args[0], args[1]); + case 3: return !predicate.call(this, args[0], args[1], args[2]); + } + return !predicate.apply(this, args); + }; + } + + /** + * Creates a function that is restricted to invoking `func` once. Repeat calls + * to the function return the value of the first invocation. The `func` is + * invoked with the `this` binding and arguments of the created function. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to restrict. + * @returns {Function} Returns the new restricted function. + * @example + * + * var initialize = _.once(createApplication); + * initialize(); + * initialize(); + * // => `createApplication` is invoked once + */ + function once(func) { + return before(2, func); + } + + /** + * Creates a function that invokes `func` with its arguments transformed. + * + * @static + * @since 4.0.0 + * @memberOf _ + * @category Function + * @param {Function} func The function to wrap. + * @param {...(Function|Function[])} [transforms=[_.identity]] + * The argument transforms. + * @returns {Function} Returns the new function. + * @example + * + * function doubled(n) { + * return n * 2; + * } + * + * function square(n) { + * return n * n; + * } + * + * var func = _.overArgs(function(x, y) { + * return [x, y]; + * }, [square, doubled]); + * + * func(9, 3); + * // => [81, 6] + * + * func(10, 5); + * // => [100, 10] + */ + var overArgs = castRest(function(func, transforms) { + transforms = (transforms.length == 1 && isArray(transforms[0])) + ? arrayMap(transforms[0], baseUnary(getIteratee())) + : arrayMap(baseFlatten(transforms, 1), baseUnary(getIteratee())); + + var funcsLength = transforms.length; + return baseRest(function(args) { + var index = -1, + length = nativeMin(args.length, funcsLength); + + while (++index < length) { + args[index] = transforms[index].call(this, args[index]); + } + return apply(func, this, args); + }); + }); + + /** + * Creates a function that invokes `func` with `partials` prepended to the + * arguments it receives. This method is like `_.bind` except it does **not** + * alter the `this` binding. + * + * The `_.partial.placeholder` value, which defaults to `_` in monolithic + * builds, may be used as a placeholder for partially applied arguments. + * + * **Note:** This method doesn't set the "length" property of partially + * applied functions. + * + * @static + * @memberOf _ + * @since 0.2.0 + * @category Function + * @param {Function} func The function to partially apply arguments to. + * @param {...*} [partials] The arguments to be partially applied. + * @returns {Function} Returns the new partially applied function. + * @example + * + * function greet(greeting, name) { + * return greeting + ' ' + name; + * } + * + * var sayHelloTo = _.partial(greet, 'hello'); + * sayHelloTo('fred'); + * // => 'hello fred' + * + * // Partially applied with placeholders. + * var greetFred = _.partial(greet, _, 'fred'); + * greetFred('hi'); + * // => 'hi fred' + */ + var partial = baseRest(function(func, partials) { + var holders = replaceHolders(partials, getHolder(partial)); + return createWrap(func, WRAP_PARTIAL_FLAG, undefined, partials, holders); + }); + + /** + * This method is like `_.partial` except that partially applied arguments + * are appended to the arguments it receives. + * + * The `_.partialRight.placeholder` value, which defaults to `_` in monolithic + * builds, may be used as a placeholder for partially applied arguments. + * + * **Note:** This method doesn't set the "length" property of partially + * applied functions. + * + * @static + * @memberOf _ + * @since 1.0.0 + * @category Function + * @param {Function} func The function to partially apply arguments to. + * @param {...*} [partials] The arguments to be partially applied. + * @returns {Function} Returns the new partially applied function. + * @example + * + * function greet(greeting, name) { + * return greeting + ' ' + name; + * } + * + * var greetFred = _.partialRight(greet, 'fred'); + * greetFred('hi'); + * // => 'hi fred' + * + * // Partially applied with placeholders. + * var sayHelloTo = _.partialRight(greet, 'hello', _); + * sayHelloTo('fred'); + * // => 'hello fred' + */ + var partialRight = baseRest(function(func, partials) { + var holders = replaceHolders(partials, getHolder(partialRight)); + return createWrap(func, WRAP_PARTIAL_RIGHT_FLAG, undefined, partials, holders); + }); + + /** + * Creates a function that invokes `func` with arguments arranged according + * to the specified `indexes` where the argument value at the first index is + * provided as the first argument, the argument value at the second index is + * provided as the second argument, and so on. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Function + * @param {Function} func The function to rearrange arguments for. + * @param {...(number|number[])} indexes The arranged argument indexes. + * @returns {Function} Returns the new function. + * @example + * + * var rearged = _.rearg(function(a, b, c) { + * return [a, b, c]; + * }, [2, 0, 1]); + * + * rearged('b', 'c', 'a') + * // => ['a', 'b', 'c'] + */ + var rearg = flatRest(function(func, indexes) { + return createWrap(func, WRAP_REARG_FLAG, undefined, undefined, undefined, indexes); + }); + + /** + * Creates a function that invokes `func` with the `this` binding of the + * created function and arguments from `start` and beyond provided as + * an array. + * + * **Note:** This method is based on the + * [rest parameter](https://mdn.io/rest_parameters). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Function + * @param {Function} func The function to apply a rest parameter to. + * @param {number} [start=func.length-1] The start position of the rest parameter. + * @returns {Function} Returns the new function. + * @example + * + * var say = _.rest(function(what, names) { + * return what + ' ' + _.initial(names).join(', ') + + * (_.size(names) > 1 ? ', & ' : '') + _.last(names); + * }); + * + * say('hello', 'fred', 'barney', 'pebbles'); + * // => 'hello fred, barney, & pebbles' + */ + function rest(func, start) { + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + start = start === undefined ? start : toInteger(start); + return baseRest(func, start); + } + + /** + * Creates a function that invokes `func` with the `this` binding of the + * create function and an array of arguments much like + * [`Function#apply`](http://www.ecma-international.org/ecma-262/7.0/#sec-function.prototype.apply). + * + * **Note:** This method is based on the + * [spread operator](https://mdn.io/spread_operator). + * + * @static + * @memberOf _ + * @since 3.2.0 + * @category Function + * @param {Function} func The function to spread arguments over. + * @param {number} [start=0] The start position of the spread. + * @returns {Function} Returns the new function. + * @example + * + * var say = _.spread(function(who, what) { + * return who + ' says ' + what; + * }); + * + * say(['fred', 'hello']); + * // => 'fred says hello' + * + * var numbers = Promise.all([ + * Promise.resolve(40), + * Promise.resolve(36) + * ]); + * + * numbers.then(_.spread(function(x, y) { + * return x + y; + * })); + * // => a Promise of 76 + */ + function spread(func, start) { + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + start = start == null ? 0 : nativeMax(toInteger(start), 0); + return baseRest(function(args) { + var array = args[start], + otherArgs = castSlice(args, 0, start); + + if (array) { + arrayPush(otherArgs, array); + } + return apply(func, this, otherArgs); + }); + } + + /** + * Creates a throttled function that only invokes `func` at most once per + * every `wait` milliseconds. The throttled function comes with a `cancel` + * method to cancel delayed `func` invocations and a `flush` method to + * immediately invoke them. Provide `options` to indicate whether `func` + * should be invoked on the leading and/or trailing edge of the `wait` + * timeout. The `func` is invoked with the last arguments provided to the + * throttled function. Subsequent calls to the throttled function return the + * result of the last `func` invocation. + * + * **Note:** If `leading` and `trailing` options are `true`, `func` is + * invoked on the trailing edge of the timeout only if the throttled function + * is invoked more than once during the `wait` timeout. + * + * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred + * until to the next tick, similar to `setTimeout` with a timeout of `0`. + * + * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) + * for details over the differences between `_.throttle` and `_.debounce`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {Function} func The function to throttle. + * @param {number} [wait=0] The number of milliseconds to throttle invocations to. + * @param {Object} [options={}] The options object. + * @param {boolean} [options.leading=true] + * Specify invoking on the leading edge of the timeout. + * @param {boolean} [options.trailing=true] + * Specify invoking on the trailing edge of the timeout. + * @returns {Function} Returns the new throttled function. + * @example + * + * // Avoid excessively updating the position while scrolling. + * jQuery(window).on('scroll', _.throttle(updatePosition, 100)); + * + * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes. + * var throttled = _.throttle(renewToken, 300000, { 'trailing': false }); + * jQuery(element).on('click', throttled); + * + * // Cancel the trailing throttled invocation. + * jQuery(window).on('popstate', throttled.cancel); + */ + function throttle(func, wait, options) { + var leading = true, + trailing = true; + + if (typeof func != 'function') { + throw new TypeError(FUNC_ERROR_TEXT); + } + if (isObject(options)) { + leading = 'leading' in options ? !!options.leading : leading; + trailing = 'trailing' in options ? !!options.trailing : trailing; + } + return debounce(func, wait, { + 'leading': leading, + 'maxWait': wait, + 'trailing': trailing + }); + } + + /** + * Creates a function that accepts up to one argument, ignoring any + * additional arguments. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Function + * @param {Function} func The function to cap arguments for. + * @returns {Function} Returns the new capped function. + * @example + * + * _.map(['6', '8', '10'], _.unary(parseInt)); + * // => [6, 8, 10] + */ + function unary(func) { + return ary(func, 1); + } + + /** + * Creates a function that provides `value` to `wrapper` as its first + * argument. Any additional arguments provided to the function are appended + * to those provided to the `wrapper`. The wrapper is invoked with the `this` + * binding of the created function. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Function + * @param {*} value The value to wrap. + * @param {Function} [wrapper=identity] The wrapper function. + * @returns {Function} Returns the new function. + * @example + * + * var p = _.wrap(_.escape, function(func, text) { + * return '

' + func(text) + '

'; + * }); + * + * p('fred, barney, & pebbles'); + * // => '

fred, barney, & pebbles

' + */ + function wrap(value, wrapper) { + return partial(castFunction(wrapper), value); + } + + /*------------------------------------------------------------------------*/ + + /** + * Casts `value` as an array if it's not one. + * + * @static + * @memberOf _ + * @since 4.4.0 + * @category Lang + * @param {*} value The value to inspect. + * @returns {Array} Returns the cast array. + * @example + * + * _.castArray(1); + * // => [1] + * + * _.castArray({ 'a': 1 }); + * // => [{ 'a': 1 }] + * + * _.castArray('abc'); + * // => ['abc'] + * + * _.castArray(null); + * // => [null] + * + * _.castArray(undefined); + * // => [undefined] + * + * _.castArray(); + * // => [] + * + * var array = [1, 2, 3]; + * console.log(_.castArray(array) === array); + * // => true + */ + function castArray() { + if (!arguments.length) { + return []; + } + var value = arguments[0]; + return isArray(value) ? value : [value]; + } + + /** + * Creates a shallow clone of `value`. + * + * **Note:** This method is loosely based on the + * [structured clone algorithm](https://mdn.io/Structured_clone_algorithm) + * and supports cloning arrays, array buffers, booleans, date objects, maps, + * numbers, `Object` objects, regexes, sets, strings, symbols, and typed + * arrays. The own enumerable properties of `arguments` objects are cloned + * as plain objects. An empty object is returned for uncloneable values such + * as error objects, functions, DOM nodes, and WeakMaps. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to clone. + * @returns {*} Returns the cloned value. + * @see _.cloneDeep + * @example + * + * var objects = [{ 'a': 1 }, { 'b': 2 }]; + * + * var shallow = _.clone(objects); + * console.log(shallow[0] === objects[0]); + * // => true + */ + function clone(value) { + return baseClone(value, CLONE_SYMBOLS_FLAG); + } + + /** + * This method is like `_.clone` except that it accepts `customizer` which + * is invoked to produce the cloned value. If `customizer` returns `undefined`, + * cloning is handled by the method instead. The `customizer` is invoked with + * up to four arguments; (value [, index|key, object, stack]). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to clone. + * @param {Function} [customizer] The function to customize cloning. + * @returns {*} Returns the cloned value. + * @see _.cloneDeepWith + * @example + * + * function customizer(value) { + * if (_.isElement(value)) { + * return value.cloneNode(false); + * } + * } + * + * var el = _.cloneWith(document.body, customizer); + * + * console.log(el === document.body); + * // => false + * console.log(el.nodeName); + * // => 'BODY' + * console.log(el.childNodes.length); + * // => 0 + */ + function cloneWith(value, customizer) { + customizer = typeof customizer == 'function' ? customizer : undefined; + return baseClone(value, CLONE_SYMBOLS_FLAG, customizer); + } + + /** + * This method is like `_.clone` except that it recursively clones `value`. + * + * @static + * @memberOf _ + * @since 1.0.0 + * @category Lang + * @param {*} value The value to recursively clone. + * @returns {*} Returns the deep cloned value. + * @see _.clone + * @example + * + * var objects = [{ 'a': 1 }, { 'b': 2 }]; + * + * var deep = _.cloneDeep(objects); + * console.log(deep[0] === objects[0]); + * // => false + */ + function cloneDeep(value) { + return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG); + } + + /** + * This method is like `_.cloneWith` except that it recursively clones `value`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to recursively clone. + * @param {Function} [customizer] The function to customize cloning. + * @returns {*} Returns the deep cloned value. + * @see _.cloneWith + * @example + * + * function customizer(value) { + * if (_.isElement(value)) { + * return value.cloneNode(true); + * } + * } + * + * var el = _.cloneDeepWith(document.body, customizer); + * + * console.log(el === document.body); + * // => false + * console.log(el.nodeName); + * // => 'BODY' + * console.log(el.childNodes.length); + * // => 20 + */ + function cloneDeepWith(value, customizer) { + customizer = typeof customizer == 'function' ? customizer : undefined; + return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG, customizer); + } + + /** + * Checks if `object` conforms to `source` by invoking the predicate + * properties of `source` with the corresponding property values of `object`. + * + * **Note:** This method is equivalent to `_.conforms` when `source` is + * partially applied. + * + * @static + * @memberOf _ + * @since 4.14.0 + * @category Lang + * @param {Object} object The object to inspect. + * @param {Object} source The object of property predicates to conform to. + * @returns {boolean} Returns `true` if `object` conforms, else `false`. + * @example + * + * var object = { 'a': 1, 'b': 2 }; + * + * _.conformsTo(object, { 'b': function(n) { return n > 1; } }); + * // => true + * + * _.conformsTo(object, { 'b': function(n) { return n > 2; } }); + * // => false + */ + function conformsTo(object, source) { + return source == null || baseConformsTo(object, source, keys(source)); + } + + /** + * Performs a + * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) + * comparison between two values to determine if they are equivalent. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if the values are equivalent, else `false`. + * @example + * + * var object = { 'a': 1 }; + * var other = { 'a': 1 }; + * + * _.eq(object, object); + * // => true + * + * _.eq(object, other); + * // => false + * + * _.eq('a', 'a'); + * // => true + * + * _.eq('a', Object('a')); + * // => false + * + * _.eq(NaN, NaN); + * // => true + */ + function eq(value, other) { + return value === other || (value !== value && other !== other); + } + + /** + * Checks if `value` is greater than `other`. + * + * @static + * @memberOf _ + * @since 3.9.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if `value` is greater than `other`, + * else `false`. + * @see _.lt + * @example + * + * _.gt(3, 1); + * // => true + * + * _.gt(3, 3); + * // => false + * + * _.gt(1, 3); + * // => false + */ + var gt = createRelationalOperation(baseGt); + + /** + * Checks if `value` is greater than or equal to `other`. + * + * @static + * @memberOf _ + * @since 3.9.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if `value` is greater than or equal to + * `other`, else `false`. + * @see _.lte + * @example + * + * _.gte(3, 1); + * // => true + * + * _.gte(3, 3); + * // => true + * + * _.gte(1, 3); + * // => false + */ + var gte = createRelationalOperation(function(value, other) { + return value >= other; + }); + + /** + * Checks if `value` is likely an `arguments` object. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an `arguments` object, + * else `false`. + * @example + * + * _.isArguments(function() { return arguments; }()); + * // => true + * + * _.isArguments([1, 2, 3]); + * // => false + */ + var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) { + return isObjectLike(value) && hasOwnProperty.call(value, 'callee') && + !propertyIsEnumerable.call(value, 'callee'); + }; + + /** + * Checks if `value` is classified as an `Array` object. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an array, else `false`. + * @example + * + * _.isArray([1, 2, 3]); + * // => true + * + * _.isArray(document.body.children); + * // => false + * + * _.isArray('abc'); + * // => false + * + * _.isArray(_.noop); + * // => false + */ + var isArray = Array.isArray; + + /** + * Checks if `value` is classified as an `ArrayBuffer` object. + * + * @static + * @memberOf _ + * @since 4.3.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`. + * @example + * + * _.isArrayBuffer(new ArrayBuffer(2)); + * // => true + * + * _.isArrayBuffer(new Array(2)); + * // => false + */ + var isArrayBuffer = nodeIsArrayBuffer ? baseUnary(nodeIsArrayBuffer) : baseIsArrayBuffer; + + /** + * Checks if `value` is array-like. A value is considered array-like if it's + * not a function and has a `value.length` that's an integer greater than or + * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is array-like, else `false`. + * @example + * + * _.isArrayLike([1, 2, 3]); + * // => true + * + * _.isArrayLike(document.body.children); + * // => true + * + * _.isArrayLike('abc'); + * // => true + * + * _.isArrayLike(_.noop); + * // => false + */ + function isArrayLike(value) { + return value != null && isLength(value.length) && !isFunction(value); + } + + /** + * This method is like `_.isArrayLike` except that it also checks if `value` + * is an object. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an array-like object, + * else `false`. + * @example + * + * _.isArrayLikeObject([1, 2, 3]); + * // => true + * + * _.isArrayLikeObject(document.body.children); + * // => true + * + * _.isArrayLikeObject('abc'); + * // => false + * + * _.isArrayLikeObject(_.noop); + * // => false + */ + function isArrayLikeObject(value) { + return isObjectLike(value) && isArrayLike(value); + } + + /** + * Checks if `value` is classified as a boolean primitive or object. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a boolean, else `false`. + * @example + * + * _.isBoolean(false); + * // => true + * + * _.isBoolean(null); + * // => false + */ + function isBoolean(value) { + return value === true || value === false || + (isObjectLike(value) && baseGetTag(value) == boolTag); + } + + /** + * Checks if `value` is a buffer. + * + * @static + * @memberOf _ + * @since 4.3.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a buffer, else `false`. + * @example + * + * _.isBuffer(new Buffer(2)); + * // => true + * + * _.isBuffer(new Uint8Array(2)); + * // => false + */ + var isBuffer = nativeIsBuffer || stubFalse; + + /** + * Checks if `value` is classified as a `Date` object. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a date object, else `false`. + * @example + * + * _.isDate(new Date); + * // => true + * + * _.isDate('Mon April 23 2012'); + * // => false + */ + var isDate = nodeIsDate ? baseUnary(nodeIsDate) : baseIsDate; + + /** + * Checks if `value` is likely a DOM element. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`. + * @example + * + * _.isElement(document.body); + * // => true + * + * _.isElement(''); + * // => false + */ + function isElement(value) { + return isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value); + } + + /** + * Checks if `value` is an empty object, collection, map, or set. + * + * Objects are considered empty if they have no own enumerable string keyed + * properties. + * + * Array-like values such as `arguments` objects, arrays, buffers, strings, or + * jQuery-like collections are considered empty if they have a `length` of `0`. + * Similarly, maps and sets are considered empty if they have a `size` of `0`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is empty, else `false`. + * @example + * + * _.isEmpty(null); + * // => true + * + * _.isEmpty(true); + * // => true + * + * _.isEmpty(1); + * // => true + * + * _.isEmpty([1, 2, 3]); + * // => false + * + * _.isEmpty({ 'a': 1 }); + * // => false + */ + function isEmpty(value) { + if (value == null) { + return true; + } + if (isArrayLike(value) && + (isArray(value) || typeof value == 'string' || typeof value.splice == 'function' || + isBuffer(value) || isTypedArray(value) || isArguments(value))) { + return !value.length; + } + var tag = getTag(value); + if (tag == mapTag || tag == setTag) { + return !value.size; + } + if (isPrototype(value)) { + return !baseKeys(value).length; + } + for (var key in value) { + if (hasOwnProperty.call(value, key)) { + return false; + } + } + return true; + } + + /** + * Performs a deep comparison between two values to determine if they are + * equivalent. + * + * **Note:** This method supports comparing arrays, array buffers, booleans, + * date objects, error objects, maps, numbers, `Object` objects, regexes, + * sets, strings, symbols, and typed arrays. `Object` objects are compared + * by their own, not inherited, enumerable properties. Functions and DOM + * nodes are compared by strict equality, i.e. `===`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if the values are equivalent, else `false`. + * @example + * + * var object = { 'a': 1 }; + * var other = { 'a': 1 }; + * + * _.isEqual(object, other); + * // => true + * + * object === other; + * // => false + */ + function isEqual(value, other) { + return baseIsEqual(value, other); + } + + /** + * This method is like `_.isEqual` except that it accepts `customizer` which + * is invoked to compare values. If `customizer` returns `undefined`, comparisons + * are handled by the method instead. The `customizer` is invoked with up to + * six arguments: (objValue, othValue [, index|key, object, other, stack]). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @param {Function} [customizer] The function to customize comparisons. + * @returns {boolean} Returns `true` if the values are equivalent, else `false`. + * @example + * + * function isGreeting(value) { + * return /^h(?:i|ello)$/.test(value); + * } + * + * function customizer(objValue, othValue) { + * if (isGreeting(objValue) && isGreeting(othValue)) { + * return true; + * } + * } + * + * var array = ['hello', 'goodbye']; + * var other = ['hi', 'goodbye']; + * + * _.isEqualWith(array, other, customizer); + * // => true + */ + function isEqualWith(value, other, customizer) { + customizer = typeof customizer == 'function' ? customizer : undefined; + var result = customizer ? customizer(value, other) : undefined; + return result === undefined ? baseIsEqual(value, other, undefined, customizer) : !!result; + } + + /** + * Checks if `value` is an `Error`, `EvalError`, `RangeError`, `ReferenceError`, + * `SyntaxError`, `TypeError`, or `URIError` object. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an error object, else `false`. + * @example + * + * _.isError(new Error); + * // => true + * + * _.isError(Error); + * // => false + */ + function isError(value) { + if (!isObjectLike(value)) { + return false; + } + var tag = baseGetTag(value); + return tag == errorTag || tag == domExcTag || + (typeof value.message == 'string' && typeof value.name == 'string' && !isPlainObject(value)); + } + + /** + * Checks if `value` is a finite primitive number. + * + * **Note:** This method is based on + * [`Number.isFinite`](https://mdn.io/Number/isFinite). + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a finite number, else `false`. + * @example + * + * _.isFinite(3); + * // => true + * + * _.isFinite(Number.MIN_VALUE); + * // => true + * + * _.isFinite(Infinity); + * // => false + * + * _.isFinite('3'); + * // => false + */ + function isFinite(value) { + return typeof value == 'number' && nativeIsFinite(value); + } + + /** + * Checks if `value` is classified as a `Function` object. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a function, else `false`. + * @example + * + * _.isFunction(_); + * // => true + * + * _.isFunction(/abc/); + * // => false + */ + function isFunction(value) { + if (!isObject(value)) { + return false; + } + // The use of `Object#toString` avoids issues with the `typeof` operator + // in Safari 9 which returns 'object' for typed arrays and other constructors. + var tag = baseGetTag(value); + return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag; + } + + /** + * Checks if `value` is an integer. + * + * **Note:** This method is based on + * [`Number.isInteger`](https://mdn.io/Number/isInteger). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an integer, else `false`. + * @example + * + * _.isInteger(3); + * // => true + * + * _.isInteger(Number.MIN_VALUE); + * // => false + * + * _.isInteger(Infinity); + * // => false + * + * _.isInteger('3'); + * // => false + */ + function isInteger(value) { + return typeof value == 'number' && value == toInteger(value); + } + + /** + * Checks if `value` is a valid array-like length. + * + * **Note:** This method is loosely based on + * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a valid length, else `false`. + * @example + * + * _.isLength(3); + * // => true + * + * _.isLength(Number.MIN_VALUE); + * // => false + * + * _.isLength(Infinity); + * // => false + * + * _.isLength('3'); + * // => false + */ + function isLength(value) { + return typeof value == 'number' && + value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER; + } + + /** + * Checks if `value` is the + * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) + * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an object, else `false`. + * @example + * + * _.isObject({}); + * // => true + * + * _.isObject([1, 2, 3]); + * // => true + * + * _.isObject(_.noop); + * // => true + * + * _.isObject(null); + * // => false + */ + function isObject(value) { + var type = typeof value; + return value != null && (type == 'object' || type == 'function'); + } + + /** + * Checks if `value` is object-like. A value is object-like if it's not `null` + * and has a `typeof` result of "object". + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is object-like, else `false`. + * @example + * + * _.isObjectLike({}); + * // => true + * + * _.isObjectLike([1, 2, 3]); + * // => true + * + * _.isObjectLike(_.noop); + * // => false + * + * _.isObjectLike(null); + * // => false + */ + function isObjectLike(value) { + return value != null && typeof value == 'object'; + } + + /** + * Checks if `value` is classified as a `Map` object. + * + * @static + * @memberOf _ + * @since 4.3.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a map, else `false`. + * @example + * + * _.isMap(new Map); + * // => true + * + * _.isMap(new WeakMap); + * // => false + */ + var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap; + + /** + * Performs a partial deep comparison between `object` and `source` to + * determine if `object` contains equivalent property values. + * + * **Note:** This method is equivalent to `_.matches` when `source` is + * partially applied. + * + * Partial comparisons will match empty array and empty object `source` + * values against any array or object value, respectively. See `_.isEqual` + * for a list of supported value comparisons. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Lang + * @param {Object} object The object to inspect. + * @param {Object} source The object of property values to match. + * @returns {boolean} Returns `true` if `object` is a match, else `false`. + * @example + * + * var object = { 'a': 1, 'b': 2 }; + * + * _.isMatch(object, { 'b': 2 }); + * // => true + * + * _.isMatch(object, { 'b': 1 }); + * // => false + */ + function isMatch(object, source) { + return object === source || baseIsMatch(object, source, getMatchData(source)); + } + + /** + * This method is like `_.isMatch` except that it accepts `customizer` which + * is invoked to compare values. If `customizer` returns `undefined`, comparisons + * are handled by the method instead. The `customizer` is invoked with five + * arguments: (objValue, srcValue, index|key, object, source). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {Object} object The object to inspect. + * @param {Object} source The object of property values to match. + * @param {Function} [customizer] The function to customize comparisons. + * @returns {boolean} Returns `true` if `object` is a match, else `false`. + * @example + * + * function isGreeting(value) { + * return /^h(?:i|ello)$/.test(value); + * } + * + * function customizer(objValue, srcValue) { + * if (isGreeting(objValue) && isGreeting(srcValue)) { + * return true; + * } + * } + * + * var object = { 'greeting': 'hello' }; + * var source = { 'greeting': 'hi' }; + * + * _.isMatchWith(object, source, customizer); + * // => true + */ + function isMatchWith(object, source, customizer) { + customizer = typeof customizer == 'function' ? customizer : undefined; + return baseIsMatch(object, source, getMatchData(source), customizer); + } + + /** + * Checks if `value` is `NaN`. + * + * **Note:** This method is based on + * [`Number.isNaN`](https://mdn.io/Number/isNaN) and is not the same as + * global [`isNaN`](https://mdn.io/isNaN) which returns `true` for + * `undefined` and other non-number values. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`. + * @example + * + * _.isNaN(NaN); + * // => true + * + * _.isNaN(new Number(NaN)); + * // => true + * + * isNaN(undefined); + * // => true + * + * _.isNaN(undefined); + * // => false + */ + function isNaN(value) { + // An `NaN` primitive is the only value that is not equal to itself. + // Perform the `toStringTag` check first to avoid errors with some + // ActiveX objects in IE. + return isNumber(value) && value != +value; + } + + /** + * Checks if `value` is a pristine native function. + * + * **Note:** This method can't reliably detect native functions in the presence + * of the core-js package because core-js circumvents this kind of detection. + * Despite multiple requests, the core-js maintainer has made it clear: any + * attempt to fix the detection will be obstructed. As a result, we're left + * with little choice but to throw an error. Unfortunately, this also affects + * packages, like [babel-polyfill](https://www.npmjs.com/package/babel-polyfill), + * which rely on core-js. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a native function, + * else `false`. + * @example + * + * _.isNative(Array.prototype.push); + * // => true + * + * _.isNative(_); + * // => false + */ + function isNative(value) { + if (isMaskable(value)) { + throw new Error(CORE_ERROR_TEXT); + } + return baseIsNative(value); + } + + /** + * Checks if `value` is `null`. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is `null`, else `false`. + * @example + * + * _.isNull(null); + * // => true + * + * _.isNull(void 0); + * // => false + */ + function isNull(value) { + return value === null; + } + + /** + * Checks if `value` is `null` or `undefined`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is nullish, else `false`. + * @example + * + * _.isNil(null); + * // => true + * + * _.isNil(void 0); + * // => true + * + * _.isNil(NaN); + * // => false + */ + function isNil(value) { + return value == null; + } + + /** + * Checks if `value` is classified as a `Number` primitive or object. + * + * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are + * classified as numbers, use the `_.isFinite` method. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a number, else `false`. + * @example + * + * _.isNumber(3); + * // => true + * + * _.isNumber(Number.MIN_VALUE); + * // => true + * + * _.isNumber(Infinity); + * // => true + * + * _.isNumber('3'); + * // => false + */ + function isNumber(value) { + return typeof value == 'number' || + (isObjectLike(value) && baseGetTag(value) == numberTag); + } + + /** + * Checks if `value` is a plain object, that is, an object created by the + * `Object` constructor or one with a `[[Prototype]]` of `null`. + * + * @static + * @memberOf _ + * @since 0.8.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a plain object, else `false`. + * @example + * + * function Foo() { + * this.a = 1; + * } + * + * _.isPlainObject(new Foo); + * // => false + * + * _.isPlainObject([1, 2, 3]); + * // => false + * + * _.isPlainObject({ 'x': 0, 'y': 0 }); + * // => true + * + * _.isPlainObject(Object.create(null)); + * // => true + */ + function isPlainObject(value) { + if (!isObjectLike(value) || baseGetTag(value) != objectTag) { + return false; + } + var proto = getPrototype(value); + if (proto === null) { + return true; + } + var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor; + return typeof Ctor == 'function' && Ctor instanceof Ctor && + funcToString.call(Ctor) == objectCtorString; + } + + /** + * Checks if `value` is classified as a `RegExp` object. + * + * @static + * @memberOf _ + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a regexp, else `false`. + * @example + * + * _.isRegExp(/abc/); + * // => true + * + * _.isRegExp('/abc/'); + * // => false + */ + var isRegExp = nodeIsRegExp ? baseUnary(nodeIsRegExp) : baseIsRegExp; + + /** + * Checks if `value` is a safe integer. An integer is safe if it's an IEEE-754 + * double precision number which isn't the result of a rounded unsafe integer. + * + * **Note:** This method is based on + * [`Number.isSafeInteger`](https://mdn.io/Number/isSafeInteger). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a safe integer, else `false`. + * @example + * + * _.isSafeInteger(3); + * // => true + * + * _.isSafeInteger(Number.MIN_VALUE); + * // => false + * + * _.isSafeInteger(Infinity); + * // => false + * + * _.isSafeInteger('3'); + * // => false + */ + function isSafeInteger(value) { + return isInteger(value) && value >= -MAX_SAFE_INTEGER && value <= MAX_SAFE_INTEGER; + } + + /** + * Checks if `value` is classified as a `Set` object. + * + * @static + * @memberOf _ + * @since 4.3.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a set, else `false`. + * @example + * + * _.isSet(new Set); + * // => true + * + * _.isSet(new WeakSet); + * // => false + */ + var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet; + + /** + * Checks if `value` is classified as a `String` primitive or object. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a string, else `false`. + * @example + * + * _.isString('abc'); + * // => true + * + * _.isString(1); + * // => false + */ + function isString(value) { + return typeof value == 'string' || + (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag); + } + + /** + * Checks if `value` is classified as a `Symbol` primitive or object. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a symbol, else `false`. + * @example + * + * _.isSymbol(Symbol.iterator); + * // => true + * + * _.isSymbol('abc'); + * // => false + */ + function isSymbol(value) { + return typeof value == 'symbol' || + (isObjectLike(value) && baseGetTag(value) == symbolTag); + } + + /** + * Checks if `value` is classified as a typed array. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a typed array, else `false`. + * @example + * + * _.isTypedArray(new Uint8Array); + * // => true + * + * _.isTypedArray([]); + * // => false + */ + var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray; + + /** + * Checks if `value` is `undefined`. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is `undefined`, else `false`. + * @example + * + * _.isUndefined(void 0); + * // => true + * + * _.isUndefined(null); + * // => false + */ + function isUndefined(value) { + return value === undefined; + } + + /** + * Checks if `value` is classified as a `WeakMap` object. + * + * @static + * @memberOf _ + * @since 4.3.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a weak map, else `false`. + * @example + * + * _.isWeakMap(new WeakMap); + * // => true + * + * _.isWeakMap(new Map); + * // => false + */ + function isWeakMap(value) { + return isObjectLike(value) && getTag(value) == weakMapTag; + } + + /** + * Checks if `value` is classified as a `WeakSet` object. + * + * @static + * @memberOf _ + * @since 4.3.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is a weak set, else `false`. + * @example + * + * _.isWeakSet(new WeakSet); + * // => true + * + * _.isWeakSet(new Set); + * // => false + */ + function isWeakSet(value) { + return isObjectLike(value) && baseGetTag(value) == weakSetTag; + } + + /** + * Checks if `value` is less than `other`. + * + * @static + * @memberOf _ + * @since 3.9.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if `value` is less than `other`, + * else `false`. + * @see _.gt + * @example + * + * _.lt(1, 3); + * // => true + * + * _.lt(3, 3); + * // => false + * + * _.lt(3, 1); + * // => false + */ + var lt = createRelationalOperation(baseLt); + + /** + * Checks if `value` is less than or equal to `other`. + * + * @static + * @memberOf _ + * @since 3.9.0 + * @category Lang + * @param {*} value The value to compare. + * @param {*} other The other value to compare. + * @returns {boolean} Returns `true` if `value` is less than or equal to + * `other`, else `false`. + * @see _.gte + * @example + * + * _.lte(1, 3); + * // => true + * + * _.lte(3, 3); + * // => true + * + * _.lte(3, 1); + * // => false + */ + var lte = createRelationalOperation(function(value, other) { + return value <= other; + }); + + /** + * Converts `value` to an array. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Lang + * @param {*} value The value to convert. + * @returns {Array} Returns the converted array. + * @example + * + * _.toArray({ 'a': 1, 'b': 2 }); + * // => [1, 2] + * + * _.toArray('abc'); + * // => ['a', 'b', 'c'] + * + * _.toArray(1); + * // => [] + * + * _.toArray(null); + * // => [] + */ + function toArray(value) { + if (!value) { + return []; + } + if (isArrayLike(value)) { + return isString(value) ? stringToArray(value) : copyArray(value); + } + if (symIterator && value[symIterator]) { + return iteratorToArray(value[symIterator]()); + } + var tag = getTag(value), + func = tag == mapTag ? mapToArray : (tag == setTag ? setToArray : values); + + return func(value); + } + + /** + * Converts `value` to a finite number. + * + * @static + * @memberOf _ + * @since 4.12.0 + * @category Lang + * @param {*} value The value to convert. + * @returns {number} Returns the converted number. + * @example + * + * _.toFinite(3.2); + * // => 3.2 + * + * _.toFinite(Number.MIN_VALUE); + * // => 5e-324 + * + * _.toFinite(Infinity); + * // => 1.7976931348623157e+308 + * + * _.toFinite('3.2'); + * // => 3.2 + */ + function toFinite(value) { + if (!value) { + return value === 0 ? value : 0; + } + value = toNumber(value); + if (value === INFINITY || value === -INFINITY) { + var sign = (value < 0 ? -1 : 1); + return sign * MAX_INTEGER; + } + return value === value ? value : 0; + } + + /** + * Converts `value` to an integer. + * + * **Note:** This method is loosely based on + * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to convert. + * @returns {number} Returns the converted integer. + * @example + * + * _.toInteger(3.2); + * // => 3 + * + * _.toInteger(Number.MIN_VALUE); + * // => 0 + * + * _.toInteger(Infinity); + * // => 1.7976931348623157e+308 + * + * _.toInteger('3.2'); + * // => 3 + */ + function toInteger(value) { + var result = toFinite(value), + remainder = result % 1; + + return result === result ? (remainder ? result - remainder : result) : 0; + } + + /** + * Converts `value` to an integer suitable for use as the length of an + * array-like object. + * + * **Note:** This method is based on + * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to convert. + * @returns {number} Returns the converted integer. + * @example + * + * _.toLength(3.2); + * // => 3 + * + * _.toLength(Number.MIN_VALUE); + * // => 0 + * + * _.toLength(Infinity); + * // => 4294967295 + * + * _.toLength('3.2'); + * // => 3 + */ + function toLength(value) { + return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH) : 0; + } + + /** + * Converts `value` to a number. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to process. + * @returns {number} Returns the number. + * @example + * + * _.toNumber(3.2); + * // => 3.2 + * + * _.toNumber(Number.MIN_VALUE); + * // => 5e-324 + * + * _.toNumber(Infinity); + * // => Infinity + * + * _.toNumber('3.2'); + * // => 3.2 + */ + function toNumber(value) { + if (typeof value == 'number') { + return value; + } + if (isSymbol(value)) { + return NAN; + } + if (isObject(value)) { + var other = typeof value.valueOf == 'function' ? value.valueOf() : value; + value = isObject(other) ? (other + '') : other; + } + if (typeof value != 'string') { + return value === 0 ? value : +value; + } + value = value.replace(reTrim, ''); + var isBinary = reIsBinary.test(value); + return (isBinary || reIsOctal.test(value)) + ? freeParseInt(value.slice(2), isBinary ? 2 : 8) + : (reIsBadHex.test(value) ? NAN : +value); + } + + /** + * Converts `value` to a plain object flattening inherited enumerable string + * keyed properties of `value` to own properties of the plain object. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Lang + * @param {*} value The value to convert. + * @returns {Object} Returns the converted plain object. + * @example + * + * function Foo() { + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.assign({ 'a': 1 }, new Foo); + * // => { 'a': 1, 'b': 2 } + * + * _.assign({ 'a': 1 }, _.toPlainObject(new Foo)); + * // => { 'a': 1, 'b': 2, 'c': 3 } + */ + function toPlainObject(value) { + return copyObject(value, keysIn(value)); + } + + /** + * Converts `value` to a safe integer. A safe integer can be compared and + * represented correctly. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to convert. + * @returns {number} Returns the converted integer. + * @example + * + * _.toSafeInteger(3.2); + * // => 3 + * + * _.toSafeInteger(Number.MIN_VALUE); + * // => 0 + * + * _.toSafeInteger(Infinity); + * // => 9007199254740991 + * + * _.toSafeInteger('3.2'); + * // => 3 + */ + function toSafeInteger(value) { + return value + ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER) + : (value === 0 ? value : 0); + } + + /** + * Converts `value` to a string. An empty string is returned for `null` + * and `undefined` values. The sign of `-0` is preserved. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Lang + * @param {*} value The value to convert. + * @returns {string} Returns the converted string. + * @example + * + * _.toString(null); + * // => '' + * + * _.toString(-0); + * // => '-0' + * + * _.toString([1, 2, 3]); + * // => '1,2,3' + */ + function toString(value) { + return value == null ? '' : baseToString(value); + } + + /*------------------------------------------------------------------------*/ + + /** + * Assigns own enumerable string keyed properties of source objects to the + * destination object. Source objects are applied from left to right. + * Subsequent sources overwrite property assignments of previous sources. + * + * **Note:** This method mutates `object` and is loosely based on + * [`Object.assign`](https://mdn.io/Object/assign). + * + * @static + * @memberOf _ + * @since 0.10.0 + * @category Object + * @param {Object} object The destination object. + * @param {...Object} [sources] The source objects. + * @returns {Object} Returns `object`. + * @see _.assignIn + * @example + * + * function Foo() { + * this.a = 1; + * } + * + * function Bar() { + * this.c = 3; + * } + * + * Foo.prototype.b = 2; + * Bar.prototype.d = 4; + * + * _.assign({ 'a': 0 }, new Foo, new Bar); + * // => { 'a': 1, 'c': 3 } + */ + var assign = createAssigner(function(object, source) { + if (isPrototype(source) || isArrayLike(source)) { + copyObject(source, keys(source), object); + return; + } + for (var key in source) { + if (hasOwnProperty.call(source, key)) { + assignValue(object, key, source[key]); + } + } + }); + + /** + * This method is like `_.assign` except that it iterates over own and + * inherited source properties. + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @alias extend + * @category Object + * @param {Object} object The destination object. + * @param {...Object} [sources] The source objects. + * @returns {Object} Returns `object`. + * @see _.assign + * @example + * + * function Foo() { + * this.a = 1; + * } + * + * function Bar() { + * this.c = 3; + * } + * + * Foo.prototype.b = 2; + * Bar.prototype.d = 4; + * + * _.assignIn({ 'a': 0 }, new Foo, new Bar); + * // => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 } + */ + var assignIn = createAssigner(function(object, source) { + copyObject(source, keysIn(source), object); + }); + + /** + * This method is like `_.assignIn` except that it accepts `customizer` + * which is invoked to produce the assigned values. If `customizer` returns + * `undefined`, assignment is handled by the method instead. The `customizer` + * is invoked with five arguments: (objValue, srcValue, key, object, source). + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @alias extendWith + * @category Object + * @param {Object} object The destination object. + * @param {...Object} sources The source objects. + * @param {Function} [customizer] The function to customize assigned values. + * @returns {Object} Returns `object`. + * @see _.assignWith + * @example + * + * function customizer(objValue, srcValue) { + * return _.isUndefined(objValue) ? srcValue : objValue; + * } + * + * var defaults = _.partialRight(_.assignInWith, customizer); + * + * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }); + * // => { 'a': 1, 'b': 2 } + */ + var assignInWith = createAssigner(function(object, source, srcIndex, customizer) { + copyObject(source, keysIn(source), object, customizer); + }); + + /** + * This method is like `_.assign` except that it accepts `customizer` + * which is invoked to produce the assigned values. If `customizer` returns + * `undefined`, assignment is handled by the method instead. The `customizer` + * is invoked with five arguments: (objValue, srcValue, key, object, source). + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The destination object. + * @param {...Object} sources The source objects. + * @param {Function} [customizer] The function to customize assigned values. + * @returns {Object} Returns `object`. + * @see _.assignInWith + * @example + * + * function customizer(objValue, srcValue) { + * return _.isUndefined(objValue) ? srcValue : objValue; + * } + * + * var defaults = _.partialRight(_.assignWith, customizer); + * + * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }); + * // => { 'a': 1, 'b': 2 } + */ + var assignWith = createAssigner(function(object, source, srcIndex, customizer) { + copyObject(source, keys(source), object, customizer); + }); + + /** + * Creates an array of values corresponding to `paths` of `object`. + * + * @static + * @memberOf _ + * @since 1.0.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {...(string|string[])} [paths] The property paths to pick. + * @returns {Array} Returns the picked values. + * @example + * + * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] }; + * + * _.at(object, ['a[0].b.c', 'a[1]']); + * // => [3, 4] + */ + var at = flatRest(baseAt); + + /** + * Creates an object that inherits from the `prototype` object. If a + * `properties` object is given, its own enumerable string keyed properties + * are assigned to the created object. + * + * @static + * @memberOf _ + * @since 2.3.0 + * @category Object + * @param {Object} prototype The object to inherit from. + * @param {Object} [properties] The properties to assign to the object. + * @returns {Object} Returns the new object. + * @example + * + * function Shape() { + * this.x = 0; + * this.y = 0; + * } + * + * function Circle() { + * Shape.call(this); + * } + * + * Circle.prototype = _.create(Shape.prototype, { + * 'constructor': Circle + * }); + * + * var circle = new Circle; + * circle instanceof Circle; + * // => true + * + * circle instanceof Shape; + * // => true + */ + function create(prototype, properties) { + var result = baseCreate(prototype); + return properties == null ? result : baseAssign(result, properties); + } + + /** + * Assigns own and inherited enumerable string keyed properties of source + * objects to the destination object for all destination properties that + * resolve to `undefined`. Source objects are applied from left to right. + * Once a property is set, additional values of the same property are ignored. + * + * **Note:** This method mutates `object`. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The destination object. + * @param {...Object} [sources] The source objects. + * @returns {Object} Returns `object`. + * @see _.defaultsDeep + * @example + * + * _.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }); + * // => { 'a': 1, 'b': 2 } + */ + var defaults = baseRest(function(object, sources) { + object = Object(object); + + var index = -1; + var length = sources.length; + var guard = length > 2 ? sources[2] : undefined; + + if (guard && isIterateeCall(sources[0], sources[1], guard)) { + length = 1; + } + + while (++index < length) { + var source = sources[index]; + var props = keysIn(source); + var propsIndex = -1; + var propsLength = props.length; + + while (++propsIndex < propsLength) { + var key = props[propsIndex]; + var value = object[key]; + + if (value === undefined || + (eq(value, objectProto[key]) && !hasOwnProperty.call(object, key))) { + object[key] = source[key]; + } + } + } + + return object; + }); + + /** + * This method is like `_.defaults` except that it recursively assigns + * default properties. + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 3.10.0 + * @category Object + * @param {Object} object The destination object. + * @param {...Object} [sources] The source objects. + * @returns {Object} Returns `object`. + * @see _.defaults + * @example + * + * _.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } }); + * // => { 'a': { 'b': 2, 'c': 3 } } + */ + var defaultsDeep = baseRest(function(args) { + args.push(undefined, customDefaultsMerge); + return apply(mergeWith, undefined, args); + }); + + /** + * This method is like `_.find` except that it returns the key of the first + * element `predicate` returns truthy for instead of the element itself. + * + * @static + * @memberOf _ + * @since 1.1.0 + * @category Object + * @param {Object} object The object to inspect. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {string|undefined} Returns the key of the matched element, + * else `undefined`. + * @example + * + * var users = { + * 'barney': { 'age': 36, 'active': true }, + * 'fred': { 'age': 40, 'active': false }, + * 'pebbles': { 'age': 1, 'active': true } + * }; + * + * _.findKey(users, function(o) { return o.age < 40; }); + * // => 'barney' (iteration order is not guaranteed) + * + * // The `_.matches` iteratee shorthand. + * _.findKey(users, { 'age': 1, 'active': true }); + * // => 'pebbles' + * + * // The `_.matchesProperty` iteratee shorthand. + * _.findKey(users, ['active', false]); + * // => 'fred' + * + * // The `_.property` iteratee shorthand. + * _.findKey(users, 'active'); + * // => 'barney' + */ + function findKey(object, predicate) { + return baseFindKey(object, getIteratee(predicate, 3), baseForOwn); + } + + /** + * This method is like `_.findKey` except that it iterates over elements of + * a collection in the opposite order. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Object + * @param {Object} object The object to inspect. + * @param {Function} [predicate=_.identity] The function invoked per iteration. + * @returns {string|undefined} Returns the key of the matched element, + * else `undefined`. + * @example + * + * var users = { + * 'barney': { 'age': 36, 'active': true }, + * 'fred': { 'age': 40, 'active': false }, + * 'pebbles': { 'age': 1, 'active': true } + * }; + * + * _.findLastKey(users, function(o) { return o.age < 40; }); + * // => returns 'pebbles' assuming `_.findKey` returns 'barney' + * + * // The `_.matches` iteratee shorthand. + * _.findLastKey(users, { 'age': 36, 'active': true }); + * // => 'barney' + * + * // The `_.matchesProperty` iteratee shorthand. + * _.findLastKey(users, ['active', false]); + * // => 'fred' + * + * // The `_.property` iteratee shorthand. + * _.findLastKey(users, 'active'); + * // => 'pebbles' + */ + function findLastKey(object, predicate) { + return baseFindKey(object, getIteratee(predicate, 3), baseForOwnRight); + } + + /** + * Iterates over own and inherited enumerable string keyed properties of an + * object and invokes `iteratee` for each property. The iteratee is invoked + * with three arguments: (value, key, object). Iteratee functions may exit + * iteration early by explicitly returning `false`. + * + * @static + * @memberOf _ + * @since 0.3.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Object} Returns `object`. + * @see _.forInRight + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.forIn(new Foo, function(value, key) { + * console.log(key); + * }); + * // => Logs 'a', 'b', then 'c' (iteration order is not guaranteed). + */ + function forIn(object, iteratee) { + return object == null + ? object + : baseFor(object, getIteratee(iteratee, 3), keysIn); + } + + /** + * This method is like `_.forIn` except that it iterates over properties of + * `object` in the opposite order. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Object} Returns `object`. + * @see _.forIn + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.forInRight(new Foo, function(value, key) { + * console.log(key); + * }); + * // => Logs 'c', 'b', then 'a' assuming `_.forIn` logs 'a', 'b', then 'c'. + */ + function forInRight(object, iteratee) { + return object == null + ? object + : baseForRight(object, getIteratee(iteratee, 3), keysIn); + } + + /** + * Iterates over own enumerable string keyed properties of an object and + * invokes `iteratee` for each property. The iteratee is invoked with three + * arguments: (value, key, object). Iteratee functions may exit iteration + * early by explicitly returning `false`. + * + * @static + * @memberOf _ + * @since 0.3.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Object} Returns `object`. + * @see _.forOwnRight + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.forOwn(new Foo, function(value, key) { + * console.log(key); + * }); + * // => Logs 'a' then 'b' (iteration order is not guaranteed). + */ + function forOwn(object, iteratee) { + return object && baseForOwn(object, getIteratee(iteratee, 3)); + } + + /** + * This method is like `_.forOwn` except that it iterates over properties of + * `object` in the opposite order. + * + * @static + * @memberOf _ + * @since 2.0.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Object} Returns `object`. + * @see _.forOwn + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.forOwnRight(new Foo, function(value, key) { + * console.log(key); + * }); + * // => Logs 'b' then 'a' assuming `_.forOwn` logs 'a' then 'b'. + */ + function forOwnRight(object, iteratee) { + return object && baseForOwnRight(object, getIteratee(iteratee, 3)); + } + + /** + * Creates an array of function property names from own enumerable properties + * of `object`. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The object to inspect. + * @returns {Array} Returns the function names. + * @see _.functionsIn + * @example + * + * function Foo() { + * this.a = _.constant('a'); + * this.b = _.constant('b'); + * } + * + * Foo.prototype.c = _.constant('c'); + * + * _.functions(new Foo); + * // => ['a', 'b'] + */ + function functions(object) { + return object == null ? [] : baseFunctions(object, keys(object)); + } + + /** + * Creates an array of function property names from own and inherited + * enumerable properties of `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The object to inspect. + * @returns {Array} Returns the function names. + * @see _.functions + * @example + * + * function Foo() { + * this.a = _.constant('a'); + * this.b = _.constant('b'); + * } + * + * Foo.prototype.c = _.constant('c'); + * + * _.functionsIn(new Foo); + * // => ['a', 'b', 'c'] + */ + function functionsIn(object) { + return object == null ? [] : baseFunctions(object, keysIn(object)); + } + + /** + * Gets the value at `path` of `object`. If the resolved value is + * `undefined`, the `defaultValue` is returned in its place. + * + * @static + * @memberOf _ + * @since 3.7.0 + * @category Object + * @param {Object} object The object to query. + * @param {Array|string} path The path of the property to get. + * @param {*} [defaultValue] The value returned for `undefined` resolved values. + * @returns {*} Returns the resolved value. + * @example + * + * var object = { 'a': [{ 'b': { 'c': 3 } }] }; + * + * _.get(object, 'a[0].b.c'); + * // => 3 + * + * _.get(object, ['a', '0', 'b', 'c']); + * // => 3 + * + * _.get(object, 'a.b.c', 'default'); + * // => 'default' + */ + function get(object, path, defaultValue) { + var result = object == null ? undefined : baseGet(object, path); + return result === undefined ? defaultValue : result; + } + + /** + * Checks if `path` is a direct property of `object`. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The object to query. + * @param {Array|string} path The path to check. + * @returns {boolean} Returns `true` if `path` exists, else `false`. + * @example + * + * var object = { 'a': { 'b': 2 } }; + * var other = _.create({ 'a': _.create({ 'b': 2 }) }); + * + * _.has(object, 'a'); + * // => true + * + * _.has(object, 'a.b'); + * // => true + * + * _.has(object, ['a', 'b']); + * // => true + * + * _.has(other, 'a'); + * // => false + */ + function has(object, path) { + return object != null && hasPath(object, path, baseHas); + } + + /** + * Checks if `path` is a direct or inherited property of `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The object to query. + * @param {Array|string} path The path to check. + * @returns {boolean} Returns `true` if `path` exists, else `false`. + * @example + * + * var object = _.create({ 'a': _.create({ 'b': 2 }) }); + * + * _.hasIn(object, 'a'); + * // => true + * + * _.hasIn(object, 'a.b'); + * // => true + * + * _.hasIn(object, ['a', 'b']); + * // => true + * + * _.hasIn(object, 'b'); + * // => false + */ + function hasIn(object, path) { + return object != null && hasPath(object, path, baseHasIn); + } + + /** + * Creates an object composed of the inverted keys and values of `object`. + * If `object` contains duplicate values, subsequent values overwrite + * property assignments of previous values. + * + * @static + * @memberOf _ + * @since 0.7.0 + * @category Object + * @param {Object} object The object to invert. + * @returns {Object} Returns the new inverted object. + * @example + * + * var object = { 'a': 1, 'b': 2, 'c': 1 }; + * + * _.invert(object); + * // => { '1': 'c', '2': 'b' } + */ + var invert = createInverter(function(result, value, key) { + if (value != null && + typeof value.toString != 'function') { + value = nativeObjectToString.call(value); + } + + result[value] = key; + }, constant(identity)); + + /** + * This method is like `_.invert` except that the inverted object is generated + * from the results of running each element of `object` thru `iteratee`. The + * corresponding inverted value of each inverted key is an array of keys + * responsible for generating the inverted value. The iteratee is invoked + * with one argument: (value). + * + * @static + * @memberOf _ + * @since 4.1.0 + * @category Object + * @param {Object} object The object to invert. + * @param {Function} [iteratee=_.identity] The iteratee invoked per element. + * @returns {Object} Returns the new inverted object. + * @example + * + * var object = { 'a': 1, 'b': 2, 'c': 1 }; + * + * _.invertBy(object); + * // => { '1': ['a', 'c'], '2': ['b'] } + * + * _.invertBy(object, function(value) { + * return 'group' + value; + * }); + * // => { 'group1': ['a', 'c'], 'group2': ['b'] } + */ + var invertBy = createInverter(function(result, value, key) { + if (value != null && + typeof value.toString != 'function') { + value = nativeObjectToString.call(value); + } + + if (hasOwnProperty.call(result, value)) { + result[value].push(key); + } else { + result[value] = [key]; + } + }, getIteratee); + + /** + * Invokes the method at `path` of `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The object to query. + * @param {Array|string} path The path of the method to invoke. + * @param {...*} [args] The arguments to invoke the method with. + * @returns {*} Returns the result of the invoked method. + * @example + * + * var object = { 'a': [{ 'b': { 'c': [1, 2, 3, 4] } }] }; + * + * _.invoke(object, 'a[0].b.c.slice', 1, 3); + * // => [2, 3] + */ + var invoke = baseRest(baseInvoke); + + /** + * Creates an array of the own enumerable property names of `object`. + * + * **Note:** Non-object values are coerced to objects. See the + * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys) + * for more details. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.keys(new Foo); + * // => ['a', 'b'] (iteration order is not guaranteed) + * + * _.keys('hi'); + * // => ['0', '1'] + */ + function keys(object) { + return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object); + } + + /** + * Creates an array of the own and inherited enumerable property names of `object`. + * + * **Note:** Non-object values are coerced to objects. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property names. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.keysIn(new Foo); + * // => ['a', 'b', 'c'] (iteration order is not guaranteed) + */ + function keysIn(object) { + return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object); + } + + /** + * The opposite of `_.mapValues`; this method creates an object with the + * same values as `object` and keys generated by running each own enumerable + * string keyed property of `object` thru `iteratee`. The iteratee is invoked + * with three arguments: (value, key, object). + * + * @static + * @memberOf _ + * @since 3.8.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Object} Returns the new mapped object. + * @see _.mapValues + * @example + * + * _.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) { + * return key + value; + * }); + * // => { 'a1': 1, 'b2': 2 } + */ + function mapKeys(object, iteratee) { + var result = {}; + iteratee = getIteratee(iteratee, 3); + + baseForOwn(object, function(value, key, object) { + baseAssignValue(result, iteratee(value, key, object), value); + }); + return result; + } + + /** + * Creates an object with the same keys as `object` and values generated + * by running each own enumerable string keyed property of `object` thru + * `iteratee`. The iteratee is invoked with three arguments: + * (value, key, object). + * + * @static + * @memberOf _ + * @since 2.4.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @returns {Object} Returns the new mapped object. + * @see _.mapKeys + * @example + * + * var users = { + * 'fred': { 'user': 'fred', 'age': 40 }, + * 'pebbles': { 'user': 'pebbles', 'age': 1 } + * }; + * + * _.mapValues(users, function(o) { return o.age; }); + * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed) + * + * // The `_.property` iteratee shorthand. + * _.mapValues(users, 'age'); + * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed) + */ + function mapValues(object, iteratee) { + var result = {}; + iteratee = getIteratee(iteratee, 3); + + baseForOwn(object, function(value, key, object) { + baseAssignValue(result, key, iteratee(value, key, object)); + }); + return result; + } + + /** + * This method is like `_.assign` except that it recursively merges own and + * inherited enumerable string keyed properties of source objects into the + * destination object. Source properties that resolve to `undefined` are + * skipped if a destination value exists. Array and plain object properties + * are merged recursively. Other objects and value types are overridden by + * assignment. Source objects are applied from left to right. Subsequent + * sources overwrite property assignments of previous sources. + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 0.5.0 + * @category Object + * @param {Object} object The destination object. + * @param {...Object} [sources] The source objects. + * @returns {Object} Returns `object`. + * @example + * + * var object = { + * 'a': [{ 'b': 2 }, { 'd': 4 }] + * }; + * + * var other = { + * 'a': [{ 'c': 3 }, { 'e': 5 }] + * }; + * + * _.merge(object, other); + * // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] } + */ + var merge = createAssigner(function(object, source, srcIndex) { + baseMerge(object, source, srcIndex); + }); + + /** + * This method is like `_.merge` except that it accepts `customizer` which + * is invoked to produce the merged values of the destination and source + * properties. If `customizer` returns `undefined`, merging is handled by the + * method instead. The `customizer` is invoked with six arguments: + * (objValue, srcValue, key, object, source, stack). + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The destination object. + * @param {...Object} sources The source objects. + * @param {Function} customizer The function to customize assigned values. + * @returns {Object} Returns `object`. + * @example + * + * function customizer(objValue, srcValue) { + * if (_.isArray(objValue)) { + * return objValue.concat(srcValue); + * } + * } + * + * var object = { 'a': [1], 'b': [2] }; + * var other = { 'a': [3], 'b': [4] }; + * + * _.mergeWith(object, other, customizer); + * // => { 'a': [1, 3], 'b': [2, 4] } + */ + var mergeWith = createAssigner(function(object, source, srcIndex, customizer) { + baseMerge(object, source, srcIndex, customizer); + }); + + /** + * The opposite of `_.pick`; this method creates an object composed of the + * own and inherited enumerable property paths of `object` that are not omitted. + * + * **Note:** This method is considerably slower than `_.pick`. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The source object. + * @param {...(string|string[])} [paths] The property paths to omit. + * @returns {Object} Returns the new object. + * @example + * + * var object = { 'a': 1, 'b': '2', 'c': 3 }; + * + * _.omit(object, ['a', 'c']); + * // => { 'b': '2' } + */ + var omit = flatRest(function(object, paths) { + var result = {}; + if (object == null) { + return result; + } + var isDeep = false; + paths = arrayMap(paths, function(path) { + path = castPath(path, object); + isDeep || (isDeep = path.length > 1); + return path; + }); + copyObject(object, getAllKeysIn(object), result); + if (isDeep) { + result = baseClone(result, CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG, customOmitClone); + } + var length = paths.length; + while (length--) { + baseUnset(result, paths[length]); + } + return result; + }); + + /** + * The opposite of `_.pickBy`; this method creates an object composed of + * the own and inherited enumerable string keyed properties of `object` that + * `predicate` doesn't return truthy for. The predicate is invoked with two + * arguments: (value, key). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The source object. + * @param {Function} [predicate=_.identity] The function invoked per property. + * @returns {Object} Returns the new object. + * @example + * + * var object = { 'a': 1, 'b': '2', 'c': 3 }; + * + * _.omitBy(object, _.isNumber); + * // => { 'b': '2' } + */ + function omitBy(object, predicate) { + return pickBy(object, negate(getIteratee(predicate))); + } + + /** + * Creates an object composed of the picked `object` properties. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The source object. + * @param {...(string|string[])} [paths] The property paths to pick. + * @returns {Object} Returns the new object. + * @example + * + * var object = { 'a': 1, 'b': '2', 'c': 3 }; + * + * _.pick(object, ['a', 'c']); + * // => { 'a': 1, 'c': 3 } + */ + var pick = flatRest(function(object, paths) { + return object == null ? {} : basePick(object, paths); + }); + + /** + * Creates an object composed of the `object` properties `predicate` returns + * truthy for. The predicate is invoked with two arguments: (value, key). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The source object. + * @param {Function} [predicate=_.identity] The function invoked per property. + * @returns {Object} Returns the new object. + * @example + * + * var object = { 'a': 1, 'b': '2', 'c': 3 }; + * + * _.pickBy(object, _.isNumber); + * // => { 'a': 1, 'c': 3 } + */ + function pickBy(object, predicate) { + if (object == null) { + return {}; + } + var props = arrayMap(getAllKeysIn(object), function(prop) { + return [prop]; + }); + predicate = getIteratee(predicate); + return basePickBy(object, props, function(value, path) { + return predicate(value, path[0]); + }); + } + + /** + * This method is like `_.get` except that if the resolved value is a + * function it's invoked with the `this` binding of its parent object and + * its result is returned. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The object to query. + * @param {Array|string} path The path of the property to resolve. + * @param {*} [defaultValue] The value returned for `undefined` resolved values. + * @returns {*} Returns the resolved value. + * @example + * + * var object = { 'a': [{ 'b': { 'c1': 3, 'c2': _.constant(4) } }] }; + * + * _.result(object, 'a[0].b.c1'); + * // => 3 + * + * _.result(object, 'a[0].b.c2'); + * // => 4 + * + * _.result(object, 'a[0].b.c3', 'default'); + * // => 'default' + * + * _.result(object, 'a[0].b.c3', _.constant('default')); + * // => 'default' + */ + function result(object, path, defaultValue) { + path = castPath(path, object); + + var index = -1, + length = path.length; + + // Ensure the loop is entered when path is empty. + if (!length) { + length = 1; + object = undefined; + } + while (++index < length) { + var value = object == null ? undefined : object[toKey(path[index])]; + if (value === undefined) { + index = length; + value = defaultValue; + } + object = isFunction(value) ? value.call(object) : value; + } + return object; + } + + /** + * Sets the value at `path` of `object`. If a portion of `path` doesn't exist, + * it's created. Arrays are created for missing index properties while objects + * are created for all other missing properties. Use `_.setWith` to customize + * `path` creation. + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 3.7.0 + * @category Object + * @param {Object} object The object to modify. + * @param {Array|string} path The path of the property to set. + * @param {*} value The value to set. + * @returns {Object} Returns `object`. + * @example + * + * var object = { 'a': [{ 'b': { 'c': 3 } }] }; + * + * _.set(object, 'a[0].b.c', 4); + * console.log(object.a[0].b.c); + * // => 4 + * + * _.set(object, ['x', '0', 'y', 'z'], 5); + * console.log(object.x[0].y.z); + * // => 5 + */ + function set(object, path, value) { + return object == null ? object : baseSet(object, path, value); + } + + /** + * This method is like `_.set` except that it accepts `customizer` which is + * invoked to produce the objects of `path`. If `customizer` returns `undefined` + * path creation is handled by the method instead. The `customizer` is invoked + * with three arguments: (nsValue, key, nsObject). + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The object to modify. + * @param {Array|string} path The path of the property to set. + * @param {*} value The value to set. + * @param {Function} [customizer] The function to customize assigned values. + * @returns {Object} Returns `object`. + * @example + * + * var object = {}; + * + * _.setWith(object, '[0][1]', 'a', Object); + * // => { '0': { '1': 'a' } } + */ + function setWith(object, path, value, customizer) { + customizer = typeof customizer == 'function' ? customizer : undefined; + return object == null ? object : baseSet(object, path, value, customizer); + } + + /** + * Creates an array of own enumerable string keyed-value pairs for `object` + * which can be consumed by `_.fromPairs`. If `object` is a map or set, its + * entries are returned. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @alias entries + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the key-value pairs. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.toPairs(new Foo); + * // => [['a', 1], ['b', 2]] (iteration order is not guaranteed) + */ + var toPairs = createToPairs(keys); + + /** + * Creates an array of own and inherited enumerable string keyed-value pairs + * for `object` which can be consumed by `_.fromPairs`. If `object` is a map + * or set, its entries are returned. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @alias entriesIn + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the key-value pairs. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.toPairsIn(new Foo); + * // => [['a', 1], ['b', 2], ['c', 3]] (iteration order is not guaranteed) + */ + var toPairsIn = createToPairs(keysIn); + + /** + * An alternative to `_.reduce`; this method transforms `object` to a new + * `accumulator` object which is the result of running each of its own + * enumerable string keyed properties thru `iteratee`, with each invocation + * potentially mutating the `accumulator` object. If `accumulator` is not + * provided, a new object with the same `[[Prototype]]` will be used. The + * iteratee is invoked with four arguments: (accumulator, value, key, object). + * Iteratee functions may exit iteration early by explicitly returning `false`. + * + * @static + * @memberOf _ + * @since 1.3.0 + * @category Object + * @param {Object} object The object to iterate over. + * @param {Function} [iteratee=_.identity] The function invoked per iteration. + * @param {*} [accumulator] The custom accumulator value. + * @returns {*} Returns the accumulated value. + * @example + * + * _.transform([2, 3, 4], function(result, n) { + * result.push(n *= n); + * return n % 2 == 0; + * }, []); + * // => [4, 9] + * + * _.transform({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) { + * (result[value] || (result[value] = [])).push(key); + * }, {}); + * // => { '1': ['a', 'c'], '2': ['b'] } + */ + function transform(object, iteratee, accumulator) { + var isArr = isArray(object), + isArrLike = isArr || isBuffer(object) || isTypedArray(object); + + iteratee = getIteratee(iteratee, 4); + if (accumulator == null) { + var Ctor = object && object.constructor; + if (isArrLike) { + accumulator = isArr ? new Ctor : []; + } + else if (isObject(object)) { + accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object)) : {}; + } + else { + accumulator = {}; + } + } + (isArrLike ? arrayEach : baseForOwn)(object, function(value, index, object) { + return iteratee(accumulator, value, index, object); + }); + return accumulator; + } + + /** + * Removes the property at `path` of `object`. + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Object + * @param {Object} object The object to modify. + * @param {Array|string} path The path of the property to unset. + * @returns {boolean} Returns `true` if the property is deleted, else `false`. + * @example + * + * var object = { 'a': [{ 'b': { 'c': 7 } }] }; + * _.unset(object, 'a[0].b.c'); + * // => true + * + * console.log(object); + * // => { 'a': [{ 'b': {} }] }; + * + * _.unset(object, ['a', '0', 'b', 'c']); + * // => true + * + * console.log(object); + * // => { 'a': [{ 'b': {} }] }; + */ + function unset(object, path) { + return object == null ? true : baseUnset(object, path); + } + + /** + * This method is like `_.set` except that accepts `updater` to produce the + * value to set. Use `_.updateWith` to customize `path` creation. The `updater` + * is invoked with one argument: (value). + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.6.0 + * @category Object + * @param {Object} object The object to modify. + * @param {Array|string} path The path of the property to set. + * @param {Function} updater The function to produce the updated value. + * @returns {Object} Returns `object`. + * @example + * + * var object = { 'a': [{ 'b': { 'c': 3 } }] }; + * + * _.update(object, 'a[0].b.c', function(n) { return n * n; }); + * console.log(object.a[0].b.c); + * // => 9 + * + * _.update(object, 'x[0].y.z', function(n) { return n ? n + 1 : 0; }); + * console.log(object.x[0].y.z); + * // => 0 + */ + function update(object, path, updater) { + return object == null ? object : baseUpdate(object, path, castFunction(updater)); + } + + /** + * This method is like `_.update` except that it accepts `customizer` which is + * invoked to produce the objects of `path`. If `customizer` returns `undefined` + * path creation is handled by the method instead. The `customizer` is invoked + * with three arguments: (nsValue, key, nsObject). + * + * **Note:** This method mutates `object`. + * + * @static + * @memberOf _ + * @since 4.6.0 + * @category Object + * @param {Object} object The object to modify. + * @param {Array|string} path The path of the property to set. + * @param {Function} updater The function to produce the updated value. + * @param {Function} [customizer] The function to customize assigned values. + * @returns {Object} Returns `object`. + * @example + * + * var object = {}; + * + * _.updateWith(object, '[0][1]', _.constant('a'), Object); + * // => { '0': { '1': 'a' } } + */ + function updateWith(object, path, updater, customizer) { + customizer = typeof customizer == 'function' ? customizer : undefined; + return object == null ? object : baseUpdate(object, path, castFunction(updater), customizer); + } + + /** + * Creates an array of the own enumerable string keyed property values of `object`. + * + * **Note:** Non-object values are coerced to objects. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property values. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.values(new Foo); + * // => [1, 2] (iteration order is not guaranteed) + * + * _.values('hi'); + * // => ['h', 'i'] + */ + function values(object) { + return object == null ? [] : baseValues(object, keys(object)); + } + + /** + * Creates an array of the own and inherited enumerable string keyed property + * values of `object`. + * + * **Note:** Non-object values are coerced to objects. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category Object + * @param {Object} object The object to query. + * @returns {Array} Returns the array of property values. + * @example + * + * function Foo() { + * this.a = 1; + * this.b = 2; + * } + * + * Foo.prototype.c = 3; + * + * _.valuesIn(new Foo); + * // => [1, 2, 3] (iteration order is not guaranteed) + */ + function valuesIn(object) { + return object == null ? [] : baseValues(object, keysIn(object)); + } + + /*------------------------------------------------------------------------*/ + + /** + * Clamps `number` within the inclusive `lower` and `upper` bounds. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category Number + * @param {number} number The number to clamp. + * @param {number} [lower] The lower bound. + * @param {number} upper The upper bound. + * @returns {number} Returns the clamped number. + * @example + * + * _.clamp(-10, -5, 5); + * // => -5 + * + * _.clamp(10, -5, 5); + * // => 5 + */ + function clamp(number, lower, upper) { + if (upper === undefined) { + upper = lower; + lower = undefined; + } + if (upper !== undefined) { + upper = toNumber(upper); + upper = upper === upper ? upper : 0; + } + if (lower !== undefined) { + lower = toNumber(lower); + lower = lower === lower ? lower : 0; + } + return baseClamp(toNumber(number), lower, upper); + } + + /** + * Checks if `n` is between `start` and up to, but not including, `end`. If + * `end` is not specified, it's set to `start` with `start` then set to `0`. + * If `start` is greater than `end` the params are swapped to support + * negative ranges. + * + * @static + * @memberOf _ + * @since 3.3.0 + * @category Number + * @param {number} number The number to check. + * @param {number} [start=0] The start of the range. + * @param {number} end The end of the range. + * @returns {boolean} Returns `true` if `number` is in the range, else `false`. + * @see _.range, _.rangeRight + * @example + * + * _.inRange(3, 2, 4); + * // => true + * + * _.inRange(4, 8); + * // => true + * + * _.inRange(4, 2); + * // => false + * + * _.inRange(2, 2); + * // => false + * + * _.inRange(1.2, 2); + * // => true + * + * _.inRange(5.2, 4); + * // => false + * + * _.inRange(-3, -2, -6); + * // => true + */ + function inRange(number, start, end) { + start = toFinite(start); + if (end === undefined) { + end = start; + start = 0; + } else { + end = toFinite(end); + } + number = toNumber(number); + return baseInRange(number, start, end); + } + + /** + * Produces a random number between the inclusive `lower` and `upper` bounds. + * If only one argument is provided a number between `0` and the given number + * is returned. If `floating` is `true`, or either `lower` or `upper` are + * floats, a floating-point number is returned instead of an integer. + * + * **Note:** JavaScript follows the IEEE-754 standard for resolving + * floating-point values which can produce unexpected results. + * + * @static + * @memberOf _ + * @since 0.7.0 + * @category Number + * @param {number} [lower=0] The lower bound. + * @param {number} [upper=1] The upper bound. + * @param {boolean} [floating] Specify returning a floating-point number. + * @returns {number} Returns the random number. + * @example + * + * _.random(0, 5); + * // => an integer between 0 and 5 + * + * _.random(5); + * // => also an integer between 0 and 5 + * + * _.random(5, true); + * // => a floating-point number between 0 and 5 + * + * _.random(1.2, 5.2); + * // => a floating-point number between 1.2 and 5.2 + */ + function random(lower, upper, floating) { + if (floating && typeof floating != 'boolean' && isIterateeCall(lower, upper, floating)) { + upper = floating = undefined; + } + if (floating === undefined) { + if (typeof upper == 'boolean') { + floating = upper; + upper = undefined; + } + else if (typeof lower == 'boolean') { + floating = lower; + lower = undefined; + } + } + if (lower === undefined && upper === undefined) { + lower = 0; + upper = 1; + } + else { + lower = toFinite(lower); + if (upper === undefined) { + upper = lower; + lower = 0; + } else { + upper = toFinite(upper); + } + } + if (lower > upper) { + var temp = lower; + lower = upper; + upper = temp; + } + if (floating || lower % 1 || upper % 1) { + var rand = nativeRandom(); + return nativeMin(lower + (rand * (upper - lower + freeParseFloat('1e-' + ((rand + '').length - 1)))), upper); + } + return baseRandom(lower, upper); + } + + /*------------------------------------------------------------------------*/ + + /** + * Converts `string` to [camel case](https://en.wikipedia.org/wiki/CamelCase). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to convert. + * @returns {string} Returns the camel cased string. + * @example + * + * _.camelCase('Foo Bar'); + * // => 'fooBar' + * + * _.camelCase('--foo-bar--'); + * // => 'fooBar' + * + * _.camelCase('__FOO_BAR__'); + * // => 'fooBar' + */ + var camelCase = createCompounder(function(result, word, index) { + word = word.toLowerCase(); + return result + (index ? capitalize(word) : word); + }); + + /** + * Converts the first character of `string` to upper case and the remaining + * to lower case. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to capitalize. + * @returns {string} Returns the capitalized string. + * @example + * + * _.capitalize('FRED'); + * // => 'Fred' + */ + function capitalize(string) { + return upperFirst(toString(string).toLowerCase()); + } + + /** + * Deburrs `string` by converting + * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table) + * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A) + * letters to basic Latin letters and removing + * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to deburr. + * @returns {string} Returns the deburred string. + * @example + * + * _.deburr('déjà vu'); + * // => 'deja vu' + */ + function deburr(string) { + string = toString(string); + return string && string.replace(reLatin, deburrLetter).replace(reComboMark, ''); + } + + /** + * Checks if `string` ends with the given target string. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to inspect. + * @param {string} [target] The string to search for. + * @param {number} [position=string.length] The position to search up to. + * @returns {boolean} Returns `true` if `string` ends with `target`, + * else `false`. + * @example + * + * _.endsWith('abc', 'c'); + * // => true + * + * _.endsWith('abc', 'b'); + * // => false + * + * _.endsWith('abc', 'b', 2); + * // => true + */ + function endsWith(string, target, position) { + string = toString(string); + target = baseToString(target); + + var length = string.length; + position = position === undefined + ? length + : baseClamp(toInteger(position), 0, length); + + var end = position; + position -= target.length; + return position >= 0 && string.slice(position, end) == target; + } + + /** + * Converts the characters "&", "<", ">", '"', and "'" in `string` to their + * corresponding HTML entities. + * + * **Note:** No other characters are escaped. To escape additional + * characters use a third-party library like [_he_](https://mths.be/he). + * + * Though the ">" character is escaped for symmetry, characters like + * ">" and "/" don't need escaping in HTML and have no special meaning + * unless they're part of a tag or unquoted attribute value. See + * [Mathias Bynens's article](https://mathiasbynens.be/notes/ambiguous-ampersands) + * (under "semi-related fun fact") for more details. + * + * When working with HTML you should always + * [quote attribute values](http://wonko.com/post/html-escaping) to reduce + * XSS vectors. + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category String + * @param {string} [string=''] The string to escape. + * @returns {string} Returns the escaped string. + * @example + * + * _.escape('fred, barney, & pebbles'); + * // => 'fred, barney, & pebbles' + */ + function escape(string) { + string = toString(string); + return (string && reHasUnescapedHtml.test(string)) + ? string.replace(reUnescapedHtml, escapeHtmlChar) + : string; + } + + /** + * Escapes the `RegExp` special characters "^", "$", "\", ".", "*", "+", + * "?", "(", ")", "[", "]", "{", "}", and "|" in `string`. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to escape. + * @returns {string} Returns the escaped string. + * @example + * + * _.escapeRegExp('[lodash](https://lodash.com/)'); + * // => '\[lodash\]\(https://lodash\.com/\)' + */ + function escapeRegExp(string) { + string = toString(string); + return (string && reHasRegExpChar.test(string)) + ? string.replace(reRegExpChar, '\\$&') + : string; + } + + /** + * Converts `string` to + * [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to convert. + * @returns {string} Returns the kebab cased string. + * @example + * + * _.kebabCase('Foo Bar'); + * // => 'foo-bar' + * + * _.kebabCase('fooBar'); + * // => 'foo-bar' + * + * _.kebabCase('__FOO_BAR__'); + * // => 'foo-bar' + */ + var kebabCase = createCompounder(function(result, word, index) { + return result + (index ? '-' : '') + word.toLowerCase(); + }); + + /** + * Converts `string`, as space separated words, to lower case. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category String + * @param {string} [string=''] The string to convert. + * @returns {string} Returns the lower cased string. + * @example + * + * _.lowerCase('--Foo-Bar--'); + * // => 'foo bar' + * + * _.lowerCase('fooBar'); + * // => 'foo bar' + * + * _.lowerCase('__FOO_BAR__'); + * // => 'foo bar' + */ + var lowerCase = createCompounder(function(result, word, index) { + return result + (index ? ' ' : '') + word.toLowerCase(); + }); + + /** + * Converts the first character of `string` to lower case. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category String + * @param {string} [string=''] The string to convert. + * @returns {string} Returns the converted string. + * @example + * + * _.lowerFirst('Fred'); + * // => 'fred' + * + * _.lowerFirst('FRED'); + * // => 'fRED' + */ + var lowerFirst = createCaseFirst('toLowerCase'); + + /** + * Pads `string` on the left and right sides if it's shorter than `length`. + * Padding characters are truncated if they can't be evenly divided by `length`. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to pad. + * @param {number} [length=0] The padding length. + * @param {string} [chars=' '] The string used as padding. + * @returns {string} Returns the padded string. + * @example + * + * _.pad('abc', 8); + * // => ' abc ' + * + * _.pad('abc', 8, '_-'); + * // => '_-abc_-_' + * + * _.pad('abc', 3); + * // => 'abc' + */ + function pad(string, length, chars) { + string = toString(string); + length = toInteger(length); + + var strLength = length ? stringSize(string) : 0; + if (!length || strLength >= length) { + return string; + } + var mid = (length - strLength) / 2; + return ( + createPadding(nativeFloor(mid), chars) + + string + + createPadding(nativeCeil(mid), chars) + ); + } + + /** + * Pads `string` on the right side if it's shorter than `length`. Padding + * characters are truncated if they exceed `length`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category String + * @param {string} [string=''] The string to pad. + * @param {number} [length=0] The padding length. + * @param {string} [chars=' '] The string used as padding. + * @returns {string} Returns the padded string. + * @example + * + * _.padEnd('abc', 6); + * // => 'abc ' + * + * _.padEnd('abc', 6, '_-'); + * // => 'abc_-_' + * + * _.padEnd('abc', 3); + * // => 'abc' + */ + function padEnd(string, length, chars) { + string = toString(string); + length = toInteger(length); + + var strLength = length ? stringSize(string) : 0; + return (length && strLength < length) + ? (string + createPadding(length - strLength, chars)) + : string; + } + + /** + * Pads `string` on the left side if it's shorter than `length`. Padding + * characters are truncated if they exceed `length`. + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category String + * @param {string} [string=''] The string to pad. + * @param {number} [length=0] The padding length. + * @param {string} [chars=' '] The string used as padding. + * @returns {string} Returns the padded string. + * @example + * + * _.padStart('abc', 6); + * // => ' abc' + * + * _.padStart('abc', 6, '_-'); + * // => '_-_abc' + * + * _.padStart('abc', 3); + * // => 'abc' + */ + function padStart(string, length, chars) { + string = toString(string); + length = toInteger(length); + + var strLength = length ? stringSize(string) : 0; + return (length && strLength < length) + ? (createPadding(length - strLength, chars) + string) + : string; + } + + /** + * Converts `string` to an integer of the specified radix. If `radix` is + * `undefined` or `0`, a `radix` of `10` is used unless `value` is a + * hexadecimal, in which case a `radix` of `16` is used. + * + * **Note:** This method aligns with the + * [ES5 implementation](https://es5.github.io/#x15.1.2.2) of `parseInt`. + * + * @static + * @memberOf _ + * @since 1.1.0 + * @category String + * @param {string} string The string to convert. + * @param {number} [radix=10] The radix to interpret `value` by. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {number} Returns the converted integer. + * @example + * + * _.parseInt('08'); + * // => 8 + * + * _.map(['6', '08', '10'], _.parseInt); + * // => [6, 8, 10] + */ + function parseInt(string, radix, guard) { + if (guard || radix == null) { + radix = 0; + } else if (radix) { + radix = +radix; + } + return nativeParseInt(toString(string).replace(reTrimStart, ''), radix || 0); + } + + /** + * Repeats the given string `n` times. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to repeat. + * @param {number} [n=1] The number of times to repeat the string. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {string} Returns the repeated string. + * @example + * + * _.repeat('*', 3); + * // => '***' + * + * _.repeat('abc', 2); + * // => 'abcabc' + * + * _.repeat('abc', 0); + * // => '' + */ + function repeat(string, n, guard) { + if ((guard ? isIterateeCall(string, n, guard) : n === undefined)) { + n = 1; + } else { + n = toInteger(n); + } + return baseRepeat(toString(string), n); + } + + /** + * Replaces matches for `pattern` in `string` with `replacement`. + * + * **Note:** This method is based on + * [`String#replace`](https://mdn.io/String/replace). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category String + * @param {string} [string=''] The string to modify. + * @param {RegExp|string} pattern The pattern to replace. + * @param {Function|string} replacement The match replacement. + * @returns {string} Returns the modified string. + * @example + * + * _.replace('Hi Fred', 'Fred', 'Barney'); + * // => 'Hi Barney' + */ + function replace() { + var args = arguments, + string = toString(args[0]); + + return args.length < 3 ? string : string.replace(args[1], args[2]); + } + + /** + * Converts `string` to + * [snake case](https://en.wikipedia.org/wiki/Snake_case). + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to convert. + * @returns {string} Returns the snake cased string. + * @example + * + * _.snakeCase('Foo Bar'); + * // => 'foo_bar' + * + * _.snakeCase('fooBar'); + * // => 'foo_bar' + * + * _.snakeCase('--FOO-BAR--'); + * // => 'foo_bar' + */ + var snakeCase = createCompounder(function(result, word, index) { + return result + (index ? '_' : '') + word.toLowerCase(); + }); + + /** + * Splits `string` by `separator`. + * + * **Note:** This method is based on + * [`String#split`](https://mdn.io/String/split). + * + * @static + * @memberOf _ + * @since 4.0.0 + * @category String + * @param {string} [string=''] The string to split. + * @param {RegExp|string} separator The separator pattern to split by. + * @param {number} [limit] The length to truncate results to. + * @returns {Array} Returns the string segments. + * @example + * + * _.split('a-b-c', '-', 2); + * // => ['a', 'b'] + */ + function split(string, separator, limit) { + if (limit && typeof limit != 'number' && isIterateeCall(string, separator, limit)) { + separator = limit = undefined; + } + limit = limit === undefined ? MAX_ARRAY_LENGTH : limit >>> 0; + if (!limit) { + return []; + } + string = toString(string); + if (string && ( + typeof separator == 'string' || + (separator != null && !isRegExp(separator)) + )) { + separator = baseToString(separator); + if (!separator && hasUnicode(string)) { + return castSlice(stringToArray(string), 0, limit); + } + } + return string.split(separator, limit); + } + + /** + * Converts `string` to + * [start case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage). + * + * @static + * @memberOf _ + * @since 3.1.0 + * @category String + * @param {string} [string=''] The string to convert. + * @returns {string} Returns the start cased string. + * @example + * + * _.startCase('--foo-bar--'); + * // => 'Foo Bar' + * + * _.startCase('fooBar'); + * // => 'Foo Bar' + * + * _.startCase('__FOO_BAR__'); + * // => 'FOO BAR' + */ + var startCase = createCompounder(function(result, word, index) { + return result + (index ? ' ' : '') + upperFirst(word); + }); + + /** + * Checks if `string` starts with the given target string. + * + * @static + * @memberOf _ + * @since 3.0.0 + * @category String + * @param {string} [string=''] The string to inspect. + * @param {string} [target] The string to search for. + * @param {number} [position=0] The position to search from. + * @returns {boolean} Returns `true` if `string` starts with `target`, + * else `false`. + * @example + * + * _.startsWith('abc', 'a'); + * // => true + * + * _.startsWith('abc', 'b'); + * // => false + * + * _.startsWith('abc', 'b', 1); + * // => true + */ + function startsWith(string, target, position) { + string = toString(string); + position = position == null + ? 0 + : baseClamp(toInteger(position), 0, string.length); + + target = baseToString(target); + return string.slice(position, position + target.length) == target; + } + + /** + * Creates a compiled template function that can interpolate data properties + * in "interpolate" delimiters, HTML-escape interpolated data properties in + * "escape" delimiters, and execute JavaScript in "evaluate" delimiters. Data + * properties may be accessed as free variables in the template. If a setting + * object is given, it takes precedence over `_.templateSettings` values. + * + * **Note:** In the development build `_.template` utilizes + * [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl) + * for easier debugging. + * + * For more information on precompiling templates see + * [lodash's custom builds documentation](https://lodash.com/custom-builds). + * + * For more information on Chrome extension sandboxes see + * [Chrome's extensions documentation](https://developer.chrome.com/extensions/sandboxingEval). + * + * @static + * @since 0.1.0 + * @memberOf _ + * @category String + * @param {string} [string=''] The template string. + * @param {Object} [options={}] The options object. + * @param {RegExp} [options.escape=_.templateSettings.escape] + * The HTML "escape" delimiter. + * @param {RegExp} [options.evaluate=_.templateSettings.evaluate] + * The "evaluate" delimiter. + * @param {Object} [options.imports=_.templateSettings.imports] + * An object to import into the template as free variables. + * @param {RegExp} [options.interpolate=_.templateSettings.interpolate] + * The "interpolate" delimiter. + * @param {string} [options.sourceURL='lodash.templateSources[n]'] + * The sourceURL of the compiled template. + * @param {string} [options.variable='obj'] + * The data object variable name. + * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`. + * @returns {Function} Returns the compiled template function. + * @example + * + * // Use the "interpolate" delimiter to create a compiled template. + * var compiled = _.template('hello <%= user %>!'); + * compiled({ 'user': 'fred' }); + * // => 'hello fred!' + * + * // Use the HTML "escape" delimiter to escape data property values. + * var compiled = _.template('<%- value %>'); + * compiled({ 'value': ' +``` + +### Via NPM + +```sh +npm install alpine-alpine +``` + +Then initialize it from your bundle: + +```js +import Alpine from 'alpinejs' +import AlpinePlugin from 'alpine-alpine' + +Alpine.plugin(AlpinePlugin) + +... +``` diff --git a/packages/alpine-alpine/TODO.md b/packages/alpine-alpine/TODO.md new file mode 100644 index 0000000..18e1b2d --- /dev/null +++ b/packages/alpine-alpine/TODO.md @@ -0,0 +1,3 @@ +# TODO + +- Move this into standalone github repo \ No newline at end of file diff --git a/packages/alpine-alpine/builds/cdn.ts b/packages/alpine-alpine/builds/cdn.ts new file mode 100644 index 0000000..8a6781f --- /dev/null +++ b/packages/alpine-alpine/builds/cdn.ts @@ -0,0 +1,8 @@ +// Adapted from the oficial Alpine.js file: +// https://github.com/alpinejs/alpine/blob/main/packages/focus/builds/cdn.js + +import plugin from '../src/index.js' + +document.addEventListener('alpine:init', () => { + window.Alpine.plugin(plugin) +}); diff --git a/packages/alpine-alpine/builds/module.ts b/packages/alpine-alpine/builds/module.ts new file mode 100644 index 0000000..69aacea --- /dev/null +++ b/packages/alpine-alpine/builds/module.ts @@ -0,0 +1,6 @@ +// Adapted from the oficial Alpine.js file: +// https://github.com/alpinejs/alpine/blob/main/packages/focus/builds/module.js + +import plugin from '../src/index.ts' + +export default plugin diff --git a/packages/alpine-alpine/dev/index.html b/packages/alpine-alpine/dev/index.html new file mode 100644 index 0000000..25a7cf3 --- /dev/null +++ b/packages/alpine-alpine/dev/index.html @@ -0,0 +1,20 @@ + + + + + + + Vite + TS + + +
+ + + + + +
+
+ + + diff --git a/packages/alpine-alpine/dev/package.json b/packages/alpine-alpine/dev/package.json new file mode 100644 index 0000000..b1612dc --- /dev/null +++ b/packages/alpine-alpine/dev/package.json @@ -0,0 +1,15 @@ +{ + "name": "alpine-alpine-dev", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "devDependencies": { + "typescript": "^5.2.2", + "vite": "^5.3.4" + } +} diff --git a/packages/alpine-alpine/dev/public/vite.svg b/packages/alpine-alpine/dev/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/packages/alpine-alpine/dev/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/alpine-alpine/dev/src/counter.ts b/packages/alpine-alpine/dev/src/counter.ts new file mode 100644 index 0000000..09e5afd --- /dev/null +++ b/packages/alpine-alpine/dev/src/counter.ts @@ -0,0 +1,9 @@ +export function setupCounter(element: HTMLButtonElement) { + let counter = 0 + const setCounter = (count: number) => { + counter = count + element.innerHTML = `count is ${counter}` + } + element.addEventListener('click', () => setCounter(counter + 1)) + setCounter(0) +} diff --git a/packages/alpine-alpine/dev/src/main.ts b/packages/alpine-alpine/dev/src/main.ts new file mode 100644 index 0000000..9e1188b --- /dev/null +++ b/packages/alpine-alpine/dev/src/main.ts @@ -0,0 +1,19 @@ +import viteLogo from '/vite.svg' +import { setupCounter } from './counter.ts' + +document.querySelector('#app')!.innerHTML = ` +
+ + + +

Vite + TypeScript

+
+ +
+

+ Click on the Vite and TypeScript logos to learn more +

+
+` + +setupCounter(document.querySelector('#counter')!) diff --git a/packages/alpine-alpine/dev/src/vite-env.d.ts b/packages/alpine-alpine/dev/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/packages/alpine-alpine/dev/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/alpine-alpine/package.json b/packages/alpine-alpine/package.json new file mode 100644 index 0000000..923f58a --- /dev/null +++ b/packages/alpine-alpine/package.json @@ -0,0 +1,22 @@ +{ + "name": "alpine-alpine", + "private": false, + "version": "0.1.0", + "type": "commonjs", + "main": "dist/module.cjs.js", + "module": "dist/module.esm.js", + "homepage": "https://github.com/JuroOravec/alpine-alpine", + "repository": { + "type": "git", + "url": "git+https://github.com/jurooravec/alpine-alpine.git" + }, + "author": "Juro Oravec", + "license": "MIT", + "scripts": { + "build": "node scripts/build.js" + }, + "devDependencies": { + "esbuild": "^0.23.0", + "typescript": "^5.2.2" + } +} diff --git a/packages/alpine-alpine/scripts/build.js b/packages/alpine-alpine/scripts/build.js new file mode 100644 index 0000000..c1848fa --- /dev/null +++ b/packages/alpine-alpine/scripts/build.js @@ -0,0 +1,79 @@ +// Adapted from the oficial Alpine.js file: +// https://github.com/alpinejs/alpine/blob/main/scripts/build.js + +const fs = require('fs') +const zlib = require('zlib') + +bundle() + +function bundle() { + // Give esbuild specific configurations to build. + + // This output file is meant to be loaded in a browser's diff --git a/packages/alpinui/dev/Playground.template.vue b/packages/alpinui/dev/Playground.template.vue new file mode 100644 index 0000000..53e5d00 --- /dev/null +++ b/packages/alpinui/dev/Playground.template.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/alpinui/dev/alpinui.css b/packages/alpinui/dev/alpinui.css new file mode 100644 index 0000000..f19a719 --- /dev/null +++ b/packages/alpinui/dev/alpinui.css @@ -0,0 +1,17456 @@ +/*! +* Vuetify v0.0.1 +* Forged by John Leider +* Released under the MIT License. +*/ +@keyframes v-shake { + 59% { + margin-left: 0; + } + 60%, 80% { + margin-left: 2px; + } + 70%, 90% { + margin-left: -2px; + } +} +.bg-black { + background-color: #000000 !important; + color: #FFFFFF !important; +} + +.bg-white { + background-color: #FFFFFF !important; + color: #000000 !important; +} + +.bg-transparent { + background-color: transparent !important; + color: currentColor !important; +} + +.bg-red { + background-color: #F44336 !important; + color: #FFFFFF !important; +} + +.bg-red-lighten-5 { + background-color: #FFEBEE !important; + color: #000000 !important; +} + +.bg-red-lighten-4 { + background-color: #FFCDD2 !important; + color: #000000 !important; +} + +.bg-red-lighten-3 { + background-color: #EF9A9A !important; + color: #000000 !important; +} + +.bg-red-lighten-2 { + background-color: #E57373 !important; + color: #FFFFFF !important; +} + +.bg-red-lighten-1 { + background-color: #EF5350 !important; + color: #FFFFFF !important; +} + +.bg-red-darken-1 { + background-color: #E53935 !important; + color: #FFFFFF !important; +} + +.bg-red-darken-2 { + background-color: #D32F2F !important; + color: #FFFFFF !important; +} + +.bg-red-darken-3 { + background-color: #C62828 !important; + color: #FFFFFF !important; +} + +.bg-red-darken-4 { + background-color: #B71C1C !important; + color: #FFFFFF !important; +} + +.bg-red-accent-1 { + background-color: #FF8A80 !important; + color: #000000 !important; +} + +.bg-red-accent-2 { + background-color: #FF5252 !important; + color: #FFFFFF !important; +} + +.bg-red-accent-3 { + background-color: #FF1744 !important; + color: #FFFFFF !important; +} + +.bg-red-accent-4 { + background-color: #D50000 !important; + color: #FFFFFF !important; +} + +.bg-pink { + background-color: #e91e63 !important; + color: #FFFFFF !important; +} + +.bg-pink-lighten-5 { + background-color: #fce4ec !important; + color: #000000 !important; +} + +.bg-pink-lighten-4 { + background-color: #f8bbd0 !important; + color: #000000 !important; +} + +.bg-pink-lighten-3 { + background-color: #f48fb1 !important; + color: #000000 !important; +} + +.bg-pink-lighten-2 { + background-color: #f06292 !important; + color: #FFFFFF !important; +} + +.bg-pink-lighten-1 { + background-color: #ec407a !important; + color: #FFFFFF !important; +} + +.bg-pink-darken-1 { + background-color: #d81b60 !important; + color: #FFFFFF !important; +} + +.bg-pink-darken-2 { + background-color: #c2185b !important; + color: #FFFFFF !important; +} + +.bg-pink-darken-3 { + background-color: #ad1457 !important; + color: #FFFFFF !important; +} + +.bg-pink-darken-4 { + background-color: #880e4f !important; + color: #FFFFFF !important; +} + +.bg-pink-accent-1 { + background-color: #ff80ab !important; + color: #FFFFFF !important; +} + +.bg-pink-accent-2 { + background-color: #ff4081 !important; + color: #FFFFFF !important; +} + +.bg-pink-accent-3 { + background-color: #f50057 !important; + color: #FFFFFF !important; +} + +.bg-pink-accent-4 { + background-color: #c51162 !important; + color: #FFFFFF !important; +} + +.bg-purple { + background-color: #9c27b0 !important; + color: #FFFFFF !important; +} + +.bg-purple-lighten-5 { + background-color: #f3e5f5 !important; + color: #000000 !important; +} + +.bg-purple-lighten-4 { + background-color: #e1bee7 !important; + color: #000000 !important; +} + +.bg-purple-lighten-3 { + background-color: #ce93d8 !important; + color: #FFFFFF !important; +} + +.bg-purple-lighten-2 { + background-color: #ba68c8 !important; + color: #FFFFFF !important; +} + +.bg-purple-lighten-1 { + background-color: #ab47bc !important; + color: #FFFFFF !important; +} + +.bg-purple-darken-1 { + background-color: #8e24aa !important; + color: #FFFFFF !important; +} + +.bg-purple-darken-2 { + background-color: #7b1fa2 !important; + color: #FFFFFF !important; +} + +.bg-purple-darken-3 { + background-color: #6a1b9a !important; + color: #FFFFFF !important; +} + +.bg-purple-darken-4 { + background-color: #4a148c !important; + color: #FFFFFF !important; +} + +.bg-purple-accent-1 { + background-color: #ea80fc !important; + color: #FFFFFF !important; +} + +.bg-purple-accent-2 { + background-color: #e040fb !important; + color: #FFFFFF !important; +} + +.bg-purple-accent-3 { + background-color: #d500f9 !important; + color: #FFFFFF !important; +} + +.bg-purple-accent-4 { + background-color: #aa00ff !important; + color: #FFFFFF !important; +} + +.bg-deep-purple { + background-color: #673ab7 !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-lighten-5 { + background-color: #ede7f6 !important; + color: #000000 !important; +} + +.bg-deep-purple-lighten-4 { + background-color: #d1c4e9 !important; + color: #000000 !important; +} + +.bg-deep-purple-lighten-3 { + background-color: #b39ddb !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-lighten-2 { + background-color: #9575cd !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-lighten-1 { + background-color: #7e57c2 !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-darken-1 { + background-color: #5e35b1 !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-darken-2 { + background-color: #512da8 !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-darken-3 { + background-color: #4527a0 !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-darken-4 { + background-color: #311b92 !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-accent-1 { + background-color: #b388ff !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-accent-2 { + background-color: #7c4dff !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-accent-3 { + background-color: #651fff !important; + color: #FFFFFF !important; +} + +.bg-deep-purple-accent-4 { + background-color: #6200ea !important; + color: #FFFFFF !important; +} + +.bg-indigo { + background-color: #3f51b5 !important; + color: #FFFFFF !important; +} + +.bg-indigo-lighten-5 { + background-color: #e8eaf6 !important; + color: #000000 !important; +} + +.bg-indigo-lighten-4 { + background-color: #c5cae9 !important; + color: #000000 !important; +} + +.bg-indigo-lighten-3 { + background-color: #9fa8da !important; + color: #FFFFFF !important; +} + +.bg-indigo-lighten-2 { + background-color: #7986cb !important; + color: #FFFFFF !important; +} + +.bg-indigo-lighten-1 { + background-color: #5c6bc0 !important; + color: #FFFFFF !important; +} + +.bg-indigo-darken-1 { + background-color: #3949ab !important; + color: #FFFFFF !important; +} + +.bg-indigo-darken-2 { + background-color: #303f9f !important; + color: #FFFFFF !important; +} + +.bg-indigo-darken-3 { + background-color: #283593 !important; + color: #FFFFFF !important; +} + +.bg-indigo-darken-4 { + background-color: #1a237e !important; + color: #FFFFFF !important; +} + +.bg-indigo-accent-1 { + background-color: #8c9eff !important; + color: #FFFFFF !important; +} + +.bg-indigo-accent-2 { + background-color: #536dfe !important; + color: #FFFFFF !important; +} + +.bg-indigo-accent-3 { + background-color: #3d5afe !important; + color: #FFFFFF !important; +} + +.bg-indigo-accent-4 { + background-color: #304ffe !important; + color: #FFFFFF !important; +} + +.bg-blue { + background-color: #2196F3 !important; + color: #FFFFFF !important; +} + +.bg-blue-lighten-5 { + background-color: #E3F2FD !important; + color: #000000 !important; +} + +.bg-blue-lighten-4 { + background-color: #BBDEFB !important; + color: #000000 !important; +} + +.bg-blue-lighten-3 { + background-color: #90CAF9 !important; + color: #000000 !important; +} + +.bg-blue-lighten-2 { + background-color: #64B5F6 !important; + color: #000000 !important; +} + +.bg-blue-lighten-1 { + background-color: #42A5F5 !important; + color: #FFFFFF !important; +} + +.bg-blue-darken-1 { + background-color: #1E88E5 !important; + color: #FFFFFF !important; +} + +.bg-blue-darken-2 { + background-color: #1976D2 !important; + color: #FFFFFF !important; +} + +.bg-blue-darken-3 { + background-color: #1565C0 !important; + color: #FFFFFF !important; +} + +.bg-blue-darken-4 { + background-color: #0D47A1 !important; + color: #FFFFFF !important; +} + +.bg-blue-accent-1 { + background-color: #82B1FF !important; + color: #000000 !important; +} + +.bg-blue-accent-2 { + background-color: #448AFF !important; + color: #FFFFFF !important; +} + +.bg-blue-accent-3 { + background-color: #2979FF !important; + color: #FFFFFF !important; +} + +.bg-blue-accent-4 { + background-color: #2962FF !important; + color: #FFFFFF !important; +} + +.bg-light-blue { + background-color: #03a9f4 !important; + color: #FFFFFF !important; +} + +.bg-light-blue-lighten-5 { + background-color: #e1f5fe !important; + color: #000000 !important; +} + +.bg-light-blue-lighten-4 { + background-color: #b3e5fc !important; + color: #000000 !important; +} + +.bg-light-blue-lighten-3 { + background-color: #81d4fa !important; + color: #000000 !important; +} + +.bg-light-blue-lighten-2 { + background-color: #4fc3f7 !important; + color: #000000 !important; +} + +.bg-light-blue-lighten-1 { + background-color: #29b6f6 !important; + color: #000000 !important; +} + +.bg-light-blue-darken-1 { + background-color: #039be5 !important; + color: #FFFFFF !important; +} + +.bg-light-blue-darken-2 { + background-color: #0288d1 !important; + color: #FFFFFF !important; +} + +.bg-light-blue-darken-3 { + background-color: #0277bd !important; + color: #FFFFFF !important; +} + +.bg-light-blue-darken-4 { + background-color: #01579b !important; + color: #FFFFFF !important; +} + +.bg-light-blue-accent-1 { + background-color: #80d8ff !important; + color: #000000 !important; +} + +.bg-light-blue-accent-2 { + background-color: #40c4ff !important; + color: #000000 !important; +} + +.bg-light-blue-accent-3 { + background-color: #00b0ff !important; + color: #FFFFFF !important; +} + +.bg-light-blue-accent-4 { + background-color: #0091ea !important; + color: #FFFFFF !important; +} + +.bg-cyan { + background-color: #00bcd4 !important; + color: #000000 !important; +} + +.bg-cyan-lighten-5 { + background-color: #e0f7fa !important; + color: #000000 !important; +} + +.bg-cyan-lighten-4 { + background-color: #b2ebf2 !important; + color: #000000 !important; +} + +.bg-cyan-lighten-3 { + background-color: #80deea !important; + color: #000000 !important; +} + +.bg-cyan-lighten-2 { + background-color: #4dd0e1 !important; + color: #000000 !important; +} + +.bg-cyan-lighten-1 { + background-color: #26c6da !important; + color: #000000 !important; +} + +.bg-cyan-darken-1 { + background-color: #00acc1 !important; + color: #FFFFFF !important; +} + +.bg-cyan-darken-2 { + background-color: #0097a7 !important; + color: #FFFFFF !important; +} + +.bg-cyan-darken-3 { + background-color: #00838f !important; + color: #FFFFFF !important; +} + +.bg-cyan-darken-4 { + background-color: #006064 !important; + color: #FFFFFF !important; +} + +.bg-cyan-accent-1 { + background-color: #84ffff !important; + color: #000000 !important; +} + +.bg-cyan-accent-2 { + background-color: #18ffff !important; + color: #000000 !important; +} + +.bg-cyan-accent-3 { + background-color: #00e5ff !important; + color: #000000 !important; +} + +.bg-cyan-accent-4 { + background-color: #00b8d4 !important; + color: #FFFFFF !important; +} + +.bg-teal { + background-color: #009688 !important; + color: #FFFFFF !important; +} + +.bg-teal-lighten-5 { + background-color: #e0f2f1 !important; + color: #000000 !important; +} + +.bg-teal-lighten-4 { + background-color: #b2dfdb !important; + color: #000000 !important; +} + +.bg-teal-lighten-3 { + background-color: #80cbc4 !important; + color: #000000 !important; +} + +.bg-teal-lighten-2 { + background-color: #4db6ac !important; + color: #FFFFFF !important; +} + +.bg-teal-lighten-1 { + background-color: #26a69a !important; + color: #FFFFFF !important; +} + +.bg-teal-darken-1 { + background-color: #00897b !important; + color: #FFFFFF !important; +} + +.bg-teal-darken-2 { + background-color: #00796b !important; + color: #FFFFFF !important; +} + +.bg-teal-darken-3 { + background-color: #00695c !important; + color: #FFFFFF !important; +} + +.bg-teal-darken-4 { + background-color: #004d40 !important; + color: #FFFFFF !important; +} + +.bg-teal-accent-1 { + background-color: #a7ffeb !important; + color: #000000 !important; +} + +.bg-teal-accent-2 { + background-color: #64ffda !important; + color: #000000 !important; +} + +.bg-teal-accent-3 { + background-color: #1de9b6 !important; + color: #000000 !important; +} + +.bg-teal-accent-4 { + background-color: #00bfa5 !important; + color: #FFFFFF !important; +} + +.bg-green { + background-color: #4CAF50 !important; + color: #FFFFFF !important; +} + +.bg-green-lighten-5 { + background-color: #E8F5E9 !important; + color: #000000 !important; +} + +.bg-green-lighten-4 { + background-color: #C8E6C9 !important; + color: #000000 !important; +} + +.bg-green-lighten-3 { + background-color: #A5D6A7 !important; + color: #000000 !important; +} + +.bg-green-lighten-2 { + background-color: #81C784 !important; + color: #000000 !important; +} + +.bg-green-lighten-1 { + background-color: #66BB6A !important; + color: #FFFFFF !important; +} + +.bg-green-darken-1 { + background-color: #43A047 !important; + color: #FFFFFF !important; +} + +.bg-green-darken-2 { + background-color: #388E3C !important; + color: #FFFFFF !important; +} + +.bg-green-darken-3 { + background-color: #2E7D32 !important; + color: #FFFFFF !important; +} + +.bg-green-darken-4 { + background-color: #1B5E20 !important; + color: #FFFFFF !important; +} + +.bg-green-accent-1 { + background-color: #B9F6CA !important; + color: #000000 !important; +} + +.bg-green-accent-2 { + background-color: #69F0AE !important; + color: #000000 !important; +} + +.bg-green-accent-3 { + background-color: #00E676 !important; + color: #000000 !important; +} + +.bg-green-accent-4 { + background-color: #00C853 !important; + color: #000000 !important; +} + +.bg-light-green { + background-color: #8bc34a !important; + color: #000000 !important; +} + +.bg-light-green-lighten-5 { + background-color: #f1f8e9 !important; + color: #000000 !important; +} + +.bg-light-green-lighten-4 { + background-color: #dcedc8 !important; + color: #000000 !important; +} + +.bg-light-green-lighten-3 { + background-color: #c5e1a5 !important; + color: #000000 !important; +} + +.bg-light-green-lighten-2 { + background-color: #aed581 !important; + color: #000000 !important; +} + +.bg-light-green-lighten-1 { + background-color: #9ccc65 !important; + color: #000000 !important; +} + +.bg-light-green-darken-1 { + background-color: #7cb342 !important; + color: #FFFFFF !important; +} + +.bg-light-green-darken-2 { + background-color: #689f38 !important; + color: #FFFFFF !important; +} + +.bg-light-green-darken-3 { + background-color: #558b2f !important; + color: #FFFFFF !important; +} + +.bg-light-green-darken-4 { + background-color: #33691e !important; + color: #FFFFFF !important; +} + +.bg-light-green-accent-1 { + background-color: #ccff90 !important; + color: #000000 !important; +} + +.bg-light-green-accent-2 { + background-color: #b2ff59 !important; + color: #000000 !important; +} + +.bg-light-green-accent-3 { + background-color: #76ff03 !important; + color: #000000 !important; +} + +.bg-light-green-accent-4 { + background-color: #64dd17 !important; + color: #000000 !important; +} + +.bg-lime { + background-color: #cddc39 !important; + color: #000000 !important; +} + +.bg-lime-lighten-5 { + background-color: #f9fbe7 !important; + color: #000000 !important; +} + +.bg-lime-lighten-4 { + background-color: #f0f4c3 !important; + color: #000000 !important; +} + +.bg-lime-lighten-3 { + background-color: #e6ee9c !important; + color: #000000 !important; +} + +.bg-lime-lighten-2 { + background-color: #dce775 !important; + color: #000000 !important; +} + +.bg-lime-lighten-1 { + background-color: #d4e157 !important; + color: #000000 !important; +} + +.bg-lime-darken-1 { + background-color: #c0ca33 !important; + color: #000000 !important; +} + +.bg-lime-darken-2 { + background-color: #afb42b !important; + color: #000000 !important; +} + +.bg-lime-darken-3 { + background-color: #9e9d24 !important; + color: #FFFFFF !important; +} + +.bg-lime-darken-4 { + background-color: #827717 !important; + color: #FFFFFF !important; +} + +.bg-lime-accent-1 { + background-color: #f4ff81 !important; + color: #000000 !important; +} + +.bg-lime-accent-2 { + background-color: #eeff41 !important; + color: #000000 !important; +} + +.bg-lime-accent-3 { + background-color: #c6ff00 !important; + color: #000000 !important; +} + +.bg-lime-accent-4 { + background-color: #aeea00 !important; + color: #000000 !important; +} + +.bg-yellow { + background-color: #ffeb3b !important; + color: #000000 !important; +} + +.bg-yellow-lighten-5 { + background-color: #fffde7 !important; + color: #000000 !important; +} + +.bg-yellow-lighten-4 { + background-color: #fff9c4 !important; + color: #000000 !important; +} + +.bg-yellow-lighten-3 { + background-color: #fff59d !important; + color: #000000 !important; +} + +.bg-yellow-lighten-2 { + background-color: #fff176 !important; + color: #000000 !important; +} + +.bg-yellow-lighten-1 { + background-color: #ffee58 !important; + color: #000000 !important; +} + +.bg-yellow-darken-1 { + background-color: #fdd835 !important; + color: #000000 !important; +} + +.bg-yellow-darken-2 { + background-color: #fbc02d !important; + color: #000000 !important; +} + +.bg-yellow-darken-3 { + background-color: #f9a825 !important; + color: #000000 !important; +} + +.bg-yellow-darken-4 { + background-color: #f57f17 !important; + color: #FFFFFF !important; +} + +.bg-yellow-accent-1 { + background-color: #ffff8d !important; + color: #000000 !important; +} + +.bg-yellow-accent-2 { + background-color: #ffff00 !important; + color: #000000 !important; +} + +.bg-yellow-accent-3 { + background-color: #ffea00 !important; + color: #000000 !important; +} + +.bg-yellow-accent-4 { + background-color: #ffd600 !important; + color: #000000 !important; +} + +.bg-amber { + background-color: #ffc107 !important; + color: #000000 !important; +} + +.bg-amber-lighten-5 { + background-color: #fff8e1 !important; + color: #000000 !important; +} + +.bg-amber-lighten-4 { + background-color: #ffecb3 !important; + color: #000000 !important; +} + +.bg-amber-lighten-3 { + background-color: #ffe082 !important; + color: #000000 !important; +} + +.bg-amber-lighten-2 { + background-color: #ffd54f !important; + color: #000000 !important; +} + +.bg-amber-lighten-1 { + background-color: #ffca28 !important; + color: #000000 !important; +} + +.bg-amber-darken-1 { + background-color: #ffb300 !important; + color: #000000 !important; +} + +.bg-amber-darken-2 { + background-color: #ffa000 !important; + color: #000000 !important; +} + +.bg-amber-darken-3 { + background-color: #ff8f00 !important; + color: #000000 !important; +} + +.bg-amber-darken-4 { + background-color: #ff6f00 !important; + color: #FFFFFF !important; +} + +.bg-amber-accent-1 { + background-color: #ffe57f !important; + color: #000000 !important; +} + +.bg-amber-accent-2 { + background-color: #ffd740 !important; + color: #000000 !important; +} + +.bg-amber-accent-3 { + background-color: #ffc400 !important; + color: #000000 !important; +} + +.bg-amber-accent-4 { + background-color: #ffab00 !important; + color: #000000 !important; +} + +.bg-orange { + background-color: #ff9800 !important; + color: #000000 !important; +} + +.bg-orange-lighten-5 { + background-color: #fff3e0 !important; + color: #000000 !important; +} + +.bg-orange-lighten-4 { + background-color: #ffe0b2 !important; + color: #000000 !important; +} + +.bg-orange-lighten-3 { + background-color: #ffcc80 !important; + color: #000000 !important; +} + +.bg-orange-lighten-2 { + background-color: #ffb74d !important; + color: #000000 !important; +} + +.bg-orange-lighten-1 { + background-color: #ffa726 !important; + color: #000000 !important; +} + +.bg-orange-darken-1 { + background-color: #fb8c00 !important; + color: #FFFFFF !important; +} + +.bg-orange-darken-2 { + background-color: #f57c00 !important; + color: #FFFFFF !important; +} + +.bg-orange-darken-3 { + background-color: #ef6c00 !important; + color: #FFFFFF !important; +} + +.bg-orange-darken-4 { + background-color: #e65100 !important; + color: #FFFFFF !important; +} + +.bg-orange-accent-1 { + background-color: #ffd180 !important; + color: #000000 !important; +} + +.bg-orange-accent-2 { + background-color: #ffab40 !important; + color: #000000 !important; +} + +.bg-orange-accent-3 { + background-color: #ff9100 !important; + color: #000000 !important; +} + +.bg-orange-accent-4 { + background-color: #ff6d00 !important; + color: #FFFFFF !important; +} + +.bg-deep-orange { + background-color: #ff5722 !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-lighten-5 { + background-color: #fbe9e7 !important; + color: #000000 !important; +} + +.bg-deep-orange-lighten-4 { + background-color: #ffccbc !important; + color: #000000 !important; +} + +.bg-deep-orange-lighten-3 { + background-color: #ffab91 !important; + color: #000000 !important; +} + +.bg-deep-orange-lighten-2 { + background-color: #ff8a65 !important; + color: #000000 !important; +} + +.bg-deep-orange-lighten-1 { + background-color: #ff7043 !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-darken-1 { + background-color: #f4511e !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-darken-2 { + background-color: #e64a19 !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-darken-3 { + background-color: #d84315 !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-darken-4 { + background-color: #bf360c !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-accent-1 { + background-color: #ff9e80 !important; + color: #000000 !important; +} + +.bg-deep-orange-accent-2 { + background-color: #ff6e40 !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-accent-3 { + background-color: #ff3d00 !important; + color: #FFFFFF !important; +} + +.bg-deep-orange-accent-4 { + background-color: #dd2c00 !important; + color: #FFFFFF !important; +} + +.bg-brown { + background-color: #795548 !important; + color: #FFFFFF !important; +} + +.bg-brown-lighten-5 { + background-color: #efebe9 !important; + color: #000000 !important; +} + +.bg-brown-lighten-4 { + background-color: #d7ccc8 !important; + color: #000000 !important; +} + +.bg-brown-lighten-3 { + background-color: #bcaaa4 !important; + color: #000000 !important; +} + +.bg-brown-lighten-2 { + background-color: #a1887f !important; + color: #FFFFFF !important; +} + +.bg-brown-lighten-1 { + background-color: #8d6e63 !important; + color: #FFFFFF !important; +} + +.bg-brown-darken-1 { + background-color: #6d4c41 !important; + color: #FFFFFF !important; +} + +.bg-brown-darken-2 { + background-color: #5d4037 !important; + color: #FFFFFF !important; +} + +.bg-brown-darken-3 { + background-color: #4e342e !important; + color: #FFFFFF !important; +} + +.bg-brown-darken-4 { + background-color: #3e2723 !important; + color: #FFFFFF !important; +} + +.bg-blue-grey { + background-color: #607d8b !important; + color: #FFFFFF !important; +} + +.bg-blue-grey-lighten-5 { + background-color: #eceff1 !important; + color: #000000 !important; +} + +.bg-blue-grey-lighten-4 { + background-color: #cfd8dc !important; + color: #000000 !important; +} + +.bg-blue-grey-lighten-3 { + background-color: #b0bec5 !important; + color: #000000 !important; +} + +.bg-blue-grey-lighten-2 { + background-color: #90a4ae !important; + color: #FFFFFF !important; +} + +.bg-blue-grey-lighten-1 { + background-color: #78909c !important; + color: #FFFFFF !important; +} + +.bg-blue-grey-darken-1 { + background-color: #546e7a !important; + color: #FFFFFF !important; +} + +.bg-blue-grey-darken-2 { + background-color: #455a64 !important; + color: #FFFFFF !important; +} + +.bg-blue-grey-darken-3 { + background-color: #37474f !important; + color: #FFFFFF !important; +} + +.bg-blue-grey-darken-4 { + background-color: #263238 !important; + color: #FFFFFF !important; +} + +.bg-grey { + background-color: #9e9e9e !important; + color: #FFFFFF !important; +} + +.bg-grey-lighten-5 { + background-color: #fafafa !important; + color: #000000 !important; +} + +.bg-grey-lighten-4 { + background-color: #f5f5f5 !important; + color: #000000 !important; +} + +.bg-grey-lighten-3 { + background-color: #eeeeee !important; + color: #000000 !important; +} + +.bg-grey-lighten-2 { + background-color: #e0e0e0 !important; + color: #000000 !important; +} + +.bg-grey-lighten-1 { + background-color: #bdbdbd !important; + color: #000000 !important; +} + +.bg-grey-darken-1 { + background-color: #757575 !important; + color: #FFFFFF !important; +} + +.bg-grey-darken-2 { + background-color: #616161 !important; + color: #FFFFFF !important; +} + +.bg-grey-darken-3 { + background-color: #424242 !important; + color: #FFFFFF !important; +} + +.bg-grey-darken-4 { + background-color: #212121 !important; + color: #FFFFFF !important; +} + +.bg-shades-black { + background-color: #000000 !important; + color: #FFFFFF !important; +} + +.bg-shades-white { + background-color: #FFFFFF !important; + color: #000000 !important; +} + +.bg-shades-transparent { + background-color: transparent !important; + color: currentColor !important; +} + +.text-black { + color: #000000 !important; +} + +.text-white { + color: #FFFFFF !important; +} + +.text-transparent { + color: transparent !important; +} + +.text-red { + color: #F44336 !important; +} + +.text-red-lighten-5 { + color: #FFEBEE !important; +} + +.text-red-lighten-4 { + color: #FFCDD2 !important; +} + +.text-red-lighten-3 { + color: #EF9A9A !important; +} + +.text-red-lighten-2 { + color: #E57373 !important; +} + +.text-red-lighten-1 { + color: #EF5350 !important; +} + +.text-red-darken-1 { + color: #E53935 !important; +} + +.text-red-darken-2 { + color: #D32F2F !important; +} + +.text-red-darken-3 { + color: #C62828 !important; +} + +.text-red-darken-4 { + color: #B71C1C !important; +} + +.text-red-accent-1 { + color: #FF8A80 !important; +} + +.text-red-accent-2 { + color: #FF5252 !important; +} + +.text-red-accent-3 { + color: #FF1744 !important; +} + +.text-red-accent-4 { + color: #D50000 !important; +} + +.text-pink { + color: #e91e63 !important; +} + +.text-pink-lighten-5 { + color: #fce4ec !important; +} + +.text-pink-lighten-4 { + color: #f8bbd0 !important; +} + +.text-pink-lighten-3 { + color: #f48fb1 !important; +} + +.text-pink-lighten-2 { + color: #f06292 !important; +} + +.text-pink-lighten-1 { + color: #ec407a !important; +} + +.text-pink-darken-1 { + color: #d81b60 !important; +} + +.text-pink-darken-2 { + color: #c2185b !important; +} + +.text-pink-darken-3 { + color: #ad1457 !important; +} + +.text-pink-darken-4 { + color: #880e4f !important; +} + +.text-pink-accent-1 { + color: #ff80ab !important; +} + +.text-pink-accent-2 { + color: #ff4081 !important; +} + +.text-pink-accent-3 { + color: #f50057 !important; +} + +.text-pink-accent-4 { + color: #c51162 !important; +} + +.text-purple { + color: #9c27b0 !important; +} + +.text-purple-lighten-5 { + color: #f3e5f5 !important; +} + +.text-purple-lighten-4 { + color: #e1bee7 !important; +} + +.text-purple-lighten-3 { + color: #ce93d8 !important; +} + +.text-purple-lighten-2 { + color: #ba68c8 !important; +} + +.text-purple-lighten-1 { + color: #ab47bc !important; +} + +.text-purple-darken-1 { + color: #8e24aa !important; +} + +.text-purple-darken-2 { + color: #7b1fa2 !important; +} + +.text-purple-darken-3 { + color: #6a1b9a !important; +} + +.text-purple-darken-4 { + color: #4a148c !important; +} + +.text-purple-accent-1 { + color: #ea80fc !important; +} + +.text-purple-accent-2 { + color: #e040fb !important; +} + +.text-purple-accent-3 { + color: #d500f9 !important; +} + +.text-purple-accent-4 { + color: #aa00ff !important; +} + +.text-deep-purple { + color: #673ab7 !important; +} + +.text-deep-purple-lighten-5 { + color: #ede7f6 !important; +} + +.text-deep-purple-lighten-4 { + color: #d1c4e9 !important; +} + +.text-deep-purple-lighten-3 { + color: #b39ddb !important; +} + +.text-deep-purple-lighten-2 { + color: #9575cd !important; +} + +.text-deep-purple-lighten-1 { + color: #7e57c2 !important; +} + +.text-deep-purple-darken-1 { + color: #5e35b1 !important; +} + +.text-deep-purple-darken-2 { + color: #512da8 !important; +} + +.text-deep-purple-darken-3 { + color: #4527a0 !important; +} + +.text-deep-purple-darken-4 { + color: #311b92 !important; +} + +.text-deep-purple-accent-1 { + color: #b388ff !important; +} + +.text-deep-purple-accent-2 { + color: #7c4dff !important; +} + +.text-deep-purple-accent-3 { + color: #651fff !important; +} + +.text-deep-purple-accent-4 { + color: #6200ea !important; +} + +.text-indigo { + color: #3f51b5 !important; +} + +.text-indigo-lighten-5 { + color: #e8eaf6 !important; +} + +.text-indigo-lighten-4 { + color: #c5cae9 !important; +} + +.text-indigo-lighten-3 { + color: #9fa8da !important; +} + +.text-indigo-lighten-2 { + color: #7986cb !important; +} + +.text-indigo-lighten-1 { + color: #5c6bc0 !important; +} + +.text-indigo-darken-1 { + color: #3949ab !important; +} + +.text-indigo-darken-2 { + color: #303f9f !important; +} + +.text-indigo-darken-3 { + color: #283593 !important; +} + +.text-indigo-darken-4 { + color: #1a237e !important; +} + +.text-indigo-accent-1 { + color: #8c9eff !important; +} + +.text-indigo-accent-2 { + color: #536dfe !important; +} + +.text-indigo-accent-3 { + color: #3d5afe !important; +} + +.text-indigo-accent-4 { + color: #304ffe !important; +} + +.text-blue { + color: #2196F3 !important; +} + +.text-blue-lighten-5 { + color: #E3F2FD !important; +} + +.text-blue-lighten-4 { + color: #BBDEFB !important; +} + +.text-blue-lighten-3 { + color: #90CAF9 !important; +} + +.text-blue-lighten-2 { + color: #64B5F6 !important; +} + +.text-blue-lighten-1 { + color: #42A5F5 !important; +} + +.text-blue-darken-1 { + color: #1E88E5 !important; +} + +.text-blue-darken-2 { + color: #1976D2 !important; +} + +.text-blue-darken-3 { + color: #1565C0 !important; +} + +.text-blue-darken-4 { + color: #0D47A1 !important; +} + +.text-blue-accent-1 { + color: #82B1FF !important; +} + +.text-blue-accent-2 { + color: #448AFF !important; +} + +.text-blue-accent-3 { + color: #2979FF !important; +} + +.text-blue-accent-4 { + color: #2962FF !important; +} + +.text-light-blue { + color: #03a9f4 !important; +} + +.text-light-blue-lighten-5 { + color: #e1f5fe !important; +} + +.text-light-blue-lighten-4 { + color: #b3e5fc !important; +} + +.text-light-blue-lighten-3 { + color: #81d4fa !important; +} + +.text-light-blue-lighten-2 { + color: #4fc3f7 !important; +} + +.text-light-blue-lighten-1 { + color: #29b6f6 !important; +} + +.text-light-blue-darken-1 { + color: #039be5 !important; +} + +.text-light-blue-darken-2 { + color: #0288d1 !important; +} + +.text-light-blue-darken-3 { + color: #0277bd !important; +} + +.text-light-blue-darken-4 { + color: #01579b !important; +} + +.text-light-blue-accent-1 { + color: #80d8ff !important; +} + +.text-light-blue-accent-2 { + color: #40c4ff !important; +} + +.text-light-blue-accent-3 { + color: #00b0ff !important; +} + +.text-light-blue-accent-4 { + color: #0091ea !important; +} + +.text-cyan { + color: #00bcd4 !important; +} + +.text-cyan-lighten-5 { + color: #e0f7fa !important; +} + +.text-cyan-lighten-4 { + color: #b2ebf2 !important; +} + +.text-cyan-lighten-3 { + color: #80deea !important; +} + +.text-cyan-lighten-2 { + color: #4dd0e1 !important; +} + +.text-cyan-lighten-1 { + color: #26c6da !important; +} + +.text-cyan-darken-1 { + color: #00acc1 !important; +} + +.text-cyan-darken-2 { + color: #0097a7 !important; +} + +.text-cyan-darken-3 { + color: #00838f !important; +} + +.text-cyan-darken-4 { + color: #006064 !important; +} + +.text-cyan-accent-1 { + color: #84ffff !important; +} + +.text-cyan-accent-2 { + color: #18ffff !important; +} + +.text-cyan-accent-3 { + color: #00e5ff !important; +} + +.text-cyan-accent-4 { + color: #00b8d4 !important; +} + +.text-teal { + color: #009688 !important; +} + +.text-teal-lighten-5 { + color: #e0f2f1 !important; +} + +.text-teal-lighten-4 { + color: #b2dfdb !important; +} + +.text-teal-lighten-3 { + color: #80cbc4 !important; +} + +.text-teal-lighten-2 { + color: #4db6ac !important; +} + +.text-teal-lighten-1 { + color: #26a69a !important; +} + +.text-teal-darken-1 { + color: #00897b !important; +} + +.text-teal-darken-2 { + color: #00796b !important; +} + +.text-teal-darken-3 { + color: #00695c !important; +} + +.text-teal-darken-4 { + color: #004d40 !important; +} + +.text-teal-accent-1 { + color: #a7ffeb !important; +} + +.text-teal-accent-2 { + color: #64ffda !important; +} + +.text-teal-accent-3 { + color: #1de9b6 !important; +} + +.text-teal-accent-4 { + color: #00bfa5 !important; +} + +.text-green { + color: #4CAF50 !important; +} + +.text-green-lighten-5 { + color: #E8F5E9 !important; +} + +.text-green-lighten-4 { + color: #C8E6C9 !important; +} + +.text-green-lighten-3 { + color: #A5D6A7 !important; +} + +.text-green-lighten-2 { + color: #81C784 !important; +} + +.text-green-lighten-1 { + color: #66BB6A !important; +} + +.text-green-darken-1 { + color: #43A047 !important; +} + +.text-green-darken-2 { + color: #388E3C !important; +} + +.text-green-darken-3 { + color: #2E7D32 !important; +} + +.text-green-darken-4 { + color: #1B5E20 !important; +} + +.text-green-accent-1 { + color: #B9F6CA !important; +} + +.text-green-accent-2 { + color: #69F0AE !important; +} + +.text-green-accent-3 { + color: #00E676 !important; +} + +.text-green-accent-4 { + color: #00C853 !important; +} + +.text-light-green { + color: #8bc34a !important; +} + +.text-light-green-lighten-5 { + color: #f1f8e9 !important; +} + +.text-light-green-lighten-4 { + color: #dcedc8 !important; +} + +.text-light-green-lighten-3 { + color: #c5e1a5 !important; +} + +.text-light-green-lighten-2 { + color: #aed581 !important; +} + +.text-light-green-lighten-1 { + color: #9ccc65 !important; +} + +.text-light-green-darken-1 { + color: #7cb342 !important; +} + +.text-light-green-darken-2 { + color: #689f38 !important; +} + +.text-light-green-darken-3 { + color: #558b2f !important; +} + +.text-light-green-darken-4 { + color: #33691e !important; +} + +.text-light-green-accent-1 { + color: #ccff90 !important; +} + +.text-light-green-accent-2 { + color: #b2ff59 !important; +} + +.text-light-green-accent-3 { + color: #76ff03 !important; +} + +.text-light-green-accent-4 { + color: #64dd17 !important; +} + +.text-lime { + color: #cddc39 !important; +} + +.text-lime-lighten-5 { + color: #f9fbe7 !important; +} + +.text-lime-lighten-4 { + color: #f0f4c3 !important; +} + +.text-lime-lighten-3 { + color: #e6ee9c !important; +} + +.text-lime-lighten-2 { + color: #dce775 !important; +} + +.text-lime-lighten-1 { + color: #d4e157 !important; +} + +.text-lime-darken-1 { + color: #c0ca33 !important; +} + +.text-lime-darken-2 { + color: #afb42b !important; +} + +.text-lime-darken-3 { + color: #9e9d24 !important; +} + +.text-lime-darken-4 { + color: #827717 !important; +} + +.text-lime-accent-1 { + color: #f4ff81 !important; +} + +.text-lime-accent-2 { + color: #eeff41 !important; +} + +.text-lime-accent-3 { + color: #c6ff00 !important; +} + +.text-lime-accent-4 { + color: #aeea00 !important; +} + +.text-yellow { + color: #ffeb3b !important; +} + +.text-yellow-lighten-5 { + color: #fffde7 !important; +} + +.text-yellow-lighten-4 { + color: #fff9c4 !important; +} + +.text-yellow-lighten-3 { + color: #fff59d !important; +} + +.text-yellow-lighten-2 { + color: #fff176 !important; +} + +.text-yellow-lighten-1 { + color: #ffee58 !important; +} + +.text-yellow-darken-1 { + color: #fdd835 !important; +} + +.text-yellow-darken-2 { + color: #fbc02d !important; +} + +.text-yellow-darken-3 { + color: #f9a825 !important; +} + +.text-yellow-darken-4 { + color: #f57f17 !important; +} + +.text-yellow-accent-1 { + color: #ffff8d !important; +} + +.text-yellow-accent-2 { + color: #ffff00 !important; +} + +.text-yellow-accent-3 { + color: #ffea00 !important; +} + +.text-yellow-accent-4 { + color: #ffd600 !important; +} + +.text-amber { + color: #ffc107 !important; +} + +.text-amber-lighten-5 { + color: #fff8e1 !important; +} + +.text-amber-lighten-4 { + color: #ffecb3 !important; +} + +.text-amber-lighten-3 { + color: #ffe082 !important; +} + +.text-amber-lighten-2 { + color: #ffd54f !important; +} + +.text-amber-lighten-1 { + color: #ffca28 !important; +} + +.text-amber-darken-1 { + color: #ffb300 !important; +} + +.text-amber-darken-2 { + color: #ffa000 !important; +} + +.text-amber-darken-3 { + color: #ff8f00 !important; +} + +.text-amber-darken-4 { + color: #ff6f00 !important; +} + +.text-amber-accent-1 { + color: #ffe57f !important; +} + +.text-amber-accent-2 { + color: #ffd740 !important; +} + +.text-amber-accent-3 { + color: #ffc400 !important; +} + +.text-amber-accent-4 { + color: #ffab00 !important; +} + +.text-orange { + color: #ff9800 !important; +} + +.text-orange-lighten-5 { + color: #fff3e0 !important; +} + +.text-orange-lighten-4 { + color: #ffe0b2 !important; +} + +.text-orange-lighten-3 { + color: #ffcc80 !important; +} + +.text-orange-lighten-2 { + color: #ffb74d !important; +} + +.text-orange-lighten-1 { + color: #ffa726 !important; +} + +.text-orange-darken-1 { + color: #fb8c00 !important; +} + +.text-orange-darken-2 { + color: #f57c00 !important; +} + +.text-orange-darken-3 { + color: #ef6c00 !important; +} + +.text-orange-darken-4 { + color: #e65100 !important; +} + +.text-orange-accent-1 { + color: #ffd180 !important; +} + +.text-orange-accent-2 { + color: #ffab40 !important; +} + +.text-orange-accent-3 { + color: #ff9100 !important; +} + +.text-orange-accent-4 { + color: #ff6d00 !important; +} + +.text-deep-orange { + color: #ff5722 !important; +} + +.text-deep-orange-lighten-5 { + color: #fbe9e7 !important; +} + +.text-deep-orange-lighten-4 { + color: #ffccbc !important; +} + +.text-deep-orange-lighten-3 { + color: #ffab91 !important; +} + +.text-deep-orange-lighten-2 { + color: #ff8a65 !important; +} + +.text-deep-orange-lighten-1 { + color: #ff7043 !important; +} + +.text-deep-orange-darken-1 { + color: #f4511e !important; +} + +.text-deep-orange-darken-2 { + color: #e64a19 !important; +} + +.text-deep-orange-darken-3 { + color: #d84315 !important; +} + +.text-deep-orange-darken-4 { + color: #bf360c !important; +} + +.text-deep-orange-accent-1 { + color: #ff9e80 !important; +} + +.text-deep-orange-accent-2 { + color: #ff6e40 !important; +} + +.text-deep-orange-accent-3 { + color: #ff3d00 !important; +} + +.text-deep-orange-accent-4 { + color: #dd2c00 !important; +} + +.text-brown { + color: #795548 !important; +} + +.text-brown-lighten-5 { + color: #efebe9 !important; +} + +.text-brown-lighten-4 { + color: #d7ccc8 !important; +} + +.text-brown-lighten-3 { + color: #bcaaa4 !important; +} + +.text-brown-lighten-2 { + color: #a1887f !important; +} + +.text-brown-lighten-1 { + color: #8d6e63 !important; +} + +.text-brown-darken-1 { + color: #6d4c41 !important; +} + +.text-brown-darken-2 { + color: #5d4037 !important; +} + +.text-brown-darken-3 { + color: #4e342e !important; +} + +.text-brown-darken-4 { + color: #3e2723 !important; +} + +.text-blue-grey { + color: #607d8b !important; +} + +.text-blue-grey-lighten-5 { + color: #eceff1 !important; +} + +.text-blue-grey-lighten-4 { + color: #cfd8dc !important; +} + +.text-blue-grey-lighten-3 { + color: #b0bec5 !important; +} + +.text-blue-grey-lighten-2 { + color: #90a4ae !important; +} + +.text-blue-grey-lighten-1 { + color: #78909c !important; +} + +.text-blue-grey-darken-1 { + color: #546e7a !important; +} + +.text-blue-grey-darken-2 { + color: #455a64 !important; +} + +.text-blue-grey-darken-3 { + color: #37474f !important; +} + +.text-blue-grey-darken-4 { + color: #263238 !important; +} + +.text-grey { + color: #9e9e9e !important; +} + +.text-grey-lighten-5 { + color: #fafafa !important; +} + +.text-grey-lighten-4 { + color: #f5f5f5 !important; +} + +.text-grey-lighten-3 { + color: #eeeeee !important; +} + +.text-grey-lighten-2 { + color: #e0e0e0 !important; +} + +.text-grey-lighten-1 { + color: #bdbdbd !important; +} + +.text-grey-darken-1 { + color: #757575 !important; +} + +.text-grey-darken-2 { + color: #616161 !important; +} + +.text-grey-darken-3 { + color: #424242 !important; +} + +.text-grey-darken-4 { + color: #212121 !important; +} + +.text-shades-black { + color: #000000 !important; +} + +.text-shades-white { + color: #FFFFFF !important; +} + +.text-shades-transparent { + color: transparent !important; +} + +/*! + * ress.css • v2.0.4 + * MIT License + * github.com/filipelinhares/ress + */ +/* # ================================================================= + # Global selectors + # ================================================================= */ +html { + box-sizing: border-box; + overflow-y: scroll; /* All browsers without overlaying scrollbars */ + -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ + word-break: normal; + -moz-tab-size: 4; + tab-size: 4; +} + +*, +::before, +::after { + background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ + box-sizing: inherit; +} + +::before, +::after { + text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ + vertical-align: inherit; +} + +* { + padding: 0; /* Reset `padding` and `margin` of all elements */ + margin: 0; +} + +/* # ================================================================= + # General elements + # ================================================================= */ +hr { + overflow: visible; /* Show the overflow in Edge and IE */ + height: 0; /* Add the correct box sizing in Firefox */ +} + +details, +main { + display: block; /* Render the `main` element consistently in IE. */ +} + +summary { + display: list-item; /* Add the correct display in all browsers */ +} + +small { + font-size: 80%; /* Set font-size to 80% in `small` elements */ +} + +[hidden] { + display: none; /* Add the correct display in IE */ +} + +abbr[title] { + border-bottom: none; /* Remove the bottom border in Chrome 57 */ + /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */ + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +a { + background-color: transparent; /* Remove the gray background on active links in IE 10 */ +} + +a:active, +a:hover { + outline-width: 0; /* Remove the outline when hovering in all browsers */ +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* Specify the font family of code elements */ +} + +pre { + font-size: 1em; /* Correct the odd `em` font sizing in all browsers */ +} + +b, +strong { + font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */ +} + +/* https://gist.github.com/unruthless/413930 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* # ================================================================= + # Forms + # ================================================================= */ +input { + border-radius: 0; +} + +/* Replace pointer cursor in disabled elements */ +[disabled] { + cursor: default; +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */ +} + +[type=search] { + -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */ + outline-offset: -2px; /* Correct the outline style in Safari */ +} + +[type=search]::-webkit-search-cancel-button, +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */ +} + +textarea { + overflow: auto; /* Internet Explorer 11+ */ + resize: vertical; /* Specify textarea resizability */ +} + +button, +input, +optgroup, +select, +textarea { + font: inherit; /* Specify font inheritance of form elements */ +} + +optgroup { + font-weight: bold; /* Restore the font weight unset by the previous rule */ +} + +button { + overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ +} + +button, +select { + text-transform: none; /* Firefox 40+, Internet Explorer 11- */ +} + +/* Apply cursor pointer to button elements */ +button, +[type=button], +[type=reset], +[type=submit], +[role=button] { + cursor: pointer; + color: inherit; +} + +/* Remove inner padding and border in Firefox 4+ */ +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/* Replace focus style removed in the border reset above */ +button:-moz-focusring, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + outline: 1px dotted ButtonText; +} + +button, +html [type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */ +} + +/* Remove the default button styling in all browsers */ +button, +input, +select, +textarea { + background-color: transparent; + border-style: none; +} + +/* Style select like a standard input */ +select { + -moz-appearance: none; /* Firefox 36+ */ + -webkit-appearance: none; /* Chrome 41+ */ +} + +select::-ms-expand { + display: none; /* Internet Explorer 11+ */ +} + +select::-ms-value { + color: currentColor; /* Internet Explorer 11+ */ +} + +legend { + border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */ + color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */ + display: table; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge and IE */ + white-space: normal; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */ +} + +::-webkit-file-upload-button { + /* Correct the inability to style clickable types in iOS and Safari */ + -webkit-appearance: button; + color: inherit; + font: inherit; /* Change font properties to `inherit` in Chrome and Safari */ +} + +::-ms-clear, +::-ms-reveal { + display: none; +} + +/* # ================================================================= + # Specify media element style + # ================================================================= */ +img { + border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */ +} + +/* Add the correct vertical alignment in Chrome, Firefox, and Opera */ +progress { + vertical-align: baseline; +} + +/* # ================================================================= + # Accessibility + # ================================================================= */ +/* Hide content from screens but not screenreaders */ +@media screen { + [hidden~=screen] { + display: inherit; + } + [hidden~=screen]:not(:active):not(:focus):not(:target) { + position: absolute !important; + clip: rect(0 0 0 0) !important; + } +} +/* Specify the progress cursor of updating elements */ +[aria-busy=true] { + cursor: progress; +} + +/* Specify the pointer cursor of trigger elements */ +[aria-controls] { + cursor: pointer; +} + +/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ +[aria-disabled=true] { + cursor: default; +} + +.dialog-transition-enter-active, +.dialog-bottom-transition-enter-active, +.dialog-top-transition-enter-active { + transition-duration: 225ms !important; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; +} +.dialog-transition-leave-active, +.dialog-bottom-transition-leave-active, +.dialog-top-transition-leave-active { + transition-duration: 125ms !important; + transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; +} +.dialog-transition-enter-active, .dialog-transition-leave-active, +.dialog-bottom-transition-enter-active, +.dialog-bottom-transition-leave-active, +.dialog-top-transition-enter-active, +.dialog-top-transition-leave-active { + transition-property: transform, opacity !important; + pointer-events: none; +} + +.dialog-transition-enter-from, .dialog-transition-leave-to { + transform: scale(0.9); + opacity: 0; +} +.dialog-transition-enter-to, .dialog-transition-leave-from { + opacity: 1; +} + +.dialog-bottom-transition-enter-from, .dialog-bottom-transition-leave-to { + transform: translateY(calc(50vh + 50%)); +} + +.dialog-top-transition-enter-from, .dialog-top-transition-leave-to { + transform: translateY(calc(-50vh - 50%)); +} + +.picker-transition-enter-active, +.picker-reverse-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-transition-leave-active, +.picker-reverse-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-transition-move, +.picker-reverse-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-transition-enter-from, .picker-transition-leave-to, +.picker-reverse-transition-enter-from, +.picker-reverse-transition-leave-to { + opacity: 0; +} +.picker-transition-leave-from, .picker-transition-leave-active, .picker-transition-leave-to, +.picker-reverse-transition-leave-from, +.picker-reverse-transition-leave-active, +.picker-reverse-transition-leave-to { + position: absolute !important; +} +.picker-transition-enter-active, .picker-transition-leave-active, +.picker-reverse-transition-enter-active, +.picker-reverse-transition-leave-active { + transition-property: transform, opacity !important; +} + +.picker-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-transition-enter-from { + transform: translate(100%, 0); +} +.picker-transition-leave-to { + transform: translate(-100%, 0); +} + +.picker-reverse-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-reverse-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-reverse-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.picker-reverse-transition-enter-from { + transform: translate(-100%, 0); +} +.picker-reverse-transition-leave-to { + transform: translate(100%, 0); +} + +.expand-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.expand-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.expand-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.expand-transition-enter-active, .expand-transition-leave-active { + transition-property: height !important; +} + +.expand-x-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.expand-x-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.expand-x-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.expand-x-transition-enter-active, .expand-x-transition-leave-active { + transition-property: width !important; +} + +.scale-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-transition-leave-to { + opacity: 0; +} +.scale-transition-leave-active { + transition-duration: 100ms !important; +} +.scale-transition-enter-from { + opacity: 0; + transform: scale(0); +} +.scale-transition-enter-active, .scale-transition-leave-active { + transition-property: transform, opacity !important; +} + +.scale-rotate-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-rotate-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-rotate-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-rotate-transition-leave-to { + opacity: 0; +} +.scale-rotate-transition-leave-active { + transition-duration: 100ms !important; +} +.scale-rotate-transition-enter-from { + opacity: 0; + transform: scale(0) rotate(-45deg); +} +.scale-rotate-transition-enter-active, .scale-rotate-transition-leave-active { + transition-property: transform, opacity !important; +} + +.scale-rotate-reverse-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-rotate-reverse-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-rotate-reverse-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scale-rotate-reverse-transition-leave-to { + opacity: 0; +} +.scale-rotate-reverse-transition-leave-active { + transition-duration: 100ms !important; +} +.scale-rotate-reverse-transition-enter-from { + opacity: 0; + transform: scale(0) rotate(45deg); +} +.scale-rotate-reverse-transition-enter-active, .scale-rotate-reverse-transition-leave-active { + transition-property: transform, opacity !important; +} + +.message-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.message-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.message-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.message-transition-enter-from, .message-transition-leave-to { + opacity: 0; + transform: translateY(-15px); +} +.message-transition-leave-from, .message-transition-leave-active { + position: absolute; +} +.message-transition-enter-active, .message-transition-leave-active { + transition-property: transform, opacity !important; +} + +.slide-y-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-y-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-y-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-y-transition-enter-from, .slide-y-transition-leave-to { + opacity: 0; + transform: translateY(-15px); +} +.slide-y-transition-enter-active, .slide-y-transition-leave-active { + transition-property: transform, opacity !important; +} + +.slide-y-reverse-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-y-reverse-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-y-reverse-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-y-reverse-transition-enter-from, .slide-y-reverse-transition-leave-to { + opacity: 0; + transform: translateY(15px); +} +.slide-y-reverse-transition-enter-active, .slide-y-reverse-transition-leave-active { + transition-property: transform, opacity !important; +} + +.scroll-y-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-y-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-y-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-y-transition-enter-from, .scroll-y-transition-leave-to { + opacity: 0; +} +.scroll-y-transition-enter-from { + transform: translateY(-15px); +} +.scroll-y-transition-leave-to { + transform: translateY(15px); +} +.scroll-y-transition-enter-active, .scroll-y-transition-leave-active { + transition-property: transform, opacity !important; +} + +.scroll-y-reverse-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-y-reverse-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-y-reverse-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-y-reverse-transition-enter-from, .scroll-y-reverse-transition-leave-to { + opacity: 0; +} +.scroll-y-reverse-transition-enter-from { + transform: translateY(15px); +} +.scroll-y-reverse-transition-leave-to { + transform: translateY(-15px); +} +.scroll-y-reverse-transition-enter-active, .scroll-y-reverse-transition-leave-active { + transition-property: transform, opacity !important; +} + +.scroll-x-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-x-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-x-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-x-transition-enter-from, .scroll-x-transition-leave-to { + opacity: 0; +} +.scroll-x-transition-enter-from { + transform: translateX(-15px); +} +.scroll-x-transition-leave-to { + transform: translateX(15px); +} +.scroll-x-transition-enter-active, .scroll-x-transition-leave-active { + transition-property: transform, opacity !important; +} + +.scroll-x-reverse-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-x-reverse-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-x-reverse-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.scroll-x-reverse-transition-enter-from, .scroll-x-reverse-transition-leave-to { + opacity: 0; +} +.scroll-x-reverse-transition-enter-from { + transform: translateX(15px); +} +.scroll-x-reverse-transition-leave-to { + transform: translateX(-15px); +} +.scroll-x-reverse-transition-enter-active, .scroll-x-reverse-transition-leave-active { + transition-property: transform, opacity !important; +} + +.slide-x-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-x-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-x-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-x-transition-enter-from, .slide-x-transition-leave-to { + opacity: 0; + transform: translateX(-15px); +} +.slide-x-transition-enter-active, .slide-x-transition-leave-active { + transition-property: transform, opacity !important; +} + +.slide-x-reverse-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-x-reverse-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-x-reverse-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.slide-x-reverse-transition-enter-from, .slide-x-reverse-transition-leave-to { + opacity: 0; + transform: translateX(15px); +} +.slide-x-reverse-transition-enter-active, .slide-x-reverse-transition-leave-active { + transition-property: transform, opacity !important; +} + +.fade-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.fade-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.fade-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.fade-transition-enter-from, .fade-transition-leave-to { + opacity: 0 !important; +} +.fade-transition-enter-active, .fade-transition-leave-active { + transition-property: opacity !important; +} + +.fab-transition-enter-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.fab-transition-leave-active { + transition-duration: 0.3s !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.fab-transition-move { + transition-duration: 0.5s !important; + transition-property: transform !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; +} +.fab-transition-enter-from, .fab-transition-leave-to { + transform: scale(0) rotate(-45deg); +} +.fab-transition-enter-active, .fab-transition-leave-active { + transition-property: transform !important; +} + +.v-locale--is-rtl { + direction: rtl; +} +.v-locale--is-ltr { + direction: ltr; +} + +.blockquote { + padding: 16px 0 16px 24px; + font-size: 18px; + font-weight: 300; +} + +html { + font-family: "Roboto", sans-serif; + line-height: 1.5; + font-size: 1rem; + overflow-x: hidden; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +html.overflow-y-hidden { + overflow-y: hidden !important; +} + +:root { + --v-theme-overlay-multiplier: 1; + --v-scrollbar-offset: 0px; +} + +@supports (-webkit-touch-callout: none) { + body { + cursor: pointer; + } +} +@media only print { + .hidden-print-only { + display: none !important; + } +} + +@media only screen { + .hidden-screen-only { + display: none !important; + } +} + +@media (max-width: 599.98px) { + .hidden-xs { + display: none !important; + } +} + +@media (min-width: 600px) and (max-width: 959.98px) { + .hidden-sm { + display: none !important; + } +} + +@media (min-width: 960px) and (max-width: 1279.98px) { + .hidden-md { + display: none !important; + } +} + +@media (min-width: 1280px) and (max-width: 1919.98px) { + .hidden-lg { + display: none !important; + } +} + +@media (min-width: 1920px) and (max-width: 2559.98px) { + .hidden-xl { + display: none !important; + } +} + +@media (min-width: 2560px) { + .hidden-xxl { + display: none !important; + } +} + +@media (min-width: 600px) { + .hidden-sm-and-up { + display: none !important; + } +} + +@media (min-width: 960px) { + .hidden-md-and-up { + display: none !important; + } +} + +@media (min-width: 1280px) { + .hidden-lg-and-up { + display: none !important; + } +} + +@media (min-width: 1920px) { + .hidden-xl-and-up { + display: none !important; + } +} + +@media (max-width: 959.98px) { + .hidden-sm-and-down { + display: none !important; + } +} + +@media (max-width: 1279.98px) { + .hidden-md-and-down { + display: none !important; + } +} + +@media (max-width: 1919.98px) { + .hidden-lg-and-down { + display: none !important; + } +} + +@media (max-width: 2559.98px) { + .hidden-xl-and-down { + display: none !important; + } +} + +.elevation-24 { + box-shadow: 0px 11px 15px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 24px 38px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 9px 46px 8px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-23 { + box-shadow: 0px 11px 14px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 23px 36px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 9px 44px 8px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-22 { + box-shadow: 0px 10px 14px -6px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 22px 35px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 8px 42px 7px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-21 { + box-shadow: 0px 10px 13px -6px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 21px 33px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 8px 40px 7px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-20 { + box-shadow: 0px 10px 13px -6px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 20px 31px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 8px 38px 7px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-19 { + box-shadow: 0px 9px 12px -6px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 19px 29px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 7px 36px 6px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-18 { + box-shadow: 0px 9px 11px -5px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 18px 28px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 7px 34px 6px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-17 { + box-shadow: 0px 8px 11px -5px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 17px 26px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 6px 32px 5px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-16 { + box-shadow: 0px 8px 10px -5px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 16px 24px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 6px 30px 5px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-15 { + box-shadow: 0px 8px 9px -5px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 15px 22px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 6px 28px 5px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-14 { + box-shadow: 0px 7px 9px -4px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 14px 21px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 5px 26px 4px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-13 { + box-shadow: 0px 7px 8px -4px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 13px 19px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 5px 24px 4px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-12 { + box-shadow: 0px 7px 8px -4px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 12px 17px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 5px 22px 4px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-11 { + box-shadow: 0px 6px 7px -4px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 11px 15px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 4px 20px 3px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-10 { + box-shadow: 0px 6px 6px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 10px 14px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 4px 18px 3px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-9 { + box-shadow: 0px 5px 6px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 9px 12px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 3px 16px 2px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-8 { + box-shadow: 0px 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 3px 14px 2px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-7 { + box-shadow: 0px 4px 5px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 7px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 2px 16px 1px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-6 { + box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 6px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 18px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-5 { + box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-4 { + box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-3 { + box-shadow: 0px 3px 3px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 3px 4px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 8px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-2 { + box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-1 { + box-shadow: 0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 3px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.elevation-0 { + box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important; +} + +.d-sr-only, +.d-sr-only-focusable:not(:focus) { + border: 0 !important; + clip: rect(0, 0, 0, 0) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 1px !important; +} + +.overflow-auto { + overflow: auto !important; +} + +.overflow-hidden { + overflow: hidden !important; +} + +.overflow-visible { + overflow: visible !important; +} + +.overflow-scroll { + overflow: scroll !important; +} + +.overflow-x-auto { + overflow-x: auto !important; +} + +.overflow-x-hidden { + overflow-x: hidden !important; +} + +.overflow-x-scroll { + overflow-x: scroll !important; +} + +.overflow-y-auto { + overflow-y: auto !important; +} + +.overflow-y-hidden { + overflow-y: hidden !important; +} + +.overflow-y-scroll { + overflow-y: scroll !important; +} + +.d-none { + display: none !important; +} + +.d-inline { + display: inline !important; +} + +.d-inline-block { + display: inline-block !important; +} + +.d-block { + display: block !important; +} + +.d-table { + display: table !important; +} + +.d-table-row { + display: table-row !important; +} + +.d-table-cell { + display: table-cell !important; +} + +.d-flex { + display: flex !important; +} + +.d-inline-flex { + display: inline-flex !important; +} + +.float-none { + float: none !important; +} + +.float-left { + float: left !important; +} + +.float-right { + float: right !important; +} + +.v-locale--is-rtl .float-end { + float: left !important; +} + +.v-locale--is-rtl .float-start { + float: right !important; +} + +.v-locale--is-ltr .float-end { + float: right !important; +} + +.v-locale--is-ltr .float-start { + float: left !important; +} + +.flex-fill { + flex: 1 1 auto !important; +} + +.flex-1-1 { + flex: 1 1 auto !important; +} + +.flex-1-0 { + flex: 1 0 auto !important; +} + +.flex-0-1 { + flex: 0 1 auto !important; +} + +.flex-0-0 { + flex: 0 0 auto !important; +} + +.flex-1-1-100 { + flex: 1 1 100% !important; +} + +.flex-1-0-100 { + flex: 1 0 100% !important; +} + +.flex-0-1-100 { + flex: 0 1 100% !important; +} + +.flex-0-0-100 { + flex: 0 0 100% !important; +} + +.flex-1-1-0 { + flex: 1 1 0 !important; +} + +.flex-1-0-0 { + flex: 1 0 0 !important; +} + +.flex-0-1-0 { + flex: 0 1 0 !important; +} + +.flex-0-0-0 { + flex: 0 0 0 !important; +} + +.flex-row { + flex-direction: row !important; +} + +.flex-column { + flex-direction: column !important; +} + +.flex-row-reverse { + flex-direction: row-reverse !important; +} + +.flex-column-reverse { + flex-direction: column-reverse !important; +} + +.flex-grow-0 { + flex-grow: 0 !important; +} + +.flex-grow-1 { + flex-grow: 1 !important; +} + +.flex-shrink-0 { + flex-shrink: 0 !important; +} + +.flex-shrink-1 { + flex-shrink: 1 !important; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.flex-nowrap { + flex-wrap: nowrap !important; +} + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} + +.justify-start { + justify-content: flex-start !important; +} + +.justify-end { + justify-content: flex-end !important; +} + +.justify-center { + justify-content: center !important; +} + +.justify-space-between { + justify-content: space-between !important; +} + +.justify-space-around { + justify-content: space-around !important; +} + +.justify-space-evenly { + justify-content: space-evenly !important; +} + +.align-start { + align-items: flex-start !important; +} + +.align-end { + align-items: flex-end !important; +} + +.align-center { + align-items: center !important; +} + +.align-baseline { + align-items: baseline !important; +} + +.align-stretch { + align-items: stretch !important; +} + +.align-content-start { + align-content: flex-start !important; +} + +.align-content-end { + align-content: flex-end !important; +} + +.align-content-center { + align-content: center !important; +} + +.align-content-space-between { + align-content: space-between !important; +} + +.align-content-space-around { + align-content: space-around !important; +} + +.align-content-space-evenly { + align-content: space-evenly !important; +} + +.align-content-stretch { + align-content: stretch !important; +} + +.align-self-auto { + align-self: auto !important; +} + +.align-self-start { + align-self: flex-start !important; +} + +.align-self-end { + align-self: flex-end !important; +} + +.align-self-center { + align-self: center !important; +} + +.align-self-baseline { + align-self: baseline !important; +} + +.align-self-stretch { + align-self: stretch !important; +} + +.order-first { + order: -1 !important; +} + +.order-0 { + order: 0 !important; +} + +.order-1 { + order: 1 !important; +} + +.order-2 { + order: 2 !important; +} + +.order-3 { + order: 3 !important; +} + +.order-4 { + order: 4 !important; +} + +.order-5 { + order: 5 !important; +} + +.order-6 { + order: 6 !important; +} + +.order-7 { + order: 7 !important; +} + +.order-8 { + order: 8 !important; +} + +.order-9 { + order: 9 !important; +} + +.order-10 { + order: 10 !important; +} + +.order-11 { + order: 11 !important; +} + +.order-12 { + order: 12 !important; +} + +.order-last { + order: 13 !important; +} + +.ga-0 { + gap: 0px !important; +} + +.ga-1 { + gap: 4px !important; +} + +.ga-2 { + gap: 8px !important; +} + +.ga-3 { + gap: 12px !important; +} + +.ga-4 { + gap: 16px !important; +} + +.ga-5 { + gap: 20px !important; +} + +.ga-6 { + gap: 24px !important; +} + +.ga-7 { + gap: 28px !important; +} + +.ga-8 { + gap: 32px !important; +} + +.ga-9 { + gap: 36px !important; +} + +.ga-10 { + gap: 40px !important; +} + +.ga-11 { + gap: 44px !important; +} + +.ga-12 { + gap: 48px !important; +} + +.ga-13 { + gap: 52px !important; +} + +.ga-14 { + gap: 56px !important; +} + +.ga-15 { + gap: 60px !important; +} + +.ga-16 { + gap: 64px !important; +} + +.ga-auto { + gap: auto !important; +} + +.gr-0 { + row-gap: 0px !important; +} + +.gr-1 { + row-gap: 4px !important; +} + +.gr-2 { + row-gap: 8px !important; +} + +.gr-3 { + row-gap: 12px !important; +} + +.gr-4 { + row-gap: 16px !important; +} + +.gr-5 { + row-gap: 20px !important; +} + +.gr-6 { + row-gap: 24px !important; +} + +.gr-7 { + row-gap: 28px !important; +} + +.gr-8 { + row-gap: 32px !important; +} + +.gr-9 { + row-gap: 36px !important; +} + +.gr-10 { + row-gap: 40px !important; +} + +.gr-11 { + row-gap: 44px !important; +} + +.gr-12 { + row-gap: 48px !important; +} + +.gr-13 { + row-gap: 52px !important; +} + +.gr-14 { + row-gap: 56px !important; +} + +.gr-15 { + row-gap: 60px !important; +} + +.gr-16 { + row-gap: 64px !important; +} + +.gr-auto { + row-gap: auto !important; +} + +.gc-0 { + column-gap: 0px !important; +} + +.gc-1 { + column-gap: 4px !important; +} + +.gc-2 { + column-gap: 8px !important; +} + +.gc-3 { + column-gap: 12px !important; +} + +.gc-4 { + column-gap: 16px !important; +} + +.gc-5 { + column-gap: 20px !important; +} + +.gc-6 { + column-gap: 24px !important; +} + +.gc-7 { + column-gap: 28px !important; +} + +.gc-8 { + column-gap: 32px !important; +} + +.gc-9 { + column-gap: 36px !important; +} + +.gc-10 { + column-gap: 40px !important; +} + +.gc-11 { + column-gap: 44px !important; +} + +.gc-12 { + column-gap: 48px !important; +} + +.gc-13 { + column-gap: 52px !important; +} + +.gc-14 { + column-gap: 56px !important; +} + +.gc-15 { + column-gap: 60px !important; +} + +.gc-16 { + column-gap: 64px !important; +} + +.gc-auto { + column-gap: auto !important; +} + +.ma-0 { + margin: 0px !important; +} + +.ma-1 { + margin: 4px !important; +} + +.ma-2 { + margin: 8px !important; +} + +.ma-3 { + margin: 12px !important; +} + +.ma-4 { + margin: 16px !important; +} + +.ma-5 { + margin: 20px !important; +} + +.ma-6 { + margin: 24px !important; +} + +.ma-7 { + margin: 28px !important; +} + +.ma-8 { + margin: 32px !important; +} + +.ma-9 { + margin: 36px !important; +} + +.ma-10 { + margin: 40px !important; +} + +.ma-11 { + margin: 44px !important; +} + +.ma-12 { + margin: 48px !important; +} + +.ma-13 { + margin: 52px !important; +} + +.ma-14 { + margin: 56px !important; +} + +.ma-15 { + margin: 60px !important; +} + +.ma-16 { + margin: 64px !important; +} + +.ma-auto { + margin: auto !important; +} + +.mx-0 { + margin-right: 0px !important; + margin-left: 0px !important; +} + +.mx-1 { + margin-right: 4px !important; + margin-left: 4px !important; +} + +.mx-2 { + margin-right: 8px !important; + margin-left: 8px !important; +} + +.mx-3 { + margin-right: 12px !important; + margin-left: 12px !important; +} + +.mx-4 { + margin-right: 16px !important; + margin-left: 16px !important; +} + +.mx-5 { + margin-right: 20px !important; + margin-left: 20px !important; +} + +.mx-6 { + margin-right: 24px !important; + margin-left: 24px !important; +} + +.mx-7 { + margin-right: 28px !important; + margin-left: 28px !important; +} + +.mx-8 { + margin-right: 32px !important; + margin-left: 32px !important; +} + +.mx-9 { + margin-right: 36px !important; + margin-left: 36px !important; +} + +.mx-10 { + margin-right: 40px !important; + margin-left: 40px !important; +} + +.mx-11 { + margin-right: 44px !important; + margin-left: 44px !important; +} + +.mx-12 { + margin-right: 48px !important; + margin-left: 48px !important; +} + +.mx-13 { + margin-right: 52px !important; + margin-left: 52px !important; +} + +.mx-14 { + margin-right: 56px !important; + margin-left: 56px !important; +} + +.mx-15 { + margin-right: 60px !important; + margin-left: 60px !important; +} + +.mx-16 { + margin-right: 64px !important; + margin-left: 64px !important; +} + +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +.my-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; +} + +.my-1 { + margin-top: 4px !important; + margin-bottom: 4px !important; +} + +.my-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; +} + +.my-3 { + margin-top: 12px !important; + margin-bottom: 12px !important; +} + +.my-4 { + margin-top: 16px !important; + margin-bottom: 16px !important; +} + +.my-5 { + margin-top: 20px !important; + margin-bottom: 20px !important; +} + +.my-6 { + margin-top: 24px !important; + margin-bottom: 24px !important; +} + +.my-7 { + margin-top: 28px !important; + margin-bottom: 28px !important; +} + +.my-8 { + margin-top: 32px !important; + margin-bottom: 32px !important; +} + +.my-9 { + margin-top: 36px !important; + margin-bottom: 36px !important; +} + +.my-10 { + margin-top: 40px !important; + margin-bottom: 40px !important; +} + +.my-11 { + margin-top: 44px !important; + margin-bottom: 44px !important; +} + +.my-12 { + margin-top: 48px !important; + margin-bottom: 48px !important; +} + +.my-13 { + margin-top: 52px !important; + margin-bottom: 52px !important; +} + +.my-14 { + margin-top: 56px !important; + margin-bottom: 56px !important; +} + +.my-15 { + margin-top: 60px !important; + margin-bottom: 60px !important; +} + +.my-16 { + margin-top: 64px !important; + margin-bottom: 64px !important; +} + +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.mt-0 { + margin-top: 0px !important; +} + +.mt-1 { + margin-top: 4px !important; +} + +.mt-2 { + margin-top: 8px !important; +} + +.mt-3 { + margin-top: 12px !important; +} + +.mt-4 { + margin-top: 16px !important; +} + +.mt-5 { + margin-top: 20px !important; +} + +.mt-6 { + margin-top: 24px !important; +} + +.mt-7 { + margin-top: 28px !important; +} + +.mt-8 { + margin-top: 32px !important; +} + +.mt-9 { + margin-top: 36px !important; +} + +.mt-10 { + margin-top: 40px !important; +} + +.mt-11 { + margin-top: 44px !important; +} + +.mt-12 { + margin-top: 48px !important; +} + +.mt-13 { + margin-top: 52px !important; +} + +.mt-14 { + margin-top: 56px !important; +} + +.mt-15 { + margin-top: 60px !important; +} + +.mt-16 { + margin-top: 64px !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.mr-0 { + margin-right: 0px !important; +} + +.mr-1 { + margin-right: 4px !important; +} + +.mr-2 { + margin-right: 8px !important; +} + +.mr-3 { + margin-right: 12px !important; +} + +.mr-4 { + margin-right: 16px !important; +} + +.mr-5 { + margin-right: 20px !important; +} + +.mr-6 { + margin-right: 24px !important; +} + +.mr-7 { + margin-right: 28px !important; +} + +.mr-8 { + margin-right: 32px !important; +} + +.mr-9 { + margin-right: 36px !important; +} + +.mr-10 { + margin-right: 40px !important; +} + +.mr-11 { + margin-right: 44px !important; +} + +.mr-12 { + margin-right: 48px !important; +} + +.mr-13 { + margin-right: 52px !important; +} + +.mr-14 { + margin-right: 56px !important; +} + +.mr-15 { + margin-right: 60px !important; +} + +.mr-16 { + margin-right: 64px !important; +} + +.mr-auto { + margin-right: auto !important; +} + +.mb-0 { + margin-bottom: 0px !important; +} + +.mb-1 { + margin-bottom: 4px !important; +} + +.mb-2 { + margin-bottom: 8px !important; +} + +.mb-3 { + margin-bottom: 12px !important; +} + +.mb-4 { + margin-bottom: 16px !important; +} + +.mb-5 { + margin-bottom: 20px !important; +} + +.mb-6 { + margin-bottom: 24px !important; +} + +.mb-7 { + margin-bottom: 28px !important; +} + +.mb-8 { + margin-bottom: 32px !important; +} + +.mb-9 { + margin-bottom: 36px !important; +} + +.mb-10 { + margin-bottom: 40px !important; +} + +.mb-11 { + margin-bottom: 44px !important; +} + +.mb-12 { + margin-bottom: 48px !important; +} + +.mb-13 { + margin-bottom: 52px !important; +} + +.mb-14 { + margin-bottom: 56px !important; +} + +.mb-15 { + margin-bottom: 60px !important; +} + +.mb-16 { + margin-bottom: 64px !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.ml-0 { + margin-left: 0px !important; +} + +.ml-1 { + margin-left: 4px !important; +} + +.ml-2 { + margin-left: 8px !important; +} + +.ml-3 { + margin-left: 12px !important; +} + +.ml-4 { + margin-left: 16px !important; +} + +.ml-5 { + margin-left: 20px !important; +} + +.ml-6 { + margin-left: 24px !important; +} + +.ml-7 { + margin-left: 28px !important; +} + +.ml-8 { + margin-left: 32px !important; +} + +.ml-9 { + margin-left: 36px !important; +} + +.ml-10 { + margin-left: 40px !important; +} + +.ml-11 { + margin-left: 44px !important; +} + +.ml-12 { + margin-left: 48px !important; +} + +.ml-13 { + margin-left: 52px !important; +} + +.ml-14 { + margin-left: 56px !important; +} + +.ml-15 { + margin-left: 60px !important; +} + +.ml-16 { + margin-left: 64px !important; +} + +.ml-auto { + margin-left: auto !important; +} + +.ms-0 { + margin-inline-start: 0px !important; +} + +.ms-1 { + margin-inline-start: 4px !important; +} + +.ms-2 { + margin-inline-start: 8px !important; +} + +.ms-3 { + margin-inline-start: 12px !important; +} + +.ms-4 { + margin-inline-start: 16px !important; +} + +.ms-5 { + margin-inline-start: 20px !important; +} + +.ms-6 { + margin-inline-start: 24px !important; +} + +.ms-7 { + margin-inline-start: 28px !important; +} + +.ms-8 { + margin-inline-start: 32px !important; +} + +.ms-9 { + margin-inline-start: 36px !important; +} + +.ms-10 { + margin-inline-start: 40px !important; +} + +.ms-11 { + margin-inline-start: 44px !important; +} + +.ms-12 { + margin-inline-start: 48px !important; +} + +.ms-13 { + margin-inline-start: 52px !important; +} + +.ms-14 { + margin-inline-start: 56px !important; +} + +.ms-15 { + margin-inline-start: 60px !important; +} + +.ms-16 { + margin-inline-start: 64px !important; +} + +.ms-auto { + margin-inline-start: auto !important; +} + +.me-0 { + margin-inline-end: 0px !important; +} + +.me-1 { + margin-inline-end: 4px !important; +} + +.me-2 { + margin-inline-end: 8px !important; +} + +.me-3 { + margin-inline-end: 12px !important; +} + +.me-4 { + margin-inline-end: 16px !important; +} + +.me-5 { + margin-inline-end: 20px !important; +} + +.me-6 { + margin-inline-end: 24px !important; +} + +.me-7 { + margin-inline-end: 28px !important; +} + +.me-8 { + margin-inline-end: 32px !important; +} + +.me-9 { + margin-inline-end: 36px !important; +} + +.me-10 { + margin-inline-end: 40px !important; +} + +.me-11 { + margin-inline-end: 44px !important; +} + +.me-12 { + margin-inline-end: 48px !important; +} + +.me-13 { + margin-inline-end: 52px !important; +} + +.me-14 { + margin-inline-end: 56px !important; +} + +.me-15 { + margin-inline-end: 60px !important; +} + +.me-16 { + margin-inline-end: 64px !important; +} + +.me-auto { + margin-inline-end: auto !important; +} + +.ma-n1 { + margin: -4px !important; +} + +.ma-n2 { + margin: -8px !important; +} + +.ma-n3 { + margin: -12px !important; +} + +.ma-n4 { + margin: -16px !important; +} + +.ma-n5 { + margin: -20px !important; +} + +.ma-n6 { + margin: -24px !important; +} + +.ma-n7 { + margin: -28px !important; +} + +.ma-n8 { + margin: -32px !important; +} + +.ma-n9 { + margin: -36px !important; +} + +.ma-n10 { + margin: -40px !important; +} + +.ma-n11 { + margin: -44px !important; +} + +.ma-n12 { + margin: -48px !important; +} + +.ma-n13 { + margin: -52px !important; +} + +.ma-n14 { + margin: -56px !important; +} + +.ma-n15 { + margin: -60px !important; +} + +.ma-n16 { + margin: -64px !important; +} + +.mx-n1 { + margin-right: -4px !important; + margin-left: -4px !important; +} + +.mx-n2 { + margin-right: -8px !important; + margin-left: -8px !important; +} + +.mx-n3 { + margin-right: -12px !important; + margin-left: -12px !important; +} + +.mx-n4 { + margin-right: -16px !important; + margin-left: -16px !important; +} + +.mx-n5 { + margin-right: -20px !important; + margin-left: -20px !important; +} + +.mx-n6 { + margin-right: -24px !important; + margin-left: -24px !important; +} + +.mx-n7 { + margin-right: -28px !important; + margin-left: -28px !important; +} + +.mx-n8 { + margin-right: -32px !important; + margin-left: -32px !important; +} + +.mx-n9 { + margin-right: -36px !important; + margin-left: -36px !important; +} + +.mx-n10 { + margin-right: -40px !important; + margin-left: -40px !important; +} + +.mx-n11 { + margin-right: -44px !important; + margin-left: -44px !important; +} + +.mx-n12 { + margin-right: -48px !important; + margin-left: -48px !important; +} + +.mx-n13 { + margin-right: -52px !important; + margin-left: -52px !important; +} + +.mx-n14 { + margin-right: -56px !important; + margin-left: -56px !important; +} + +.mx-n15 { + margin-right: -60px !important; + margin-left: -60px !important; +} + +.mx-n16 { + margin-right: -64px !important; + margin-left: -64px !important; +} + +.my-n1 { + margin-top: -4px !important; + margin-bottom: -4px !important; +} + +.my-n2 { + margin-top: -8px !important; + margin-bottom: -8px !important; +} + +.my-n3 { + margin-top: -12px !important; + margin-bottom: -12px !important; +} + +.my-n4 { + margin-top: -16px !important; + margin-bottom: -16px !important; +} + +.my-n5 { + margin-top: -20px !important; + margin-bottom: -20px !important; +} + +.my-n6 { + margin-top: -24px !important; + margin-bottom: -24px !important; +} + +.my-n7 { + margin-top: -28px !important; + margin-bottom: -28px !important; +} + +.my-n8 { + margin-top: -32px !important; + margin-bottom: -32px !important; +} + +.my-n9 { + margin-top: -36px !important; + margin-bottom: -36px !important; +} + +.my-n10 { + margin-top: -40px !important; + margin-bottom: -40px !important; +} + +.my-n11 { + margin-top: -44px !important; + margin-bottom: -44px !important; +} + +.my-n12 { + margin-top: -48px !important; + margin-bottom: -48px !important; +} + +.my-n13 { + margin-top: -52px !important; + margin-bottom: -52px !important; +} + +.my-n14 { + margin-top: -56px !important; + margin-bottom: -56px !important; +} + +.my-n15 { + margin-top: -60px !important; + margin-bottom: -60px !important; +} + +.my-n16 { + margin-top: -64px !important; + margin-bottom: -64px !important; +} + +.mt-n1 { + margin-top: -4px !important; +} + +.mt-n2 { + margin-top: -8px !important; +} + +.mt-n3 { + margin-top: -12px !important; +} + +.mt-n4 { + margin-top: -16px !important; +} + +.mt-n5 { + margin-top: -20px !important; +} + +.mt-n6 { + margin-top: -24px !important; +} + +.mt-n7 { + margin-top: -28px !important; +} + +.mt-n8 { + margin-top: -32px !important; +} + +.mt-n9 { + margin-top: -36px !important; +} + +.mt-n10 { + margin-top: -40px !important; +} + +.mt-n11 { + margin-top: -44px !important; +} + +.mt-n12 { + margin-top: -48px !important; +} + +.mt-n13 { + margin-top: -52px !important; +} + +.mt-n14 { + margin-top: -56px !important; +} + +.mt-n15 { + margin-top: -60px !important; +} + +.mt-n16 { + margin-top: -64px !important; +} + +.mr-n1 { + margin-right: -4px !important; +} + +.mr-n2 { + margin-right: -8px !important; +} + +.mr-n3 { + margin-right: -12px !important; +} + +.mr-n4 { + margin-right: -16px !important; +} + +.mr-n5 { + margin-right: -20px !important; +} + +.mr-n6 { + margin-right: -24px !important; +} + +.mr-n7 { + margin-right: -28px !important; +} + +.mr-n8 { + margin-right: -32px !important; +} + +.mr-n9 { + margin-right: -36px !important; +} + +.mr-n10 { + margin-right: -40px !important; +} + +.mr-n11 { + margin-right: -44px !important; +} + +.mr-n12 { + margin-right: -48px !important; +} + +.mr-n13 { + margin-right: -52px !important; +} + +.mr-n14 { + margin-right: -56px !important; +} + +.mr-n15 { + margin-right: -60px !important; +} + +.mr-n16 { + margin-right: -64px !important; +} + +.mb-n1 { + margin-bottom: -4px !important; +} + +.mb-n2 { + margin-bottom: -8px !important; +} + +.mb-n3 { + margin-bottom: -12px !important; +} + +.mb-n4 { + margin-bottom: -16px !important; +} + +.mb-n5 { + margin-bottom: -20px !important; +} + +.mb-n6 { + margin-bottom: -24px !important; +} + +.mb-n7 { + margin-bottom: -28px !important; +} + +.mb-n8 { + margin-bottom: -32px !important; +} + +.mb-n9 { + margin-bottom: -36px !important; +} + +.mb-n10 { + margin-bottom: -40px !important; +} + +.mb-n11 { + margin-bottom: -44px !important; +} + +.mb-n12 { + margin-bottom: -48px !important; +} + +.mb-n13 { + margin-bottom: -52px !important; +} + +.mb-n14 { + margin-bottom: -56px !important; +} + +.mb-n15 { + margin-bottom: -60px !important; +} + +.mb-n16 { + margin-bottom: -64px !important; +} + +.ml-n1 { + margin-left: -4px !important; +} + +.ml-n2 { + margin-left: -8px !important; +} + +.ml-n3 { + margin-left: -12px !important; +} + +.ml-n4 { + margin-left: -16px !important; +} + +.ml-n5 { + margin-left: -20px !important; +} + +.ml-n6 { + margin-left: -24px !important; +} + +.ml-n7 { + margin-left: -28px !important; +} + +.ml-n8 { + margin-left: -32px !important; +} + +.ml-n9 { + margin-left: -36px !important; +} + +.ml-n10 { + margin-left: -40px !important; +} + +.ml-n11 { + margin-left: -44px !important; +} + +.ml-n12 { + margin-left: -48px !important; +} + +.ml-n13 { + margin-left: -52px !important; +} + +.ml-n14 { + margin-left: -56px !important; +} + +.ml-n15 { + margin-left: -60px !important; +} + +.ml-n16 { + margin-left: -64px !important; +} + +.ms-n1 { + margin-inline-start: -4px !important; +} + +.ms-n2 { + margin-inline-start: -8px !important; +} + +.ms-n3 { + margin-inline-start: -12px !important; +} + +.ms-n4 { + margin-inline-start: -16px !important; +} + +.ms-n5 { + margin-inline-start: -20px !important; +} + +.ms-n6 { + margin-inline-start: -24px !important; +} + +.ms-n7 { + margin-inline-start: -28px !important; +} + +.ms-n8 { + margin-inline-start: -32px !important; +} + +.ms-n9 { + margin-inline-start: -36px !important; +} + +.ms-n10 { + margin-inline-start: -40px !important; +} + +.ms-n11 { + margin-inline-start: -44px !important; +} + +.ms-n12 { + margin-inline-start: -48px !important; +} + +.ms-n13 { + margin-inline-start: -52px !important; +} + +.ms-n14 { + margin-inline-start: -56px !important; +} + +.ms-n15 { + margin-inline-start: -60px !important; +} + +.ms-n16 { + margin-inline-start: -64px !important; +} + +.me-n1 { + margin-inline-end: -4px !important; +} + +.me-n2 { + margin-inline-end: -8px !important; +} + +.me-n3 { + margin-inline-end: -12px !important; +} + +.me-n4 { + margin-inline-end: -16px !important; +} + +.me-n5 { + margin-inline-end: -20px !important; +} + +.me-n6 { + margin-inline-end: -24px !important; +} + +.me-n7 { + margin-inline-end: -28px !important; +} + +.me-n8 { + margin-inline-end: -32px !important; +} + +.me-n9 { + margin-inline-end: -36px !important; +} + +.me-n10 { + margin-inline-end: -40px !important; +} + +.me-n11 { + margin-inline-end: -44px !important; +} + +.me-n12 { + margin-inline-end: -48px !important; +} + +.me-n13 { + margin-inline-end: -52px !important; +} + +.me-n14 { + margin-inline-end: -56px !important; +} + +.me-n15 { + margin-inline-end: -60px !important; +} + +.me-n16 { + margin-inline-end: -64px !important; +} + +.pa-0 { + padding: 0px !important; +} + +.pa-1 { + padding: 4px !important; +} + +.pa-2 { + padding: 8px !important; +} + +.pa-3 { + padding: 12px !important; +} + +.pa-4 { + padding: 16px !important; +} + +.pa-5 { + padding: 20px !important; +} + +.pa-6 { + padding: 24px !important; +} + +.pa-7 { + padding: 28px !important; +} + +.pa-8 { + padding: 32px !important; +} + +.pa-9 { + padding: 36px !important; +} + +.pa-10 { + padding: 40px !important; +} + +.pa-11 { + padding: 44px !important; +} + +.pa-12 { + padding: 48px !important; +} + +.pa-13 { + padding: 52px !important; +} + +.pa-14 { + padding: 56px !important; +} + +.pa-15 { + padding: 60px !important; +} + +.pa-16 { + padding: 64px !important; +} + +.px-0 { + padding-right: 0px !important; + padding-left: 0px !important; +} + +.px-1 { + padding-right: 4px !important; + padding-left: 4px !important; +} + +.px-2 { + padding-right: 8px !important; + padding-left: 8px !important; +} + +.px-3 { + padding-right: 12px !important; + padding-left: 12px !important; +} + +.px-4 { + padding-right: 16px !important; + padding-left: 16px !important; +} + +.px-5 { + padding-right: 20px !important; + padding-left: 20px !important; +} + +.px-6 { + padding-right: 24px !important; + padding-left: 24px !important; +} + +.px-7 { + padding-right: 28px !important; + padding-left: 28px !important; +} + +.px-8 { + padding-right: 32px !important; + padding-left: 32px !important; +} + +.px-9 { + padding-right: 36px !important; + padding-left: 36px !important; +} + +.px-10 { + padding-right: 40px !important; + padding-left: 40px !important; +} + +.px-11 { + padding-right: 44px !important; + padding-left: 44px !important; +} + +.px-12 { + padding-right: 48px !important; + padding-left: 48px !important; +} + +.px-13 { + padding-right: 52px !important; + padding-left: 52px !important; +} + +.px-14 { + padding-right: 56px !important; + padding-left: 56px !important; +} + +.px-15 { + padding-right: 60px !important; + padding-left: 60px !important; +} + +.px-16 { + padding-right: 64px !important; + padding-left: 64px !important; +} + +.py-0 { + padding-top: 0px !important; + padding-bottom: 0px !important; +} + +.py-1 { + padding-top: 4px !important; + padding-bottom: 4px !important; +} + +.py-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; +} + +.py-3 { + padding-top: 12px !important; + padding-bottom: 12px !important; +} + +.py-4 { + padding-top: 16px !important; + padding-bottom: 16px !important; +} + +.py-5 { + padding-top: 20px !important; + padding-bottom: 20px !important; +} + +.py-6 { + padding-top: 24px !important; + padding-bottom: 24px !important; +} + +.py-7 { + padding-top: 28px !important; + padding-bottom: 28px !important; +} + +.py-8 { + padding-top: 32px !important; + padding-bottom: 32px !important; +} + +.py-9 { + padding-top: 36px !important; + padding-bottom: 36px !important; +} + +.py-10 { + padding-top: 40px !important; + padding-bottom: 40px !important; +} + +.py-11 { + padding-top: 44px !important; + padding-bottom: 44px !important; +} + +.py-12 { + padding-top: 48px !important; + padding-bottom: 48px !important; +} + +.py-13 { + padding-top: 52px !important; + padding-bottom: 52px !important; +} + +.py-14 { + padding-top: 56px !important; + padding-bottom: 56px !important; +} + +.py-15 { + padding-top: 60px !important; + padding-bottom: 60px !important; +} + +.py-16 { + padding-top: 64px !important; + padding-bottom: 64px !important; +} + +.pt-0 { + padding-top: 0px !important; +} + +.pt-1 { + padding-top: 4px !important; +} + +.pt-2 { + padding-top: 8px !important; +} + +.pt-3 { + padding-top: 12px !important; +} + +.pt-4 { + padding-top: 16px !important; +} + +.pt-5 { + padding-top: 20px !important; +} + +.pt-6 { + padding-top: 24px !important; +} + +.pt-7 { + padding-top: 28px !important; +} + +.pt-8 { + padding-top: 32px !important; +} + +.pt-9 { + padding-top: 36px !important; +} + +.pt-10 { + padding-top: 40px !important; +} + +.pt-11 { + padding-top: 44px !important; +} + +.pt-12 { + padding-top: 48px !important; +} + +.pt-13 { + padding-top: 52px !important; +} + +.pt-14 { + padding-top: 56px !important; +} + +.pt-15 { + padding-top: 60px !important; +} + +.pt-16 { + padding-top: 64px !important; +} + +.pr-0 { + padding-right: 0px !important; +} + +.pr-1 { + padding-right: 4px !important; +} + +.pr-2 { + padding-right: 8px !important; +} + +.pr-3 { + padding-right: 12px !important; +} + +.pr-4 { + padding-right: 16px !important; +} + +.pr-5 { + padding-right: 20px !important; +} + +.pr-6 { + padding-right: 24px !important; +} + +.pr-7 { + padding-right: 28px !important; +} + +.pr-8 { + padding-right: 32px !important; +} + +.pr-9 { + padding-right: 36px !important; +} + +.pr-10 { + padding-right: 40px !important; +} + +.pr-11 { + padding-right: 44px !important; +} + +.pr-12 { + padding-right: 48px !important; +} + +.pr-13 { + padding-right: 52px !important; +} + +.pr-14 { + padding-right: 56px !important; +} + +.pr-15 { + padding-right: 60px !important; +} + +.pr-16 { + padding-right: 64px !important; +} + +.pb-0 { + padding-bottom: 0px !important; +} + +.pb-1 { + padding-bottom: 4px !important; +} + +.pb-2 { + padding-bottom: 8px !important; +} + +.pb-3 { + padding-bottom: 12px !important; +} + +.pb-4 { + padding-bottom: 16px !important; +} + +.pb-5 { + padding-bottom: 20px !important; +} + +.pb-6 { + padding-bottom: 24px !important; +} + +.pb-7 { + padding-bottom: 28px !important; +} + +.pb-8 { + padding-bottom: 32px !important; +} + +.pb-9 { + padding-bottom: 36px !important; +} + +.pb-10 { + padding-bottom: 40px !important; +} + +.pb-11 { + padding-bottom: 44px !important; +} + +.pb-12 { + padding-bottom: 48px !important; +} + +.pb-13 { + padding-bottom: 52px !important; +} + +.pb-14 { + padding-bottom: 56px !important; +} + +.pb-15 { + padding-bottom: 60px !important; +} + +.pb-16 { + padding-bottom: 64px !important; +} + +.pl-0 { + padding-left: 0px !important; +} + +.pl-1 { + padding-left: 4px !important; +} + +.pl-2 { + padding-left: 8px !important; +} + +.pl-3 { + padding-left: 12px !important; +} + +.pl-4 { + padding-left: 16px !important; +} + +.pl-5 { + padding-left: 20px !important; +} + +.pl-6 { + padding-left: 24px !important; +} + +.pl-7 { + padding-left: 28px !important; +} + +.pl-8 { + padding-left: 32px !important; +} + +.pl-9 { + padding-left: 36px !important; +} + +.pl-10 { + padding-left: 40px !important; +} + +.pl-11 { + padding-left: 44px !important; +} + +.pl-12 { + padding-left: 48px !important; +} + +.pl-13 { + padding-left: 52px !important; +} + +.pl-14 { + padding-left: 56px !important; +} + +.pl-15 { + padding-left: 60px !important; +} + +.pl-16 { + padding-left: 64px !important; +} + +.ps-0 { + padding-inline-start: 0px !important; +} + +.ps-1 { + padding-inline-start: 4px !important; +} + +.ps-2 { + padding-inline-start: 8px !important; +} + +.ps-3 { + padding-inline-start: 12px !important; +} + +.ps-4 { + padding-inline-start: 16px !important; +} + +.ps-5 { + padding-inline-start: 20px !important; +} + +.ps-6 { + padding-inline-start: 24px !important; +} + +.ps-7 { + padding-inline-start: 28px !important; +} + +.ps-8 { + padding-inline-start: 32px !important; +} + +.ps-9 { + padding-inline-start: 36px !important; +} + +.ps-10 { + padding-inline-start: 40px !important; +} + +.ps-11 { + padding-inline-start: 44px !important; +} + +.ps-12 { + padding-inline-start: 48px !important; +} + +.ps-13 { + padding-inline-start: 52px !important; +} + +.ps-14 { + padding-inline-start: 56px !important; +} + +.ps-15 { + padding-inline-start: 60px !important; +} + +.ps-16 { + padding-inline-start: 64px !important; +} + +.pe-0 { + padding-inline-end: 0px !important; +} + +.pe-1 { + padding-inline-end: 4px !important; +} + +.pe-2 { + padding-inline-end: 8px !important; +} + +.pe-3 { + padding-inline-end: 12px !important; +} + +.pe-4 { + padding-inline-end: 16px !important; +} + +.pe-5 { + padding-inline-end: 20px !important; +} + +.pe-6 { + padding-inline-end: 24px !important; +} + +.pe-7 { + padding-inline-end: 28px !important; +} + +.pe-8 { + padding-inline-end: 32px !important; +} + +.pe-9 { + padding-inline-end: 36px !important; +} + +.pe-10 { + padding-inline-end: 40px !important; +} + +.pe-11 { + padding-inline-end: 44px !important; +} + +.pe-12 { + padding-inline-end: 48px !important; +} + +.pe-13 { + padding-inline-end: 52px !important; +} + +.pe-14 { + padding-inline-end: 56px !important; +} + +.pe-15 { + padding-inline-end: 60px !important; +} + +.pe-16 { + padding-inline-end: 64px !important; +} + +.rounded-0 { + border-radius: 0 !important; +} + +.rounded-sm { + border-radius: 2px !important; +} + +.rounded { + border-radius: 4px !important; +} + +.rounded-lg { + border-radius: 8px !important; +} + +.rounded-xl { + border-radius: 24px !important; +} + +.rounded-pill { + border-radius: 9999px !important; +} + +.rounded-circle { + border-radius: 50% !important; +} + +.rounded-shaped { + border-radius: 24px 0 !important; +} + +.rounded-t-0 { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} + +.rounded-t-sm { + border-top-left-radius: 2px !important; + border-top-right-radius: 2px !important; +} + +.rounded-t { + border-top-left-radius: 4px !important; + border-top-right-radius: 4px !important; +} + +.rounded-t-lg { + border-top-left-radius: 8px !important; + border-top-right-radius: 8px !important; +} + +.rounded-t-xl { + border-top-left-radius: 24px !important; + border-top-right-radius: 24px !important; +} + +.rounded-t-pill { + border-top-left-radius: 9999px !important; + border-top-right-radius: 9999px !important; +} + +.rounded-t-circle { + border-top-left-radius: 50% !important; + border-top-right-radius: 50% !important; +} + +.rounded-t-shaped { + border-top-left-radius: 24px !important; + border-top-right-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-e-0 { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-e-0 { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-e-sm { + border-top-right-radius: 2px !important; + border-bottom-right-radius: 2px !important; +} + +.v-locale--is-rtl .rounded-e-sm { + border-top-left-radius: 2px !important; + border-bottom-left-radius: 2px !important; +} + +.v-locale--is-ltr .rounded-e { + border-top-right-radius: 4px !important; + border-bottom-right-radius: 4px !important; +} + +.v-locale--is-rtl .rounded-e { + border-top-left-radius: 4px !important; + border-bottom-left-radius: 4px !important; +} + +.v-locale--is-ltr .rounded-e-lg { + border-top-right-radius: 8px !important; + border-bottom-right-radius: 8px !important; +} + +.v-locale--is-rtl .rounded-e-lg { + border-top-left-radius: 8px !important; + border-bottom-left-radius: 8px !important; +} + +.v-locale--is-ltr .rounded-e-xl { + border-top-right-radius: 24px !important; + border-bottom-right-radius: 24px !important; +} + +.v-locale--is-rtl .rounded-e-xl { + border-top-left-radius: 24px !important; + border-bottom-left-radius: 24px !important; +} + +.v-locale--is-ltr .rounded-e-pill { + border-top-right-radius: 9999px !important; + border-bottom-right-radius: 9999px !important; +} + +.v-locale--is-rtl .rounded-e-pill { + border-top-left-radius: 9999px !important; + border-bottom-left-radius: 9999px !important; +} + +.v-locale--is-ltr .rounded-e-circle { + border-top-right-radius: 50% !important; + border-bottom-right-radius: 50% !important; +} + +.v-locale--is-rtl .rounded-e-circle { + border-top-left-radius: 50% !important; + border-bottom-left-radius: 50% !important; +} + +.v-locale--is-ltr .rounded-e-shaped { + border-top-right-radius: 24px !important; + border-bottom-right-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-e-shaped { + border-top-left-radius: 24px !important; + border-bottom-left-radius: 0 !important; +} + +.rounded-b-0 { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.rounded-b-sm { + border-bottom-left-radius: 2px !important; + border-bottom-right-radius: 2px !important; +} + +.rounded-b { + border-bottom-left-radius: 4px !important; + border-bottom-right-radius: 4px !important; +} + +.rounded-b-lg { + border-bottom-left-radius: 8px !important; + border-bottom-right-radius: 8px !important; +} + +.rounded-b-xl { + border-bottom-left-radius: 24px !important; + border-bottom-right-radius: 24px !important; +} + +.rounded-b-pill { + border-bottom-left-radius: 9999px !important; + border-bottom-right-radius: 9999px !important; +} + +.rounded-b-circle { + border-bottom-left-radius: 50% !important; + border-bottom-right-radius: 50% !important; +} + +.rounded-b-shaped { + border-bottom-left-radius: 24px !important; + border-bottom-right-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-s-0 { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-s-0 { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-s-sm { + border-top-left-radius: 2px !important; + border-bottom-left-radius: 2px !important; +} + +.v-locale--is-rtl .rounded-s-sm { + border-top-right-radius: 2px !important; + border-bottom-right-radius: 2px !important; +} + +.v-locale--is-ltr .rounded-s { + border-top-left-radius: 4px !important; + border-bottom-left-radius: 4px !important; +} + +.v-locale--is-rtl .rounded-s { + border-top-right-radius: 4px !important; + border-bottom-right-radius: 4px !important; +} + +.v-locale--is-ltr .rounded-s-lg { + border-top-left-radius: 8px !important; + border-bottom-left-radius: 8px !important; +} + +.v-locale--is-rtl .rounded-s-lg { + border-top-right-radius: 8px !important; + border-bottom-right-radius: 8px !important; +} + +.v-locale--is-ltr .rounded-s-xl { + border-top-left-radius: 24px !important; + border-bottom-left-radius: 24px !important; +} + +.v-locale--is-rtl .rounded-s-xl { + border-top-right-radius: 24px !important; + border-bottom-right-radius: 24px !important; +} + +.v-locale--is-ltr .rounded-s-pill { + border-top-left-radius: 9999px !important; + border-bottom-left-radius: 9999px !important; +} + +.v-locale--is-rtl .rounded-s-pill { + border-top-right-radius: 9999px !important; + border-bottom-right-radius: 9999px !important; +} + +.v-locale--is-ltr .rounded-s-circle { + border-top-left-radius: 50% !important; + border-bottom-left-radius: 50% !important; +} + +.v-locale--is-rtl .rounded-s-circle { + border-top-right-radius: 50% !important; + border-bottom-right-radius: 50% !important; +} + +.v-locale--is-ltr .rounded-s-shaped { + border-top-left-radius: 24px !important; + border-bottom-left-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-s-shaped { + border-top-right-radius: 24px !important; + border-bottom-right-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-ts-0 { + border-top-left-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-ts-0 { + border-top-right-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-ts-sm { + border-top-left-radius: 2px !important; +} + +.v-locale--is-rtl .rounded-ts-sm { + border-top-right-radius: 2px !important; +} + +.v-locale--is-ltr .rounded-ts { + border-top-left-radius: 4px !important; +} + +.v-locale--is-rtl .rounded-ts { + border-top-right-radius: 4px !important; +} + +.v-locale--is-ltr .rounded-ts-lg { + border-top-left-radius: 8px !important; +} + +.v-locale--is-rtl .rounded-ts-lg { + border-top-right-radius: 8px !important; +} + +.v-locale--is-ltr .rounded-ts-xl { + border-top-left-radius: 24px !important; +} + +.v-locale--is-rtl .rounded-ts-xl { + border-top-right-radius: 24px !important; +} + +.v-locale--is-ltr .rounded-ts-pill { + border-top-left-radius: 9999px !important; +} + +.v-locale--is-rtl .rounded-ts-pill { + border-top-right-radius: 9999px !important; +} + +.v-locale--is-ltr .rounded-ts-circle { + border-top-left-radius: 50% !important; +} + +.v-locale--is-rtl .rounded-ts-circle { + border-top-right-radius: 50% !important; +} + +.v-locale--is-ltr .rounded-ts-shaped { + border-top-left-radius: 24px 0 !important; +} + +.v-locale--is-rtl .rounded-ts-shaped { + border-top-right-radius: 24px 0 !important; +} + +.v-locale--is-ltr .rounded-te-0 { + border-top-right-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-te-0 { + border-top-left-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-te-sm { + border-top-right-radius: 2px !important; +} + +.v-locale--is-rtl .rounded-te-sm { + border-top-left-radius: 2px !important; +} + +.v-locale--is-ltr .rounded-te { + border-top-right-radius: 4px !important; +} + +.v-locale--is-rtl .rounded-te { + border-top-left-radius: 4px !important; +} + +.v-locale--is-ltr .rounded-te-lg { + border-top-right-radius: 8px !important; +} + +.v-locale--is-rtl .rounded-te-lg { + border-top-left-radius: 8px !important; +} + +.v-locale--is-ltr .rounded-te-xl { + border-top-right-radius: 24px !important; +} + +.v-locale--is-rtl .rounded-te-xl { + border-top-left-radius: 24px !important; +} + +.v-locale--is-ltr .rounded-te-pill { + border-top-right-radius: 9999px !important; +} + +.v-locale--is-rtl .rounded-te-pill { + border-top-left-radius: 9999px !important; +} + +.v-locale--is-ltr .rounded-te-circle { + border-top-right-radius: 50% !important; +} + +.v-locale--is-rtl .rounded-te-circle { + border-top-left-radius: 50% !important; +} + +.v-locale--is-ltr .rounded-te-shaped { + border-top-right-radius: 24px 0 !important; +} + +.v-locale--is-rtl .rounded-te-shaped { + border-top-left-radius: 24px 0 !important; +} + +.v-locale--is-ltr .rounded-be-0 { + border-bottom-right-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-be-0 { + border-bottom-left-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-be-sm { + border-bottom-right-radius: 2px !important; +} + +.v-locale--is-rtl .rounded-be-sm { + border-bottom-left-radius: 2px !important; +} + +.v-locale--is-ltr .rounded-be { + border-bottom-right-radius: 4px !important; +} + +.v-locale--is-rtl .rounded-be { + border-bottom-left-radius: 4px !important; +} + +.v-locale--is-ltr .rounded-be-lg { + border-bottom-right-radius: 8px !important; +} + +.v-locale--is-rtl .rounded-be-lg { + border-bottom-left-radius: 8px !important; +} + +.v-locale--is-ltr .rounded-be-xl { + border-bottom-right-radius: 24px !important; +} + +.v-locale--is-rtl .rounded-be-xl { + border-bottom-left-radius: 24px !important; +} + +.v-locale--is-ltr .rounded-be-pill { + border-bottom-right-radius: 9999px !important; +} + +.v-locale--is-rtl .rounded-be-pill { + border-bottom-left-radius: 9999px !important; +} + +.v-locale--is-ltr .rounded-be-circle { + border-bottom-right-radius: 50% !important; +} + +.v-locale--is-rtl .rounded-be-circle { + border-bottom-left-radius: 50% !important; +} + +.v-locale--is-ltr .rounded-be-shaped { + border-bottom-right-radius: 24px 0 !important; +} + +.v-locale--is-rtl .rounded-be-shaped { + border-bottom-left-radius: 24px 0 !important; +} + +.v-locale--is-ltr .rounded-bs-0 { + border-bottom-left-radius: 0 !important; +} + +.v-locale--is-rtl .rounded-bs-0 { + border-bottom-right-radius: 0 !important; +} + +.v-locale--is-ltr .rounded-bs-sm { + border-bottom-left-radius: 2px !important; +} + +.v-locale--is-rtl .rounded-bs-sm { + border-bottom-right-radius: 2px !important; +} + +.v-locale--is-ltr .rounded-bs { + border-bottom-left-radius: 4px !important; +} + +.v-locale--is-rtl .rounded-bs { + border-bottom-right-radius: 4px !important; +} + +.v-locale--is-ltr .rounded-bs-lg { + border-bottom-left-radius: 8px !important; +} + +.v-locale--is-rtl .rounded-bs-lg { + border-bottom-right-radius: 8px !important; +} + +.v-locale--is-ltr .rounded-bs-xl { + border-bottom-left-radius: 24px !important; +} + +.v-locale--is-rtl .rounded-bs-xl { + border-bottom-right-radius: 24px !important; +} + +.v-locale--is-ltr .rounded-bs-pill { + border-bottom-left-radius: 9999px !important; +} + +.v-locale--is-rtl .rounded-bs-pill { + border-bottom-right-radius: 9999px !important; +} + +.v-locale--is-ltr .rounded-bs-circle { + border-bottom-left-radius: 50% !important; +} + +.v-locale--is-rtl .rounded-bs-circle { + border-bottom-right-radius: 50% !important; +} + +.v-locale--is-ltr .rounded-bs-shaped { + border-bottom-left-radius: 24px 0 !important; +} + +.v-locale--is-rtl .rounded-bs-shaped { + border-bottom-right-radius: 24px 0 !important; +} + +.border-0 { + border-width: 0 !important; + border-style: solid !important; + border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border { + border-width: thin !important; + border-style: solid !important; + border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-thin { + border-width: thin !important; + border-style: solid !important; + border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-sm { + border-width: 1px !important; + border-style: solid !important; + border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-md { + border-width: 2px !important; + border-style: solid !important; + border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-lg { + border-width: 4px !important; + border-style: solid !important; + border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-xl { + border-width: 8px !important; + border-style: solid !important; + border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-opacity-0 { + --v-border-opacity: 0 !important; +} + +.border-opacity { + --v-border-opacity: 0.12 !important; +} + +.border-opacity-25 { + --v-border-opacity: 0.25 !important; +} + +.border-opacity-50 { + --v-border-opacity: 0.5 !important; +} + +.border-opacity-75 { + --v-border-opacity: 0.75 !important; +} + +.border-opacity-100 { + --v-border-opacity: 1 !important; +} + +.border-t-0 { + border-block-start-width: 0 !important; + border-block-start-style: solid !important; + border-block-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-t { + border-block-start-width: thin !important; + border-block-start-style: solid !important; + border-block-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-t-thin { + border-block-start-width: thin !important; + border-block-start-style: solid !important; + border-block-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-t-sm { + border-block-start-width: 1px !important; + border-block-start-style: solid !important; + border-block-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-t-md { + border-block-start-width: 2px !important; + border-block-start-style: solid !important; + border-block-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-t-lg { + border-block-start-width: 4px !important; + border-block-start-style: solid !important; + border-block-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-t-xl { + border-block-start-width: 8px !important; + border-block-start-style: solid !important; + border-block-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-e-0 { + border-inline-end-width: 0 !important; + border-inline-end-style: solid !important; + border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-e { + border-inline-end-width: thin !important; + border-inline-end-style: solid !important; + border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-e-thin { + border-inline-end-width: thin !important; + border-inline-end-style: solid !important; + border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-e-sm { + border-inline-end-width: 1px !important; + border-inline-end-style: solid !important; + border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-e-md { + border-inline-end-width: 2px !important; + border-inline-end-style: solid !important; + border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-e-lg { + border-inline-end-width: 4px !important; + border-inline-end-style: solid !important; + border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-e-xl { + border-inline-end-width: 8px !important; + border-inline-end-style: solid !important; + border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-b-0 { + border-block-end-width: 0 !important; + border-block-end-style: solid !important; + border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-b { + border-block-end-width: thin !important; + border-block-end-style: solid !important; + border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-b-thin { + border-block-end-width: thin !important; + border-block-end-style: solid !important; + border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-b-sm { + border-block-end-width: 1px !important; + border-block-end-style: solid !important; + border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-b-md { + border-block-end-width: 2px !important; + border-block-end-style: solid !important; + border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-b-lg { + border-block-end-width: 4px !important; + border-block-end-style: solid !important; + border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-b-xl { + border-block-end-width: 8px !important; + border-block-end-style: solid !important; + border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-s-0 { + border-inline-start-width: 0 !important; + border-inline-start-style: solid !important; + border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-s { + border-inline-start-width: thin !important; + border-inline-start-style: solid !important; + border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-s-thin { + border-inline-start-width: thin !important; + border-inline-start-style: solid !important; + border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-s-sm { + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-s-md { + border-inline-start-width: 2px !important; + border-inline-start-style: solid !important; + border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-s-lg { + border-inline-start-width: 4px !important; + border-inline-start-style: solid !important; + border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-s-xl { + border-inline-start-width: 8px !important; + border-inline-start-style: solid !important; + border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important; +} + +.border-solid { + border-style: solid !important; +} + +.border-dashed { + border-style: dashed !important; +} + +.border-dotted { + border-style: dotted !important; +} + +.border-double { + border-style: double !important; +} + +.border-none { + border-style: none !important; +} + +.text-left { + text-align: left !important; +} + +.text-right { + text-align: right !important; +} + +.text-center { + text-align: center !important; +} + +.text-justify { + text-align: justify !important; +} + +.text-start { + text-align: start !important; +} + +.text-end { + text-align: end !important; +} + +.text-decoration-line-through { + text-decoration: line-through !important; +} + +.text-decoration-none { + text-decoration: none !important; +} + +.text-decoration-overline { + text-decoration: overline !important; +} + +.text-decoration-underline { + text-decoration: underline !important; +} + +.text-wrap { + white-space: normal !important; +} + +.text-no-wrap { + white-space: nowrap !important; +} + +.text-pre { + white-space: pre !important; +} + +.text-pre-line { + white-space: pre-line !important; +} + +.text-pre-wrap { + white-space: pre-wrap !important; +} + +.text-break { + overflow-wrap: break-word !important; + word-break: break-word !important; +} + +.opacity-hover { + opacity: var(--v-hover-opacity) !important; +} + +.opacity-focus { + opacity: var(--v-focus-opacity) !important; +} + +.opacity-selected { + opacity: var(--v-selected-opacity) !important; +} + +.opacity-activated { + opacity: var(--v-activated-opacity) !important; +} + +.opacity-pressed { + opacity: var(--v-pressed-opacity) !important; +} + +.opacity-dragged { + opacity: var(--v-dragged-opacity) !important; +} + +.opacity-0 { + opacity: 0 !important; +} + +.opacity-10 { + opacity: 0.1 !important; +} + +.opacity-20 { + opacity: 0.2 !important; +} + +.opacity-30 { + opacity: 0.3 !important; +} + +.opacity-40 { + opacity: 0.4 !important; +} + +.opacity-50 { + opacity: 0.5 !important; +} + +.opacity-60 { + opacity: 0.6 !important; +} + +.opacity-70 { + opacity: 0.7 !important; +} + +.opacity-80 { + opacity: 0.8 !important; +} + +.opacity-90 { + opacity: 0.9 !important; +} + +.opacity-100 { + opacity: 1 !important; +} + +.text-high-emphasis { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important; +} + +.text-medium-emphasis { + color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important; +} + +.text-disabled { + color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)) !important; +} + +.text-truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +.text-h1 { + font-size: 6rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.015625em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-h2 { + font-size: 3.75rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.0083333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-h3 { + font-size: 3rem !important; + font-weight: 400; + line-height: 1.05; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-h4 { + font-size: 2.125rem !important; + font-weight: 400; + line-height: 1.175; + letter-spacing: 0.0073529412em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-h5 { + font-size: 1.5rem !important; + font-weight: 400; + line-height: 1.333; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-h6 { + font-size: 1.25rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-subtitle-1 { + font-size: 1rem !important; + font-weight: normal; + line-height: 1.75; + letter-spacing: 0.009375em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-subtitle-2 { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0071428571em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-body-1 { + font-size: 1rem !important; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.03125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-body-2 { + font-size: 0.875rem !important; + font-weight: 400; + line-height: 1.425; + letter-spacing: 0.0178571429em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-button { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 2.6; + letter-spacing: 0.0892857143em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; +} + +.text-caption { + font-size: 0.75rem !important; + font-weight: 400; + line-height: 1.667; + letter-spacing: 0.0333333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; +} + +.text-overline { + font-size: 0.75rem !important; + font-weight: 500; + line-height: 2.667; + letter-spacing: 0.1666666667em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; +} + +.text-none { + text-transform: none !important; +} + +.text-capitalize { + text-transform: capitalize !important; +} + +.text-lowercase { + text-transform: lowercase !important; +} + +.text-uppercase { + text-transform: uppercase !important; +} + +.font-weight-thin { + font-weight: 100 !important; +} + +.font-weight-light { + font-weight: 300 !important; +} + +.font-weight-regular { + font-weight: 400 !important; +} + +.font-weight-medium { + font-weight: 500 !important; +} + +.font-weight-bold { + font-weight: 700 !important; +} + +.font-weight-black { + font-weight: 900 !important; +} + +.font-italic { + font-style: italic !important; +} + +.text-mono { + font-family: monospace !important; +} + +.position-static { + position: static !important; +} + +.position-relative { + position: relative !important; +} + +.position-fixed { + position: fixed !important; +} + +.position-absolute { + position: absolute !important; +} + +.position-sticky { + position: sticky !important; +} + +.top-0 { + top: 0 !important; +} + +.right-0 { + right: 0 !important; +} + +.bottom-0 { + bottom: 0 !important; +} + +.left-0 { + left: 0 !important; +} + +.cursor-auto { + cursor: auto !important; +} + +.cursor-default { + cursor: default !important; +} + +.cursor-pointer { + cursor: pointer !important; +} + +.cursor-wait { + cursor: wait !important; +} + +.cursor-text { + cursor: text !important; +} + +.cursor-move { + cursor: move !important; +} + +.cursor-help { + cursor: help !important; +} + +.cursor-not-allowed { + cursor: not-allowed !important; +} + +.cursor-progress { + cursor: progress !important; +} + +.cursor-grab { + cursor: grab !important; +} + +.cursor-grabbing { + cursor: grabbing !important; +} + +.cursor-none { + cursor: none !important; +} + +.fill-height { + height: 100% !important; +} + +.h-auto { + height: auto !important; +} + +.h-screen { + height: 100vh !important; +} + +.h-0 { + height: 0 !important; +} + +.h-25 { + height: 25% !important; +} + +.h-50 { + height: 50% !important; +} + +.h-75 { + height: 75% !important; +} + +.h-100 { + height: 100% !important; +} + +.h-screen { + height: 100dvh !important; +} + +.w-auto { + width: auto !important; +} + +.w-0 { + width: 0 !important; +} + +.w-25 { + width: 25% !important; +} + +.w-33 { + width: 33% !important; +} + +.w-50 { + width: 50% !important; +} + +.w-66 { + width: 66% !important; +} + +.w-75 { + width: 75% !important; +} + +.w-100 { + width: 100% !important; +} + +@media (min-width: 600px) { + .d-sm-none { + display: none !important; + } + .d-sm-inline { + display: inline !important; + } + .d-sm-inline-block { + display: inline-block !important; + } + .d-sm-block { + display: block !important; + } + .d-sm-table { + display: table !important; + } + .d-sm-table-row { + display: table-row !important; + } + .d-sm-table-cell { + display: table-cell !important; + } + .d-sm-flex { + display: flex !important; + } + .d-sm-inline-flex { + display: inline-flex !important; + } + .float-sm-none { + float: none !important; + } + .float-sm-left { + float: left !important; + } + .float-sm-right { + float: right !important; + } + .v-locale--is-rtl .float-sm-end { + float: left !important; + } + .v-locale--is-rtl .float-sm-start { + float: right !important; + } + .v-locale--is-ltr .float-sm-end { + float: right !important; + } + .v-locale--is-ltr .float-sm-start { + float: left !important; + } + .flex-sm-fill { + flex: 1 1 auto !important; + } + .flex-sm-1-1 { + flex: 1 1 auto !important; + } + .flex-sm-1-0 { + flex: 1 0 auto !important; + } + .flex-sm-0-1 { + flex: 0 1 auto !important; + } + .flex-sm-0-0 { + flex: 0 0 auto !important; + } + .flex-sm-1-1-100 { + flex: 1 1 100% !important; + } + .flex-sm-1-0-100 { + flex: 1 0 100% !important; + } + .flex-sm-0-1-100 { + flex: 0 1 100% !important; + } + .flex-sm-0-0-100 { + flex: 0 0 100% !important; + } + .flex-sm-1-1-0 { + flex: 1 1 0 !important; + } + .flex-sm-1-0-0 { + flex: 1 0 0 !important; + } + .flex-sm-0-1-0 { + flex: 0 1 0 !important; + } + .flex-sm-0-0-0 { + flex: 0 0 0 !important; + } + .flex-sm-row { + flex-direction: row !important; + } + .flex-sm-column { + flex-direction: column !important; + } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; + } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; + } + .flex-sm-grow-0 { + flex-grow: 0 !important; + } + .flex-sm-grow-1 { + flex-grow: 1 !important; + } + .flex-sm-shrink-0 { + flex-shrink: 0 !important; + } + .flex-sm-shrink-1 { + flex-shrink: 1 !important; + } + .flex-sm-wrap { + flex-wrap: wrap !important; + } + .flex-sm-nowrap { + flex-wrap: nowrap !important; + } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-sm-start { + justify-content: flex-start !important; + } + .justify-sm-end { + justify-content: flex-end !important; + } + .justify-sm-center { + justify-content: center !important; + } + .justify-sm-space-between { + justify-content: space-between !important; + } + .justify-sm-space-around { + justify-content: space-around !important; + } + .justify-sm-space-evenly { + justify-content: space-evenly !important; + } + .align-sm-start { + align-items: flex-start !important; + } + .align-sm-end { + align-items: flex-end !important; + } + .align-sm-center { + align-items: center !important; + } + .align-sm-baseline { + align-items: baseline !important; + } + .align-sm-stretch { + align-items: stretch !important; + } + .align-content-sm-start { + align-content: flex-start !important; + } + .align-content-sm-end { + align-content: flex-end !important; + } + .align-content-sm-center { + align-content: center !important; + } + .align-content-sm-space-between { + align-content: space-between !important; + } + .align-content-sm-space-around { + align-content: space-around !important; + } + .align-content-sm-space-evenly { + align-content: space-evenly !important; + } + .align-content-sm-stretch { + align-content: stretch !important; + } + .align-self-sm-auto { + align-self: auto !important; + } + .align-self-sm-start { + align-self: flex-start !important; + } + .align-self-sm-end { + align-self: flex-end !important; + } + .align-self-sm-center { + align-self: center !important; + } + .align-self-sm-baseline { + align-self: baseline !important; + } + .align-self-sm-stretch { + align-self: stretch !important; + } + .order-sm-first { + order: -1 !important; + } + .order-sm-0 { + order: 0 !important; + } + .order-sm-1 { + order: 1 !important; + } + .order-sm-2 { + order: 2 !important; + } + .order-sm-3 { + order: 3 !important; + } + .order-sm-4 { + order: 4 !important; + } + .order-sm-5 { + order: 5 !important; + } + .order-sm-6 { + order: 6 !important; + } + .order-sm-7 { + order: 7 !important; + } + .order-sm-8 { + order: 8 !important; + } + .order-sm-9 { + order: 9 !important; + } + .order-sm-10 { + order: 10 !important; + } + .order-sm-11 { + order: 11 !important; + } + .order-sm-12 { + order: 12 !important; + } + .order-sm-last { + order: 13 !important; + } + .ga-sm-0 { + gap: 0px !important; + } + .ga-sm-1 { + gap: 4px !important; + } + .ga-sm-2 { + gap: 8px !important; + } + .ga-sm-3 { + gap: 12px !important; + } + .ga-sm-4 { + gap: 16px !important; + } + .ga-sm-5 { + gap: 20px !important; + } + .ga-sm-6 { + gap: 24px !important; + } + .ga-sm-7 { + gap: 28px !important; + } + .ga-sm-8 { + gap: 32px !important; + } + .ga-sm-9 { + gap: 36px !important; + } + .ga-sm-10 { + gap: 40px !important; + } + .ga-sm-11 { + gap: 44px !important; + } + .ga-sm-12 { + gap: 48px !important; + } + .ga-sm-13 { + gap: 52px !important; + } + .ga-sm-14 { + gap: 56px !important; + } + .ga-sm-15 { + gap: 60px !important; + } + .ga-sm-16 { + gap: 64px !important; + } + .ga-sm-auto { + gap: auto !important; + } + .gr-sm-0 { + row-gap: 0px !important; + } + .gr-sm-1 { + row-gap: 4px !important; + } + .gr-sm-2 { + row-gap: 8px !important; + } + .gr-sm-3 { + row-gap: 12px !important; + } + .gr-sm-4 { + row-gap: 16px !important; + } + .gr-sm-5 { + row-gap: 20px !important; + } + .gr-sm-6 { + row-gap: 24px !important; + } + .gr-sm-7 { + row-gap: 28px !important; + } + .gr-sm-8 { + row-gap: 32px !important; + } + .gr-sm-9 { + row-gap: 36px !important; + } + .gr-sm-10 { + row-gap: 40px !important; + } + .gr-sm-11 { + row-gap: 44px !important; + } + .gr-sm-12 { + row-gap: 48px !important; + } + .gr-sm-13 { + row-gap: 52px !important; + } + .gr-sm-14 { + row-gap: 56px !important; + } + .gr-sm-15 { + row-gap: 60px !important; + } + .gr-sm-16 { + row-gap: 64px !important; + } + .gr-sm-auto { + row-gap: auto !important; + } + .gc-sm-0 { + column-gap: 0px !important; + } + .gc-sm-1 { + column-gap: 4px !important; + } + .gc-sm-2 { + column-gap: 8px !important; + } + .gc-sm-3 { + column-gap: 12px !important; + } + .gc-sm-4 { + column-gap: 16px !important; + } + .gc-sm-5 { + column-gap: 20px !important; + } + .gc-sm-6 { + column-gap: 24px !important; + } + .gc-sm-7 { + column-gap: 28px !important; + } + .gc-sm-8 { + column-gap: 32px !important; + } + .gc-sm-9 { + column-gap: 36px !important; + } + .gc-sm-10 { + column-gap: 40px !important; + } + .gc-sm-11 { + column-gap: 44px !important; + } + .gc-sm-12 { + column-gap: 48px !important; + } + .gc-sm-13 { + column-gap: 52px !important; + } + .gc-sm-14 { + column-gap: 56px !important; + } + .gc-sm-15 { + column-gap: 60px !important; + } + .gc-sm-16 { + column-gap: 64px !important; + } + .gc-sm-auto { + column-gap: auto !important; + } + .ma-sm-0 { + margin: 0px !important; + } + .ma-sm-1 { + margin: 4px !important; + } + .ma-sm-2 { + margin: 8px !important; + } + .ma-sm-3 { + margin: 12px !important; + } + .ma-sm-4 { + margin: 16px !important; + } + .ma-sm-5 { + margin: 20px !important; + } + .ma-sm-6 { + margin: 24px !important; + } + .ma-sm-7 { + margin: 28px !important; + } + .ma-sm-8 { + margin: 32px !important; + } + .ma-sm-9 { + margin: 36px !important; + } + .ma-sm-10 { + margin: 40px !important; + } + .ma-sm-11 { + margin: 44px !important; + } + .ma-sm-12 { + margin: 48px !important; + } + .ma-sm-13 { + margin: 52px !important; + } + .ma-sm-14 { + margin: 56px !important; + } + .ma-sm-15 { + margin: 60px !important; + } + .ma-sm-16 { + margin: 64px !important; + } + .ma-sm-auto { + margin: auto !important; + } + .mx-sm-0 { + margin-right: 0px !important; + margin-left: 0px !important; + } + .mx-sm-1 { + margin-right: 4px !important; + margin-left: 4px !important; + } + .mx-sm-2 { + margin-right: 8px !important; + margin-left: 8px !important; + } + .mx-sm-3 { + margin-right: 12px !important; + margin-left: 12px !important; + } + .mx-sm-4 { + margin-right: 16px !important; + margin-left: 16px !important; + } + .mx-sm-5 { + margin-right: 20px !important; + margin-left: 20px !important; + } + .mx-sm-6 { + margin-right: 24px !important; + margin-left: 24px !important; + } + .mx-sm-7 { + margin-right: 28px !important; + margin-left: 28px !important; + } + .mx-sm-8 { + margin-right: 32px !important; + margin-left: 32px !important; + } + .mx-sm-9 { + margin-right: 36px !important; + margin-left: 36px !important; + } + .mx-sm-10 { + margin-right: 40px !important; + margin-left: 40px !important; + } + .mx-sm-11 { + margin-right: 44px !important; + margin-left: 44px !important; + } + .mx-sm-12 { + margin-right: 48px !important; + margin-left: 48px !important; + } + .mx-sm-13 { + margin-right: 52px !important; + margin-left: 52px !important; + } + .mx-sm-14 { + margin-right: 56px !important; + margin-left: 56px !important; + } + .mx-sm-15 { + margin-right: 60px !important; + margin-left: 60px !important; + } + .mx-sm-16 { + margin-right: 64px !important; + margin-left: 64px !important; + } + .mx-sm-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-sm-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + .my-sm-1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .my-sm-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .my-sm-3 { + margin-top: 12px !important; + margin-bottom: 12px !important; + } + .my-sm-4 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .my-sm-5 { + margin-top: 20px !important; + margin-bottom: 20px !important; + } + .my-sm-6 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .my-sm-7 { + margin-top: 28px !important; + margin-bottom: 28px !important; + } + .my-sm-8 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .my-sm-9 { + margin-top: 36px !important; + margin-bottom: 36px !important; + } + .my-sm-10 { + margin-top: 40px !important; + margin-bottom: 40px !important; + } + .my-sm-11 { + margin-top: 44px !important; + margin-bottom: 44px !important; + } + .my-sm-12 { + margin-top: 48px !important; + margin-bottom: 48px !important; + } + .my-sm-13 { + margin-top: 52px !important; + margin-bottom: 52px !important; + } + .my-sm-14 { + margin-top: 56px !important; + margin-bottom: 56px !important; + } + .my-sm-15 { + margin-top: 60px !important; + margin-bottom: 60px !important; + } + .my-sm-16 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .my-sm-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-sm-0 { + margin-top: 0px !important; + } + .mt-sm-1 { + margin-top: 4px !important; + } + .mt-sm-2 { + margin-top: 8px !important; + } + .mt-sm-3 { + margin-top: 12px !important; + } + .mt-sm-4 { + margin-top: 16px !important; + } + .mt-sm-5 { + margin-top: 20px !important; + } + .mt-sm-6 { + margin-top: 24px !important; + } + .mt-sm-7 { + margin-top: 28px !important; + } + .mt-sm-8 { + margin-top: 32px !important; + } + .mt-sm-9 { + margin-top: 36px !important; + } + .mt-sm-10 { + margin-top: 40px !important; + } + .mt-sm-11 { + margin-top: 44px !important; + } + .mt-sm-12 { + margin-top: 48px !important; + } + .mt-sm-13 { + margin-top: 52px !important; + } + .mt-sm-14 { + margin-top: 56px !important; + } + .mt-sm-15 { + margin-top: 60px !important; + } + .mt-sm-16 { + margin-top: 64px !important; + } + .mt-sm-auto { + margin-top: auto !important; + } + .mr-sm-0 { + margin-right: 0px !important; + } + .mr-sm-1 { + margin-right: 4px !important; + } + .mr-sm-2 { + margin-right: 8px !important; + } + .mr-sm-3 { + margin-right: 12px !important; + } + .mr-sm-4 { + margin-right: 16px !important; + } + .mr-sm-5 { + margin-right: 20px !important; + } + .mr-sm-6 { + margin-right: 24px !important; + } + .mr-sm-7 { + margin-right: 28px !important; + } + .mr-sm-8 { + margin-right: 32px !important; + } + .mr-sm-9 { + margin-right: 36px !important; + } + .mr-sm-10 { + margin-right: 40px !important; + } + .mr-sm-11 { + margin-right: 44px !important; + } + .mr-sm-12 { + margin-right: 48px !important; + } + .mr-sm-13 { + margin-right: 52px !important; + } + .mr-sm-14 { + margin-right: 56px !important; + } + .mr-sm-15 { + margin-right: 60px !important; + } + .mr-sm-16 { + margin-right: 64px !important; + } + .mr-sm-auto { + margin-right: auto !important; + } + .mb-sm-0 { + margin-bottom: 0px !important; + } + .mb-sm-1 { + margin-bottom: 4px !important; + } + .mb-sm-2 { + margin-bottom: 8px !important; + } + .mb-sm-3 { + margin-bottom: 12px !important; + } + .mb-sm-4 { + margin-bottom: 16px !important; + } + .mb-sm-5 { + margin-bottom: 20px !important; + } + .mb-sm-6 { + margin-bottom: 24px !important; + } + .mb-sm-7 { + margin-bottom: 28px !important; + } + .mb-sm-8 { + margin-bottom: 32px !important; + } + .mb-sm-9 { + margin-bottom: 36px !important; + } + .mb-sm-10 { + margin-bottom: 40px !important; + } + .mb-sm-11 { + margin-bottom: 44px !important; + } + .mb-sm-12 { + margin-bottom: 48px !important; + } + .mb-sm-13 { + margin-bottom: 52px !important; + } + .mb-sm-14 { + margin-bottom: 56px !important; + } + .mb-sm-15 { + margin-bottom: 60px !important; + } + .mb-sm-16 { + margin-bottom: 64px !important; + } + .mb-sm-auto { + margin-bottom: auto !important; + } + .ml-sm-0 { + margin-left: 0px !important; + } + .ml-sm-1 { + margin-left: 4px !important; + } + .ml-sm-2 { + margin-left: 8px !important; + } + .ml-sm-3 { + margin-left: 12px !important; + } + .ml-sm-4 { + margin-left: 16px !important; + } + .ml-sm-5 { + margin-left: 20px !important; + } + .ml-sm-6 { + margin-left: 24px !important; + } + .ml-sm-7 { + margin-left: 28px !important; + } + .ml-sm-8 { + margin-left: 32px !important; + } + .ml-sm-9 { + margin-left: 36px !important; + } + .ml-sm-10 { + margin-left: 40px !important; + } + .ml-sm-11 { + margin-left: 44px !important; + } + .ml-sm-12 { + margin-left: 48px !important; + } + .ml-sm-13 { + margin-left: 52px !important; + } + .ml-sm-14 { + margin-left: 56px !important; + } + .ml-sm-15 { + margin-left: 60px !important; + } + .ml-sm-16 { + margin-left: 64px !important; + } + .ml-sm-auto { + margin-left: auto !important; + } + .ms-sm-0 { + margin-inline-start: 0px !important; + } + .ms-sm-1 { + margin-inline-start: 4px !important; + } + .ms-sm-2 { + margin-inline-start: 8px !important; + } + .ms-sm-3 { + margin-inline-start: 12px !important; + } + .ms-sm-4 { + margin-inline-start: 16px !important; + } + .ms-sm-5 { + margin-inline-start: 20px !important; + } + .ms-sm-6 { + margin-inline-start: 24px !important; + } + .ms-sm-7 { + margin-inline-start: 28px !important; + } + .ms-sm-8 { + margin-inline-start: 32px !important; + } + .ms-sm-9 { + margin-inline-start: 36px !important; + } + .ms-sm-10 { + margin-inline-start: 40px !important; + } + .ms-sm-11 { + margin-inline-start: 44px !important; + } + .ms-sm-12 { + margin-inline-start: 48px !important; + } + .ms-sm-13 { + margin-inline-start: 52px !important; + } + .ms-sm-14 { + margin-inline-start: 56px !important; + } + .ms-sm-15 { + margin-inline-start: 60px !important; + } + .ms-sm-16 { + margin-inline-start: 64px !important; + } + .ms-sm-auto { + margin-inline-start: auto !important; + } + .me-sm-0 { + margin-inline-end: 0px !important; + } + .me-sm-1 { + margin-inline-end: 4px !important; + } + .me-sm-2 { + margin-inline-end: 8px !important; + } + .me-sm-3 { + margin-inline-end: 12px !important; + } + .me-sm-4 { + margin-inline-end: 16px !important; + } + .me-sm-5 { + margin-inline-end: 20px !important; + } + .me-sm-6 { + margin-inline-end: 24px !important; + } + .me-sm-7 { + margin-inline-end: 28px !important; + } + .me-sm-8 { + margin-inline-end: 32px !important; + } + .me-sm-9 { + margin-inline-end: 36px !important; + } + .me-sm-10 { + margin-inline-end: 40px !important; + } + .me-sm-11 { + margin-inline-end: 44px !important; + } + .me-sm-12 { + margin-inline-end: 48px !important; + } + .me-sm-13 { + margin-inline-end: 52px !important; + } + .me-sm-14 { + margin-inline-end: 56px !important; + } + .me-sm-15 { + margin-inline-end: 60px !important; + } + .me-sm-16 { + margin-inline-end: 64px !important; + } + .me-sm-auto { + margin-inline-end: auto !important; + } + .ma-sm-n1 { + margin: -4px !important; + } + .ma-sm-n2 { + margin: -8px !important; + } + .ma-sm-n3 { + margin: -12px !important; + } + .ma-sm-n4 { + margin: -16px !important; + } + .ma-sm-n5 { + margin: -20px !important; + } + .ma-sm-n6 { + margin: -24px !important; + } + .ma-sm-n7 { + margin: -28px !important; + } + .ma-sm-n8 { + margin: -32px !important; + } + .ma-sm-n9 { + margin: -36px !important; + } + .ma-sm-n10 { + margin: -40px !important; + } + .ma-sm-n11 { + margin: -44px !important; + } + .ma-sm-n12 { + margin: -48px !important; + } + .ma-sm-n13 { + margin: -52px !important; + } + .ma-sm-n14 { + margin: -56px !important; + } + .ma-sm-n15 { + margin: -60px !important; + } + .ma-sm-n16 { + margin: -64px !important; + } + .mx-sm-n1 { + margin-right: -4px !important; + margin-left: -4px !important; + } + .mx-sm-n2 { + margin-right: -8px !important; + margin-left: -8px !important; + } + .mx-sm-n3 { + margin-right: -12px !important; + margin-left: -12px !important; + } + .mx-sm-n4 { + margin-right: -16px !important; + margin-left: -16px !important; + } + .mx-sm-n5 { + margin-right: -20px !important; + margin-left: -20px !important; + } + .mx-sm-n6 { + margin-right: -24px !important; + margin-left: -24px !important; + } + .mx-sm-n7 { + margin-right: -28px !important; + margin-left: -28px !important; + } + .mx-sm-n8 { + margin-right: -32px !important; + margin-left: -32px !important; + } + .mx-sm-n9 { + margin-right: -36px !important; + margin-left: -36px !important; + } + .mx-sm-n10 { + margin-right: -40px !important; + margin-left: -40px !important; + } + .mx-sm-n11 { + margin-right: -44px !important; + margin-left: -44px !important; + } + .mx-sm-n12 { + margin-right: -48px !important; + margin-left: -48px !important; + } + .mx-sm-n13 { + margin-right: -52px !important; + margin-left: -52px !important; + } + .mx-sm-n14 { + margin-right: -56px !important; + margin-left: -56px !important; + } + .mx-sm-n15 { + margin-right: -60px !important; + margin-left: -60px !important; + } + .mx-sm-n16 { + margin-right: -64px !important; + margin-left: -64px !important; + } + .my-sm-n1 { + margin-top: -4px !important; + margin-bottom: -4px !important; + } + .my-sm-n2 { + margin-top: -8px !important; + margin-bottom: -8px !important; + } + .my-sm-n3 { + margin-top: -12px !important; + margin-bottom: -12px !important; + } + .my-sm-n4 { + margin-top: -16px !important; + margin-bottom: -16px !important; + } + .my-sm-n5 { + margin-top: -20px !important; + margin-bottom: -20px !important; + } + .my-sm-n6 { + margin-top: -24px !important; + margin-bottom: -24px !important; + } + .my-sm-n7 { + margin-top: -28px !important; + margin-bottom: -28px !important; + } + .my-sm-n8 { + margin-top: -32px !important; + margin-bottom: -32px !important; + } + .my-sm-n9 { + margin-top: -36px !important; + margin-bottom: -36px !important; + } + .my-sm-n10 { + margin-top: -40px !important; + margin-bottom: -40px !important; + } + .my-sm-n11 { + margin-top: -44px !important; + margin-bottom: -44px !important; + } + .my-sm-n12 { + margin-top: -48px !important; + margin-bottom: -48px !important; + } + .my-sm-n13 { + margin-top: -52px !important; + margin-bottom: -52px !important; + } + .my-sm-n14 { + margin-top: -56px !important; + margin-bottom: -56px !important; + } + .my-sm-n15 { + margin-top: -60px !important; + margin-bottom: -60px !important; + } + .my-sm-n16 { + margin-top: -64px !important; + margin-bottom: -64px !important; + } + .mt-sm-n1 { + margin-top: -4px !important; + } + .mt-sm-n2 { + margin-top: -8px !important; + } + .mt-sm-n3 { + margin-top: -12px !important; + } + .mt-sm-n4 { + margin-top: -16px !important; + } + .mt-sm-n5 { + margin-top: -20px !important; + } + .mt-sm-n6 { + margin-top: -24px !important; + } + .mt-sm-n7 { + margin-top: -28px !important; + } + .mt-sm-n8 { + margin-top: -32px !important; + } + .mt-sm-n9 { + margin-top: -36px !important; + } + .mt-sm-n10 { + margin-top: -40px !important; + } + .mt-sm-n11 { + margin-top: -44px !important; + } + .mt-sm-n12 { + margin-top: -48px !important; + } + .mt-sm-n13 { + margin-top: -52px !important; + } + .mt-sm-n14 { + margin-top: -56px !important; + } + .mt-sm-n15 { + margin-top: -60px !important; + } + .mt-sm-n16 { + margin-top: -64px !important; + } + .mr-sm-n1 { + margin-right: -4px !important; + } + .mr-sm-n2 { + margin-right: -8px !important; + } + .mr-sm-n3 { + margin-right: -12px !important; + } + .mr-sm-n4 { + margin-right: -16px !important; + } + .mr-sm-n5 { + margin-right: -20px !important; + } + .mr-sm-n6 { + margin-right: -24px !important; + } + .mr-sm-n7 { + margin-right: -28px !important; + } + .mr-sm-n8 { + margin-right: -32px !important; + } + .mr-sm-n9 { + margin-right: -36px !important; + } + .mr-sm-n10 { + margin-right: -40px !important; + } + .mr-sm-n11 { + margin-right: -44px !important; + } + .mr-sm-n12 { + margin-right: -48px !important; + } + .mr-sm-n13 { + margin-right: -52px !important; + } + .mr-sm-n14 { + margin-right: -56px !important; + } + .mr-sm-n15 { + margin-right: -60px !important; + } + .mr-sm-n16 { + margin-right: -64px !important; + } + .mb-sm-n1 { + margin-bottom: -4px !important; + } + .mb-sm-n2 { + margin-bottom: -8px !important; + } + .mb-sm-n3 { + margin-bottom: -12px !important; + } + .mb-sm-n4 { + margin-bottom: -16px !important; + } + .mb-sm-n5 { + margin-bottom: -20px !important; + } + .mb-sm-n6 { + margin-bottom: -24px !important; + } + .mb-sm-n7 { + margin-bottom: -28px !important; + } + .mb-sm-n8 { + margin-bottom: -32px !important; + } + .mb-sm-n9 { + margin-bottom: -36px !important; + } + .mb-sm-n10 { + margin-bottom: -40px !important; + } + .mb-sm-n11 { + margin-bottom: -44px !important; + } + .mb-sm-n12 { + margin-bottom: -48px !important; + } + .mb-sm-n13 { + margin-bottom: -52px !important; + } + .mb-sm-n14 { + margin-bottom: -56px !important; + } + .mb-sm-n15 { + margin-bottom: -60px !important; + } + .mb-sm-n16 { + margin-bottom: -64px !important; + } + .ml-sm-n1 { + margin-left: -4px !important; + } + .ml-sm-n2 { + margin-left: -8px !important; + } + .ml-sm-n3 { + margin-left: -12px !important; + } + .ml-sm-n4 { + margin-left: -16px !important; + } + .ml-sm-n5 { + margin-left: -20px !important; + } + .ml-sm-n6 { + margin-left: -24px !important; + } + .ml-sm-n7 { + margin-left: -28px !important; + } + .ml-sm-n8 { + margin-left: -32px !important; + } + .ml-sm-n9 { + margin-left: -36px !important; + } + .ml-sm-n10 { + margin-left: -40px !important; + } + .ml-sm-n11 { + margin-left: -44px !important; + } + .ml-sm-n12 { + margin-left: -48px !important; + } + .ml-sm-n13 { + margin-left: -52px !important; + } + .ml-sm-n14 { + margin-left: -56px !important; + } + .ml-sm-n15 { + margin-left: -60px !important; + } + .ml-sm-n16 { + margin-left: -64px !important; + } + .ms-sm-n1 { + margin-inline-start: -4px !important; + } + .ms-sm-n2 { + margin-inline-start: -8px !important; + } + .ms-sm-n3 { + margin-inline-start: -12px !important; + } + .ms-sm-n4 { + margin-inline-start: -16px !important; + } + .ms-sm-n5 { + margin-inline-start: -20px !important; + } + .ms-sm-n6 { + margin-inline-start: -24px !important; + } + .ms-sm-n7 { + margin-inline-start: -28px !important; + } + .ms-sm-n8 { + margin-inline-start: -32px !important; + } + .ms-sm-n9 { + margin-inline-start: -36px !important; + } + .ms-sm-n10 { + margin-inline-start: -40px !important; + } + .ms-sm-n11 { + margin-inline-start: -44px !important; + } + .ms-sm-n12 { + margin-inline-start: -48px !important; + } + .ms-sm-n13 { + margin-inline-start: -52px !important; + } + .ms-sm-n14 { + margin-inline-start: -56px !important; + } + .ms-sm-n15 { + margin-inline-start: -60px !important; + } + .ms-sm-n16 { + margin-inline-start: -64px !important; + } + .me-sm-n1 { + margin-inline-end: -4px !important; + } + .me-sm-n2 { + margin-inline-end: -8px !important; + } + .me-sm-n3 { + margin-inline-end: -12px !important; + } + .me-sm-n4 { + margin-inline-end: -16px !important; + } + .me-sm-n5 { + margin-inline-end: -20px !important; + } + .me-sm-n6 { + margin-inline-end: -24px !important; + } + .me-sm-n7 { + margin-inline-end: -28px !important; + } + .me-sm-n8 { + margin-inline-end: -32px !important; + } + .me-sm-n9 { + margin-inline-end: -36px !important; + } + .me-sm-n10 { + margin-inline-end: -40px !important; + } + .me-sm-n11 { + margin-inline-end: -44px !important; + } + .me-sm-n12 { + margin-inline-end: -48px !important; + } + .me-sm-n13 { + margin-inline-end: -52px !important; + } + .me-sm-n14 { + margin-inline-end: -56px !important; + } + .me-sm-n15 { + margin-inline-end: -60px !important; + } + .me-sm-n16 { + margin-inline-end: -64px !important; + } + .pa-sm-0 { + padding: 0px !important; + } + .pa-sm-1 { + padding: 4px !important; + } + .pa-sm-2 { + padding: 8px !important; + } + .pa-sm-3 { + padding: 12px !important; + } + .pa-sm-4 { + padding: 16px !important; + } + .pa-sm-5 { + padding: 20px !important; + } + .pa-sm-6 { + padding: 24px !important; + } + .pa-sm-7 { + padding: 28px !important; + } + .pa-sm-8 { + padding: 32px !important; + } + .pa-sm-9 { + padding: 36px !important; + } + .pa-sm-10 { + padding: 40px !important; + } + .pa-sm-11 { + padding: 44px !important; + } + .pa-sm-12 { + padding: 48px !important; + } + .pa-sm-13 { + padding: 52px !important; + } + .pa-sm-14 { + padding: 56px !important; + } + .pa-sm-15 { + padding: 60px !important; + } + .pa-sm-16 { + padding: 64px !important; + } + .px-sm-0 { + padding-right: 0px !important; + padding-left: 0px !important; + } + .px-sm-1 { + padding-right: 4px !important; + padding-left: 4px !important; + } + .px-sm-2 { + padding-right: 8px !important; + padding-left: 8px !important; + } + .px-sm-3 { + padding-right: 12px !important; + padding-left: 12px !important; + } + .px-sm-4 { + padding-right: 16px !important; + padding-left: 16px !important; + } + .px-sm-5 { + padding-right: 20px !important; + padding-left: 20px !important; + } + .px-sm-6 { + padding-right: 24px !important; + padding-left: 24px !important; + } + .px-sm-7 { + padding-right: 28px !important; + padding-left: 28px !important; + } + .px-sm-8 { + padding-right: 32px !important; + padding-left: 32px !important; + } + .px-sm-9 { + padding-right: 36px !important; + padding-left: 36px !important; + } + .px-sm-10 { + padding-right: 40px !important; + padding-left: 40px !important; + } + .px-sm-11 { + padding-right: 44px !important; + padding-left: 44px !important; + } + .px-sm-12 { + padding-right: 48px !important; + padding-left: 48px !important; + } + .px-sm-13 { + padding-right: 52px !important; + padding-left: 52px !important; + } + .px-sm-14 { + padding-right: 56px !important; + padding-left: 56px !important; + } + .px-sm-15 { + padding-right: 60px !important; + padding-left: 60px !important; + } + .px-sm-16 { + padding-right: 64px !important; + padding-left: 64px !important; + } + .py-sm-0 { + padding-top: 0px !important; + padding-bottom: 0px !important; + } + .py-sm-1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .py-sm-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .py-sm-3 { + padding-top: 12px !important; + padding-bottom: 12px !important; + } + .py-sm-4 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .py-sm-5 { + padding-top: 20px !important; + padding-bottom: 20px !important; + } + .py-sm-6 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .py-sm-7 { + padding-top: 28px !important; + padding-bottom: 28px !important; + } + .py-sm-8 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .py-sm-9 { + padding-top: 36px !important; + padding-bottom: 36px !important; + } + .py-sm-10 { + padding-top: 40px !important; + padding-bottom: 40px !important; + } + .py-sm-11 { + padding-top: 44px !important; + padding-bottom: 44px !important; + } + .py-sm-12 { + padding-top: 48px !important; + padding-bottom: 48px !important; + } + .py-sm-13 { + padding-top: 52px !important; + padding-bottom: 52px !important; + } + .py-sm-14 { + padding-top: 56px !important; + padding-bottom: 56px !important; + } + .py-sm-15 { + padding-top: 60px !important; + padding-bottom: 60px !important; + } + .py-sm-16 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .pt-sm-0 { + padding-top: 0px !important; + } + .pt-sm-1 { + padding-top: 4px !important; + } + .pt-sm-2 { + padding-top: 8px !important; + } + .pt-sm-3 { + padding-top: 12px !important; + } + .pt-sm-4 { + padding-top: 16px !important; + } + .pt-sm-5 { + padding-top: 20px !important; + } + .pt-sm-6 { + padding-top: 24px !important; + } + .pt-sm-7 { + padding-top: 28px !important; + } + .pt-sm-8 { + padding-top: 32px !important; + } + .pt-sm-9 { + padding-top: 36px !important; + } + .pt-sm-10 { + padding-top: 40px !important; + } + .pt-sm-11 { + padding-top: 44px !important; + } + .pt-sm-12 { + padding-top: 48px !important; + } + .pt-sm-13 { + padding-top: 52px !important; + } + .pt-sm-14 { + padding-top: 56px !important; + } + .pt-sm-15 { + padding-top: 60px !important; + } + .pt-sm-16 { + padding-top: 64px !important; + } + .pr-sm-0 { + padding-right: 0px !important; + } + .pr-sm-1 { + padding-right: 4px !important; + } + .pr-sm-2 { + padding-right: 8px !important; + } + .pr-sm-3 { + padding-right: 12px !important; + } + .pr-sm-4 { + padding-right: 16px !important; + } + .pr-sm-5 { + padding-right: 20px !important; + } + .pr-sm-6 { + padding-right: 24px !important; + } + .pr-sm-7 { + padding-right: 28px !important; + } + .pr-sm-8 { + padding-right: 32px !important; + } + .pr-sm-9 { + padding-right: 36px !important; + } + .pr-sm-10 { + padding-right: 40px !important; + } + .pr-sm-11 { + padding-right: 44px !important; + } + .pr-sm-12 { + padding-right: 48px !important; + } + .pr-sm-13 { + padding-right: 52px !important; + } + .pr-sm-14 { + padding-right: 56px !important; + } + .pr-sm-15 { + padding-right: 60px !important; + } + .pr-sm-16 { + padding-right: 64px !important; + } + .pb-sm-0 { + padding-bottom: 0px !important; + } + .pb-sm-1 { + padding-bottom: 4px !important; + } + .pb-sm-2 { + padding-bottom: 8px !important; + } + .pb-sm-3 { + padding-bottom: 12px !important; + } + .pb-sm-4 { + padding-bottom: 16px !important; + } + .pb-sm-5 { + padding-bottom: 20px !important; + } + .pb-sm-6 { + padding-bottom: 24px !important; + } + .pb-sm-7 { + padding-bottom: 28px !important; + } + .pb-sm-8 { + padding-bottom: 32px !important; + } + .pb-sm-9 { + padding-bottom: 36px !important; + } + .pb-sm-10 { + padding-bottom: 40px !important; + } + .pb-sm-11 { + padding-bottom: 44px !important; + } + .pb-sm-12 { + padding-bottom: 48px !important; + } + .pb-sm-13 { + padding-bottom: 52px !important; + } + .pb-sm-14 { + padding-bottom: 56px !important; + } + .pb-sm-15 { + padding-bottom: 60px !important; + } + .pb-sm-16 { + padding-bottom: 64px !important; + } + .pl-sm-0 { + padding-left: 0px !important; + } + .pl-sm-1 { + padding-left: 4px !important; + } + .pl-sm-2 { + padding-left: 8px !important; + } + .pl-sm-3 { + padding-left: 12px !important; + } + .pl-sm-4 { + padding-left: 16px !important; + } + .pl-sm-5 { + padding-left: 20px !important; + } + .pl-sm-6 { + padding-left: 24px !important; + } + .pl-sm-7 { + padding-left: 28px !important; + } + .pl-sm-8 { + padding-left: 32px !important; + } + .pl-sm-9 { + padding-left: 36px !important; + } + .pl-sm-10 { + padding-left: 40px !important; + } + .pl-sm-11 { + padding-left: 44px !important; + } + .pl-sm-12 { + padding-left: 48px !important; + } + .pl-sm-13 { + padding-left: 52px !important; + } + .pl-sm-14 { + padding-left: 56px !important; + } + .pl-sm-15 { + padding-left: 60px !important; + } + .pl-sm-16 { + padding-left: 64px !important; + } + .ps-sm-0 { + padding-inline-start: 0px !important; + } + .ps-sm-1 { + padding-inline-start: 4px !important; + } + .ps-sm-2 { + padding-inline-start: 8px !important; + } + .ps-sm-3 { + padding-inline-start: 12px !important; + } + .ps-sm-4 { + padding-inline-start: 16px !important; + } + .ps-sm-5 { + padding-inline-start: 20px !important; + } + .ps-sm-6 { + padding-inline-start: 24px !important; + } + .ps-sm-7 { + padding-inline-start: 28px !important; + } + .ps-sm-8 { + padding-inline-start: 32px !important; + } + .ps-sm-9 { + padding-inline-start: 36px !important; + } + .ps-sm-10 { + padding-inline-start: 40px !important; + } + .ps-sm-11 { + padding-inline-start: 44px !important; + } + .ps-sm-12 { + padding-inline-start: 48px !important; + } + .ps-sm-13 { + padding-inline-start: 52px !important; + } + .ps-sm-14 { + padding-inline-start: 56px !important; + } + .ps-sm-15 { + padding-inline-start: 60px !important; + } + .ps-sm-16 { + padding-inline-start: 64px !important; + } + .pe-sm-0 { + padding-inline-end: 0px !important; + } + .pe-sm-1 { + padding-inline-end: 4px !important; + } + .pe-sm-2 { + padding-inline-end: 8px !important; + } + .pe-sm-3 { + padding-inline-end: 12px !important; + } + .pe-sm-4 { + padding-inline-end: 16px !important; + } + .pe-sm-5 { + padding-inline-end: 20px !important; + } + .pe-sm-6 { + padding-inline-end: 24px !important; + } + .pe-sm-7 { + padding-inline-end: 28px !important; + } + .pe-sm-8 { + padding-inline-end: 32px !important; + } + .pe-sm-9 { + padding-inline-end: 36px !important; + } + .pe-sm-10 { + padding-inline-end: 40px !important; + } + .pe-sm-11 { + padding-inline-end: 44px !important; + } + .pe-sm-12 { + padding-inline-end: 48px !important; + } + .pe-sm-13 { + padding-inline-end: 52px !important; + } + .pe-sm-14 { + padding-inline-end: 56px !important; + } + .pe-sm-15 { + padding-inline-end: 60px !important; + } + .pe-sm-16 { + padding-inline-end: 64px !important; + } + .text-sm-left { + text-align: left !important; + } + .text-sm-right { + text-align: right !important; + } + .text-sm-center { + text-align: center !important; + } + .text-sm-justify { + text-align: justify !important; + } + .text-sm-start { + text-align: start !important; + } + .text-sm-end { + text-align: end !important; + } + .text-sm-h1 { + font-size: 6rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.015625em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-h2 { + font-size: 3.75rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.0083333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-h3 { + font-size: 3rem !important; + font-weight: 400; + line-height: 1.05; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-h4 { + font-size: 2.125rem !important; + font-weight: 400; + line-height: 1.175; + letter-spacing: 0.0073529412em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-h5 { + font-size: 1.5rem !important; + font-weight: 400; + line-height: 1.333; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-h6 { + font-size: 1.25rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-subtitle-1 { + font-size: 1rem !important; + font-weight: normal; + line-height: 1.75; + letter-spacing: 0.009375em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-subtitle-2 { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0071428571em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-body-1 { + font-size: 1rem !important; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.03125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-body-2 { + font-size: 0.875rem !important; + font-weight: 400; + line-height: 1.425; + letter-spacing: 0.0178571429em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-button { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 2.6; + letter-spacing: 0.0892857143em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .text-sm-caption { + font-size: 0.75rem !important; + font-weight: 400; + line-height: 1.667; + letter-spacing: 0.0333333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-sm-overline { + font-size: 0.75rem !important; + font-weight: 500; + line-height: 2.667; + letter-spacing: 0.1666666667em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .h-sm-auto { + height: auto !important; + } + .h-sm-screen { + height: 100vh !important; + } + .h-sm-0 { + height: 0 !important; + } + .h-sm-25 { + height: 25% !important; + } + .h-sm-50 { + height: 50% !important; + } + .h-sm-75 { + height: 75% !important; + } + .h-sm-100 { + height: 100% !important; + } + .w-sm-auto { + width: auto !important; + } + .w-sm-0 { + width: 0 !important; + } + .w-sm-25 { + width: 25% !important; + } + .w-sm-33 { + width: 33% !important; + } + .w-sm-50 { + width: 50% !important; + } + .w-sm-66 { + width: 66% !important; + } + .w-sm-75 { + width: 75% !important; + } + .w-sm-100 { + width: 100% !important; + } +} +@media (min-width: 960px) { + .d-md-none { + display: none !important; + } + .d-md-inline { + display: inline !important; + } + .d-md-inline-block { + display: inline-block !important; + } + .d-md-block { + display: block !important; + } + .d-md-table { + display: table !important; + } + .d-md-table-row { + display: table-row !important; + } + .d-md-table-cell { + display: table-cell !important; + } + .d-md-flex { + display: flex !important; + } + .d-md-inline-flex { + display: inline-flex !important; + } + .float-md-none { + float: none !important; + } + .float-md-left { + float: left !important; + } + .float-md-right { + float: right !important; + } + .v-locale--is-rtl .float-md-end { + float: left !important; + } + .v-locale--is-rtl .float-md-start { + float: right !important; + } + .v-locale--is-ltr .float-md-end { + float: right !important; + } + .v-locale--is-ltr .float-md-start { + float: left !important; + } + .flex-md-fill { + flex: 1 1 auto !important; + } + .flex-md-1-1 { + flex: 1 1 auto !important; + } + .flex-md-1-0 { + flex: 1 0 auto !important; + } + .flex-md-0-1 { + flex: 0 1 auto !important; + } + .flex-md-0-0 { + flex: 0 0 auto !important; + } + .flex-md-1-1-100 { + flex: 1 1 100% !important; + } + .flex-md-1-0-100 { + flex: 1 0 100% !important; + } + .flex-md-0-1-100 { + flex: 0 1 100% !important; + } + .flex-md-0-0-100 { + flex: 0 0 100% !important; + } + .flex-md-1-1-0 { + flex: 1 1 0 !important; + } + .flex-md-1-0-0 { + flex: 1 0 0 !important; + } + .flex-md-0-1-0 { + flex: 0 1 0 !important; + } + .flex-md-0-0-0 { + flex: 0 0 0 !important; + } + .flex-md-row { + flex-direction: row !important; + } + .flex-md-column { + flex-direction: column !important; + } + .flex-md-row-reverse { + flex-direction: row-reverse !important; + } + .flex-md-column-reverse { + flex-direction: column-reverse !important; + } + .flex-md-grow-0 { + flex-grow: 0 !important; + } + .flex-md-grow-1 { + flex-grow: 1 !important; + } + .flex-md-shrink-0 { + flex-shrink: 0 !important; + } + .flex-md-shrink-1 { + flex-shrink: 1 !important; + } + .flex-md-wrap { + flex-wrap: wrap !important; + } + .flex-md-nowrap { + flex-wrap: nowrap !important; + } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-md-start { + justify-content: flex-start !important; + } + .justify-md-end { + justify-content: flex-end !important; + } + .justify-md-center { + justify-content: center !important; + } + .justify-md-space-between { + justify-content: space-between !important; + } + .justify-md-space-around { + justify-content: space-around !important; + } + .justify-md-space-evenly { + justify-content: space-evenly !important; + } + .align-md-start { + align-items: flex-start !important; + } + .align-md-end { + align-items: flex-end !important; + } + .align-md-center { + align-items: center !important; + } + .align-md-baseline { + align-items: baseline !important; + } + .align-md-stretch { + align-items: stretch !important; + } + .align-content-md-start { + align-content: flex-start !important; + } + .align-content-md-end { + align-content: flex-end !important; + } + .align-content-md-center { + align-content: center !important; + } + .align-content-md-space-between { + align-content: space-between !important; + } + .align-content-md-space-around { + align-content: space-around !important; + } + .align-content-md-space-evenly { + align-content: space-evenly !important; + } + .align-content-md-stretch { + align-content: stretch !important; + } + .align-self-md-auto { + align-self: auto !important; + } + .align-self-md-start { + align-self: flex-start !important; + } + .align-self-md-end { + align-self: flex-end !important; + } + .align-self-md-center { + align-self: center !important; + } + .align-self-md-baseline { + align-self: baseline !important; + } + .align-self-md-stretch { + align-self: stretch !important; + } + .order-md-first { + order: -1 !important; + } + .order-md-0 { + order: 0 !important; + } + .order-md-1 { + order: 1 !important; + } + .order-md-2 { + order: 2 !important; + } + .order-md-3 { + order: 3 !important; + } + .order-md-4 { + order: 4 !important; + } + .order-md-5 { + order: 5 !important; + } + .order-md-6 { + order: 6 !important; + } + .order-md-7 { + order: 7 !important; + } + .order-md-8 { + order: 8 !important; + } + .order-md-9 { + order: 9 !important; + } + .order-md-10 { + order: 10 !important; + } + .order-md-11 { + order: 11 !important; + } + .order-md-12 { + order: 12 !important; + } + .order-md-last { + order: 13 !important; + } + .ga-md-0 { + gap: 0px !important; + } + .ga-md-1 { + gap: 4px !important; + } + .ga-md-2 { + gap: 8px !important; + } + .ga-md-3 { + gap: 12px !important; + } + .ga-md-4 { + gap: 16px !important; + } + .ga-md-5 { + gap: 20px !important; + } + .ga-md-6 { + gap: 24px !important; + } + .ga-md-7 { + gap: 28px !important; + } + .ga-md-8 { + gap: 32px !important; + } + .ga-md-9 { + gap: 36px !important; + } + .ga-md-10 { + gap: 40px !important; + } + .ga-md-11 { + gap: 44px !important; + } + .ga-md-12 { + gap: 48px !important; + } + .ga-md-13 { + gap: 52px !important; + } + .ga-md-14 { + gap: 56px !important; + } + .ga-md-15 { + gap: 60px !important; + } + .ga-md-16 { + gap: 64px !important; + } + .ga-md-auto { + gap: auto !important; + } + .gr-md-0 { + row-gap: 0px !important; + } + .gr-md-1 { + row-gap: 4px !important; + } + .gr-md-2 { + row-gap: 8px !important; + } + .gr-md-3 { + row-gap: 12px !important; + } + .gr-md-4 { + row-gap: 16px !important; + } + .gr-md-5 { + row-gap: 20px !important; + } + .gr-md-6 { + row-gap: 24px !important; + } + .gr-md-7 { + row-gap: 28px !important; + } + .gr-md-8 { + row-gap: 32px !important; + } + .gr-md-9 { + row-gap: 36px !important; + } + .gr-md-10 { + row-gap: 40px !important; + } + .gr-md-11 { + row-gap: 44px !important; + } + .gr-md-12 { + row-gap: 48px !important; + } + .gr-md-13 { + row-gap: 52px !important; + } + .gr-md-14 { + row-gap: 56px !important; + } + .gr-md-15 { + row-gap: 60px !important; + } + .gr-md-16 { + row-gap: 64px !important; + } + .gr-md-auto { + row-gap: auto !important; + } + .gc-md-0 { + column-gap: 0px !important; + } + .gc-md-1 { + column-gap: 4px !important; + } + .gc-md-2 { + column-gap: 8px !important; + } + .gc-md-3 { + column-gap: 12px !important; + } + .gc-md-4 { + column-gap: 16px !important; + } + .gc-md-5 { + column-gap: 20px !important; + } + .gc-md-6 { + column-gap: 24px !important; + } + .gc-md-7 { + column-gap: 28px !important; + } + .gc-md-8 { + column-gap: 32px !important; + } + .gc-md-9 { + column-gap: 36px !important; + } + .gc-md-10 { + column-gap: 40px !important; + } + .gc-md-11 { + column-gap: 44px !important; + } + .gc-md-12 { + column-gap: 48px !important; + } + .gc-md-13 { + column-gap: 52px !important; + } + .gc-md-14 { + column-gap: 56px !important; + } + .gc-md-15 { + column-gap: 60px !important; + } + .gc-md-16 { + column-gap: 64px !important; + } + .gc-md-auto { + column-gap: auto !important; + } + .ma-md-0 { + margin: 0px !important; + } + .ma-md-1 { + margin: 4px !important; + } + .ma-md-2 { + margin: 8px !important; + } + .ma-md-3 { + margin: 12px !important; + } + .ma-md-4 { + margin: 16px !important; + } + .ma-md-5 { + margin: 20px !important; + } + .ma-md-6 { + margin: 24px !important; + } + .ma-md-7 { + margin: 28px !important; + } + .ma-md-8 { + margin: 32px !important; + } + .ma-md-9 { + margin: 36px !important; + } + .ma-md-10 { + margin: 40px !important; + } + .ma-md-11 { + margin: 44px !important; + } + .ma-md-12 { + margin: 48px !important; + } + .ma-md-13 { + margin: 52px !important; + } + .ma-md-14 { + margin: 56px !important; + } + .ma-md-15 { + margin: 60px !important; + } + .ma-md-16 { + margin: 64px !important; + } + .ma-md-auto { + margin: auto !important; + } + .mx-md-0 { + margin-right: 0px !important; + margin-left: 0px !important; + } + .mx-md-1 { + margin-right: 4px !important; + margin-left: 4px !important; + } + .mx-md-2 { + margin-right: 8px !important; + margin-left: 8px !important; + } + .mx-md-3 { + margin-right: 12px !important; + margin-left: 12px !important; + } + .mx-md-4 { + margin-right: 16px !important; + margin-left: 16px !important; + } + .mx-md-5 { + margin-right: 20px !important; + margin-left: 20px !important; + } + .mx-md-6 { + margin-right: 24px !important; + margin-left: 24px !important; + } + .mx-md-7 { + margin-right: 28px !important; + margin-left: 28px !important; + } + .mx-md-8 { + margin-right: 32px !important; + margin-left: 32px !important; + } + .mx-md-9 { + margin-right: 36px !important; + margin-left: 36px !important; + } + .mx-md-10 { + margin-right: 40px !important; + margin-left: 40px !important; + } + .mx-md-11 { + margin-right: 44px !important; + margin-left: 44px !important; + } + .mx-md-12 { + margin-right: 48px !important; + margin-left: 48px !important; + } + .mx-md-13 { + margin-right: 52px !important; + margin-left: 52px !important; + } + .mx-md-14 { + margin-right: 56px !important; + margin-left: 56px !important; + } + .mx-md-15 { + margin-right: 60px !important; + margin-left: 60px !important; + } + .mx-md-16 { + margin-right: 64px !important; + margin-left: 64px !important; + } + .mx-md-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-md-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + .my-md-1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .my-md-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .my-md-3 { + margin-top: 12px !important; + margin-bottom: 12px !important; + } + .my-md-4 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .my-md-5 { + margin-top: 20px !important; + margin-bottom: 20px !important; + } + .my-md-6 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .my-md-7 { + margin-top: 28px !important; + margin-bottom: 28px !important; + } + .my-md-8 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .my-md-9 { + margin-top: 36px !important; + margin-bottom: 36px !important; + } + .my-md-10 { + margin-top: 40px !important; + margin-bottom: 40px !important; + } + .my-md-11 { + margin-top: 44px !important; + margin-bottom: 44px !important; + } + .my-md-12 { + margin-top: 48px !important; + margin-bottom: 48px !important; + } + .my-md-13 { + margin-top: 52px !important; + margin-bottom: 52px !important; + } + .my-md-14 { + margin-top: 56px !important; + margin-bottom: 56px !important; + } + .my-md-15 { + margin-top: 60px !important; + margin-bottom: 60px !important; + } + .my-md-16 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .my-md-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-md-0 { + margin-top: 0px !important; + } + .mt-md-1 { + margin-top: 4px !important; + } + .mt-md-2 { + margin-top: 8px !important; + } + .mt-md-3 { + margin-top: 12px !important; + } + .mt-md-4 { + margin-top: 16px !important; + } + .mt-md-5 { + margin-top: 20px !important; + } + .mt-md-6 { + margin-top: 24px !important; + } + .mt-md-7 { + margin-top: 28px !important; + } + .mt-md-8 { + margin-top: 32px !important; + } + .mt-md-9 { + margin-top: 36px !important; + } + .mt-md-10 { + margin-top: 40px !important; + } + .mt-md-11 { + margin-top: 44px !important; + } + .mt-md-12 { + margin-top: 48px !important; + } + .mt-md-13 { + margin-top: 52px !important; + } + .mt-md-14 { + margin-top: 56px !important; + } + .mt-md-15 { + margin-top: 60px !important; + } + .mt-md-16 { + margin-top: 64px !important; + } + .mt-md-auto { + margin-top: auto !important; + } + .mr-md-0 { + margin-right: 0px !important; + } + .mr-md-1 { + margin-right: 4px !important; + } + .mr-md-2 { + margin-right: 8px !important; + } + .mr-md-3 { + margin-right: 12px !important; + } + .mr-md-4 { + margin-right: 16px !important; + } + .mr-md-5 { + margin-right: 20px !important; + } + .mr-md-6 { + margin-right: 24px !important; + } + .mr-md-7 { + margin-right: 28px !important; + } + .mr-md-8 { + margin-right: 32px !important; + } + .mr-md-9 { + margin-right: 36px !important; + } + .mr-md-10 { + margin-right: 40px !important; + } + .mr-md-11 { + margin-right: 44px !important; + } + .mr-md-12 { + margin-right: 48px !important; + } + .mr-md-13 { + margin-right: 52px !important; + } + .mr-md-14 { + margin-right: 56px !important; + } + .mr-md-15 { + margin-right: 60px !important; + } + .mr-md-16 { + margin-right: 64px !important; + } + .mr-md-auto { + margin-right: auto !important; + } + .mb-md-0 { + margin-bottom: 0px !important; + } + .mb-md-1 { + margin-bottom: 4px !important; + } + .mb-md-2 { + margin-bottom: 8px !important; + } + .mb-md-3 { + margin-bottom: 12px !important; + } + .mb-md-4 { + margin-bottom: 16px !important; + } + .mb-md-5 { + margin-bottom: 20px !important; + } + .mb-md-6 { + margin-bottom: 24px !important; + } + .mb-md-7 { + margin-bottom: 28px !important; + } + .mb-md-8 { + margin-bottom: 32px !important; + } + .mb-md-9 { + margin-bottom: 36px !important; + } + .mb-md-10 { + margin-bottom: 40px !important; + } + .mb-md-11 { + margin-bottom: 44px !important; + } + .mb-md-12 { + margin-bottom: 48px !important; + } + .mb-md-13 { + margin-bottom: 52px !important; + } + .mb-md-14 { + margin-bottom: 56px !important; + } + .mb-md-15 { + margin-bottom: 60px !important; + } + .mb-md-16 { + margin-bottom: 64px !important; + } + .mb-md-auto { + margin-bottom: auto !important; + } + .ml-md-0 { + margin-left: 0px !important; + } + .ml-md-1 { + margin-left: 4px !important; + } + .ml-md-2 { + margin-left: 8px !important; + } + .ml-md-3 { + margin-left: 12px !important; + } + .ml-md-4 { + margin-left: 16px !important; + } + .ml-md-5 { + margin-left: 20px !important; + } + .ml-md-6 { + margin-left: 24px !important; + } + .ml-md-7 { + margin-left: 28px !important; + } + .ml-md-8 { + margin-left: 32px !important; + } + .ml-md-9 { + margin-left: 36px !important; + } + .ml-md-10 { + margin-left: 40px !important; + } + .ml-md-11 { + margin-left: 44px !important; + } + .ml-md-12 { + margin-left: 48px !important; + } + .ml-md-13 { + margin-left: 52px !important; + } + .ml-md-14 { + margin-left: 56px !important; + } + .ml-md-15 { + margin-left: 60px !important; + } + .ml-md-16 { + margin-left: 64px !important; + } + .ml-md-auto { + margin-left: auto !important; + } + .ms-md-0 { + margin-inline-start: 0px !important; + } + .ms-md-1 { + margin-inline-start: 4px !important; + } + .ms-md-2 { + margin-inline-start: 8px !important; + } + .ms-md-3 { + margin-inline-start: 12px !important; + } + .ms-md-4 { + margin-inline-start: 16px !important; + } + .ms-md-5 { + margin-inline-start: 20px !important; + } + .ms-md-6 { + margin-inline-start: 24px !important; + } + .ms-md-7 { + margin-inline-start: 28px !important; + } + .ms-md-8 { + margin-inline-start: 32px !important; + } + .ms-md-9 { + margin-inline-start: 36px !important; + } + .ms-md-10 { + margin-inline-start: 40px !important; + } + .ms-md-11 { + margin-inline-start: 44px !important; + } + .ms-md-12 { + margin-inline-start: 48px !important; + } + .ms-md-13 { + margin-inline-start: 52px !important; + } + .ms-md-14 { + margin-inline-start: 56px !important; + } + .ms-md-15 { + margin-inline-start: 60px !important; + } + .ms-md-16 { + margin-inline-start: 64px !important; + } + .ms-md-auto { + margin-inline-start: auto !important; + } + .me-md-0 { + margin-inline-end: 0px !important; + } + .me-md-1 { + margin-inline-end: 4px !important; + } + .me-md-2 { + margin-inline-end: 8px !important; + } + .me-md-3 { + margin-inline-end: 12px !important; + } + .me-md-4 { + margin-inline-end: 16px !important; + } + .me-md-5 { + margin-inline-end: 20px !important; + } + .me-md-6 { + margin-inline-end: 24px !important; + } + .me-md-7 { + margin-inline-end: 28px !important; + } + .me-md-8 { + margin-inline-end: 32px !important; + } + .me-md-9 { + margin-inline-end: 36px !important; + } + .me-md-10 { + margin-inline-end: 40px !important; + } + .me-md-11 { + margin-inline-end: 44px !important; + } + .me-md-12 { + margin-inline-end: 48px !important; + } + .me-md-13 { + margin-inline-end: 52px !important; + } + .me-md-14 { + margin-inline-end: 56px !important; + } + .me-md-15 { + margin-inline-end: 60px !important; + } + .me-md-16 { + margin-inline-end: 64px !important; + } + .me-md-auto { + margin-inline-end: auto !important; + } + .ma-md-n1 { + margin: -4px !important; + } + .ma-md-n2 { + margin: -8px !important; + } + .ma-md-n3 { + margin: -12px !important; + } + .ma-md-n4 { + margin: -16px !important; + } + .ma-md-n5 { + margin: -20px !important; + } + .ma-md-n6 { + margin: -24px !important; + } + .ma-md-n7 { + margin: -28px !important; + } + .ma-md-n8 { + margin: -32px !important; + } + .ma-md-n9 { + margin: -36px !important; + } + .ma-md-n10 { + margin: -40px !important; + } + .ma-md-n11 { + margin: -44px !important; + } + .ma-md-n12 { + margin: -48px !important; + } + .ma-md-n13 { + margin: -52px !important; + } + .ma-md-n14 { + margin: -56px !important; + } + .ma-md-n15 { + margin: -60px !important; + } + .ma-md-n16 { + margin: -64px !important; + } + .mx-md-n1 { + margin-right: -4px !important; + margin-left: -4px !important; + } + .mx-md-n2 { + margin-right: -8px !important; + margin-left: -8px !important; + } + .mx-md-n3 { + margin-right: -12px !important; + margin-left: -12px !important; + } + .mx-md-n4 { + margin-right: -16px !important; + margin-left: -16px !important; + } + .mx-md-n5 { + margin-right: -20px !important; + margin-left: -20px !important; + } + .mx-md-n6 { + margin-right: -24px !important; + margin-left: -24px !important; + } + .mx-md-n7 { + margin-right: -28px !important; + margin-left: -28px !important; + } + .mx-md-n8 { + margin-right: -32px !important; + margin-left: -32px !important; + } + .mx-md-n9 { + margin-right: -36px !important; + margin-left: -36px !important; + } + .mx-md-n10 { + margin-right: -40px !important; + margin-left: -40px !important; + } + .mx-md-n11 { + margin-right: -44px !important; + margin-left: -44px !important; + } + .mx-md-n12 { + margin-right: -48px !important; + margin-left: -48px !important; + } + .mx-md-n13 { + margin-right: -52px !important; + margin-left: -52px !important; + } + .mx-md-n14 { + margin-right: -56px !important; + margin-left: -56px !important; + } + .mx-md-n15 { + margin-right: -60px !important; + margin-left: -60px !important; + } + .mx-md-n16 { + margin-right: -64px !important; + margin-left: -64px !important; + } + .my-md-n1 { + margin-top: -4px !important; + margin-bottom: -4px !important; + } + .my-md-n2 { + margin-top: -8px !important; + margin-bottom: -8px !important; + } + .my-md-n3 { + margin-top: -12px !important; + margin-bottom: -12px !important; + } + .my-md-n4 { + margin-top: -16px !important; + margin-bottom: -16px !important; + } + .my-md-n5 { + margin-top: -20px !important; + margin-bottom: -20px !important; + } + .my-md-n6 { + margin-top: -24px !important; + margin-bottom: -24px !important; + } + .my-md-n7 { + margin-top: -28px !important; + margin-bottom: -28px !important; + } + .my-md-n8 { + margin-top: -32px !important; + margin-bottom: -32px !important; + } + .my-md-n9 { + margin-top: -36px !important; + margin-bottom: -36px !important; + } + .my-md-n10 { + margin-top: -40px !important; + margin-bottom: -40px !important; + } + .my-md-n11 { + margin-top: -44px !important; + margin-bottom: -44px !important; + } + .my-md-n12 { + margin-top: -48px !important; + margin-bottom: -48px !important; + } + .my-md-n13 { + margin-top: -52px !important; + margin-bottom: -52px !important; + } + .my-md-n14 { + margin-top: -56px !important; + margin-bottom: -56px !important; + } + .my-md-n15 { + margin-top: -60px !important; + margin-bottom: -60px !important; + } + .my-md-n16 { + margin-top: -64px !important; + margin-bottom: -64px !important; + } + .mt-md-n1 { + margin-top: -4px !important; + } + .mt-md-n2 { + margin-top: -8px !important; + } + .mt-md-n3 { + margin-top: -12px !important; + } + .mt-md-n4 { + margin-top: -16px !important; + } + .mt-md-n5 { + margin-top: -20px !important; + } + .mt-md-n6 { + margin-top: -24px !important; + } + .mt-md-n7 { + margin-top: -28px !important; + } + .mt-md-n8 { + margin-top: -32px !important; + } + .mt-md-n9 { + margin-top: -36px !important; + } + .mt-md-n10 { + margin-top: -40px !important; + } + .mt-md-n11 { + margin-top: -44px !important; + } + .mt-md-n12 { + margin-top: -48px !important; + } + .mt-md-n13 { + margin-top: -52px !important; + } + .mt-md-n14 { + margin-top: -56px !important; + } + .mt-md-n15 { + margin-top: -60px !important; + } + .mt-md-n16 { + margin-top: -64px !important; + } + .mr-md-n1 { + margin-right: -4px !important; + } + .mr-md-n2 { + margin-right: -8px !important; + } + .mr-md-n3 { + margin-right: -12px !important; + } + .mr-md-n4 { + margin-right: -16px !important; + } + .mr-md-n5 { + margin-right: -20px !important; + } + .mr-md-n6 { + margin-right: -24px !important; + } + .mr-md-n7 { + margin-right: -28px !important; + } + .mr-md-n8 { + margin-right: -32px !important; + } + .mr-md-n9 { + margin-right: -36px !important; + } + .mr-md-n10 { + margin-right: -40px !important; + } + .mr-md-n11 { + margin-right: -44px !important; + } + .mr-md-n12 { + margin-right: -48px !important; + } + .mr-md-n13 { + margin-right: -52px !important; + } + .mr-md-n14 { + margin-right: -56px !important; + } + .mr-md-n15 { + margin-right: -60px !important; + } + .mr-md-n16 { + margin-right: -64px !important; + } + .mb-md-n1 { + margin-bottom: -4px !important; + } + .mb-md-n2 { + margin-bottom: -8px !important; + } + .mb-md-n3 { + margin-bottom: -12px !important; + } + .mb-md-n4 { + margin-bottom: -16px !important; + } + .mb-md-n5 { + margin-bottom: -20px !important; + } + .mb-md-n6 { + margin-bottom: -24px !important; + } + .mb-md-n7 { + margin-bottom: -28px !important; + } + .mb-md-n8 { + margin-bottom: -32px !important; + } + .mb-md-n9 { + margin-bottom: -36px !important; + } + .mb-md-n10 { + margin-bottom: -40px !important; + } + .mb-md-n11 { + margin-bottom: -44px !important; + } + .mb-md-n12 { + margin-bottom: -48px !important; + } + .mb-md-n13 { + margin-bottom: -52px !important; + } + .mb-md-n14 { + margin-bottom: -56px !important; + } + .mb-md-n15 { + margin-bottom: -60px !important; + } + .mb-md-n16 { + margin-bottom: -64px !important; + } + .ml-md-n1 { + margin-left: -4px !important; + } + .ml-md-n2 { + margin-left: -8px !important; + } + .ml-md-n3 { + margin-left: -12px !important; + } + .ml-md-n4 { + margin-left: -16px !important; + } + .ml-md-n5 { + margin-left: -20px !important; + } + .ml-md-n6 { + margin-left: -24px !important; + } + .ml-md-n7 { + margin-left: -28px !important; + } + .ml-md-n8 { + margin-left: -32px !important; + } + .ml-md-n9 { + margin-left: -36px !important; + } + .ml-md-n10 { + margin-left: -40px !important; + } + .ml-md-n11 { + margin-left: -44px !important; + } + .ml-md-n12 { + margin-left: -48px !important; + } + .ml-md-n13 { + margin-left: -52px !important; + } + .ml-md-n14 { + margin-left: -56px !important; + } + .ml-md-n15 { + margin-left: -60px !important; + } + .ml-md-n16 { + margin-left: -64px !important; + } + .ms-md-n1 { + margin-inline-start: -4px !important; + } + .ms-md-n2 { + margin-inline-start: -8px !important; + } + .ms-md-n3 { + margin-inline-start: -12px !important; + } + .ms-md-n4 { + margin-inline-start: -16px !important; + } + .ms-md-n5 { + margin-inline-start: -20px !important; + } + .ms-md-n6 { + margin-inline-start: -24px !important; + } + .ms-md-n7 { + margin-inline-start: -28px !important; + } + .ms-md-n8 { + margin-inline-start: -32px !important; + } + .ms-md-n9 { + margin-inline-start: -36px !important; + } + .ms-md-n10 { + margin-inline-start: -40px !important; + } + .ms-md-n11 { + margin-inline-start: -44px !important; + } + .ms-md-n12 { + margin-inline-start: -48px !important; + } + .ms-md-n13 { + margin-inline-start: -52px !important; + } + .ms-md-n14 { + margin-inline-start: -56px !important; + } + .ms-md-n15 { + margin-inline-start: -60px !important; + } + .ms-md-n16 { + margin-inline-start: -64px !important; + } + .me-md-n1 { + margin-inline-end: -4px !important; + } + .me-md-n2 { + margin-inline-end: -8px !important; + } + .me-md-n3 { + margin-inline-end: -12px !important; + } + .me-md-n4 { + margin-inline-end: -16px !important; + } + .me-md-n5 { + margin-inline-end: -20px !important; + } + .me-md-n6 { + margin-inline-end: -24px !important; + } + .me-md-n7 { + margin-inline-end: -28px !important; + } + .me-md-n8 { + margin-inline-end: -32px !important; + } + .me-md-n9 { + margin-inline-end: -36px !important; + } + .me-md-n10 { + margin-inline-end: -40px !important; + } + .me-md-n11 { + margin-inline-end: -44px !important; + } + .me-md-n12 { + margin-inline-end: -48px !important; + } + .me-md-n13 { + margin-inline-end: -52px !important; + } + .me-md-n14 { + margin-inline-end: -56px !important; + } + .me-md-n15 { + margin-inline-end: -60px !important; + } + .me-md-n16 { + margin-inline-end: -64px !important; + } + .pa-md-0 { + padding: 0px !important; + } + .pa-md-1 { + padding: 4px !important; + } + .pa-md-2 { + padding: 8px !important; + } + .pa-md-3 { + padding: 12px !important; + } + .pa-md-4 { + padding: 16px !important; + } + .pa-md-5 { + padding: 20px !important; + } + .pa-md-6 { + padding: 24px !important; + } + .pa-md-7 { + padding: 28px !important; + } + .pa-md-8 { + padding: 32px !important; + } + .pa-md-9 { + padding: 36px !important; + } + .pa-md-10 { + padding: 40px !important; + } + .pa-md-11 { + padding: 44px !important; + } + .pa-md-12 { + padding: 48px !important; + } + .pa-md-13 { + padding: 52px !important; + } + .pa-md-14 { + padding: 56px !important; + } + .pa-md-15 { + padding: 60px !important; + } + .pa-md-16 { + padding: 64px !important; + } + .px-md-0 { + padding-right: 0px !important; + padding-left: 0px !important; + } + .px-md-1 { + padding-right: 4px !important; + padding-left: 4px !important; + } + .px-md-2 { + padding-right: 8px !important; + padding-left: 8px !important; + } + .px-md-3 { + padding-right: 12px !important; + padding-left: 12px !important; + } + .px-md-4 { + padding-right: 16px !important; + padding-left: 16px !important; + } + .px-md-5 { + padding-right: 20px !important; + padding-left: 20px !important; + } + .px-md-6 { + padding-right: 24px !important; + padding-left: 24px !important; + } + .px-md-7 { + padding-right: 28px !important; + padding-left: 28px !important; + } + .px-md-8 { + padding-right: 32px !important; + padding-left: 32px !important; + } + .px-md-9 { + padding-right: 36px !important; + padding-left: 36px !important; + } + .px-md-10 { + padding-right: 40px !important; + padding-left: 40px !important; + } + .px-md-11 { + padding-right: 44px !important; + padding-left: 44px !important; + } + .px-md-12 { + padding-right: 48px !important; + padding-left: 48px !important; + } + .px-md-13 { + padding-right: 52px !important; + padding-left: 52px !important; + } + .px-md-14 { + padding-right: 56px !important; + padding-left: 56px !important; + } + .px-md-15 { + padding-right: 60px !important; + padding-left: 60px !important; + } + .px-md-16 { + padding-right: 64px !important; + padding-left: 64px !important; + } + .py-md-0 { + padding-top: 0px !important; + padding-bottom: 0px !important; + } + .py-md-1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .py-md-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .py-md-3 { + padding-top: 12px !important; + padding-bottom: 12px !important; + } + .py-md-4 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .py-md-5 { + padding-top: 20px !important; + padding-bottom: 20px !important; + } + .py-md-6 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .py-md-7 { + padding-top: 28px !important; + padding-bottom: 28px !important; + } + .py-md-8 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .py-md-9 { + padding-top: 36px !important; + padding-bottom: 36px !important; + } + .py-md-10 { + padding-top: 40px !important; + padding-bottom: 40px !important; + } + .py-md-11 { + padding-top: 44px !important; + padding-bottom: 44px !important; + } + .py-md-12 { + padding-top: 48px !important; + padding-bottom: 48px !important; + } + .py-md-13 { + padding-top: 52px !important; + padding-bottom: 52px !important; + } + .py-md-14 { + padding-top: 56px !important; + padding-bottom: 56px !important; + } + .py-md-15 { + padding-top: 60px !important; + padding-bottom: 60px !important; + } + .py-md-16 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .pt-md-0 { + padding-top: 0px !important; + } + .pt-md-1 { + padding-top: 4px !important; + } + .pt-md-2 { + padding-top: 8px !important; + } + .pt-md-3 { + padding-top: 12px !important; + } + .pt-md-4 { + padding-top: 16px !important; + } + .pt-md-5 { + padding-top: 20px !important; + } + .pt-md-6 { + padding-top: 24px !important; + } + .pt-md-7 { + padding-top: 28px !important; + } + .pt-md-8 { + padding-top: 32px !important; + } + .pt-md-9 { + padding-top: 36px !important; + } + .pt-md-10 { + padding-top: 40px !important; + } + .pt-md-11 { + padding-top: 44px !important; + } + .pt-md-12 { + padding-top: 48px !important; + } + .pt-md-13 { + padding-top: 52px !important; + } + .pt-md-14 { + padding-top: 56px !important; + } + .pt-md-15 { + padding-top: 60px !important; + } + .pt-md-16 { + padding-top: 64px !important; + } + .pr-md-0 { + padding-right: 0px !important; + } + .pr-md-1 { + padding-right: 4px !important; + } + .pr-md-2 { + padding-right: 8px !important; + } + .pr-md-3 { + padding-right: 12px !important; + } + .pr-md-4 { + padding-right: 16px !important; + } + .pr-md-5 { + padding-right: 20px !important; + } + .pr-md-6 { + padding-right: 24px !important; + } + .pr-md-7 { + padding-right: 28px !important; + } + .pr-md-8 { + padding-right: 32px !important; + } + .pr-md-9 { + padding-right: 36px !important; + } + .pr-md-10 { + padding-right: 40px !important; + } + .pr-md-11 { + padding-right: 44px !important; + } + .pr-md-12 { + padding-right: 48px !important; + } + .pr-md-13 { + padding-right: 52px !important; + } + .pr-md-14 { + padding-right: 56px !important; + } + .pr-md-15 { + padding-right: 60px !important; + } + .pr-md-16 { + padding-right: 64px !important; + } + .pb-md-0 { + padding-bottom: 0px !important; + } + .pb-md-1 { + padding-bottom: 4px !important; + } + .pb-md-2 { + padding-bottom: 8px !important; + } + .pb-md-3 { + padding-bottom: 12px !important; + } + .pb-md-4 { + padding-bottom: 16px !important; + } + .pb-md-5 { + padding-bottom: 20px !important; + } + .pb-md-6 { + padding-bottom: 24px !important; + } + .pb-md-7 { + padding-bottom: 28px !important; + } + .pb-md-8 { + padding-bottom: 32px !important; + } + .pb-md-9 { + padding-bottom: 36px !important; + } + .pb-md-10 { + padding-bottom: 40px !important; + } + .pb-md-11 { + padding-bottom: 44px !important; + } + .pb-md-12 { + padding-bottom: 48px !important; + } + .pb-md-13 { + padding-bottom: 52px !important; + } + .pb-md-14 { + padding-bottom: 56px !important; + } + .pb-md-15 { + padding-bottom: 60px !important; + } + .pb-md-16 { + padding-bottom: 64px !important; + } + .pl-md-0 { + padding-left: 0px !important; + } + .pl-md-1 { + padding-left: 4px !important; + } + .pl-md-2 { + padding-left: 8px !important; + } + .pl-md-3 { + padding-left: 12px !important; + } + .pl-md-4 { + padding-left: 16px !important; + } + .pl-md-5 { + padding-left: 20px !important; + } + .pl-md-6 { + padding-left: 24px !important; + } + .pl-md-7 { + padding-left: 28px !important; + } + .pl-md-8 { + padding-left: 32px !important; + } + .pl-md-9 { + padding-left: 36px !important; + } + .pl-md-10 { + padding-left: 40px !important; + } + .pl-md-11 { + padding-left: 44px !important; + } + .pl-md-12 { + padding-left: 48px !important; + } + .pl-md-13 { + padding-left: 52px !important; + } + .pl-md-14 { + padding-left: 56px !important; + } + .pl-md-15 { + padding-left: 60px !important; + } + .pl-md-16 { + padding-left: 64px !important; + } + .ps-md-0 { + padding-inline-start: 0px !important; + } + .ps-md-1 { + padding-inline-start: 4px !important; + } + .ps-md-2 { + padding-inline-start: 8px !important; + } + .ps-md-3 { + padding-inline-start: 12px !important; + } + .ps-md-4 { + padding-inline-start: 16px !important; + } + .ps-md-5 { + padding-inline-start: 20px !important; + } + .ps-md-6 { + padding-inline-start: 24px !important; + } + .ps-md-7 { + padding-inline-start: 28px !important; + } + .ps-md-8 { + padding-inline-start: 32px !important; + } + .ps-md-9 { + padding-inline-start: 36px !important; + } + .ps-md-10 { + padding-inline-start: 40px !important; + } + .ps-md-11 { + padding-inline-start: 44px !important; + } + .ps-md-12 { + padding-inline-start: 48px !important; + } + .ps-md-13 { + padding-inline-start: 52px !important; + } + .ps-md-14 { + padding-inline-start: 56px !important; + } + .ps-md-15 { + padding-inline-start: 60px !important; + } + .ps-md-16 { + padding-inline-start: 64px !important; + } + .pe-md-0 { + padding-inline-end: 0px !important; + } + .pe-md-1 { + padding-inline-end: 4px !important; + } + .pe-md-2 { + padding-inline-end: 8px !important; + } + .pe-md-3 { + padding-inline-end: 12px !important; + } + .pe-md-4 { + padding-inline-end: 16px !important; + } + .pe-md-5 { + padding-inline-end: 20px !important; + } + .pe-md-6 { + padding-inline-end: 24px !important; + } + .pe-md-7 { + padding-inline-end: 28px !important; + } + .pe-md-8 { + padding-inline-end: 32px !important; + } + .pe-md-9 { + padding-inline-end: 36px !important; + } + .pe-md-10 { + padding-inline-end: 40px !important; + } + .pe-md-11 { + padding-inline-end: 44px !important; + } + .pe-md-12 { + padding-inline-end: 48px !important; + } + .pe-md-13 { + padding-inline-end: 52px !important; + } + .pe-md-14 { + padding-inline-end: 56px !important; + } + .pe-md-15 { + padding-inline-end: 60px !important; + } + .pe-md-16 { + padding-inline-end: 64px !important; + } + .text-md-left { + text-align: left !important; + } + .text-md-right { + text-align: right !important; + } + .text-md-center { + text-align: center !important; + } + .text-md-justify { + text-align: justify !important; + } + .text-md-start { + text-align: start !important; + } + .text-md-end { + text-align: end !important; + } + .text-md-h1 { + font-size: 6rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.015625em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-h2 { + font-size: 3.75rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.0083333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-h3 { + font-size: 3rem !important; + font-weight: 400; + line-height: 1.05; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-h4 { + font-size: 2.125rem !important; + font-weight: 400; + line-height: 1.175; + letter-spacing: 0.0073529412em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-h5 { + font-size: 1.5rem !important; + font-weight: 400; + line-height: 1.333; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-h6 { + font-size: 1.25rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-subtitle-1 { + font-size: 1rem !important; + font-weight: normal; + line-height: 1.75; + letter-spacing: 0.009375em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-subtitle-2 { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0071428571em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-body-1 { + font-size: 1rem !important; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.03125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-body-2 { + font-size: 0.875rem !important; + font-weight: 400; + line-height: 1.425; + letter-spacing: 0.0178571429em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-button { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 2.6; + letter-spacing: 0.0892857143em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .text-md-caption { + font-size: 0.75rem !important; + font-weight: 400; + line-height: 1.667; + letter-spacing: 0.0333333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-md-overline { + font-size: 0.75rem !important; + font-weight: 500; + line-height: 2.667; + letter-spacing: 0.1666666667em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .h-md-auto { + height: auto !important; + } + .h-md-screen { + height: 100vh !important; + } + .h-md-0 { + height: 0 !important; + } + .h-md-25 { + height: 25% !important; + } + .h-md-50 { + height: 50% !important; + } + .h-md-75 { + height: 75% !important; + } + .h-md-100 { + height: 100% !important; + } + .w-md-auto { + width: auto !important; + } + .w-md-0 { + width: 0 !important; + } + .w-md-25 { + width: 25% !important; + } + .w-md-33 { + width: 33% !important; + } + .w-md-50 { + width: 50% !important; + } + .w-md-66 { + width: 66% !important; + } + .w-md-75 { + width: 75% !important; + } + .w-md-100 { + width: 100% !important; + } +} +@media (min-width: 1280px) { + .d-lg-none { + display: none !important; + } + .d-lg-inline { + display: inline !important; + } + .d-lg-inline-block { + display: inline-block !important; + } + .d-lg-block { + display: block !important; + } + .d-lg-table { + display: table !important; + } + .d-lg-table-row { + display: table-row !important; + } + .d-lg-table-cell { + display: table-cell !important; + } + .d-lg-flex { + display: flex !important; + } + .d-lg-inline-flex { + display: inline-flex !important; + } + .float-lg-none { + float: none !important; + } + .float-lg-left { + float: left !important; + } + .float-lg-right { + float: right !important; + } + .v-locale--is-rtl .float-lg-end { + float: left !important; + } + .v-locale--is-rtl .float-lg-start { + float: right !important; + } + .v-locale--is-ltr .float-lg-end { + float: right !important; + } + .v-locale--is-ltr .float-lg-start { + float: left !important; + } + .flex-lg-fill { + flex: 1 1 auto !important; + } + .flex-lg-1-1 { + flex: 1 1 auto !important; + } + .flex-lg-1-0 { + flex: 1 0 auto !important; + } + .flex-lg-0-1 { + flex: 0 1 auto !important; + } + .flex-lg-0-0 { + flex: 0 0 auto !important; + } + .flex-lg-1-1-100 { + flex: 1 1 100% !important; + } + .flex-lg-1-0-100 { + flex: 1 0 100% !important; + } + .flex-lg-0-1-100 { + flex: 0 1 100% !important; + } + .flex-lg-0-0-100 { + flex: 0 0 100% !important; + } + .flex-lg-1-1-0 { + flex: 1 1 0 !important; + } + .flex-lg-1-0-0 { + flex: 1 0 0 !important; + } + .flex-lg-0-1-0 { + flex: 0 1 0 !important; + } + .flex-lg-0-0-0 { + flex: 0 0 0 !important; + } + .flex-lg-row { + flex-direction: row !important; + } + .flex-lg-column { + flex-direction: column !important; + } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; + } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; + } + .flex-lg-grow-0 { + flex-grow: 0 !important; + } + .flex-lg-grow-1 { + flex-grow: 1 !important; + } + .flex-lg-shrink-0 { + flex-shrink: 0 !important; + } + .flex-lg-shrink-1 { + flex-shrink: 1 !important; + } + .flex-lg-wrap { + flex-wrap: wrap !important; + } + .flex-lg-nowrap { + flex-wrap: nowrap !important; + } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-lg-start { + justify-content: flex-start !important; + } + .justify-lg-end { + justify-content: flex-end !important; + } + .justify-lg-center { + justify-content: center !important; + } + .justify-lg-space-between { + justify-content: space-between !important; + } + .justify-lg-space-around { + justify-content: space-around !important; + } + .justify-lg-space-evenly { + justify-content: space-evenly !important; + } + .align-lg-start { + align-items: flex-start !important; + } + .align-lg-end { + align-items: flex-end !important; + } + .align-lg-center { + align-items: center !important; + } + .align-lg-baseline { + align-items: baseline !important; + } + .align-lg-stretch { + align-items: stretch !important; + } + .align-content-lg-start { + align-content: flex-start !important; + } + .align-content-lg-end { + align-content: flex-end !important; + } + .align-content-lg-center { + align-content: center !important; + } + .align-content-lg-space-between { + align-content: space-between !important; + } + .align-content-lg-space-around { + align-content: space-around !important; + } + .align-content-lg-space-evenly { + align-content: space-evenly !important; + } + .align-content-lg-stretch { + align-content: stretch !important; + } + .align-self-lg-auto { + align-self: auto !important; + } + .align-self-lg-start { + align-self: flex-start !important; + } + .align-self-lg-end { + align-self: flex-end !important; + } + .align-self-lg-center { + align-self: center !important; + } + .align-self-lg-baseline { + align-self: baseline !important; + } + .align-self-lg-stretch { + align-self: stretch !important; + } + .order-lg-first { + order: -1 !important; + } + .order-lg-0 { + order: 0 !important; + } + .order-lg-1 { + order: 1 !important; + } + .order-lg-2 { + order: 2 !important; + } + .order-lg-3 { + order: 3 !important; + } + .order-lg-4 { + order: 4 !important; + } + .order-lg-5 { + order: 5 !important; + } + .order-lg-6 { + order: 6 !important; + } + .order-lg-7 { + order: 7 !important; + } + .order-lg-8 { + order: 8 !important; + } + .order-lg-9 { + order: 9 !important; + } + .order-lg-10 { + order: 10 !important; + } + .order-lg-11 { + order: 11 !important; + } + .order-lg-12 { + order: 12 !important; + } + .order-lg-last { + order: 13 !important; + } + .ga-lg-0 { + gap: 0px !important; + } + .ga-lg-1 { + gap: 4px !important; + } + .ga-lg-2 { + gap: 8px !important; + } + .ga-lg-3 { + gap: 12px !important; + } + .ga-lg-4 { + gap: 16px !important; + } + .ga-lg-5 { + gap: 20px !important; + } + .ga-lg-6 { + gap: 24px !important; + } + .ga-lg-7 { + gap: 28px !important; + } + .ga-lg-8 { + gap: 32px !important; + } + .ga-lg-9 { + gap: 36px !important; + } + .ga-lg-10 { + gap: 40px !important; + } + .ga-lg-11 { + gap: 44px !important; + } + .ga-lg-12 { + gap: 48px !important; + } + .ga-lg-13 { + gap: 52px !important; + } + .ga-lg-14 { + gap: 56px !important; + } + .ga-lg-15 { + gap: 60px !important; + } + .ga-lg-16 { + gap: 64px !important; + } + .ga-lg-auto { + gap: auto !important; + } + .gr-lg-0 { + row-gap: 0px !important; + } + .gr-lg-1 { + row-gap: 4px !important; + } + .gr-lg-2 { + row-gap: 8px !important; + } + .gr-lg-3 { + row-gap: 12px !important; + } + .gr-lg-4 { + row-gap: 16px !important; + } + .gr-lg-5 { + row-gap: 20px !important; + } + .gr-lg-6 { + row-gap: 24px !important; + } + .gr-lg-7 { + row-gap: 28px !important; + } + .gr-lg-8 { + row-gap: 32px !important; + } + .gr-lg-9 { + row-gap: 36px !important; + } + .gr-lg-10 { + row-gap: 40px !important; + } + .gr-lg-11 { + row-gap: 44px !important; + } + .gr-lg-12 { + row-gap: 48px !important; + } + .gr-lg-13 { + row-gap: 52px !important; + } + .gr-lg-14 { + row-gap: 56px !important; + } + .gr-lg-15 { + row-gap: 60px !important; + } + .gr-lg-16 { + row-gap: 64px !important; + } + .gr-lg-auto { + row-gap: auto !important; + } + .gc-lg-0 { + column-gap: 0px !important; + } + .gc-lg-1 { + column-gap: 4px !important; + } + .gc-lg-2 { + column-gap: 8px !important; + } + .gc-lg-3 { + column-gap: 12px !important; + } + .gc-lg-4 { + column-gap: 16px !important; + } + .gc-lg-5 { + column-gap: 20px !important; + } + .gc-lg-6 { + column-gap: 24px !important; + } + .gc-lg-7 { + column-gap: 28px !important; + } + .gc-lg-8 { + column-gap: 32px !important; + } + .gc-lg-9 { + column-gap: 36px !important; + } + .gc-lg-10 { + column-gap: 40px !important; + } + .gc-lg-11 { + column-gap: 44px !important; + } + .gc-lg-12 { + column-gap: 48px !important; + } + .gc-lg-13 { + column-gap: 52px !important; + } + .gc-lg-14 { + column-gap: 56px !important; + } + .gc-lg-15 { + column-gap: 60px !important; + } + .gc-lg-16 { + column-gap: 64px !important; + } + .gc-lg-auto { + column-gap: auto !important; + } + .ma-lg-0 { + margin: 0px !important; + } + .ma-lg-1 { + margin: 4px !important; + } + .ma-lg-2 { + margin: 8px !important; + } + .ma-lg-3 { + margin: 12px !important; + } + .ma-lg-4 { + margin: 16px !important; + } + .ma-lg-5 { + margin: 20px !important; + } + .ma-lg-6 { + margin: 24px !important; + } + .ma-lg-7 { + margin: 28px !important; + } + .ma-lg-8 { + margin: 32px !important; + } + .ma-lg-9 { + margin: 36px !important; + } + .ma-lg-10 { + margin: 40px !important; + } + .ma-lg-11 { + margin: 44px !important; + } + .ma-lg-12 { + margin: 48px !important; + } + .ma-lg-13 { + margin: 52px !important; + } + .ma-lg-14 { + margin: 56px !important; + } + .ma-lg-15 { + margin: 60px !important; + } + .ma-lg-16 { + margin: 64px !important; + } + .ma-lg-auto { + margin: auto !important; + } + .mx-lg-0 { + margin-right: 0px !important; + margin-left: 0px !important; + } + .mx-lg-1 { + margin-right: 4px !important; + margin-left: 4px !important; + } + .mx-lg-2 { + margin-right: 8px !important; + margin-left: 8px !important; + } + .mx-lg-3 { + margin-right: 12px !important; + margin-left: 12px !important; + } + .mx-lg-4 { + margin-right: 16px !important; + margin-left: 16px !important; + } + .mx-lg-5 { + margin-right: 20px !important; + margin-left: 20px !important; + } + .mx-lg-6 { + margin-right: 24px !important; + margin-left: 24px !important; + } + .mx-lg-7 { + margin-right: 28px !important; + margin-left: 28px !important; + } + .mx-lg-8 { + margin-right: 32px !important; + margin-left: 32px !important; + } + .mx-lg-9 { + margin-right: 36px !important; + margin-left: 36px !important; + } + .mx-lg-10 { + margin-right: 40px !important; + margin-left: 40px !important; + } + .mx-lg-11 { + margin-right: 44px !important; + margin-left: 44px !important; + } + .mx-lg-12 { + margin-right: 48px !important; + margin-left: 48px !important; + } + .mx-lg-13 { + margin-right: 52px !important; + margin-left: 52px !important; + } + .mx-lg-14 { + margin-right: 56px !important; + margin-left: 56px !important; + } + .mx-lg-15 { + margin-right: 60px !important; + margin-left: 60px !important; + } + .mx-lg-16 { + margin-right: 64px !important; + margin-left: 64px !important; + } + .mx-lg-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-lg-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + .my-lg-1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .my-lg-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .my-lg-3 { + margin-top: 12px !important; + margin-bottom: 12px !important; + } + .my-lg-4 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .my-lg-5 { + margin-top: 20px !important; + margin-bottom: 20px !important; + } + .my-lg-6 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .my-lg-7 { + margin-top: 28px !important; + margin-bottom: 28px !important; + } + .my-lg-8 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .my-lg-9 { + margin-top: 36px !important; + margin-bottom: 36px !important; + } + .my-lg-10 { + margin-top: 40px !important; + margin-bottom: 40px !important; + } + .my-lg-11 { + margin-top: 44px !important; + margin-bottom: 44px !important; + } + .my-lg-12 { + margin-top: 48px !important; + margin-bottom: 48px !important; + } + .my-lg-13 { + margin-top: 52px !important; + margin-bottom: 52px !important; + } + .my-lg-14 { + margin-top: 56px !important; + margin-bottom: 56px !important; + } + .my-lg-15 { + margin-top: 60px !important; + margin-bottom: 60px !important; + } + .my-lg-16 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .my-lg-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-lg-0 { + margin-top: 0px !important; + } + .mt-lg-1 { + margin-top: 4px !important; + } + .mt-lg-2 { + margin-top: 8px !important; + } + .mt-lg-3 { + margin-top: 12px !important; + } + .mt-lg-4 { + margin-top: 16px !important; + } + .mt-lg-5 { + margin-top: 20px !important; + } + .mt-lg-6 { + margin-top: 24px !important; + } + .mt-lg-7 { + margin-top: 28px !important; + } + .mt-lg-8 { + margin-top: 32px !important; + } + .mt-lg-9 { + margin-top: 36px !important; + } + .mt-lg-10 { + margin-top: 40px !important; + } + .mt-lg-11 { + margin-top: 44px !important; + } + .mt-lg-12 { + margin-top: 48px !important; + } + .mt-lg-13 { + margin-top: 52px !important; + } + .mt-lg-14 { + margin-top: 56px !important; + } + .mt-lg-15 { + margin-top: 60px !important; + } + .mt-lg-16 { + margin-top: 64px !important; + } + .mt-lg-auto { + margin-top: auto !important; + } + .mr-lg-0 { + margin-right: 0px !important; + } + .mr-lg-1 { + margin-right: 4px !important; + } + .mr-lg-2 { + margin-right: 8px !important; + } + .mr-lg-3 { + margin-right: 12px !important; + } + .mr-lg-4 { + margin-right: 16px !important; + } + .mr-lg-5 { + margin-right: 20px !important; + } + .mr-lg-6 { + margin-right: 24px !important; + } + .mr-lg-7 { + margin-right: 28px !important; + } + .mr-lg-8 { + margin-right: 32px !important; + } + .mr-lg-9 { + margin-right: 36px !important; + } + .mr-lg-10 { + margin-right: 40px !important; + } + .mr-lg-11 { + margin-right: 44px !important; + } + .mr-lg-12 { + margin-right: 48px !important; + } + .mr-lg-13 { + margin-right: 52px !important; + } + .mr-lg-14 { + margin-right: 56px !important; + } + .mr-lg-15 { + margin-right: 60px !important; + } + .mr-lg-16 { + margin-right: 64px !important; + } + .mr-lg-auto { + margin-right: auto !important; + } + .mb-lg-0 { + margin-bottom: 0px !important; + } + .mb-lg-1 { + margin-bottom: 4px !important; + } + .mb-lg-2 { + margin-bottom: 8px !important; + } + .mb-lg-3 { + margin-bottom: 12px !important; + } + .mb-lg-4 { + margin-bottom: 16px !important; + } + .mb-lg-5 { + margin-bottom: 20px !important; + } + .mb-lg-6 { + margin-bottom: 24px !important; + } + .mb-lg-7 { + margin-bottom: 28px !important; + } + .mb-lg-8 { + margin-bottom: 32px !important; + } + .mb-lg-9 { + margin-bottom: 36px !important; + } + .mb-lg-10 { + margin-bottom: 40px !important; + } + .mb-lg-11 { + margin-bottom: 44px !important; + } + .mb-lg-12 { + margin-bottom: 48px !important; + } + .mb-lg-13 { + margin-bottom: 52px !important; + } + .mb-lg-14 { + margin-bottom: 56px !important; + } + .mb-lg-15 { + margin-bottom: 60px !important; + } + .mb-lg-16 { + margin-bottom: 64px !important; + } + .mb-lg-auto { + margin-bottom: auto !important; + } + .ml-lg-0 { + margin-left: 0px !important; + } + .ml-lg-1 { + margin-left: 4px !important; + } + .ml-lg-2 { + margin-left: 8px !important; + } + .ml-lg-3 { + margin-left: 12px !important; + } + .ml-lg-4 { + margin-left: 16px !important; + } + .ml-lg-5 { + margin-left: 20px !important; + } + .ml-lg-6 { + margin-left: 24px !important; + } + .ml-lg-7 { + margin-left: 28px !important; + } + .ml-lg-8 { + margin-left: 32px !important; + } + .ml-lg-9 { + margin-left: 36px !important; + } + .ml-lg-10 { + margin-left: 40px !important; + } + .ml-lg-11 { + margin-left: 44px !important; + } + .ml-lg-12 { + margin-left: 48px !important; + } + .ml-lg-13 { + margin-left: 52px !important; + } + .ml-lg-14 { + margin-left: 56px !important; + } + .ml-lg-15 { + margin-left: 60px !important; + } + .ml-lg-16 { + margin-left: 64px !important; + } + .ml-lg-auto { + margin-left: auto !important; + } + .ms-lg-0 { + margin-inline-start: 0px !important; + } + .ms-lg-1 { + margin-inline-start: 4px !important; + } + .ms-lg-2 { + margin-inline-start: 8px !important; + } + .ms-lg-3 { + margin-inline-start: 12px !important; + } + .ms-lg-4 { + margin-inline-start: 16px !important; + } + .ms-lg-5 { + margin-inline-start: 20px !important; + } + .ms-lg-6 { + margin-inline-start: 24px !important; + } + .ms-lg-7 { + margin-inline-start: 28px !important; + } + .ms-lg-8 { + margin-inline-start: 32px !important; + } + .ms-lg-9 { + margin-inline-start: 36px !important; + } + .ms-lg-10 { + margin-inline-start: 40px !important; + } + .ms-lg-11 { + margin-inline-start: 44px !important; + } + .ms-lg-12 { + margin-inline-start: 48px !important; + } + .ms-lg-13 { + margin-inline-start: 52px !important; + } + .ms-lg-14 { + margin-inline-start: 56px !important; + } + .ms-lg-15 { + margin-inline-start: 60px !important; + } + .ms-lg-16 { + margin-inline-start: 64px !important; + } + .ms-lg-auto { + margin-inline-start: auto !important; + } + .me-lg-0 { + margin-inline-end: 0px !important; + } + .me-lg-1 { + margin-inline-end: 4px !important; + } + .me-lg-2 { + margin-inline-end: 8px !important; + } + .me-lg-3 { + margin-inline-end: 12px !important; + } + .me-lg-4 { + margin-inline-end: 16px !important; + } + .me-lg-5 { + margin-inline-end: 20px !important; + } + .me-lg-6 { + margin-inline-end: 24px !important; + } + .me-lg-7 { + margin-inline-end: 28px !important; + } + .me-lg-8 { + margin-inline-end: 32px !important; + } + .me-lg-9 { + margin-inline-end: 36px !important; + } + .me-lg-10 { + margin-inline-end: 40px !important; + } + .me-lg-11 { + margin-inline-end: 44px !important; + } + .me-lg-12 { + margin-inline-end: 48px !important; + } + .me-lg-13 { + margin-inline-end: 52px !important; + } + .me-lg-14 { + margin-inline-end: 56px !important; + } + .me-lg-15 { + margin-inline-end: 60px !important; + } + .me-lg-16 { + margin-inline-end: 64px !important; + } + .me-lg-auto { + margin-inline-end: auto !important; + } + .ma-lg-n1 { + margin: -4px !important; + } + .ma-lg-n2 { + margin: -8px !important; + } + .ma-lg-n3 { + margin: -12px !important; + } + .ma-lg-n4 { + margin: -16px !important; + } + .ma-lg-n5 { + margin: -20px !important; + } + .ma-lg-n6 { + margin: -24px !important; + } + .ma-lg-n7 { + margin: -28px !important; + } + .ma-lg-n8 { + margin: -32px !important; + } + .ma-lg-n9 { + margin: -36px !important; + } + .ma-lg-n10 { + margin: -40px !important; + } + .ma-lg-n11 { + margin: -44px !important; + } + .ma-lg-n12 { + margin: -48px !important; + } + .ma-lg-n13 { + margin: -52px !important; + } + .ma-lg-n14 { + margin: -56px !important; + } + .ma-lg-n15 { + margin: -60px !important; + } + .ma-lg-n16 { + margin: -64px !important; + } + .mx-lg-n1 { + margin-right: -4px !important; + margin-left: -4px !important; + } + .mx-lg-n2 { + margin-right: -8px !important; + margin-left: -8px !important; + } + .mx-lg-n3 { + margin-right: -12px !important; + margin-left: -12px !important; + } + .mx-lg-n4 { + margin-right: -16px !important; + margin-left: -16px !important; + } + .mx-lg-n5 { + margin-right: -20px !important; + margin-left: -20px !important; + } + .mx-lg-n6 { + margin-right: -24px !important; + margin-left: -24px !important; + } + .mx-lg-n7 { + margin-right: -28px !important; + margin-left: -28px !important; + } + .mx-lg-n8 { + margin-right: -32px !important; + margin-left: -32px !important; + } + .mx-lg-n9 { + margin-right: -36px !important; + margin-left: -36px !important; + } + .mx-lg-n10 { + margin-right: -40px !important; + margin-left: -40px !important; + } + .mx-lg-n11 { + margin-right: -44px !important; + margin-left: -44px !important; + } + .mx-lg-n12 { + margin-right: -48px !important; + margin-left: -48px !important; + } + .mx-lg-n13 { + margin-right: -52px !important; + margin-left: -52px !important; + } + .mx-lg-n14 { + margin-right: -56px !important; + margin-left: -56px !important; + } + .mx-lg-n15 { + margin-right: -60px !important; + margin-left: -60px !important; + } + .mx-lg-n16 { + margin-right: -64px !important; + margin-left: -64px !important; + } + .my-lg-n1 { + margin-top: -4px !important; + margin-bottom: -4px !important; + } + .my-lg-n2 { + margin-top: -8px !important; + margin-bottom: -8px !important; + } + .my-lg-n3 { + margin-top: -12px !important; + margin-bottom: -12px !important; + } + .my-lg-n4 { + margin-top: -16px !important; + margin-bottom: -16px !important; + } + .my-lg-n5 { + margin-top: -20px !important; + margin-bottom: -20px !important; + } + .my-lg-n6 { + margin-top: -24px !important; + margin-bottom: -24px !important; + } + .my-lg-n7 { + margin-top: -28px !important; + margin-bottom: -28px !important; + } + .my-lg-n8 { + margin-top: -32px !important; + margin-bottom: -32px !important; + } + .my-lg-n9 { + margin-top: -36px !important; + margin-bottom: -36px !important; + } + .my-lg-n10 { + margin-top: -40px !important; + margin-bottom: -40px !important; + } + .my-lg-n11 { + margin-top: -44px !important; + margin-bottom: -44px !important; + } + .my-lg-n12 { + margin-top: -48px !important; + margin-bottom: -48px !important; + } + .my-lg-n13 { + margin-top: -52px !important; + margin-bottom: -52px !important; + } + .my-lg-n14 { + margin-top: -56px !important; + margin-bottom: -56px !important; + } + .my-lg-n15 { + margin-top: -60px !important; + margin-bottom: -60px !important; + } + .my-lg-n16 { + margin-top: -64px !important; + margin-bottom: -64px !important; + } + .mt-lg-n1 { + margin-top: -4px !important; + } + .mt-lg-n2 { + margin-top: -8px !important; + } + .mt-lg-n3 { + margin-top: -12px !important; + } + .mt-lg-n4 { + margin-top: -16px !important; + } + .mt-lg-n5 { + margin-top: -20px !important; + } + .mt-lg-n6 { + margin-top: -24px !important; + } + .mt-lg-n7 { + margin-top: -28px !important; + } + .mt-lg-n8 { + margin-top: -32px !important; + } + .mt-lg-n9 { + margin-top: -36px !important; + } + .mt-lg-n10 { + margin-top: -40px !important; + } + .mt-lg-n11 { + margin-top: -44px !important; + } + .mt-lg-n12 { + margin-top: -48px !important; + } + .mt-lg-n13 { + margin-top: -52px !important; + } + .mt-lg-n14 { + margin-top: -56px !important; + } + .mt-lg-n15 { + margin-top: -60px !important; + } + .mt-lg-n16 { + margin-top: -64px !important; + } + .mr-lg-n1 { + margin-right: -4px !important; + } + .mr-lg-n2 { + margin-right: -8px !important; + } + .mr-lg-n3 { + margin-right: -12px !important; + } + .mr-lg-n4 { + margin-right: -16px !important; + } + .mr-lg-n5 { + margin-right: -20px !important; + } + .mr-lg-n6 { + margin-right: -24px !important; + } + .mr-lg-n7 { + margin-right: -28px !important; + } + .mr-lg-n8 { + margin-right: -32px !important; + } + .mr-lg-n9 { + margin-right: -36px !important; + } + .mr-lg-n10 { + margin-right: -40px !important; + } + .mr-lg-n11 { + margin-right: -44px !important; + } + .mr-lg-n12 { + margin-right: -48px !important; + } + .mr-lg-n13 { + margin-right: -52px !important; + } + .mr-lg-n14 { + margin-right: -56px !important; + } + .mr-lg-n15 { + margin-right: -60px !important; + } + .mr-lg-n16 { + margin-right: -64px !important; + } + .mb-lg-n1 { + margin-bottom: -4px !important; + } + .mb-lg-n2 { + margin-bottom: -8px !important; + } + .mb-lg-n3 { + margin-bottom: -12px !important; + } + .mb-lg-n4 { + margin-bottom: -16px !important; + } + .mb-lg-n5 { + margin-bottom: -20px !important; + } + .mb-lg-n6 { + margin-bottom: -24px !important; + } + .mb-lg-n7 { + margin-bottom: -28px !important; + } + .mb-lg-n8 { + margin-bottom: -32px !important; + } + .mb-lg-n9 { + margin-bottom: -36px !important; + } + .mb-lg-n10 { + margin-bottom: -40px !important; + } + .mb-lg-n11 { + margin-bottom: -44px !important; + } + .mb-lg-n12 { + margin-bottom: -48px !important; + } + .mb-lg-n13 { + margin-bottom: -52px !important; + } + .mb-lg-n14 { + margin-bottom: -56px !important; + } + .mb-lg-n15 { + margin-bottom: -60px !important; + } + .mb-lg-n16 { + margin-bottom: -64px !important; + } + .ml-lg-n1 { + margin-left: -4px !important; + } + .ml-lg-n2 { + margin-left: -8px !important; + } + .ml-lg-n3 { + margin-left: -12px !important; + } + .ml-lg-n4 { + margin-left: -16px !important; + } + .ml-lg-n5 { + margin-left: -20px !important; + } + .ml-lg-n6 { + margin-left: -24px !important; + } + .ml-lg-n7 { + margin-left: -28px !important; + } + .ml-lg-n8 { + margin-left: -32px !important; + } + .ml-lg-n9 { + margin-left: -36px !important; + } + .ml-lg-n10 { + margin-left: -40px !important; + } + .ml-lg-n11 { + margin-left: -44px !important; + } + .ml-lg-n12 { + margin-left: -48px !important; + } + .ml-lg-n13 { + margin-left: -52px !important; + } + .ml-lg-n14 { + margin-left: -56px !important; + } + .ml-lg-n15 { + margin-left: -60px !important; + } + .ml-lg-n16 { + margin-left: -64px !important; + } + .ms-lg-n1 { + margin-inline-start: -4px !important; + } + .ms-lg-n2 { + margin-inline-start: -8px !important; + } + .ms-lg-n3 { + margin-inline-start: -12px !important; + } + .ms-lg-n4 { + margin-inline-start: -16px !important; + } + .ms-lg-n5 { + margin-inline-start: -20px !important; + } + .ms-lg-n6 { + margin-inline-start: -24px !important; + } + .ms-lg-n7 { + margin-inline-start: -28px !important; + } + .ms-lg-n8 { + margin-inline-start: -32px !important; + } + .ms-lg-n9 { + margin-inline-start: -36px !important; + } + .ms-lg-n10 { + margin-inline-start: -40px !important; + } + .ms-lg-n11 { + margin-inline-start: -44px !important; + } + .ms-lg-n12 { + margin-inline-start: -48px !important; + } + .ms-lg-n13 { + margin-inline-start: -52px !important; + } + .ms-lg-n14 { + margin-inline-start: -56px !important; + } + .ms-lg-n15 { + margin-inline-start: -60px !important; + } + .ms-lg-n16 { + margin-inline-start: -64px !important; + } + .me-lg-n1 { + margin-inline-end: -4px !important; + } + .me-lg-n2 { + margin-inline-end: -8px !important; + } + .me-lg-n3 { + margin-inline-end: -12px !important; + } + .me-lg-n4 { + margin-inline-end: -16px !important; + } + .me-lg-n5 { + margin-inline-end: -20px !important; + } + .me-lg-n6 { + margin-inline-end: -24px !important; + } + .me-lg-n7 { + margin-inline-end: -28px !important; + } + .me-lg-n8 { + margin-inline-end: -32px !important; + } + .me-lg-n9 { + margin-inline-end: -36px !important; + } + .me-lg-n10 { + margin-inline-end: -40px !important; + } + .me-lg-n11 { + margin-inline-end: -44px !important; + } + .me-lg-n12 { + margin-inline-end: -48px !important; + } + .me-lg-n13 { + margin-inline-end: -52px !important; + } + .me-lg-n14 { + margin-inline-end: -56px !important; + } + .me-lg-n15 { + margin-inline-end: -60px !important; + } + .me-lg-n16 { + margin-inline-end: -64px !important; + } + .pa-lg-0 { + padding: 0px !important; + } + .pa-lg-1 { + padding: 4px !important; + } + .pa-lg-2 { + padding: 8px !important; + } + .pa-lg-3 { + padding: 12px !important; + } + .pa-lg-4 { + padding: 16px !important; + } + .pa-lg-5 { + padding: 20px !important; + } + .pa-lg-6 { + padding: 24px !important; + } + .pa-lg-7 { + padding: 28px !important; + } + .pa-lg-8 { + padding: 32px !important; + } + .pa-lg-9 { + padding: 36px !important; + } + .pa-lg-10 { + padding: 40px !important; + } + .pa-lg-11 { + padding: 44px !important; + } + .pa-lg-12 { + padding: 48px !important; + } + .pa-lg-13 { + padding: 52px !important; + } + .pa-lg-14 { + padding: 56px !important; + } + .pa-lg-15 { + padding: 60px !important; + } + .pa-lg-16 { + padding: 64px !important; + } + .px-lg-0 { + padding-right: 0px !important; + padding-left: 0px !important; + } + .px-lg-1 { + padding-right: 4px !important; + padding-left: 4px !important; + } + .px-lg-2 { + padding-right: 8px !important; + padding-left: 8px !important; + } + .px-lg-3 { + padding-right: 12px !important; + padding-left: 12px !important; + } + .px-lg-4 { + padding-right: 16px !important; + padding-left: 16px !important; + } + .px-lg-5 { + padding-right: 20px !important; + padding-left: 20px !important; + } + .px-lg-6 { + padding-right: 24px !important; + padding-left: 24px !important; + } + .px-lg-7 { + padding-right: 28px !important; + padding-left: 28px !important; + } + .px-lg-8 { + padding-right: 32px !important; + padding-left: 32px !important; + } + .px-lg-9 { + padding-right: 36px !important; + padding-left: 36px !important; + } + .px-lg-10 { + padding-right: 40px !important; + padding-left: 40px !important; + } + .px-lg-11 { + padding-right: 44px !important; + padding-left: 44px !important; + } + .px-lg-12 { + padding-right: 48px !important; + padding-left: 48px !important; + } + .px-lg-13 { + padding-right: 52px !important; + padding-left: 52px !important; + } + .px-lg-14 { + padding-right: 56px !important; + padding-left: 56px !important; + } + .px-lg-15 { + padding-right: 60px !important; + padding-left: 60px !important; + } + .px-lg-16 { + padding-right: 64px !important; + padding-left: 64px !important; + } + .py-lg-0 { + padding-top: 0px !important; + padding-bottom: 0px !important; + } + .py-lg-1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .py-lg-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .py-lg-3 { + padding-top: 12px !important; + padding-bottom: 12px !important; + } + .py-lg-4 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .py-lg-5 { + padding-top: 20px !important; + padding-bottom: 20px !important; + } + .py-lg-6 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .py-lg-7 { + padding-top: 28px !important; + padding-bottom: 28px !important; + } + .py-lg-8 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .py-lg-9 { + padding-top: 36px !important; + padding-bottom: 36px !important; + } + .py-lg-10 { + padding-top: 40px !important; + padding-bottom: 40px !important; + } + .py-lg-11 { + padding-top: 44px !important; + padding-bottom: 44px !important; + } + .py-lg-12 { + padding-top: 48px !important; + padding-bottom: 48px !important; + } + .py-lg-13 { + padding-top: 52px !important; + padding-bottom: 52px !important; + } + .py-lg-14 { + padding-top: 56px !important; + padding-bottom: 56px !important; + } + .py-lg-15 { + padding-top: 60px !important; + padding-bottom: 60px !important; + } + .py-lg-16 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .pt-lg-0 { + padding-top: 0px !important; + } + .pt-lg-1 { + padding-top: 4px !important; + } + .pt-lg-2 { + padding-top: 8px !important; + } + .pt-lg-3 { + padding-top: 12px !important; + } + .pt-lg-4 { + padding-top: 16px !important; + } + .pt-lg-5 { + padding-top: 20px !important; + } + .pt-lg-6 { + padding-top: 24px !important; + } + .pt-lg-7 { + padding-top: 28px !important; + } + .pt-lg-8 { + padding-top: 32px !important; + } + .pt-lg-9 { + padding-top: 36px !important; + } + .pt-lg-10 { + padding-top: 40px !important; + } + .pt-lg-11 { + padding-top: 44px !important; + } + .pt-lg-12 { + padding-top: 48px !important; + } + .pt-lg-13 { + padding-top: 52px !important; + } + .pt-lg-14 { + padding-top: 56px !important; + } + .pt-lg-15 { + padding-top: 60px !important; + } + .pt-lg-16 { + padding-top: 64px !important; + } + .pr-lg-0 { + padding-right: 0px !important; + } + .pr-lg-1 { + padding-right: 4px !important; + } + .pr-lg-2 { + padding-right: 8px !important; + } + .pr-lg-3 { + padding-right: 12px !important; + } + .pr-lg-4 { + padding-right: 16px !important; + } + .pr-lg-5 { + padding-right: 20px !important; + } + .pr-lg-6 { + padding-right: 24px !important; + } + .pr-lg-7 { + padding-right: 28px !important; + } + .pr-lg-8 { + padding-right: 32px !important; + } + .pr-lg-9 { + padding-right: 36px !important; + } + .pr-lg-10 { + padding-right: 40px !important; + } + .pr-lg-11 { + padding-right: 44px !important; + } + .pr-lg-12 { + padding-right: 48px !important; + } + .pr-lg-13 { + padding-right: 52px !important; + } + .pr-lg-14 { + padding-right: 56px !important; + } + .pr-lg-15 { + padding-right: 60px !important; + } + .pr-lg-16 { + padding-right: 64px !important; + } + .pb-lg-0 { + padding-bottom: 0px !important; + } + .pb-lg-1 { + padding-bottom: 4px !important; + } + .pb-lg-2 { + padding-bottom: 8px !important; + } + .pb-lg-3 { + padding-bottom: 12px !important; + } + .pb-lg-4 { + padding-bottom: 16px !important; + } + .pb-lg-5 { + padding-bottom: 20px !important; + } + .pb-lg-6 { + padding-bottom: 24px !important; + } + .pb-lg-7 { + padding-bottom: 28px !important; + } + .pb-lg-8 { + padding-bottom: 32px !important; + } + .pb-lg-9 { + padding-bottom: 36px !important; + } + .pb-lg-10 { + padding-bottom: 40px !important; + } + .pb-lg-11 { + padding-bottom: 44px !important; + } + .pb-lg-12 { + padding-bottom: 48px !important; + } + .pb-lg-13 { + padding-bottom: 52px !important; + } + .pb-lg-14 { + padding-bottom: 56px !important; + } + .pb-lg-15 { + padding-bottom: 60px !important; + } + .pb-lg-16 { + padding-bottom: 64px !important; + } + .pl-lg-0 { + padding-left: 0px !important; + } + .pl-lg-1 { + padding-left: 4px !important; + } + .pl-lg-2 { + padding-left: 8px !important; + } + .pl-lg-3 { + padding-left: 12px !important; + } + .pl-lg-4 { + padding-left: 16px !important; + } + .pl-lg-5 { + padding-left: 20px !important; + } + .pl-lg-6 { + padding-left: 24px !important; + } + .pl-lg-7 { + padding-left: 28px !important; + } + .pl-lg-8 { + padding-left: 32px !important; + } + .pl-lg-9 { + padding-left: 36px !important; + } + .pl-lg-10 { + padding-left: 40px !important; + } + .pl-lg-11 { + padding-left: 44px !important; + } + .pl-lg-12 { + padding-left: 48px !important; + } + .pl-lg-13 { + padding-left: 52px !important; + } + .pl-lg-14 { + padding-left: 56px !important; + } + .pl-lg-15 { + padding-left: 60px !important; + } + .pl-lg-16 { + padding-left: 64px !important; + } + .ps-lg-0 { + padding-inline-start: 0px !important; + } + .ps-lg-1 { + padding-inline-start: 4px !important; + } + .ps-lg-2 { + padding-inline-start: 8px !important; + } + .ps-lg-3 { + padding-inline-start: 12px !important; + } + .ps-lg-4 { + padding-inline-start: 16px !important; + } + .ps-lg-5 { + padding-inline-start: 20px !important; + } + .ps-lg-6 { + padding-inline-start: 24px !important; + } + .ps-lg-7 { + padding-inline-start: 28px !important; + } + .ps-lg-8 { + padding-inline-start: 32px !important; + } + .ps-lg-9 { + padding-inline-start: 36px !important; + } + .ps-lg-10 { + padding-inline-start: 40px !important; + } + .ps-lg-11 { + padding-inline-start: 44px !important; + } + .ps-lg-12 { + padding-inline-start: 48px !important; + } + .ps-lg-13 { + padding-inline-start: 52px !important; + } + .ps-lg-14 { + padding-inline-start: 56px !important; + } + .ps-lg-15 { + padding-inline-start: 60px !important; + } + .ps-lg-16 { + padding-inline-start: 64px !important; + } + .pe-lg-0 { + padding-inline-end: 0px !important; + } + .pe-lg-1 { + padding-inline-end: 4px !important; + } + .pe-lg-2 { + padding-inline-end: 8px !important; + } + .pe-lg-3 { + padding-inline-end: 12px !important; + } + .pe-lg-4 { + padding-inline-end: 16px !important; + } + .pe-lg-5 { + padding-inline-end: 20px !important; + } + .pe-lg-6 { + padding-inline-end: 24px !important; + } + .pe-lg-7 { + padding-inline-end: 28px !important; + } + .pe-lg-8 { + padding-inline-end: 32px !important; + } + .pe-lg-9 { + padding-inline-end: 36px !important; + } + .pe-lg-10 { + padding-inline-end: 40px !important; + } + .pe-lg-11 { + padding-inline-end: 44px !important; + } + .pe-lg-12 { + padding-inline-end: 48px !important; + } + .pe-lg-13 { + padding-inline-end: 52px !important; + } + .pe-lg-14 { + padding-inline-end: 56px !important; + } + .pe-lg-15 { + padding-inline-end: 60px !important; + } + .pe-lg-16 { + padding-inline-end: 64px !important; + } + .text-lg-left { + text-align: left !important; + } + .text-lg-right { + text-align: right !important; + } + .text-lg-center { + text-align: center !important; + } + .text-lg-justify { + text-align: justify !important; + } + .text-lg-start { + text-align: start !important; + } + .text-lg-end { + text-align: end !important; + } + .text-lg-h1 { + font-size: 6rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.015625em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-h2 { + font-size: 3.75rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.0083333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-h3 { + font-size: 3rem !important; + font-weight: 400; + line-height: 1.05; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-h4 { + font-size: 2.125rem !important; + font-weight: 400; + line-height: 1.175; + letter-spacing: 0.0073529412em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-h5 { + font-size: 1.5rem !important; + font-weight: 400; + line-height: 1.333; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-h6 { + font-size: 1.25rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-subtitle-1 { + font-size: 1rem !important; + font-weight: normal; + line-height: 1.75; + letter-spacing: 0.009375em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-subtitle-2 { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0071428571em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-body-1 { + font-size: 1rem !important; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.03125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-body-2 { + font-size: 0.875rem !important; + font-weight: 400; + line-height: 1.425; + letter-spacing: 0.0178571429em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-button { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 2.6; + letter-spacing: 0.0892857143em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .text-lg-caption { + font-size: 0.75rem !important; + font-weight: 400; + line-height: 1.667; + letter-spacing: 0.0333333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-lg-overline { + font-size: 0.75rem !important; + font-weight: 500; + line-height: 2.667; + letter-spacing: 0.1666666667em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .h-lg-auto { + height: auto !important; + } + .h-lg-screen { + height: 100vh !important; + } + .h-lg-0 { + height: 0 !important; + } + .h-lg-25 { + height: 25% !important; + } + .h-lg-50 { + height: 50% !important; + } + .h-lg-75 { + height: 75% !important; + } + .h-lg-100 { + height: 100% !important; + } + .w-lg-auto { + width: auto !important; + } + .w-lg-0 { + width: 0 !important; + } + .w-lg-25 { + width: 25% !important; + } + .w-lg-33 { + width: 33% !important; + } + .w-lg-50 { + width: 50% !important; + } + .w-lg-66 { + width: 66% !important; + } + .w-lg-75 { + width: 75% !important; + } + .w-lg-100 { + width: 100% !important; + } +} +@media (min-width: 1920px) { + .d-xl-none { + display: none !important; + } + .d-xl-inline { + display: inline !important; + } + .d-xl-inline-block { + display: inline-block !important; + } + .d-xl-block { + display: block !important; + } + .d-xl-table { + display: table !important; + } + .d-xl-table-row { + display: table-row !important; + } + .d-xl-table-cell { + display: table-cell !important; + } + .d-xl-flex { + display: flex !important; + } + .d-xl-inline-flex { + display: inline-flex !important; + } + .float-xl-none { + float: none !important; + } + .float-xl-left { + float: left !important; + } + .float-xl-right { + float: right !important; + } + .v-locale--is-rtl .float-xl-end { + float: left !important; + } + .v-locale--is-rtl .float-xl-start { + float: right !important; + } + .v-locale--is-ltr .float-xl-end { + float: right !important; + } + .v-locale--is-ltr .float-xl-start { + float: left !important; + } + .flex-xl-fill { + flex: 1 1 auto !important; + } + .flex-xl-1-1 { + flex: 1 1 auto !important; + } + .flex-xl-1-0 { + flex: 1 0 auto !important; + } + .flex-xl-0-1 { + flex: 0 1 auto !important; + } + .flex-xl-0-0 { + flex: 0 0 auto !important; + } + .flex-xl-1-1-100 { + flex: 1 1 100% !important; + } + .flex-xl-1-0-100 { + flex: 1 0 100% !important; + } + .flex-xl-0-1-100 { + flex: 0 1 100% !important; + } + .flex-xl-0-0-100 { + flex: 0 0 100% !important; + } + .flex-xl-1-1-0 { + flex: 1 1 0 !important; + } + .flex-xl-1-0-0 { + flex: 1 0 0 !important; + } + .flex-xl-0-1-0 { + flex: 0 1 0 !important; + } + .flex-xl-0-0-0 { + flex: 0 0 0 !important; + } + .flex-xl-row { + flex-direction: row !important; + } + .flex-xl-column { + flex-direction: column !important; + } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xl-grow-0 { + flex-grow: 0 !important; + } + .flex-xl-grow-1 { + flex-grow: 1 !important; + } + .flex-xl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xl-shrink-1 { + flex-shrink: 1 !important; + } + .flex-xl-wrap { + flex-wrap: wrap !important; + } + .flex-xl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-xl-start { + justify-content: flex-start !important; + } + .justify-xl-end { + justify-content: flex-end !important; + } + .justify-xl-center { + justify-content: center !important; + } + .justify-xl-space-between { + justify-content: space-between !important; + } + .justify-xl-space-around { + justify-content: space-around !important; + } + .justify-xl-space-evenly { + justify-content: space-evenly !important; + } + .align-xl-start { + align-items: flex-start !important; + } + .align-xl-end { + align-items: flex-end !important; + } + .align-xl-center { + align-items: center !important; + } + .align-xl-baseline { + align-items: baseline !important; + } + .align-xl-stretch { + align-items: stretch !important; + } + .align-content-xl-start { + align-content: flex-start !important; + } + .align-content-xl-end { + align-content: flex-end !important; + } + .align-content-xl-center { + align-content: center !important; + } + .align-content-xl-space-between { + align-content: space-between !important; + } + .align-content-xl-space-around { + align-content: space-around !important; + } + .align-content-xl-space-evenly { + align-content: space-evenly !important; + } + .align-content-xl-stretch { + align-content: stretch !important; + } + .align-self-xl-auto { + align-self: auto !important; + } + .align-self-xl-start { + align-self: flex-start !important; + } + .align-self-xl-end { + align-self: flex-end !important; + } + .align-self-xl-center { + align-self: center !important; + } + .align-self-xl-baseline { + align-self: baseline !important; + } + .align-self-xl-stretch { + align-self: stretch !important; + } + .order-xl-first { + order: -1 !important; + } + .order-xl-0 { + order: 0 !important; + } + .order-xl-1 { + order: 1 !important; + } + .order-xl-2 { + order: 2 !important; + } + .order-xl-3 { + order: 3 !important; + } + .order-xl-4 { + order: 4 !important; + } + .order-xl-5 { + order: 5 !important; + } + .order-xl-6 { + order: 6 !important; + } + .order-xl-7 { + order: 7 !important; + } + .order-xl-8 { + order: 8 !important; + } + .order-xl-9 { + order: 9 !important; + } + .order-xl-10 { + order: 10 !important; + } + .order-xl-11 { + order: 11 !important; + } + .order-xl-12 { + order: 12 !important; + } + .order-xl-last { + order: 13 !important; + } + .ga-xl-0 { + gap: 0px !important; + } + .ga-xl-1 { + gap: 4px !important; + } + .ga-xl-2 { + gap: 8px !important; + } + .ga-xl-3 { + gap: 12px !important; + } + .ga-xl-4 { + gap: 16px !important; + } + .ga-xl-5 { + gap: 20px !important; + } + .ga-xl-6 { + gap: 24px !important; + } + .ga-xl-7 { + gap: 28px !important; + } + .ga-xl-8 { + gap: 32px !important; + } + .ga-xl-9 { + gap: 36px !important; + } + .ga-xl-10 { + gap: 40px !important; + } + .ga-xl-11 { + gap: 44px !important; + } + .ga-xl-12 { + gap: 48px !important; + } + .ga-xl-13 { + gap: 52px !important; + } + .ga-xl-14 { + gap: 56px !important; + } + .ga-xl-15 { + gap: 60px !important; + } + .ga-xl-16 { + gap: 64px !important; + } + .ga-xl-auto { + gap: auto !important; + } + .gr-xl-0 { + row-gap: 0px !important; + } + .gr-xl-1 { + row-gap: 4px !important; + } + .gr-xl-2 { + row-gap: 8px !important; + } + .gr-xl-3 { + row-gap: 12px !important; + } + .gr-xl-4 { + row-gap: 16px !important; + } + .gr-xl-5 { + row-gap: 20px !important; + } + .gr-xl-6 { + row-gap: 24px !important; + } + .gr-xl-7 { + row-gap: 28px !important; + } + .gr-xl-8 { + row-gap: 32px !important; + } + .gr-xl-9 { + row-gap: 36px !important; + } + .gr-xl-10 { + row-gap: 40px !important; + } + .gr-xl-11 { + row-gap: 44px !important; + } + .gr-xl-12 { + row-gap: 48px !important; + } + .gr-xl-13 { + row-gap: 52px !important; + } + .gr-xl-14 { + row-gap: 56px !important; + } + .gr-xl-15 { + row-gap: 60px !important; + } + .gr-xl-16 { + row-gap: 64px !important; + } + .gr-xl-auto { + row-gap: auto !important; + } + .gc-xl-0 { + column-gap: 0px !important; + } + .gc-xl-1 { + column-gap: 4px !important; + } + .gc-xl-2 { + column-gap: 8px !important; + } + .gc-xl-3 { + column-gap: 12px !important; + } + .gc-xl-4 { + column-gap: 16px !important; + } + .gc-xl-5 { + column-gap: 20px !important; + } + .gc-xl-6 { + column-gap: 24px !important; + } + .gc-xl-7 { + column-gap: 28px !important; + } + .gc-xl-8 { + column-gap: 32px !important; + } + .gc-xl-9 { + column-gap: 36px !important; + } + .gc-xl-10 { + column-gap: 40px !important; + } + .gc-xl-11 { + column-gap: 44px !important; + } + .gc-xl-12 { + column-gap: 48px !important; + } + .gc-xl-13 { + column-gap: 52px !important; + } + .gc-xl-14 { + column-gap: 56px !important; + } + .gc-xl-15 { + column-gap: 60px !important; + } + .gc-xl-16 { + column-gap: 64px !important; + } + .gc-xl-auto { + column-gap: auto !important; + } + .ma-xl-0 { + margin: 0px !important; + } + .ma-xl-1 { + margin: 4px !important; + } + .ma-xl-2 { + margin: 8px !important; + } + .ma-xl-3 { + margin: 12px !important; + } + .ma-xl-4 { + margin: 16px !important; + } + .ma-xl-5 { + margin: 20px !important; + } + .ma-xl-6 { + margin: 24px !important; + } + .ma-xl-7 { + margin: 28px !important; + } + .ma-xl-8 { + margin: 32px !important; + } + .ma-xl-9 { + margin: 36px !important; + } + .ma-xl-10 { + margin: 40px !important; + } + .ma-xl-11 { + margin: 44px !important; + } + .ma-xl-12 { + margin: 48px !important; + } + .ma-xl-13 { + margin: 52px !important; + } + .ma-xl-14 { + margin: 56px !important; + } + .ma-xl-15 { + margin: 60px !important; + } + .ma-xl-16 { + margin: 64px !important; + } + .ma-xl-auto { + margin: auto !important; + } + .mx-xl-0 { + margin-right: 0px !important; + margin-left: 0px !important; + } + .mx-xl-1 { + margin-right: 4px !important; + margin-left: 4px !important; + } + .mx-xl-2 { + margin-right: 8px !important; + margin-left: 8px !important; + } + .mx-xl-3 { + margin-right: 12px !important; + margin-left: 12px !important; + } + .mx-xl-4 { + margin-right: 16px !important; + margin-left: 16px !important; + } + .mx-xl-5 { + margin-right: 20px !important; + margin-left: 20px !important; + } + .mx-xl-6 { + margin-right: 24px !important; + margin-left: 24px !important; + } + .mx-xl-7 { + margin-right: 28px !important; + margin-left: 28px !important; + } + .mx-xl-8 { + margin-right: 32px !important; + margin-left: 32px !important; + } + .mx-xl-9 { + margin-right: 36px !important; + margin-left: 36px !important; + } + .mx-xl-10 { + margin-right: 40px !important; + margin-left: 40px !important; + } + .mx-xl-11 { + margin-right: 44px !important; + margin-left: 44px !important; + } + .mx-xl-12 { + margin-right: 48px !important; + margin-left: 48px !important; + } + .mx-xl-13 { + margin-right: 52px !important; + margin-left: 52px !important; + } + .mx-xl-14 { + margin-right: 56px !important; + margin-left: 56px !important; + } + .mx-xl-15 { + margin-right: 60px !important; + margin-left: 60px !important; + } + .mx-xl-16 { + margin-right: 64px !important; + margin-left: 64px !important; + } + .mx-xl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-xl-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + .my-xl-1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .my-xl-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .my-xl-3 { + margin-top: 12px !important; + margin-bottom: 12px !important; + } + .my-xl-4 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .my-xl-5 { + margin-top: 20px !important; + margin-bottom: 20px !important; + } + .my-xl-6 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .my-xl-7 { + margin-top: 28px !important; + margin-bottom: 28px !important; + } + .my-xl-8 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .my-xl-9 { + margin-top: 36px !important; + margin-bottom: 36px !important; + } + .my-xl-10 { + margin-top: 40px !important; + margin-bottom: 40px !important; + } + .my-xl-11 { + margin-top: 44px !important; + margin-bottom: 44px !important; + } + .my-xl-12 { + margin-top: 48px !important; + margin-bottom: 48px !important; + } + .my-xl-13 { + margin-top: 52px !important; + margin-bottom: 52px !important; + } + .my-xl-14 { + margin-top: 56px !important; + margin-bottom: 56px !important; + } + .my-xl-15 { + margin-top: 60px !important; + margin-bottom: 60px !important; + } + .my-xl-16 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .my-xl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-xl-0 { + margin-top: 0px !important; + } + .mt-xl-1 { + margin-top: 4px !important; + } + .mt-xl-2 { + margin-top: 8px !important; + } + .mt-xl-3 { + margin-top: 12px !important; + } + .mt-xl-4 { + margin-top: 16px !important; + } + .mt-xl-5 { + margin-top: 20px !important; + } + .mt-xl-6 { + margin-top: 24px !important; + } + .mt-xl-7 { + margin-top: 28px !important; + } + .mt-xl-8 { + margin-top: 32px !important; + } + .mt-xl-9 { + margin-top: 36px !important; + } + .mt-xl-10 { + margin-top: 40px !important; + } + .mt-xl-11 { + margin-top: 44px !important; + } + .mt-xl-12 { + margin-top: 48px !important; + } + .mt-xl-13 { + margin-top: 52px !important; + } + .mt-xl-14 { + margin-top: 56px !important; + } + .mt-xl-15 { + margin-top: 60px !important; + } + .mt-xl-16 { + margin-top: 64px !important; + } + .mt-xl-auto { + margin-top: auto !important; + } + .mr-xl-0 { + margin-right: 0px !important; + } + .mr-xl-1 { + margin-right: 4px !important; + } + .mr-xl-2 { + margin-right: 8px !important; + } + .mr-xl-3 { + margin-right: 12px !important; + } + .mr-xl-4 { + margin-right: 16px !important; + } + .mr-xl-5 { + margin-right: 20px !important; + } + .mr-xl-6 { + margin-right: 24px !important; + } + .mr-xl-7 { + margin-right: 28px !important; + } + .mr-xl-8 { + margin-right: 32px !important; + } + .mr-xl-9 { + margin-right: 36px !important; + } + .mr-xl-10 { + margin-right: 40px !important; + } + .mr-xl-11 { + margin-right: 44px !important; + } + .mr-xl-12 { + margin-right: 48px !important; + } + .mr-xl-13 { + margin-right: 52px !important; + } + .mr-xl-14 { + margin-right: 56px !important; + } + .mr-xl-15 { + margin-right: 60px !important; + } + .mr-xl-16 { + margin-right: 64px !important; + } + .mr-xl-auto { + margin-right: auto !important; + } + .mb-xl-0 { + margin-bottom: 0px !important; + } + .mb-xl-1 { + margin-bottom: 4px !important; + } + .mb-xl-2 { + margin-bottom: 8px !important; + } + .mb-xl-3 { + margin-bottom: 12px !important; + } + .mb-xl-4 { + margin-bottom: 16px !important; + } + .mb-xl-5 { + margin-bottom: 20px !important; + } + .mb-xl-6 { + margin-bottom: 24px !important; + } + .mb-xl-7 { + margin-bottom: 28px !important; + } + .mb-xl-8 { + margin-bottom: 32px !important; + } + .mb-xl-9 { + margin-bottom: 36px !important; + } + .mb-xl-10 { + margin-bottom: 40px !important; + } + .mb-xl-11 { + margin-bottom: 44px !important; + } + .mb-xl-12 { + margin-bottom: 48px !important; + } + .mb-xl-13 { + margin-bottom: 52px !important; + } + .mb-xl-14 { + margin-bottom: 56px !important; + } + .mb-xl-15 { + margin-bottom: 60px !important; + } + .mb-xl-16 { + margin-bottom: 64px !important; + } + .mb-xl-auto { + margin-bottom: auto !important; + } + .ml-xl-0 { + margin-left: 0px !important; + } + .ml-xl-1 { + margin-left: 4px !important; + } + .ml-xl-2 { + margin-left: 8px !important; + } + .ml-xl-3 { + margin-left: 12px !important; + } + .ml-xl-4 { + margin-left: 16px !important; + } + .ml-xl-5 { + margin-left: 20px !important; + } + .ml-xl-6 { + margin-left: 24px !important; + } + .ml-xl-7 { + margin-left: 28px !important; + } + .ml-xl-8 { + margin-left: 32px !important; + } + .ml-xl-9 { + margin-left: 36px !important; + } + .ml-xl-10 { + margin-left: 40px !important; + } + .ml-xl-11 { + margin-left: 44px !important; + } + .ml-xl-12 { + margin-left: 48px !important; + } + .ml-xl-13 { + margin-left: 52px !important; + } + .ml-xl-14 { + margin-left: 56px !important; + } + .ml-xl-15 { + margin-left: 60px !important; + } + .ml-xl-16 { + margin-left: 64px !important; + } + .ml-xl-auto { + margin-left: auto !important; + } + .ms-xl-0 { + margin-inline-start: 0px !important; + } + .ms-xl-1 { + margin-inline-start: 4px !important; + } + .ms-xl-2 { + margin-inline-start: 8px !important; + } + .ms-xl-3 { + margin-inline-start: 12px !important; + } + .ms-xl-4 { + margin-inline-start: 16px !important; + } + .ms-xl-5 { + margin-inline-start: 20px !important; + } + .ms-xl-6 { + margin-inline-start: 24px !important; + } + .ms-xl-7 { + margin-inline-start: 28px !important; + } + .ms-xl-8 { + margin-inline-start: 32px !important; + } + .ms-xl-9 { + margin-inline-start: 36px !important; + } + .ms-xl-10 { + margin-inline-start: 40px !important; + } + .ms-xl-11 { + margin-inline-start: 44px !important; + } + .ms-xl-12 { + margin-inline-start: 48px !important; + } + .ms-xl-13 { + margin-inline-start: 52px !important; + } + .ms-xl-14 { + margin-inline-start: 56px !important; + } + .ms-xl-15 { + margin-inline-start: 60px !important; + } + .ms-xl-16 { + margin-inline-start: 64px !important; + } + .ms-xl-auto { + margin-inline-start: auto !important; + } + .me-xl-0 { + margin-inline-end: 0px !important; + } + .me-xl-1 { + margin-inline-end: 4px !important; + } + .me-xl-2 { + margin-inline-end: 8px !important; + } + .me-xl-3 { + margin-inline-end: 12px !important; + } + .me-xl-4 { + margin-inline-end: 16px !important; + } + .me-xl-5 { + margin-inline-end: 20px !important; + } + .me-xl-6 { + margin-inline-end: 24px !important; + } + .me-xl-7 { + margin-inline-end: 28px !important; + } + .me-xl-8 { + margin-inline-end: 32px !important; + } + .me-xl-9 { + margin-inline-end: 36px !important; + } + .me-xl-10 { + margin-inline-end: 40px !important; + } + .me-xl-11 { + margin-inline-end: 44px !important; + } + .me-xl-12 { + margin-inline-end: 48px !important; + } + .me-xl-13 { + margin-inline-end: 52px !important; + } + .me-xl-14 { + margin-inline-end: 56px !important; + } + .me-xl-15 { + margin-inline-end: 60px !important; + } + .me-xl-16 { + margin-inline-end: 64px !important; + } + .me-xl-auto { + margin-inline-end: auto !important; + } + .ma-xl-n1 { + margin: -4px !important; + } + .ma-xl-n2 { + margin: -8px !important; + } + .ma-xl-n3 { + margin: -12px !important; + } + .ma-xl-n4 { + margin: -16px !important; + } + .ma-xl-n5 { + margin: -20px !important; + } + .ma-xl-n6 { + margin: -24px !important; + } + .ma-xl-n7 { + margin: -28px !important; + } + .ma-xl-n8 { + margin: -32px !important; + } + .ma-xl-n9 { + margin: -36px !important; + } + .ma-xl-n10 { + margin: -40px !important; + } + .ma-xl-n11 { + margin: -44px !important; + } + .ma-xl-n12 { + margin: -48px !important; + } + .ma-xl-n13 { + margin: -52px !important; + } + .ma-xl-n14 { + margin: -56px !important; + } + .ma-xl-n15 { + margin: -60px !important; + } + .ma-xl-n16 { + margin: -64px !important; + } + .mx-xl-n1 { + margin-right: -4px !important; + margin-left: -4px !important; + } + .mx-xl-n2 { + margin-right: -8px !important; + margin-left: -8px !important; + } + .mx-xl-n3 { + margin-right: -12px !important; + margin-left: -12px !important; + } + .mx-xl-n4 { + margin-right: -16px !important; + margin-left: -16px !important; + } + .mx-xl-n5 { + margin-right: -20px !important; + margin-left: -20px !important; + } + .mx-xl-n6 { + margin-right: -24px !important; + margin-left: -24px !important; + } + .mx-xl-n7 { + margin-right: -28px !important; + margin-left: -28px !important; + } + .mx-xl-n8 { + margin-right: -32px !important; + margin-left: -32px !important; + } + .mx-xl-n9 { + margin-right: -36px !important; + margin-left: -36px !important; + } + .mx-xl-n10 { + margin-right: -40px !important; + margin-left: -40px !important; + } + .mx-xl-n11 { + margin-right: -44px !important; + margin-left: -44px !important; + } + .mx-xl-n12 { + margin-right: -48px !important; + margin-left: -48px !important; + } + .mx-xl-n13 { + margin-right: -52px !important; + margin-left: -52px !important; + } + .mx-xl-n14 { + margin-right: -56px !important; + margin-left: -56px !important; + } + .mx-xl-n15 { + margin-right: -60px !important; + margin-left: -60px !important; + } + .mx-xl-n16 { + margin-right: -64px !important; + margin-left: -64px !important; + } + .my-xl-n1 { + margin-top: -4px !important; + margin-bottom: -4px !important; + } + .my-xl-n2 { + margin-top: -8px !important; + margin-bottom: -8px !important; + } + .my-xl-n3 { + margin-top: -12px !important; + margin-bottom: -12px !important; + } + .my-xl-n4 { + margin-top: -16px !important; + margin-bottom: -16px !important; + } + .my-xl-n5 { + margin-top: -20px !important; + margin-bottom: -20px !important; + } + .my-xl-n6 { + margin-top: -24px !important; + margin-bottom: -24px !important; + } + .my-xl-n7 { + margin-top: -28px !important; + margin-bottom: -28px !important; + } + .my-xl-n8 { + margin-top: -32px !important; + margin-bottom: -32px !important; + } + .my-xl-n9 { + margin-top: -36px !important; + margin-bottom: -36px !important; + } + .my-xl-n10 { + margin-top: -40px !important; + margin-bottom: -40px !important; + } + .my-xl-n11 { + margin-top: -44px !important; + margin-bottom: -44px !important; + } + .my-xl-n12 { + margin-top: -48px !important; + margin-bottom: -48px !important; + } + .my-xl-n13 { + margin-top: -52px !important; + margin-bottom: -52px !important; + } + .my-xl-n14 { + margin-top: -56px !important; + margin-bottom: -56px !important; + } + .my-xl-n15 { + margin-top: -60px !important; + margin-bottom: -60px !important; + } + .my-xl-n16 { + margin-top: -64px !important; + margin-bottom: -64px !important; + } + .mt-xl-n1 { + margin-top: -4px !important; + } + .mt-xl-n2 { + margin-top: -8px !important; + } + .mt-xl-n3 { + margin-top: -12px !important; + } + .mt-xl-n4 { + margin-top: -16px !important; + } + .mt-xl-n5 { + margin-top: -20px !important; + } + .mt-xl-n6 { + margin-top: -24px !important; + } + .mt-xl-n7 { + margin-top: -28px !important; + } + .mt-xl-n8 { + margin-top: -32px !important; + } + .mt-xl-n9 { + margin-top: -36px !important; + } + .mt-xl-n10 { + margin-top: -40px !important; + } + .mt-xl-n11 { + margin-top: -44px !important; + } + .mt-xl-n12 { + margin-top: -48px !important; + } + .mt-xl-n13 { + margin-top: -52px !important; + } + .mt-xl-n14 { + margin-top: -56px !important; + } + .mt-xl-n15 { + margin-top: -60px !important; + } + .mt-xl-n16 { + margin-top: -64px !important; + } + .mr-xl-n1 { + margin-right: -4px !important; + } + .mr-xl-n2 { + margin-right: -8px !important; + } + .mr-xl-n3 { + margin-right: -12px !important; + } + .mr-xl-n4 { + margin-right: -16px !important; + } + .mr-xl-n5 { + margin-right: -20px !important; + } + .mr-xl-n6 { + margin-right: -24px !important; + } + .mr-xl-n7 { + margin-right: -28px !important; + } + .mr-xl-n8 { + margin-right: -32px !important; + } + .mr-xl-n9 { + margin-right: -36px !important; + } + .mr-xl-n10 { + margin-right: -40px !important; + } + .mr-xl-n11 { + margin-right: -44px !important; + } + .mr-xl-n12 { + margin-right: -48px !important; + } + .mr-xl-n13 { + margin-right: -52px !important; + } + .mr-xl-n14 { + margin-right: -56px !important; + } + .mr-xl-n15 { + margin-right: -60px !important; + } + .mr-xl-n16 { + margin-right: -64px !important; + } + .mb-xl-n1 { + margin-bottom: -4px !important; + } + .mb-xl-n2 { + margin-bottom: -8px !important; + } + .mb-xl-n3 { + margin-bottom: -12px !important; + } + .mb-xl-n4 { + margin-bottom: -16px !important; + } + .mb-xl-n5 { + margin-bottom: -20px !important; + } + .mb-xl-n6 { + margin-bottom: -24px !important; + } + .mb-xl-n7 { + margin-bottom: -28px !important; + } + .mb-xl-n8 { + margin-bottom: -32px !important; + } + .mb-xl-n9 { + margin-bottom: -36px !important; + } + .mb-xl-n10 { + margin-bottom: -40px !important; + } + .mb-xl-n11 { + margin-bottom: -44px !important; + } + .mb-xl-n12 { + margin-bottom: -48px !important; + } + .mb-xl-n13 { + margin-bottom: -52px !important; + } + .mb-xl-n14 { + margin-bottom: -56px !important; + } + .mb-xl-n15 { + margin-bottom: -60px !important; + } + .mb-xl-n16 { + margin-bottom: -64px !important; + } + .ml-xl-n1 { + margin-left: -4px !important; + } + .ml-xl-n2 { + margin-left: -8px !important; + } + .ml-xl-n3 { + margin-left: -12px !important; + } + .ml-xl-n4 { + margin-left: -16px !important; + } + .ml-xl-n5 { + margin-left: -20px !important; + } + .ml-xl-n6 { + margin-left: -24px !important; + } + .ml-xl-n7 { + margin-left: -28px !important; + } + .ml-xl-n8 { + margin-left: -32px !important; + } + .ml-xl-n9 { + margin-left: -36px !important; + } + .ml-xl-n10 { + margin-left: -40px !important; + } + .ml-xl-n11 { + margin-left: -44px !important; + } + .ml-xl-n12 { + margin-left: -48px !important; + } + .ml-xl-n13 { + margin-left: -52px !important; + } + .ml-xl-n14 { + margin-left: -56px !important; + } + .ml-xl-n15 { + margin-left: -60px !important; + } + .ml-xl-n16 { + margin-left: -64px !important; + } + .ms-xl-n1 { + margin-inline-start: -4px !important; + } + .ms-xl-n2 { + margin-inline-start: -8px !important; + } + .ms-xl-n3 { + margin-inline-start: -12px !important; + } + .ms-xl-n4 { + margin-inline-start: -16px !important; + } + .ms-xl-n5 { + margin-inline-start: -20px !important; + } + .ms-xl-n6 { + margin-inline-start: -24px !important; + } + .ms-xl-n7 { + margin-inline-start: -28px !important; + } + .ms-xl-n8 { + margin-inline-start: -32px !important; + } + .ms-xl-n9 { + margin-inline-start: -36px !important; + } + .ms-xl-n10 { + margin-inline-start: -40px !important; + } + .ms-xl-n11 { + margin-inline-start: -44px !important; + } + .ms-xl-n12 { + margin-inline-start: -48px !important; + } + .ms-xl-n13 { + margin-inline-start: -52px !important; + } + .ms-xl-n14 { + margin-inline-start: -56px !important; + } + .ms-xl-n15 { + margin-inline-start: -60px !important; + } + .ms-xl-n16 { + margin-inline-start: -64px !important; + } + .me-xl-n1 { + margin-inline-end: -4px !important; + } + .me-xl-n2 { + margin-inline-end: -8px !important; + } + .me-xl-n3 { + margin-inline-end: -12px !important; + } + .me-xl-n4 { + margin-inline-end: -16px !important; + } + .me-xl-n5 { + margin-inline-end: -20px !important; + } + .me-xl-n6 { + margin-inline-end: -24px !important; + } + .me-xl-n7 { + margin-inline-end: -28px !important; + } + .me-xl-n8 { + margin-inline-end: -32px !important; + } + .me-xl-n9 { + margin-inline-end: -36px !important; + } + .me-xl-n10 { + margin-inline-end: -40px !important; + } + .me-xl-n11 { + margin-inline-end: -44px !important; + } + .me-xl-n12 { + margin-inline-end: -48px !important; + } + .me-xl-n13 { + margin-inline-end: -52px !important; + } + .me-xl-n14 { + margin-inline-end: -56px !important; + } + .me-xl-n15 { + margin-inline-end: -60px !important; + } + .me-xl-n16 { + margin-inline-end: -64px !important; + } + .pa-xl-0 { + padding: 0px !important; + } + .pa-xl-1 { + padding: 4px !important; + } + .pa-xl-2 { + padding: 8px !important; + } + .pa-xl-3 { + padding: 12px !important; + } + .pa-xl-4 { + padding: 16px !important; + } + .pa-xl-5 { + padding: 20px !important; + } + .pa-xl-6 { + padding: 24px !important; + } + .pa-xl-7 { + padding: 28px !important; + } + .pa-xl-8 { + padding: 32px !important; + } + .pa-xl-9 { + padding: 36px !important; + } + .pa-xl-10 { + padding: 40px !important; + } + .pa-xl-11 { + padding: 44px !important; + } + .pa-xl-12 { + padding: 48px !important; + } + .pa-xl-13 { + padding: 52px !important; + } + .pa-xl-14 { + padding: 56px !important; + } + .pa-xl-15 { + padding: 60px !important; + } + .pa-xl-16 { + padding: 64px !important; + } + .px-xl-0 { + padding-right: 0px !important; + padding-left: 0px !important; + } + .px-xl-1 { + padding-right: 4px !important; + padding-left: 4px !important; + } + .px-xl-2 { + padding-right: 8px !important; + padding-left: 8px !important; + } + .px-xl-3 { + padding-right: 12px !important; + padding-left: 12px !important; + } + .px-xl-4 { + padding-right: 16px !important; + padding-left: 16px !important; + } + .px-xl-5 { + padding-right: 20px !important; + padding-left: 20px !important; + } + .px-xl-6 { + padding-right: 24px !important; + padding-left: 24px !important; + } + .px-xl-7 { + padding-right: 28px !important; + padding-left: 28px !important; + } + .px-xl-8 { + padding-right: 32px !important; + padding-left: 32px !important; + } + .px-xl-9 { + padding-right: 36px !important; + padding-left: 36px !important; + } + .px-xl-10 { + padding-right: 40px !important; + padding-left: 40px !important; + } + .px-xl-11 { + padding-right: 44px !important; + padding-left: 44px !important; + } + .px-xl-12 { + padding-right: 48px !important; + padding-left: 48px !important; + } + .px-xl-13 { + padding-right: 52px !important; + padding-left: 52px !important; + } + .px-xl-14 { + padding-right: 56px !important; + padding-left: 56px !important; + } + .px-xl-15 { + padding-right: 60px !important; + padding-left: 60px !important; + } + .px-xl-16 { + padding-right: 64px !important; + padding-left: 64px !important; + } + .py-xl-0 { + padding-top: 0px !important; + padding-bottom: 0px !important; + } + .py-xl-1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .py-xl-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .py-xl-3 { + padding-top: 12px !important; + padding-bottom: 12px !important; + } + .py-xl-4 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .py-xl-5 { + padding-top: 20px !important; + padding-bottom: 20px !important; + } + .py-xl-6 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .py-xl-7 { + padding-top: 28px !important; + padding-bottom: 28px !important; + } + .py-xl-8 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .py-xl-9 { + padding-top: 36px !important; + padding-bottom: 36px !important; + } + .py-xl-10 { + padding-top: 40px !important; + padding-bottom: 40px !important; + } + .py-xl-11 { + padding-top: 44px !important; + padding-bottom: 44px !important; + } + .py-xl-12 { + padding-top: 48px !important; + padding-bottom: 48px !important; + } + .py-xl-13 { + padding-top: 52px !important; + padding-bottom: 52px !important; + } + .py-xl-14 { + padding-top: 56px !important; + padding-bottom: 56px !important; + } + .py-xl-15 { + padding-top: 60px !important; + padding-bottom: 60px !important; + } + .py-xl-16 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .pt-xl-0 { + padding-top: 0px !important; + } + .pt-xl-1 { + padding-top: 4px !important; + } + .pt-xl-2 { + padding-top: 8px !important; + } + .pt-xl-3 { + padding-top: 12px !important; + } + .pt-xl-4 { + padding-top: 16px !important; + } + .pt-xl-5 { + padding-top: 20px !important; + } + .pt-xl-6 { + padding-top: 24px !important; + } + .pt-xl-7 { + padding-top: 28px !important; + } + .pt-xl-8 { + padding-top: 32px !important; + } + .pt-xl-9 { + padding-top: 36px !important; + } + .pt-xl-10 { + padding-top: 40px !important; + } + .pt-xl-11 { + padding-top: 44px !important; + } + .pt-xl-12 { + padding-top: 48px !important; + } + .pt-xl-13 { + padding-top: 52px !important; + } + .pt-xl-14 { + padding-top: 56px !important; + } + .pt-xl-15 { + padding-top: 60px !important; + } + .pt-xl-16 { + padding-top: 64px !important; + } + .pr-xl-0 { + padding-right: 0px !important; + } + .pr-xl-1 { + padding-right: 4px !important; + } + .pr-xl-2 { + padding-right: 8px !important; + } + .pr-xl-3 { + padding-right: 12px !important; + } + .pr-xl-4 { + padding-right: 16px !important; + } + .pr-xl-5 { + padding-right: 20px !important; + } + .pr-xl-6 { + padding-right: 24px !important; + } + .pr-xl-7 { + padding-right: 28px !important; + } + .pr-xl-8 { + padding-right: 32px !important; + } + .pr-xl-9 { + padding-right: 36px !important; + } + .pr-xl-10 { + padding-right: 40px !important; + } + .pr-xl-11 { + padding-right: 44px !important; + } + .pr-xl-12 { + padding-right: 48px !important; + } + .pr-xl-13 { + padding-right: 52px !important; + } + .pr-xl-14 { + padding-right: 56px !important; + } + .pr-xl-15 { + padding-right: 60px !important; + } + .pr-xl-16 { + padding-right: 64px !important; + } + .pb-xl-0 { + padding-bottom: 0px !important; + } + .pb-xl-1 { + padding-bottom: 4px !important; + } + .pb-xl-2 { + padding-bottom: 8px !important; + } + .pb-xl-3 { + padding-bottom: 12px !important; + } + .pb-xl-4 { + padding-bottom: 16px !important; + } + .pb-xl-5 { + padding-bottom: 20px !important; + } + .pb-xl-6 { + padding-bottom: 24px !important; + } + .pb-xl-7 { + padding-bottom: 28px !important; + } + .pb-xl-8 { + padding-bottom: 32px !important; + } + .pb-xl-9 { + padding-bottom: 36px !important; + } + .pb-xl-10 { + padding-bottom: 40px !important; + } + .pb-xl-11 { + padding-bottom: 44px !important; + } + .pb-xl-12 { + padding-bottom: 48px !important; + } + .pb-xl-13 { + padding-bottom: 52px !important; + } + .pb-xl-14 { + padding-bottom: 56px !important; + } + .pb-xl-15 { + padding-bottom: 60px !important; + } + .pb-xl-16 { + padding-bottom: 64px !important; + } + .pl-xl-0 { + padding-left: 0px !important; + } + .pl-xl-1 { + padding-left: 4px !important; + } + .pl-xl-2 { + padding-left: 8px !important; + } + .pl-xl-3 { + padding-left: 12px !important; + } + .pl-xl-4 { + padding-left: 16px !important; + } + .pl-xl-5 { + padding-left: 20px !important; + } + .pl-xl-6 { + padding-left: 24px !important; + } + .pl-xl-7 { + padding-left: 28px !important; + } + .pl-xl-8 { + padding-left: 32px !important; + } + .pl-xl-9 { + padding-left: 36px !important; + } + .pl-xl-10 { + padding-left: 40px !important; + } + .pl-xl-11 { + padding-left: 44px !important; + } + .pl-xl-12 { + padding-left: 48px !important; + } + .pl-xl-13 { + padding-left: 52px !important; + } + .pl-xl-14 { + padding-left: 56px !important; + } + .pl-xl-15 { + padding-left: 60px !important; + } + .pl-xl-16 { + padding-left: 64px !important; + } + .ps-xl-0 { + padding-inline-start: 0px !important; + } + .ps-xl-1 { + padding-inline-start: 4px !important; + } + .ps-xl-2 { + padding-inline-start: 8px !important; + } + .ps-xl-3 { + padding-inline-start: 12px !important; + } + .ps-xl-4 { + padding-inline-start: 16px !important; + } + .ps-xl-5 { + padding-inline-start: 20px !important; + } + .ps-xl-6 { + padding-inline-start: 24px !important; + } + .ps-xl-7 { + padding-inline-start: 28px !important; + } + .ps-xl-8 { + padding-inline-start: 32px !important; + } + .ps-xl-9 { + padding-inline-start: 36px !important; + } + .ps-xl-10 { + padding-inline-start: 40px !important; + } + .ps-xl-11 { + padding-inline-start: 44px !important; + } + .ps-xl-12 { + padding-inline-start: 48px !important; + } + .ps-xl-13 { + padding-inline-start: 52px !important; + } + .ps-xl-14 { + padding-inline-start: 56px !important; + } + .ps-xl-15 { + padding-inline-start: 60px !important; + } + .ps-xl-16 { + padding-inline-start: 64px !important; + } + .pe-xl-0 { + padding-inline-end: 0px !important; + } + .pe-xl-1 { + padding-inline-end: 4px !important; + } + .pe-xl-2 { + padding-inline-end: 8px !important; + } + .pe-xl-3 { + padding-inline-end: 12px !important; + } + .pe-xl-4 { + padding-inline-end: 16px !important; + } + .pe-xl-5 { + padding-inline-end: 20px !important; + } + .pe-xl-6 { + padding-inline-end: 24px !important; + } + .pe-xl-7 { + padding-inline-end: 28px !important; + } + .pe-xl-8 { + padding-inline-end: 32px !important; + } + .pe-xl-9 { + padding-inline-end: 36px !important; + } + .pe-xl-10 { + padding-inline-end: 40px !important; + } + .pe-xl-11 { + padding-inline-end: 44px !important; + } + .pe-xl-12 { + padding-inline-end: 48px !important; + } + .pe-xl-13 { + padding-inline-end: 52px !important; + } + .pe-xl-14 { + padding-inline-end: 56px !important; + } + .pe-xl-15 { + padding-inline-end: 60px !important; + } + .pe-xl-16 { + padding-inline-end: 64px !important; + } + .text-xl-left { + text-align: left !important; + } + .text-xl-right { + text-align: right !important; + } + .text-xl-center { + text-align: center !important; + } + .text-xl-justify { + text-align: justify !important; + } + .text-xl-start { + text-align: start !important; + } + .text-xl-end { + text-align: end !important; + } + .text-xl-h1 { + font-size: 6rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.015625em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-h2 { + font-size: 3.75rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.0083333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-h3 { + font-size: 3rem !important; + font-weight: 400; + line-height: 1.05; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-h4 { + font-size: 2.125rem !important; + font-weight: 400; + line-height: 1.175; + letter-spacing: 0.0073529412em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-h5 { + font-size: 1.5rem !important; + font-weight: 400; + line-height: 1.333; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-h6 { + font-size: 1.25rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-subtitle-1 { + font-size: 1rem !important; + font-weight: normal; + line-height: 1.75; + letter-spacing: 0.009375em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-subtitle-2 { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0071428571em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-body-1 { + font-size: 1rem !important; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.03125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-body-2 { + font-size: 0.875rem !important; + font-weight: 400; + line-height: 1.425; + letter-spacing: 0.0178571429em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-button { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 2.6; + letter-spacing: 0.0892857143em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .text-xl-caption { + font-size: 0.75rem !important; + font-weight: 400; + line-height: 1.667; + letter-spacing: 0.0333333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xl-overline { + font-size: 0.75rem !important; + font-weight: 500; + line-height: 2.667; + letter-spacing: 0.1666666667em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .h-xl-auto { + height: auto !important; + } + .h-xl-screen { + height: 100vh !important; + } + .h-xl-0 { + height: 0 !important; + } + .h-xl-25 { + height: 25% !important; + } + .h-xl-50 { + height: 50% !important; + } + .h-xl-75 { + height: 75% !important; + } + .h-xl-100 { + height: 100% !important; + } + .w-xl-auto { + width: auto !important; + } + .w-xl-0 { + width: 0 !important; + } + .w-xl-25 { + width: 25% !important; + } + .w-xl-33 { + width: 33% !important; + } + .w-xl-50 { + width: 50% !important; + } + .w-xl-66 { + width: 66% !important; + } + .w-xl-75 { + width: 75% !important; + } + .w-xl-100 { + width: 100% !important; + } +} +@media (min-width: 2560px) { + .d-xxl-none { + display: none !important; + } + .d-xxl-inline { + display: inline !important; + } + .d-xxl-inline-block { + display: inline-block !important; + } + .d-xxl-block { + display: block !important; + } + .d-xxl-table { + display: table !important; + } + .d-xxl-table-row { + display: table-row !important; + } + .d-xxl-table-cell { + display: table-cell !important; + } + .d-xxl-flex { + display: flex !important; + } + .d-xxl-inline-flex { + display: inline-flex !important; + } + .float-xxl-none { + float: none !important; + } + .float-xxl-left { + float: left !important; + } + .float-xxl-right { + float: right !important; + } + .v-locale--is-rtl .float-xxl-end { + float: left !important; + } + .v-locale--is-rtl .float-xxl-start { + float: right !important; + } + .v-locale--is-ltr .float-xxl-end { + float: right !important; + } + .v-locale--is-ltr .float-xxl-start { + float: left !important; + } + .flex-xxl-fill { + flex: 1 1 auto !important; + } + .flex-xxl-1-1 { + flex: 1 1 auto !important; + } + .flex-xxl-1-0 { + flex: 1 0 auto !important; + } + .flex-xxl-0-1 { + flex: 0 1 auto !important; + } + .flex-xxl-0-0 { + flex: 0 0 auto !important; + } + .flex-xxl-1-1-100 { + flex: 1 1 100% !important; + } + .flex-xxl-1-0-100 { + flex: 1 0 100% !important; + } + .flex-xxl-0-1-100 { + flex: 0 1 100% !important; + } + .flex-xxl-0-0-100 { + flex: 0 0 100% !important; + } + .flex-xxl-1-1-0 { + flex: 1 1 0 !important; + } + .flex-xxl-1-0-0 { + flex: 1 0 0 !important; + } + .flex-xxl-0-1-0 { + flex: 0 1 0 !important; + } + .flex-xxl-0-0-0 { + flex: 0 0 0 !important; + } + .flex-xxl-row { + flex-direction: row !important; + } + .flex-xxl-column { + flex-direction: column !important; + } + .flex-xxl-row-reverse { + flex-direction: row-reverse !important; + } + .flex-xxl-column-reverse { + flex-direction: column-reverse !important; + } + .flex-xxl-grow-0 { + flex-grow: 0 !important; + } + .flex-xxl-grow-1 { + flex-grow: 1 !important; + } + .flex-xxl-shrink-0 { + flex-shrink: 0 !important; + } + .flex-xxl-shrink-1 { + flex-shrink: 1 !important; + } + .flex-xxl-wrap { + flex-wrap: wrap !important; + } + .flex-xxl-nowrap { + flex-wrap: nowrap !important; + } + .flex-xxl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .justify-xxl-start { + justify-content: flex-start !important; + } + .justify-xxl-end { + justify-content: flex-end !important; + } + .justify-xxl-center { + justify-content: center !important; + } + .justify-xxl-space-between { + justify-content: space-between !important; + } + .justify-xxl-space-around { + justify-content: space-around !important; + } + .justify-xxl-space-evenly { + justify-content: space-evenly !important; + } + .align-xxl-start { + align-items: flex-start !important; + } + .align-xxl-end { + align-items: flex-end !important; + } + .align-xxl-center { + align-items: center !important; + } + .align-xxl-baseline { + align-items: baseline !important; + } + .align-xxl-stretch { + align-items: stretch !important; + } + .align-content-xxl-start { + align-content: flex-start !important; + } + .align-content-xxl-end { + align-content: flex-end !important; + } + .align-content-xxl-center { + align-content: center !important; + } + .align-content-xxl-space-between { + align-content: space-between !important; + } + .align-content-xxl-space-around { + align-content: space-around !important; + } + .align-content-xxl-space-evenly { + align-content: space-evenly !important; + } + .align-content-xxl-stretch { + align-content: stretch !important; + } + .align-self-xxl-auto { + align-self: auto !important; + } + .align-self-xxl-start { + align-self: flex-start !important; + } + .align-self-xxl-end { + align-self: flex-end !important; + } + .align-self-xxl-center { + align-self: center !important; + } + .align-self-xxl-baseline { + align-self: baseline !important; + } + .align-self-xxl-stretch { + align-self: stretch !important; + } + .order-xxl-first { + order: -1 !important; + } + .order-xxl-0 { + order: 0 !important; + } + .order-xxl-1 { + order: 1 !important; + } + .order-xxl-2 { + order: 2 !important; + } + .order-xxl-3 { + order: 3 !important; + } + .order-xxl-4 { + order: 4 !important; + } + .order-xxl-5 { + order: 5 !important; + } + .order-xxl-6 { + order: 6 !important; + } + .order-xxl-7 { + order: 7 !important; + } + .order-xxl-8 { + order: 8 !important; + } + .order-xxl-9 { + order: 9 !important; + } + .order-xxl-10 { + order: 10 !important; + } + .order-xxl-11 { + order: 11 !important; + } + .order-xxl-12 { + order: 12 !important; + } + .order-xxl-last { + order: 13 !important; + } + .ga-xxl-0 { + gap: 0px !important; + } + .ga-xxl-1 { + gap: 4px !important; + } + .ga-xxl-2 { + gap: 8px !important; + } + .ga-xxl-3 { + gap: 12px !important; + } + .ga-xxl-4 { + gap: 16px !important; + } + .ga-xxl-5 { + gap: 20px !important; + } + .ga-xxl-6 { + gap: 24px !important; + } + .ga-xxl-7 { + gap: 28px !important; + } + .ga-xxl-8 { + gap: 32px !important; + } + .ga-xxl-9 { + gap: 36px !important; + } + .ga-xxl-10 { + gap: 40px !important; + } + .ga-xxl-11 { + gap: 44px !important; + } + .ga-xxl-12 { + gap: 48px !important; + } + .ga-xxl-13 { + gap: 52px !important; + } + .ga-xxl-14 { + gap: 56px !important; + } + .ga-xxl-15 { + gap: 60px !important; + } + .ga-xxl-16 { + gap: 64px !important; + } + .ga-xxl-auto { + gap: auto !important; + } + .gr-xxl-0 { + row-gap: 0px !important; + } + .gr-xxl-1 { + row-gap: 4px !important; + } + .gr-xxl-2 { + row-gap: 8px !important; + } + .gr-xxl-3 { + row-gap: 12px !important; + } + .gr-xxl-4 { + row-gap: 16px !important; + } + .gr-xxl-5 { + row-gap: 20px !important; + } + .gr-xxl-6 { + row-gap: 24px !important; + } + .gr-xxl-7 { + row-gap: 28px !important; + } + .gr-xxl-8 { + row-gap: 32px !important; + } + .gr-xxl-9 { + row-gap: 36px !important; + } + .gr-xxl-10 { + row-gap: 40px !important; + } + .gr-xxl-11 { + row-gap: 44px !important; + } + .gr-xxl-12 { + row-gap: 48px !important; + } + .gr-xxl-13 { + row-gap: 52px !important; + } + .gr-xxl-14 { + row-gap: 56px !important; + } + .gr-xxl-15 { + row-gap: 60px !important; + } + .gr-xxl-16 { + row-gap: 64px !important; + } + .gr-xxl-auto { + row-gap: auto !important; + } + .gc-xxl-0 { + column-gap: 0px !important; + } + .gc-xxl-1 { + column-gap: 4px !important; + } + .gc-xxl-2 { + column-gap: 8px !important; + } + .gc-xxl-3 { + column-gap: 12px !important; + } + .gc-xxl-4 { + column-gap: 16px !important; + } + .gc-xxl-5 { + column-gap: 20px !important; + } + .gc-xxl-6 { + column-gap: 24px !important; + } + .gc-xxl-7 { + column-gap: 28px !important; + } + .gc-xxl-8 { + column-gap: 32px !important; + } + .gc-xxl-9 { + column-gap: 36px !important; + } + .gc-xxl-10 { + column-gap: 40px !important; + } + .gc-xxl-11 { + column-gap: 44px !important; + } + .gc-xxl-12 { + column-gap: 48px !important; + } + .gc-xxl-13 { + column-gap: 52px !important; + } + .gc-xxl-14 { + column-gap: 56px !important; + } + .gc-xxl-15 { + column-gap: 60px !important; + } + .gc-xxl-16 { + column-gap: 64px !important; + } + .gc-xxl-auto { + column-gap: auto !important; + } + .ma-xxl-0 { + margin: 0px !important; + } + .ma-xxl-1 { + margin: 4px !important; + } + .ma-xxl-2 { + margin: 8px !important; + } + .ma-xxl-3 { + margin: 12px !important; + } + .ma-xxl-4 { + margin: 16px !important; + } + .ma-xxl-5 { + margin: 20px !important; + } + .ma-xxl-6 { + margin: 24px !important; + } + .ma-xxl-7 { + margin: 28px !important; + } + .ma-xxl-8 { + margin: 32px !important; + } + .ma-xxl-9 { + margin: 36px !important; + } + .ma-xxl-10 { + margin: 40px !important; + } + .ma-xxl-11 { + margin: 44px !important; + } + .ma-xxl-12 { + margin: 48px !important; + } + .ma-xxl-13 { + margin: 52px !important; + } + .ma-xxl-14 { + margin: 56px !important; + } + .ma-xxl-15 { + margin: 60px !important; + } + .ma-xxl-16 { + margin: 64px !important; + } + .ma-xxl-auto { + margin: auto !important; + } + .mx-xxl-0 { + margin-right: 0px !important; + margin-left: 0px !important; + } + .mx-xxl-1 { + margin-right: 4px !important; + margin-left: 4px !important; + } + .mx-xxl-2 { + margin-right: 8px !important; + margin-left: 8px !important; + } + .mx-xxl-3 { + margin-right: 12px !important; + margin-left: 12px !important; + } + .mx-xxl-4 { + margin-right: 16px !important; + margin-left: 16px !important; + } + .mx-xxl-5 { + margin-right: 20px !important; + margin-left: 20px !important; + } + .mx-xxl-6 { + margin-right: 24px !important; + margin-left: 24px !important; + } + .mx-xxl-7 { + margin-right: 28px !important; + margin-left: 28px !important; + } + .mx-xxl-8 { + margin-right: 32px !important; + margin-left: 32px !important; + } + .mx-xxl-9 { + margin-right: 36px !important; + margin-left: 36px !important; + } + .mx-xxl-10 { + margin-right: 40px !important; + margin-left: 40px !important; + } + .mx-xxl-11 { + margin-right: 44px !important; + margin-left: 44px !important; + } + .mx-xxl-12 { + margin-right: 48px !important; + margin-left: 48px !important; + } + .mx-xxl-13 { + margin-right: 52px !important; + margin-left: 52px !important; + } + .mx-xxl-14 { + margin-right: 56px !important; + margin-left: 56px !important; + } + .mx-xxl-15 { + margin-right: 60px !important; + margin-left: 60px !important; + } + .mx-xxl-16 { + margin-right: 64px !important; + margin-left: 64px !important; + } + .mx-xxl-auto { + margin-right: auto !important; + margin-left: auto !important; + } + .my-xxl-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + .my-xxl-1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .my-xxl-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .my-xxl-3 { + margin-top: 12px !important; + margin-bottom: 12px !important; + } + .my-xxl-4 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .my-xxl-5 { + margin-top: 20px !important; + margin-bottom: 20px !important; + } + .my-xxl-6 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .my-xxl-7 { + margin-top: 28px !important; + margin-bottom: 28px !important; + } + .my-xxl-8 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .my-xxl-9 { + margin-top: 36px !important; + margin-bottom: 36px !important; + } + .my-xxl-10 { + margin-top: 40px !important; + margin-bottom: 40px !important; + } + .my-xxl-11 { + margin-top: 44px !important; + margin-bottom: 44px !important; + } + .my-xxl-12 { + margin-top: 48px !important; + margin-bottom: 48px !important; + } + .my-xxl-13 { + margin-top: 52px !important; + margin-bottom: 52px !important; + } + .my-xxl-14 { + margin-top: 56px !important; + margin-bottom: 56px !important; + } + .my-xxl-15 { + margin-top: 60px !important; + margin-bottom: 60px !important; + } + .my-xxl-16 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .my-xxl-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + .mt-xxl-0 { + margin-top: 0px !important; + } + .mt-xxl-1 { + margin-top: 4px !important; + } + .mt-xxl-2 { + margin-top: 8px !important; + } + .mt-xxl-3 { + margin-top: 12px !important; + } + .mt-xxl-4 { + margin-top: 16px !important; + } + .mt-xxl-5 { + margin-top: 20px !important; + } + .mt-xxl-6 { + margin-top: 24px !important; + } + .mt-xxl-7 { + margin-top: 28px !important; + } + .mt-xxl-8 { + margin-top: 32px !important; + } + .mt-xxl-9 { + margin-top: 36px !important; + } + .mt-xxl-10 { + margin-top: 40px !important; + } + .mt-xxl-11 { + margin-top: 44px !important; + } + .mt-xxl-12 { + margin-top: 48px !important; + } + .mt-xxl-13 { + margin-top: 52px !important; + } + .mt-xxl-14 { + margin-top: 56px !important; + } + .mt-xxl-15 { + margin-top: 60px !important; + } + .mt-xxl-16 { + margin-top: 64px !important; + } + .mt-xxl-auto { + margin-top: auto !important; + } + .mr-xxl-0 { + margin-right: 0px !important; + } + .mr-xxl-1 { + margin-right: 4px !important; + } + .mr-xxl-2 { + margin-right: 8px !important; + } + .mr-xxl-3 { + margin-right: 12px !important; + } + .mr-xxl-4 { + margin-right: 16px !important; + } + .mr-xxl-5 { + margin-right: 20px !important; + } + .mr-xxl-6 { + margin-right: 24px !important; + } + .mr-xxl-7 { + margin-right: 28px !important; + } + .mr-xxl-8 { + margin-right: 32px !important; + } + .mr-xxl-9 { + margin-right: 36px !important; + } + .mr-xxl-10 { + margin-right: 40px !important; + } + .mr-xxl-11 { + margin-right: 44px !important; + } + .mr-xxl-12 { + margin-right: 48px !important; + } + .mr-xxl-13 { + margin-right: 52px !important; + } + .mr-xxl-14 { + margin-right: 56px !important; + } + .mr-xxl-15 { + margin-right: 60px !important; + } + .mr-xxl-16 { + margin-right: 64px !important; + } + .mr-xxl-auto { + margin-right: auto !important; + } + .mb-xxl-0 { + margin-bottom: 0px !important; + } + .mb-xxl-1 { + margin-bottom: 4px !important; + } + .mb-xxl-2 { + margin-bottom: 8px !important; + } + .mb-xxl-3 { + margin-bottom: 12px !important; + } + .mb-xxl-4 { + margin-bottom: 16px !important; + } + .mb-xxl-5 { + margin-bottom: 20px !important; + } + .mb-xxl-6 { + margin-bottom: 24px !important; + } + .mb-xxl-7 { + margin-bottom: 28px !important; + } + .mb-xxl-8 { + margin-bottom: 32px !important; + } + .mb-xxl-9 { + margin-bottom: 36px !important; + } + .mb-xxl-10 { + margin-bottom: 40px !important; + } + .mb-xxl-11 { + margin-bottom: 44px !important; + } + .mb-xxl-12 { + margin-bottom: 48px !important; + } + .mb-xxl-13 { + margin-bottom: 52px !important; + } + .mb-xxl-14 { + margin-bottom: 56px !important; + } + .mb-xxl-15 { + margin-bottom: 60px !important; + } + .mb-xxl-16 { + margin-bottom: 64px !important; + } + .mb-xxl-auto { + margin-bottom: auto !important; + } + .ml-xxl-0 { + margin-left: 0px !important; + } + .ml-xxl-1 { + margin-left: 4px !important; + } + .ml-xxl-2 { + margin-left: 8px !important; + } + .ml-xxl-3 { + margin-left: 12px !important; + } + .ml-xxl-4 { + margin-left: 16px !important; + } + .ml-xxl-5 { + margin-left: 20px !important; + } + .ml-xxl-6 { + margin-left: 24px !important; + } + .ml-xxl-7 { + margin-left: 28px !important; + } + .ml-xxl-8 { + margin-left: 32px !important; + } + .ml-xxl-9 { + margin-left: 36px !important; + } + .ml-xxl-10 { + margin-left: 40px !important; + } + .ml-xxl-11 { + margin-left: 44px !important; + } + .ml-xxl-12 { + margin-left: 48px !important; + } + .ml-xxl-13 { + margin-left: 52px !important; + } + .ml-xxl-14 { + margin-left: 56px !important; + } + .ml-xxl-15 { + margin-left: 60px !important; + } + .ml-xxl-16 { + margin-left: 64px !important; + } + .ml-xxl-auto { + margin-left: auto !important; + } + .ms-xxl-0 { + margin-inline-start: 0px !important; + } + .ms-xxl-1 { + margin-inline-start: 4px !important; + } + .ms-xxl-2 { + margin-inline-start: 8px !important; + } + .ms-xxl-3 { + margin-inline-start: 12px !important; + } + .ms-xxl-4 { + margin-inline-start: 16px !important; + } + .ms-xxl-5 { + margin-inline-start: 20px !important; + } + .ms-xxl-6 { + margin-inline-start: 24px !important; + } + .ms-xxl-7 { + margin-inline-start: 28px !important; + } + .ms-xxl-8 { + margin-inline-start: 32px !important; + } + .ms-xxl-9 { + margin-inline-start: 36px !important; + } + .ms-xxl-10 { + margin-inline-start: 40px !important; + } + .ms-xxl-11 { + margin-inline-start: 44px !important; + } + .ms-xxl-12 { + margin-inline-start: 48px !important; + } + .ms-xxl-13 { + margin-inline-start: 52px !important; + } + .ms-xxl-14 { + margin-inline-start: 56px !important; + } + .ms-xxl-15 { + margin-inline-start: 60px !important; + } + .ms-xxl-16 { + margin-inline-start: 64px !important; + } + .ms-xxl-auto { + margin-inline-start: auto !important; + } + .me-xxl-0 { + margin-inline-end: 0px !important; + } + .me-xxl-1 { + margin-inline-end: 4px !important; + } + .me-xxl-2 { + margin-inline-end: 8px !important; + } + .me-xxl-3 { + margin-inline-end: 12px !important; + } + .me-xxl-4 { + margin-inline-end: 16px !important; + } + .me-xxl-5 { + margin-inline-end: 20px !important; + } + .me-xxl-6 { + margin-inline-end: 24px !important; + } + .me-xxl-7 { + margin-inline-end: 28px !important; + } + .me-xxl-8 { + margin-inline-end: 32px !important; + } + .me-xxl-9 { + margin-inline-end: 36px !important; + } + .me-xxl-10 { + margin-inline-end: 40px !important; + } + .me-xxl-11 { + margin-inline-end: 44px !important; + } + .me-xxl-12 { + margin-inline-end: 48px !important; + } + .me-xxl-13 { + margin-inline-end: 52px !important; + } + .me-xxl-14 { + margin-inline-end: 56px !important; + } + .me-xxl-15 { + margin-inline-end: 60px !important; + } + .me-xxl-16 { + margin-inline-end: 64px !important; + } + .me-xxl-auto { + margin-inline-end: auto !important; + } + .ma-xxl-n1 { + margin: -4px !important; + } + .ma-xxl-n2 { + margin: -8px !important; + } + .ma-xxl-n3 { + margin: -12px !important; + } + .ma-xxl-n4 { + margin: -16px !important; + } + .ma-xxl-n5 { + margin: -20px !important; + } + .ma-xxl-n6 { + margin: -24px !important; + } + .ma-xxl-n7 { + margin: -28px !important; + } + .ma-xxl-n8 { + margin: -32px !important; + } + .ma-xxl-n9 { + margin: -36px !important; + } + .ma-xxl-n10 { + margin: -40px !important; + } + .ma-xxl-n11 { + margin: -44px !important; + } + .ma-xxl-n12 { + margin: -48px !important; + } + .ma-xxl-n13 { + margin: -52px !important; + } + .ma-xxl-n14 { + margin: -56px !important; + } + .ma-xxl-n15 { + margin: -60px !important; + } + .ma-xxl-n16 { + margin: -64px !important; + } + .mx-xxl-n1 { + margin-right: -4px !important; + margin-left: -4px !important; + } + .mx-xxl-n2 { + margin-right: -8px !important; + margin-left: -8px !important; + } + .mx-xxl-n3 { + margin-right: -12px !important; + margin-left: -12px !important; + } + .mx-xxl-n4 { + margin-right: -16px !important; + margin-left: -16px !important; + } + .mx-xxl-n5 { + margin-right: -20px !important; + margin-left: -20px !important; + } + .mx-xxl-n6 { + margin-right: -24px !important; + margin-left: -24px !important; + } + .mx-xxl-n7 { + margin-right: -28px !important; + margin-left: -28px !important; + } + .mx-xxl-n8 { + margin-right: -32px !important; + margin-left: -32px !important; + } + .mx-xxl-n9 { + margin-right: -36px !important; + margin-left: -36px !important; + } + .mx-xxl-n10 { + margin-right: -40px !important; + margin-left: -40px !important; + } + .mx-xxl-n11 { + margin-right: -44px !important; + margin-left: -44px !important; + } + .mx-xxl-n12 { + margin-right: -48px !important; + margin-left: -48px !important; + } + .mx-xxl-n13 { + margin-right: -52px !important; + margin-left: -52px !important; + } + .mx-xxl-n14 { + margin-right: -56px !important; + margin-left: -56px !important; + } + .mx-xxl-n15 { + margin-right: -60px !important; + margin-left: -60px !important; + } + .mx-xxl-n16 { + margin-right: -64px !important; + margin-left: -64px !important; + } + .my-xxl-n1 { + margin-top: -4px !important; + margin-bottom: -4px !important; + } + .my-xxl-n2 { + margin-top: -8px !important; + margin-bottom: -8px !important; + } + .my-xxl-n3 { + margin-top: -12px !important; + margin-bottom: -12px !important; + } + .my-xxl-n4 { + margin-top: -16px !important; + margin-bottom: -16px !important; + } + .my-xxl-n5 { + margin-top: -20px !important; + margin-bottom: -20px !important; + } + .my-xxl-n6 { + margin-top: -24px !important; + margin-bottom: -24px !important; + } + .my-xxl-n7 { + margin-top: -28px !important; + margin-bottom: -28px !important; + } + .my-xxl-n8 { + margin-top: -32px !important; + margin-bottom: -32px !important; + } + .my-xxl-n9 { + margin-top: -36px !important; + margin-bottom: -36px !important; + } + .my-xxl-n10 { + margin-top: -40px !important; + margin-bottom: -40px !important; + } + .my-xxl-n11 { + margin-top: -44px !important; + margin-bottom: -44px !important; + } + .my-xxl-n12 { + margin-top: -48px !important; + margin-bottom: -48px !important; + } + .my-xxl-n13 { + margin-top: -52px !important; + margin-bottom: -52px !important; + } + .my-xxl-n14 { + margin-top: -56px !important; + margin-bottom: -56px !important; + } + .my-xxl-n15 { + margin-top: -60px !important; + margin-bottom: -60px !important; + } + .my-xxl-n16 { + margin-top: -64px !important; + margin-bottom: -64px !important; + } + .mt-xxl-n1 { + margin-top: -4px !important; + } + .mt-xxl-n2 { + margin-top: -8px !important; + } + .mt-xxl-n3 { + margin-top: -12px !important; + } + .mt-xxl-n4 { + margin-top: -16px !important; + } + .mt-xxl-n5 { + margin-top: -20px !important; + } + .mt-xxl-n6 { + margin-top: -24px !important; + } + .mt-xxl-n7 { + margin-top: -28px !important; + } + .mt-xxl-n8 { + margin-top: -32px !important; + } + .mt-xxl-n9 { + margin-top: -36px !important; + } + .mt-xxl-n10 { + margin-top: -40px !important; + } + .mt-xxl-n11 { + margin-top: -44px !important; + } + .mt-xxl-n12 { + margin-top: -48px !important; + } + .mt-xxl-n13 { + margin-top: -52px !important; + } + .mt-xxl-n14 { + margin-top: -56px !important; + } + .mt-xxl-n15 { + margin-top: -60px !important; + } + .mt-xxl-n16 { + margin-top: -64px !important; + } + .mr-xxl-n1 { + margin-right: -4px !important; + } + .mr-xxl-n2 { + margin-right: -8px !important; + } + .mr-xxl-n3 { + margin-right: -12px !important; + } + .mr-xxl-n4 { + margin-right: -16px !important; + } + .mr-xxl-n5 { + margin-right: -20px !important; + } + .mr-xxl-n6 { + margin-right: -24px !important; + } + .mr-xxl-n7 { + margin-right: -28px !important; + } + .mr-xxl-n8 { + margin-right: -32px !important; + } + .mr-xxl-n9 { + margin-right: -36px !important; + } + .mr-xxl-n10 { + margin-right: -40px !important; + } + .mr-xxl-n11 { + margin-right: -44px !important; + } + .mr-xxl-n12 { + margin-right: -48px !important; + } + .mr-xxl-n13 { + margin-right: -52px !important; + } + .mr-xxl-n14 { + margin-right: -56px !important; + } + .mr-xxl-n15 { + margin-right: -60px !important; + } + .mr-xxl-n16 { + margin-right: -64px !important; + } + .mb-xxl-n1 { + margin-bottom: -4px !important; + } + .mb-xxl-n2 { + margin-bottom: -8px !important; + } + .mb-xxl-n3 { + margin-bottom: -12px !important; + } + .mb-xxl-n4 { + margin-bottom: -16px !important; + } + .mb-xxl-n5 { + margin-bottom: -20px !important; + } + .mb-xxl-n6 { + margin-bottom: -24px !important; + } + .mb-xxl-n7 { + margin-bottom: -28px !important; + } + .mb-xxl-n8 { + margin-bottom: -32px !important; + } + .mb-xxl-n9 { + margin-bottom: -36px !important; + } + .mb-xxl-n10 { + margin-bottom: -40px !important; + } + .mb-xxl-n11 { + margin-bottom: -44px !important; + } + .mb-xxl-n12 { + margin-bottom: -48px !important; + } + .mb-xxl-n13 { + margin-bottom: -52px !important; + } + .mb-xxl-n14 { + margin-bottom: -56px !important; + } + .mb-xxl-n15 { + margin-bottom: -60px !important; + } + .mb-xxl-n16 { + margin-bottom: -64px !important; + } + .ml-xxl-n1 { + margin-left: -4px !important; + } + .ml-xxl-n2 { + margin-left: -8px !important; + } + .ml-xxl-n3 { + margin-left: -12px !important; + } + .ml-xxl-n4 { + margin-left: -16px !important; + } + .ml-xxl-n5 { + margin-left: -20px !important; + } + .ml-xxl-n6 { + margin-left: -24px !important; + } + .ml-xxl-n7 { + margin-left: -28px !important; + } + .ml-xxl-n8 { + margin-left: -32px !important; + } + .ml-xxl-n9 { + margin-left: -36px !important; + } + .ml-xxl-n10 { + margin-left: -40px !important; + } + .ml-xxl-n11 { + margin-left: -44px !important; + } + .ml-xxl-n12 { + margin-left: -48px !important; + } + .ml-xxl-n13 { + margin-left: -52px !important; + } + .ml-xxl-n14 { + margin-left: -56px !important; + } + .ml-xxl-n15 { + margin-left: -60px !important; + } + .ml-xxl-n16 { + margin-left: -64px !important; + } + .ms-xxl-n1 { + margin-inline-start: -4px !important; + } + .ms-xxl-n2 { + margin-inline-start: -8px !important; + } + .ms-xxl-n3 { + margin-inline-start: -12px !important; + } + .ms-xxl-n4 { + margin-inline-start: -16px !important; + } + .ms-xxl-n5 { + margin-inline-start: -20px !important; + } + .ms-xxl-n6 { + margin-inline-start: -24px !important; + } + .ms-xxl-n7 { + margin-inline-start: -28px !important; + } + .ms-xxl-n8 { + margin-inline-start: -32px !important; + } + .ms-xxl-n9 { + margin-inline-start: -36px !important; + } + .ms-xxl-n10 { + margin-inline-start: -40px !important; + } + .ms-xxl-n11 { + margin-inline-start: -44px !important; + } + .ms-xxl-n12 { + margin-inline-start: -48px !important; + } + .ms-xxl-n13 { + margin-inline-start: -52px !important; + } + .ms-xxl-n14 { + margin-inline-start: -56px !important; + } + .ms-xxl-n15 { + margin-inline-start: -60px !important; + } + .ms-xxl-n16 { + margin-inline-start: -64px !important; + } + .me-xxl-n1 { + margin-inline-end: -4px !important; + } + .me-xxl-n2 { + margin-inline-end: -8px !important; + } + .me-xxl-n3 { + margin-inline-end: -12px !important; + } + .me-xxl-n4 { + margin-inline-end: -16px !important; + } + .me-xxl-n5 { + margin-inline-end: -20px !important; + } + .me-xxl-n6 { + margin-inline-end: -24px !important; + } + .me-xxl-n7 { + margin-inline-end: -28px !important; + } + .me-xxl-n8 { + margin-inline-end: -32px !important; + } + .me-xxl-n9 { + margin-inline-end: -36px !important; + } + .me-xxl-n10 { + margin-inline-end: -40px !important; + } + .me-xxl-n11 { + margin-inline-end: -44px !important; + } + .me-xxl-n12 { + margin-inline-end: -48px !important; + } + .me-xxl-n13 { + margin-inline-end: -52px !important; + } + .me-xxl-n14 { + margin-inline-end: -56px !important; + } + .me-xxl-n15 { + margin-inline-end: -60px !important; + } + .me-xxl-n16 { + margin-inline-end: -64px !important; + } + .pa-xxl-0 { + padding: 0px !important; + } + .pa-xxl-1 { + padding: 4px !important; + } + .pa-xxl-2 { + padding: 8px !important; + } + .pa-xxl-3 { + padding: 12px !important; + } + .pa-xxl-4 { + padding: 16px !important; + } + .pa-xxl-5 { + padding: 20px !important; + } + .pa-xxl-6 { + padding: 24px !important; + } + .pa-xxl-7 { + padding: 28px !important; + } + .pa-xxl-8 { + padding: 32px !important; + } + .pa-xxl-9 { + padding: 36px !important; + } + .pa-xxl-10 { + padding: 40px !important; + } + .pa-xxl-11 { + padding: 44px !important; + } + .pa-xxl-12 { + padding: 48px !important; + } + .pa-xxl-13 { + padding: 52px !important; + } + .pa-xxl-14 { + padding: 56px !important; + } + .pa-xxl-15 { + padding: 60px !important; + } + .pa-xxl-16 { + padding: 64px !important; + } + .px-xxl-0 { + padding-right: 0px !important; + padding-left: 0px !important; + } + .px-xxl-1 { + padding-right: 4px !important; + padding-left: 4px !important; + } + .px-xxl-2 { + padding-right: 8px !important; + padding-left: 8px !important; + } + .px-xxl-3 { + padding-right: 12px !important; + padding-left: 12px !important; + } + .px-xxl-4 { + padding-right: 16px !important; + padding-left: 16px !important; + } + .px-xxl-5 { + padding-right: 20px !important; + padding-left: 20px !important; + } + .px-xxl-6 { + padding-right: 24px !important; + padding-left: 24px !important; + } + .px-xxl-7 { + padding-right: 28px !important; + padding-left: 28px !important; + } + .px-xxl-8 { + padding-right: 32px !important; + padding-left: 32px !important; + } + .px-xxl-9 { + padding-right: 36px !important; + padding-left: 36px !important; + } + .px-xxl-10 { + padding-right: 40px !important; + padding-left: 40px !important; + } + .px-xxl-11 { + padding-right: 44px !important; + padding-left: 44px !important; + } + .px-xxl-12 { + padding-right: 48px !important; + padding-left: 48px !important; + } + .px-xxl-13 { + padding-right: 52px !important; + padding-left: 52px !important; + } + .px-xxl-14 { + padding-right: 56px !important; + padding-left: 56px !important; + } + .px-xxl-15 { + padding-right: 60px !important; + padding-left: 60px !important; + } + .px-xxl-16 { + padding-right: 64px !important; + padding-left: 64px !important; + } + .py-xxl-0 { + padding-top: 0px !important; + padding-bottom: 0px !important; + } + .py-xxl-1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .py-xxl-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .py-xxl-3 { + padding-top: 12px !important; + padding-bottom: 12px !important; + } + .py-xxl-4 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .py-xxl-5 { + padding-top: 20px !important; + padding-bottom: 20px !important; + } + .py-xxl-6 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .py-xxl-7 { + padding-top: 28px !important; + padding-bottom: 28px !important; + } + .py-xxl-8 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .py-xxl-9 { + padding-top: 36px !important; + padding-bottom: 36px !important; + } + .py-xxl-10 { + padding-top: 40px !important; + padding-bottom: 40px !important; + } + .py-xxl-11 { + padding-top: 44px !important; + padding-bottom: 44px !important; + } + .py-xxl-12 { + padding-top: 48px !important; + padding-bottom: 48px !important; + } + .py-xxl-13 { + padding-top: 52px !important; + padding-bottom: 52px !important; + } + .py-xxl-14 { + padding-top: 56px !important; + padding-bottom: 56px !important; + } + .py-xxl-15 { + padding-top: 60px !important; + padding-bottom: 60px !important; + } + .py-xxl-16 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .pt-xxl-0 { + padding-top: 0px !important; + } + .pt-xxl-1 { + padding-top: 4px !important; + } + .pt-xxl-2 { + padding-top: 8px !important; + } + .pt-xxl-3 { + padding-top: 12px !important; + } + .pt-xxl-4 { + padding-top: 16px !important; + } + .pt-xxl-5 { + padding-top: 20px !important; + } + .pt-xxl-6 { + padding-top: 24px !important; + } + .pt-xxl-7 { + padding-top: 28px !important; + } + .pt-xxl-8 { + padding-top: 32px !important; + } + .pt-xxl-9 { + padding-top: 36px !important; + } + .pt-xxl-10 { + padding-top: 40px !important; + } + .pt-xxl-11 { + padding-top: 44px !important; + } + .pt-xxl-12 { + padding-top: 48px !important; + } + .pt-xxl-13 { + padding-top: 52px !important; + } + .pt-xxl-14 { + padding-top: 56px !important; + } + .pt-xxl-15 { + padding-top: 60px !important; + } + .pt-xxl-16 { + padding-top: 64px !important; + } + .pr-xxl-0 { + padding-right: 0px !important; + } + .pr-xxl-1 { + padding-right: 4px !important; + } + .pr-xxl-2 { + padding-right: 8px !important; + } + .pr-xxl-3 { + padding-right: 12px !important; + } + .pr-xxl-4 { + padding-right: 16px !important; + } + .pr-xxl-5 { + padding-right: 20px !important; + } + .pr-xxl-6 { + padding-right: 24px !important; + } + .pr-xxl-7 { + padding-right: 28px !important; + } + .pr-xxl-8 { + padding-right: 32px !important; + } + .pr-xxl-9 { + padding-right: 36px !important; + } + .pr-xxl-10 { + padding-right: 40px !important; + } + .pr-xxl-11 { + padding-right: 44px !important; + } + .pr-xxl-12 { + padding-right: 48px !important; + } + .pr-xxl-13 { + padding-right: 52px !important; + } + .pr-xxl-14 { + padding-right: 56px !important; + } + .pr-xxl-15 { + padding-right: 60px !important; + } + .pr-xxl-16 { + padding-right: 64px !important; + } + .pb-xxl-0 { + padding-bottom: 0px !important; + } + .pb-xxl-1 { + padding-bottom: 4px !important; + } + .pb-xxl-2 { + padding-bottom: 8px !important; + } + .pb-xxl-3 { + padding-bottom: 12px !important; + } + .pb-xxl-4 { + padding-bottom: 16px !important; + } + .pb-xxl-5 { + padding-bottom: 20px !important; + } + .pb-xxl-6 { + padding-bottom: 24px !important; + } + .pb-xxl-7 { + padding-bottom: 28px !important; + } + .pb-xxl-8 { + padding-bottom: 32px !important; + } + .pb-xxl-9 { + padding-bottom: 36px !important; + } + .pb-xxl-10 { + padding-bottom: 40px !important; + } + .pb-xxl-11 { + padding-bottom: 44px !important; + } + .pb-xxl-12 { + padding-bottom: 48px !important; + } + .pb-xxl-13 { + padding-bottom: 52px !important; + } + .pb-xxl-14 { + padding-bottom: 56px !important; + } + .pb-xxl-15 { + padding-bottom: 60px !important; + } + .pb-xxl-16 { + padding-bottom: 64px !important; + } + .pl-xxl-0 { + padding-left: 0px !important; + } + .pl-xxl-1 { + padding-left: 4px !important; + } + .pl-xxl-2 { + padding-left: 8px !important; + } + .pl-xxl-3 { + padding-left: 12px !important; + } + .pl-xxl-4 { + padding-left: 16px !important; + } + .pl-xxl-5 { + padding-left: 20px !important; + } + .pl-xxl-6 { + padding-left: 24px !important; + } + .pl-xxl-7 { + padding-left: 28px !important; + } + .pl-xxl-8 { + padding-left: 32px !important; + } + .pl-xxl-9 { + padding-left: 36px !important; + } + .pl-xxl-10 { + padding-left: 40px !important; + } + .pl-xxl-11 { + padding-left: 44px !important; + } + .pl-xxl-12 { + padding-left: 48px !important; + } + .pl-xxl-13 { + padding-left: 52px !important; + } + .pl-xxl-14 { + padding-left: 56px !important; + } + .pl-xxl-15 { + padding-left: 60px !important; + } + .pl-xxl-16 { + padding-left: 64px !important; + } + .ps-xxl-0 { + padding-inline-start: 0px !important; + } + .ps-xxl-1 { + padding-inline-start: 4px !important; + } + .ps-xxl-2 { + padding-inline-start: 8px !important; + } + .ps-xxl-3 { + padding-inline-start: 12px !important; + } + .ps-xxl-4 { + padding-inline-start: 16px !important; + } + .ps-xxl-5 { + padding-inline-start: 20px !important; + } + .ps-xxl-6 { + padding-inline-start: 24px !important; + } + .ps-xxl-7 { + padding-inline-start: 28px !important; + } + .ps-xxl-8 { + padding-inline-start: 32px !important; + } + .ps-xxl-9 { + padding-inline-start: 36px !important; + } + .ps-xxl-10 { + padding-inline-start: 40px !important; + } + .ps-xxl-11 { + padding-inline-start: 44px !important; + } + .ps-xxl-12 { + padding-inline-start: 48px !important; + } + .ps-xxl-13 { + padding-inline-start: 52px !important; + } + .ps-xxl-14 { + padding-inline-start: 56px !important; + } + .ps-xxl-15 { + padding-inline-start: 60px !important; + } + .ps-xxl-16 { + padding-inline-start: 64px !important; + } + .pe-xxl-0 { + padding-inline-end: 0px !important; + } + .pe-xxl-1 { + padding-inline-end: 4px !important; + } + .pe-xxl-2 { + padding-inline-end: 8px !important; + } + .pe-xxl-3 { + padding-inline-end: 12px !important; + } + .pe-xxl-4 { + padding-inline-end: 16px !important; + } + .pe-xxl-5 { + padding-inline-end: 20px !important; + } + .pe-xxl-6 { + padding-inline-end: 24px !important; + } + .pe-xxl-7 { + padding-inline-end: 28px !important; + } + .pe-xxl-8 { + padding-inline-end: 32px !important; + } + .pe-xxl-9 { + padding-inline-end: 36px !important; + } + .pe-xxl-10 { + padding-inline-end: 40px !important; + } + .pe-xxl-11 { + padding-inline-end: 44px !important; + } + .pe-xxl-12 { + padding-inline-end: 48px !important; + } + .pe-xxl-13 { + padding-inline-end: 52px !important; + } + .pe-xxl-14 { + padding-inline-end: 56px !important; + } + .pe-xxl-15 { + padding-inline-end: 60px !important; + } + .pe-xxl-16 { + padding-inline-end: 64px !important; + } + .text-xxl-left { + text-align: left !important; + } + .text-xxl-right { + text-align: right !important; + } + .text-xxl-center { + text-align: center !important; + } + .text-xxl-justify { + text-align: justify !important; + } + .text-xxl-start { + text-align: start !important; + } + .text-xxl-end { + text-align: end !important; + } + .text-xxl-h1 { + font-size: 6rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.015625em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-h2 { + font-size: 3.75rem !important; + font-weight: 300; + line-height: 1; + letter-spacing: -0.0083333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-h3 { + font-size: 3rem !important; + font-weight: 400; + line-height: 1.05; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-h4 { + font-size: 2.125rem !important; + font-weight: 400; + line-height: 1.175; + letter-spacing: 0.0073529412em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-h5 { + font-size: 1.5rem !important; + font-weight: 400; + line-height: 1.333; + letter-spacing: normal !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-h6 { + font-size: 1.25rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-subtitle-1 { + font-size: 1rem !important; + font-weight: normal; + line-height: 1.75; + letter-spacing: 0.009375em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-subtitle-2 { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 1.6; + letter-spacing: 0.0071428571em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-body-1 { + font-size: 1rem !important; + font-weight: 400; + line-height: 1.5; + letter-spacing: 0.03125em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-body-2 { + font-size: 0.875rem !important; + font-weight: 400; + line-height: 1.425; + letter-spacing: 0.0178571429em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-button { + font-size: 0.875rem !important; + font-weight: 500; + line-height: 2.6; + letter-spacing: 0.0892857143em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .text-xxl-caption { + font-size: 0.75rem !important; + font-weight: 400; + line-height: 1.667; + letter-spacing: 0.0333333333em !important; + font-family: "Roboto", sans-serif; + text-transform: none !important; + } + .text-xxl-overline { + font-size: 0.75rem !important; + font-weight: 500; + line-height: 2.667; + letter-spacing: 0.1666666667em !important; + font-family: "Roboto", sans-serif; + text-transform: uppercase !important; + } + .h-xxl-auto { + height: auto !important; + } + .h-xxl-screen { + height: 100vh !important; + } + .h-xxl-0 { + height: 0 !important; + } + .h-xxl-25 { + height: 25% !important; + } + .h-xxl-50 { + height: 50% !important; + } + .h-xxl-75 { + height: 75% !important; + } + .h-xxl-100 { + height: 100% !important; + } + .w-xxl-auto { + width: auto !important; + } + .w-xxl-0 { + width: 0 !important; + } + .w-xxl-25 { + width: 25% !important; + } + .w-xxl-33 { + width: 33% !important; + } + .w-xxl-50 { + width: 50% !important; + } + .w-xxl-66 { + width: 66% !important; + } + .w-xxl-75 { + width: 75% !important; + } + .w-xxl-100 { + width: 100% !important; + } +} +@media print { + .d-print-none { + display: none !important; + } + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: flex !important; + } + .d-print-inline-flex { + display: inline-flex !important; + } + .float-print-none { + float: none !important; + } + .float-print-left { + float: left !important; + } + .float-print-right { + float: right !important; + } + .v-locale--is-rtl .float-print-end { + float: left !important; + } + .v-locale--is-rtl .float-print-start { + float: right !important; + } + .v-locale--is-ltr .float-print-end { + float: right !important; + } + .v-locale--is-ltr .float-print-start { + float: left !important; + } +}.a-divider { + display: block; + flex: 1 1 100%; + height: 0px; + max-height: 0px; + opacity: var(--v-border-opacity); + transition: inherit; + border-style: solid; + border-width: thin 0 0 0; +} +.a-divider--vertical { + align-self: stretch; + border-width: 0 thin 0 0; + display: inline-flex; + height: auto; + margin-left: -1px; + max-height: 100%; + max-width: 0px; + vertical-align: text-bottom; + width: 0px; +} +.a-divider--inset:not(.a-divider--vertical) { + max-width: calc(100% - 72px); + margin-inline-start: 72px; +} +.a-divider--inset.a-divider--vertical { + margin-bottom: 8px; + margin-top: 8px; + max-height: calc(100% - 16px); +} + +.a-divider__content { + padding: 0 16px; + text-wrap: nowrap; +} +.a-divider__wrapper--vertical .a-divider__content { + padding: 4px 0; +} + +.a-divider__wrapper { + display: flex; + align-items: center; + justify-content: center; +} +.a-divider__wrapper--vertical { + flex-direction: column; + height: 100%; +} +.a-divider__wrapper--vertical .a-divider { + margin: 0 auto; +} \ No newline at end of file diff --git a/packages/alpinui/dev/alpinui.js b/packages/alpinui/dev/alpinui.js new file mode 100644 index 0000000..152f29b --- /dev/null +++ b/packages/alpinui/dev/alpinui.js @@ -0,0 +1,3274 @@ +/*! +* Vuetify v0.0.1 +* Forged by John Leider +* Released under the MIT License. +*/ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('alpine-composition'), require('alpine-reactivity')) : + typeof define === 'function' && define.amd ? define(['exports', 'vue', 'alpine-composition', 'alpine-reactivity'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Alpinui = {}, global.Vue, global.AlpineComposition, global.AlpineReactivity)); +})(this, (function (exports, vue, alpineComposition, alpineReactivity) { 'use strict'; + + // Types + // eslint-disable-line vue/prefer-import-from-vue + + /** + * Creates a factory function for props definitions. + * This is used to define props in a composable then override + * default values in an implementing component. + * + * @example Simplified signature + * (props: Props) => (defaults?: Record) => Props + * + * @example Usage + * const makeProps = propsFactory({ + * foo: String, + * }) + * + * defineComponent({ + * props: { + * ...makeProps({ + * foo: 'a', + * }), + * }, + * setup (props) { + * // would be "string | undefined", now "string" because a default has been provided + * props.foo + * }, + * } + */ + + function propsFactory(props, source) { + return defaults => { + return Object.keys(props).reduce((obj, prop) => { + const isObjectDefinition = typeof props[prop] === 'object' && props[prop] != null && !Array.isArray(props[prop]); + const definition = isObjectDefinition ? props[prop] : { + type: props[prop] + }; + if (defaults && prop in defaults) { + obj[prop] = { + ...definition, + default: defaults[prop] + }; + } else { + obj[prop] = definition; + } + if (source && !obj[prop].source) { + obj[prop].source = source; + } + return obj; + }, {}); + }; + } + + /** + * Like `Partial` but doesn't care what the value is + */ + + // Copied from Vue + + // Types + + const IconValue = [String, Function, Object, Array]; + const makeIconProps = propsFactory({ + icon: { + type: IconValue + }, + // Could not remove this and use makeTagProps, types complained because it is not required + tag: { + type: String, + required: true + } + }, 'icon'); + alpineComposition.defineComponent({ + name: 'VComponentIcon', + props: makeIconProps(), + setup(props, vm) { + const slots = {}; // TODO + + return () => { + const Icon = props.icon; + return vue.createVNode(props.tag, null, { + default: () => [props.icon ? vue.createVNode(Icon, null, null) : slots.default?.()] + }); + }; + } + }); + const VSvgIcon = alpineComposition.defineComponent({ + name: 'VSvgIcon', + inheritAttrs: false, + props: makeIconProps(), + setup(props, vm) { + const attrs = {}; // TODO + + return () => { + return vue.createVNode(props.tag, vue.mergeProps(attrs, { + "style": null + }), { + default: () => [vue.createVNode("svg", { + "class": "v-icon__svg", + "xmlns": "http://www.w3.org/2000/svg", + "viewBox": "0 0 24 24", + "role": "img", + "aria-hidden": "true" + }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? vue.createVNode("path", { + "d": path[0], + "fill-opacity": path[1] + }, null) : vue.createVNode("path", { + "d": path + }, null)) : vue.createVNode("path", { + "d": props.icon + }, null)])] + }); + }; + } + }); + alpineComposition.defineComponent({ + name: 'VLigatureIcon', + props: makeIconProps(), + setup(props, vm) { + return () => { + return vue.createVNode(props.tag, null, { + default: () => [props.icon] + }); + }; + } + }); + const VClassIcon = alpineComposition.defineComponent({ + name: 'VClassIcon', + props: makeIconProps(), + setup(props) { + return () => { + return vue.createVNode(props.tag, { + "class": props.icon + }, null); + }; + } + }); + + // @ts-nocheck // TODO // TODO // TODO + + + // Types + + const aliases = { + collapse: 'mdi-chevron-up', + complete: 'mdi-check', + cancel: 'mdi-close-circle', + close: 'mdi-close', + delete: 'mdi-close-circle', + // delete (e.g. v-chip close) + clear: 'mdi-close-circle', + success: 'mdi-check-circle', + info: 'mdi-information', + warning: 'mdi-alert-circle', + error: 'mdi-close-circle', + prev: 'mdi-chevron-left', + next: 'mdi-chevron-right', + checkboxOn: 'mdi-checkbox-marked', + checkboxOff: 'mdi-checkbox-blank-outline', + checkboxIndeterminate: 'mdi-minus-box', + delimiter: 'mdi-circle', + // for carousel + sortAsc: 'mdi-arrow-up', + sortDesc: 'mdi-arrow-down', + expand: 'mdi-chevron-down', + menu: 'mdi-menu', + subgroup: 'mdi-menu-down', + dropdown: 'mdi-menu-down', + radioOn: 'mdi-radiobox-marked', + radioOff: 'mdi-radiobox-blank', + edit: 'mdi-pencil', + ratingEmpty: 'mdi-star-outline', + ratingFull: 'mdi-star', + ratingHalf: 'mdi-star-half-full', + loading: 'mdi-cached', + first: 'mdi-page-first', + last: 'mdi-page-last', + unfold: 'mdi-unfold-more-horizontal', + file: 'mdi-paperclip', + plus: 'mdi-plus', + minus: 'mdi-minus', + calendar: 'mdi-calendar', + treeviewCollapse: 'mdi-menu-down', + treeviewExpand: 'mdi-menu-right', + eyeDropper: 'mdi-eyedropper' + }; + const mdi = { + // Not using mergeProps here, functional components merge props by default (?) + component: props => vue.h(VClassIcon, { + ...props, + class: 'mdi' + }) + }; + + // Icons + + // Types + + const md1 = { + defaults: { + global: { + rounded: 'sm' + }, + VAvatar: { + rounded: 'circle' + }, + VAutocomplete: { + variant: 'underlined' + }, + VBanner: { + color: 'primary' + }, + VBtn: { + color: 'primary', + rounded: 0 + }, + VCheckbox: { + color: 'secondary' + }, + VCombobox: { + variant: 'underlined' + }, + VSelect: { + variant: 'underlined' + }, + VSlider: { + color: 'primary' + }, + VTabs: { + color: 'primary' + }, + VTextarea: { + variant: 'underlined' + }, + VTextField: { + variant: 'underlined' + }, + VToolbar: { + VBtn: { + color: null + } + } + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi + } + }, + theme: { + themes: { + light: { + colors: { + primary: '#3F51B5', + 'primary-darken-1': '#303F9F', + 'primary-lighten-1': '#C5CAE9', + secondary: '#FF4081', + 'secondary-darken-1': '#F50057', + 'secondary-lighten-1': '#FF80AB', + accent: '#009688' + } + } + } + } + }; + + // Icons + + // Types + + const md2 = { + defaults: { + global: { + rounded: 'md' + }, + VAvatar: { + rounded: 'circle' + }, + VAutocomplete: { + variant: 'filled' + }, + VBanner: { + color: 'primary' + }, + VBtn: { + color: 'primary' + }, + VCheckbox: { + color: 'secondary' + }, + VCombobox: { + variant: 'filled' + }, + VSelect: { + variant: 'filled' + }, + VSlider: { + color: 'primary' + }, + VTabs: { + color: 'primary' + }, + VTextarea: { + variant: 'filled' + }, + VTextField: { + variant: 'filled' + }, + VToolbar: { + VBtn: { + color: null + } + } + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi + } + }, + theme: { + themes: { + light: { + colors: { + primary: '#6200EE', + 'primary-darken-1': '#3700B3', + secondary: '#03DAC6', + 'secondary-darken-1': '#018786', + error: '#B00020' + } + } + } + } + }; + + // Icons + + // Types + + const md3 = { + defaults: { + VAppBar: { + flat: true + }, + VAutocomplete: { + variant: 'filled' + }, + VBanner: { + color: 'primary' + }, + VBottomSheet: { + contentClass: 'rounded-t-xl overflow-hidden' + }, + VBtn: { + color: 'primary', + rounded: 'xl' + }, + VBtnGroup: { + rounded: 'xl', + VBtn: { + rounded: null + } + }, + VCard: { + rounded: 'lg' + }, + VCheckbox: { + color: 'secondary', + inset: true + }, + VChip: { + rounded: 'sm' + }, + VCombobox: { + variant: 'filled' + }, + VNavigationDrawer: { + // VList: { + // nav: true, + // VListItem: { + // rounded: 'xl', + // }, + // }, + }, + VSelect: { + variant: 'filled' + }, + VSlider: { + color: 'primary' + }, + VTabs: { + color: 'primary' + }, + VTextarea: { + variant: 'filled' + }, + VTextField: { + variant: 'filled' + }, + VToolbar: { + VBtn: { + color: null + } + } + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi + } + }, + theme: { + themes: { + light: { + colors: { + primary: '#6750a4', + secondary: '#b4b0bb', + tertiary: '#7d5260', + error: '#b3261e', + surface: '#fffbfe' + } + } + } + } + }; + + var index = /*#__PURE__*/Object.freeze({ + __proto__: null, + md1: md1, + md2: md2, + md3: md3 + }); + + const IN_BROWSER = typeof window !== 'undefined'; + const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0); + + function getNestedValue(obj, path, fallback) { + const last = path.length - 1; + if (last < 0) return obj === undefined ? fallback : obj; + for (let i = 0; i < last; i++) { + if (obj == null) { + return fallback; + } + obj = obj[path[i]]; + } + if (obj == null) return fallback; + return obj[path[last]] === undefined ? fallback : obj[path[last]]; + } + function getObjectValueByPath(obj, path, fallback) { + // credit: http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key#comment55278413_6491621 + if (obj == null || !path || typeof path !== 'string') return fallback; + if (obj[path] !== undefined) return obj[path]; + path = path.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties + path = path.replace(/^\./, ''); // strip a leading dot + return getNestedValue(obj, path.split('.'), fallback); + } + function createRange(length) { + let start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + return Array.from({ + length + }, (v, k) => start + k); + } + function convertToUnit(str) { + let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'px'; + if (str == null || str === '') { + return undefined; + } else if (isNaN(+str)) { + return String(str); + } else if (!isFinite(+str)) { + return undefined; + } else { + return `${Number(str)}${unit}`; + } + } + function isObject(obj) { + return obj !== null && typeof obj === 'object' && !Array.isArray(obj); + } + function refElement(obj) { + if (obj && '$el' in obj) { + const el = obj.$el; + if (el?.nodeType === Node.TEXT_NODE) { + // Multi-root component, use the first element + return el.nextElementSibling; + } + return el; + } + return obj; + } + function has(obj, key) { + return key.every(k => obj.hasOwnProperty(k)); + } + // Array of keys + function pick(obj, paths) { + const found = {}; + const keys = new Set(Object.keys(obj)); + for (const path of paths) { + if (keys.has(path)) { + found[path] = obj[path]; + } + } + return found; + } + function clamp(value) { + let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; + return Math.max(min, Math.min(max, value)); + } + function padEnd(str, length) { + let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0'; + return str + char.repeat(Math.max(0, length - str.length)); + } + function padStart(str, length) { + let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0'; + return char.repeat(Math.max(0, length - str.length)) + str; + } + function chunk(str) { + let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; + const chunked = []; + let index = 0; + while (index < str.length) { + chunked.push(str.substr(index, size)); + index += size; + } + return chunked; + } + function mergeDeep() { + let source = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + let arrayFn = arguments.length > 2 ? arguments[2] : undefined; + const out = {}; + for (const key in source) { + out[key] = source[key]; + } + for (const key in target) { + const sourceProperty = source[key]; + const targetProperty = target[key]; + + // Only continue deep merging if + // both properties are objects + if (isObject(sourceProperty) && isObject(targetProperty)) { + out[key] = mergeDeep(sourceProperty, targetProperty, arrayFn); + continue; + } + if (Array.isArray(sourceProperty) && Array.isArray(targetProperty) && arrayFn) { + out[key] = arrayFn(sourceProperty, targetProperty); + continue; + } + out[key] = targetProperty; + } + return out; + } + function toKebabCase() { + let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; + if (toKebabCase.cache.has(str)) return toKebabCase.cache.get(str); + const kebab = str.replace(/[^a-z]/gi, '-').replace(/\B([A-Z])/g, '-$1').toLowerCase(); + toKebabCase.cache.set(str, kebab); + return kebab; + } + toKebabCase.cache = new Map(); + + // Only allow a single return type + + /** + * Convert a computed ref to a record of refs. + * The getter function must always return an object with the same keys. + */ + + function destructComputed(getter) { + const refs = alpineReactivity.reactive({}); + const base = alpineReactivity.computed(getter); + // TODO: REMOVED "flush: sync" option + alpineReactivity.watchEffect(() => { + for (const key in base.value) { + refs[key] = base.value[key]; + } + }); + return alpineReactivity.toRefs(refs); + } + + // Utilities + + // Types + + // TODO + // TODO + // TODO - HAVE A LOOK AT THIS AGAIN! BECAUSE WE WILL NEED TO EXPLICTLY + // HANDLE EVENTS AS CALLBACKS FOR THIS TO WORK! + // TODO + // TODO + + // Composables + function useProxiedModel(vm, props, prop, defaultValue) { + let transformIn = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : v => v; + let transformOut = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : v => v; + const internal = alpineReactivity.ref(props[prop] !== undefined ? props[prop] : defaultValue); + const kebabProp = toKebabCase(prop); + const checkKebab = kebabProp !== prop; + const isControlled = checkKebab ? alpineReactivity.computed(() => { + void props[prop]; + return !!((vm.$props?.hasOwnProperty(prop) || vm.$props?.hasOwnProperty(kebabProp)) && (vm.$props?.hasOwnProperty(`onUpdate:${prop}`) || vm.$props?.hasOwnProperty(`onUpdate:${kebabProp}`))); + }) : alpineReactivity.computed(() => { + void props[prop]; + return !!(vm.$props?.hasOwnProperty(prop) && vm.$props?.hasOwnProperty(`onUpdate:${prop}`)); + }); + alpineReactivity.watch([() => props[prop], isControlled], _ref => { + let [propVal, newIsControlled] = _ref; + if (newIsControlled) return; + internal.value = propVal; + }); + const model = alpineReactivity.writableComputed({ + get() { + const externalValue = props[prop]; + return transformIn(isControlled.value ? externalValue : internal.value); + }, + set(internalValue) { + const newValue = transformOut(internalValue); + const value = alpineReactivity.toRaw(isControlled.value ? props[prop] : internal.value); + if (value === newValue || transformIn(value) === internalValue) { + return; + } + internal.value = newValue; + vm?.$dispatch(`update:${prop}`, newValue); + } + }); + Object.defineProperty(model, 'externalValue', { + get: () => isControlled.value ? props[prop] : internal.value + }); + return model; + } + + /* eslint-disable no-console */ + + const warn = msg => console.warn(msg); + function consoleWarn(message) { + warn(`Alpinui: ${message}`); + } + function consoleError(message) { + warn(`Alpinui error: ${message}`); + } + + var en = { + badge: 'Badge', + open: 'Open', + close: 'Close', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel' + }, + dataIterator: { + noResultsText: 'No matching records found', + loadingText: 'Loading items...' + }, + dataTable: { + itemsPerPageText: 'Rows per page:', + ariaLabel: { + sortDescending: 'Sorted descending.', + sortAscending: 'Sorted ascending.', + sortNone: 'Not sorted.', + activateNone: 'Activate to remove sorting.', + activateDescending: 'Activate to sort descending.', + activateAscending: 'Activate to sort ascending.' + }, + sortBy: 'Sort by' + }, + dataFooter: { + itemsPerPageText: 'Items per page:', + itemsPerPageAll: 'All', + nextPage: 'Next page', + prevPage: 'Previous page', + firstPage: 'First page', + lastPage: 'Last page', + pageText: '{0}-{1} of {2}' + }, + dateRangeInput: { + divider: 'to' + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates' + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date' + } + }, + noDataText: 'No data available', + carousel: { + prev: 'Previous visual', + next: 'Next visual', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}' + } + }, + calendar: { + moreEvents: '{0} more', + today: 'Today' + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}' + }, + fileInput: { + counter: '{0} files', + counterSize: '{0} files ({1} in total)' + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time' + }, + pagination: { + ariaLabel: { + root: 'Pagination Navigation', + next: 'Next page', + previous: 'Previous page', + page: 'Go to page {0}', + currentPage: 'Page {0}, Current page', + first: 'First page', + last: 'Last page' + } + }, + stepper: { + next: 'Next', + prev: 'Previous' + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}' + } + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more' + } + }; + + // Composables + + // Types + + const LANG_PREFIX = '$alpinui.'; + const replace = (str, params) => { + return str.replace(/\{(\d+)\}/g, (match, index) => { + return String(params[+index]); + }); + }; + const createTranslateFunction = (current, fallback, messages) => { + return function (key) { + for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + params[_key - 1] = arguments[_key]; + } + if (!key.startsWith(LANG_PREFIX)) { + return replace(key, params); + } + const shortKey = key.replace(LANG_PREFIX, ''); + const currentLocale = current.value && messages.value[current.value]; + const fallbackLocale = fallback.value && messages.value[fallback.value]; + let str = getObjectValueByPath(currentLocale, shortKey, null); + if (!str) { + consoleWarn(`Translation key "${key}" not found in "${current.value}", trying fallback locale`); + str = getObjectValueByPath(fallbackLocale, shortKey, null); + } + if (!str) { + consoleError(`Translation key "${key}" not found in fallback`); + str = key; + } + if (typeof str !== 'string') { + consoleError(`Translation key "${key}" has a non-string value`); + str = key; + } + return replace(str, params); + }; + }; + function createNumberFunction(current, fallback) { + return (value, options) => { + const numberFormat = new Intl.NumberFormat([current.value, fallback.value], options); + return numberFormat.format(value); + }; + } + function useProvided(vm, props, prop, provided) { + const internal = useProxiedModel(vm, props, prop, props[prop] ?? provided.value); + + // TODO(from Vuetify): Remove when defaultValue works + internal.value = props[prop] ?? provided.value; + alpineReactivity.watch(provided, v => { + if (props[prop] == null) { + internal.value = provided.value; + } + }); + return internal; + } + function createProvideFunction(state) { + return (vm, props) => { + const current = useProvided(vm, props, 'locale', state.current); + const fallback = useProvided(vm, props, 'fallback', state.fallback); + const messages = useProvided(vm, props, 'messages', state.messages); + return { + name: 'alpinui', + current, + fallback, + messages, + t: createTranslateFunction(current, fallback, messages), + n: createNumberFunction(current, fallback), + provide: createProvideFunction({ + current, + fallback, + messages + }) + }; + }; + } + function createAlpinuiAdapter(options) { + const messages = alpineReactivity.ref({ + en, + ...options?.messages + }); + const current = alpineReactivity.shallowRef(options?.locale ?? 'en'); + const fallback = alpineReactivity.shallowRef(options?.fallback ?? 'en'); + return { + name: 'alpinui', + current, + fallback, + messages, + t: createTranslateFunction(current, fallback, messages), + n: createNumberFunction(current, fallback), + provide: createProvideFunction({ + current, + fallback, + messages + }) + }; + } + + // Utilities + + // Types + + const LocaleSymbol = Symbol.for('alpinui:locale'); + function isLocaleInstance(obj) { + return obj.name != null; + } + function createLocale(options) { + const i18n = options?.adapter && isLocaleInstance(options?.adapter) ? options?.adapter : createAlpinuiAdapter(options); + const rtl = createRtl(i18n, options); + return { + ...i18n, + ...rtl + }; + } + function useLocale(vm) { + const locale = vm.$inject(LocaleSymbol); + if (!locale) throw new Error('[Alpinui] Could not find injected locale instance'); + return locale; + } + function genDefaults$3() { + return { + af: false, + ar: true, + bg: false, + ca: false, + ckb: false, + cs: false, + de: false, + el: false, + en: false, + es: false, + et: false, + fa: true, + fi: false, + fr: false, + hr: false, + hu: false, + he: true, + id: false, + it: false, + ja: false, + km: false, + ko: false, + lv: false, + lt: false, + nl: false, + no: false, + pl: false, + pt: false, + ro: false, + ru: false, + sk: false, + sl: false, + srCyrl: false, + srLatn: false, + sv: false, + th: false, + tr: false, + az: false, + uk: false, + vi: false, + zhHans: false, + zhHant: false + }; + } + function createRtl(i18n, options) { + const rtl = alpineReactivity.ref(options?.rtl ?? genDefaults$3()); + const isRtl = alpineReactivity.computed(() => rtl.value[i18n.current.value] ?? false); + return { + isRtl, + rtl, + rtlClasses: alpineReactivity.computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`) + }; + } + function useRtl(vm) { + const locale = vm.$inject(LocaleSymbol); + if (!locale) throw new Error('[Alpinui] Could not find injected rtl instance'); + return { + isRtl: locale.isRtl, + rtlClasses: locale.rtlClasses + }; + } + + // Utilities + + // Types + + const firstDay = { + '001': 1, + AD: 1, + AE: 6, + AF: 6, + AG: 0, + AI: 1, + AL: 1, + AM: 1, + AN: 1, + AR: 1, + AS: 0, + AT: 1, + AU: 1, + AX: 1, + AZ: 1, + BA: 1, + BD: 0, + BE: 1, + BG: 1, + BH: 6, + BM: 1, + BN: 1, + BR: 0, + BS: 0, + BT: 0, + BW: 0, + BY: 1, + BZ: 0, + CA: 0, + CH: 1, + CL: 1, + CM: 1, + CN: 1, + CO: 0, + CR: 1, + CY: 1, + CZ: 1, + DE: 1, + DJ: 6, + DK: 1, + DM: 0, + DO: 0, + DZ: 6, + EC: 1, + EE: 1, + EG: 6, + ES: 1, + ET: 0, + FI: 1, + FJ: 1, + FO: 1, + FR: 1, + GB: 1, + 'GB-alt-variant': 0, + GE: 1, + GF: 1, + GP: 1, + GR: 1, + GT: 0, + GU: 0, + HK: 0, + HN: 0, + HR: 1, + HU: 1, + ID: 0, + IE: 1, + IL: 0, + IN: 0, + IQ: 6, + IR: 6, + IS: 1, + IT: 1, + JM: 0, + JO: 6, + JP: 0, + KE: 0, + KG: 1, + KH: 0, + KR: 0, + KW: 6, + KZ: 1, + LA: 0, + LB: 1, + LI: 1, + LK: 1, + LT: 1, + LU: 1, + LV: 1, + LY: 6, + MC: 1, + MD: 1, + ME: 1, + MH: 0, + MK: 1, + MM: 0, + MN: 1, + MO: 0, + MQ: 1, + MT: 0, + MV: 5, + MX: 0, + MY: 1, + MZ: 0, + NI: 0, + NL: 1, + NO: 1, + NP: 0, + NZ: 1, + OM: 6, + PA: 0, + PE: 0, + PH: 0, + PK: 0, + PL: 1, + PR: 0, + PT: 0, + PY: 0, + QA: 6, + RE: 1, + RO: 1, + RS: 1, + RU: 1, + SA: 0, + SD: 6, + SE: 1, + SG: 0, + SI: 1, + SK: 1, + SM: 1, + SV: 0, + SY: 6, + TH: 0, + TJ: 1, + TM: 1, + TR: 1, + TT: 0, + TW: 0, + UA: 1, + UM: 0, + US: 0, + UY: 1, + UZ: 1, + VA: 1, + VE: 0, + VI: 0, + VN: 1, + WS: 0, + XK: 1, + YE: 0, + ZA: 0, + ZW: 0 + }; + function getWeekArray(date, locale, firstDayOfWeek) { + const weeks = []; + let currentWeek = []; + const firstDayOfMonth = startOfMonth(date); + const lastDayOfMonth = endOfMonth(date); + const first = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0; + const firstDayWeekIndex = (firstDayOfMonth.getDay() - first + 7) % 7; + const lastDayWeekIndex = (lastDayOfMonth.getDay() - first + 7) % 7; + for (let i = 0; i < firstDayWeekIndex; i++) { + const adjacentDay = new Date(firstDayOfMonth); + adjacentDay.setDate(adjacentDay.getDate() - (firstDayWeekIndex - i)); + currentWeek.push(adjacentDay); + } + for (let i = 1; i <= lastDayOfMonth.getDate(); i++) { + const day = new Date(date.getFullYear(), date.getMonth(), i); + + // Add the day to the current week + currentWeek.push(day); + + // If the current week has 7 days, add it to the weeks array and start a new week + if (currentWeek.length === 7) { + weeks.push(currentWeek); + currentWeek = []; + } + } + for (let i = 1; i < 7 - lastDayWeekIndex; i++) { + const adjacentDay = new Date(lastDayOfMonth); + adjacentDay.setDate(adjacentDay.getDate() + i); + currentWeek.push(adjacentDay); + } + if (currentWeek.length > 0) { + weeks.push(currentWeek); + } + return weeks; + } + function startOfWeek(date, locale, firstDayOfWeek) { + const day = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0; + const d = new Date(date); + while (d.getDay() !== day) { + d.setDate(d.getDate() - 1); + } + return d; + } + function endOfWeek(date, locale) { + const d = new Date(date); + const lastDay = ((firstDay[locale.slice(-2).toUpperCase()] ?? 0) + 6) % 7; + while (d.getDay() !== lastDay) { + d.setDate(d.getDate() + 1); + } + return d; + } + function startOfMonth(date) { + return new Date(date.getFullYear(), date.getMonth(), 1); + } + function endOfMonth(date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 0); + } + function parseLocalDate(value) { + const parts = value.split('-').map(Number); + + // new Date() uses local time zone when passing individual date component values + return new Date(parts[0], parts[1] - 1, parts[2]); + } + const _YYYMMDD = /^([12]\d{3}-([1-9]|0[1-9]|1[0-2])-([1-9]|0[1-9]|[12]\d|3[01]))$/; + function date(value) { + if (value == null) return new Date(); + if (value instanceof Date) return value; + if (typeof value === 'string') { + let parsed; + if (_YYYMMDD.test(value)) { + return parseLocalDate(value); + } else { + parsed = Date.parse(value); + } + if (!isNaN(parsed)) return new Date(parsed); + } + return null; + } + const sundayJanuarySecond2000 = new Date(2000, 0, 2); + function getWeekdays(locale, firstDayOfWeek) { + const daysFromSunday = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0; + return createRange(7).map(i => { + const weekday = new Date(sundayJanuarySecond2000); + weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i); + return new Intl.DateTimeFormat(locale, { + weekday: 'narrow' + }).format(weekday); + }); + } + function format(value, formatString, locale, formats) { + const newDate = date(value) ?? new Date(); + const customFormat = formats?.[formatString]; + if (typeof customFormat === 'function') { + return customFormat(newDate, formatString, locale); + } + let options = {}; + switch (formatString) { + case 'fullDate': + options = { + year: 'numeric', + month: 'long', + day: 'numeric' + }; + break; + case 'fullDateWithWeekday': + options = { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + }; + break; + case 'normalDate': + const day = newDate.getDate(); + const month = new Intl.DateTimeFormat(locale, { + month: 'long' + }).format(newDate); + return `${day} ${month}`; + case 'normalDateWithWeekday': + options = { + weekday: 'short', + day: 'numeric', + month: 'short' + }; + break; + case 'shortDate': + options = { + month: 'short', + day: 'numeric' + }; + break; + case 'year': + options = { + year: 'numeric' + }; + break; + case 'month': + options = { + month: 'long' + }; + break; + case 'monthShort': + options = { + month: 'short' + }; + break; + case 'monthAndYear': + options = { + month: 'long', + year: 'numeric' + }; + break; + case 'monthAndDate': + options = { + month: 'long', + day: 'numeric' + }; + break; + case 'weekday': + options = { + weekday: 'long' + }; + break; + case 'weekdayShort': + options = { + weekday: 'short' + }; + break; + case 'dayOfMonth': + return new Intl.NumberFormat(locale).format(newDate.getDate()); + case 'hours12h': + options = { + hour: 'numeric', + hour12: true + }; + break; + case 'hours24h': + options = { + hour: 'numeric', + hour12: false + }; + break; + case 'minutes': + options = { + minute: 'numeric' + }; + break; + case 'seconds': + options = { + second: 'numeric' + }; + break; + case 'fullTime': + options = { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: true + }; + break; + case 'fullTime12h': + options = { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: true + }; + break; + case 'fullTime24h': + options = { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: false + }; + break; + case 'fullDateTime': + options = { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: true + }; + break; + case 'fullDateTime12h': + options = { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: true + }; + break; + case 'fullDateTime24h': + options = { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: false + }; + break; + case 'keyboardDate': + options = { + year: 'numeric', + month: '2-digit', + day: '2-digit' + }; + break; + case 'keyboardDateTime': + options = { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: false + }; + break; + case 'keyboardDateTime12h': + options = { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: true + }; + break; + case 'keyboardDateTime24h': + options = { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + hour12: false + }; + break; + default: + options = customFormat ?? { + timeZone: 'UTC', + timeZoneName: 'short' + }; + } + return new Intl.DateTimeFormat(locale, options).format(newDate); + } + function toISO(adapter, value) { + const date = adapter.toJsDate(value); + const year = date.getFullYear(); + const month = padStart(String(date.getMonth() + 1), 2, '0'); + const day = padStart(String(date.getDate()), 2, '0'); + return `${year}-${month}-${day}`; + } + function parseISO(value) { + const [year, month, day] = value.split('-').map(Number); + return new Date(year, month - 1, day); + } + function addMinutes(date, amount) { + const d = new Date(date); + d.setMinutes(d.getMinutes() + amount); + return d; + } + function addHours(date, amount) { + const d = new Date(date); + d.setHours(d.getHours() + amount); + return d; + } + function addDays(date, amount) { + const d = new Date(date); + d.setDate(d.getDate() + amount); + return d; + } + function addWeeks(date, amount) { + const d = new Date(date); + d.setDate(d.getDate() + amount * 7); + return d; + } + function addMonths(date, amount) { + const d = new Date(date); + d.setDate(1); + d.setMonth(d.getMonth() + amount); + return d; + } + function getYear(date) { + return date.getFullYear(); + } + function getMonth(date) { + return date.getMonth(); + } + function getDate(date) { + return date.getDate(); + } + function getNextMonth(date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 1); + } + function getPreviousMonth(date) { + return new Date(date.getFullYear(), date.getMonth() - 1, 1); + } + function getHours(date) { + return date.getHours(); + } + function getMinutes(date) { + return date.getMinutes(); + } + function startOfYear(date) { + return new Date(date.getFullYear(), 0, 1); + } + function endOfYear(date) { + return new Date(date.getFullYear(), 11, 31); + } + function isWithinRange(date, range) { + return isAfter(date, range[0]) && isBefore(date, range[1]); + } + function isValid(date) { + const d = new Date(date); + return d instanceof Date && !isNaN(d.getTime()); + } + function isAfter(date, comparing) { + return date.getTime() > comparing.getTime(); + } + function isAfterDay(date, comparing) { + return isAfter(startOfDay(date), startOfDay(comparing)); + } + function isBefore(date, comparing) { + return date.getTime() < comparing.getTime(); + } + function isEqual(date, comparing) { + return date.getTime() === comparing.getTime(); + } + function isSameDay(date, comparing) { + return date.getDate() === comparing.getDate() && date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear(); + } + function isSameMonth(date, comparing) { + return date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear(); + } + function isSameYear(date, comparing) { + return date.getFullYear() === comparing.getFullYear(); + } + function getDiff(date, comparing, unit) { + const d = new Date(date); + const c = new Date(comparing); + switch (unit) { + case 'years': + return d.getFullYear() - c.getFullYear(); + case 'quarters': + return Math.floor((d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12) / 4); + case 'months': + return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12; + case 'weeks': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24 * 7)); + case 'days': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24)); + case 'hours': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60)); + case 'minutes': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60)); + case 'seconds': + return Math.floor((d.getTime() - c.getTime()) / 1000); + default: + { + return d.getTime() - c.getTime(); + } + } + } + function setHours(date, count) { + const d = new Date(date); + d.setHours(count); + return d; + } + function setMinutes(date, count) { + const d = new Date(date); + d.setMinutes(count); + return d; + } + function setMonth(date, count) { + const d = new Date(date); + d.setMonth(count); + return d; + } + function setDate(date, day) { + const d = new Date(date); + d.setDate(day); + return d; + } + function setYear(date, year) { + const d = new Date(date); + d.setFullYear(year); + return d; + } + function startOfDay(date) { + return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0); + } + function endOfDay(date) { + return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999); + } + class AlpinuiDateAdapter { + constructor(options) { + this.locale = options.locale; + this.formats = options.formats; + } + date(value) { + return date(value); + } + toJsDate(date) { + return date; + } + toISO(date) { + return toISO(this, date); + } + parseISO(date) { + return parseISO(date); + } + addMinutes(date, amount) { + return addMinutes(date, amount); + } + addHours(date, amount) { + return addHours(date, amount); + } + addDays(date, amount) { + return addDays(date, amount); + } + addWeeks(date, amount) { + return addWeeks(date, amount); + } + addMonths(date, amount) { + return addMonths(date, amount); + } + getWeekArray(date, firstDayOfWeek) { + return getWeekArray(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined); + } + startOfWeek(date, firstDayOfWeek) { + return startOfWeek(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined); + } + endOfWeek(date) { + return endOfWeek(date, this.locale); + } + startOfMonth(date) { + return startOfMonth(date); + } + endOfMonth(date) { + return endOfMonth(date); + } + format(date, formatString) { + return format(date, formatString, this.locale, this.formats); + } + isEqual(date, comparing) { + return isEqual(date, comparing); + } + isValid(date) { + return isValid(date); + } + isWithinRange(date, range) { + return isWithinRange(date, range); + } + isAfter(date, comparing) { + return isAfter(date, comparing); + } + isAfterDay(date, comparing) { + return isAfterDay(date, comparing); + } + isBefore(date, comparing) { + return !isAfter(date, comparing) && !isEqual(date, comparing); + } + isSameDay(date, comparing) { + return isSameDay(date, comparing); + } + isSameMonth(date, comparing) { + return isSameMonth(date, comparing); + } + isSameYear(date, comparing) { + return isSameYear(date, comparing); + } + setMinutes(date, count) { + return setMinutes(date, count); + } + setHours(date, count) { + return setHours(date, count); + } + setMonth(date, count) { + return setMonth(date, count); + } + setDate(date, day) { + return setDate(date, day); + } + setYear(date, year) { + return setYear(date, year); + } + getDiff(date, comparing, unit) { + return getDiff(date, comparing, unit); + } + getWeekdays(firstDayOfWeek) { + return getWeekdays(this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined); + } + getYear(date) { + return getYear(date); + } + getMonth(date) { + return getMonth(date); + } + getDate(date) { + return getDate(date); + } + getNextMonth(date) { + return getNextMonth(date); + } + getPreviousMonth(date) { + return getPreviousMonth(date); + } + getHours(date) { + return getHours(date); + } + getMinutes(date) { + return getMinutes(date); + } + startOfDay(date) { + return startOfDay(date); + } + endOfDay(date) { + return endOfDay(date); + } + startOfYear(date) { + return startOfYear(date); + } + endOfYear(date) { + return endOfYear(date); + } + } + + // Composables + const DateOptionsSymbol = Symbol.for('vuetify:date-options'); + const DateAdapterSymbol = Symbol.for('vuetify:date-adapter'); + function createDate(options, locale) { + const _options = mergeDeep({ + adapter: AlpinuiDateAdapter, + locale: { + af: 'af-ZA', + // ar: '', # not the same value for all variants + bg: 'bg-BG', + ca: 'ca-ES', + ckb: '', + cs: 'cs-CZ', + de: 'de-DE', + el: 'el-GR', + en: 'en-US', + // es: '', # not the same value for all variants + et: 'et-EE', + fa: 'fa-IR', + fi: 'fi-FI', + // fr: '', #not the same value for all variants + hr: 'hr-HR', + hu: 'hu-HU', + he: 'he-IL', + id: 'id-ID', + it: 'it-IT', + ja: 'ja-JP', + ko: 'ko-KR', + lv: 'lv-LV', + lt: 'lt-LT', + nl: 'nl-NL', + no: 'no-NO', + pl: 'pl-PL', + pt: 'pt-PT', + ro: 'ro-RO', + ru: 'ru-RU', + sk: 'sk-SK', + sl: 'sl-SI', + srCyrl: 'sr-SP', + srLatn: 'sr-SP', + sv: 'sv-SE', + th: 'th-TH', + tr: 'tr-TR', + az: 'az-AZ', + uk: 'uk-UA', + vi: 'vi-VN', + zhHans: 'zh-CN', + zhHant: 'zh-TW' + } + }, options); + return { + options: _options, + instance: createInstance(_options, locale) + }; + } + function createInstance(options, locale) { + const instance = alpineReactivity.reactive(typeof options.adapter === 'function' + // eslint-disable-next-line new-cap + ? new options.adapter({ + locale: options.locale[locale.current.value] ?? locale.current.value, + formats: options.formats + }) : options.adapter); + alpineReactivity.watch(locale.current, value => { + instance.locale = options.locale[value] ?? value ?? instance.locale; + }); + return instance; + } + function useDate(vm) { + const options = vm.$inject(DateOptionsSymbol); + if (!options) throw new Error('[Alpinui] Could not find injected date options'); + const locale = useLocale(vm); + return createInstance(options, locale); + } + + // Utilities + + // Types + + const DefaultsSymbol = Symbol.for('alpinui:defaults'); + function createDefaults(options) { + return alpineReactivity.ref(options); + } + function injectDefaults(vm) { + const defaults = vm.$inject(DefaultsSymbol); + if (!defaults) throw new Error('[Alpinui] Could not find defaults instance'); + return defaults; + } + function propIsDefined(props, prop) { + return typeof props[prop] !== 'undefined' || + // TODO - Keep this? + typeof props?.[toKebabCase(prop)] !== 'undefined'; + } + function internalUseDefaults(vm) { + let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + let name = arguments.length > 2 ? arguments[2] : undefined; + let defaults = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : injectDefaults(vm); + name = name ?? vm.$name; + if (!name) { + throw new Error('[Alpinui] Could not determine component name'); + } + const componentDefaults = alpineReactivity.computed(() => defaults.value?.[props._as ?? name]); + const _props = new Proxy(props, { + get(target, prop) { + const propValue = Reflect.get(target, prop); + if (prop === 'class' || prop === 'style') { + return [componentDefaults.value?.[prop], propValue].filter(v => v != null); + } else if (typeof prop === 'string' && !propIsDefined(vm.$props, prop)) { + return componentDefaults.value?.[prop] !== undefined ? componentDefaults.value?.[prop] : defaults.value?.global?.[prop] !== undefined ? defaults.value?.global?.[prop] : propValue; + } + return propValue; + } + }); + const _subcomponentDefaults = alpineReactivity.shallowRef(undefined); + alpineReactivity.watchEffect(() => { + if (componentDefaults.value) { + const subComponents = Object.entries(componentDefaults.value).filter(_ref => { + let [key] = _ref; + return key.startsWith(key[0].toUpperCase()); + }); + _subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : undefined; + } else { + _subcomponentDefaults.value = undefined; + } + }); + function provideSubDefaults() { + const injected = vm.$injectSelf(DefaultsSymbol); + vm.$provide(DefaultsSymbol, alpineReactivity.computed(() => { + return _subcomponentDefaults.value ? mergeDeep(injected?.value ?? {}, _subcomponentDefaults.value) : injected?.value; + })); + } + return { + props: _props, + provideSubDefaults + }; + } + function useDefaults(vm) { + let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + let name = arguments.length > 2 ? arguments[2] : undefined; + const { + props: _props, + provideSubDefaults + } = internalUseDefaults(vm, props, name); + provideSubDefaults(); + return _props; + } + + // Utilities + + // Types + + function getCurrentInstanceName(vm) { + return vm?.$aliasName || vm?.$name; + } + let _uid = 0; + let _map = new WeakMap(); + function getUid(vm) { + if (_map.has(vm)) return _map.get(vm);else { + const uid = _uid++; + _map.set(vm, uid); + return uid; + } + } + getUid.reset = () => { + _uid = 0; + _map = new WeakMap(); + }; + + // Utilities + + const DisplaySymbol = Symbol.for('alpinui:display'); + const defaultDisplayOptions = { + mobileBreakpoint: 'lg', + thresholds: { + xs: 0, + sm: 600, + md: 960, + lg: 1280, + xl: 1920, + xxl: 2560 + } + }; + const parseDisplayOptions = function () { + let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions; + return mergeDeep(defaultDisplayOptions, options); + }; + function getClientWidth(ssr) { + return IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === 'object' && ssr.clientWidth || 0; + } + function getClientHeight(ssr) { + return IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === 'object' && ssr.clientHeight || 0; + } + function getPlatform(ssr) { + const userAgent = IN_BROWSER && !ssr ? window.navigator.userAgent : 'ssr'; + function match(regexp) { + return Boolean(userAgent.match(regexp)); + } + const android = match(/android/i); + const ios = match(/iphone|ipad|ipod/i); + const cordova = match(/cordova/i); + const electron = match(/electron/i); + const chrome = match(/chrome/i); + const edge = match(/edge/i); + const firefox = match(/firefox/i); + const opera = match(/opera/i); + const win = match(/win/i); + const mac = match(/mac/i); + const linux = match(/linux/i); + return { + android, + ios, + cordova, + electron, + chrome, + edge, + firefox, + opera, + win, + mac, + linux, + touch: SUPPORTS_TOUCH, + ssr: userAgent === 'ssr' + }; + } + function createDisplay(options, ssr) { + const { + thresholds, + mobileBreakpoint + } = parseDisplayOptions(options); + const height = alpineReactivity.shallowRef(getClientHeight(ssr)); + const platform = alpineReactivity.shallowRef(getPlatform(ssr)); + const width = alpineReactivity.shallowRef(getClientWidth(ssr)); + const state = alpineReactivity.reactive({}); + function updateSize() { + height.value = getClientHeight(); + width.value = getClientWidth(); + } + function update() { + updateSize(); + platform.value = getPlatform(); + } + + // eslint-disable-next-line max-statements + alpineReactivity.watchEffect(() => { + const xs = width.value < thresholds.sm; + const sm = width.value < thresholds.md && !xs; + const md = width.value < thresholds.lg && !(sm || xs); + const lg = width.value < thresholds.xl && !(md || sm || xs); + const xl = width.value < thresholds.xxl && !(lg || md || sm || xs); + const xxl = width.value >= thresholds.xxl; + const name = xs ? 'xs' : sm ? 'sm' : md ? 'md' : lg ? 'lg' : xl ? 'xl' : 'xxl'; + const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint]; + const mobile = width.value < breakpointValue; + state.xs = xs; + state.sm = sm; + state.md = md; + state.lg = lg; + state.xl = xl; + state.xxl = xxl; + state.smAndUp = !xs; + state.mdAndUp = !(xs || sm); + state.lgAndUp = !(xs || sm || md); + state.xlAndUp = !(xs || sm || md || lg); + state.smAndDown = !(md || lg || xl || xxl); + state.mdAndDown = !(lg || xl || xxl); + state.lgAndDown = !(xl || xxl); + state.xlAndDown = !xxl; + state.name = name; + state.height = height.value; + state.width = width.value; + state.mobile = mobile; + state.mobileBreakpoint = mobileBreakpoint; + state.platform = platform.value; + state.thresholds = thresholds; + }); + if (IN_BROWSER) { + window.addEventListener('resize', updateSize, { + passive: true + }); + } + return { + ...alpineReactivity.toRefs(state), + update, + ssr: !!ssr + }; + } + function useDisplay(vm) { + let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + let name = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getCurrentInstanceName(vm); + const display = vm.$inject(DisplaySymbol); + if (!display) throw new Error('Could not find Alpinui display injection'); + const mobile = alpineReactivity.computed(() => { + if (props.mobile != null) return props.mobile; + if (!props.mobileBreakpoint) return display.mobile.value; + const breakpointValue = typeof props.mobileBreakpoint === 'number' ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint]; + return display.width.value < breakpointValue; + }); + const displayClasses = alpineReactivity.computed(() => { + if (!name) return {}; + return { + [`${name}--mobile`]: mobile.value + }; + }); + return { + ...display, + displayClasses, + mobile + }; + } + + // Utilities + + // Types + + const GoToSymbol = Symbol.for('alpinui:goto'); + function genDefaults$2() { + return { + container: undefined, + duration: 300, + layout: false, + offset: 0, + easing: 'easeInOutCubic', + patterns: { + linear: t => t, + easeInQuad: t => t ** 2, + easeOutQuad: t => t * (2 - t), + easeInOutQuad: t => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t, + easeInCubic: t => t ** 3, + easeOutCubic: t => --t ** 3 + 1, + easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1, + easeInQuart: t => t ** 4, + easeOutQuart: t => 1 - --t ** 4, + easeInOutQuart: t => t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4, + easeInQuint: t => t ** 5, + easeOutQuint: t => 1 + --t ** 5, + easeInOutQuint: t => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5 + } + }; + } + function getContainer(el) { + return getTarget(el) ?? (document.scrollingElement || document.body); + } + function getTarget(el) { + return typeof el === 'string' ? document.querySelector(el) : refElement(el); + } + function getOffset(target, horizontal, rtl) { + if (typeof target === 'number') return horizontal && rtl ? -target : target; + let el = getTarget(target); + let totalOffset = 0; + while (el) { + totalOffset += horizontal ? el.offsetLeft : el.offsetTop; + el = el.offsetParent; + } + return totalOffset; + } + function createGoTo(options, locale) { + return { + rtl: locale.isRtl, + options: mergeDeep(genDefaults$2(), options) + }; + } + async function scrollTo(_target, _options, horizontal, goTo) { + const property = horizontal ? 'scrollLeft' : 'scrollTop'; + const options = mergeDeep(goTo?.options ?? genDefaults$2(), _options); + const rtl = goTo?.rtl.value; + const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0; + const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container); + const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing]; + if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`); + let targetLocation; + if (typeof target === 'number') { + targetLocation = getOffset(target, horizontal, rtl); + } else { + targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl); + if (options.layout) { + const styles = window.getComputedStyle(target); + const layoutOffset = styles.getPropertyValue('--v-layout-top'); + if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10); + } + } + targetLocation += options.offset; + targetLocation = clampTarget(container, targetLocation, !!rtl, !!horizontal); + const startLocation = container[property] ?? 0; + if (targetLocation === startLocation) return Promise.resolve(targetLocation); + const startTime = performance.now(); + return new Promise(resolve => requestAnimationFrame(function step(currentTime) { + const timeElapsed = currentTime - startTime; + const progress = timeElapsed / options.duration; + const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1))); + container[property] = location; + + // Allow for some jitter if target time has elapsed + if (progress >= 1 && Math.abs(location - container[property]) < 10) { + return resolve(targetLocation); + } else if (progress > 2) { + // The target might not be reachable + consoleWarn('Scroll target is not reachable'); + return resolve(container[property]); + } + requestAnimationFrame(step); + })); + } + function useGoTo(vm) { + let _options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + const goToInstance = vm.$inject(GoToSymbol); + const { + isRtl + } = useRtl(vm); + if (!goToInstance) throw new Error('[Alpinui] Could not find injected goto instance'); + const goTo = { + ...goToInstance, + // can be set via VLocaleProvider + rtl: alpineReactivity.computed(() => goToInstance.rtl.value || isRtl.value) + }; + async function go(target, options) { + return scrollTo(target, mergeDeep(_options, options), false, goTo); + } + go.horizontal = async (target, options) => { + return scrollTo(target, mergeDeep(_options, options), true, goTo); + }; + return go; + } + + /** + * Clamp target value to achieve a smooth scroll animation + * when the value goes outside the scroll container size + */ + function clampTarget(container, value, rtl, horizontal) { + const { + scrollWidth, + scrollHeight + } = container; + const [containerWidth, containerHeight] = container === document.scrollingElement ? [window.innerWidth, window.innerHeight] : [container.offsetWidth, container.offsetHeight]; + let min; + let max; + if (horizontal) { + if (rtl) { + min = -(scrollWidth - containerWidth); + max = 0; + } else { + min = 0; + max = scrollWidth - containerWidth; + } + } else { + min = 0; + max = scrollHeight + -containerHeight; + } + return Math.max(Math.min(value, max), min); + } + + // @ts-nocheck // TODO // TODO // TODO + + const IconSymbol = Symbol.for('alpinui:icons'); + function genDefaults$1() { + return { + svg: { + component: VSvgIcon + }, + class: { + component: VClassIcon + } + }; + } + + // Composables + function createIcons(options) { + const sets = genDefaults$1(); + const defaultSet = options?.defaultSet ?? 'mdi'; + if (defaultSet === 'mdi' && !sets.mdi) { + sets.mdi = mdi; + } + return mergeDeep({ + defaultSet, + sets, + aliases: { + ...aliases, + /* eslint-disable max-len */ + alpinui: ['M8.2241 14.2009L12 21L22 3H14.4459L8.2241 14.2009Z', ['M7.26303 12.4733L7.00113 12L2 3H12.5261C12.5261 3 12.5261 3 12.5261 3L7.26303 12.4733Z', 0.6]], + 'alpinui-outline': 'svg:M7.26 12.47 12.53 3H2L7.26 12.47ZM14.45 3 8.22 14.2 12 21 22 3H14.45ZM18.6 5 12 16.88 10.51 14.2 15.62 5ZM7.26 8.35 5.4 5H9.13L7.26 8.35Z', + 'alpinui-play': ['m6.376 13.184-4.11-7.192C1.505 4.66 2.467 3 4.003 3h8.532l-.953 1.576-.006.01-.396.677c-.429.732-.214 1.507.194 2.015.404.503 1.092.878 1.869.806a3.72 3.72 0 0 1 1.005.022c.276.053.434.143.523.237.138.146.38.635-.25 2.09-.893 1.63-1.553 1.722-1.847 1.677-.213-.033-.468-.158-.756-.406a4.95 4.95 0 0 1-.8-.927c-.39-.564-1.04-.84-1.66-.846-.625-.006-1.316.27-1.693.921l-.478.826-.911 1.506Z', ['M9.093 11.552c.046-.079.144-.15.32-.148a.53.53 0 0 1 .43.207c.285.414.636.847 1.046 1.2.405.35.914.662 1.516.754 1.334.205 2.502-.698 3.48-2.495l.014-.028.013-.03c.687-1.574.774-2.852-.005-3.675-.37-.391-.861-.586-1.333-.676a5.243 5.243 0 0 0-1.447-.044c-.173.016-.393-.073-.54-.257-.145-.18-.127-.316-.082-.392l.393-.672L14.287 3h5.71c1.536 0 2.499 1.659 1.737 2.992l-7.997 13.996c-.768 1.344-2.706 1.344-3.473 0l-3.037-5.314 1.377-2.278.004-.006.004-.007.481-.831Z', 0.6]] + /* eslint-enable max-len */ + } + }, options); + } + + /** + * WCAG 3.0 APCA perceptual contrast algorithm from https://github.com/Myndex/SAPC-APCA + * @licence https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * @see https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup + */ + // Types + + // MAGICAL NUMBERS + + // sRGB Conversion to Relative Luminance (Y) + + // Transfer Curve (aka "Gamma") for sRGB linearization + // Simple power curve vs piecewise described in docs + // Essentially, 2.4 best models actual display + // characteristics in combination with the total method + const mainTRC = 2.4; + const Rco = 0.2126729; // sRGB Red Coefficient (from matrix) + const Gco = 0.7151522; // sRGB Green Coefficient (from matrix) + const Bco = 0.0721750; // sRGB Blue Coefficient (from matrix) + + // For Finding Raw SAPC Contrast from Relative Luminance (Y) + + // Constants for SAPC Power Curve Exponents + // One pair for normal text, and one for reverse + // These are the "beating heart" of SAPC + const normBG = 0.55; + const normTXT = 0.58; + const revTXT = 0.57; + const revBG = 0.62; + + // For Clamping and Scaling Values + + const blkThrs = 0.03; // Level that triggers the soft black clamp + const blkClmp = 1.45; // Exponent for the soft black clamp curve + const deltaYmin = 0.0005; // Lint trap + const scaleBoW = 1.25; // Scaling for dark text on light + const scaleWoB = 1.25; // Scaling for light text on dark + const loConThresh = 0.078; // Threshold for new simple offset scale + const loConFactor = 12.82051282051282; // = 1/0.078, + const loConOffset = 0.06; // The simple offset + const loClip = 0.001; // Output clip (lint trap #2) + + function APCAcontrast(text, background) { + // Linearize sRGB + const Rtxt = (text.r / 255) ** mainTRC; + const Gtxt = (text.g / 255) ** mainTRC; + const Btxt = (text.b / 255) ** mainTRC; + const Rbg = (background.r / 255) ** mainTRC; + const Gbg = (background.g / 255) ** mainTRC; + const Bbg = (background.b / 255) ** mainTRC; + + // Apply the standard coefficients and sum to Y + let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco; + let Ybg = Rbg * Rco + Gbg * Gco + Bbg * Bco; + + // Soft clamp Y when near black. + // Now clamping all colors to prevent crossover errors + if (Ytxt <= blkThrs) Ytxt += (blkThrs - Ytxt) ** blkClmp; + if (Ybg <= blkThrs) Ybg += (blkThrs - Ybg) ** blkClmp; + + // Return 0 Early for extremely low ∆Y (lint trap #1) + if (Math.abs(Ybg - Ytxt) < deltaYmin) return 0.0; + + // SAPC CONTRAST + + let outputContrast; // For weighted final values + if (Ybg > Ytxt) { + // For normal polarity, black text on white + // Calculate the SAPC contrast value and scale + + const SAPC = (Ybg ** normBG - Ytxt ** normTXT) * scaleBoW; + + // NEW! SAPC SmoothScale™ + // Low Contrast Smooth Scale Rollout to prevent polarity reversal + // and also a low clip for very low contrasts (lint trap #2) + // much of this is for very low contrasts, less than 10 + // therefore for most reversing needs, only loConOffset is important + outputContrast = SAPC < loClip ? 0.0 : SAPC < loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC - loConOffset; + } else { + // For reverse polarity, light text on dark + // WoB should always return negative value. + + const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB; + outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset; + } + return outputContrast * 100; + } + + // Types + + const delta = 0.20689655172413793; // 6÷29 + + const cielabForwardTransform = t => t > delta ** 3 ? Math.cbrt(t) : t / (3 * delta ** 2) + 4 / 29; + const cielabReverseTransform = t => t > delta ? t ** 3 : 3 * delta ** 2 * (t - 4 / 29); + function fromXYZ$1(xyz) { + const transform = cielabForwardTransform; + const transformedY = transform(xyz[1]); + return [116 * transformedY - 16, 500 * (transform(xyz[0] / 0.95047) - transformedY), 200 * (transformedY - transform(xyz[2] / 1.08883))]; + } + function toXYZ$1(lab) { + const transform = cielabReverseTransform; + const Ln = (lab[0] + 16) / 116; + return [transform(Ln + lab[1] / 500) * 0.95047, transform(Ln), transform(Ln - lab[2] / 200) * 1.08883]; + } + + // Utilities + + // Types + + // For converting XYZ to sRGB + const srgbForwardMatrix = [[3.2406, -1.5372, -0.4986], [-0.9689, 1.8758, 0.0415], [0.0557, -0.2040, 1.0570]]; + + // Forward gamma adjust + const srgbForwardTransform = C => C <= 0.0031308 ? C * 12.92 : 1.055 * C ** (1 / 2.4) - 0.055; + + // For converting sRGB to XYZ + const srgbReverseMatrix = [[0.4124, 0.3576, 0.1805], [0.2126, 0.7152, 0.0722], [0.0193, 0.1192, 0.9505]]; + + // Reverse gamma adjust + const srgbReverseTransform = C => C <= 0.04045 ? C / 12.92 : ((C + 0.055) / 1.055) ** 2.4; + function fromXYZ(xyz) { + const rgb = Array(3); + const transform = srgbForwardTransform; + const matrix = srgbForwardMatrix; + + // Matrix transform, then gamma adjustment + for (let i = 0; i < 3; ++i) { + // Rescale back to [0, 255] + rgb[i] = Math.round(clamp(transform(matrix[i][0] * xyz[0] + matrix[i][1] * xyz[1] + matrix[i][2] * xyz[2])) * 255); + } + return { + r: rgb[0], + g: rgb[1], + b: rgb[2] + }; + } + function toXYZ(_ref) { + let { + r, + g, + b + } = _ref; + const xyz = [0, 0, 0]; + const transform = srgbReverseTransform; + const matrix = srgbReverseMatrix; + + // Rescale from [0, 255] to [0, 1] then adjust sRGB gamma to linear RGB + r = transform(r / 255); + g = transform(g / 255); + b = transform(b / 255); + + // Matrix color space transform + for (let i = 0; i < 3; ++i) { + xyz[i] = matrix[i][0] * r + matrix[i][1] * g + matrix[i][2] * b; + } + return xyz; + } + + // Utilities + + // Types + + function isCssColor(color) { + return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color); + } + function isParsableColor(color) { + return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color); + } + const cssColorRe = /^(?(?:rgb|hsl)a?)\((?.+)\)/; + const mappers = { + rgb: (r, g, b, a) => ({ + r, + g, + b, + a + }), + rgba: (r, g, b, a) => ({ + r, + g, + b, + a + }), + hsl: (h, s, l, a) => HSLtoRGB({ + h, + s, + l, + a + }), + hsla: (h, s, l, a) => HSLtoRGB({ + h, + s, + l, + a + }), + hsv: (h, s, v, a) => HSVtoRGB({ + h, + s, + v, + a + }), + hsva: (h, s, v, a) => HSVtoRGB({ + h, + s, + v, + a + }) + }; + function parseColor(color) { + if (typeof color === 'number') { + if (isNaN(color) || color < 0 || color > 0xFFFFFF) { + // int can't have opacity + consoleWarn(`'${color}' is not a valid hex color`); + } + return { + r: (color & 0xFF0000) >> 16, + g: (color & 0xFF00) >> 8, + b: color & 0xFF + }; + } else if (typeof color === 'string' && cssColorRe.test(color)) { + const { + groups + } = color.match(cssColorRe); + const { + fn, + values + } = groups; + const realValues = values.split(/,\s*/).map(v => { + if (v.endsWith('%') && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn)) { + return parseFloat(v) / 100; + } else { + return parseFloat(v); + } + }); + return mappers[fn](...realValues); + } else if (typeof color === 'string') { + let hex = color.startsWith('#') ? color.slice(1) : color; + if ([3, 4].includes(hex.length)) { + hex = hex.split('').map(char => char + char).join(''); + } else if (![6, 8].includes(hex.length)) { + consoleWarn(`'${color}' is not a valid hex(a) color`); + } + const int = parseInt(hex, 16); + if (isNaN(int) || int < 0 || int > 0xFFFFFFFF) { + consoleWarn(`'${color}' is not a valid hex(a) color`); + } + return HexToRGB(hex); + } else if (typeof color === 'object') { + if (has(color, ['r', 'g', 'b'])) { + return color; + } else if (has(color, ['h', 's', 'l'])) { + return HSVtoRGB(HSLtoHSV(color)); + } else if (has(color, ['h', 's', 'v'])) { + return HSVtoRGB(color); + } + } + throw new TypeError(`Invalid color: ${color == null ? color : String(color) || color.constructor.name}\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`); + } + + /** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */ + function HSVtoRGB(hsva) { + const { + h, + s, + v, + a + } = hsva; + const f = n => { + const k = (n + h / 60) % 6; + return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0); + }; + const rgb = [f(5), f(3), f(1)].map(v => Math.round(v * 255)); + return { + r: rgb[0], + g: rgb[1], + b: rgb[2], + a + }; + } + function HSLtoRGB(hsla) { + return HSVtoRGB(HSLtoHSV(hsla)); + } + function HSLtoHSV(hsl) { + const { + h, + s, + l, + a + } = hsl; + const v = l + s * Math.min(l, 1 - l); + const sprime = v === 0 ? 0 : 2 - 2 * l / v; + return { + h, + s: sprime, + v, + a + }; + } + function toHex(v) { + const h = Math.round(v).toString(16); + return ('00'.substr(0, 2 - h.length) + h).toUpperCase(); + } + function RGBtoHex(_ref2) { + let { + r, + g, + b, + a + } = _ref2; + return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : ''].join('')}`; + } + function HexToRGB(hex) { + hex = parseHex(hex); + let [r, g, b, a] = chunk(hex, 2).map(c => parseInt(c, 16)); + a = a === undefined ? a : a / 255; + return { + r, + g, + b, + a + }; + } + function parseHex(hex) { + if (hex.startsWith('#')) { + hex = hex.slice(1); + } + hex = hex.replace(/([^0-9a-f])/gi, 'F'); + if (hex.length === 3 || hex.length === 4) { + hex = hex.split('').map(x => x + x).join(''); + } + if (hex.length !== 6) { + hex = padEnd(padEnd(hex, 6), 8, 'F'); + } + return hex; + } + function lighten(value, amount) { + const lab = fromXYZ$1(toXYZ(value)); + lab[0] = lab[0] + amount * 10; + return fromXYZ(toXYZ$1(lab)); + } + function darken(value, amount) { + const lab = fromXYZ$1(toXYZ(value)); + lab[0] = lab[0] - amount * 10; + return fromXYZ(toXYZ$1(lab)); + } + + /** + * Calculate the relative luminance of a given color + * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef + */ + function getLuma(color) { + const rgb = parseColor(color); + return toXYZ(rgb)[1]; + } + function getForeground(color) { + const blackContrast = Math.abs(APCAcontrast(parseColor(0), parseColor(color))); + const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), parseColor(color))); + + // TODO: warn about poor color selections + // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background))) + // const minContrast = Math.max(blackContrast, whiteContrast) + // if (minContrast < 60) { + // consoleInfo(`${key} theme color ${color} has poor contrast (${minContrast.toFixed()}%)`) + // } else if (contrastAsText < 60 && !['background', 'surface'].includes(color)) { + // consoleInfo(`${key} theme color ${color} has poor contrast as text (${contrastAsText.toFixed()}%)`) + // } + + // Prefer white text if both have an acceptable contrast ratio + return whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000'; + } + + // Utilities + + // Types + + const ThemeSymbol = Symbol.for('alpinui:theme'); + const makeThemeProps = propsFactory({ + theme: String + }, 'theme'); + function genDefaults() { + return { + defaultTheme: 'light', + variations: { + colors: [], + lighten: 0, + darken: 0 + }, + themes: { + light: { + dark: false, + colors: { + background: '#FFFFFF', + surface: '#FFFFFF', + 'surface-bright': '#FFFFFF', + 'surface-light': '#EEEEEE', + 'surface-variant': '#424242', + 'on-surface-variant': '#EEEEEE', + primary: '#1867C0', + 'primary-darken-1': '#1F5592', + secondary: '#48A9A6', + 'secondary-darken-1': '#018786', + error: '#B00020', + info: '#2196F3', + success: '#4CAF50', + warning: '#FB8C00' + }, + variables: { + 'border-color': '#000000', + 'border-opacity': 0.12, + 'high-emphasis-opacity': 0.87, + 'medium-emphasis-opacity': 0.60, + 'disabled-opacity': 0.38, + 'idle-opacity': 0.04, + 'hover-opacity': 0.04, + 'focus-opacity': 0.12, + 'selected-opacity': 0.08, + 'activated-opacity': 0.12, + 'pressed-opacity': 0.12, + 'dragged-opacity': 0.08, + 'theme-kbd': '#212529', + 'theme-on-kbd': '#FFFFFF', + 'theme-code': '#F5F5F5', + 'theme-on-code': '#000000' + } + }, + dark: { + dark: true, + colors: { + background: '#121212', + surface: '#212121', + 'surface-bright': '#ccbfd6', + 'surface-light': '#424242', + 'surface-variant': '#a3a3a3', + 'on-surface-variant': '#424242', + primary: '#2196F3', + 'primary-darken-1': '#277CC1', + secondary: '#54B6B2', + 'secondary-darken-1': '#48A9A6', + error: '#CF6679', + info: '#2196F3', + success: '#4CAF50', + warning: '#FB8C00' + }, + variables: { + 'border-color': '#FFFFFF', + 'border-opacity': 0.12, + 'high-emphasis-opacity': 1, + 'medium-emphasis-opacity': 0.70, + 'disabled-opacity': 0.50, + 'idle-opacity': 0.10, + 'hover-opacity': 0.04, + 'focus-opacity': 0.12, + 'selected-opacity': 0.08, + 'activated-opacity': 0.12, + 'pressed-opacity': 0.16, + 'dragged-opacity': 0.08, + 'theme-kbd': '#212529', + 'theme-on-kbd': '#FFFFFF', + 'theme-code': '#343434', + 'theme-on-code': '#CCCCCC' + } + } + } + }; + } + function parseThemeOptions() { + let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : genDefaults(); + const defaults = genDefaults(); + if (!options) return { + ...defaults, + isDisabled: true + }; + const themes = {}; + for (const [key, theme] of Object.entries(options.themes ?? {})) { + const defaultTheme = theme.dark || key === 'dark' ? defaults.themes?.dark : defaults.themes?.light; + themes[key] = mergeDeep(defaultTheme, theme); + } + return mergeDeep(defaults, { + ...options, + themes + }); + } + + // Composables + function createTheme(options) { + const parsedOptions = parseThemeOptions(options); + const name = alpineReactivity.ref(parsedOptions.defaultTheme); + const themes = alpineReactivity.ref(parsedOptions.themes); + const computedThemes = alpineReactivity.computed(() => { + const acc = {}; + for (const [name, original] of Object.entries(themes.value)) { + const theme = acc[name] = { + ...original, + colors: { + ...original.colors + } + }; + if (parsedOptions.variations) { + for (const name of parsedOptions.variations.colors) { + const color = theme.colors[name]; + if (!color) continue; + for (const variation of ['lighten', 'darken']) { + const fn = variation === 'lighten' ? lighten : darken; + for (const amount of createRange(parsedOptions.variations[variation], 1)) { + theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount)); + } + } + } + } + for (const color of Object.keys(theme.colors)) { + if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue; + const onColor = `on-${color}`; + const colorVal = parseColor(theme.colors[color]); + theme.colors[onColor] = getForeground(colorVal); + } + } + return acc; + }); + const current = alpineReactivity.computed(() => computedThemes.value[name.value]); + const styles = alpineReactivity.computed(() => { + const lines = []; + if (current.value?.dark) { + createCssClass(lines, ':root', ['color-scheme: dark']); + } + createCssClass(lines, ':root', genCssVariables(current.value)); + for (const [themeName, theme] of Object.entries(computedThemes.value)) { + createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)]); + } + const bgLines = []; + const fgLines = []; + const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors))); + for (const key of colors) { + if (/^on-[a-z]/.test(key)) { + createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]); + } else { + createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`]); + createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]); + createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]); + } + } + lines.push(...bgLines, ...fgLines); + return lines.map((str, i) => i === 0 ? str : ` ${str}`).join(''); + }); + function getHead() { + return { + style: [{ + children: styles.value, + id: 'alpinui-theme-stylesheet', + nonce: parsedOptions.cspNonce || false + }] + }; + } + function install(head) { + if (parsedOptions.isDisabled) return; + + // TODO - Check if this works? + if (head) { + if (head.push) { + const entry = head.push(getHead()); + if (IN_BROWSER) { + alpineReactivity.watch(styles, () => { + entry.patch(getHead()); + }); + } + } else { + if (IN_BROWSER) { + head.addHeadObjs(getHead()); + alpineReactivity.watchEffect(() => head.updateDOM()); + } else { + head.addHeadObjs(getHead()); + } + } + } else { + let styleEl = IN_BROWSER ? document.getElementById('alpinui-theme-stylesheet') : null; + if (IN_BROWSER) { + alpineReactivity.watch(styles, updateStyles, { + immediate: true + }); + } else { + updateStyles(); + } + function updateStyles() { + if (typeof document !== 'undefined' && !styleEl) { + const el = document.createElement('style'); + el.type = 'text/css'; + el.id = 'alpinui-theme-stylesheet'; + if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce); + styleEl = el; + document.head.appendChild(styleEl); + } + if (styleEl) styleEl.innerHTML = styles.value; + } + } + } + const themeClasses = alpineReactivity.computed(() => ({ + [`v-theme--${name.value}`]: !parsedOptions.isDisabled + })); + const nameReadonly = alpineReactivity.computed(() => name.value); + return { + install, + isDisabled: parsedOptions.isDisabled, + name: nameReadonly, + themes, + current, + computedThemes, + themeClasses, + styles, + global: { + name: nameReadonly, + current + } + }; + } + function provideTheme(vm, props) { + const theme = vm.$inject(ThemeSymbol, null); + if (!theme) throw new Error('Could not find Alpinui theme injection'); + const name = alpineReactivity.computed(() => { + return props.theme ?? theme.name.value; + }); + const current = alpineReactivity.computed(() => theme.themes.value[name.value]); + const themeClasses = alpineReactivity.computed(() => ({ + [`v-theme--${name.value}`]: !theme.isDisabled + })); + const newTheme = { + ...theme, + name, + current, + themeClasses + }; + vm.$provide(ThemeSymbol, newTheme); + return newTheme; + } + function useTheme(vm) { + const theme = vm.$inject(ThemeSymbol, null); + if (!theme) throw new Error('Could not find Alpinui theme injection'); + return theme; + } + function createCssClass(lines, selector, content) { + lines.push(`${selector} {\n`, ...content.map(line => ` ${line};\n`), '}\n'); + } + function genCssVariables(theme) { + const lightOverlay = theme.dark ? 2 : 1; + const darkOverlay = theme.dark ? 1 : 2; + const variables = []; + for (const [key, value] of Object.entries(theme.colors)) { + const rgb = parseColor(value); + variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`); + if (!key.startsWith('on-')) { + variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`); + } + } + for (const [key, value] of Object.entries(theme.variables)) { + const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined; + const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined; + variables.push(`--v-${key}: ${rgb ?? value}`); + } + return variables; + } + + // Composables + + // Types + + // TODO - The entrypoint is that, at 'alpine:init' event, we define this Alpineui + // component. And then, when user uses it, user can tweak what components it uses, + // and those will be registered afterwards. + // `document.addEventListener('alpine:init', () => {})` + const Alpinui = alpineComposition.defineComponent({ + /* eslint-disable vue/multi-word-component-names */ + name: 'Alpinui', + props: { + options: { + type: Object, + default: () => ({}) + } + }, + emits: { + hello: data => true + }, + // TODO - Convert this to component, so that instead of users defining + // `createVuetify()`, they declare the top-level component as + // `
` + setup: (props, vm) => { + const { + blueprint, + ...rest + } = props.options; + const options = mergeDeep(blueprint, rest); + const defaults = createDefaults(options.defaults); + const display = createDisplay(options.display, options.ssr); + const theme = createTheme(options.theme); + const icons = createIcons(options.icons); + const locale = createLocale(options.locale); + const date = createDate(options.date, locale); + const goTo = createGoTo(options.goTo, locale); + vm.$provide(DefaultsSymbol, defaults); + vm.$provide(DisplaySymbol, display); + vm.$provide(ThemeSymbol, theme); + vm.$provide(IconSymbol, icons); + vm.$provide(LocaleSymbol, locale); + vm.$provide(DateOptionsSymbol, date.options); + vm.$provide(DateAdapterSymbol, date.instance); + vm.$provide(GoToSymbol, goTo); + + // TODO - Is this needed? + // import { IN_BROWSER } from '@/util/globals'; + // if (IN_BROWSER && options.ssr) { + // const { mount } = app; + // app.mount = (...args) => { + // // const vm = mount(...args); + // vm.$nextTick(() => display.update()); + // app.mount = mount; + // return vm; + // }; + // } + + const hello = 'world'; + const triggerEmit = () => { + vm.$emit('hello', { + a: 1 + }); + }; + return { + defaults, + display, + theme, + icons, + locale, + date, + goTo, + hello, + // TODO + triggerEmit // TODO + }; + } + }); + + // Utilities + + // Types + + // Composables + function useColor(colors) { + return destructComputed(() => { + const classes = {}; + const styles = {}; + if (colors.value.background) { + if (isCssColor(colors.value.background)) { + styles.backgroundColor = colors.value.background; + if (!colors.value.text && isParsableColor(colors.value.background)) { + const backgroundColor = parseColor(colors.value.background); + if (backgroundColor.a == null || backgroundColor.a === 1) { + const textColor = getForeground(backgroundColor); + styles.color = textColor; + styles.caretColor = textColor; + } + } + } else { + classes[`bg-${colors.value.background}`] = true; + } + } + if (colors.value.text) { + if (isCssColor(colors.value.text)) { + styles.color = colors.value.text; + styles.caretColor = colors.value.text; + } else { + classes[`text-${colors.value.text}`] = true; + } + } + return { + colorClasses: classes, + colorStyles: styles + }; + }); + } + function useTextColor(props, name) { + const colors = alpineReactivity.computed(() => ({ + text: alpineReactivity.isRef(props) ? props.value : name ? props[name] : null + })); + const { + colorClasses: textColorClasses, + colorStyles: textColorStyles + } = useColor(colors); + return { + textColorClasses, + textColorStyles + }; + } + + // Utilities + + // Types + + // Composables + const makeComponentProps = propsFactory({ + class: Object, + style: { + type: Object, + default: null + } + }, 'component'); + + // Composables + + // Types + + // TODO + // TODO + // TODO - TODO - USE THIS INSTEAD OF @/alpine/component !!! + // TODO + // TODO + + // Implementation + function defineComponent(options) { + options._setup = options._setup ?? options.setup; + if (!options.name) { + consoleWarn('The component is missing an explicit name, unable to generate default prop value'); + return options; + } + if (options._setup) { + options.props = propsFactory(options.props ?? {}, options.name)(); + const propKeys = Object.keys(options.props).filter(key => key !== 'class' && key !== 'style'); + options.filterProps = function filterProps(props) { + return pick(props, propKeys); + }; + options.props._as = String; + options.setup = (props, vm) => { + const defaults = injectDefaults(vm); + + // Skip props proxy if defaults are not provided + if (!defaults.value) return options._setup(props, vm); + const { + props: _props, + provideSubDefaults + } = internalUseDefaults(vm, props, props._as ?? options.name, defaults); + const setupBindings = options._setup(_props, vm); + provideSubDefaults(); + return setupBindings; + }; + } + return options; + } + + // TODO + // TODO + // TODO - TODO - IS THIS NEEDED? + // TODO + // TODO + + // https://github.com/vuejs/core/pull/10557 + + // not a vue Component + + const makeVDividerProps = propsFactory({ + color: String, + inset: Boolean, + length: [Number, String], + opacity: [Number, String], + thickness: [Number, String], + vertical: Boolean, + ...makeComponentProps(), + ...makeThemeProps() + }, 'ADivider'); + const ADivider = defineComponent({ + name: 'ADivider', + props: makeVDividerProps(), + setup(props, vm) { + + const { + themeClasses + } = provideTheme(vm, props); + const { + textColorClasses, + textColorStyles + } = useTextColor(alpineReactivity.toRef(props, 'color')); + const dividerStyles = alpineReactivity.computed(() => { + const styles = {}; + if (props.length) { + styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length); + } + if (props.thickness) { + styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness); + } + return styles; + }); + + // Rendering variables + const hrClasses = alpineReactivity.computed(() => ({ + 'a-divider': true, + 'a-divider--inset': props.inset, + 'a-divider--vertical': props.vertical, + ...themeClasses.value, + ...textColorClasses.value, + ...props.class + })); + const hrStyles = alpineReactivity.computed(() => ({ + ...dividerStyles.value, + ...textColorStyles.value, + ...(props.opacity != null ? { + '--v-border-opacity': props.opacity + } : {}), + ...props.style + })); + const hrAriaOrient = alpineReactivity.computed(() => !vm.$attrs.role || vm.$attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined); + const hrRole = alpineReactivity.computed(() => `${vm.$attrs.role || 'separator'}`); + alpineReactivity.computed(() => ({ + 'a-divider__wrapper': true, + 'a-divider__wrapper--vertical': props.vertical, + 'a-divider__wrapper--inset': props.inset + })); + return { + hrClasses, + hrStyles, + hrAriaOrient, + hrRole + }; + } + }); + + // export * from './VEmptyState' + // export * from './VExpansionPanel' + // export * from './VFab' + // export * from './VField' + // export * from './VFileInput' + // export * from './VFooter' + // export * from './VForm' + // export * from './VGrid' + // export * from './VHover' + // export * from './VIcon' + // export * from './VImg' + // export * from './VInfiniteScroll' + // export * from './VInput' + // export * from './VItemGroup' + // export * from './VKbd' + // export * from './VLabel' + // export * from './VLayout' + // export * from './VLazy' + // export * from './VList' + // export * from './VLocaleProvider' + // export * from './VMain' + // export * from './VMenu' + // export * from './VMessages' + // export * from './VNavigationDrawer' + // export * from './VNoSsr' + // export * from './VOtpInput' + // // export * from './VOverflowBtn' + // export * from './VOverlay' + // export * from './VPagination' + // export * from './VParallax' + // export * from './VProgressCircular' + // export * from './VProgressLinear' + // export * from './VRadio' + // export * from './VRadioGroup' + // export * from './VRangeSlider' + // export * from './VRating' + // export * from './VResponsive' + // export * from './VSelect' + // export * from './VSelectionControl' + // export * from './VSelectionControlGroup' + // export * from './VSheet' + // export * from './VSkeletonLoader' + // export * from './VSlideGroup' + // export * from './VSlider' + // export * from './VSnackbar' + // export * from './VSparkline' + // export * from './VSpeedDial' + // export * from './VStepper' + // export * from './VSwitch' + // export * from './VSystemBar' + // export * from './VTabs' + // export * from './VTable' + // export * from './VTextarea' + // export * from './VTextField' + // export * from './VThemeProvider' + // export * from './VTimeline' + // // export * from './VTimePicker' + // export * from './VToolbar' + // export * from './VTooltip' + // // export * from './VTreeview' + // export * from './VValidation' + // export * from './VVirtualScroll' + // export * from './VWindow' + // export * from './transitions' + + var components = /*#__PURE__*/Object.freeze({ + __proto__: null, + ADivider: ADivider, + Alpinui: Alpinui + }); + + // Utilities + // Alpinui adds `$aliasName` to the Alpine components + const aliasNamePlugin = (vm, _ref) => { + let { + options + } = _ref; + const { + aliasName + } = options; + Object.defineProperty(vm, '$aliasName', { + get() { + return aliasName; + } + }); + }; + + /** Register Alpinui components with Alpine */ + function createAlpinui$1() { + let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + const { + aliases = {}, + components: components$1 = components + } = options; + const { + registerComponent + } = alpineComposition.createAlpineComposition({ + plugins: [aliasNamePlugin, ...(options?.plugins ?? [])] + }); + + // Allow users to provide their own instance of Alpine via install() + const install = Alpine => { + for (const key in components$1) { + registerComponent(Alpine, components$1[key]); + } + for (const key in aliases) { + const aliasComp = alpineComposition.defineComponent({ + ...aliases[key], + name: key, + aliasName: aliases[key].name + }); + registerComponent(Alpine, aliasComp); + } + getUid.reset(); + }; + return { + install, + registerComponent + }; + } + const version$1 = "0.0.1"; + createAlpinui$1.version = version$1; + + /* eslint-disable local-rules/sort-imports */ + + + // Types + + // TODO + // TODO + // TODO - CHECK IF THESE ARE SET TO GLOBAL_THIS IF IMPORTED VIA CDN + // TODO -> SHOULD BE SO - WORKS FOR VUETIFY AND VUE + // TODO + + const createAlpinui = function () { + let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + return createAlpinui$1({ + components, + ...options + }); + }; + const version = "0.0.1"; + createAlpinui.version = version; + + // TODO + // TODO + // TODO - DOCUMENT USAGE + // TODO + // TODO + + // + // ```sh + // npm install alpinui + // ``` + // + // ```ts + // import Alpine from 'alpinejs' + // import { createAlpinui } from 'alpinui'; + // + // createAlpinui({ + // components, + // aliases, + // }).install(Alpine) + // + // window.Alpine = Alpine + // window.Alpine.start() + // ``` + + // AND IF USING CDN: + // + // ```html + // + // + // ``` + // + // ```ts + // const { createAlpinui } = Alpinui; + // + // document.addEventListener('alpine:init', () => { + // createAlpinui({ + // // components, + // // aliases, + // }).install(window.Alpine) + // }); + // ``` + + exports.blueprints = index; + exports.components = components; + exports.createAlpinui = createAlpinui; + exports.useDate = useDate; + exports.useDefaults = useDefaults; + exports.useDisplay = useDisplay; + exports.useGoTo = useGoTo; + exports.useLocale = useLocale; + exports.useRtl = useRtl; + exports.useTheme = useTheme; + exports.version = version; + +})); +//# sourceMappingURL=alpinui.js.map diff --git a/packages/alpinui/dev/favicon.png b/packages/alpinui/dev/favicon.png new file mode 100644 index 0000000..d66b3d0 Binary files /dev/null and b/packages/alpinui/dev/favicon.png differ diff --git a/packages/alpinui/dev/index.html b/packages/alpinui/dev/index.html new file mode 100644 index 0000000..c3a2dbd --- /dev/null +++ b/packages/alpinui/dev/index.html @@ -0,0 +1,50 @@ + + + + Vuetify Dev Playground + + + + + + + + + + +
+ + + + + + + +
+
+ +
+
+ +
+ + + +
+ +
+ + diff --git a/packages/alpinui/dev/index.js b/packages/alpinui/dev/index.js new file mode 100644 index 0000000..a26c876 --- /dev/null +++ b/packages/alpinui/dev/index.js @@ -0,0 +1,23 @@ +import vuetify from './vuetify'; +import App from './App.vue'; + +import { routes } from './router'; +import viteSSR from 'vite-ssr/vue'; + +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { fas } from '@fortawesome/free-solid-svg-icons'; + +library.add(fas); + +debugger; +document.addEventListener('alpine:init', () => { + debugger; + AlpineReactivity.setAlpine(Alpine); + vuetify.install(Alpine); +}); + +// export default viteSSR(App, { routes }, ({ app }) => { +// app.use(vuetify); +// app.component('FontAwesomeIcon', FontAwesomeIcon); +// }); diff --git a/packages/alpinui/dev/router.js b/packages/alpinui/dev/router.js new file mode 100644 index 0000000..85a3dad --- /dev/null +++ b/packages/alpinui/dev/router.js @@ -0,0 +1,46 @@ +import { h } from 'vue' + +const home = { + setup: () => () => h('div', 'hello'), +} +const page1 = { + setup: () => () => h('div', 'page1'), +} +const page2 = { + setup: () => () => h('div', 'page2'), +} +const nested1 = { + setup: () => () => h('div', 'nested1'), +} +const nested2 = { + setup: () => () => h('div', 'nested2'), +} + +export const routes = [ + { + path: '/', + name: 'home', + component: home, + }, + { + path: '/page1', + name: 'page1', + component: page1, + }, + { + path: '/page2', + name: 'page2', + component: page2, + }, + { + path: '/nested/page1', + name: 'Nested 1', + component: nested1, + }, + { + path: '/nested/page2', + name: 'Nested 2', + component: nested2, + }, + { path: '/:pathMatch(.*)*', redirect: '/' }, +] diff --git a/packages/alpinui/dev/vuetify.js b/packages/alpinui/dev/vuetify.js new file mode 100644 index 0000000..4b2a5f9 --- /dev/null +++ b/packages/alpinui/dev/vuetify.js @@ -0,0 +1,24 @@ +import '@mdi/font/css/materialdesignicons.css'; +// import 'vuetify/src/styles/main.sass' // TODO + +// import { createAlpinui } from 'alpinui/src/framework'; +// import { createAlpinui } from 'alpinui'; +// import * as directives from 'alpinui/src/directives'; + +// import date from './vuetify/date'; +// import defaults from './vuetify/defaults'; +// import icons from './vuetify/icons'; +// import locale from './vuetify/locale'; + +const { createAlpinui } = window.Alpinui; + +debugger; +export default createAlpinui({ + // directives, + // ssr: !!process.env.VITE_SSR, + // date, + // defaults, + // icons, + // locale, + // theme: { defaultTheme: 'light' }, +}); diff --git a/packages/alpinui/dev/vuetify/date.js b/packages/alpinui/dev/vuetify/date.js new file mode 100644 index 0000000..7f9c816 --- /dev/null +++ b/packages/alpinui/dev/vuetify/date.js @@ -0,0 +1,19 @@ +// import DateFnsAdapter from '@date-io/date-fns' +// import { enAU, enUS, ja, sv } from 'date-fns/locale' + +// import DayJsAdapter from '@date-io/dayjs' + +export default { + // adapter: DateFnsAdapter, + formats: { + // dayOfMonth: date => date.getDate(), + }, + locale: { + en: 'en-US', + // en: 'en-AU', + // en: enAU, + // en: enUS, + // ja, + // sv, + }, +} diff --git a/packages/alpinui/dev/vuetify/defaults.js b/packages/alpinui/dev/vuetify/defaults.js new file mode 100644 index 0000000..40b8bc3 --- /dev/null +++ b/packages/alpinui/dev/vuetify/defaults.js @@ -0,0 +1,3 @@ +export default { + // +} diff --git a/packages/alpinui/dev/vuetify/icons.js b/packages/alpinui/dev/vuetify/icons.js new file mode 100644 index 0000000..e4f6862 --- /dev/null +++ b/packages/alpinui/dev/vuetify/icons.js @@ -0,0 +1,12 @@ +import { aliases } from 'vuetify/src/iconsets/mdi-svg' +import { mdi } from 'vuetify/src/iconsets/mdi' +import { fa } from 'vuetify/src/iconsets/fa-svg' + +export default { + defaultSet: 'mdi', + aliases, + sets: { + mdi, + fa, + }, +} diff --git a/packages/alpinui/dev/vuetify/locale.js b/packages/alpinui/dev/vuetify/locale.js new file mode 100644 index 0000000..c3d3e5d --- /dev/null +++ b/packages/alpinui/dev/vuetify/locale.js @@ -0,0 +1,10 @@ +import { ar, en, ja, sv } from 'vuetify/src/locale' + +export default { + messages: { + en, + ar, + sv, + ja, + }, +} diff --git a/packages/alpinui/jest.config.js b/packages/alpinui/jest.config.js new file mode 100644 index 0000000..1b42612 --- /dev/null +++ b/packages/alpinui/jest.config.js @@ -0,0 +1,10 @@ +const base = require('../../jest.config') + +module.exports = { + ...base, + id: 'Vuetify', + displayName: 'Vuetify', + setupFiles: [ + 'jest-canvas-mock', + ], +} diff --git a/packages/alpinui/package.json b/packages/alpinui/package.json new file mode 100755 index 0000000..0097891 --- /dev/null +++ b/packages/alpinui/package.json @@ -0,0 +1,204 @@ +{ + "name": "alpinui", + "description": "Vuetify for AlpineJS - Material Component Framework", + "version": "0.0.1", + "author": "Juro Oravec ", + "homepage": "https://github.com/JuroOravec/alpinui/blob/main/packages/alpinui", + "repository": { + "type": "git", + "url": "git+https://github.com/jurooravec/alpinui.git", + "directory": "packages/alpinui" + }, + "bugs": { + "url": "https://github.com/jurooravec/alpinui/issues" + }, + "license": "MIT", + "keywords": [ + "alpinui", + "ui framework", + "component framework", + "ui library", + "component library", + "material components", + "vue framework" + ], + "funding": { + "type": "github", + "url": "https://github.com/sponsors/jurooravec" + }, + "main": "lib/framework.mjs", + "module": "lib/framework.mjs", + "jsdelivr": "dist/alpinui.js", + "unpkg": "dist/alpinui.js", + "types": "lib/index.d.mts", + "sass": "lib/styles/main.sass", + "styles": "lib/styles/main.css", + "sideEffects": [ + "*.sass", + "*.scss", + "*.css", + "*.vue" + ], + "files": [ + "dist/", + "lib/", + "_settings.scss", + "_styles.scss", + "_tools.scss", + "CHANGELOG.md" + ], + "exports": { + ".": { + "sass": "./lib/styles/main.sass", + "style": "./lib/styles/main.css", + "types": "./lib/index.d.mts", + "default": "./lib/framework.mjs" + }, + "./styles": { + "sass": "./lib/styles/main.sass", + "default": "./lib/styles/main.css" + }, + "./styles/*": "./lib/styles/*", + "./framework": "./lib/framework.mjs", + "./blueprints": "./lib/blueprints/index.mjs", + "./blueprints/*": "./lib/blueprints/*.mjs", + "./components": "./lib/components/index.mjs", + "./components/*": "./lib/components/*/index.mjs", + "./directives": "./lib/directives/index.mjs", + "./directives/*": "./lib/directives/*/index.mjs", + "./locale": "./lib/locale/index.mjs", + "./locale/adapters/*": "./lib/locale/adapters/*.mjs", + "./iconsets/*": "./lib/iconsets/*.mjs", + "./labs/components": "./lib/labs/components.mjs", + "./labs/*": "./lib/labs/*/index.mjs", + "./util/colors": "./lib/util/colors.mjs", + "./*": "./*" + }, + "typesVersions": { + "*": { + "lib/framework.mjs": [ + "lib/index.d.mts" + ], + "framework": [ + "lib/index.d.mts" + ], + "*": [ + "*", + "dist/*", + "lib/*", + "lib/*.d.mts", + "lib/*/index.d.mts" + ] + } + }, + "engines": { + "node": "^12.20 || >=14.13" + }, + "scripts": { + "watch": "yarn build:lib --watch", + "dev": "cross-env NODE_ENV=development vite", + "dev:ssr": "cross-env NODE_ENV=development VITE_SSR=true vite-ssr", + "dev:prod": "concurrently \"cross-env NODE_ENV=production vite build -w\" \"vite preview\"", + "dev:typecheck": "vue-tsc --noEmit --skipLibCheck --project ./tsconfig.dev.json", + "build": "rimraf lib dist && concurrently \"yarn build:dist\" \"yarn build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && yarn build:types", + "build:dist": "rollup --config build/rollup.config.mjs", + "build:lib": "cross-env NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .mjs", + "build:types": "rimraf types-temp && tsc --pretty --emitDeclarationOnly -p tsconfig.dist.json && rollup --config build/rollup.types.config.mjs && rimraf types-temp", + "tsc": "tsc", + "debug:test": "cross-env NODE_ENV=test node --inspect --inspect-brk ../../node_modules/jest/bin/jest.js --no-cache -i --verbose", + "test": "node build/run-tests.js", + "test:unix": "cross-env NODE_ENV=test jest", + "test:win32": "cross-env NODE_ENV=test jest -i", + "test:coverage": "yarn test --coverage", + "lint": "concurrently -n \"tsc,eslint\" --kill-others-on-fail \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint src -f codeframe --max-warnings 0\"", + "lint:fix": "concurrently -n \"tsc,eslint\" \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint --fix src\"", + "cy:open": "cypress open --component -b electron", + "cy:run": "percy exec -- cypress run --component" + }, + "devDependencies": { + "@date-io/core": "3.0.0", + "@date-io/date-fns": "3.0.0", + "@date-io/dayjs": "^3.0.0", + "@formatjs/intl": "^2.10.1", + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/vue-fontawesome": "^3.0.6", + "@percy/cli": "^1.28.2", + "@percy/cypress": "^3.1.2", + "@rollup/plugin-alias": "^5.1.0", + "@rollup/plugin-babel": "^6.0.4", + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-typescript": "^11.1.6", + "@types/alpinejs": "^3.13.10", + "@types/jest": "^28.1.8", + "@types/node": "^20.12.7", + "@types/resize-observer-browser": "^0.1.11", + "@vitejs/plugin-vue": "^5.0.4", + "@vitejs/plugin-vue-jsx": "^3.1.0", + "@vue/babel-plugin-jsx": "^1.2.2", + "@vue/test-utils": "2.4.6", + "acorn-walk": "^8.3.2", + "alpinejs": "^3.14.1", + "autoprefixer": "^10.4.19", + "babel-plugin-add-import-extension": "1.5.1", + "babel-plugin-module-resolver": "^5.0.0", + "babel-plugin-transform-define": "^2.1.4", + "babel-polyfill": "^6.26.0", + "concurrently": "^8.2.2", + "cssnano": "^6.1.2", + "cy-mobile-commands": "^0.3.0", + "cypress": "^13.7.2", + "cypress-file-upload": "^5.0.8", + "cypress-real-events": "^1.12.0", + "date-fns": "^3.6.0", + "dotenv": "^16.4.5", + "eslint-plugin-cypress": "^2.15.1", + "eslint-plugin-jest": "^28.2.0", + "fast-glob": "^3.3.2", + "identity-obj-proxy": "^3.0.0", + "jest-canvas-mock": "^2.5.2", + "micromatch": "^4.0.5", + "postcss": "^8.4.38", + "rollup": "^3.20.7", + "rollup-plugin-dts": "^6.1.0", + "rollup-plugin-sass": "^1.12.21", + "rollup-plugin-sourcemaps": "^0.6.3", + "rollup-plugin-terser": "^7.0.2", + "timezone-mock": "^1.3.6", + "vite": "^5.2.8", + "vite-ssr": "^0.17.1", + "vue-i18n": "^9.7.1", + "vue-router": "^4.3.0" + }, + "peerDependencies": { + "alpine-composition": "^0.1.15", + "alpine-reactivity": "^0.1.7", + "typescript": ">=4.7", + "vite-plugin-vuetify": ">=1.0.0", + "vue": "^3.3.0", + "vue-i18n": "^9.0.0", + "webpack-plugin-vuetify": ">=2.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + }, + "vue-i18n": { + "optional": true + }, + "webpack-plugin-vuetify": { + "optional": true + }, + "vite-plugin-vuetify": { + "optional": true + } + }, + "publishConfig": { + "access": "public" + }, + "vetur": { + "tags": "dist/json/tags.json", + "attributes": "dist/json/attributes.json" + }, + "web-types": "dist/json/web-types.json" +} diff --git a/packages/alpinui/playgrounds/Playground.calendar.vue b/packages/alpinui/playgrounds/Playground.calendar.vue new file mode 100644 index 0000000..bb93241 --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.calendar.vue @@ -0,0 +1,24 @@ + + + diff --git a/packages/alpinui/playgrounds/Playground.datatable.vue b/packages/alpinui/playgrounds/Playground.datatable.vue new file mode 100644 index 0000000..b5cff0d --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.datatable.vue @@ -0,0 +1,303 @@ + + + diff --git a/packages/alpinui/playgrounds/Playground.datepicker.vue b/packages/alpinui/playgrounds/Playground.datepicker.vue new file mode 100644 index 0000000..055023a --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.datepicker.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/packages/alpinui/playgrounds/Playground.infinite.vue b/packages/alpinui/playgrounds/Playground.infinite.vue new file mode 100644 index 0000000..b83f684 --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.infinite.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/alpinui/playgrounds/Playground.items.vue b/packages/alpinui/playgrounds/Playground.items.vue new file mode 100644 index 0000000..dd8e484 --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.items.vue @@ -0,0 +1,189 @@ + + + diff --git a/packages/alpinui/playgrounds/Playground.list.vue b/packages/alpinui/playgrounds/Playground.list.vue new file mode 100644 index 0000000..2609a37 --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.list.vue @@ -0,0 +1,210 @@ + + + diff --git a/packages/alpinui/playgrounds/Playground.nested.vue b/packages/alpinui/playgrounds/Playground.nested.vue new file mode 100644 index 0000000..784a6c8 --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.nested.vue @@ -0,0 +1,330 @@ + + + + + diff --git a/packages/alpinui/playgrounds/Playground.slider.vue b/packages/alpinui/playgrounds/Playground.slider.vue new file mode 100644 index 0000000..c161a42 --- /dev/null +++ b/packages/alpinui/playgrounds/Playground.slider.vue @@ -0,0 +1,301 @@ + + + diff --git a/packages/alpinui/postcss.config.js b/packages/alpinui/postcss.config.js new file mode 100644 index 0000000..7fb2bf8 --- /dev/null +++ b/packages/alpinui/postcss.config.js @@ -0,0 +1,9 @@ +const autoprefixer = require('autoprefixer') + +module.exports = ctx => ({ + plugins: [ + autoprefixer({ + remove: false + }) + ] +}) diff --git a/packages/alpinui/src/__tests__/framework.spec.ts b/packages/alpinui/src/__tests__/framework.spec.ts new file mode 100644 index 0000000..751085e --- /dev/null +++ b/packages/alpinui/src/__tests__/framework.spec.ts @@ -0,0 +1,60 @@ +// Utilities +import { describe, expect, it } from '@jest/globals'; +import { mount } from '@vue/test-utils'; +import { createAlpinui } from '../framework'; + +describe('framework', () => { + describe('install', () => { + it('should return install function', () => { + const vuetify = createVuetify(); + + expect('install' in vuetify).toBe(true); + }); + + it('should install provided components', () => { + const Foo = { name: 'Foo', template: '
' }; + const vuetify = createVuetify({ + components: { + Foo, + }, + }); + + const TestComponent = { + name: 'TestComponent', + props: {}, + template: '', + }; + + mount(TestComponent, { + global: { + plugins: [vuetify], + }, + }); + + expect('[Vue warn]: Failed to resolve component: foo').not.toHaveBeenTipped(); + }); + + it('should install provided directives', () => { + const Foo = { mounted: () => null }; + const vuetify = createVuetify({ + directives: { + Foo, + }, + }); + + const TestComponent = { + name: 'TestComponent', + props: {}, + template: '
', + }; + + mount(TestComponent, { + global: { + plugins: [vuetify], + }, + }); + + expect('[Vue warn]: Failed to resolve directive: foo').not.toHaveBeenTipped(); + }); + }); +}); diff --git a/packages/alpinui/src/alpine/tabs.ts b/packages/alpinui/src/alpine/tabs.ts new file mode 100644 index 0000000..7aaa180 --- /dev/null +++ b/packages/alpinui/src/alpine/tabs.ts @@ -0,0 +1,99 @@ +// @ts-nocheck // TODO // TODO // TODO + +import { computed, ref } from 'alpine-reactivity'; +import { defineComponent } from 'alpine-composition'; + +// TODO +// TODO +// TODO - USE THIS AS EXAMPLE USAGE +// TODO +// TODO + +const Baz = defineComponent({ + name: 'ABaz', + props: { + theTab: { + // TODO - See https://stackoverflow.com/questions/472418/why-is-4-not-an-instance-of-number + type: Number, + // default: () => 22, + }, + }, + setup: () => { + return { + baz: 'baz!', + }; + }, +}); + +const Tabs = defineComponent({ + name: 'ATabs', + props: { + key: { + // TODO - See https://stackoverflow.com/questions/472418/why-is-4-not-an-instance-of-number + // type: Number, + default: () => 22, + }, + }, + setup: (props, vm) => { + // Variables + const name = ref(null); + const openTab = ref(1); + + const tabQueryName = computed(() => { + return `tabs-${name.value}`; + }); + + /** + * Set the current open tab and push the info to query params. + * + * @param {number} tabIndex + */ + const setOpenTab = (tabIndex: number) => { + openTab.value = tabIndex; + + if (name.value) { + // @ts-expect-error + dliver.query.setParams({ [tabQueryName.value]: tabIndex }); + } + }; + + /** Handle tab change from URL */ + const onTabQueryParamChange = (newValue: any, oldValue: any) => { + if (newValue == null) return; + + const newValNum = typeof newValue === 'number' ? newValue : Number.parseInt(newValue); + if (newValNum === openTab.value) return; + + setOpenTab(newValNum); + }; + + // If we provided the `name` argument to the "tabs" component, then + // we register a listener for the query param `tabs-{name}`. + // The value of this query param is the current active tab (index). + // + // When user changes the currently-open tab, we push that info to the URL + // by updating the `tabs-{name}` query param. + // + // And when we navigate to a URL that already had `tabs-{name}` query param + // set, we load that tab. + if (name.value) { + // @ts-expect-error + dliver.query.registerParam( + tabQueryName.value, + (newVal: any, oldVal: any) => onTabQueryParamChange(newVal, oldVal), + ); + } + + // Sometimes, the scrollable tab content area is scrolled to the bottom + // when the page loads. So we ensure here that the we scroll to the top if not already + // Also see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop + const containerEl = vm.$refs.container; + if (containerEl.scrollTop) { + vm.$refs.container.scrollTop = 0; + } + + return { + openTab, + }; + }, +}); diff --git a/packages/alpinui/src/alpine/types.ts b/packages/alpinui/src/alpine/types.ts new file mode 100644 index 0000000..1cf03dd --- /dev/null +++ b/packages/alpinui/src/alpine/types.ts @@ -0,0 +1,18 @@ +// Types +import type { Alpine as AlpineType } from 'alpinejs'; +import type { InjectionKey } from 'vue'; + +declare module 'alpinejs' { + export interface Magics { + // These magics come from alpine-alpine + $Alpine: AlpineType; + + // These magics come from alpine-provide-inject + $provide: | string | number>( + key: K, + value: K extends InjectionKey ? V : T + ) => void; + $inject: (key: InjectionKey | string, defaultVal?: T) => T; + $injectSelf: (key: InjectionKey | string, defaultVal?: T) => T; + } +} diff --git a/packages/alpinui/src/blueprints/index.ts b/packages/alpinui/src/blueprints/index.ts new file mode 100644 index 0000000..3080f90 --- /dev/null +++ b/packages/alpinui/src/blueprints/index.ts @@ -0,0 +1,3 @@ +export { md1 } from './md1'; +export { md2 } from './md2'; +export { md3 } from './md3'; diff --git a/packages/alpinui/src/blueprints/md1.ts b/packages/alpinui/src/blueprints/md1.ts new file mode 100644 index 0000000..7c4e9c0 --- /dev/null +++ b/packages/alpinui/src/blueprints/md1.ts @@ -0,0 +1,73 @@ +// Icons +import { mdi } from '@/iconsets/mdi'; + +// Types +import type { Blueprint } from '@/components/Alpinui/Alpinui'; + +export const md1: Blueprint = { + defaults: { + global: { + rounded: 'sm', + }, + VAvatar: { + rounded: 'circle', + }, + VAutocomplete: { + variant: 'underlined', + }, + VBanner: { + color: 'primary', + }, + VBtn: { + color: 'primary', + rounded: 0, + }, + VCheckbox: { + color: 'secondary', + }, + VCombobox: { + variant: 'underlined', + }, + VSelect: { + variant: 'underlined', + }, + VSlider: { + color: 'primary', + }, + VTabs: { + color: 'primary', + }, + VTextarea: { + variant: 'underlined', + }, + VTextField: { + variant: 'underlined', + }, + VToolbar: { + VBtn: { + color: null, + }, + }, + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi, + }, + }, + theme: { + themes: { + light: { + colors: { + primary: '#3F51B5', + 'primary-darken-1': '#303F9F', + 'primary-lighten-1': '#C5CAE9', + secondary: '#FF4081', + 'secondary-darken-1': '#F50057', + 'secondary-lighten-1': '#FF80AB', + accent: '#009688', + }, + }, + }, + }, +}; diff --git a/packages/alpinui/src/blueprints/md2.ts b/packages/alpinui/src/blueprints/md2.ts new file mode 100644 index 0000000..eb2aba4 --- /dev/null +++ b/packages/alpinui/src/blueprints/md2.ts @@ -0,0 +1,70 @@ +// Icons +import { mdi } from '@/iconsets/mdi'; + +// Types +import type { Blueprint } from '@/components/Alpinui/Alpinui'; + +export const md2: Blueprint = { + defaults: { + global: { + rounded: 'md', + }, + VAvatar: { + rounded: 'circle', + }, + VAutocomplete: { + variant: 'filled', + }, + VBanner: { + color: 'primary', + }, + VBtn: { + color: 'primary', + }, + VCheckbox: { + color: 'secondary', + }, + VCombobox: { + variant: 'filled', + }, + VSelect: { + variant: 'filled', + }, + VSlider: { + color: 'primary', + }, + VTabs: { + color: 'primary', + }, + VTextarea: { + variant: 'filled', + }, + VTextField: { + variant: 'filled', + }, + VToolbar: { + VBtn: { + color: null, + }, + }, + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi, + }, + }, + theme: { + themes: { + light: { + colors: { + primary: '#6200EE', + 'primary-darken-1': '#3700B3', + secondary: '#03DAC6', + 'secondary-darken-1': '#018786', + error: '#B00020', + }, + }, + }, + }, +}; diff --git a/packages/alpinui/src/blueprints/md3.ts b/packages/alpinui/src/blueprints/md3.ts new file mode 100644 index 0000000..058d0fd --- /dev/null +++ b/packages/alpinui/src/blueprints/md3.ts @@ -0,0 +1,90 @@ +// Icons +import { mdi } from '@/iconsets/mdi'; + +// Types +import type { Blueprint } from '@/components/Alpinui/Alpinui'; + +export const md3: Blueprint = { + defaults: { + VAppBar: { + flat: true, + }, + VAutocomplete: { + variant: 'filled', + }, + VBanner: { + color: 'primary', + }, + VBottomSheet: { + contentClass: 'rounded-t-xl overflow-hidden', + }, + VBtn: { + color: 'primary', + rounded: 'xl', + }, + VBtnGroup: { + rounded: 'xl', + VBtn: { rounded: null }, + }, + VCard: { + rounded: 'lg', + }, + VCheckbox: { + color: 'secondary', + inset: true, + }, + VChip: { + rounded: 'sm', + }, + VCombobox: { + variant: 'filled', + }, + VNavigationDrawer: { + // VList: { + // nav: true, + // VListItem: { + // rounded: 'xl', + // }, + // }, + }, + VSelect: { + variant: 'filled', + }, + VSlider: { + color: 'primary', + }, + VTabs: { + color: 'primary', + }, + VTextarea: { + variant: 'filled', + }, + VTextField: { + variant: 'filled', + }, + VToolbar: { + VBtn: { + color: null, + }, + }, + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi, + }, + }, + theme: { + themes: { + light: { + colors: { + primary: '#6750a4', + secondary: '#b4b0bb', + tertiary: '#7d5260', + error: '#b3261e', + surface: '#fffbfe', + }, + }, + }, + }, +}; diff --git a/packages/alpinui/src/components/ADivider/ADivider.sass b/packages/alpinui/src/components/ADivider/ADivider.sass new file mode 100644 index 0000000..ca0e213 --- /dev/null +++ b/packages/alpinui/src/components/ADivider/ADivider.sass @@ -0,0 +1,53 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .a-divider + display: block + flex: $divider-flex + height: 0px + max-height: 0px + opacity: $divider-opacity + transition: inherit + + @include tools.border($divider-border...) + + &--vertical + align-self: stretch + border-width: $divider-vertical-border-width + display: inline-flex + height: auto + margin-left: $divider-vertical-margin-left + max-height: 100% + max-width: 0px + vertical-align: text-bottom + width: 0px + + &--inset + &:not(.a-divider--vertical) + max-width: $divider-inset-max-width + margin-inline-start: $divider-inset-margin + + &.a-divider--vertical + margin-bottom: $divider-vertical-inset-margin-bottom + margin-top: $divider-vertical-inset-margin-top + max-height: $divider-vertical-inset-max-height + + .a-divider__content + padding: $divider-content-padding + text-wrap: nowrap + + .a-divider__wrapper--vertical & + padding: $divider-content-vertical-padding + + .a-divider__wrapper + display: flex + align-items: center + justify-content: center + + &--vertical + flex-direction: column + height: 100% + + .a-divider + margin: 0 auto diff --git a/packages/alpinui/src/components/ADivider/ADivider.tsx b/packages/alpinui/src/components/ADivider/ADivider.tsx new file mode 100644 index 0000000..03bea05 --- /dev/null +++ b/packages/alpinui/src/components/ADivider/ADivider.tsx @@ -0,0 +1,120 @@ +// Styles +import './ADivider.sass'; + +// Composables +import { useTextColor } from '@/composables/color'; +import { makeComponentProps } from '@/composables/component'; +import { makeThemeProps, provideTheme } from '@/composables/theme'; + +// Utilities +import { computed, toRef } from 'alpine-reactivity'; +import { defineComponent } from '@/util/defineComponent'; +import { convertToUnit } from '@/util/helpers'; +import { propsFactory } from '@/util/propsFactory'; +import { useRender } from '@/util/useRender'; + +type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'height' | 'width' +type DividerStyles = Partial> + +export const makeVDividerProps = propsFactory({ + color: String, + inset: Boolean, + length: [Number, String], + opacity: [Number, String], + thickness: [Number, String], + vertical: Boolean, + + ...makeComponentProps(), + ...makeThemeProps(), +}, 'ADivider'); + +export const ADivider = defineComponent({ + name: 'ADivider', + + props: makeVDividerProps(), + + setup(props, vm) { + const slots = {} as any; // TODO + + const { themeClasses } = provideTheme(vm, props); + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')); + const dividerStyles = computed(() => { + const styles: DividerStyles = {}; + + if (props.length) { + styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length); + } + + if (props.thickness) { + styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness); + } + + return styles; + }); + + // Rendering variables + const hrClasses = computed(() => ({ + 'a-divider': true, + 'a-divider--inset': props.inset, + 'a-divider--vertical': props.vertical, + ...themeClasses.value, + ...textColorClasses.value, + ...props.class, + })); + const hrStyles = computed(() => ({ + ...dividerStyles.value, + ...textColorStyles.value, + ...(props.opacity != null ? { '--v-border-opacity': props.opacity } : {}), + ...props.style, + })); + const hrAriaOrient = computed(() => + !vm.$attrs.role || vm.$attrs.role === 'separator' + ? props.vertical ? 'vertical' : 'horizontal' + : undefined + ); + const hrRole = computed(() => `${vm.$attrs.role || 'separator'}`); + + const wrapperClasses = computed(() => ({ + 'a-divider__wrapper': true, + 'a-divider__wrapper--vertical': props.vertical, + 'a-divider__wrapper--inset': props.inset, + })); + + // For reference only + useRender(() => { + const divider = ( +
+ ); + + if (!slots.default) return divider; + + return ( +
+ { divider } + +
+ { slots.default() } +
+ + { divider } +
+ ); + }); + + return { + hrClasses, + hrStyles, + hrAriaOrient, + hrRole, + }; + }, +}); + +export type ADivider = typeof ADivider; diff --git a/packages/alpinui/src/components/ADivider/__tests__/VDivider.spec.cy.tsx b/packages/alpinui/src/components/ADivider/__tests__/VDivider.spec.cy.tsx new file mode 100644 index 0000000..9a29830 --- /dev/null +++ b/packages/alpinui/src/components/ADivider/__tests__/VDivider.spec.cy.tsx @@ -0,0 +1,244 @@ +/// + +import { VDivider } from '..' +import { VList, VListItem } from '../../VList' +import { VCard } from '../../VCard' +import { VToolbar } from '../../VToolbar' +import { VBtn } from '../../VBtn' +import { VCol, VRow, VSpacer } from '../../VGrid' + +// Tests +describe('VDivider', () => { + describe('examples in documentation', () => { + it('takes full height in flexbox container with static height', () => { + cy.mount(() => ( + <> +
+ +
+ + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '200px') + }) + + it('takes defined length when used as centered separator in VToolbar', () => { + cy.mount(() => ( + <> + + + + + + + + + + + + + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '24px') + }) + }) + + describe('adaptive height', () => { + it('takes full height in flexbox container with dynamic height', () => { + cy.mount(() => ( + <> +
+
+ + +
+ {[1, 2, 3, 4, 5, 6, 7, 8].map(idx => ( + + ))} +
+
+
footer
+
+ + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '272px') // 272 = 3 * 80px (card height) + 2 * 16px (ga-4) + }) + + it('takes relative height in flexbox container with dynamic height', () => { + cy.mount(() => ( + <> +
+ + +
Content
+
+ + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '300px') + }) + }) + + describe('separator in list', () => { + it('takes full width in VList', () => { + cy.mount(() => ( + <> +
+ +
+ + )) + .get("[data-test='divider-h']") + .should('have.length', 2) + .should('have.css', 'width', '184px') + }) + }) + + describe('separator in grid', () => { + it('takes only necessary height when grid wraps', () => { + cy.mount(() => ( + <> +
+ + {[0, 1, 2, 3, 4, 5, 6, 7, 8].map(idx => ( + <> + { idx % 4 !== 0 && ( + + )} + + + + + ))} + +
+ + )) + .get("[data-test*='divider-v-']") + .should('have.length', 6) + .should('have.css', 'height', '104px') // 80px + 2 * 12px (v-col) + }) + }) + + describe('vertical inset variant', () => { + it('accepts `inset` prop to get predefined margin', () => { + cy.mount(() => ( + <> +
+ +
+ + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '184px') // 200px - 2 * 8px (inset margin) + }) + + it('accepts custom margin', () => { + cy.mount(() => ( + <> +
+ +
+
+ + +
+ + )) + .get("[data-test='divider-v']") + .should('have.length', 2) + .should('have.css', 'height', '152px') // 200px - 2 * 24px (margin) + }) + }) +}) diff --git a/packages/alpinui/src/components/ADivider/_variables.scss b/packages/alpinui/src/components/ADivider/_variables.scss new file mode 100644 index 0000000..f8d521f --- /dev/null +++ b/packages/alpinui/src/components/ADivider/_variables.scss @@ -0,0 +1,26 @@ +@use '../../styles/settings'; + +// VDivider +$divider-border-color: null !default; +$divider-border-style: settings.$border-style-root !default; +$divider-border-width: thin 0 0 0 !default; +$divider-content-padding: 0 16px !default; +$divider-content-vertical-padding: 4px 0 !default; +$divider-flex: 1 1 100% !default; +$divider-inset-margin: 72px !default; +$divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default; +$divider-margin: 8px !default; +$divider-opacity: var(--v-border-opacity) !default; +$divider-vertical-border-width: 0 thin 0 0 !default; +$divider-vertical-inset-margin-bottom: $divider-margin !default; +$divider-vertical-inset-margin-top: $divider-margin !default; +$divider-vertical-inset-max-height: calc(100% - #{$divider-margin * 2}) !default; +$divider-vertical-margin-left: -1px !default; + + +// Lists +$divider-border: ( + $divider-border-color, + $divider-border-style, + $divider-border-width +) !default; diff --git a/packages/alpinui/src/components/ADivider/index.ts b/packages/alpinui/src/components/ADivider/index.ts new file mode 100644 index 0000000..77a3f10 --- /dev/null +++ b/packages/alpinui/src/components/ADivider/index.ts @@ -0,0 +1 @@ +export { ADivider } from './ADivider'; diff --git a/packages/alpinui/src/components/Alpinui/Alpinui.ts b/packages/alpinui/src/components/Alpinui/Alpinui.ts new file mode 100644 index 0000000..d357191 --- /dev/null +++ b/packages/alpinui/src/components/Alpinui/Alpinui.ts @@ -0,0 +1,109 @@ +// Composables +import { createDate, DateAdapterSymbol, DateOptionsSymbol } from '@/composables/date/date'; +import { createDefaults, DefaultsSymbol } from '@/composables/defaults'; +import { createDisplay, DisplaySymbol } from '@/composables/display'; +import { createGoTo, GoToSymbol } from '@/composables/goto'; +import { createIcons, IconSymbol } from '@/composables/icons'; +import { createLocale, LocaleSymbol } from '@/composables/locale'; +import { createTheme, ThemeSymbol } from '@/composables/theme'; + +// Utilities +import { mergeDeep } from '@/util/helpers'; + +import { defineComponent } from 'alpine-composition'; + +// Types +import type { PropType } from 'vue'; +import type { DateOptions } from '@/composables/date'; +import type { DefaultsOptions } from '@/composables/defaults'; +import type { DisplayOptions, SSROptions } from '@/composables/display'; +import type { GoToOptions } from '@/composables/goto'; +import type { IconOptions } from '@/composables/icons'; +import type { LocaleOptions, RtlOptions } from '@/composables/locale'; +import type { ThemeOptions } from '@/composables/theme'; + +export interface AlpinuiOptions { + blueprint?: Blueprint; + date?: DateOptions; + defaults?: DefaultsOptions; + display?: DisplayOptions; + goTo?: GoToOptions; + theme?: ThemeOptions; + icons?: IconOptions; + locale?: LocaleOptions & RtlOptions; + ssr?: SSROptions; +} + +export interface Blueprint extends Omit {} + +// TODO - The entrypoint is that, at 'alpine:init' event, we define this Alpineui +// component. And then, when user uses it, user can tweak what components it uses, +// and those will be registered afterwards. +// `document.addEventListener('alpine:init', () => {})` +export const Alpinui = defineComponent({ + /* eslint-disable vue/multi-word-component-names */ + name: 'Alpinui', + props: { + options: { + type: Object as PropType, + default: (): AlpinuiOptions => ({}), + }, + }, + emits: { + hello: (data: { a: 1 }) => true, + }, + + // TODO - Convert this to component, so that instead of users defining + // `createVuetify()`, they declare the top-level component as + // `
` + setup: (props, vm) => { + const { blueprint, ...rest } = props.options; + const options: AlpinuiOptions = mergeDeep(blueprint, rest); + + const defaults = createDefaults(options.defaults); + const display = createDisplay(options.display, options.ssr); + const theme = createTheme(options.theme); + const icons = createIcons(options.icons); + const locale = createLocale(options.locale); + const date = createDate(options.date, locale); + const goTo = createGoTo(options.goTo, locale); + + vm.$provide(DefaultsSymbol, defaults); + vm.$provide(DisplaySymbol, display); + vm.$provide(ThemeSymbol, theme); + vm.$provide(IconSymbol, icons); + vm.$provide(LocaleSymbol, locale); + vm.$provide(DateOptionsSymbol, date.options); + vm.$provide(DateAdapterSymbol, date.instance); + vm.$provide(GoToSymbol, goTo); + + // TODO - Is this needed? + // import { IN_BROWSER } from '@/util/globals'; + // if (IN_BROWSER && options.ssr) { + // const { mount } = app; + // app.mount = (...args) => { + // // const vm = mount(...args); + // vm.$nextTick(() => display.update()); + // app.mount = mount; + // return vm; + // }; + // } + + const hello = 'world'; + const triggerEmit = () => { + vm.$emit('hello', { a: 1 }); + }; + + return { + defaults, + display, + theme, + icons, + locale, + date, + goTo, + hello, // TODO + triggerEmit, // TODO + }; + }, +}); diff --git a/packages/alpinui/src/components/Alpinui/index.ts b/packages/alpinui/src/components/Alpinui/index.ts new file mode 100644 index 0000000..a1e290e --- /dev/null +++ b/packages/alpinui/src/components/Alpinui/index.ts @@ -0,0 +1 @@ +export { Alpinui } from './Alpinui'; diff --git a/packages/alpinui/src/components/VAvatar/VAvatar.sass b/packages/alpinui/src/components/VAvatar/VAvatar.sass new file mode 100644 index 0000000..2ed652a --- /dev/null +++ b/packages/alpinui/src/components/VAvatar/VAvatar.sass @@ -0,0 +1,36 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './mixins' as * +@use './variables' as * + +@include tools.layer('components') + .v-avatar + flex: none + align-items: center + display: inline-flex + justify-content: center + line-height: $avatar-line-height + overflow: hidden + position: relative + text-align: center + transition: 0.2s settings.$standard-easing + transition-property: width, height + vertical-align: $avatar-vertical-align + + @include avatar-sizes($avatar-sizes) + @include avatar-density(('height', 'width'), $avatar-density) + @include tools.rounded($avatar-border-radius) + @include tools.variant($avatar-variants...) + + &--rounded + @include tools.rounded($avatar-rounded-border-radius) + + &--start + margin-inline-end: $avatar-margin-start + + &--end + margin-inline-start: $avatar-margin-end + + .v-img + height: 100% + width: 100% diff --git a/packages/alpinui/src/components/VAvatar/VAvatar.tsx b/packages/alpinui/src/components/VAvatar/VAvatar.tsx new file mode 100644 index 0000000..f091485 --- /dev/null +++ b/packages/alpinui/src/components/VAvatar/VAvatar.tsx @@ -0,0 +1,106 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Styles +import './VAvatar.sass'; + +// Components +import { VDefaultsProvider } from '@/components/VDefaultsProvider'; +import { VIcon } from '@/components/VIcon'; +import { VImg } from '@/components/VImg'; + +// Composables +import { makeComponentProps } from '@/composables/component'; +import { makeDensityProps, useDensity } from '@/composables/density'; +import { IconValue } from '@/composables/icons'; +import { makeRoundedProps, useRounded } from '@/composables/rounded'; +import { makeSizeProps, useSize } from '@/composables/size'; +import { makeTagProps } from '@/composables/tag'; +import { makeThemeProps, provideTheme } from '@/composables/theme'; +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'; + +// Utilities +import { genericComponent, useRender } from '@/util'; +import { propsFactory } from '@/util/propsFactory'; + +export const makeVAvatarProps = propsFactory({ + start: Boolean, + end: Boolean, + icon: IconValue, + image: String, + text: String, + + ...makeComponentProps(), + ...makeDensityProps(), + ...makeRoundedProps(), + ...makeSizeProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'flat' } as const), +}, 'VAvatar'); + +export const VAvatar = genericComponent()({ + name: 'VAvatar', + + props: makeVAvatarProps(), + + setup(props, { slots }) { + const { themeClasses } = provideTheme(props); + const { colorClasses, colorStyles, variantClasses } = useVariant(props); + const { densityClasses } = useDensity(props); + const { roundedClasses } = useRounded(props); + const { sizeClasses, sizeStyles } = useSize(props); + + useRender(() => ( + + { !slots.default ? ( + props.image + ? () + : props.icon + ? () + : props.text + ) : ( + + { slots.default() } + + )} + + { genOverlays(false, 'v-avatar') } + + )); + + return {}; + }, +}); + +export type VAvatar = InstanceType diff --git a/packages/alpinui/src/components/VAvatar/_mixins.scss b/packages/alpinui/src/components/VAvatar/_mixins.scss new file mode 100644 index 0000000..f38bd56 --- /dev/null +++ b/packages/alpinui/src/components/VAvatar/_mixins.scss @@ -0,0 +1,31 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use '../../styles/settings'; +@use './variables' as *; + +@mixin avatar-sizes ($map: $avatar-sizes) { + @each $sizeName, $multiplier in settings.$size-scales { + $size: map.get($map, 'height') + (8 * $multiplier); + + &.v-avatar--size-#{$sizeName} { + --v-avatar-height: #{$size}; + } + } +} + +@mixin avatar-density ($properties, $densities) { + @each $density, $multiplier in $densities { + $value: calc(var(--v-avatar-height) + #{$multiplier * settings.$spacer}); + + &.v-avatar--density-#{$density} { + @if meta.type-of($properties) == "list" { + @each $property in $properties { + #{$property}: $value; + } + } + @else { + #{$properties}: $value; + } + } + } +} diff --git a/packages/alpinui/src/components/VAvatar/_variables.scss b/packages/alpinui/src/components/VAvatar/_variables.scss new file mode 100644 index 0000000..e3c5924 --- /dev/null +++ b/packages/alpinui/src/components/VAvatar/_variables.scss @@ -0,0 +1,35 @@ +@use "sass:map"; +@use "../../styles/settings/variables"; +@use "../../styles/tools/functions"; + +// Defaults +$avatar-background: var(--v-theme-surface) !default; +$avatar-border-radius: map.get(variables.$rounded, 'circle') !default; +$avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; +$avatar-elevation: 1 !default; +$avatar-height: 40px !default; +$avatar-line-height: normal !default; +$avatar-plain-opacity: .62 !default; +$avatar-rounded-border-radius: variables.$border-radius-root !default; +$avatar-vertical-align: middle !default; +$avatar-width: 40px !default; +$avatar-margin-end: map.get(variables.$grid-gutters, 'md') !default; +$avatar-margin-start: map.get(variables.$grid-gutters, 'md') !default; + +$avatar-sizes: () !default; +$avatar-sizes: functions.map-deep-merge( + ( + 'height': $avatar-height, + 'width': $avatar-width + ), + $avatar-sizes +); + +$avatar-variants: ( + $avatar-background, + $avatar-color, + $avatar-elevation, + $avatar-plain-opacity, + 'v-avatar' +) !default; diff --git a/packages/alpinui/src/components/VAvatar/index.ts b/packages/alpinui/src/components/VAvatar/index.ts new file mode 100644 index 0000000..2d25f1d --- /dev/null +++ b/packages/alpinui/src/components/VAvatar/index.ts @@ -0,0 +1 @@ +export { VAvatar } from './VAvatar' diff --git a/packages/alpinui/src/components/VIcon/VIcon.sass b/packages/alpinui/src/components/VIcon/VIcon.sass new file mode 100644 index 0000000..1914a30 --- /dev/null +++ b/packages/alpinui/src/components/VIcon/VIcon.sass @@ -0,0 +1,44 @@ +@use 'sass:map' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-icon + --v-icon-size-multiplier: 1 + align-items: center + display: inline-flex + font-feature-settings: 'liga' + height: $icon-size + justify-content: center + letter-spacing: $icon-letter-spacing + line-height: $icon-line-height + position: relative + text-indent: $icon-text-indent + text-align: center + user-select: none + vertical-align: $icon-vertical-align + width: $icon-size + min-width: $icon-size + + &--clickable + cursor: pointer + + &--disabled + pointer-events: none + opacity: $icon-disabled-opacity + + @each $name in settings.$sizes + &--size-#{$name} + font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)}) + + .v-icon__svg + fill: currentColor + width: 100% + height: 100% + + .v-icon--start + margin-inline-end: $icon-margin-start + + .v-icon--end + margin-inline-start: $icon-margin-end diff --git a/packages/alpinui/src/components/VIcon/VIcon.tsx b/packages/alpinui/src/components/VIcon/VIcon.tsx new file mode 100644 index 0000000..d9261ef --- /dev/null +++ b/packages/alpinui/src/components/VIcon/VIcon.tsx @@ -0,0 +1,95 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Styles +import './VIcon.sass'; + +// Composables +import { useTextColor } from '@/composables/color'; +import { makeComponentProps } from '@/composables/component'; +import { IconValue, useIcon } from '@/composables/icons'; +import { makeSizeProps, useSize } from '@/composables/size'; +import { makeTagProps } from '@/composables/tag'; +import { makeThemeProps, provideTheme } from '@/composables/theme'; + +// Utilities +import { defineComponent } from 'alpine-composition'; +import { computed, ref, Text, toRef } from 'vue'; +import { convertToUnit, flattenFragments, useRender } from '@/util/helpers'; +import { propsFactory } from '@/util/propsFactory'; + +export const makeVIconProps = propsFactory({ + color: String, + disabled: Boolean, + start: Boolean, + end: Boolean, + icon: IconValue, + + ...makeComponentProps(), + ...makeSizeProps(), + ...makeTagProps({ tag: 'i' }), + ...makeThemeProps(), +}, 'VIcon'); + +export const VIcon = defineComponent({ + name: 'VIcon', + + props: makeVIconProps(), + + setup(props, vm) { + const slotIcon = ref(); + + const { themeClasses } = provideTheme(vm, props); + const { iconData } = useIcon(vm, computed(() => slotIcon.value || props.icon)); + const { sizeClasses } = useSize(vm, props); + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')); + + useRender(() => { + const slotValue = slots.default?.(); + if (slotValue) { + slotIcon.value = flattenFragments(slotValue).filter((node) => + node.type === Text && node.children && typeof node.children === 'string' + )[0]?.children as string; + } + const hasClick = !!(attrs.onClick || attrs.onClickOnce); + + return ( + + { slotValue } + + ); + }); + + return {}; + }, +}); + +export type VIcon = typeof VIcon; diff --git a/packages/alpinui/src/components/VIcon/__tests__/VIcon.spec.cy.tsx b/packages/alpinui/src/components/VIcon/__tests__/VIcon.spec.cy.tsx new file mode 100644 index 0000000..c1b34f9 --- /dev/null +++ b/packages/alpinui/src/components/VIcon/__tests__/VIcon.spec.cy.tsx @@ -0,0 +1,126 @@ +/// + +// Components +import { VClassIcon } from '..' +import { VIcon } from '../VIcon' + +// Icons +import { aliases } from '@/iconsets/mdi' + +// Utilities +import { defineComponent } from 'vue' + +describe('VIcon', () => { + describe('icon prop', () => { + it('should render icon from default set', () => { + cy.mount(() => ( + + )) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-home') + }) + + it('should render aliased icon', () => { + cy.mount(() => ( + + ), null, { icons: { aliases } }) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-close') + }) + + it('should render icon from alternative set', () => { + cy.mount(() => ( + + ), null, { + icons: { + defaultSet: 'mdi', + sets: { + foo: { + component: props => , + }, + }, + }, + }) + + cy.get('.v-icon').should('have.class', 'bar') + }) + }) + + describe('default slot', () => { + it('should render icon from default set', () => { + cy.mount(() => ( + mdi-home + )) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-home') + }) + + it('should render aliased icon', () => { + cy.mount(() => ( + $close + ), null, { icons: { aliases } }) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-close') + }) + + it('should render icon from alternative set', () => { + cy.mount(() => ( + + foo:bar + + ), null, { + icons: { + defaultSet: 'mdi', + sets: { + foo: { + component: props => , + }, + }, + }, + }) + + cy.get('.v-icon').should('have.class', 'bar') + }) + + it('should render default slot if no icon value found', () => { + const Foo = defineComponent({ + setup () { + return () => ( + + + + ) + }, + }) + + cy.mount(() => ( + + bar + + )) + + cy.get('.v-icon > svg.foo').should('exist') + }) + }) + + it('should render svg icon', () => { + cy.mount(() => ( + + )) + + cy.get('.v-icon svg').should('exist') + cy.get('.v-icon path').should('have.attr', 'd', 'M7,10L12,15L17,10H7Z') + }) + + it('should render class icon', () => { + cy.mount(() => ( + + )) + + cy.get('.v-icon').should('have.class', 'foo') + }) +}) diff --git a/packages/alpinui/src/components/VIcon/_variables.scss b/packages/alpinui/src/components/VIcon/_variables.scss new file mode 100644 index 0000000..8d21b4f --- /dev/null +++ b/packages/alpinui/src/components/VIcon/_variables.scss @@ -0,0 +1,27 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VIcon +$icon-disabled-opacity: 0.38 !default; +$icon-left-margin-left: map.get(settings.$grid-gutters, 'md') !default; +$icon-letter-spacing: normal !default; +$icon-line-height: 1 !default; +$icon-margin-end: map.get(settings.$grid-gutters, 'md') !default; +$icon-margin-start: map.get(settings.$grid-gutters, 'md') !default; +$icon-size: 1em !default; +$icon-text-indent: 0 !default; +$icon-vertical-align: middle !default; + +// Lists +$icon-sizes: () !default; +$icon-sizes: tools.map-deep-merge( + ( + 'x-small': 1em, + 'small': 1.25em, + 'default': 1.5em, + 'large': 1.75em, + 'x-large': 2em, + ), + $icon-sizes +); diff --git a/packages/alpinui/src/components/VIcon/icons.tsx b/packages/alpinui/src/components/VIcon/icons.tsx new file mode 100644 index 0000000..af2893a --- /dev/null +++ b/packages/alpinui/src/components/VIcon/icons.tsx @@ -0,0 +1,105 @@ +// Utilities +import { defineComponent } from 'alpine-composition'; +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { JSXComponent, PropType } from 'vue'; + +export type IconValue = + | string + | (string | [path: string, opacity: number])[] + | JSXComponent +export const IconValue = [String, Function, Object, Array] as PropType; + +export const makeIconProps = propsFactory({ + icon: { + type: IconValue, + }, + // Could not remove this and use makeTagProps, types complained because it is not required + tag: { + type: String, + required: true, + }, +}, 'icon'); + +export const VComponentIcon = defineComponent({ + name: 'VComponentIcon', + + props: makeIconProps(), + + setup(props, vm) { + const slots = {} as any; // TODO + + return () => { + const Icon = props.icon as JSXComponent; + return ( + + { props.icon ? : slots.default?.() } + + ); + }; + }, +}); +export type VComponentIcon = typeof VComponentIcon; + +export const VSvgIcon = defineComponent({ + name: 'VSvgIcon', + + inheritAttrs: false, + + props: makeIconProps(), + + setup(props, vm) { + const attrs = {} as any; // TODO + + return () => { + return ( + + + + ); + }; + }, +}); +export type VSvgIcon = typeof VSvgIcon; + +export const VLigatureIcon = defineComponent({ + name: 'VLigatureIcon', + + props: makeIconProps(), + + setup(props, vm) { + return () => { + return { props.icon }; + }; + }, +}); +export type VLigatureIcon = typeof VLigatureIcon; + +export const VClassIcon = defineComponent({ + name: 'VClassIcon', + + props: makeIconProps(), + + setup(props) { + return () => { + return ; + }; + }, +}); +export type VClassIcon = typeof VClassIcon; diff --git a/packages/alpinui/src/components/VIcon/index.ts b/packages/alpinui/src/components/VIcon/index.ts new file mode 100644 index 0000000..ffb9690 --- /dev/null +++ b/packages/alpinui/src/components/VIcon/index.ts @@ -0,0 +1,2 @@ +export { VIcon } from './VIcon'; +export { VComponentIcon, VSvgIcon, VLigatureIcon, VClassIcon } from './icons'; diff --git a/packages/alpinui/src/components/index.ts b/packages/alpinui/src/components/index.ts new file mode 100644 index 0000000..dd98e24 --- /dev/null +++ b/packages/alpinui/src/components/index.ts @@ -0,0 +1,97 @@ +export * from './Alpinui'; + +// export * from './VApp' +// export * from './VAppBar' +// export * from './VAlert' +// export * from './VAutocomplete' +// export * from './VAvatar'; +// export * from './VBadge' +// export * from './VBanner' +// export * from './VBottomNavigation' +// export * from './VBottomSheet' +// export * from './VBreadcrumbs' +// export * from './VBtn' +// export * from './VBtnGroup' +// export * from './VBtnToggle' +// // export * from './VCalendar' +// export * from './VCard' +// export * from './VCarousel' +// export * from './VCheckbox' +// export * from './VChip' +// export * from './VChipGroup' +// export * from './VCode' +// export * from './VColorPicker' +// // export * from './VContent' +// export * from './VCombobox' +// export * from './VConfirmEdit' +// export * from './VCounter' +// export * from './VDataIterator' +// export * from './VDataTable' +// export * from './VDatePicker' +// export * from './VDefaultsProvider' +// export * from './VDialog' +export * from './ADivider'; +// export * from './VEmptyState' +// export * from './VExpansionPanel' +// export * from './VFab' +// export * from './VField' +// export * from './VFileInput' +// export * from './VFooter' +// export * from './VForm' +// export * from './VGrid' +// export * from './VHover' +// export * from './VIcon' +// export * from './VImg' +// export * from './VInfiniteScroll' +// export * from './VInput' +// export * from './VItemGroup' +// export * from './VKbd' +// export * from './VLabel' +// export * from './VLayout' +// export * from './VLazy' +// export * from './VList' +// export * from './VLocaleProvider' +// export * from './VMain' +// export * from './VMenu' +// export * from './VMessages' +// export * from './VNavigationDrawer' +// export * from './VNoSsr' +// export * from './VOtpInput' +// // export * from './VOverflowBtn' +// export * from './VOverlay' +// export * from './VPagination' +// export * from './VParallax' +// export * from './VProgressCircular' +// export * from './VProgressLinear' +// export * from './VRadio' +// export * from './VRadioGroup' +// export * from './VRangeSlider' +// export * from './VRating' +// export * from './VResponsive' +// export * from './VSelect' +// export * from './VSelectionControl' +// export * from './VSelectionControlGroup' +// export * from './VSheet' +// export * from './VSkeletonLoader' +// export * from './VSlideGroup' +// export * from './VSlider' +// export * from './VSnackbar' +// export * from './VSparkline' +// export * from './VSpeedDial' +// export * from './VStepper' +// export * from './VSwitch' +// export * from './VSystemBar' +// export * from './VTabs' +// export * from './VTable' +// export * from './VTextarea' +// export * from './VTextField' +// export * from './VThemeProvider' +// export * from './VTimeline' +// // export * from './VTimePicker' +// export * from './VToolbar' +// export * from './VTooltip' +// // export * from './VTreeview' +// export * from './VValidation' +// export * from './VVirtualScroll' +// export * from './VWindow' +// export * from './transitions' diff --git a/packages/alpinui/src/composables/__tests__/__snapshots__/theme.spec.ts.snap b/packages/alpinui/src/composables/__tests__/__snapshots__/theme.spec.ts.snap new file mode 100644 index 0000000..08f369f --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/__snapshots__/theme.spec.ts.snap @@ -0,0 +1,369 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`createTheme should create style element 1`] = ` + + + +`; + +exports[`createTheme should not generate style element if disabled 1`] = ``; diff --git a/packages/alpinui/src/composables/__tests__/color.spec.ts b/packages/alpinui/src/composables/__tests__/color.spec.ts new file mode 100644 index 0000000..ae3f027 --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/color.spec.ts @@ -0,0 +1,71 @@ +// Composables +import { useBackgroundColor, useColor, useTextColor } from '../color'; + +// Utilities +import { describe, expect, it } from '@jest/globals'; +import { reactive, toRef } from 'alpine-reactivity'; + +describe('color.ts', () => { + describe('useBackgroundColor', () => { + it('should allow ref argument or return null', () => { + const props = reactive({ color: 'primary' }); + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')); + + expect(backgroundColorClasses.value).toEqual(['bg-primary']); + expect(backgroundColorStyles.value).toEqual({}); + }); + + it.each([ + [{ bg: null }, [[], {}]], + [{ bg: '' }, [[], {}]], + [{ bg: 'primary' }, [['bg-primary'], {}]], + [{ bg: '#FF00FF' }, [[], { backgroundColor: '#FF00FF', color: '#fff', caretColor: '#fff' }]], + // [{ bg: '#FF00FF' }, [[], { backgroundColor: '#FF00FF' }]], + ])('should return correct color classes and styles', (value, [classes, styles]) => { + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(value as any, 'bg'); + + expect(backgroundColorClasses.value).toEqual(classes); + expect(backgroundColorStyles.value).toEqual(styles); + }); + }); + + describe('useColor', () => { + it.each([ + [{ background: null }, [[], {}]], + [{ background: '' }, [[], {}]], + [{ background: 'primary' }, [['bg-primary'], {}]], + [{ background: '#FF00FF' }, [[], { backgroundColor: '#FF00FF', color: '#fff', caretColor: '#fff' }]], + [{ text: null }, [[], {}]], + [{ text: '' }, [[], {}]], + [{ text: 'primary' }, [['text-primary'], {}]], + [{ text: '#FF00FF' }, [[], { caretColor: '#FF00FF', color: '#FF00FF' }]], + ])('should return correct color classes and styles', (value, [classes, styles]) => { + const { colorClasses, colorStyles } = useColor({ value } as any); + + expect(colorClasses.value).toEqual(classes); + expect(colorStyles.value).toEqual(styles); + }); + }); + + describe('useTextColor', () => { + it('should allow ref argument or return null', () => { + const props = reactive({ color: 'primary' }); + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')); + + expect(textColorClasses.value).toEqual(['text-primary']); + expect(textColorStyles.value).toEqual({}); + }); + + it.each([ + [{ color: '' }, [[], {}]], + [{ color: null }, [[], {}]], + [{ color: 'primary' }, [['text-primary'], {}]], + [{ color: '#FF00FF' }, [[], { caretColor: '#FF00FF', color: '#FF00FF' }]], + ])('should return correct data', (value, [classes, styles]) => { + const { textColorClasses, textColorStyles } = useTextColor(value as any, 'color'); + + expect(textColorClasses.value).toEqual(classes); + expect(textColorStyles.value).toEqual(styles); + }); + }); +}); diff --git a/packages/alpinui/src/composables/__tests__/defaults.spec.ts b/packages/alpinui/src/composables/__tests__/defaults.spec.ts new file mode 100644 index 0000000..a8936ab --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/defaults.spec.ts @@ -0,0 +1,56 @@ +// Components +import { VBtn } from '@/components/VBtn' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { createVuetify } from '@/framework' + +describe('defaults', () => { + it('applies global default class and style', () => { + const vuetify = createVuetify({ + defaults: { + VBtn: { + class: 'foobar', + style: 'color: red;', + }, + }, + }) + + const wrapper = mount(VBtn, { + global: { + plugins: [vuetify], + }, + }) + + expect(wrapper.classes()).toContain('foobar') + expect(wrapper.attributes('style')).toContain('color: red;') + }) + + it('prefers local styles', () => { + const vuetify = createVuetify({ + defaults: { + VBtn: { + class: 'foobar', + style: 'color: red; background: red;', + }, + }, + }) + + const wrapper = mount(VBtn, { + props: { + class: 'baz', + style: 'background: blue; caret-color: blue;', + }, + global: { + plugins: [vuetify], + }, + }) + + expect(wrapper.classes()).toContain('foobar') + expect(wrapper.classes()).toContain('baz') + expect(wrapper.attributes('style')).toContain('color: red;') + expect(wrapper.attributes('style')).toContain('background: blue;') + expect(wrapper.attributes('style')).toContain('caret-color: blue;') + }) +}) diff --git a/packages/alpinui/src/composables/__tests__/display.spec.cy.tsx b/packages/alpinui/src/composables/__tests__/display.spec.cy.tsx new file mode 100644 index 0000000..09fd49f --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/display.spec.cy.tsx @@ -0,0 +1,38 @@ +/* eslint-disable max-len */ +/// + +// Components +import { VBanner } from '@/components/VBanner/VBanner' +import { VLayout } from '@/components/VLayout/VLayout' +import { VMain } from '@/components/VMain' +import { VNavigationDrawer } from '@/components/VNavigationDrawer/VNavigationDrawer' +import { VSlideGroup } from '@/components/VSlideGroup/VSlideGroup' + +describe('VWindow', () => { + it('should render items', () => { + cy.viewport(960, 800) + .mount(({ mobileBreakpoint }: any) => ( + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quaerat fugit ratione totam magnam, beatae consequuntur qui quam enim et sapiente autem accusantium id nesciunt maiores obcaecati minus molestiae! Ipsa. + + + + + + )) + + cy + .setProps({ mobileBreakpoint: 'lg' }) + .get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--mobile') + .get('.v-banner').should('have.class', 'v-banner--mobile') + .get('.v-slide-group').should('have.class', 'v-slide-group--mobile') + .setProps({ mobileBreakpoint: 959 }) + .get('.v-navigation-drawer').should('not.have.class', 'v-navigation-drawer--mobile') + .get('.v-banner').should('not.have.class', 'v-banner--mobile') + .get('.v-slide-group').should('not.have.class', 'v-slide-group--mobile') + }) +}) diff --git a/packages/alpinui/src/composables/__tests__/display.spec.ts b/packages/alpinui/src/composables/__tests__/display.spec.ts new file mode 100644 index 0000000..8759cc3 --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/display.spec.ts @@ -0,0 +1,297 @@ +// Composables +import { createDisplay } from '../display' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { resizeWindow } from '@/../test/index' + +const breakpoints = [ + 'xs', + 'sm', + 'md', + 'lg', + 'xl', + 'xxl', + 'smAndDown', + 'smAndUp', + 'mdAndDown', + 'mdAndUp', + 'lgAndDown', + 'lgAndUp', + 'xlAndDown', + 'xlAndUp', +] as const + +describe('display', () => { + it.each([ + [ + { + description: 'Huawei Smartwatch', + width: 400, + height: 400, + name: 'xs', + }, + [ + 'xs', + 'smAndDown', + 'mdAndDown', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'Galaxy S5 (portrait)', + width: 360, + height: 640, + name: 'xs', + }, + [ + 'xs', + 'smAndDown', + 'mdAndDown', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'Galaxy S5 (landscape)', + width: 640, + height: 360, + name: 'sm', + }, + [ + 'sm', + 'smAndDown', + 'smAndUp', + 'mdAndDown', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'iPhone 6 (portrait)', + width: 375, + height: 667, + name: 'xs', + }, + [ + 'xs', + 'smAndDown', + 'mdAndDown', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'iPhone 6 (landscape)', + width: 667, + height: 375, + name: 'sm', + }, + [ + 'sm', + 'smAndDown', + 'smAndUp', + 'mdAndDown', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'iPad (portrait)', + width: 768, + height: 1024, + name: 'sm', + }, + [ + 'sm', + 'smAndDown', + 'smAndUp', + 'mdAndDown', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'iPad (landscape)', + width: 1024, + height: 768, + name: 'md', + }, + [ + 'md', + 'smAndUp', + 'mdAndDown', + 'mdAndUp', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'iPad Pro (portrait)', + width: 1024, + height: 1366, + name: 'md', + }, + [ + 'md', + 'smAndUp', + 'mdAndDown', + 'mdAndUp', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'iPad Pro (landscape)', + width: 1366, + height: 1024, + name: 'lg', + }, + [ + 'lg', + 'smAndUp', + 'mdAndUp', + 'lgAndDown', + 'lgAndUp', + 'xlAndDown', + ], + ], + [ + { + description: 'WSXGA+ (portrait)', + width: 1050, + height: 1680, + name: 'md', + }, + [ + 'md', + 'smAndUp', + 'mdAndDown', + 'mdAndUp', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'WSXGA+ (landscape)', + width: 1680, + height: 1050, + name: 'lg', + }, + [ + 'lg', + 'smAndUp', + 'mdAndUp', + 'lgAndDown', + 'lgAndUp', + 'xlAndDown', + ], + ], + [ + { + description: 'FHD (portrait)', + width: 1080, + height: 1920, + name: 'md', + }, + [ + 'md', + 'smAndUp', + 'mdAndDown', + 'mdAndUp', + 'lgAndDown', + 'xlAndDown', + ], + ], + [ + { + description: 'FHD (landscape)', + width: 1920, + height: 1080, + name: 'xl', + }, + [ + 'xl', + 'smAndUp', + 'mdAndUp', + 'lgAndUp', + 'xlAndDown', + 'xlAndUp', + ], + ], + [ + { + description: 'WQHD (portrait)', + width: 1440, + height: 2560, + name: 'lg', + }, + [ + 'lg', + 'smAndUp', + 'mdAndUp', + 'lgAndDown', + 'lgAndUp', + 'xlAndDown', + ], + ], + [ + { + description: 'WQHD (landscape)', + width: 2560, + height: 1440, + name: 'xxl', + }, + [ + 'xxl', + 'smAndUp', + 'mdAndUp', + 'lgAndUp', + 'xlAndUp', + ], + ], + ])('should calculate breakpoint for %s', async (options, expected) => { + await resizeWindow(options.width, options.height) + + const display = createDisplay() + + const matched = breakpoints.reduce<(typeof breakpoints[number])[]>((acc, breakpoint) => { + if (display[breakpoint].value) acc.push(breakpoint) + return acc + }, []) + + expect(matched).toEqual(expected) + }) + + it('should override default thresholds', async () => { + const { name } = createDisplay({ + thresholds: { sm: 400 }, + }) + + await resizeWindow(400) + expect(name.value).toBe('sm') + + await resizeWindow(399) + expect(name.value).toBe('xs') + }) + + it('should allow breakpoint strings for mobileBreakpoint', async () => { + const { mobile } = createDisplay({ mobileBreakpoint: 'lg' }) + + await resizeWindow(1920) + expect(mobile.value).toBe(false) + + await resizeWindow(600) + expect(mobile.value).toBe(true) + }) +}) diff --git a/packages/alpinui/src/composables/__tests__/goto.spec.cy.tsx b/packages/alpinui/src/composables/__tests__/goto.spec.cy.tsx new file mode 100644 index 0000000..fa9acc1 --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/goto.spec.cy.tsx @@ -0,0 +1,89 @@ +/* eslint-disable cypress/no-unnecessary-waiting */ +/// + +// Utilities +import { defineComponent } from 'vue' +import { useGoTo } from '../goto' +import { useRender } from '@/util' + +const ComponentA = defineComponent({ + props: { + id: String, + target: String, + }, + + setup (props) { + const goTo = useGoTo() + + function onClick () { + return goTo(props.target!) + } + + useRender(() => ( + + )) + + return {} + }, +}) + +const ComponentB = defineComponent({ + props: { + id: String, + target: String, + container: String, + }, + + setup (props) { + const goTo = useGoTo() + + function onClick () { + return goTo.horizontal(props.target!, { container: props.container }) + } + + useRender(() => ( + + )) + + return {} + }, +}) + +describe('goto', () => { + it('scrolls vertically', () => { + cy + .mount(() => ( +
+ + +
+ + +
+ )) + .get('#top').click() + .window().should(win => { + expect(Math.ceil(win.scrollY)).to.equal(1223) + }) + .get('#bottom').click() + .window().should(win => { + expect(win.scrollY).to.equal(0) + }) + }) + + it('scrolls horizontally', () => { + cy.viewport(1075, 825) + cy + .mount(() => ( +
+ + + +
+ )) + .get('#start').click().wait(500) + .get('#end').should('be.visible') + .get('#end').click().wait(500) + .get('#start').should('be.visible') + }) +}) diff --git a/packages/alpinui/src/composables/__tests__/icons.spec.ts b/packages/alpinui/src/composables/__tests__/icons.spec.ts new file mode 100644 index 0000000..035cd6f --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/icons.spec.ts @@ -0,0 +1,53 @@ +// Composables +import { useIcon } from '../icons'; + +// Utilities +import { describe, expect, it } from '@jest/globals'; +import { mount } from '@vue/test-utils'; +import { defineComponent, toRef } from 'vue'; +import { createVuetify } from '@/framework'; + +describe('icons.tsx', () => { + const Component = defineComponent({ + props: { + icon: String, + }, + setup(props) { + const { iconData } = useIcon(toRef(props, 'icon')); + + return () => iconData.value.icon; + }, + }); + + const vuetify = createVuetify({ + icons: { + defaultSet: 'mdi', + sets: { + custom: { + component: () => null, + }, + }, + }, + }); + + it.each([ + // Default icon set. + ['success', 'success'], + ['https://example.com/icon.svg', 'https://example.com/icon.svg'], + // MDI icon set. + ['mdi:success', 'success'], + // Custom icon set. + ['custom:https://example.com/icon.png', 'https://example.com/icon.png'], + ])('should return the correct icon name', (icon, expected) => { + const wrapper = mount(Component, { + props: { + icon, + }, + global: { + plugins: [vuetify], + }, + }); + + expect(wrapper.text()).toEqual(expected); + }); +}); diff --git a/packages/alpinui/src/composables/__tests__/proxiedModel.spec.ts b/packages/alpinui/src/composables/__tests__/proxiedModel.spec.ts new file mode 100644 index 0000000..2b3f49f --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/proxiedModel.spec.ts @@ -0,0 +1,195 @@ +// Composables +import { useProxiedModel } from '../proxiedModel'; + +// Utilities +import { describe, expect, it } from '@jest/globals'; +import { mount } from '@vue/test-utils'; +import { defineComponent, h } from 'vue'; + +const TestComponent = defineComponent({ + props: { + foo: String, + }, + emits: ['update:foo'], + setup(props) { + const proxiedModel = useProxiedModel(props, 'foo', 'syncDefaultValue'); + return () => h('div', { + onClick: () => proxiedModel.value = 'internal', + }, [props.foo, proxiedModel.value].join(',')); + }, +}); + +const TestComponentWithPropDefaultValue = defineComponent({ + props: { + foo: { + type: String, + default: 'propDefaultValue', + }, + }, + emits: ['update:foo'], + // eslint-disable-next-line sonarjs/no-identical-functions + setup(props) { + const proxiedModel = useProxiedModel(props, 'foo', 'syncDefaultValue'); + // eslint-disable-next-line sonarjs/no-identical-functions + return () => h('div', { + onClick: () => proxiedModel.value = 'internal', + }, [props.foo, proxiedModel.value].join(',')); + }, +}); + +const TestComponentWithModelValueProp = defineComponent({ + props: { + modelValue: String, + }, + emits: ['update:modelValue'], + setup(props) { + const proxiedModel = useProxiedModel(props, 'modelValue'); + return () => h('div', { + onClick: () => proxiedModel.value = 'internal', + }, [props.modelValue, proxiedModel.value].join(',')); + }, +}); + +describe('useProxiedModel', () => { + it('should use default prop value as first value if defined', async() => { + const wrapper = mount(TestComponentWithPropDefaultValue); + + expect(wrapper.element.textContent).toBe('propDefaultValue,propDefaultValue'); + + await wrapper.trigger('click'); + expect(wrapper.element.textContent).toBe('propDefaultValue,internal'); + }); + + it('should use prop value if defined with kebab case', async() => { + const wrapper = mount(TestComponentWithModelValueProp, { + props: { + 'model-value': 'foobar', + }, + }); + + expect(wrapper.element.textContent).toBe('foobar,foobar'); + }); + + it('should use prop as initial value if defined', async() => { + const wrapper = mount(TestComponent, { + props: { + foo: 'bar', + }, + }); + + expect(wrapper.element.textContent).toBe('bar,bar'); + + await wrapper.trigger('click'); + expect(wrapper.emitted('update:foo')).toStrictEqual([['internal']]); + + expect(wrapper.element.textContent).toBe('bar,internal'); + + await wrapper.setProps({ foo: 'external' }); + expect(wrapper.element.textContent).toBe('external,external'); + }); + + it('should always use prop value if update listener defined', async() => { + const wrapper = mount(TestComponent, { + props: { + foo: 'bar', + 'onUpdate:foo': () => {}, + }, + }); + + expect(wrapper.element.textContent).toBe('bar,bar'); + + await wrapper.trigger('click'); + expect(wrapper.emitted('update:foo')).toStrictEqual([['internal']]); + + // internal value should not change until prop is updated + expect(wrapper.element.textContent).toBe('bar,bar'); + + await wrapper.setProps({ foo: 'external' }); + expect(wrapper.element.textContent).toBe('external,external'); + }); + + it('should use internal value if prop not defined', async() => { + const wrapper = mount(TestComponent, { + props: { foo: '' }, + }); + + expect(wrapper.element.textContent).toBe(','); + + await wrapper.trigger('click'); + expect(wrapper.emitted('update:foo')).toStrictEqual([['internal']]); + + // internal value should have changed since prop is not defined + expect(wrapper.element.textContent).toBe(',internal'); + }); + + it('should switch to using prop when it is defined', async() => { + const wrapper = mount(TestComponent, { + props: { foo: '' }, + }); + + expect(wrapper.element.textContent).toBe(','); + + await wrapper.trigger('click'); + + expect(wrapper.element.textContent).toBe(',internal'); + + await wrapper.setProps({ foo: 'new' }); + + expect(wrapper.element.textContent).toBe('new,new'); + }); + + describe('transforms', () => { + const TestComponentTransformed = defineComponent({ + props: { + foo: Array, + }, + emits: ['update:foo'], + setup(props) { + const proxiedModel = useProxiedModel(props, 'foo', [], + (arr) => { + return (arr ?? []).map(String); + }, + (arr) => { + return arr.map((v) => parseInt(v, 10)); + }, + ); + + return () => h('div', { + onClick: () => proxiedModel.value = ['2', '3', '4'], + }, [JSON.stringify(proxiedModel.value)]); + }, + }); + + it('should transform prop value', async() => { + const wrapper = mount(TestComponentTransformed, { + props: { + foo: [1, 2, 3], + }, + }); + + expect(wrapper.element.textContent).toBe('["1","2","3"]'); + }); + + it('should emit transformed value', async() => { + const wrapper = mount(TestComponentTransformed, { + props: { + foo: [1, 2, 3], + }, + }); + + await wrapper.trigger('click'); + expect(wrapper.emitted('update:foo')).toStrictEqual([[[2, 3, 4]]]); + }); + + it('should use internal value if prop not defined', async() => { + const wrapper = mount(TestComponentTransformed); + + expect(wrapper.element.textContent).toBe('[]'); + + await wrapper.trigger('click'); + expect(wrapper.emitted('update:foo')).toStrictEqual([[[2, 3, 4]]]); + + expect(wrapper.element.textContent).toBe('["2","3","4"]'); + }); + }); +}); diff --git a/packages/alpinui/src/composables/__tests__/resizeObserver.spec.ts b/packages/alpinui/src/composables/__tests__/resizeObserver.spec.ts new file mode 100644 index 0000000..4e8443e --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/resizeObserver.spec.ts @@ -0,0 +1,24 @@ +// Composables +import { useResizeObserver } from '../resizeObserver' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { h, nextTick } from 'vue' + +describe('resizeObserver', () => { + it('should make sure mock exists', async () => { + const callback = jest.fn() + mount({ + setup () { + const { resizeRef } = useResizeObserver(callback) + + return () => h('div', { ref: resizeRef }, ['foo']) + }, + }) + + await nextTick() + + expect(callback).toHaveBeenCalled() + }) +}) diff --git a/packages/alpinui/src/composables/__tests__/size.spec.ts b/packages/alpinui/src/composables/__tests__/size.spec.ts new file mode 100644 index 0000000..ddd08ff --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/size.spec.ts @@ -0,0 +1,39 @@ +// Composables +import * as size from '../size'; + +// Utilities +import { describe, expect, it } from '@jest/globals'; + +describe('size', () => { + it.each([ + [{ size: 'x-small' }, 'test--size-x-small'], + [{ size: 'small' }, 'test--size-small'], + [{ size: 'default' }, 'test--size-default'], + [{ size: 'large' }, 'test--size-large'], + [{ size: 'x-large' }, 'test--size-x-large'], + [{ size: '100px' }, undefined], + [{ size: 100 }, undefined], + [{ size: undefined }, undefined], + ] as const)('should return the correct class given value %p', (...args) => { + const [input, expected] = args; + const { sizeClasses } = size.useSize(input, 'test'); + + expect(sizeClasses.value).toStrictEqual(expected); + }); + + it.each([ + [{ size: 'x-small' }, undefined], + [{ size: 'small' }, undefined], + [{ size: 'default' }, undefined], + [{ size: 'large' }, undefined], + [{ size: 'x-large' }, undefined], + [{ size: '100px' }, { width: '100px', height: '100px' }], + [{ size: 50 }, { width: '50px', height: '50px' }], + [{ size: undefined }, undefined], + ] as const)('should return the correct styles given value %p', (...args) => { + const [input, expected] = args; + const { sizeStyles } = size.useSize(input, 'test'); + + expect(sizeStyles.value).toStrictEqual(expected); + }); +}); diff --git a/packages/alpinui/src/composables/__tests__/tag.spec.ts b/packages/alpinui/src/composables/__tests__/tag.spec.ts new file mode 100644 index 0000000..6cb6b32 --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/tag.spec.ts @@ -0,0 +1,25 @@ +// Composables +import { makeTagProps } from '../tag' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { h } from 'vue' + +// Types +import type { TagProps } from '../tag' + +describe('tag.ts', () => { + it('should use custom tag on rendered output', () => { + const TestComponent = { + props: makeTagProps(), + render: (props: TagProps) => h(props.tag), + } + + const wrapper = mount(TestComponent, { + props: { tag: 'span' }, + }) + + expect(wrapper.element.tagName).toBe('SPAN') + }) +}) diff --git a/packages/alpinui/src/composables/__tests__/theme.spec.ts b/packages/alpinui/src/composables/__tests__/theme.spec.ts new file mode 100644 index 0000000..15aa292 --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/theme.spec.ts @@ -0,0 +1,189 @@ +/* eslint-disable jest/no-commented-out-tests */ + +// Composables +import { createTheme } from '../theme' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { createApp } from 'vue' + +// Types +import type { App } from 'vue' + +describe('createTheme', () => { + let app: App + + beforeEach(() => { + const child = document.querySelector('#alpinui-theme-stylesheet') + child && document.head.removeChild(child) + app = createApp({}) + }) + + it('should create style element', async () => { + const { install } = createTheme() + + install(app) + + expect(document.head).toMatchSnapshot() + }) + + it('should not generate style element if disabled', async () => { + const { install } = createTheme(false) + + install(app) + + expect(document.head).toMatchSnapshot() + }) + + it('should generate on-* colors', async () => { + const theme = createTheme() + + theme.install(app) + + const colors = [ + 'on-background', + 'on-surface', + 'on-primary', + 'on-secondary', + 'on-success', + 'on-warning', + 'on-error', + 'on-info', + ] + + for (const color of colors) { + expect(theme.computedThemes.value.light.colors).toHaveProperty(color) + } + }) + + it('should generate color variants', async () => { + const theme = createTheme({ + variations: { + colors: ['primary', 'secondary'], + lighten: 2, + darken: 2, + }, + }) + + theme.install(app) + + for (const color of ['primary', 'secondary']) { + for (const variant of ['lighten', 'darken']) { + for (const amount of [1, 2]) { + expect(theme.computedThemes.value.light.colors).toHaveProperty(`${color}-${variant}-${amount}`) + expect(theme.computedThemes.value.light.colors).toHaveProperty(`on-${color}-${variant}-${amount}`) + } + } + } + }) + + it('should update existing theme', async () => { + const theme = createTheme({ + variations: false, + }) + + theme.install(app) + + expect(theme.computedThemes.value.light.colors.background).not.toBe('#FF0000') + + theme.themes.value.light = { + ...theme.themes.value.light, + colors: { + ...theme.themes.value.light.colors, + background: '#FF0000', + }, + } + + expect(theme.computedThemes.value.light.colors.background).toBe('#FF0000') + }) + + it('should set a CSP nonce if configured', async () => { + const { install } = createTheme({ cspNonce: 'my-csp-nonce' }) + + install(app) + + const styleElement = document.getElementById('alpinui-theme-stylesheet') + expect(styleElement?.getAttribute('nonce')).toBe('my-csp-nonce') + }) + + it('should not set a CSP nonce if option was left blank', async () => { + const { install } = createTheme({}) + + install(app) + + const styleElement = document.getElementById('alpinui-theme-stylesheet') + expect(styleElement?.getAttribute('nonce')).toBeNull() + }) + + it('should merge custom theme based upon the supplied dark property', async () => { + for (const dark of [true, false, undefined]) { + const theme = createTheme({ + defaultTheme: 'myTheme', + themes: { myTheme: { dark } }, + }) + + theme.install(app) + + expect(theme.computedThemes.value.myTheme.dark).toBe(dark) + expect(theme.computedThemes.value.myTheme.colors).toHaveProperty('primary') + } + }) + + it('should generate variations for custom color keys', async () => { + const theme = createTheme({ + themes: { + light: { + colors: { color2: '#1697f6' }, + }, + }, + variations: { + colors: ['color2'], + lighten: 1, + darken: 1, + }, + }) + + theme.install(app) + + expect(theme.computedThemes.value.light.colors).toHaveProperty('color2-darken-1') + expect(theme.computedThemes.value.light.colors).toHaveProperty('color2-lighten-1') + }) + + // it('should use vue-meta@2.3 functionality', () => { + // const theme = createTheme() + // const set = jest.fn() + // const $meta = () => ({ + // addApp: () => ({ set }), + // }) + // ;(instance as any).$meta = $meta as any + // theme.init(instance) + // expect(set).toHaveBeenCalled() + // }) + + // it('should set theme with vue-meta@2', () => { + // const theme = mockTheme() + // const anyInstance = instance as any + // anyInstance.$meta = () => ({ + // getOptions: () => ({ keyName: 'metaInfo' }), + // }) + // theme.init(anyInstance) + // const metaKeyName = anyInstance.$meta().getOptions().keyName + // expect(typeof anyInstance.$options[metaKeyName]).toBe('function') + // const metaInfo = anyInstance.$options[metaKeyName]() + // expect(metaInfo).toBeTruthy() + // expect(metaInfo.style).toHaveLength(1) + // expect(metaInfo.style[0].cssText).toMatchSnapshot() + // }) + + // it('should set theme with vue-meta@1', () => { + // const theme = mockTheme() + // const anyInstance = instance as any + // anyInstance.$meta = () => ({}) + // theme.init(anyInstance) + // expect(typeof anyInstance.$options.metaInfo).toBe('function') + // const metaInfo = anyInstance.$options.metaInfo() + // expect(metaInfo).toBeTruthy() + // expect(metaInfo.style).toHaveLength(1) + // expect(metaInfo.style[0].cssText).toMatchSnapshot() + // }) +}) diff --git a/packages/alpinui/src/composables/__tests__/validation.spec.ts b/packages/alpinui/src/composables/__tests__/validation.spec.ts new file mode 100644 index 0000000..7dd7ca6 --- /dev/null +++ b/packages/alpinui/src/composables/__tests__/validation.spec.ts @@ -0,0 +1,177 @@ +// Composables +import { makeValidationProps, useValidation } from '../validation' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { defineComponent, nextTick } from 'vue' + +// Types +import type { ValidationProps } from '../validation' + +describe('validation', () => { + function mountFunction (props: Partial = {}) { + return mount(defineComponent({ + props: makeValidationProps(), + emits: ['update:modelValue'], + setup (props) { + return useValidation(props, 'validation') + }, + render: () => {}, // eslint-disable-line vue/require-render-return + }), { props }) + } + + it.each([ + ['', [], []], + ['', ['foo'], ['foo']], + ['', [(v: any) => !!v || 'foo'], ['foo']], + ['', [(v: any) => !!v || ''], ['']], + ['', [(v: any) => Promise.resolve(!!v || 'fizz')], ['fizz']], + ['', [(v: any) => new Promise(resolve => resolve(!!v || 'buzz'))], ['buzz']], + ['foo', [(v: any) => v === 'foo' || 'bar'], []], + ['foo', [(v: any) => v === 'bar' || 'fizz'], ['fizz']], + ['foo', [(v: any) => v === 'bar'], ['']], + ])('should validate rules and return array of errorMessages %#', async (modelValue, rules, expected) => { + const props = { rules, modelValue } + const wrapper = mountFunction(props) + + expect(wrapper.vm.errorMessages).toEqual([]) + await wrapper.vm.validate() + expect(wrapper.vm.errorMessages).toEqual(expected) + }) + + it.each([ + [undefined, 1], + [0, 0], + [1, 1], + [2, 2], + [3, 3], + [4, 4], + [5, 4], + ])('only validate up to the maximum error count %s', async (maxErrors, expected) => { + const wrapper = mountFunction({ + maxErrors, + rules: ['foo', 'bar', 'fizz', 'buzz'], + }) + + await wrapper.vm.validate() + + expect(wrapper.vm.errorMessages).toHaveLength(expected) + }) + + it.each([ + [undefined, 1], + [0, 0], + [1, 1], + [2, 2], + [3, 3], + [4, 4], + [5, 4], + ])('only display up to the maximum error count %s', async (maxErrors, expected) => { + const wrapper = mountFunction({ + maxErrors, + errorMessages: ['foo', 'bar', 'fizz', 'buzz'], + }) + + await wrapper.vm.validate() + + expect(wrapper.vm.errorMessages).toHaveLength(expected) + }) + + it.each([ + [undefined, ['foo']], + [0, []], + [1, ['foo']], + [2, ['foo']], + ])('should not trim error message if passed as text', async (maxErrors, expected) => { + const wrapper = mountFunction({ + maxErrors, + errorMessages: 'foo', + }) + + await wrapper.vm.validate() + + expect(wrapper.vm.errorMessages).toStrictEqual(expected) + }) + + it('should warn the user when using an improper rule fn', async () => { + const rule = (v: any) => !!v || 1234 + const wrapper = mountFunction({ + rules: [rule as any], + }) + + await wrapper.vm.validate() + + expect(`${1234} is not a valid value. Rule functions must return boolean true or a string.`).toHaveBeenTipped() + }) + + it('should update isPristine when using the validate and reset methods', async () => { + const wrapper = mountFunction({ + rules: [(v: any) => v === 'foo' || 'bar'], + modelValue: '', + }) + + await nextTick() + + expect(wrapper.vm.isPristine).toBe(true) + expect(wrapper.vm.isValid).toBeNull() + + await wrapper.vm.validate() + + expect(wrapper.vm.isPristine).toBe(false) + expect(wrapper.vm.isValid).toBe(false) + + await wrapper.setProps({ modelValue: 'fizz' }) + + await nextTick() + await wrapper.vm.validate() + + expect(wrapper.vm.isPristine).toBe(false) + expect(wrapper.vm.isValid).toBe(false) + + await wrapper.setProps({ modelValue: 'foo' }) + + await nextTick() + await wrapper.vm.validate() + + expect(wrapper.vm.isPristine).toBe(false) + expect(wrapper.vm.isValid).toBe(true) + + wrapper.vm.reset() + await nextTick() // model update + await nextTick() // await rules + + expect(wrapper.vm.isPristine).toBe(true) + expect(wrapper.vm.isValid).toBeNull() + }) + + it('should return valid if no rules are set', async () => { + const wrapper = mountFunction() + + expect(wrapper.vm.isValid).toBe(true) + + await wrapper.setProps({ rules: [] }) + + expect(wrapper.vm.isValid).toBe(true) + + await wrapper.setProps({ error: true }) + + expect(wrapper.vm.isValid).toBe(false) + }) + + it('should return invalid if error is manually set', async () => { + const wrapper = mountFunction({ + error: true, + }) + + expect(wrapper.vm.isValid).toBe(false) + + await wrapper.setProps({ error: false, errorMessages: ['error'] }) + + expect(wrapper.vm.isValid).toBe(false) + + await wrapper.setProps({ errorMessages: [] }) + + expect(wrapper.vm.isValid).toBe(true) + }) +}) diff --git a/packages/alpinui/src/composables/color.ts b/packages/alpinui/src/composables/color.ts new file mode 100644 index 0000000..3a27632 --- /dev/null +++ b/packages/alpinui/src/composables/color.ts @@ -0,0 +1,93 @@ +// Utilities +import { computed, isRef } from 'alpine-reactivity'; +import { getForeground, isCssColor, isParsableColor, parseColor } from '@/util/colorUtils'; +import { destructComputed } from '@/util/helpers'; + +// Types +import type { ComputedRef, Ref } from 'alpine-reactivity'; +import type { CSSProperties } from 'vue'; + +type ColorValue = string | false | null | undefined + +export interface TextColorData { + textColorClasses: ComputedRef>; + textColorStyles: ComputedRef; +} + +export interface BackgroundColorData { + backgroundColorClasses: ComputedRef>; + backgroundColorStyles: ComputedRef; +} + +// Composables +export function useColor(colors: Ref<{ background?: ColorValue, text?: ColorValue }>) { + return destructComputed(() => { + const classes: Record = {}; + const styles: CSSProperties = {}; + + if (colors.value.background) { + if (isCssColor(colors.value.background)) { + styles.backgroundColor = colors.value.background; + + if (!colors.value.text && isParsableColor(colors.value.background)) { + const backgroundColor = parseColor(colors.value.background); + if (backgroundColor.a == null || backgroundColor.a === 1) { + const textColor = getForeground(backgroundColor); + + styles.color = textColor; + styles.caretColor = textColor; + } + } + } else { + classes[`bg-${colors.value.background}`] = true; + } + } + + if (colors.value.text) { + if (isCssColor(colors.value.text)) { + styles.color = colors.value.text; + styles.caretColor = colors.value.text; + } else { + classes[`text-${colors.value.text}`] = true; + } + } + + return { colorClasses: classes, colorStyles: styles }; + }); +} + +export function useTextColor (color: Ref): TextColorData +export function useTextColor , K extends string> (props: T, name: K): TextColorData +export function useTextColor , K extends string>( + props: T | Ref, + name?: K +): TextColorData { + const colors = computed(() => ({ + text: isRef(props) ? props.value : (name ? (props as T)[name] : null), + })); + + const { + colorClasses: textColorClasses, + colorStyles: textColorStyles, + } = useColor(colors); + + return { textColorClasses, textColorStyles }; +} + +export function useBackgroundColor (color: Ref): BackgroundColorData +export function useBackgroundColor , K extends string> (props: T, name: K): BackgroundColorData +export function useBackgroundColor , K extends string>( + props: T | Ref, + name?: K +): BackgroundColorData { + const colors = computed(() => ({ + background: isRef(props) ? props.value : (name ? props[name] : null), + })); + + const { + colorClasses: backgroundColorClasses, + colorStyles: backgroundColorStyles, + } = useColor(colors); + + return { backgroundColorClasses, backgroundColorStyles }; +} diff --git a/packages/alpinui/src/composables/component.ts b/packages/alpinui/src/composables/component.ts new file mode 100644 index 0000000..68c895b --- /dev/null +++ b/packages/alpinui/src/composables/component.ts @@ -0,0 +1,21 @@ +// Utilities +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { CSSProperties, PropType } from 'vue'; + +export type ClassValue = Record; + +export interface ComponentProps { + class: ClassValue; + style: CSSProperties | undefined; +} + +// Composables +export const makeComponentProps = propsFactory({ + class: Object as PropType, + style: { + type: Object as PropType, + default: null, + }, +}, 'component'); diff --git a/packages/alpinui/src/composables/date/DateAdapter.ts b/packages/alpinui/src/composables/date/DateAdapter.ts new file mode 100644 index 0000000..826817e --- /dev/null +++ b/packages/alpinui/src/composables/date/DateAdapter.ts @@ -0,0 +1,51 @@ +export interface DateAdapter { + date(value?: any): T | null; + format(date: T, formatString: string): string; + toJsDate(value: T): Date; + parseISO(date: string): T; + toISO(date: T): string; + + startOfDay(date: T): T; + endOfDay(date: T): T; + startOfWeek(date: T, firstDayOfWeek?: number | string): T; + endOfWeek(date: T): T; + startOfMonth(date: T): T; + endOfMonth(date: T): T; + startOfYear(date: T): T; + endOfYear(date: T): T; + + isAfter(date: T, comparing: T): boolean; + isAfterDay(value: T, comparing: T): boolean; + + isSameDay(date: T, comparing: T): boolean; + isSameMonth(date: T, comparing: T): boolean; + isSameYear(value: T, comparing: T): boolean; + + isBefore(date: T, comparing: T): boolean; + isEqual(date: T, comparing: T): boolean; + isValid(date: any): boolean; + isWithinRange(date: T, range: [T, T]): boolean; + + addMinutes(date: T, amount: number): T; + addHours(date: T, amount: number): T; + addDays(date: T, amount: number): T; + addWeeks(date: T, amount: number): T; + addMonths(date: T, amount: number): T; + + getYear(date: T): number; + setYear(date: T, year: number): T; + getDiff(date: T, comparing: T | string, unit?: string): number; + getWeekArray(date: T, firstDayOfWeek?: number | string): T[][]; + getWeekdays(firstDayOfWeek?: number | string): string[]; + getMonth(date: T): number; + setMonth(date: T, month: number): T; + getDate(date: T): number; + setDate(date: T, day: number): T; + getNextMonth(date: T): T; + getPreviousMonth(date: T): T; + + getHours(date: T): number; + setHours(date: T, hours: number): T; + getMinutes(date: T): number; + setMinutes(date: T, minutes: number): T; +} diff --git a/packages/alpinui/src/composables/date/__tests__/date.spec.ts b/packages/alpinui/src/composables/date/__tests__/date.spec.ts new file mode 100644 index 0000000..a469518 --- /dev/null +++ b/packages/alpinui/src/composables/date/__tests__/date.spec.ts @@ -0,0 +1,25 @@ +// Composables +import { getWeek } from '../date'; + +// Utilities +import { describe, expect, it } from '@jest/globals'; +import { AlpinuiDateAdapter } from '../adapters/alpinui'; + +// Types +import type { IUtils } from '@date-io/core/IUtils'; +import type { DateAdapter } from '../DateAdapter'; + +function expectAssignable(value: T2): void {} + +describe('date.ts', () => { + // Cannot define properties that don't exist in date-io + expectAssignable({} as IUtils); + // @ts-expect-error Can implement a subset of date-io + expectAssignable>({} as DateAdapter); + + it('should have the correct days in a month', () => { + const adapter = new AlpinuiDateAdapter({ locale: 'en-US' }); + + expect(getWeek(adapter, adapter.date('2023-10-10'))).toBe(41); + }); +}); diff --git a/packages/alpinui/src/composables/date/adapters/__tests__/alpinui.spec.ts b/packages/alpinui/src/composables/date/adapters/__tests__/alpinui.spec.ts new file mode 100644 index 0000000..57f2d08 --- /dev/null +++ b/packages/alpinui/src/composables/date/adapters/__tests__/alpinui.spec.ts @@ -0,0 +1,141 @@ +// Utilities +import { describe, expect, it } from '@jest/globals'; +import timezoneMock from 'timezone-mock'; +import { AlpinuiDateAdapter } from '../alpinui'; + +// Types +import type { TimeZone } from 'timezone-mock'; + +describe('alpinui date adapter', () => { + it('returns weekdays based on locale', () => { + let instance = new AlpinuiDateAdapter({ locale: 'en-us' }); + + expect(instance.getWeekdays()).toStrictEqual(['S', 'M', 'T', 'W', 'T', 'F', 'S']); + + instance = new AlpinuiDateAdapter({ locale: 'sv-se' }); + + expect(instance.getWeekdays()).toStrictEqual(['M', 'T', 'O', 'T', 'F', 'L', 'S']); + }); + + it('formats dates', () => { + let instance = new AlpinuiDateAdapter({ locale: 'en-us' }); + + expect(instance.format(new Date(2000, 0, 1), 'fullDateWithWeekday')).toBe('Saturday, January 1, 2000'); + + instance = new AlpinuiDateAdapter({ locale: 'sv-SE' }); + + expect(instance.format(new Date(2000, 0, 1), 'fullDateWithWeekday')).toBe('lördag 1 januari 2000'); + }); + + it.each([ + 'UTC', + 'US/Pacific', + 'Europe/London', + 'Brazil/East', + 'Australia/Adelaide', + 'Etc/GMT-2', + 'Etc/GMT-4', + 'Etc/GMT+4', + ])('handles timezone %s when parsing date without time', (timezone) => { + // locale option here has no impact on timezone + const instance = new AlpinuiDateAdapter({ locale: 'en-us' }); + + const str = '2001-01-01'; + + timezoneMock.register(timezone as TimeZone); + + const date = instance.date(str); + + expect(date?.getFullYear()).toBe(2001); + expect(date?.getDate()).toBe(1); + expect(date?.getMonth()).toBe(0); + + timezoneMock.unregister(); + }); + + describe('isAfterDay', () => { + const dateUtils = new AlpinuiDateAdapter({ locale: 'en-us' }); + + it.each([ + [new Date('2024-01-02'), new Date('2024-01-01'), true], + [new Date('2024-02-29'), new Date('2024-02-28'), true], + [new Date('2024-01-01'), new Date('2024-01-01'), false], + [new Date('2024-01-01'), new Date('2024-01-02'), false], + ])('returns %s when comparing %s and %s', (date, comparing, expected) => { + expect(dateUtils.isAfterDay(date, comparing)).toBe(expected); + }); + }); + + // TODO: why do these only fail locally + describe.skip('getPreviousMonth', () => { + const dateUtils = new AlpinuiDateAdapter({ locale: 'en-us' }); + + it.each([ + [new Date('2024-03-15'), new Date('2024-02-01'), '2024-03-15 -> 2024-02-01'], + [new Date('2024-01-01'), new Date('2023-12-01'), '2024-01-01 -> 2023-12-01'], + [new Date('2025-01-31'), new Date('2024-12-01'), '2025-01-31 -> 2024-12-01'], + [new Date('2024-02-29'), new Date('2024-01-01'), '2024-02-29 -> 2024-01-01 (Leap Year)'], + [new Date('2023-03-01'), new Date('2023-02-01'), '2023-03-01 -> 2023-02-01'], + ])('correctly calculates the first day of the previous month: %s', (date, expected) => { + const result = dateUtils.getPreviousMonth(date); + expect(result.getFullYear()).toBe(expected.getFullYear()); + expect(result.getMonth()).toBe(expected.getMonth()); + expect(result.getDate()).toBe(expected.getDate()); + }); + }); + + // TODO: why do these only fail locally + describe.skip('isSameYear', () => { + const dateUtils = new AlpinuiDateAdapter({ locale: 'en-us' }); + + it.each([ + [new Date('2024-01-01'), new Date('2024-12-31'), true], + [new Date('2024-06-15'), new Date('2024-11-20'), true], + [new Date('2023-01-01'), new Date('2024-01-01'), false], + [new Date('2024-12-31'), new Date('2025-01-01'), false], + [new Date('2024-07-07'), new Date('2023-07-07'), false], + ])('returns %s when comparing %s and %s', (date1, date2, expected) => { + expect(dateUtils.isSameYear(date1, date2)).toBe(expected); + }); + }); + + it('returns correct start of week', () => { + let instance = new AlpinuiDateAdapter({ locale: 'en-US' }); + + let date = instance.startOfWeek(new Date(2024, 3, 10, 12, 0, 0)); + + expect(date?.getFullYear()).toBe(2024); + expect(date?.getMonth()).toBe(3); + expect(date?.getDate()).toBe(7); + expect(date?.getDay()).toBe(0); + + instance = new AlpinuiDateAdapter({ locale: 'sv-SE' }); + + date = instance.startOfWeek(new Date(2024, 3, 10, 12, 0, 0)); + + expect(date?.getFullYear()).toBe(2024); + expect(date?.getMonth()).toBe(3); + expect(date?.getDate()).toBe(8); + expect(date?.getDay()).toBe(1); + }); + + it('returns correct end of week', () => { + let instance = new AlpinuiDateAdapter({ locale: 'en-US' }); + + let date = instance.endOfWeek(new Date(2024, 3, 10, 12, 0, 0)); + + expect(date?.getFullYear()).toBe(2024); + expect(date?.getMonth()).toBe(3); + expect(date?.getDate()).toBe(13); + expect(date?.getDay()).toBe(6); + + instance = new AlpinuiDateAdapter({ locale: 'sv-SE' }); + + date = instance.endOfWeek(new Date(2024, 3, 10, 12, 0, 0)); + + expect(date?.getFullYear()).toBe(2024); + expect(date?.getMonth()).toBe(3); + expect(date?.getDate()).toBe(14); + expect(date?.getDay()).toBe(0); + }); +}); diff --git a/packages/alpinui/src/composables/date/adapters/alpinui.ts b/packages/alpinui/src/composables/date/adapters/alpinui.ts new file mode 100644 index 0000000..1634555 --- /dev/null +++ b/packages/alpinui/src/composables/date/adapters/alpinui.ts @@ -0,0 +1,738 @@ +// Utilities +import { createRange, padStart } from '@/util/helpers'; + +// Types +import type { DateAdapter } from '../DateAdapter'; + +type CustomDateFormat = Intl.DateTimeFormatOptions | ((date: Date, formatString: string, locale: string) => string) + +const firstDay: Record = { + '001': 1, + AD: 1, + AE: 6, + AF: 6, + AG: 0, + AI: 1, + AL: 1, + AM: 1, + AN: 1, + AR: 1, + AS: 0, + AT: 1, + AU: 1, + AX: 1, + AZ: 1, + BA: 1, + BD: 0, + BE: 1, + BG: 1, + BH: 6, + BM: 1, + BN: 1, + BR: 0, + BS: 0, + BT: 0, + BW: 0, + BY: 1, + BZ: 0, + CA: 0, + CH: 1, + CL: 1, + CM: 1, + CN: 1, + CO: 0, + CR: 1, + CY: 1, + CZ: 1, + DE: 1, + DJ: 6, + DK: 1, + DM: 0, + DO: 0, + DZ: 6, + EC: 1, + EE: 1, + EG: 6, + ES: 1, + ET: 0, + FI: 1, + FJ: 1, + FO: 1, + FR: 1, + GB: 1, + 'GB-alt-variant': 0, + GE: 1, + GF: 1, + GP: 1, + GR: 1, + GT: 0, + GU: 0, + HK: 0, + HN: 0, + HR: 1, + HU: 1, + ID: 0, + IE: 1, + IL: 0, + IN: 0, + IQ: 6, + IR: 6, + IS: 1, + IT: 1, + JM: 0, + JO: 6, + JP: 0, + KE: 0, + KG: 1, + KH: 0, + KR: 0, + KW: 6, + KZ: 1, + LA: 0, + LB: 1, + LI: 1, + LK: 1, + LT: 1, + LU: 1, + LV: 1, + LY: 6, + MC: 1, + MD: 1, + ME: 1, + MH: 0, + MK: 1, + MM: 0, + MN: 1, + MO: 0, + MQ: 1, + MT: 0, + MV: 5, + MX: 0, + MY: 1, + MZ: 0, + NI: 0, + NL: 1, + NO: 1, + NP: 0, + NZ: 1, + OM: 6, + PA: 0, + PE: 0, + PH: 0, + PK: 0, + PL: 1, + PR: 0, + PT: 0, + PY: 0, + QA: 6, + RE: 1, + RO: 1, + RS: 1, + RU: 1, + SA: 0, + SD: 6, + SE: 1, + SG: 0, + SI: 1, + SK: 1, + SM: 1, + SV: 0, + SY: 6, + TH: 0, + TJ: 1, + TM: 1, + TR: 1, + TT: 0, + TW: 0, + UA: 1, + UM: 0, + US: 0, + UY: 1, + UZ: 1, + VA: 1, + VE: 0, + VI: 0, + VN: 1, + WS: 0, + XK: 1, + YE: 0, + ZA: 0, + ZW: 0, +}; + +function getWeekArray(date: Date, locale: string, firstDayOfWeek?: number) { + const weeks = []; + let currentWeek = []; + const firstDayOfMonth = startOfMonth(date); + const lastDayOfMonth = endOfMonth(date); + const first = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0; + const firstDayWeekIndex = (firstDayOfMonth.getDay() - first + 7) % 7; + const lastDayWeekIndex = (lastDayOfMonth.getDay() - first + 7) % 7; + + for (let i = 0; i < firstDayWeekIndex; i++) { + const adjacentDay = new Date(firstDayOfMonth); + adjacentDay.setDate(adjacentDay.getDate() - (firstDayWeekIndex - i)); + currentWeek.push(adjacentDay); + } + + for (let i = 1; i <= lastDayOfMonth.getDate(); i++) { + const day = new Date(date.getFullYear(), date.getMonth(), i); + + // Add the day to the current week + currentWeek.push(day); + + // If the current week has 7 days, add it to the weeks array and start a new week + if (currentWeek.length === 7) { + weeks.push(currentWeek); + currentWeek = []; + } + } + + for (let i = 1; i < 7 - lastDayWeekIndex; i++) { + const adjacentDay = new Date(lastDayOfMonth); + adjacentDay.setDate(adjacentDay.getDate() + i); + currentWeek.push(adjacentDay); + } + + if (currentWeek.length > 0) { + weeks.push(currentWeek); + } + + return weeks; +} + +function startOfWeek(date: Date, locale: string, firstDayOfWeek?: number) { + const day = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0; + + const d = new Date(date); + while (d.getDay() !== day) { + d.setDate(d.getDate() - 1); + } + return d; +} + +function endOfWeek(date: Date, locale: string) { + const d = new Date(date); + const lastDay = ((firstDay[locale.slice(-2).toUpperCase()] ?? 0) + 6) % 7; + while (d.getDay() !== lastDay) { + d.setDate(d.getDate() + 1); + } + return d; +} + +function startOfMonth(date: Date) { + return new Date(date.getFullYear(), date.getMonth(), 1); +} + +function endOfMonth(date: Date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 0); +} + +function parseLocalDate(value: string): Date { + const parts = value.split('-').map(Number); + + // new Date() uses local time zone when passing individual date component values + return new Date(parts[0], parts[1] - 1, parts[2]); +} + +const _YYYMMDD = /^([12]\d{3}-([1-9]|0[1-9]|1[0-2])-([1-9]|0[1-9]|[12]\d|3[01]))$/; + +function date(value?: any): Date | null { + if (value == null) return new Date(); + + if (value instanceof Date) return value; + + if (typeof value === 'string') { + let parsed; + + if (_YYYMMDD.test(value)) { + return parseLocalDate(value); + } else { + parsed = Date.parse(value); + } + + if (!isNaN(parsed)) return new Date(parsed); + } + + return null; +} + +const sundayJanuarySecond2000 = new Date(2000, 0, 2); + +function getWeekdays(locale: string, firstDayOfWeek?: number) { + const daysFromSunday = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0; + + return createRange(7).map((i) => { + const weekday = new Date(sundayJanuarySecond2000); + weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i); + return new Intl.DateTimeFormat(locale, { weekday: 'narrow' }).format(weekday); + }); +} + +function format( + value: Date, + formatString: string, + locale: string, + formats?: Record +): string { + const newDate = date(value) ?? new Date(); + const customFormat = formats?.[formatString]; + + if (typeof customFormat === 'function') { + return customFormat(newDate, formatString, locale); + } + + let options: Intl.DateTimeFormatOptions = {}; + switch (formatString) { + case 'fullDate': + options = { year: 'numeric', month: 'long', day: 'numeric' }; + break; + case 'fullDateWithWeekday': + options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + break; + case 'normalDate': + const day = newDate.getDate(); + const month = new Intl.DateTimeFormat(locale, { month: 'long' }).format(newDate); + return `${day} ${month}`; + case 'normalDateWithWeekday': + options = { weekday: 'short', day: 'numeric', month: 'short' }; + break; + case 'shortDate': + options = { month: 'short', day: 'numeric' }; + break; + case 'year': + options = { year: 'numeric' }; + break; + case 'month': + options = { month: 'long' }; + break; + case 'monthShort': + options = { month: 'short' }; + break; + case 'monthAndYear': + options = { month: 'long', year: 'numeric' }; + break; + case 'monthAndDate': + options = { month: 'long', day: 'numeric' }; + break; + case 'weekday': + options = { weekday: 'long' }; + break; + case 'weekdayShort': + options = { weekday: 'short' }; + break; + case 'dayOfMonth': + return new Intl.NumberFormat(locale).format(newDate.getDate()); + case 'hours12h': + options = { hour: 'numeric', hour12: true }; + break; + case 'hours24h': + options = { hour: 'numeric', hour12: false }; + break; + case 'minutes': + options = { minute: 'numeric' }; + break; + case 'seconds': + options = { second: 'numeric' }; + break; + case 'fullTime': + options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; + break; + case 'fullTime12h': + options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; + break; + case 'fullTime24h': + options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }; + break; + case 'fullDateTime': + options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; + break; + case 'fullDateTime12h': + options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; + break; + case 'fullDateTime24h': + options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }; + break; + case 'keyboardDate': + options = { year: 'numeric', month: '2-digit', day: '2-digit' }; + break; + case 'keyboardDateTime': + options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }; + break; + case 'keyboardDateTime12h': + options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; + break; + case 'keyboardDateTime24h': + options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }; + break; + default: + options = customFormat ?? { timeZone: 'UTC', timeZoneName: 'short' }; + } + + return new Intl.DateTimeFormat(locale, options).format(newDate); +} + +function toISO(adapter: DateAdapter, value: Date) { + const date = adapter.toJsDate(value); + const year = date.getFullYear(); + const month = padStart(String(date.getMonth() + 1), 2, '0'); + const day = padStart(String(date.getDate()), 2, '0'); + + return `${year}-${month}-${day}`; +} + +function parseISO(value: string) { + const [year, month, day] = value.split('-').map(Number); + + return new Date(year, month - 1, day); +} + +function addMinutes(date: Date, amount: number) { + const d = new Date(date); + d.setMinutes(d.getMinutes() + amount); + return d; +} + +function addHours(date: Date, amount: number) { + const d = new Date(date); + d.setHours(d.getHours() + amount); + return d; +} + +function addDays(date: Date, amount: number) { + const d = new Date(date); + d.setDate(d.getDate() + amount); + return d; +} + +function addWeeks(date: Date, amount: number) { + const d = new Date(date); + d.setDate(d.getDate() + (amount * 7)); + return d; +} + +function addMonths(date: Date, amount: number) { + const d = new Date(date); + d.setDate(1); + d.setMonth(d.getMonth() + amount); + return d; +} + +function getYear(date: Date) { + return date.getFullYear(); +} + +function getMonth(date: Date) { + return date.getMonth(); +} + +function getDate(date: Date) { + return date.getDate(); +} + +function getNextMonth(date: Date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 1); +} + +function getPreviousMonth(date: Date) { + return new Date(date.getFullYear(), date.getMonth() - 1, 1); +} + +function getHours(date: Date) { + return date.getHours(); +} + +function getMinutes(date: Date) { + return date.getMinutes(); +} + +function startOfYear(date: Date) { + return new Date(date.getFullYear(), 0, 1); +} +function endOfYear(date: Date) { + return new Date(date.getFullYear(), 11, 31); +} + +function isWithinRange(date: Date, range: [Date, Date]) { + return isAfter(date, range[0]) && isBefore(date, range[1]); +} + +function isValid(date: any) { + const d = new Date(date); + + return d instanceof Date && !isNaN(d.getTime()); +} + +function isAfter(date: Date, comparing: Date) { + return date.getTime() > comparing.getTime(); +} + +function isAfterDay(date: Date, comparing: Date): boolean { + return isAfter(startOfDay(date), startOfDay(comparing)); +} + +function isBefore(date: Date, comparing: Date) { + return date.getTime() < comparing.getTime(); +} + +function isEqual(date: Date, comparing: Date) { + return date.getTime() === comparing.getTime(); +} + +function isSameDay(date: Date, comparing: Date) { + return date.getDate() === comparing.getDate() && + date.getMonth() === comparing.getMonth() && + date.getFullYear() === comparing.getFullYear(); +} + +function isSameMonth(date: Date, comparing: Date) { + return date.getMonth() === comparing.getMonth() && + date.getFullYear() === comparing.getFullYear(); +} + +function isSameYear(date: Date, comparing: Date) { + return date.getFullYear() === comparing.getFullYear(); +} + +function getDiff(date: Date, comparing: Date | string, unit?: string) { + const d = new Date(date); + const c = new Date(comparing); + + switch (unit) { + case 'years': + return d.getFullYear() - c.getFullYear(); + case 'quarters': + return Math.floor((d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12) / 4); + case 'months': + return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12; + case 'weeks': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24 * 7)); + case 'days': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24)); + case 'hours': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60)); + case 'minutes': + return Math.floor((d.getTime() - c.getTime()) / (1000 * 60)); + case 'seconds': + return Math.floor((d.getTime() - c.getTime()) / 1000); + default: { + return d.getTime() - c.getTime(); + } + } +} + +function setHours(date: Date, count: number) { + const d = new Date(date); + d.setHours(count); + return d; +} + +function setMinutes(date: Date, count: number) { + const d = new Date(date); + d.setMinutes(count); + return d; +} + +function setMonth(date: Date, count: number) { + const d = new Date(date); + d.setMonth(count); + return d; +} + +function setDate(date: Date, day: number) { + const d = new Date(date); + d.setDate(day); + return d; +} + +function setYear(date: Date, year: number) { + const d = new Date(date); + d.setFullYear(year); + return d; +} + +function startOfDay(date: Date) { + return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0); +} + +function endOfDay(date: Date) { + return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999); +} + +export class AlpinuiDateAdapter implements DateAdapter { + locale: string; + formats?: Record; + + constructor(options: { locale: string, formats?: Record }) { + this.locale = options.locale; + this.formats = options.formats; + } + + date(value?: any) { + return date(value); + } + + toJsDate(date: Date) { + return date; + } + + toISO(date: Date): string { + return toISO(this, date); + } + + parseISO(date: string) { + return parseISO(date); + } + + addMinutes(date: Date, amount: number) { + return addMinutes(date, amount); + } + + addHours(date: Date, amount: number) { + return addHours(date, amount); + } + + addDays(date: Date, amount: number) { + return addDays(date, amount); + } + + addWeeks(date: Date, amount: number) { + return addWeeks(date, amount); + } + + addMonths(date: Date, amount: number) { + return addMonths(date, amount); + } + + getWeekArray(date: Date, firstDayOfWeek?: number | string) { + return getWeekArray(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined); + } + + startOfWeek(date: Date, firstDayOfWeek?: number | string): Date { + return startOfWeek(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined); + } + + endOfWeek(date: Date): Date { + return endOfWeek(date, this.locale); + } + + startOfMonth(date: Date) { + return startOfMonth(date); + } + + endOfMonth(date: Date) { + return endOfMonth(date); + } + + format(date: Date, formatString: string) { + return format(date, formatString, this.locale, this.formats); + } + + isEqual(date: Date, comparing: Date) { + return isEqual(date, comparing); + } + + isValid(date: any) { + return isValid(date); + } + + isWithinRange(date: Date, range: [Date, Date]) { + return isWithinRange(date, range); + } + + isAfter(date: Date, comparing: Date) { + return isAfter(date, comparing); + } + + isAfterDay(date: Date, comparing: Date) { + return isAfterDay(date, comparing); + } + + isBefore(date: Date, comparing: Date) { + return !isAfter(date, comparing) && !isEqual(date, comparing); + } + + isSameDay(date: Date, comparing: Date) { + return isSameDay(date, comparing); + } + + isSameMonth(date: Date, comparing: Date) { + return isSameMonth(date, comparing); + } + + isSameYear(date: Date, comparing: Date) { + return isSameYear(date, comparing); + } + + setMinutes(date: Date, count: number) { + return setMinutes(date, count); + } + + setHours(date: Date, count: number) { + return setHours(date, count); + } + + setMonth(date: Date, count: number) { + return setMonth(date, count); + } + + setDate(date: Date, day: number): Date { + return setDate(date, day); + } + + setYear(date: Date, year: number) { + return setYear(date, year); + } + + getDiff(date: Date, comparing: Date | string, unit?: string) { + return getDiff(date, comparing, unit); + } + + getWeekdays(firstDayOfWeek?: number | string) { + return getWeekdays(this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined); + } + + getYear(date: Date) { + return getYear(date); + } + + getMonth(date: Date) { + return getMonth(date); + } + + getDate(date: Date) { + return getDate(date); + } + + getNextMonth(date: Date) { + return getNextMonth(date); + } + + getPreviousMonth(date: Date) { + return getPreviousMonth(date); + } + + getHours(date: Date) { + return getHours(date); + } + + getMinutes(date: Date) { + return getMinutes(date); + } + + startOfDay(date: Date) { + return startOfDay(date); + } + + endOfDay(date: Date) { + return endOfDay(date); + } + + startOfYear(date: Date) { + return startOfYear(date); + } + + endOfYear(date: Date) { + return endOfYear(date); + } +} diff --git a/packages/alpinui/src/composables/date/date.ts b/packages/alpinui/src/composables/date/date.ts new file mode 100644 index 0000000..6c4d51c --- /dev/null +++ b/packages/alpinui/src/composables/date/date.ts @@ -0,0 +1,142 @@ +// Composables +import { useLocale } from '@/composables/locale'; + +// Utilities +import { reactive, watch } from 'alpine-reactivity'; +import { mergeDeep } from '@/util/helpers'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { InjectionKey } from 'vue'; +import type { DateAdapter } from './DateAdapter'; +import type { LocaleInstance } from '@/composables/locale'; + +// Adapters +import { AlpinuiDateAdapter } from './adapters/alpinui'; + +export interface DateInstance extends DateModule.InternalAdapter { + locale?: any; +} + +/** Supports module augmentation to specify date adapter types */ +export namespace DateModule { + interface Adapter {} + + export type InternalAdapter = {} extends Adapter ? DateAdapter : Adapter +} + +export type InternalDateOptions = { + adapter: (new (options: { locale: any, formats?: any }) => DateInstance) | DateInstance; + formats?: Record; + locale: Record; +} + +export type DateOptions = Partial + +export const DateOptionsSymbol: InjectionKey = Symbol.for('vuetify:date-options'); +export const DateAdapterSymbol: InjectionKey = Symbol.for('vuetify:date-adapter'); + +export function createDate(options: DateOptions | undefined, locale: LocaleInstance) { + const _options = mergeDeep({ + adapter: AlpinuiDateAdapter, + locale: { + af: 'af-ZA', + // ar: '', # not the same value for all variants + bg: 'bg-BG', + ca: 'ca-ES', + ckb: '', + cs: 'cs-CZ', + de: 'de-DE', + el: 'el-GR', + en: 'en-US', + // es: '', # not the same value for all variants + et: 'et-EE', + fa: 'fa-IR', + fi: 'fi-FI', + // fr: '', #not the same value for all variants + hr: 'hr-HR', + hu: 'hu-HU', + he: 'he-IL', + id: 'id-ID', + it: 'it-IT', + ja: 'ja-JP', + ko: 'ko-KR', + lv: 'lv-LV', + lt: 'lt-LT', + nl: 'nl-NL', + no: 'no-NO', + pl: 'pl-PL', + pt: 'pt-PT', + ro: 'ro-RO', + ru: 'ru-RU', + sk: 'sk-SK', + sl: 'sl-SI', + srCyrl: 'sr-SP', + srLatn: 'sr-SP', + sv: 'sv-SE', + th: 'th-TH', + tr: 'tr-TR', + az: 'az-AZ', + uk: 'uk-UA', + vi: 'vi-VN', + zhHans: 'zh-CN', + zhHant: 'zh-TW', + }, + }, options) as InternalDateOptions; + + return { + options: _options, + instance: createInstance(_options, locale), + }; +} + +function createInstance(options: InternalDateOptions, locale: LocaleInstance) { + const instance = reactive( + typeof options.adapter === 'function' + // eslint-disable-next-line new-cap + ? new options.adapter({ + locale: options.locale[locale.current.value] ?? locale.current.value, + formats: options.formats, + }) + : options.adapter + ); + + watch(locale.current, (value) => { + instance.locale = options.locale[value] ?? value ?? instance.locale; + }); + + return instance; +} + +export function useDate(vm: AlpineInstance): DateInstance { + const options = vm.$inject(DateOptionsSymbol); + + if (!options) throw new Error('[Alpinui] Could not find injected date options'); + + const locale = useLocale(vm); + + return createInstance(options, locale); +} + +// https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024 +export function getWeek(adapter: DateAdapter, value: any) { + const date = adapter.toJsDate(value); + let year = date.getFullYear(); + let d1w1 = new Date(year, 0, 1); + + if (date < d1w1) { + year = year - 1; + d1w1 = new Date(year, 0, 1); + } else { + const tv = new Date(year + 1, 0, 1); + if (date >= tv) { + year = year + 1; + d1w1 = tv; + } + } + + const diffTime = Math.abs(date.getTime() - d1w1.getTime()); + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + return Math.floor(diffDays / 7) + 1; +} diff --git a/packages/alpinui/src/composables/date/index.ts b/packages/alpinui/src/composables/date/index.ts new file mode 100644 index 0000000..def1298 --- /dev/null +++ b/packages/alpinui/src/composables/date/index.ts @@ -0,0 +1,3 @@ +export { createDate, useDate, DateAdapterSymbol } from './date'; +export type { DateAdapter } from './DateAdapter'; +export type { DateOptions, DateInstance, DateModule } from './date'; diff --git a/packages/alpinui/src/composables/defaults.ts b/packages/alpinui/src/composables/defaults.ts new file mode 100644 index 0000000..23cf4a3 --- /dev/null +++ b/packages/alpinui/src/composables/defaults.ts @@ -0,0 +1,169 @@ +// Utilities +import { computed, ref, shallowRef, unref, watchEffect } from 'alpine-reactivity'; +import { mergeDeep, toKebabCase } from '@/util/helpers'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { ComputedRef, MaybeRef, Ref } from 'alpine-reactivity'; +import type { InjectionKey } from 'vue'; + +export type DefaultsInstance = undefined | { + [key: string]: undefined | Record; + global?: Record; +} + +export type DefaultsOptions = Partial + +export const DefaultsSymbol: InjectionKey> = Symbol.for('alpinui:defaults'); + +export function createDefaults(options?: DefaultsInstance): Ref { + return ref(options); +} + +export function injectDefaults< +T extends Data, +P extends Data, +E extends EmitsOptions, +>(vm: AlpineInstance) { + const defaults = vm.$inject(DefaultsSymbol); + + if (!defaults) throw new Error('[Alpinui] Could not find defaults instance'); + + return defaults; +} + +export function provideDefaults( + vm: AlpineInstance, + defaults?: MaybeRef, + options?: { + disabled?: MaybeRef; + reset?: MaybeRef; + root?: MaybeRef; + scoped?: MaybeRef; + } +) { + const injectedDefaults = injectDefaults(vm); + const providedDefaults = ref(defaults); + + const newDefaults = computed(() => { + const disabled = unref(options?.disabled); + + if (disabled) return injectedDefaults.value; + + const scoped = unref(options?.scoped); + const reset = unref(options?.reset); + const root = unref(options?.root); + + if (providedDefaults.value == null && !(scoped || reset || root)) return injectedDefaults.value; + + let properties = mergeDeep(providedDefaults.value, { prev: injectedDefaults.value }); + + if (scoped) return properties; + + if (reset || root) { + const len = Number(reset || Infinity); + + for (let i = 0; i <= len; i++) { + if (!properties || !('prev' in properties)) { + break; + } + + properties = properties.prev; + } + + if (properties && typeof root === 'string' && root in properties) { + properties = mergeDeep(mergeDeep(properties, { prev: properties }), properties[root]); + } + + return properties; + } + + return properties.prev + ? mergeDeep(properties.prev, properties) + : properties; + }) as ComputedRef; + + vm.$provide(DefaultsSymbol, newDefaults); + + return newDefaults; +} + +function propIsDefined(props: Data, prop: string) { + return typeof props[prop] !== 'undefined' || + // TODO - Keep this? + typeof props?.[toKebabCase(prop)] !== 'undefined'; +} + +export function internalUseDefaults< +T extends Data, +P extends Data, +E extends EmitsOptions, +>( + vm: AlpineInstance, + props: Record = {}, + name?: string, + defaults = injectDefaults(vm), +) { + name = name ?? vm.$name; + if (!name) { + throw new Error('[Alpinui] Could not determine component name'); + } + + const componentDefaults = computed(() => defaults.value?.[props._as ?? name]); + const _props = new Proxy(props, { + get(target, prop) { + const propValue = Reflect.get(target, prop); + if (prop === 'class' || prop === 'style') { + return [componentDefaults.value?.[prop], propValue].filter((v) => v != null); + } else if (typeof prop === 'string' && !propIsDefined(vm.$props, prop)) { + return componentDefaults.value?.[prop] !== undefined ? componentDefaults.value?.[prop] + : defaults.value?.global?.[prop] !== undefined ? defaults.value?.global?.[prop] + : propValue; + } + return propValue; + }, + }); + + const _subcomponentDefaults = shallowRef | undefined>(undefined); + + watchEffect(() => { + if (componentDefaults.value) { + const subComponents = Object.entries(componentDefaults.value).filter(([key]) => key.startsWith(key[0].toUpperCase())); + _subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : undefined; + } else { + _subcomponentDefaults.value = undefined; + } + }); + + function provideSubDefaults() { + const injected = vm.$injectSelf(DefaultsSymbol); + vm.$provide(DefaultsSymbol, computed(() => { + return _subcomponentDefaults.value ? mergeDeep( + injected?.value ?? {}, + _subcomponentDefaults.value + ) : injected?.value; + })); + } + + return { props: _props, provideSubDefaults }; +} + +export function useDefaults> ( + vm: AlpineInstance, + props: T, + name?: string, +): T +export function useDefaults ( + vm: AlpineInstance, + props?: undefined, + name?: string, +): Record +export function useDefaults( + vm: AlpineInstance, + props: Record = {}, + name?: string, +) { + const { props: _props, provideSubDefaults } = internalUseDefaults(vm, props, name); + provideSubDefaults(); + return _props; +} diff --git a/packages/alpinui/src/composables/display.ts b/packages/alpinui/src/composables/display.ts new file mode 100644 index 0000000..d841f2e --- /dev/null +++ b/packages/alpinui/src/composables/display.ts @@ -0,0 +1,260 @@ +// Utilities +import { computed, reactive, shallowRef, toRefs, watchEffect } from 'alpine-reactivity'; +import { getCurrentInstanceName } from '@/util/getCurrentInstance'; +import { IN_BROWSER, SUPPORTS_TOUCH } from '@/util/globals'; +import { mergeDeep } from '@/util/helpers'; +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { ComputedRef, UnwrapRef } from 'alpine-reactivity'; +import type { InjectionKey, PropType } from 'vue'; + +type UnwrapKeys = { + [K in keyof T]: UnwrapRef; +} + +export const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const; // no xs + +export type Breakpoint = typeof breakpoints[number] + +export type DisplayBreakpoint = 'xs' | Breakpoint + +export type DisplayThresholds = { + [key in DisplayBreakpoint]: number +} + +export interface DisplayProps { + mobile?: boolean | null; + mobileBreakpoint?: number | DisplayBreakpoint; +} + +export interface DisplayOptions { + mobileBreakpoint?: number | DisplayBreakpoint; + thresholds?: Partial; +} + +export interface InternalDisplayOptions { + mobileBreakpoint: number | DisplayBreakpoint; + thresholds: DisplayThresholds; +} + +export type SSROptions = boolean | { + clientWidth: number; + clientHeight?: number; +} + +export interface DisplayPlatform { + android: boolean; + ios: boolean; + cordova: boolean; + electron: boolean; + chrome: boolean; + edge: boolean; + firefox: boolean; + opera: boolean; + win: boolean; + mac: boolean; + linux: boolean; + touch: boolean; + ssr: boolean; +} + +export interface DisplayInstance { + xs: ComputedRef; + sm: ComputedRef; + md: ComputedRef; + lg: ComputedRef; + xl: ComputedRef; + xxl: ComputedRef; + smAndUp: ComputedRef; + mdAndUp: ComputedRef; + lgAndUp: ComputedRef; + xlAndUp: ComputedRef; + smAndDown: ComputedRef; + mdAndDown: ComputedRef; + lgAndDown: ComputedRef; + xlAndDown: ComputedRef; + name: ComputedRef; + height: ComputedRef; + width: ComputedRef; + mobile: ComputedRef; + mobileBreakpoint: ComputedRef; + platform: ComputedRef; + thresholds: ComputedRef; + + /** @internal */ + ssr: boolean; + + update (): void; +} + +export const DisplaySymbol: InjectionKey = Symbol.for('alpinui:display'); + +const defaultDisplayOptions: DisplayOptions = { + mobileBreakpoint: 'lg', + thresholds: { + xs: 0, + sm: 600, + md: 960, + lg: 1280, + xl: 1920, + xxl: 2560, + }, +}; + +const parseDisplayOptions = (options: DisplayOptions = defaultDisplayOptions) => { + return mergeDeep(defaultDisplayOptions, options) as InternalDisplayOptions; +}; + +function getClientWidth(ssr?: SSROptions) { + return IN_BROWSER && !ssr + ? window.innerWidth + : (typeof ssr === 'object' && ssr.clientWidth) || 0; +} + +function getClientHeight(ssr?: SSROptions) { + return IN_BROWSER && !ssr + ? window.innerHeight + : (typeof ssr === 'object' && ssr.clientHeight) || 0; +} + +function getPlatform(ssr?: SSROptions): DisplayPlatform { + const userAgent = IN_BROWSER && !ssr + ? window.navigator.userAgent + : 'ssr'; + + function match(regexp: RegExp) { + return Boolean(userAgent.match(regexp)); + } + + const android = match(/android/i); + const ios = match(/iphone|ipad|ipod/i); + const cordova = match(/cordova/i); + const electron = match(/electron/i); + const chrome = match(/chrome/i); + const edge = match(/edge/i); + const firefox = match(/firefox/i); + const opera = match(/opera/i); + const win = match(/win/i); + const mac = match(/mac/i); + const linux = match(/linux/i); + + return { + android, + ios, + cordova, + electron, + chrome, + edge, + firefox, + opera, + win, + mac, + linux, + touch: SUPPORTS_TOUCH, + ssr: userAgent === 'ssr', + }; +} + +export function createDisplay(options?: DisplayOptions, ssr?: SSROptions): DisplayInstance { + const { thresholds, mobileBreakpoint } = parseDisplayOptions(options); + + const height = shallowRef(getClientHeight(ssr)); + const platform = shallowRef(getPlatform(ssr)); + const width = shallowRef(getClientWidth(ssr)); + const state = reactive({} as UnwrapKeys); + + function updateSize() { + height.value = getClientHeight(); + width.value = getClientWidth(); + } + function update() { + updateSize(); + platform.value = getPlatform(); + } + + // eslint-disable-next-line max-statements + watchEffect(() => { + const xs = width.value < thresholds.sm; + const sm = width.value < thresholds.md && !xs; + const md = width.value < thresholds.lg && !(sm || xs); + const lg = width.value < thresholds.xl && !(md || sm || xs); + const xl = width.value < thresholds.xxl && !(lg || md || sm || xs); + const xxl = width.value >= thresholds.xxl; + const name = + xs ? 'xs' + : sm ? 'sm' + : md ? 'md' + : lg ? 'lg' + : xl ? 'xl' + : 'xxl'; + const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint]; + const mobile = width.value < breakpointValue; + + state.xs = xs; + state.sm = sm; + state.md = md; + state.lg = lg; + state.xl = xl; + state.xxl = xxl; + state.smAndUp = !xs; + state.mdAndUp = !(xs || sm); + state.lgAndUp = !(xs || sm || md); + state.xlAndUp = !(xs || sm || md || lg); + state.smAndDown = !(md || lg || xl || xxl); + state.mdAndDown = !(lg || xl || xxl); + state.lgAndDown = !(xl || xxl); + state.xlAndDown = !xxl; + state.name = name; + state.height = height.value; + state.width = width.value; + state.mobile = mobile; + state.mobileBreakpoint = mobileBreakpoint; + state.platform = platform.value; + state.thresholds = thresholds; + }); + + if (IN_BROWSER) { + window.addEventListener('resize', updateSize, { passive: true }); + } + + return { ...toRefs(state), update, ssr: !!ssr }; +} + +export const makeDisplayProps = propsFactory({ + mobile: { + type: Boolean as PropType, + default: false, + }, + mobileBreakpoint: [Number, String] as PropType, +}, 'display'); + +export function useDisplay( + vm: AlpineInstance, + props: DisplayProps = {}, + name = getCurrentInstanceName(vm), +) { + const display = vm.$inject(DisplaySymbol); + + if (!display) throw new Error('Could not find Alpinui display injection'); + + const mobile = computed(() => { + if (props.mobile != null) return props.mobile; + if (!props.mobileBreakpoint) return display.mobile.value; + + const breakpointValue = typeof props.mobileBreakpoint === 'number' + ? props.mobileBreakpoint + : display.thresholds.value[props.mobileBreakpoint]; + + return display.width.value < breakpointValue; + }); + + const displayClasses = computed(() => { + if (!name) return {}; + + return { [`${name}--mobile`]: mobile.value }; + }); + + return { ...display, displayClasses, mobile }; +} diff --git a/packages/alpinui/src/composables/focus.ts b/packages/alpinui/src/composables/focus.ts new file mode 100644 index 0000000..5d60671 --- /dev/null +++ b/packages/alpinui/src/composables/focus.ts @@ -0,0 +1,53 @@ +// Composables +import { useProxiedModel } from '@/composables/proxiedModel'; + +// Utilities +import { computed } from 'alpine-reactivity'; +import { getCurrentInstanceName } from '@/util/getCurrentInstance'; +import { EventProp } from '@/util/helpers'; +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; + +// TODO +// TODO +// TODO - HAVE A LOOK AT THIS AGAIN! BECAUSE WE WILL NEED TO EXPLICTLY +// HANDLE EVENTS AS CALLBACKS FOR THIS TO WORK! +// TODO +// TODO + +// Types +export interface FocusProps { + focused: boolean; + 'onUpdate:focused': ((focused: boolean) => any) | undefined; +} + +// Composables +export const makeFocusProps = propsFactory({ + focused: Boolean, + 'onUpdate:focused': EventProp<[boolean]>(), +}, 'focus'); + +export function useFocus( + vm: AlpineInstance, + props: FocusProps, + name = getCurrentInstanceName(vm), +) { + const isFocused = useProxiedModel(vm, props, 'focused'); + const focusClasses = computed(() => { + return ({ + [`${name}--focused`]: isFocused.value, + }); + }); + + function focus() { + isFocused.value = true; + } + + function blur() { + isFocused.value = false; + } + + return { focusClasses, isFocused, focus, blur }; +} diff --git a/packages/alpinui/src/composables/form.ts b/packages/alpinui/src/composables/form.ts new file mode 100644 index 0000000..30161ce --- /dev/null +++ b/packages/alpinui/src/composables/form.ts @@ -0,0 +1,202 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Composables +import { useProxiedModel } from '@/composables/proxiedModel'; + +// Utilities +import { computed, ref, shallowRef, toRef, watch } from 'alpine-reactivity'; +import { markRaw } from 'vue'; +import { consoleWarn } from '@/util/console'; +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { Ref } from 'alpine-reactivity'; +import type { ComponentInternalInstance, ComputedRef, InjectionKey, PropType, Raw } from 'vue'; +import type { ValidationProps } from './validation'; +import type { EventProp } from '@/util/helpers'; + +export interface FormProvide { + register: (item: { + id: number | string; + vm: ComponentInternalInstance; + validate: () => Promise; + reset: () => Promise; + resetValidation: () => Promise; + }) => void; + unregister: (id: number | string) => void; + update: (id: number | string, isValid: boolean | null, errorMessages: string[]) => void; + items: Ref; + isDisabled: ComputedRef; + isReadonly: ComputedRef; + isValidating: Ref; + isValid: Ref; + validateOn: Ref; +} + +export interface FormField { + id: number | string; + validate: () => Promise; + reset: () => Promise; + resetValidation: () => Promise; + vm: Raw; + isValid: boolean | null; + errorMessages: string[]; +} + +export interface FieldValidationResult { + id: number | string; + errorMessages: string[]; +} + +export interface FormValidationResult { + valid: boolean; + errors: FieldValidationResult[]; +} + +export interface SubmitEventPromise extends SubmitEvent, Promise {} + +export const FormKey: InjectionKey = Symbol.for('vuetify:form'); + +export interface FormProps { + disabled: boolean; + fastFail: boolean; + readonly: boolean; + modelValue: boolean | null; + 'onUpdate:modelValue': EventProp<[boolean | null]> | undefined; + validateOn: ValidationProps['validateOn']; +} + +export const makeFormProps = propsFactory({ + disabled: Boolean, + fastFail: Boolean, + readonly: Boolean, + modelValue: { + type: Boolean as PropType, + default: null, + }, + validateOn: { + type: String as PropType, + default: 'input', + }, +}, 'form'); + +export function createForm(props: FormProps) { + const model = useProxiedModel(props, 'modelValue'); + + const isDisabled = computed(() => props.disabled); + const isReadonly = computed(() => props.readonly); + const isValidating = shallowRef(false); + const items = ref([]); + const errors = ref([]); + + async function validate() { + const results = []; + let valid = true; + + errors.value = []; + isValidating.value = true; + + for (const item of items.value) { + const itemErrorMessages = await item.validate(); + + if (itemErrorMessages.length > 0) { + valid = false; + + results.push({ + id: item.id, + errorMessages: itemErrorMessages, + }); + } + + if (!valid && props.fastFail) break; + } + + errors.value = results; + isValidating.value = false; + + return { valid, errors: errors.value }; + } + + function reset() { + items.value.forEach((item) => item.reset()); + } + + function resetValidation() { + items.value.forEach((item) => item.resetValidation()); + } + + watch(items, () => { + let valid = 0; + let invalid = 0; + const results = []; + + for (const item of items.value) { + if (item.isValid === false) { + invalid++; + results.push({ + id: item.id, + errorMessages: item.errorMessages, + }); + } else if (item.isValid === true) valid++; + } + + errors.value = results; + model.value = + invalid > 0 ? false + : valid === items.value.length ? true + : null; + }, { deep: true, flush: 'post' }); + + provide(FormKey, { + register: ({ id, vm, validate, reset, resetValidation }) => { + if (items.value.some((item) => item.id === id)) { + consoleWarn(`Duplicate input name "${id}"`); + } + + items.value.push({ + id, + validate, + reset, + resetValidation, + vm: markRaw(vm), + isValid: null, + errorMessages: [], + }); + }, + unregister: (id) => { + items.value = items.value.filter((item) => { + return item.id !== id; + }); + }, + update: (id, isValid, errorMessages) => { + const found = items.value.find((item) => item.id === id); + + if (!found) return; + + found.isValid = isValid; + found.errorMessages = errorMessages; + }, + isDisabled, + isReadonly, + isValidating, + isValid: model, + items, + validateOn: toRef(props, 'validateOn'), + }); + + return { + errors, + isDisabled, + isReadonly, + isValidating, + isValid: model, + items, + validate, + reset, + resetValidation, + }; +} + +export function useForm() { + return inject(FormKey, null); +} diff --git a/packages/alpinui/src/composables/goto.ts b/packages/alpinui/src/composables/goto.ts new file mode 100644 index 0000000..1950992 --- /dev/null +++ b/packages/alpinui/src/composables/goto.ts @@ -0,0 +1,212 @@ +// Utilities +import { computed } from 'alpine-reactivity'; +import { useRtl } from './locale'; +import { consoleWarn } from '@/util/console'; +import { clamp, mergeDeep, refElement } from '@/util/helpers'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { Ref } from 'alpine-reactivity'; +import type { InjectionKey } from 'vue'; +import type { LocaleInstance, RtlInstance } from './locale'; + +export interface GoToInstance { + rtl: Ref; + options: InternalGoToOptions; +} + +export interface InternalGoToOptions { + container: AlpineInstance | HTMLElement | string; + duration: number; + layout: boolean; + offset: number; + easing: string | ((t: number) => number); + patterns: Record number>; +} + +export type GoToOptions = Partial + +export const GoToSymbol: InjectionKey = Symbol.for('alpinui:goto'); + +function genDefaults() { + return { + container: undefined, + duration: 300, + layout: false, + offset: 0, + easing: 'easeInOutCubic', + patterns: { + linear: (t: number) => t, + easeInQuad: (t: number) => t ** 2, + easeOutQuad: (t: number) => t * (2 - t), + easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t), + easeInCubic: (t: number) => t ** 3, + easeOutCubic: (t: number) => --t ** 3 + 1, + easeInOutCubic: (t: number) => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1, + easeInQuart: (t: number) => t ** 4, + easeOutQuart: (t: number) => 1 - --t ** 4, + easeInOutQuart: (t: number) => (t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4), + easeInQuint: (t: number) => t ** 5, + easeOutQuint: (t: number) => 1 + --t ** 5, + easeInOutQuint: (t: number) => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5, + }, + }; +} + +function getContainer(el?: AlpineInstance | HTMLElement | string) { + return getTarget(el) ?? (document.scrollingElement || document.body) as HTMLElement; +} + +function getTarget(el: AlpineInstance | HTMLElement | string | undefined) { + return (typeof el === 'string') ? document.querySelector(el) : refElement(el); +} + +function getOffset(target: any, horizontal?: boolean, rtl?: boolean): number { + if (typeof target === 'number') return horizontal && rtl ? -target : target; + + let el = getTarget(target); + let totalOffset = 0; + while (el) { + totalOffset += horizontal ? el.offsetLeft : el.offsetTop; + el = el.offsetParent as HTMLElement; + } + + return totalOffset; +} + +export function createGoTo( + options: GoToOptions| undefined, + locale: LocaleInstance & RtlInstance +): GoToInstance { + return { + rtl: locale.isRtl, + options: mergeDeep(genDefaults(), options) as InternalGoToOptions, + }; +} + +export async function scrollTo( + _target: AlpineInstance | HTMLElement | number | string, + _options: GoToOptions, + horizontal?: boolean, + goTo?: GoToInstance, +) { + const property = horizontal ? 'scrollLeft' : 'scrollTop'; + const options = mergeDeep(goTo?.options ?? genDefaults(), _options); + const rtl = goTo?.rtl.value; + const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0; + const container = options.container === 'parent' && target instanceof HTMLElement + ? target.parentElement! + : getContainer(options.container); + const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing]; + + if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`); + + let targetLocation: number; + if (typeof target === 'number') { + targetLocation = getOffset(target, horizontal, rtl); + } else { + targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl); + + if (options.layout) { + const styles = window.getComputedStyle(target); + const layoutOffset = styles.getPropertyValue('--v-layout-top'); + + if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10); + } + } + + targetLocation += options.offset; + targetLocation = clampTarget(container, targetLocation, !!rtl, !!horizontal); + + const startLocation = container[property] ?? 0; + + if (targetLocation === startLocation) return Promise.resolve(targetLocation); + + const startTime = performance.now(); + + return new Promise((resolve) => requestAnimationFrame(function step(currentTime: number) { + const timeElapsed = currentTime - startTime; + const progress = timeElapsed / options.duration; + const location = Math.floor( + startLocation + + (targetLocation - startLocation) * + ease(clamp(progress, 0, 1)) + ); + + container[property] = location; + + // Allow for some jitter if target time has elapsed + if (progress >= 1 && Math.abs(location - container[property]) < 10) { + return resolve(targetLocation); + } else if (progress > 2) { + // The target might not be reachable + consoleWarn('Scroll target is not reachable'); + return resolve(container[property]); + } + + requestAnimationFrame(step); + })); +} + +export function useGoTo(vm: AlpineInstance, _options: GoToOptions = {}) { + const goToInstance = vm.$inject(GoToSymbol); + const { isRtl } = useRtl(vm); + + if (!goToInstance) throw new Error('[Alpinui] Could not find injected goto instance'); + + const goTo = { + ...goToInstance, + // can be set via VLocaleProvider + rtl: computed(() => goToInstance.rtl.value || isRtl.value), + }; + + async function go( + target: AlpineInstance | HTMLElement | string | number, + options?: Partial, + ) { + return scrollTo(target, mergeDeep(_options, options), false, goTo); + } + + go.horizontal = async( + target: AlpineInstance | HTMLElement | string | number, + options?: Partial, + ) => { + return scrollTo(target, mergeDeep(_options, options), true, goTo); + }; + + return go; +} + +/** + * Clamp target value to achieve a smooth scroll animation + * when the value goes outside the scroll container size + */ +function clampTarget( + container: HTMLElement, + value: number, + rtl: boolean, + horizontal: boolean, +) { + const { scrollWidth, scrollHeight } = container; + const [containerWidth, containerHeight] = container === document.scrollingElement + ? [window.innerWidth, window.innerHeight] + : [container.offsetWidth, container.offsetHeight]; + + let min: number; + let max: number; + + if (horizontal) { + if (rtl) { + min = -(scrollWidth - containerWidth); + max = 0; + } else { + min = 0; + max = scrollWidth - containerWidth; + } + } else { + min = 0; + max = scrollHeight + -containerHeight; + } + + return Math.max(Math.min(value, max), min); +} diff --git a/packages/alpinui/src/composables/icons.tsx b/packages/alpinui/src/composables/icons.tsx new file mode 100644 index 0000000..6a8cce2 --- /dev/null +++ b/packages/alpinui/src/composables/icons.tsx @@ -0,0 +1,176 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Icons +import { aliases, mdi } from '@/iconsets/mdi'; + +// Components +import { VClassIcon, VComponentIcon, VSvgIcon } from '@/components/VIcon/icons'; + +// Utilities +import { computed, unref } from 'alpine-reactivity'; +import { consoleWarn } from '@/util/console'; +import { mergeDeep } from '@/util/helpers'; + +// Types +import type { AlpineInstance, Data } from 'alpine-composition'; +import type { Ref } from 'alpine-reactivity'; +import type { InjectionKey, JSXComponent } from 'vue'; +import type { IconValue } from '@/components/VIcon/icons'; + +export { IconValue } from '@/components/VIcon/icons'; + +export interface IconAliases { + [name: string]: IconValue; + complete: IconValue; + cancel: IconValue; + close: IconValue; + delete: IconValue; + clear: IconValue; + success: IconValue; + info: IconValue; + warning: IconValue; + error: IconValue; + prev: IconValue; + next: IconValue; + checkboxOn: IconValue; + checkboxOff: IconValue; + checkboxIndeterminate: IconValue; + delimiter: IconValue; + sortAsc: IconValue; + sortDesc: IconValue; + expand: IconValue; + menu: IconValue; + subgroup: IconValue; + dropdown: IconValue; + radioOn: IconValue; + radioOff: IconValue; + edit: IconValue; + ratingEmpty: IconValue; + ratingFull: IconValue; + ratingHalf: IconValue; + loading: IconValue; + first: IconValue; + last: IconValue; + unfold: IconValue; + file: IconValue; + plus: IconValue; + minus: IconValue; + calendar: IconValue; +} + +export interface IconProps { + tag: string; + icon?: IconValue; + disabled?: Boolean; +} + +type IconComponent = JSXComponent + +export interface IconSet { + component: IconComponent; +} + +export type InternalIconOptions = { + defaultSet: string; + aliases: Partial; + sets: Record; +} + +export type IconOptions = Partial + +type IconInstance = { + component: IconComponent; + icon?: IconValue; +} + +export const IconSymbol: InjectionKey = Symbol.for('alpinui:icons'); + +function genDefaults(): Record { + return { + svg: { + component: VSvgIcon, + }, + class: { + component: VClassIcon, + }, + }; +} + +// Composables +export function createIcons(options?: IconOptions) { + const sets = genDefaults(); + const defaultSet = options?.defaultSet ?? 'mdi'; + + if (defaultSet === 'mdi' && !sets.mdi) { + sets.mdi = mdi; + } + + return mergeDeep({ + defaultSet, + sets, + aliases: { + ...aliases, + /* eslint-disable max-len */ + alpinui: [ + 'M8.2241 14.2009L12 21L22 3H14.4459L8.2241 14.2009Z', + ['M7.26303 12.4733L7.00113 12L2 3H12.5261C12.5261 3 12.5261 3 12.5261 3L7.26303 12.4733Z', 0.6], + ], + 'alpinui-outline': 'svg:M7.26 12.47 12.53 3H2L7.26 12.47ZM14.45 3 8.22 14.2 12 21 22 3H14.45ZM18.6 5 12 16.88 10.51 14.2 15.62 5ZM7.26 8.35 5.4 5H9.13L7.26 8.35Z', + 'alpinui-play': [ + 'm6.376 13.184-4.11-7.192C1.505 4.66 2.467 3 4.003 3h8.532l-.953 1.576-.006.01-.396.677c-.429.732-.214 1.507.194 2.015.404.503 1.092.878 1.869.806a3.72 3.72 0 0 1 1.005.022c.276.053.434.143.523.237.138.146.38.635-.25 2.09-.893 1.63-1.553 1.722-1.847 1.677-.213-.033-.468-.158-.756-.406a4.95 4.95 0 0 1-.8-.927c-.39-.564-1.04-.84-1.66-.846-.625-.006-1.316.27-1.693.921l-.478.826-.911 1.506Z', + ['M9.093 11.552c.046-.079.144-.15.32-.148a.53.53 0 0 1 .43.207c.285.414.636.847 1.046 1.2.405.35.914.662 1.516.754 1.334.205 2.502-.698 3.48-2.495l.014-.028.013-.03c.687-1.574.774-2.852-.005-3.675-.37-.391-.861-.586-1.333-.676a5.243 5.243 0 0 0-1.447-.044c-.173.016-.393-.073-.54-.257-.145-.18-.127-.316-.082-.392l.393-.672L14.287 3h5.71c1.536 0 2.499 1.659 1.737 2.992l-7.997 13.996c-.768 1.344-2.706 1.344-3.473 0l-3.037-5.314 1.377-2.278.004-.006.004-.007.481-.831Z', 0.6], + ], + /* eslint-enable max-len */ + }, + }, options) as InternalIconOptions; +} + +export const useIcon = (vm: AlpineInstance, props: Ref) => { + const icons = vm.$inject(IconSymbol); + + if (!icons) throw new Error('Missing Alpinui Icons provide!'); + + const iconData = computed(() => { + const iconAlias = unref(props); + + if (!iconAlias) return { component: VComponentIcon }; + + let icon: IconValue | undefined = iconAlias; + + if (typeof icon === 'string') { + icon = icon.trim(); + + if (icon.startsWith('$')) { + icon = icons.aliases?.[icon.slice(1)]; + } + } + + if (!icon) consoleWarn(`Could not find aliased icon "${iconAlias}"`); + + if (Array.isArray(icon)) { + return { + component: VSvgIcon, + icon, + }; + } else if (typeof icon !== 'string') { + return { + component: VComponentIcon, + icon, + }; + } + + const iconSetName = Object.keys(icons.sets).find( + (setName) => typeof icon === 'string' && icon.startsWith(`${setName}:`) + ); + + const iconName = iconSetName ? icon.slice(iconSetName.length + 1) : icon; + const iconSet = icons.sets[iconSetName ?? icons.defaultSet]; + + return { + component: iconSet.component, + icon: iconName, + }; + }); + + return { iconData }; +}; diff --git a/packages/alpinui/src/composables/index.ts b/packages/alpinui/src/composables/index.ts new file mode 100644 index 0000000..5481ff9 --- /dev/null +++ b/packages/alpinui/src/composables/index.ts @@ -0,0 +1,21 @@ +/* + * PUBLIC INTERFACES ONLY + * Imports in our code should be to the composable directly, not this file + */ + +export { useDate } from './date'; +export { useDefaults } from './defaults'; +export { useDisplay } from './display'; +export { useGoTo } from './goto'; +// export { useLayout } from './layout'; // TODO +export { useLocale, useRtl } from './locale'; +export { useTheme } from './theme'; + +export type { DateInstance } from './date'; +export type { DefaultsInstance } from './defaults'; +export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from './display'; +// export type { SubmitEventPromise } from './form'; // TODO +export type { GoToInstance } from './goto'; +export type { IconAliases, IconProps, IconSet, IconOptions } from './icons'; +export type { LocaleInstance, LocaleMessages, RtlInstance, LocaleOptions, RtlOptions } from './locale'; +export type { ThemeDefinition, ThemeInstance } from './theme'; diff --git a/packages/alpinui/src/composables/layout.ts b/packages/alpinui/src/composables/layout.ts new file mode 100644 index 0000000..a49138f --- /dev/null +++ b/packages/alpinui/src/composables/layout.ts @@ -0,0 +1,353 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Composables +import { useResizeObserver } from '@/composables/resizeObserver'; + +// Utilities +import { + computed, + reactive, + ref, + shallowRef, +} from 'alpine-reactivity'; +import { getUid } from '@/util/getCurrentInstance'; +import { convertToUnit, eagerComputed, findChildrenWithProvide } from '@/util/helpers'; +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { AlpineInstance, Data } from 'alpine-composition'; +import type { Ref } from 'alpine-reactivity'; +import type { CSSProperties, DeepReadonly, InjectionKey, Prop } from 'vue'; + +export type Position = 'top' | 'left' | 'right' | 'bottom' + +interface Layer { + top: number; + bottom: number; + left: number; + right: number; +} + +interface LayoutItem extends Layer { + id: string; + size: number; + position: Position; +} + +interface LayoutProvide { + register: ( + vm: AlpineInstance, + options: { + id: string; + order: Ref; + position: Ref; + layoutSize: Ref; + elementSize: Ref; + active: Ref; + disableTransitions?: Ref; + absolute: Ref; + } + ) => { + layoutItemStyles: Ref; + layoutItemScrimStyles: Ref; + zIndex: Ref; + }; + unregister: (id: string) => void; + mainRect: Ref; + mainStyles: Ref; + getLayoutItem: (id: string) => LayoutItem | undefined; + items: Ref; + layoutRect: Ref; + rootZIndex: Ref; + layoutIsReady: Promise; +} + +export const AlpinuiLayoutKey: InjectionKey = Symbol.for('alpinui:layout'); +export const AlpinuiLayoutItemKey: InjectionKey<{ id: string }> = Symbol.for('alpinui:layout-item'); + +const ROOT_ZINDEX = 1000; + +export const makeLayoutProps = propsFactory({ + overlaps: { + type: Array, + default: () => ([]), + } as Prop, + fullHeight: Boolean, +}, 'layout'); + +// Composables +export const makeLayoutItemProps = propsFactory({ + name: { + type: String, + }, + order: { + type: [Number, String], + default: 0, + }, + absolute: Boolean, +}, 'layout-item'); + +export function useLayout(vm: AlpineInstance) { + const layout = vm.$inject(AlpinuiLayoutKey); + + if (!layout) throw new Error('[Alpinui] Could not find injected layout'); + + const layoutIsReady = vm.$nextTick(); + + return { + layoutIsReady, + getLayoutItem: layout.getLayoutItem, + mainRect: layout.mainRect, + mainStyles: layout.mainStyles, + }; +} + +export function useLayoutItem( + vm: AlpineInstance, + options: { + id: string | undefined; + order: Ref; + position: Ref; + layoutSize: Ref; + elementSize: Ref; + active: Ref; + disableTransitions?: Ref; + absolute: Ref; + } +) { + const layout = vm.$inject(AlpinuiLayoutKey); + + if (!layout) throw new Error('[Alpinui] Could not find injected layout'); + + const id = options.id ?? `layout-item-${getUid(vm)}`; + + vm.$provide(AlpinuiLayoutItemKey, { id }); + + const isKeptAlive = shallowRef(false); + + // NOTE: KeepAlive not applicable for Alpinui + // onDeactivated(() => isKeptAlive.value = true); + // onActivated(() => isKeptAlive.value = false); + + const layoutIsReady = vm.$nextTick(); + + const { + layoutItemStyles, + layoutItemScrimStyles, + } = layout.register(vm, { + ...options, + active: computed(() => isKeptAlive.value ? false : options.active.value), + id, + }); + + vm.$onBeforeUnmount(() => layout.unregister(id)); + + return { layoutItemStyles, layoutRect: layout.layoutRect, layoutItemScrimStyles, layoutIsReady }; +} + +const generateLayers = ( + layout: string[], + positions: Map>, + layoutSizes: Map>, + activeItems: Map>, +): { id: string, layer: Layer }[] => { + let previousLayer: Layer = { top: 0, left: 0, right: 0, bottom: 0 }; + const layers = [{ id: '', layer: { ...previousLayer } }]; + for (const id of layout) { + const position = positions.get(id); + const amount = layoutSizes.get(id); + const active = activeItems.get(id); + if (!position || !amount || !active) continue; + + const layer = { + ...previousLayer, + [position.value]: parseInt(previousLayer[position.value], 10) + (active.value ? parseInt(amount.value, 10) : 0), + }; + + layers.push({ + id, + layer, + }); + + previousLayer = layer; + } + + return layers; +}; + +export function createLayout( + vm: AlpineInstance, + props: { overlaps?: string[], fullHeight?: boolean }, +) { + const parentLayout = vm.$inject(AlpinuiLayoutKey, null); + const rootZIndex = computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX); + const registered = ref([]); + const positions = reactive(new Map>()); + const layoutSizes = reactive(new Map>()); + const priorities = reactive(new Map>()); + const activeItems = reactive(new Map>()); + const disabledTransitions = reactive(new Map>()); + const { resizeRef, contentRect: layoutRect } = useResizeObserver(vm); + + const layers = eagerComputed(() => { + const uniquePriorities = [...new Set([...priorities.values()].map((p) => p.value))].sort((a, b) => a - b); + const layout = []; + for (const p of uniquePriorities) { + const items = registered.value.filter((id) => priorities.get(id)?.value === p); + layout.push(...items); + } + return generateLayers(layout, positions, layoutSizes, activeItems); + }); + + const transitionsEnabled = computed(() => { + return !Array.from(disabledTransitions.values()).some((ref) => ref.value); + }); + + const mainRect = computed(() => { + return layers.value[layers.value.length - 1].layer; + }); + + const mainStyles = computed(() => { + return { + '--v-layout-left': convertToUnit(mainRect.value.left), + '--v-layout-right': convertToUnit(mainRect.value.right), + '--v-layout-top': convertToUnit(mainRect.value.top), + '--v-layout-bottom': convertToUnit(mainRect.value.bottom), + ...(transitionsEnabled.value ? undefined : { transition: 'none' }), + }; + }); + + const items = eagerComputed(() => { + return layers.value.slice(1).map(({ id }, index) => { + const { layer } = layers.value[index]; + const size = layoutSizes.get(id); + const position = positions.get(id); + + return { + id, + ...layer, + size: Number(size!.value), + position: position!.value, + }; + }); + }); + + const getLayoutItem = (id: string) => { + return items.value.find((item) => item.id === id); + }; + + const layoutIsReady = vm.$nextTick(); + + const rootVm = vm; + + rootVm.$provide(AlpinuiLayoutKey, { + register: ( + vm, + { + id, + order, + position, + layoutSize, + elementSize, + active, + disableTransitions, + absolute, + } + ) => { + priorities.set(id, order); + positions.set(id, position); + layoutSizes.set(id, layoutSize); + activeItems.set(id, active); + disableTransitions && disabledTransitions.set(id, disableTransitions); + + const instances = findChildrenWithProvide(AlpinuiLayoutItemKey, rootVm?.vnode); + const instanceIndex = instances.indexOf(vm); + + if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id); + else registered.value.push(id); + + const index = computed(() => items.value.findIndex((i) => i.id === id)); + const zIndex = computed(() => rootZIndex.value + (layers.value.length * 2) - (index.value * 2)); + + const layoutItemStyles = computed(() => { + const isHorizontal = position.value === 'left' || position.value === 'right'; + const isOppositeHorizontal = position.value === 'right'; + const isOppositeVertical = position.value === 'bottom'; + const size = elementSize.value ?? layoutSize.value; + const unit = size === 0 ? '%' : 'px'; + + const styles = { + [position.value]: 0, + zIndex: zIndex.value, + transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -(size === 0 ? 100 : size)) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}${unit})`, + position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? 'absolute' : 'fixed', + ...(transitionsEnabled.value ? undefined : { transition: 'none' }), + } as const; + + if (index.value < 0) throw new Error(`Layout item "${id}" is missing`); + + const item = items.value[index.value]; + + if (!item) throw new Error(`[Alpinui] Could not find layout item "${id}"`); + + return { + ...styles, + height: + isHorizontal ? `calc(100% - ${item.top}px - ${item.bottom}px)` + : elementSize.value ? `${elementSize.value}px` + : undefined, + left: isOppositeHorizontal ? undefined : `${item.left}px`, + right: isOppositeHorizontal ? `${item.right}px` : undefined, + top: position.value !== 'bottom' ? `${item.top}px` : undefined, + bottom: position.value !== 'top' ? `${item.bottom}px` : undefined, + width: + !isHorizontal ? `calc(100% - ${item.left}px - ${item.right}px)` + : elementSize.value ? `${elementSize.value}px` + : undefined, + }; + }); + + const layoutItemScrimStyles = computed(() => ({ + zIndex: zIndex.value - 1, + })); + + return { layoutItemStyles, layoutItemScrimStyles, zIndex }; + }, + unregister: (id: string) => { + priorities.delete(id); + positions.delete(id); + layoutSizes.delete(id); + activeItems.delete(id); + disabledTransitions.delete(id); + registered.value = registered.value.filter((v) => v !== id); + }, + mainRect, + mainStyles, + getLayoutItem, + items, + layoutRect, + rootZIndex, + layoutIsReady, + }); + + const layoutClasses = computed(() => [ + 'v-layout', + { 'v-layout--full-height': props.fullHeight }, + ]); + + const layoutStyles = computed(() => ({ + zIndex: parentLayout ? rootZIndex.value : undefined, + position: parentLayout ? 'relative' as const : undefined, + overflow: parentLayout ? 'hidden' : undefined, + })); + + return { + layoutClasses, + layoutStyles, + getLayoutItem, + items, + layoutRect, + layoutIsReady, + layoutRef: resizeRef, + }; +} diff --git a/packages/alpinui/src/composables/locale.ts b/packages/alpinui/src/composables/locale.ts new file mode 100644 index 0000000..e5f2038 --- /dev/null +++ b/packages/alpinui/src/composables/locale.ts @@ -0,0 +1,168 @@ +// Utilities +import { computed, ref } from 'alpine-reactivity'; +import { createAlpinuiAdapter } from '@/locale/adapters/alpinui'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { ComputedRef, Ref } from 'alpine-reactivity'; +import type { InjectionKey } from 'vue'; + +export interface LocaleMessages { + [key: string]: LocaleMessages | string; +} + +export interface LocaleOptions { + messages?: LocaleMessages; + locale?: string; + fallback?: string; + adapter?: LocaleInstance; +} + +export interface LocaleInstance { + name: string; + messages: Ref; + current: Ref; + fallback: Ref; + t: (key: string, ...params: unknown[]) => string; + n: (value: number) => string; + provide: (vm: AlpineInstance, props: LocaleOptions) => LocaleInstance; +} + +export const LocaleSymbol: InjectionKey = Symbol.for('alpinui:locale'); + +function isLocaleInstance(obj: any): obj is LocaleInstance { + return obj.name != null; +} + +export function createLocale(options?: LocaleOptions & RtlOptions) { + const i18n = options?.adapter && isLocaleInstance(options?.adapter) + ? options?.adapter + : createAlpinuiAdapter(options); + const rtl = createRtl(i18n, options); + + return { ...i18n, ...rtl }; +} + +export function useLocale(vm: AlpineInstance) { + const locale = vm.$inject(LocaleSymbol); + + if (!locale) throw new Error('[Alpinui] Could not find injected locale instance'); + + return locale; +} + +export function provideLocale( + vm: AlpineInstance, + props: LocaleOptions & RtlProps, +) { + const locale = vm.$inject(LocaleSymbol); + + if (!locale) throw new Error('[Alpinui] Could not find injected locale instance'); + + const i18n = locale.provide(vm, props); + const rtl = provideRtl(i18n, locale.rtl, props); + + const data = { ...i18n, ...rtl }; + + vm.$provide(LocaleSymbol, data); + + return data; +} + +// RTL + +export interface RtlOptions { + rtl?: Record; +} + +export interface RtlProps { + rtl?: boolean; +} + +export interface RtlInstance { + isRtl: ComputedRef; + rtl: Ref>; + rtlClasses: ComputedRef; +} + +export const RtlSymbol: InjectionKey = Symbol.for('alpinui:rtl'); + +function genDefaults() { + return { + af: false, + ar: true, + bg: false, + ca: false, + ckb: false, + cs: false, + de: false, + el: false, + en: false, + es: false, + et: false, + fa: true, + fi: false, + fr: false, + hr: false, + hu: false, + he: true, + id: false, + it: false, + ja: false, + km: false, + ko: false, + lv: false, + lt: false, + nl: false, + no: false, + pl: false, + pt: false, + ro: false, + ru: false, + sk: false, + sl: false, + srCyrl: false, + srLatn: false, + sv: false, + th: false, + tr: false, + az: false, + uk: false, + vi: false, + zhHans: false, + zhHant: false, + }; +} + +export function createRtl(i18n: LocaleInstance, options?: RtlOptions): RtlInstance { + const rtl = ref>(options?.rtl ?? genDefaults()); + const isRtl = computed(() => rtl.value[i18n.current.value] ?? false); + + return { + isRtl, + rtl, + rtlClasses: computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`), + }; +} + +export function provideRtl( + locale: LocaleInstance, + rtl: RtlInstance['rtl'], + props: RtlProps, +): RtlInstance { + const isRtl = computed(() => props.rtl ?? rtl.value[locale.current.value] ?? false); + + return { + isRtl, + rtl, + rtlClasses: computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`), + }; +} + +export function useRtl(vm: AlpineInstance) { + const locale = vm.$inject(LocaleSymbol); + + if (!locale) throw new Error('[Alpinui] Could not find injected rtl instance'); + + return { isRtl: locale.isRtl, rtlClasses: locale.rtlClasses }; +} diff --git a/packages/alpinui/src/composables/proxiedModel.ts b/packages/alpinui/src/composables/proxiedModel.ts new file mode 100644 index 0000000..793b6eb --- /dev/null +++ b/packages/alpinui/src/composables/proxiedModel.ts @@ -0,0 +1,77 @@ +// Utilities +import { computed, ref, toRaw, watch, writableComputed } from 'alpine-reactivity'; +import { toKebabCase } from '@/util/helpers'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { Ref } from 'alpine-reactivity'; +import type { EventProp } from '@/util/helpers'; + +type InnerVal = T extends any[] ? Readonly : T + +// TODO +// TODO +// TODO - HAVE A LOOK AT THIS AGAIN! BECAUSE WE WILL NEED TO EXPLICTLY +// HANDLE EVENTS AS CALLBACKS FOR THIS TO WORK! +// TODO +// TODO + +// Composables +export function useProxiedModel< + Props extends object & { [key in Prop as `onUpdate:${Prop}`]: EventProp | undefined }, + Prop extends Extract, + Inner = Props[Prop], +>( + vm: AlpineInstance, + props: Props, + prop: Prop, + defaultValue?: Props[Prop], + transformIn: (value?: Props[Prop]) => Inner = (v: any) => v, + transformOut: (value: Inner) => Props[Prop] = (v: any) => v, +) { + const internal = ref(props[prop] !== undefined ? props[prop] : defaultValue) as Ref; + const kebabProp = toKebabCase(prop); + const checkKebab = kebabProp !== prop; + + const isControlled = checkKebab + ? computed(() => { + void props[prop]; + return !!( + (vm.$props?.hasOwnProperty(prop) || vm.$props?.hasOwnProperty(kebabProp)) && + (vm.$props?.hasOwnProperty(`onUpdate:${prop}`) || vm.$props?.hasOwnProperty(`onUpdate:${kebabProp}`)) + ); + }) + : computed(() => { + void props[prop]; + return !!(vm.$props?.hasOwnProperty(prop) && vm.$props?.hasOwnProperty(`onUpdate:${prop}`)); + }); + + watch([() => props[prop], isControlled] as const, ([propVal, newIsControlled]) => { + if (newIsControlled) return; + + internal.value = propVal; + }); + + const model = writableComputed({ + get() { + const externalValue = props[prop]; + return transformIn(isControlled.value ? externalValue : internal.value); + }, + set(internalValue) { + const newValue = transformOut(internalValue); + const value = toRaw(isControlled.value ? props[prop] : internal.value); + + if (value === newValue || transformIn(value) === internalValue) { + return; + } + internal.value = newValue; + vm?.$dispatch(`update:${prop}`, newValue); + }, + }) as any as Ref> & { readonly externalValue: Props[Prop] }; + + Object.defineProperty(model, 'externalValue', { + get: () => isControlled.value ? props[prop] : internal.value, + }); + + return model; +} diff --git a/packages/alpinui/src/composables/resizeObserver.ts b/packages/alpinui/src/composables/resizeObserver.ts new file mode 100644 index 0000000..23b4eb6 --- /dev/null +++ b/packages/alpinui/src/composables/resizeObserver.ts @@ -0,0 +1,56 @@ +// Utilities +import { readonly, ref, watch } from 'alpine-reactivity'; +import { IN_BROWSER } from '@/util/globals'; +import { templateRef } from '@/util/helpers'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { DeepReadonly, Ref } from 'alpine-reactivity'; +import type { TemplateRef } from '@/util/helpers'; + +interface ResizeState { + resizeRef: TemplateRef; + contentRect: DeepReadonly>; +} + +export function useResizeObserver( + vm: AlpineInstance, + callback?: ResizeObserverCallback, + box: 'content' | 'border' = 'content', +): ResizeState { + const resizeRef = templateRef(); + const contentRect = ref(); + + if (IN_BROWSER) { + const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => { + callback?.(entries, observer); + + if (!entries.length) return; + + if (box === 'content') { + contentRect.value = entries[0].contentRect; + } else { + contentRect.value = entries[0].target.getBoundingClientRect(); + } + }); + + vm.$onBeforeUnmount(() => { + observer.disconnect(); + }); + + // TODO: REMOVED "flush: post" option + watch(() => resizeRef.el, (newValue, oldValue) => { + if (oldValue) { + observer.unobserve(oldValue); + contentRect.value = undefined; + } + + if (newValue) observer.observe(newValue); + }); + } + + return { + resizeRef, + contentRect: readonly(contentRect), + }; +} diff --git a/packages/alpinui/src/composables/size.ts b/packages/alpinui/src/composables/size.ts new file mode 100644 index 0000000..c888b93 --- /dev/null +++ b/packages/alpinui/src/composables/size.ts @@ -0,0 +1,42 @@ +// Utilities +import { getCurrentInstanceName } from '@/util/getCurrentInstance'; +import { convertToUnit, destructComputed, includes } from '@/util/helpers'; +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; + +// Types +const predefinedSizes = ['x-small', 'small', 'default', 'large', 'x-large']; + +export interface SizeProps { + size?: string | number; +} + +// Composables +export const makeSizeProps = propsFactory({ + size: { + type: [String, Number], + default: 'default', + }, +}, 'size'); + +export function useSize( + vm: AlpineInstance, + props: SizeProps, + name = getCurrentInstanceName(vm), +) { + return destructComputed(() => { + let sizeClasses; + let sizeStyles; + if (includes(predefinedSizes, props.size)) { + sizeClasses = `${name}--size-${props.size}`; + } else if (props.size) { + sizeStyles = { + width: convertToUnit(props.size), + height: convertToUnit(props.size), + }; + } + return { sizeClasses, sizeStyles }; + }); +} diff --git a/packages/alpinui/src/composables/tag.ts b/packages/alpinui/src/composables/tag.ts new file mode 100644 index 0000000..166cb02 --- /dev/null +++ b/packages/alpinui/src/composables/tag.ts @@ -0,0 +1,15 @@ +// Utilities +import { propsFactory } from '@/util/propsFactory'; + +// Types +export interface TagProps { + tag: string; +} + +// Composables +export const makeTagProps = propsFactory({ + tag: { + type: String, + default: 'div', + }, +}, 'tag'); diff --git a/packages/alpinui/src/composables/theme.ts b/packages/alpinui/src/composables/theme.ts new file mode 100644 index 0000000..6ff1c1b --- /dev/null +++ b/packages/alpinui/src/composables/theme.ts @@ -0,0 +1,432 @@ +// Utilities +import { computed, ref, watch, watchEffect } from 'alpine-reactivity'; +import { + darken, + getForeground, + getLuma, + lighten, + parseColor, + RGBtoHex, +} from '@/util/colorUtils'; +import { IN_BROWSER } from '@/util/globals'; +import { createRange, mergeDeep } from '@/util/helpers'; +import { propsFactory } from '@/util/propsFactory'; + +// Types +import type { Unhead } from '@unhead/schema'; +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { ComputedRef, Ref } from 'alpine-reactivity'; +import type { DeepReadonly, InjectionKey } from 'vue'; + +type DeepPartial = T extends object ? { [P in keyof T]?: DeepPartial } : T + +export type ThemeOptions = false | { + cspNonce?: string; + defaultTheme?: string; + variations?: false | VariationsOptions; + themes?: Record; +} +export type ThemeDefinition = DeepPartial + +interface InternalThemeOptions { + cspNonce?: string; + isDisabled: boolean; + defaultTheme: string; + variations: false | VariationsOptions; + themes: Record; +} + +interface VariationsOptions { + colors: string[]; + lighten: number; + darken: number; +} + +interface InternalThemeDefinition { + dark: boolean; + colors: Colors; + variables: Record; +} + +export interface Colors extends BaseColors, OnColors { + [key: string]: string; +} + +interface BaseColors { + background: string; + surface: string; + primary: string; + secondary: string; + success: string; + warning: string; + error: string; + info: string; +} + +interface OnColors { + 'on-background': string; + 'on-surface': string; + 'on-primary': string; + 'on-secondary': string; + 'on-success': string; + 'on-warning': string; + 'on-error': string; + 'on-info': string; +} + +export interface ThemeInstance { + readonly isDisabled: boolean; + readonly themes: Ref>; + + readonly name: ComputedRef; + readonly current: DeepReadonly>; + readonly computedThemes: DeepReadonly>>; + + readonly themeClasses: ComputedRef>; + readonly styles: ComputedRef; + + readonly global: { + readonly name: ComputedRef; + readonly current: DeepReadonly>; + }; +} + +export const ThemeSymbol: InjectionKey = Symbol.for('alpinui:theme'); + +export const makeThemeProps = propsFactory({ + theme: String, +}, 'theme'); + +function genDefaults() { + return { + defaultTheme: 'light', + variations: { colors: [], lighten: 0, darken: 0 }, + themes: { + light: { + dark: false, + colors: { + background: '#FFFFFF', + surface: '#FFFFFF', + 'surface-bright': '#FFFFFF', + 'surface-light': '#EEEEEE', + 'surface-variant': '#424242', + 'on-surface-variant': '#EEEEEE', + primary: '#1867C0', + 'primary-darken-1': '#1F5592', + secondary: '#48A9A6', + 'secondary-darken-1': '#018786', + error: '#B00020', + info: '#2196F3', + success: '#4CAF50', + warning: '#FB8C00', + }, + variables: { + 'border-color': '#000000', + 'border-opacity': 0.12, + 'high-emphasis-opacity': 0.87, + 'medium-emphasis-opacity': 0.60, + 'disabled-opacity': 0.38, + 'idle-opacity': 0.04, + 'hover-opacity': 0.04, + 'focus-opacity': 0.12, + 'selected-opacity': 0.08, + 'activated-opacity': 0.12, + 'pressed-opacity': 0.12, + 'dragged-opacity': 0.08, + 'theme-kbd': '#212529', + 'theme-on-kbd': '#FFFFFF', + 'theme-code': '#F5F5F5', + 'theme-on-code': '#000000', + }, + }, + dark: { + dark: true, + colors: { + background: '#121212', + surface: '#212121', + 'surface-bright': '#ccbfd6', + 'surface-light': '#424242', + 'surface-variant': '#a3a3a3', + 'on-surface-variant': '#424242', + primary: '#2196F3', + 'primary-darken-1': '#277CC1', + secondary: '#54B6B2', + 'secondary-darken-1': '#48A9A6', + error: '#CF6679', + info: '#2196F3', + success: '#4CAF50', + warning: '#FB8C00', + }, + variables: { + 'border-color': '#FFFFFF', + 'border-opacity': 0.12, + 'high-emphasis-opacity': 1, + 'medium-emphasis-opacity': 0.70, + 'disabled-opacity': 0.50, + 'idle-opacity': 0.10, + 'hover-opacity': 0.04, + 'focus-opacity': 0.12, + 'selected-opacity': 0.08, + 'activated-opacity': 0.12, + 'pressed-opacity': 0.16, + 'dragged-opacity': 0.08, + 'theme-kbd': '#212529', + 'theme-on-kbd': '#FFFFFF', + 'theme-code': '#343434', + 'theme-on-code': '#CCCCCC', + }, + }, + }, + }; +} + +function parseThemeOptions(options: ThemeOptions = genDefaults()): InternalThemeOptions { + const defaults = genDefaults(); + + if (!options) return { ...defaults, isDisabled: true } as any; + + const themes: Record = {}; + for (const [key, theme] of Object.entries(options.themes ?? {})) { + const defaultTheme = theme.dark || key === 'dark' + ? defaults.themes?.dark + : defaults.themes?.light; + themes[key] = mergeDeep(defaultTheme, theme) as InternalThemeDefinition; + } + + return mergeDeep( + defaults, + { ...options, themes }, + ) as InternalThemeOptions; +} + +// Composables +export function createTheme(options?: ThemeOptions): ThemeInstance & { install: (head?: Unhead) => void } { + const parsedOptions = parseThemeOptions(options); + const name = ref(parsedOptions.defaultTheme); + const themes = ref(parsedOptions.themes); + + const computedThemes = computed(() => { + const acc: Record = {}; + for (const [name, original] of Object.entries(themes.value)) { + const theme: InternalThemeDefinition = acc[name] = { + ...original, + colors: { + ...original.colors, + }, + }; + + if (parsedOptions.variations) { + for (const name of parsedOptions.variations.colors) { + const color = theme.colors[name]; + + if (!color) continue; + + for (const variation of (['lighten', 'darken'] as const)) { + const fn = variation === 'lighten' ? lighten : darken; + for (const amount of createRange(parsedOptions.variations[variation], 1)) { + theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount)); + } + } + } + } + + for (const color of Object.keys(theme.colors)) { + if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue; + + const onColor = `on-${color}` as keyof OnColors; + const colorVal = parseColor(theme.colors[color]!); + + theme.colors[onColor] = getForeground(colorVal); + } + } + + return acc; + }); + const current = computed(() => computedThemes.value[name.value]); + + const styles = computed(() => { + const lines: string[] = []; + + if (current.value?.dark) { + createCssClass(lines, ':root', ['color-scheme: dark']); + } + + createCssClass(lines, ':root', genCssVariables(current.value)); + + for (const [themeName, theme] of Object.entries(computedThemes.value)) { + createCssClass(lines, `.v-theme--${themeName}`, [ + `color-scheme: ${theme.dark ? 'dark' : 'normal'}`, + ...genCssVariables(theme), + ]); + } + + const bgLines: string[] = []; + const fgLines: string[] = []; + + const colors = new Set(Object.values(computedThemes.value).flatMap((theme) => Object.keys(theme.colors))); + for (const key of colors) { + if (/^on-[a-z]/.test(key)) { + createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`]); + } else { + createCssClass(bgLines, `.bg-${key}`, [ + `--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, + `background-color: rgb(var(--v-theme-${key})) !important`, + `color: rgb(var(--v-theme-on-${key})) !important`, + ]); + createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`]); + createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`]); + } + } + + lines.push(...bgLines, ...fgLines); + + return lines.map((str, i) => i === 0 ? str : ` ${str}`).join(''); + }); + + function getHead() { + return { + style: [{ + children: styles.value, + id: 'alpinui-theme-stylesheet', + nonce: parsedOptions.cspNonce || false as never, + }], + }; + } + + function install(head?: Unhead) { + if (parsedOptions.isDisabled) return; + + // TODO - Check if this works? + if (head) { + if (head.push) { + const entry = head.push(getHead()); + if (IN_BROWSER) { + watch(styles, () => { entry.patch(getHead()); }); + } + } else { + if (IN_BROWSER) { + (head as any).addHeadObjs(getHead()); + watchEffect(() => (head as any).updateDOM()); + } else { + (head as any).addHeadObjs(getHead()); + } + } + } else { + let styleEl = IN_BROWSER + ? document.getElementById('alpinui-theme-stylesheet') + : null; + + if (IN_BROWSER) { + watch(styles, updateStyles, { immediate: true }); + } else { + updateStyles(); + } + + function updateStyles() { + if (typeof document !== 'undefined' && !styleEl) { + const el = document.createElement('style'); + el.type = 'text/css'; + el.id = 'alpinui-theme-stylesheet'; + if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce); + + styleEl = el; + document.head.appendChild(styleEl); + } + + if (styleEl) styleEl.innerHTML = styles.value; + } + } + } + + const themeClasses = computed(() => ({ + [`v-theme--${name.value}`]: !parsedOptions.isDisabled, + })); + + const nameReadonly = computed(() => name.value); + + return { + install, + isDisabled: parsedOptions.isDisabled, + name: nameReadonly, + themes, + current, + computedThemes, + themeClasses, + styles, + global: { + name: nameReadonly, + current, + }, + }; +} + +export function provideTheme< +T extends Data, +P extends Data, +E extends EmitsOptions, +>( + vm: AlpineInstance, + props: { theme?: string }, +) { + const theme = vm.$inject(ThemeSymbol, null); + + if (!theme) throw new Error('Could not find Alpinui theme injection'); + + const name = computed(() => { + return props.theme ?? theme.name.value; + }); + const current = computed(() => theme.themes.value[name.value]); + + const themeClasses = computed(() => ({ + [`v-theme--${name.value}`]: !theme.isDisabled, + })); + + const newTheme: ThemeInstance = { + ...theme, + name, + current, + themeClasses, + }; + + vm.$provide(ThemeSymbol, newTheme); + + return newTheme; +} + +export function useTheme(vm: AlpineInstance) { + const theme = vm.$inject(ThemeSymbol, null); + + if (!theme) throw new Error('Could not find Alpinui theme injection'); + + return theme; +} + +function createCssClass(lines: string[], selector: string, content: string[]) { + lines.push( + `${selector} {\n`, + ...content.map((line) => ` ${line};\n`), + '}\n', + ); +} + +function genCssVariables(theme: InternalThemeDefinition) { + const lightOverlay = theme.dark ? 2 : 1; + const darkOverlay = theme.dark ? 1 : 2; + + const variables: string[] = []; + for (const [key, value] of Object.entries(theme.colors)) { + const rgb = parseColor(value); + variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`); + if (!key.startsWith('on-')) { + variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`); + } + } + + for (const [key, value] of Object.entries(theme.variables)) { + const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined; + const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined; + variables.push(`--v-${key}: ${rgb ?? value}`); + } + + return variables; +} diff --git a/packages/alpinui/src/composables/validation.ts b/packages/alpinui/src/composables/validation.ts new file mode 100644 index 0000000..1107ba6 --- /dev/null +++ b/packages/alpinui/src/composables/validation.ts @@ -0,0 +1,233 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Composables +import { makeFocusProps } from '@/composables/focus'; +import { useForm } from '@/composables/form'; +import { useProxiedModel } from '@/composables/proxiedModel'; +import { useToggleScope } from '@/composables/toggleScope'; + +// Utilities +import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue'; +import { getCurrentInstance, getCurrentInstanceName, getUid, propsFactory, wrapInArray } from '@/util'; + +// Types +import type { PropType } from 'vue'; +import type { EventProp, MaybeRef } from '@/util/helpers'; + +export type ValidationResult = string | boolean +export type ValidationRule = + | ValidationResult + | PromiseLike + | ((value: any) => ValidationResult) + | ((value: any) => PromiseLike) + +type ValidateOnValue = 'blur' | 'input' | 'submit' + +export interface ValidationProps { + disabled: boolean | null; + error: boolean; + errorMessages: string | readonly string[] | null; + focused: boolean; + maxErrors: string | number; + name: string | undefined; + label: string | undefined; + readonly: boolean | null; + rules: readonly ValidationRule[]; + modelValue: any; + 'onUpdate:modelValue': EventProp | undefined; + validateOn?: ValidateOnValue | `${ValidateOnValue} lazy` | `lazy ${ValidateOnValue}` | 'lazy'; + validationValue: any; +} + +export const makeValidationProps = propsFactory({ + disabled: { + type: Boolean as PropType, + default: null, + }, + error: Boolean, + errorMessages: { + type: [Array, String] as PropType, + default: () => ([]), + }, + maxErrors: { + type: [Number, String], + default: 1, + }, + name: String, + label: String, + readonly: { + type: Boolean as PropType, + default: null, + }, + rules: { + type: Array as PropType, + default: () => ([]), + }, + modelValue: null, + validateOn: String as PropType, + validationValue: null, + + ...makeFocusProps(), +}, 'validation'); + +export function useValidation( + props: ValidationProps, + name = getCurrentInstanceName(), + id: MaybeRef = getUid(), +) { + const model = useProxiedModel(props, 'modelValue'); + const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue); + const form = useForm(); + const internalErrorMessages = ref([]); + const isPristine = shallowRef(true); + const isDirty = computed(() => !!( + wrapInArray(model.value === '' ? null : model.value).length || + wrapInArray(validationModel.value === '' ? null : validationModel.value).length + )); + const isDisabled = computed(() => !!(props.disabled ?? form?.isDisabled.value)); + const isReadonly = computed(() => !!(props.readonly ?? form?.isReadonly.value)); + const errorMessages = computed(() => { + return props.errorMessages?.length + ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors)) + : internalErrorMessages.value; + }); + const validateOn = computed(() => { + let value = (props.validateOn ?? form?.validateOn.value) || 'input'; + if (value === 'lazy') value = 'input lazy'; + const set = new Set(value?.split(' ') ?? []); + + return { + blur: set.has('blur') || set.has('input'), + input: set.has('input'), + submit: set.has('submit'), + lazy: set.has('lazy'), + }; + }); + const isValid = computed(() => { + if (props.error || props.errorMessages?.length) return false; + if (!props.rules.length) return true; + if (isPristine.value) { + return internalErrorMessages.value.length || validateOn.value.lazy ? null : true; + } else { + return !internalErrorMessages.value.length; + } + }); + const isValidating = shallowRef(false); + const validationClasses = computed(() => { + return { + [`${name}--error`]: isValid.value === false, + [`${name}--dirty`]: isDirty.value, + [`${name}--disabled`]: isDisabled.value, + [`${name}--readonly`]: isReadonly.value, + }; + }); + + const vm = getCurrentInstance('validation'); + const uid = computed(() => props.name ?? unref(id)); + + onBeforeMount(() => { + form?.register({ + id: uid.value, + vm, + validate, + reset, + resetValidation, + }); + }); + + onBeforeUnmount(() => { + form?.unregister(uid.value); + }); + + onMounted(async() => { + if (!validateOn.value.lazy) { + await validate(true); + } + form?.update(uid.value, isValid.value, errorMessages.value); + }); + + useToggleScope(() => validateOn.value.input, () => { + watch(validationModel, () => { + if (validationModel.value != null) { + validate(); + } else if (props.focused) { + const unwatch = watch(() => props.focused, (val) => { + if (!val) validate(); + + unwatch(); + }); + } + }); + }); + + useToggleScope(() => validateOn.value.blur, () => { + watch(() => props.focused, (val) => { + if (!val) validate(); + }); + }); + + watch([isValid, errorMessages], () => { + form?.update(uid.value, isValid.value, errorMessages.value); + }); + + async function reset() { + model.value = null; + await nextTick(); + await resetValidation(); + } + + async function resetValidation() { + isPristine.value = true; + if (!validateOn.value.lazy) { + await validate(true); + } else { + internalErrorMessages.value = []; + } + } + + async function validate(silent = false) { + const results = []; + + isValidating.value = true; + + for (const rule of props.rules) { + if (results.length >= +(props.maxErrors ?? 1)) { + break; + } + + const handler = typeof rule === 'function' ? rule : () => rule; + const result = await handler(validationModel.value); + + if (result === true) continue; + + if (result !== false && typeof result !== 'string') { + // eslint-disable-next-line no-console + console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`); + + continue; + } + + results.push(result || ''); + } + + internalErrorMessages.value = results; + isValidating.value = false; + isPristine.value = silent; + + return internalErrorMessages.value; + } + + return { + errorMessages, + isDirty, + isDisabled, + isReadonly, + isPristine, + isValid, + isValidating, + reset, + resetValidation, + validate, + validationClasses, + }; +} diff --git a/packages/alpinui/src/entry-bundler.ts b/packages/alpinui/src/entry-bundler.ts new file mode 100644 index 0000000..de89ee9 --- /dev/null +++ b/packages/alpinui/src/entry-bundler.ts @@ -0,0 +1,70 @@ +/* eslint-disable local-rules/sort-imports */ + +// Styles +import './styles/main.sass'; + +// Components +import * as blueprints from './blueprints'; +import * as components from './components'; +import { createAlpinui as _createAlpinui } from './framework'; + +// Types +import type { CreateAlpinuiOptions } from './framework'; + +// TODO +// TODO +// TODO - CHECK IF THESE ARE SET TO GLOBAL_THIS IF IMPORTED VIA CDN +// TODO -> SHOULD BE SO - WORKS FOR VUETIFY AND VUE +// TODO + +export const createAlpinui = (options: CreateAlpinuiOptions = {}) => { + return _createAlpinui({ components, ...options }); +}; + +export const version = __VUETIFY_VERSION__; +createAlpinui.version = version; + +export { blueprints, components }; +export * from './composables'; + +// TODO +// TODO +// TODO - DOCUMENT USAGE +// TODO +// TODO + +// +// ```sh +// npm install alpinui +// ``` +// +// ```ts +// import Alpine from 'alpinejs' +// import { createAlpinui } from 'alpinui'; +// +// createAlpinui({ +// components, +// aliases, +// }).install(Alpine) +// +// window.Alpine = Alpine +// window.Alpine.start() +// ``` + +// AND IF USING CDN: +// +// ```html +// +// +// ``` +// +// ```ts +// const { createAlpinui } = Alpinui; +// +// document.addEventListener('alpine:init', () => { +// createAlpinui({ +// // components, +// // aliases, +// }).install(window.Alpine) +// }); +// ``` diff --git a/packages/alpinui/src/framework.ts b/packages/alpinui/src/framework.ts new file mode 100644 index 0000000..181e08f --- /dev/null +++ b/packages/alpinui/src/framework.ts @@ -0,0 +1,74 @@ +// Utilities +import { createAlpineComposition, defineComponent } from 'alpine-composition'; +import * as _components from './components'; +import { getUid } from '@/util/getCurrentInstance'; + +// Types +import type { Data, EmitsOptions, PluginFn } from 'alpine-composition'; +import type _Alpine from 'alpinejs'; +import type { Magics } from 'alpinejs'; + +export * from './composables'; +export type { DateOptions, DateInstance, DateModule } from '@/composables/date'; + +export interface CreateAlpinuiOptions { + aliases?: Record; + components?: Record; + plugins?: PluginFn[]; +} + +declare module 'alpine-composition' { + export interface AlpineInstance extends Magics

{ + $aliasName?: string; + } + + export interface ComponentOptions { + aliasName?: string; + } +} + +// Alpinui adds `$aliasName` to the Alpine components +const aliasNamePlugin: PluginFn = (vm, { options }) => { + const { aliasName } = options; + + Object.defineProperty(vm, '$aliasName', { + get() { + return aliasName; + }, + }); +}; + +/** Register Alpinui components with Alpine */ +export function createAlpinui(options: CreateAlpinuiOptions = {}) { + const { aliases = {}, components = _components as any } = options; + + const { registerComponent } = createAlpineComposition({ + plugins: [aliasNamePlugin, ...options?.plugins ?? []], + }); + + // Allow users to provide their own instance of Alpine via install() + const install = (Alpine: typeof _Alpine) => { + for (const key in components) { + registerComponent(Alpine, components[key]); + } + + for (const key in aliases) { + const aliasComp = defineComponent({ + ...aliases[key], + name: key, + aliasName: aliases[key].name, + }); + registerComponent(Alpine, aliasComp); + } + + getUid.reset(); + }; + + return { + install, + registerComponent, + }; +} + +export const version = __VUETIFY_VERSION__; +createAlpinui.version = version; diff --git a/packages/alpinui/src/globals.d.ts b/packages/alpinui/src/globals.d.ts new file mode 100644 index 0000000..8068100 --- /dev/null +++ b/packages/alpinui/src/globals.d.ts @@ -0,0 +1,168 @@ +import 'vue/jsx' + +// Types +import type { Events, VNode } from 'vue' +import type { TouchStoredHandlers } from './directives/touch' + +declare global { + interface HTMLCollection { + [Symbol.iterator] (): IterableIterator + } + + interface Element { + _clickOutside?: Record & { lastMousedownWasOutside: boolean } + _onResize?: Record void + options: AddEventListenerOptions + } | undefined> + _ripple?: { + enabled?: boolean + centered?: boolean + class?: string + circle?: boolean + touched?: boolean + isTouch?: boolean + showTimer?: number + showTimerCommit?: (() => void) | null + } + _observe?: Record + _mutate?: Record + _onScroll?: Record + _touchHandlers?: { + [_uid: number]: TouchStoredHandlers + } + _transitionInitialStyles?: { + position: string + top: string + left: string + width: string + height: string + } + + getElementsByClassName(classNames: string): NodeListOf + } + + interface WheelEvent { + path?: EventTarget[] + } + + interface MouseEvent { + sourceCapabilities?: { firesTouchEvents: boolean } + } + + interface ColorSelectionOptions { + signal?: AbortSignal + } + + interface ColorSelectionResult { + sRGBHex: string + } + + interface EyeDropper { + open: (options?: ColorSelectionOptions) => Promise + } + + interface EyeDropperConstructor { + new (): EyeDropper + } + + interface Window { + EyeDropper: EyeDropperConstructor + } + + function parseInt(s: string | number, radix?: number): number + function parseFloat(string: string | number): number + + export const __VUETIFY_VERSION__: string + export const __REQUIRED_VUE__: string + export const __VUE_OPTIONS_API__: boolean | undefined + + namespace JSX { + interface Element extends VNode {} + interface IntrinsicAttributes { + [name: string]: any + } + } +} + +declare module '@vue/runtime-core' { + export interface ComponentCustomProperties { + _: ComponentInternalInstance + } + + export interface ComponentInternalInstance { + provides: Record + setupState: any + } + + export interface FunctionalComponent { + aliasName?: string + } + + // eslint-disable-next-line max-len + export interface ComponentOptionsBase { + aliasName?: string + } + + export interface App { + $nuxt?: { hook: (name: string, fn: () => void) => void } + } + + export interface VNode { + ctx: ComponentInternalInstance | null + ssContent: VNode | null + } +} + +declare module '@vue/runtime-dom' { + type UnionToIntersection = + (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never + + type Combine = T | { + [K in T]: { + [L in Exclude]: `${K}${Exclude}` | `${K}${L}${Exclude}` + }[Exclude] + }[T] + + type Modifiers = Combine<'Passive' | 'Capture' | 'Once'> + + type ModifiedEvents = UnionToIntersection<{ + [K in keyof Events]: { [L in `${K}${Modifiers}`]: Events[K] } + }[keyof Events]> + + type EventHandlers = { + [K in keyof E]?: E[K] extends Function ? E[K] : (payload: E[K]) => void + } + + export interface HTMLAttributes extends EventHandlers { + onScrollend?: (e: Event) => void + } + + type CustomProperties = { + [k in `--${string}`]: any + } + + export interface CSSProperties extends CustomProperties {} +} + +declare module 'expect' { + interface Matchers { + /** console.warn */ + toHaveBeenTipped(): R + + /** console.error */ + toHaveBeenWarned(): R + } +} diff --git a/packages/alpinui/src/iconsets/TODO.md b/packages/alpinui/src/iconsets/TODO.md new file mode 100644 index 0000000..a8ffed5 --- /dev/null +++ b/packages/alpinui/src/iconsets/TODO.md @@ -0,0 +1,3 @@ +# TODO + +- Keep here or move to server? \ No newline at end of file diff --git a/packages/alpinui/src/iconsets/fa-svg.ts b/packages/alpinui/src/iconsets/fa-svg.ts new file mode 100644 index 0000000..848e48a --- /dev/null +++ b/packages/alpinui/src/iconsets/fa-svg.ts @@ -0,0 +1,23 @@ +// Utilities +import { h, resolveComponent } from 'vue'; +import { aliases as faAliases } from './fa'; + +// Types +import type { IconSet } from '@/composables/icons'; + +const aliases = faAliases; + +const fa: IconSet = { + component: (props) => { + const { icon, tag, ...rest } = props; + const stringIcon = icon as string; + return h(tag, rest, [ + h(resolveComponent('font-awesome-icon'), { + key: stringIcon, // TODO: https://github.com/FortAwesome/vue-fontawesome/issues/250 + icon: stringIcon.includes(' fa-') ? stringIcon.split(' fa-') : stringIcon, + }), + ]); + }, +}; + +export { aliases, fa }; diff --git a/packages/alpinui/src/iconsets/fa.ts b/packages/alpinui/src/iconsets/fa.ts new file mode 100644 index 0000000..065ab5b --- /dev/null +++ b/packages/alpinui/src/iconsets/fa.ts @@ -0,0 +1,55 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Components +import { VClassIcon } from '@/components/VIcon/icons'; + +// Types +import type { IconAliases, IconSet } from '@/composables/icons'; + +const aliases: IconAliases = { + collapse: 'fas fa-chevron-up', + complete: 'fas fa-check', + cancel: 'fas fa-times-circle', + close: 'fas fa-times', + delete: 'fas fa-times-circle', // delete (e.g. v-chip close) + clear: 'fas fa-times-circle', // delete (e.g. v-chip close) + success: 'fas fa-check-circle', + info: 'fas fa-info-circle', + warning: 'fas fa-exclamation', + error: 'fas fa-exclamation-triangle', + prev: 'fas fa-chevron-left', + next: 'fas fa-chevron-right', + checkboxOn: 'fas fa-check-square', + checkboxOff: 'far fa-square', // note 'far' + checkboxIndeterminate: 'fas fa-minus-square', + delimiter: 'fas fa-circle', // for carousel + sortAsc: 'fas fa-arrow-up', + sortDesc: 'fas fa-arrow-down', + expand: 'fas fa-chevron-down', + menu: 'fas fa-bars', + subgroup: 'fas fa-caret-down', + dropdown: 'fas fa-caret-down', + radioOn: 'far fa-dot-circle', + radioOff: 'far fa-circle', + edit: 'fas fa-edit', + ratingEmpty: 'far fa-star', + ratingFull: 'fas fa-star', + ratingHalf: 'fas fa-star-half', + loading: 'fas fa-sync', + first: 'fas fa-step-backward', + last: 'fas fa-step-forward', + unfold: 'fas fa-arrows-alt-v', + file: 'fas fa-paperclip', + plus: 'fas fa-plus', + minus: 'fas fa-minus', + calendar: 'fas fa-calendar', + treeviewCollapse: 'fas fa-caret-down', + treeviewExpand: 'fas fa-caret-right', + eyeDropper: 'fas fa-eye-dropper', +}; + +const fa: IconSet = { + component: VClassIcon, +}; + +export { aliases, fa }; diff --git a/packages/alpinui/src/iconsets/fa4.ts b/packages/alpinui/src/iconsets/fa4.ts new file mode 100644 index 0000000..26555d2 --- /dev/null +++ b/packages/alpinui/src/iconsets/fa4.ts @@ -0,0 +1,59 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Components +import { VClassIcon } from '@/components/VIcon/icons'; + +// Utilities +import { h } from 'vue'; + +// Types +import type { IconAliases, IconSet } from '@/composables/icons'; + +const aliases: IconAliases = { + collapse: 'fa-chevron-up', + complete: 'fa-check', + cancel: 'fa-times-circle', + close: 'fa-times', + delete: 'fa-times-circle', // delete (e.g. v-chip close) + clear: 'fa-check-circle', // delete (e.g. v-chip close) + success: 'fa-check-circle', + info: 'fa-info-circle', + warning: 'fa-exclamation', + error: 'fa-exclamation-triangle', + prev: 'fa-chevron-left', + next: 'fa-chevron-right', + checkboxOn: 'fa-check-square', + checkboxOff: 'fa-square-o', + checkboxIndeterminate: 'fa-minus-square', + delimiter: 'fa-circle', // for carousel + sortAsc: 'fa-arrow-up', + sortDesc: 'fa-arrow-down', + expand: 'fa-chevron-down', + menu: 'fa-bars', + subgroup: 'fa-caret-down', + dropdown: 'fa-caret-down', + radioOn: 'fa-dot-circle-o', + radioOff: 'fa-circle-o', + edit: 'fa-pencil', + ratingEmpty: 'fa-star-o', + ratingFull: 'fa-star', + ratingHalf: 'fa-star-half-o', + loading: 'fa-refresh', + first: 'fa-step-backward', + last: 'fa-step-forward', + unfold: 'fa-angle-double-down', + file: 'fa-paperclip', + plus: 'fa-plus', + minus: 'fa-minus', + calendar: 'fa-calendar', + treeviewCollapse: 'fa-caret-down', + treeviewExpand: 'fa-caret-right', + eyeDropper: 'fa-eye-dropper', +}; + +const fa: IconSet = { + // Not using mergeProps here, functional components merge props by default (?) + component: (props) => h(VClassIcon, { ...props, class: 'fa' }), +}; + +export { aliases, fa }; diff --git a/packages/alpinui/src/iconsets/index.ts b/packages/alpinui/src/iconsets/index.ts new file mode 100644 index 0000000..0d77b9b --- /dev/null +++ b/packages/alpinui/src/iconsets/index.ts @@ -0,0 +1,5 @@ +// TODO +// TODO +// TODO - ICONSETS NEED TO BE DEFINED ON SERVER (e.g. Django) +// TODO +// TODO \ No newline at end of file diff --git a/packages/alpinui/src/iconsets/md.ts b/packages/alpinui/src/iconsets/md.ts new file mode 100644 index 0000000..a8f1a59 --- /dev/null +++ b/packages/alpinui/src/iconsets/md.ts @@ -0,0 +1,59 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Components +import { VLigatureIcon } from '@/components/VIcon/icons'; + +// Utilities +import { h } from 'vue'; + +// Types +import type { IconAliases, IconSet } from '@/composables/icons'; + +const aliases: IconAliases = { + collapse: 'keyboard_arrow_up', + complete: 'check', + cancel: 'cancel', + close: 'close', + delete: 'cancel', // delete (e.g. v-chip close) + clear: 'cancel', + success: 'check_circle', + info: 'info', + warning: 'priority_high', + error: 'warning', + prev: 'chevron_left', + next: 'chevron_right', + checkboxOn: 'check_box', + checkboxOff: 'check_box_outline_blank', + checkboxIndeterminate: 'indeterminate_check_box', + delimiter: 'fiber_manual_record', // for carousel + sortAsc: 'arrow_upward', + sortDesc: 'arrow_downward', + expand: 'keyboard_arrow_down', + menu: 'menu', + subgroup: 'arrow_drop_down', + dropdown: 'arrow_drop_down', + radioOn: 'radio_button_checked', + radioOff: 'radio_button_unchecked', + edit: 'edit', + ratingEmpty: 'star_border', + ratingFull: 'star', + ratingHalf: 'star_half', + loading: 'cached', + first: 'first_page', + last: 'last_page', + unfold: 'unfold_more', + file: 'attach_file', + plus: 'add', + minus: 'remove', + calendar: 'event', + treeviewCollapse: 'arrow_drop_down', + treeviewExpand: 'arrow_right', + eyeDropper: 'colorize', +}; + +const md: IconSet = { + // Not using mergeProps here, functional components merge props by default (?) + component: (props) => h(VLigatureIcon, { ...props, class: 'material-icons' }), +}; + +export { aliases, md }; diff --git a/packages/alpinui/src/iconsets/mdi-svg.ts b/packages/alpinui/src/iconsets/mdi-svg.ts new file mode 100644 index 0000000..25fc0bf --- /dev/null +++ b/packages/alpinui/src/iconsets/mdi-svg.ts @@ -0,0 +1,56 @@ +// @ts-nocheck // TODO // TODO // TODO +/* eslint-disable max-len */ + +// Components +import { VSvgIcon } from '@/components/VIcon/icons'; + +// Types +import type { IconAliases, IconSet } from '@/composables/icons'; + +const aliases: IconAliases = { + collapse: 'svg:M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z', + complete: 'svg:M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z', + cancel: 'svg:M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z', + close: 'svg:M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z', + delete: 'svg:M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z', // delete (e.g. v-chip close) + clear: 'svg:M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z', + success: 'svg:M12,2C17.52,2 22,6.48 22,12C22,17.52 17.52,22 12,22C6.48,22 2,17.52 2,12C2,6.48 6.48,2 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z', + info: 'svg:M13,9H11V7H13M13,17H11V11H13M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z', + warning: 'svg:M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z', + error: 'svg:M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z', + prev: 'svg:M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z', + next: 'svg:M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z', + checkboxOn: 'svg:M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z', + checkboxOff: 'svg:M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z', + checkboxIndeterminate: 'svg:M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z', + delimiter: 'svg:M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z', // for carousel + sortAsc: 'svg:M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z', + sortDesc: 'svg:M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z', + expand: 'svg:M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z', + menu: 'svg:M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z', + subgroup: 'svg:M7,10L12,15L17,10H7Z', + dropdown: 'svg:M7,10L12,15L17,10H7Z', + radioOn: 'svg:M12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,7C9.24,7 7,9.24 7,12C7,14.76 9.24,17 12,17C14.76,17 17,14.76 17,12C17,9.24 14.76,7 12,7Z', + radioOff: 'svg:M12,20C7.58,20 4,16.42 4,12C4,7.58 7.58,4 12,4C16.42,4 20,7.58 20,12C20,16.42 16.42,20 12,20M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z', + edit: 'svg:M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z', + ratingEmpty: 'svg:M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z', + ratingFull: 'svg:M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z', + ratingHalf: 'svg:M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z', + loading: 'svg:M19,8L15,12H18C18,15.31 15.31,18 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20C16.42,20 20,16.42 20,12H23M6,12C6,8.69 8.69,6 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4C7.58,4 4,7.58 4,12H1L5,16L9,12', + first: 'svg:M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z', + last: 'svg:M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z', + unfold: 'svg:M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z', + file: 'svg:M16.5,6V17.5C16.5,19.71 14.71,21.5 12.5,21.5C10.29,21.5 8.5,19.71 8.5,17.5V5C8.5,3.62 9.62,2.5 11,2.5C12.38,2.5 13.5,3.62 13.5,5V15.5C13.5,16.05 13.05,16.5 12.5,16.5C11.95,16.5 11.5,16.05 11.5,15.5V6H10V15.5C10,16.88 11.12,18 12.5,18C13.88,18 15,16.88 15,15.5V5C15,2.79 13.21,1 11,1C8.79,1 7,2.79 7,5V17.5C7,20.54 9.46,23 12.5,23C15.54,23 18,20.54 18,17.5V6H16.5Z', + plus: 'svg:M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z', + minus: 'svg:M19,13H5V11H19V13Z', + calendar: 'svg:M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z', + treeviewCollapse: 'svg:M7,10L12,15L17,10H7Z', + treeviewExpand: 'svg:M10,17L15,12L10,7V17Z', + eyeDropper: 'svg:M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z', +}; + +const mdi: IconSet = { + component: VSvgIcon, +}; + +export { aliases, mdi }; diff --git a/packages/alpinui/src/iconsets/mdi.ts b/packages/alpinui/src/iconsets/mdi.ts new file mode 100644 index 0000000..0e2aae7 --- /dev/null +++ b/packages/alpinui/src/iconsets/mdi.ts @@ -0,0 +1,59 @@ +// @ts-nocheck // TODO // TODO // TODO + +// Components +import { VClassIcon } from '@/components/VIcon/icons'; + +// Utilities +import { h } from 'vue'; + +// Types +import type { IconAliases, IconSet } from '@/composables/icons'; + +const aliases: IconAliases = { + collapse: 'mdi-chevron-up', + complete: 'mdi-check', + cancel: 'mdi-close-circle', + close: 'mdi-close', + delete: 'mdi-close-circle', // delete (e.g. v-chip close) + clear: 'mdi-close-circle', + success: 'mdi-check-circle', + info: 'mdi-information', + warning: 'mdi-alert-circle', + error: 'mdi-close-circle', + prev: 'mdi-chevron-left', + next: 'mdi-chevron-right', + checkboxOn: 'mdi-checkbox-marked', + checkboxOff: 'mdi-checkbox-blank-outline', + checkboxIndeterminate: 'mdi-minus-box', + delimiter: 'mdi-circle', // for carousel + sortAsc: 'mdi-arrow-up', + sortDesc: 'mdi-arrow-down', + expand: 'mdi-chevron-down', + menu: 'mdi-menu', + subgroup: 'mdi-menu-down', + dropdown: 'mdi-menu-down', + radioOn: 'mdi-radiobox-marked', + radioOff: 'mdi-radiobox-blank', + edit: 'mdi-pencil', + ratingEmpty: 'mdi-star-outline', + ratingFull: 'mdi-star', + ratingHalf: 'mdi-star-half-full', + loading: 'mdi-cached', + first: 'mdi-page-first', + last: 'mdi-page-last', + unfold: 'mdi-unfold-more-horizontal', + file: 'mdi-paperclip', + plus: 'mdi-plus', + minus: 'mdi-minus', + calendar: 'mdi-calendar', + treeviewCollapse: 'mdi-menu-down', + treeviewExpand: 'mdi-menu-right', + eyeDropper: 'mdi-eyedropper', +}; + +const mdi: IconSet = { + // Not using mergeProps here, functional components merge props by default (?) + component: (props: any) => h(VClassIcon, { ...props, class: 'mdi' }), +}; + +export { aliases, mdi }; diff --git a/packages/alpinui/src/locale/__tests__/index.spec.ts b/packages/alpinui/src/locale/__tests__/index.spec.ts new file mode 100755 index 0000000..d350805 --- /dev/null +++ b/packages/alpinui/src/locale/__tests__/index.spec.ts @@ -0,0 +1,27 @@ +// Utilities +import { describe, expect, it } from '@jest/globals' +import fs from 'fs' +import path from 'path' +import * as locales from '../' + +describe('locales', () => { + it('should have listed all available locales in index.ts', async () => { + const imported = Object.keys(locales).filter(key => key !== 'default') + const dir = fs.readdirSync(path.resolve(__dirname, '..')) + .filter(filename => !['adapters', 'index.ts', '__tests__'].includes(filename)) + .map(filename => filename.replace(/\.ts$/, '').replace('-', '')) + + expect(imported).toHaveLength(dir.length) + expect(imported).toStrictEqual(expect.arrayContaining(dir)) + }) + + it('should have same structure for all translations', () => { + const unfill = (o: Record) => Object.keys(o).reduce((result, key) => { + result[key] = typeof o[key] === 'object' ? unfill(o[key]) : typeof o[key] + return result + }, {} as Record) + const enUnfilled = unfill(locales.en) + + Object.entries(locales).forEach(([locale, messages]) => locale !== 'default' && expect(unfill(messages)).toStrictEqual(enUnfilled)) + }) +}) diff --git a/packages/alpinui/src/locale/adapters/alpinui.ts b/packages/alpinui/src/locale/adapters/alpinui.ts new file mode 100644 index 0000000..7442426 --- /dev/null +++ b/packages/alpinui/src/locale/adapters/alpinui.ts @@ -0,0 +1,122 @@ +// Composables +import { useProxiedModel } from '@/composables/proxiedModel'; + +// Utilities +import { ref, shallowRef, watch } from 'alpine-reactivity'; +import { consoleError, consoleWarn } from '@/util/console'; +import { getObjectValueByPath } from '@/util/helpers'; + +// Locales +import en from '@/locale/en'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { Ref } from 'alpine-reactivity'; +import type { LocaleInstance, LocaleMessages, LocaleOptions } from '@/composables/locale'; + +const LANG_PREFIX = '$alpinui.'; + +const replace = (str: string, params: unknown[]) => { + return str.replace(/\{(\d+)\}/g, (match: string, index: string) => { + return String(params[+index]); + }); +}; + +const createTranslateFunction = ( + current: Ref, + fallback: Ref, + messages: Ref, +) => { + return (key: string, ...params: unknown[]) => { + if (!key.startsWith(LANG_PREFIX)) { + return replace(key, params); + } + + const shortKey = key.replace(LANG_PREFIX, ''); + const currentLocale = current.value && messages.value[current.value]; + const fallbackLocale = fallback.value && messages.value[fallback.value]; + + let str: string = getObjectValueByPath(currentLocale, shortKey, null); + + if (!str) { + consoleWarn(`Translation key "${key}" not found in "${current.value}", trying fallback locale`); + str = getObjectValueByPath(fallbackLocale, shortKey, null); + } + + if (!str) { + consoleError(`Translation key "${key}" not found in fallback`); + str = key; + } + + if (typeof str !== 'string') { + consoleError(`Translation key "${key}" has a non-string value`); + str = key; + } + + return replace(str, params); + }; +}; + +function createNumberFunction(current: Ref, fallback: Ref) { + return (value: number, options?: Intl.NumberFormatOptions) => { + const numberFormat = new Intl.NumberFormat([current.value, fallback.value], options); + + return numberFormat.format(value); + }; +} + +function useProvided ( + vm: AlpineInstance, + props: any, + prop: string, + provided: Ref, +) { + const internal = useProxiedModel(vm, props, prop, props[prop] ?? provided.value); + + // TODO(from Vuetify): Remove when defaultValue works + internal.value = props[prop] ?? provided.value; + + watch(provided, (v) => { + if (props[prop] == null) { + internal.value = provided.value; + } + }); + + return internal as Ref; +} + +function createProvideFunction( + state: { current: Ref, fallback: Ref, messages: Ref }) { + return (vm: AlpineInstance, props: LocaleOptions): LocaleInstance => { + const current = useProvided(vm, props, 'locale', state.current); + const fallback = useProvided(vm, props, 'fallback', state.fallback); + const messages = useProvided(vm, props, 'messages', state.messages); + + return { + name: 'alpinui', + current, + fallback, + messages, + t: createTranslateFunction(current, fallback, messages), + n: createNumberFunction(current, fallback), + provide: createProvideFunction({ current, fallback, messages }), + }; + }; +} + +export function createAlpinuiAdapter(options?: LocaleOptions): LocaleInstance { + const messages = ref({ en, ...options?.messages }); + + const current = shallowRef(options?.locale ?? 'en'); + const fallback = shallowRef(options?.fallback ?? 'en'); + + return { + name: 'alpinui', + current, + fallback, + messages, + t: createTranslateFunction(current, fallback, messages), + n: createNumberFunction(current, fallback), + provide: createProvideFunction({ current, fallback, messages }), + }; +} diff --git a/packages/alpinui/src/locale/af.ts b/packages/alpinui/src/locale/af.ts new file mode 100644 index 0000000..34fc7bd --- /dev/null +++ b/packages/alpinui/src/locale/af.ts @@ -0,0 +1,102 @@ +export default { + badge: 'badge', + open: 'Open', + close: 'Close', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Geen ooreenstemmende resultate is gevind nie', + loadingText: 'Loading item...', + }, + dataTable: { + itemsPerPageText: 'Rye per bladsy:', + ariaLabel: { + sortDescending: 'Sorted descending.', + sortAscending: 'Sorted ascending..', + sortNone: 'Not sorted.', + activateNone: 'Activate to remove sorting.', + activateDescending: 'Activate to sort descending.', + activateAscending: 'Activate to sort ascending.', + }, + sortBy: 'Sort by', + }, + dataFooter: { + itemsPerPageText: 'Aantal per bladsy:', + itemsPerPageAll: 'Alles', + nextPage: 'Volgende bladsy', + prevPage: 'Vorige bladsy', + firstPage: 'Eerste bladsy', + lastPage: 'Laaste bladsy', + pageText: '{0}-{1} van {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Geen data is beskikbaar nie', + carousel: { + prev: 'Vorige visuele', + next: 'Volgende visuele', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} meer', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} files', + counterSize: '{0} files ({1} in total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Paginasie-navigasie', + next: 'Volgende bladsy', + previous: 'Vorige bladsy', + page: 'Gaan na bladsy {0}', + currentPage: 'Huidige bladsy, Bladsy {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/ar.ts b/packages/alpinui/src/locale/ar.ts new file mode 100644 index 0000000..b5ec2b2 --- /dev/null +++ b/packages/alpinui/src/locale/ar.ts @@ -0,0 +1,102 @@ +export default { + badge: 'شارة', + open: 'Open', + close: 'إغلاق', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'لم يتم إيجاد نتائج', + loadingText: 'يتم جلب العناصر...', + }, + dataTable: { + itemsPerPageText: 'عدد الصفوف لكل صفحة:', + ariaLabel: { + sortDescending: 'مرتب تنازلياً.', + sortAscending: 'مرتب تصاعدياً.', + sortNone: 'غير مرتب.', + activateNone: 'نشط لإزالة الترتيب.', + activateDescending: 'نشط للترتيب تنازلياً.', + activateAscending: 'نشط للترتيب تصاعدياً.', + }, + sortBy: 'رتب حسب', + }, + dataFooter: { + itemsPerPageText: 'عدد العناصر لكل صفحة:', + itemsPerPageAll: 'الكل', + nextPage: 'الصفحة التالية', + prevPage: 'الصفحة السابقة', + firstPage: 'الصفحة الأولى', + lastPage: 'الصفحة الأخيرة', + pageText: '{0}-{1} من {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'لا توجد بيانات', + carousel: { + prev: 'المعروض السابق', + next: 'المعروض التالي', + ariaLabel: { + delimiter: 'المعروض رقم {0} من {1}', + }, + }, + calendar: { + moreEvents: '{0} أكثر', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} ملفات', + counterSize: '{0} ملفات ({1} في المجموع)', + }, + timePicker: { + am: 'صباحاً', + pm: 'مساءً', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'الإنتقال بين الصفحات', + next: 'الصفحة التالية', + previous: 'الصفحة السابقة', + page: '{0} انتقل إلى الصفحة', + currentPage: '{0} الصفحة الحالية رقمها', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'القييم {0} من {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/az.ts b/packages/alpinui/src/locale/az.ts new file mode 100644 index 0000000..b452d1c --- /dev/null +++ b/packages/alpinui/src/locale/az.ts @@ -0,0 +1,102 @@ +export default { + badge: 'nişan', + open: 'Open', + close: 'Bağla', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Uyğun məlumat tapılmadı', + loadingText: 'Yüklənir... Zəhmət olmasa, gözləyin.', + }, + dataTable: { + itemsPerPageText: 'Səhifə başı sətir sayı:', + ariaLabel: { + sortDescending: 'Azalan sıra ilə düzülmüş.', + sortAscending: 'Artan sıra ilə düzülmüş.', + sortNone: 'Sıralanmamışdır. ', + activateNone: 'Sıralamanı yığışdır.', + activateDescending: 'Azalan sıra ilə düz.', + activateAscending: 'Artan sıra ilə düz.', + }, + sortBy: 'Sırala', + }, + dataFooter: { + itemsPerPageText: 'Səhifə başı sətir sayı:', + itemsPerPageAll: 'Hamısı', + nextPage: 'Növbəti səhifə', + prevPage: 'Əvvəlki səhifə', + firstPage: 'İlk səhifə', + lastPage: 'Son səhifə', + pageText: '{0} - {1} arası, Cəmi: {2} qeydiyyat', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Bu görüntüdə məlumat yoxdur.', + carousel: { + prev: 'Əvvəlki görüntü', + next: 'Növbəti görüntü', + ariaLabel: { + delimiter: 'Galereya səhifə {0} / {1}', + }, + }, + calendar: { + moreEvents: '{0} ədad daha', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} fayl', + counterSize: '{0} fayl (cəmi {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Səhifələmə Naviqasiyası', + next: 'Növbəti səhifə', + previous: 'Əvəvlki səhifə', + page: 'Səhifəyə get {0}', + currentPage: 'Cari səhifə, Səhifə {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/bg.ts b/packages/alpinui/src/locale/bg.ts new file mode 100644 index 0000000..f795df4 --- /dev/null +++ b/packages/alpinui/src/locale/bg.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Значка', + open: 'Отвори', + close: 'Затвори', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Отмяна', + }, + dataIterator: { + noResultsText: 'Не са намерени записи', + loadingText: 'Зареждане на елементи...', + }, + dataTable: { + itemsPerPageText: 'Редове на страница:', + ariaLabel: { + sortDescending: 'Подреди в намаляващ ред.', + sortAscending: 'Подреди в нарастващ ред.', + sortNone: 'Без подредба.', + activateNone: 'Активирай за премахване на подредбата.', + activateDescending: 'Активирай за подредба в намаляващ ред.', + activateAscending: 'Активирай за подредба в нарастващ ред.', + }, + sortBy: 'Сортирай по', + }, + dataFooter: { + itemsPerPageText: 'Елементи на страница:', + itemsPerPageAll: 'Всички', + nextPage: 'Следваща страница', + prevPage: 'Предишна страница', + firstPage: 'Първа страница', + lastPage: 'Последна страница', + pageText: '{0}-{1} от {2}', + }, + dateRangeInput: { + divider: 'до', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Избор на дати', + header: 'Въвеждане на дати', + }, + title: 'Избор на дата', + header: 'Въвеждане на дата', + input: { + placeholder: 'Въведете дата', + }, + }, + noDataText: 'Няма налични данни', + carousel: { + prev: 'Предишна визуализация', + next: 'Следваща визуализация', + ariaLabel: { + delimiter: 'Кадър {0} от {1} на въртележката', + }, + }, + calendar: { + moreEvents: 'Още {0}', + today: 'Today', + }, + input: { + clear: 'Изчисти {0}', + prependAction: '{0} предшестващо действие', + appendAction: '{0} последващо действие', + otp: 'Моля, въведете OTP символ {0}', + }, + fileInput: { + counter: '{0} файла', + counterSize: '{0} файла ({1} общо)', + }, + timePicker: { + am: 'пр. обяд', + pm: 'сл. обяд', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Странициране', + next: 'Следваща страница', + previous: 'Предишна страница', + page: 'Отиди на страница {0}', + currentPage: 'Текуща страница, Страница {0}', + first: 'Първа страница', + last: 'Последна страница', + }, + }, + stepper: { + next: 'Следващ', + prev: 'Предишен', + }, + rating: { + ariaLabel: { + item: 'Оценка {0} от {1}', + }, + }, + loading: 'Зареждане...', + infiniteScroll: { + loadMore: 'Зареди още', + empty: 'Няма повече', + }, +} diff --git a/packages/alpinui/src/locale/ca.ts b/packages/alpinui/src/locale/ca.ts new file mode 100644 index 0000000..09b06b0 --- /dev/null +++ b/packages/alpinui/src/locale/ca.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Insígnia', + open: 'Open', + close: 'Tancar', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Sense dades per mostrar', + loadingText: 'Carregant...', + }, + dataTable: { + itemsPerPageText: 'Files per pàgina:', + ariaLabel: { + sortDescending: 'Ordre descendent.', + sortAscending: 'Ordre ascendent.', + sortNone: 'Sense ordenar.', + activateNone: 'Premi per treure la ordenació.', + activateDescending: 'Premi per ordenar descendent.', + activateAscending: 'Premi per ordenar ascendent.', + }, + sortBy: 'Ordenat per', + }, + dataFooter: { + itemsPerPageText: 'Elements per pàgina:', + itemsPerPageAll: 'Tot', + nextPage: 'Pàgina següent', + prevPage: 'Pàgina anterior', + firstPage: 'Primera pàgina', + lastPage: 'Última pàgina', + pageText: '{0}-{1} de {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Sense dades', + carousel: { + prev: 'Visualització prèvia', + next: 'Visualització següent', + ariaLabel: { + delimiter: 'Diapositiva {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} més', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} fitxers', + counterSize: '{0} fitxers ({1} en total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navegació de la pàgina', + next: 'Pàgina següent', + previous: 'Pàgina anterior', + page: 'Ves a la pàgina {0}', + currentPage: 'Pàgina actual, pàgina {0}', + first: 'Primera pàgina', + last: 'Última pàgina', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Puntuació {0} de {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/ckb.ts b/packages/alpinui/src/locale/ckb.ts new file mode 100644 index 0000000..64ffde6 --- /dev/null +++ b/packages/alpinui/src/locale/ckb.ts @@ -0,0 +1,102 @@ +export default { + badge: 'باج', + open: 'Open', + close: 'داخستن', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'هیچ تۆمارێکی هاوتا نەدۆزرایەوە', + loadingText: 'بارکردنی ئایتمەکان...', + }, + dataTable: { + itemsPerPageText: 'ڕیزەکان بۆ هەر پەڕەیەک:', + ariaLabel: { + sortDescending: '.سەر بەرەو خوار ڕیزکراوە', + sortAscending: '.سەر بەرەو ژوور ڕیزکراوە', + sortNone: 'ڕیزنەکراوە.', + activateNone: 'چالاککردن بۆ لابردنی ڕیزکردن.', + activateDescending: 'چالاککردن بۆ ڕیزکردنی سەربەرەوخوار.', + activateAscending: 'چالاککردن بۆ ڕیزکردنی سەر بەرەو ژوور.', + }, + sortBy: 'ڕیزکردن بەپێی', + }, + dataFooter: { + itemsPerPageText: 'ئایتمەکان بۆ هەر پەڕەیەک:', + itemsPerPageAll: 'هەمووی', + nextPage: 'پەڕەی دواتر', + prevPage: 'پەڕەی پێشوو', + firstPage: 'پەڕەی یەکەم', + lastPage: 'پەڕەی کۆتایی', + pageText: '{0}-{1} لە {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'هیچ داتایەک بەردەست نیە', + carousel: { + prev: 'بینراوی پێشوو', + next: 'بینراوی داهاتوو', + ariaLabel: { + delimiter: 'سلایدی کارۆسێل {0} لە {1}', + }, + }, + calendar: { + moreEvents: '{0} زیاتر', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} فایل', + counterSize: '{0} فایل ({1} لە کۆی گشتی)', + }, + timePicker: { + am: 'پێش نیوەڕۆژ', + pm: 'دوای نیوەڕۆژ', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'ڕێنیشاندەری پەڕەگۆڕکێ', + next: 'پەڕەی دواتر', + previous: 'پەڕەی پێشوو', + page: 'بڕۆ بۆ پەڕەی {0}', + currentPage: 'پەڕەی ئێستا، پەڕە{0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/cs.ts b/packages/alpinui/src/locale/cs.ts new file mode 100644 index 0000000..85a8b6b --- /dev/null +++ b/packages/alpinui/src/locale/cs.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Odznak', + open: 'Otevřiť', + close: 'Zavřít', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Zrušit', + }, + dataIterator: { + noResultsText: 'Nenalezeny žádné záznamy', + loadingText: 'Načítám položky...', + }, + dataTable: { + itemsPerPageText: 'Řádků na stránku:', + ariaLabel: { + sortDescending: 'Řazeno sestupně.', + sortAscending: 'Řazeno vzestupně.', + sortNone: 'Neseřazeno.', + activateNone: 'Aktivováním vypnete řazení.', + activateDescending: 'Aktivováním se bude řadit sestupně.', + activateAscending: 'Aktivováním se bude řadit vzestupně.', + }, + sortBy: 'Řadit dle', + }, + dataFooter: { + itemsPerPageText: 'Položek na stránku:', + itemsPerPageAll: 'Vše', + nextPage: 'Další strana', + prevPage: 'Předchozí strana', + firstPage: 'První strana', + lastPage: 'Poslední strana', + pageText: '{0}-{1} z {2}', + }, + dateRangeInput: { + divider: 'do', + }, + datePicker: { + itemsSelected: '{0} vybrán', + range: { + title: 'Vyberte datumy', + header: 'Zadejte datumy', + }, + title: 'Vyberte datum', + header: 'Zadejte datum', + input: { + placeholder: 'Zadejte datum', + }, + }, + noDataText: 'Nejsou dostupná žádná data', + carousel: { + prev: 'Předchozí obrázek', + next: 'Další obrázek', + ariaLabel: { + delimiter: 'Obrázek {0} z {1}', + }, + }, + calendar: { + moreEvents: '{0} dalších', + today: 'Today', + }, + input: { + clear: 'Vymazat {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Vložte výhradně OTP znaky {0}', + }, + fileInput: { + counter: '{0} souborů', + counterSize: '{0} souborů ({1} celkem)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigace po stránkách', + next: 'Další strana', + previous: 'Předchozí strana', + page: 'Přejít na stránku {0}', + currentPage: 'Aktuální stránka, stránka {0}', + first: 'První stránka', + last: 'Poslední stránka', + }, + }, + stepper: { + next: 'Další', + prev: 'Předchozí', + }, + rating: { + ariaLabel: { + item: 'Hodnocení {0} z {1}', + }, + }, + loading: 'Načítám...', + infiniteScroll: { + loadMore: 'Načíst více', + empty: 'Žádné další', + }, +} diff --git a/packages/alpinui/src/locale/da.ts b/packages/alpinui/src/locale/da.ts new file mode 100644 index 0000000..8a80af2 --- /dev/null +++ b/packages/alpinui/src/locale/da.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Emblem', + open: 'Open', + close: 'Luk', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Ingen matchende data fundet', + loadingText: 'Indhenter data...', + }, + dataTable: { + itemsPerPageText: 'Rækker pr. side:', + ariaLabel: { + sortDescending: 'Sorteret faldende.', + sortAscending: 'Sorteret stigende.', + sortNone: 'Ikke sorteret.', + activateNone: 'Aktiver for at fjerne sortering.', + activateDescending: 'Aktiver for at sortere faldende.', + activateAscending: 'Aktiver for at sortere stigende.', + }, + sortBy: 'Sorter efter', + }, + dataFooter: { + itemsPerPageText: 'Rækker pr. side:', + itemsPerPageAll: 'Alle', + nextPage: 'Næste side', + prevPage: 'Forrige side', + firstPage: 'Første side', + lastPage: 'Sidste side', + pageText: '{0}-{1} af {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Ingen data tilgængelig', + carousel: { + prev: 'Forrige visuelle', + next: 'Næste visuelle', + ariaLabel: { + delimiter: 'Karrusel dias {0} af {1}', + }, + }, + calendar: { + moreEvents: '{0} mere', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} filer', + counterSize: '{0} filer ({1} total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Pagineringsnavigation', + next: 'Næste side', + previous: 'Forrige side', + page: 'Gå til side {0}', + currentPage: 'Nuværende side, Side {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Bedømmelse {0} af {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/de.ts b/packages/alpinui/src/locale/de.ts new file mode 100644 index 0000000..9b350fc --- /dev/null +++ b/packages/alpinui/src/locale/de.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Abzeichen', + open: 'Öffnen', + close: 'Schließen', + dismiss: 'Verwerfen', + confirmEdit: { + ok: 'OK', + cancel: 'Abbrechen', + }, + dataIterator: { + noResultsText: 'Keine Elemente gefunden', + loadingText: 'Lade Elemente...', + }, + dataTable: { + itemsPerPageText: 'Zeilen pro Seite:', + ariaLabel: { + sortDescending: 'Absteigend sortiert.', + sortAscending: 'Aufsteigend sortiert.', + sortNone: 'Nicht sortiert.', + activateNone: 'Aktivieren um Sortierung zu entfernen.', + activateDescending: 'Aktivieren um absteigend zu sortieren.', + activateAscending: 'Aktivieren um aufsteigend zu sortieren.', + }, + sortBy: 'Sortiere nach', + }, + dataFooter: { + itemsPerPageText: 'Elemente pro Seite:', + itemsPerPageAll: 'Alle', + nextPage: 'Nächste Seite', + prevPage: 'Vorherige Seite', + firstPage: 'Erste Seite', + lastPage: 'Letzte Seite', + pageText: '{0}-{1} von {2}', + }, + dateRangeInput: { + divider: 'bis', + }, + datePicker: { + itemsSelected: '{0} ausgewählt', + range: { + title: 'Daten auswählen', + header: 'Daten eingeben', + }, + title: 'Datum auswählen', + header: 'Datum eingeben', + input: { + placeholder: 'Datum eingeben', + }, + }, + noDataText: 'Keine Daten vorhanden', + carousel: { + prev: 'Vorheriges Bild', + next: 'Nächstes Bild', + ariaLabel: { + delimiter: 'Element {0} von {1}', + }, + }, + calendar: { + moreEvents: '{0} mehr', + today: 'Heute', + }, + input: { + clear: '{0} leeren', + prependAction: '{0} vorangestellte Aktion', + appendAction: '{0} angehängte Aktion', + otp: 'Bitte OTP-Zeichen {0} eingeben', + }, + fileInput: { + counter: '{0} Dateien', + counterSize: '{0} Dateien ({1} gesamt)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Uhrzeit auswählen', + }, + pagination: { + ariaLabel: { + root: 'Seitennavigation', + next: 'Nächste Seite', + previous: 'Vorherige Seite', + page: 'Gehe zu Seite {0}', + currentPage: 'Aktuelle Seite, Seite {0}', + first: 'Erste Seite', + last: 'Letzte Seite', + }, + }, + stepper: { + next: 'Weiter', + prev: 'Zurück', + }, + rating: { + ariaLabel: { + item: 'Bewertung {0} von {1}', + }, + }, + loading: 'Laden...', + infiniteScroll: { + loadMore: 'Mehr laden', + empty: 'Nichts weiteres', + }, +} diff --git a/packages/alpinui/src/locale/el.ts b/packages/alpinui/src/locale/el.ts new file mode 100755 index 0000000..be17016 --- /dev/null +++ b/packages/alpinui/src/locale/el.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Σήμα', + open: 'Open', + close: 'Close', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Δε βρέθηκαν αποτελέσματα', + loadingText: 'Loading item...', + }, + dataTable: { + itemsPerPageText: 'Γραμμές ανά σελίδα:', + ariaLabel: { + sortDescending: 'Sorted descending.', + sortAscending: 'Sorted ascending.', + sortNone: 'Not sorted.', + activateNone: 'Activate to remove sorting.', + activateDescending: 'Activate to sort descending.', + activateAscending: 'Activate to sort ascending.', + }, + sortBy: 'Sort by', + }, + dataFooter: { + itemsPerPageText: 'Αντικείμενα ανά σελίδα:', + itemsPerPageAll: 'Όλα', + nextPage: 'Επόμενη σελίδα', + prevPage: 'Προηγούμενη σελίδα', + firstPage: 'Πρώτη σελίδα', + lastPage: 'Τελευταία σελίδα', + pageText: '{0}-{1} από {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Χωρίς δεδομένα', + carousel: { + prev: 'הקודם חזותי', + next: 'הבא חזותי', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} ακόμη', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} files', + counterSize: '{0} files ({1} in total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Πλοήγηση με προορισμούς', + next: 'Επόμενη σελίδα', + previous: 'Προηγούμενη σελίδα', + page: 'Πήγαινε στην σελίδα {0}', + currentPage: 'Τρέχουσα σελίδα, σελίδα {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/en.ts b/packages/alpinui/src/locale/en.ts new file mode 100644 index 0000000..cf94f5e --- /dev/null +++ b/packages/alpinui/src/locale/en.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Badge', + open: 'Open', + close: 'Close', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'No matching records found', + loadingText: 'Loading items...', + }, + dataTable: { + itemsPerPageText: 'Rows per page:', + ariaLabel: { + sortDescending: 'Sorted descending.', + sortAscending: 'Sorted ascending.', + sortNone: 'Not sorted.', + activateNone: 'Activate to remove sorting.', + activateDescending: 'Activate to sort descending.', + activateAscending: 'Activate to sort ascending.', + }, + sortBy: 'Sort by', + }, + dataFooter: { + itemsPerPageText: 'Items per page:', + itemsPerPageAll: 'All', + nextPage: 'Next page', + prevPage: 'Previous page', + firstPage: 'First page', + lastPage: 'Last page', + pageText: '{0}-{1} of {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'No data available', + carousel: { + prev: 'Previous visual', + next: 'Next visual', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} more', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} files', + counterSize: '{0} files ({1} in total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Pagination Navigation', + next: 'Next page', + previous: 'Previous page', + page: 'Go to page {0}', + currentPage: 'Page {0}, Current page', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/es.ts b/packages/alpinui/src/locale/es.ts new file mode 100644 index 0000000..849ddec --- /dev/null +++ b/packages/alpinui/src/locale/es.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Placa', + open: 'Open', + close: 'Cerrar', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Ningún elemento coincide con la búsqueda', + loadingText: 'Cargando...', + }, + dataTable: { + itemsPerPageText: 'Filas por página:', + ariaLabel: { + sortDescending: 'Orden descendente.', + sortAscending: 'Orden ascendente.', + sortNone: 'Sin ordenar.', + activateNone: 'Pulse para quitar orden.', + activateDescending: 'Pulse para ordenar de forma descendente.', + activateAscending: 'Pulse para ordenar de forma ascendente.', + }, + sortBy: 'Ordenado por', + }, + dataFooter: { + itemsPerPageText: 'Elementos por página:', + itemsPerPageAll: 'Todos', + nextPage: 'Página siguiente', + prevPage: 'Página anterior', + firstPage: 'Primera página', + lastPage: 'Última página', + pageText: '{0}-{1} de {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'No hay datos disponibles', + carousel: { + prev: 'Visual anterior', + next: 'Visual siguiente', + ariaLabel: { + delimiter: 'Visual {0} de {1}', + }, + }, + calendar: { + moreEvents: '{0} más', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} archivos', + counterSize: '{0} archivos ({1} en total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navegación de paginación', + next: 'Página siguiente', + previous: 'Página anterior', + page: 'Ir a la página {0}', + currentPage: 'Página actual, página {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Puntuación {0} de {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/et.ts b/packages/alpinui/src/locale/et.ts new file mode 100644 index 0000000..b420079 --- /dev/null +++ b/packages/alpinui/src/locale/et.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Märk', + open: 'Open', + close: 'Sulge', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Vastavaid kirjeid ei leitud', + loadingText: 'Andmeid laaditakse...', + }, + dataTable: { + itemsPerPageText: 'Ridu leheküljel:', + ariaLabel: { + sortDescending: 'Kahanevalt sorteeritud.', + sortAscending: 'Kasvavalt sorteeritud.', + sortNone: 'Ei ole sorteeritud.', + activateNone: 'Vajuta uuesti sorteerimise eemaldamiseks.', + activateDescending: 'Vajuta uuesti, et sorteerida kahanevalt.', + activateAscending: 'Vajuta kasvavalt sorteerimiseks.', + }, + sortBy: 'Sorteerimise alus', + }, + dataFooter: { + itemsPerPageText: 'Kirjeid leheküljel:', + itemsPerPageAll: 'Kõik', + nextPage: 'Järgmine lehekülg', + prevPage: 'Eelmine lehekülg', + firstPage: 'Esimene lehekülg', + lastPage: 'Viimane lehekülg', + pageText: '{0}-{1} {2}st', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Andmed puuduvad', + carousel: { + prev: 'Eelmine visuaalne', + next: 'Järgmine visuaalne', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} veel', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} faili', + counterSize: '{0} faili (kokku {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Pagination Navigation', + next: 'Järgmine lehekülg', + previous: 'Eelmine lehekülg', + page: 'Mine lehele {0}', + currentPage: 'Praegune leht, leht {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/fa.ts b/packages/alpinui/src/locale/fa.ts new file mode 100644 index 0000000..d80255e --- /dev/null +++ b/packages/alpinui/src/locale/fa.ts @@ -0,0 +1,102 @@ +export default { + badge: 'نشان', + open: 'باز کردن', + close: 'بستن', + dismiss: 'رد کردن', + confirmEdit: { + ok: 'تایید', + cancel: 'لغو', + }, + dataIterator: { + noResultsText: 'نتیجه‌ای یافت نشد', + loadingText: 'در حال بارگذاری...', + }, + dataTable: { + itemsPerPageText: 'ردیف در صفحه:', + ariaLabel: { + sortDescending: 'مرتب‌سازی نزولی', + sortAscending: 'مرتب‌سازی صعودی', + sortNone: 'بدون مرتب‌سازی', + activateNone: 'غیرفعال‌سازی مرتب‌سازی', + activateDescending: 'غیرفعال‌سازی مرتب‌سازی نزولی', + activateAscending: 'غیرفعال‌سازی مرتب‌سازی صعودی', + }, + sortBy: 'مرتب‌سازی براساس', + }, + dataFooter: { + itemsPerPageText: 'ردیف در صفحه:', + itemsPerPageAll: 'همه', + nextPage: 'صفحه‌ی بعد', + prevPage: 'صفحه‌ی قبل', + firstPage: 'صفحه‌ی یکم', + lastPage: 'صفحه‌ی آخر', + pageText: '{0} تا {1} از {2}', + }, + dateRangeInput: { + divider: 'تا', + }, + datePicker: { + itemsSelected: '{0} انتخاب‌شده', + range: { + title: 'انتخاب تاریخ‌ها', + header: 'تاریخ‌ها را وارد کنید', + }, + title: 'انتخاب تاریخ', + header: 'تاریخ را وارد کنید', + input: { + placeholder: 'تاریخ را وارد کنید', + }, + }, + noDataText: 'داده‌ای موجود نیست', + carousel: { + prev: 'اسلاید قبلی', + next: 'اسلاید بعدی', + ariaLabel: { + delimiter: 'اسلاید {0} از {1}', + }, + }, + calendar: { + moreEvents: '{بیشتر {0', + today: 'امروز', + }, + input: { + clear: 'پاکسازی {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'لطفا کد را وارد کنید {0}', + }, + fileInput: { + counter: '{0} پرونده', + counterSize: '{0} پرونده ({1} در کل)', + }, + timePicker: { + am: 'قبل از ظهر', + pm: 'بعد از ظهر', + title: 'انتخاب زمان', + }, + pagination: { + ariaLabel: { + root: 'جهت یابی صفحه', + next: 'صفحه‌ی بعد', + previous: 'صفحه‌ی قبلی', + page: 'برو صفحه {0}', + currentPage: '{0} صفحه‌ی فعلی ، صفحه‌ی', + first: 'صفحه‌ی اول', + last: 'صفحه‌ی آخر', + }, + }, + stepper: { + next: 'بعدی', + prev: 'قبلی', + }, + rating: { + ariaLabel: { + item: 'امتیاز {0} از {1}', + }, + }, + loading: 'در حال بارگذاری...', + infiniteScroll: { + loadMore: 'بارگذاری بیشتر', + empty: 'پایان', + }, +} diff --git a/packages/alpinui/src/locale/fi.ts b/packages/alpinui/src/locale/fi.ts new file mode 100644 index 0000000..d03c070 --- /dev/null +++ b/packages/alpinui/src/locale/fi.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Infopiste', + open: 'Open', + close: 'Sulje', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Ei osumia', + loadingText: 'Ladataan kohteita...', + }, + dataTable: { + itemsPerPageText: 'Rivejä sivulla:', + ariaLabel: { + sortDescending: ': Järjestetty laskevasti. Poista järjestäminen aktivoimalla.', + sortAscending: ': Järjestetty nousevasti. Järjestä laskevasti aktivoimalla.', + sortNone: ': Ei järjestetty. Järjestä nousevasti aktivoimalla.', + activateNone: 'Aktivoi lajittelun poistamiseksi.', + activateDescending: 'Aktivoi laskevien laskevien lajittelemiseksi.', + activateAscending: 'Aktivoi lajitella nouseva.', + }, + sortBy: 'Järjestä', + }, + dataFooter: { + itemsPerPageText: 'Kohteita sivulla:', + itemsPerPageAll: 'Kaikki', + nextPage: 'Seuraava sivu', + prevPage: 'Edellinen sivu', + firstPage: 'Ensimmäinen sivu', + lastPage: 'Viimeinen sivu', + pageText: '{0}-{1} ({2})', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Ei dataa', + carousel: { + prev: 'Edellinen kuva', + next: 'Seuraava kuva', + ariaLabel: { + delimiter: 'Karusellin kuva {0}/{1}', + }, + }, + calendar: { + moreEvents: '{0} lisää', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} tiedostoa', + counterSize: '{0} tiedostoa ({1} yhteensä)', + }, + timePicker: { + am: 'ap.', + pm: 'ip.', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Pagination Navigation', + next: 'Seuraava sivu', + previous: 'Edellinen sivu', + page: 'Mene sivulle {0}', + currentPage: 'Nykyinen sivu, Sivu {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Luokitus {0}/{1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/fr.ts b/packages/alpinui/src/locale/fr.ts new file mode 100644 index 0000000..717e290 --- /dev/null +++ b/packages/alpinui/src/locale/fr.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Badge', + open: 'Ouvrir', + close: 'Fermer', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Annuler', + }, + dataIterator: { + noResultsText: 'Aucun enregistrement correspondant trouvé', + loadingText: `Chargement de l'élément...`, + }, + dataTable: { + itemsPerPageText: 'Lignes par page :', + ariaLabel: { + sortDescending: 'Tri décroissant.', + sortAscending: 'Tri croissant.', + sortNone: 'Non trié.', + activateNone: 'Activer pour supprimer le tri.', + activateDescending: 'Activer pour trier par ordre décroissant.', + activateAscending: 'Activer pour trier par ordre croissant.', + }, + sortBy: 'Trier par', + }, + dataFooter: { + itemsPerPageText: 'Éléments par page :', + itemsPerPageAll: 'Tous', + nextPage: 'Page suivante', + prevPage: 'Page précédente', + firstPage: 'Première page', + lastPage: 'Dernière page', + pageText: '{0}-{1} de {2}', + }, + dateRangeInput: { + divider: 'à', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Sélectionner des dates', + header: 'Entrer des dates', + }, + title: 'Sélectionner une date', + header: 'Entrer une date', + input: { + placeholder: 'Entrer une date', + }, + }, + noDataText: 'Aucune donnée disponible', + carousel: { + prev: 'Visuel précédent', + next: 'Visuel suivant', + ariaLabel: { + delimiter: 'Diapositive {0} de {1}', + }, + }, + calendar: { + moreEvents: '{0} de plus', + today: 'Today', + }, + input: { + clear: 'Vider {0}', + prependAction: '{0} action avant', + appendAction: '{0} action après', + otp: 'Caractère {0} du mot de passe à usage unique', + }, + fileInput: { + counter: '{0} fichier(s)', + counterSize: '{0} fichier(s) ({1} au total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigation de pagination', + next: 'Page suivante', + previous: 'Page précédente', + page: 'Aller à la page {0}', + currentPage: 'Page actuelle, Page {0}', + first: 'Première page', + last: 'Dernière page', + }, + }, + stepper: { + next: 'Suivant', + prev: 'Précédent', + }, + rating: { + ariaLabel: { + item: 'Note de {0} sur {1}', + }, + }, + loading: 'Chargement...', + infiniteScroll: { + loadMore: 'Charger plus', + empty: 'Aucune donnée supplémentaire', + }, +} diff --git a/packages/alpinui/src/locale/he.ts b/packages/alpinui/src/locale/he.ts new file mode 100644 index 0000000..ebc04e4 --- /dev/null +++ b/packages/alpinui/src/locale/he.ts @@ -0,0 +1,102 @@ +export default { + badge: 'תג', + open: 'Open', + close: 'סגור', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'לא נמצאו תוצאות מתאימות', + loadingText: 'טוען פריט...', + }, + dataTable: { + itemsPerPageText: 'שורות לעמוד:', + ariaLabel: { + sortDescending: 'ממוין לפי סדר עולה. לחץ להספקת המיון.', + sortAscending: 'ממוין לפי סדר יורד. לחץ למיון לפי סדר עולה.', + sortNone: 'לא ממוין. לחץ למיון לפי סדר עולה.', + activateNone: 'הפעל להסרת המיון.', + activateDescending: 'הפעל למיון יורד.', + activateAscending: 'הפעל למיון עולה.', + }, + sortBy: 'סדר לפי', + }, + dataFooter: { + itemsPerPageText: 'פריטים לדף:', + itemsPerPageAll: 'הכל', + nextPage: 'עמוד הבא', + prevPage: 'עמוד הקודם', + firstPage: 'עמוד ראשון', + lastPage: 'עמוד אחרון', + pageText: '{0}-{1} מתוך {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'אין נתונים זמינים', + carousel: { + prev: 'מצג קודם', + next: 'מצג הבא', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} נוספים', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} קבצים', + counterSize: '{0} קבצים ({1} בסך הכל)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'ניווט עימוד', + next: 'עמוד הבא', + previous: 'עמוד הקודם', + page: '{0} לך לעמוד', + currentPage: '{0} עמוד נוכחי, עמוד', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/hr.ts b/packages/alpinui/src/locale/hr.ts new file mode 100644 index 0000000..d24be21 --- /dev/null +++ b/packages/alpinui/src/locale/hr.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Bedž', + open: 'Open', + close: 'Zatvori', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Nisu pronađene odgovarajuće stavke', + loadingText: 'Učitavanje...', + }, + dataTable: { + itemsPerPageText: 'Redaka po stranici:', + ariaLabel: { + sortDescending: 'Sortirano silazno.', + sortAscending: 'Sortirano uzlazno.', + sortNone: 'Nije sortirano.', + activateNone: 'Odaberite za uklanjanje sortiranja.', + activateDescending: 'Odaberite za silazno sortiranje.', + activateAscending: 'Odaberite za uzlazno sortiranje.', + }, + sortBy: 'Sortirajte po', + }, + dataFooter: { + itemsPerPageText: 'Stavki po stranici:', + itemsPerPageAll: 'Sve', + nextPage: 'Sljedeća stranica', + prevPage: 'Prethodna stranica', + firstPage: 'Prva stranica', + lastPage: 'Posljednja stranica', + pageText: '{0}-{1} od {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Nema dostupnih podataka', + carousel: { + prev: 'Prethodno', + next: 'Sljedeće', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: 'Još {0}', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: 'Odabranih datoteka: {0}', + counterSize: 'Odabranih datoteka: {0} ({1} ukupno)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigacija stranicama', + next: 'Sljedeća stranica', + previous: 'Prethodna stranica', + page: 'Idi na stranicu {0}', + currentPage: 'Trenutna stranica, stranica {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/hu.ts b/packages/alpinui/src/locale/hu.ts new file mode 100644 index 0000000..d23db5b --- /dev/null +++ b/packages/alpinui/src/locale/hu.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Jelvény', + open: 'Megnyit', + close: 'Bezárás', + dismiss: 'Elutasít', + confirmEdit: { + ok: 'OK', + cancel: 'Mégsem', + }, + dataIterator: { + noResultsText: 'Nincs egyező találat', + loadingText: 'Betöltés...', + }, + dataTable: { + itemsPerPageText: 'Elem oldalanként:', + ariaLabel: { + sortDescending: 'Csökkenő sorrendbe rendezve.', + sortAscending: 'Növekvő sorrendbe rendezve.', + sortNone: 'Rendezetlen.', + activateNone: 'Rendezés törlése.', + activateDescending: 'Aktiváld a csökkenő rendezésért.', + activateAscending: 'Aktiváld a növekvő rendezésért.', + }, + sortBy: 'Rendezés', + }, + dataFooter: { + itemsPerPageText: 'Elem oldalanként:', + itemsPerPageAll: 'Mind', + nextPage: 'Következő oldal', + prevPage: 'Előző oldal', + firstPage: 'Első oldal', + lastPage: 'Utolsó oldal', + pageText: '{0}-{1} / {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} kiválasztva', + range: { + title: 'Válassza ki a dátumokat', + header: 'Adja meg a dátumokat', + }, + title: 'Válassza ki a dátumot', + header: 'Adja meg a dátumot', + input: { + placeholder: 'Adja meg a dátumot', + }, + }, + noDataText: 'Nincs elérhető adat', + carousel: { + prev: 'Előző', + next: 'Következő', + ariaLabel: { + delimiter: 'Dia {0}/{1}', + }, + }, + calendar: { + moreEvents: '{0} további', + today: 'Ma', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} fájl', + counterSize: '{0} fájl ({1} összesen)', + }, + timePicker: { + am: 'de', + pm: 'du', + title: 'Válassza ki az időpontot', + }, + pagination: { + ariaLabel: { + root: 'Oldal navigáció', + next: 'Következő oldal', + previous: 'Előző oldal', + page: 'Menj a(z) {0}. oldalra', + currentPage: 'Aktuális oldal: {0}', + first: 'Első oldal', + last: 'Utolsó oldal', + }, + }, + stepper: { + next: 'Következő', + prev: 'Előző', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Betöltés...', + infiniteScroll: { + loadMore: 'Továbbiak', + empty: 'Nincsen több', + }, +} diff --git a/packages/alpinui/src/locale/id.ts b/packages/alpinui/src/locale/id.ts new file mode 100644 index 0000000..ad689c5 --- /dev/null +++ b/packages/alpinui/src/locale/id.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Lencana', + open: 'Open', + close: 'Tutup', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Tidak ditemukan catatan yang cocok', + loadingText: 'Memuat data...', + }, + dataTable: { + itemsPerPageText: 'Baris per halaman:', + ariaLabel: { + sortDescending: 'Diurutkan kebawah.', + sortAscending: 'Diurutkan keatas.', + sortNone: 'Tidak diurutkan.', + activateNone: 'Aktifkan untuk menghapus penyortiran.', + activateDescending: 'Aktifkan untuk mengurutkan kebawah.', + activateAscending: 'Aktifkan untuk mengurutkan keatas.', + }, + sortBy: 'Urutkan berdasar', + }, + dataFooter: { + itemsPerPageText: 'Item per halaman:', + itemsPerPageAll: 'Semua', + nextPage: 'Halaman selanjutnya', + prevPage: 'Halaman sebelumnya', + firstPage: 'Halaman pertama', + lastPage: 'Halaman terakhir', + pageText: '{0}-{1} dari {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Tidak ada data tersedia', + carousel: { + prev: 'Visual sebelumnya', + next: 'Visual selanjutnya', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} lagi', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} berkas', + counterSize: '{0} berkas (dari total {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigasi Pagination', + next: 'Halaman selanjutnya', + previous: 'Halaman sebelumnya', + page: 'Buka halaman {0}', + currentPage: 'Halaman Saat Ini, Halaman {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/index.ts b/packages/alpinui/src/locale/index.ts new file mode 100755 index 0000000..770a871 --- /dev/null +++ b/packages/alpinui/src/locale/index.ts @@ -0,0 +1,43 @@ +export { default as af } from './af' +export { default as ar } from './ar' +export { default as bg } from './bg' +export { default as ca } from './ca' +export { default as ckb } from './ckb' +export { default as cs } from './cs' +export { default as da } from './da' +export { default as de } from './de' +export { default as el } from './el' +export { default as en } from './en' +export { default as es } from './es' +export { default as et } from './et' +export { default as fa } from './fa' +export { default as fi } from './fi' +export { default as fr } from './fr' +export { default as hr } from './hr' +export { default as hu } from './hu' +export { default as he } from './he' +export { default as id } from './id' +export { default as it } from './it' +export { default as ja } from './ja' +export { default as km } from './km' +export { default as ko } from './ko' +export { default as lv } from './lv' +export { default as lt } from './lt' +export { default as nl } from './nl' +export { default as no } from './no' +export { default as pl } from './pl' +export { default as pt } from './pt' +export { default as ro } from './ro' +export { default as ru } from './ru' +export { default as sk } from './sk' +export { default as sl } from './sl' +export { default as srCyrl } from './sr-Cyrl' +export { default as srLatn } from './sr-Latn' +export { default as sv } from './sv' +export { default as th } from './th' +export { default as tr } from './tr' +export { default as az } from './az' +export { default as uk } from './uk' +export { default as vi } from './vi' +export { default as zhHans } from './zh-Hans' +export { default as zhHant } from './zh-Hant' diff --git a/packages/alpinui/src/locale/it.ts b/packages/alpinui/src/locale/it.ts new file mode 100644 index 0000000..cc2d11e --- /dev/null +++ b/packages/alpinui/src/locale/it.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Distintivo', + open: 'Apri', + close: 'Chiudi', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Annulla', + }, + dataIterator: { + noResultsText: 'Nessun risultato trovato', + loadingText: 'Caricamento in corso...', + }, + dataTable: { + itemsPerPageText: 'Righe per pagina:', + ariaLabel: { + sortDescending: 'Ordinati in ordine decrescente.', + sortAscending: 'Ordinati in ordine crescente.', + sortNone: 'Non ordinato.', + activateNone: `Attiva per rimuovere l'ordinamento.`, + activateDescending: 'Attiva per ordinare in ordine decrescente.', + activateAscending: 'Attiva per ordinare in ordine crescente.', + }, + sortBy: 'Ordina per', + }, + dataFooter: { + itemsPerPageText: 'Elementi per pagina:', + itemsPerPageAll: 'Tutti', + nextPage: 'Pagina seguente', + prevPage: 'Pagina precedente', + firstPage: 'Prima pagina', + lastPage: 'Ultima pagina', + pageText: '{0}-{1} di {2}', + }, + dateRangeInput: { + divider: 'a', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Seleziona date', + header: 'Inserisci date', + }, + title: 'Seleziona data', + header: 'Inserisci data', + input: { + placeholder: 'Inserisci data', + }, + }, + noDataText: 'Nessun elemento disponibile', + carousel: { + prev: 'Vista precedente', + next: 'Prossima vista', + ariaLabel: { + delimiter: 'Slide carosello {0} di {1}', + }, + }, + calendar: { + moreEvents: '{0} di più', + today: 'Today', + }, + input: { + clear: 'Cancella {0}', + prependAction: 'Azione precedente {0}', + appendAction: 'Azione successiva {0}', + otp: 'Inserisci il codice OTP {0}', + }, + fileInput: { + counter: '{0} file', + counterSize: '{0} file ({1} in totale)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigazione impaginazione', + next: 'Pagina seguente', + previous: 'Pagina precedente', + page: 'Vai alla pagina {0}', + currentPage: 'Pagina corrente, pagina {0}', + first: 'Prima pagina', + last: 'Ultima pagina', + }, + }, + stepper: { + next: 'Successivo', + prev: 'Precedente', + }, + rating: { + ariaLabel: { + item: 'Valutazione {0} di {1}', + }, + }, + loading: 'Caricamento...', + infiniteScroll: { + loadMore: 'Carica altro', + empty: 'Nessun elemento', + }, +} diff --git a/packages/alpinui/src/locale/ja.ts b/packages/alpinui/src/locale/ja.ts new file mode 100644 index 0000000..1156492 --- /dev/null +++ b/packages/alpinui/src/locale/ja.ts @@ -0,0 +1,102 @@ +export default { + badge: 'バッジ', + open: 'Open', + close: '閉じる', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: '検索結果が見つかりません。', + loadingText: '項目をロード中です...', + }, + dataTable: { + itemsPerPageText: '1ページあたりの行数：', + ariaLabel: { + sortDescending: '降順の並び替え。', + sortAscending: '昇順の並び替え。', + sortNone: 'ソートされていません。', + activateNone: 'ソートを削除するには有効にしてください。', + activateDescending: '降順の並び替えのためには有効にしてください。', + activateAscending: '昇順のソートのためには有効にしてください。', + }, + sortBy: 'ソート方式', + }, + dataFooter: { + itemsPerPageText: '1ページあたりの件数：', + itemsPerPageAll: 'すべて', + nextPage: '次のページ', + prevPage: '前のページ', + firstPage: '最初のページ', + lastPage: '最後のページ', + pageText: '{0}-{1} 件目 / {2}件', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'データはありません。', + carousel: { + prev: '前のビジュアル', + next: '次のビジュアル', + ariaLabel: { + delimiter: 'カルーセルのスライド {0}件目 / {1}件', + }, + }, + calendar: { + moreEvents: 'さらに{0}', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} ファイル', + counterSize: '{0} ファイル (合計 {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'ページネーションナビゲーション', + next: '次のページ', + previous: '前のページ', + page: '{0}ページ目に移動', + currentPage: '現在のページ、ページ {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: '評価 {1} のうち {0}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/km.ts b/packages/alpinui/src/locale/km.ts new file mode 100644 index 0000000..10c1cd7 --- /dev/null +++ b/packages/alpinui/src/locale/km.ts @@ -0,0 +1,102 @@ +export default { + badge: 'ផ្លាក', + open: 'បើក', + close: 'បិទ', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'យល់ព្រម', + cancel: 'បោះបង់', + }, + dataIterator: { + noResultsText: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ', + loadingText: 'កំពុងដំណើរការ...', + }, + dataTable: { + itemsPerPageText: 'ជ្រើសរើសពត៌មានក្នុងមួយទំព័រ:', + ariaLabel: { + sortDescending: 'តំណទំហំចុះរួម។', + sortAscending: 'តំណទំហំឡើងរួម។', + sortNone: 'មិនចុះរួម។', + activateNone: 'ចុចដើម្បីដកតំណទំហំ។', + activateDescending: 'ចុចដើម្បីតំណទំហំចុះរួម។', + activateAscending: 'ចុចដើម្បីតំណទំហំឡើងរួម។', + }, + sortBy: 'តម្រៀបតាម', + }, + dataFooter: { + itemsPerPageText: 'ទំនិញក្នុងមួយទំព័រ:', + itemsPerPageAll: 'ទាំងអស់', + nextPage: 'ទំព័របន្ទាប់', + prevPage: 'ទំព័រមុន', + firstPage: 'ទំព័រដំបូង', + lastPage: 'ទំព័រចុងក្រោយ', + pageText: '{0}-{1} នៃ {2}', + }, + dateRangeInput: { + divider: 'ដល់', + }, + datePicker: { + itemsSelected: '{0} ត្រូវបានជ្រើសរើស', + range: { + title: 'ជ្រើសរើសកាលបរិច្ឆេទ', + header: 'បញ្ចូលកាលបរិច្ឆេទ', + }, + title: 'ជ្រើសរើសកាលបរិច្ឆេទ', + header: 'បញ្ចូលកាលបរិច្ឆេទ', + input: { + placeholder: 'បញ្ចូលកាលបរិច្ឆេទ', + }, + }, + noDataText: 'គ្មានទិន្នន័យដែលមាន', + carousel: { + prev: 'រុករករូបភាពមុន', + next: 'រុករករូបភាពបន្ទាប់', + ariaLabel: { + delimiter: 'រូបភាពទី {0} នៃ {1} ក្នុងកម្រិតការរុករក', + }, + }, + calendar: { + moreEvents: '{0} ទៀត', + today: 'Today', + }, + input: { + clear: 'សម្អាត {0}', + prependAction: '{0} សម្អាតសកម្ម', + appendAction: '{0} សម្អាតសកម្ម', + otp: 'សូមបញ្ចូលតួអក្សរ OTP {0}', + }, + fileInput: { + counter: '{0} ឯកសារ', + counterSize: '{0} ឯកសារ ({1} សរុប)', + }, + timePicker: { + am: 'ព្រឹក', + pm: 'ល្ងាច', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'ការរុករកទំព័រ', + next: 'ទំព័របន្ទាប់', + previous: 'ទំព័រមុន', + page: 'ទៅទំព័រ {0}', + currentPage: 'ទំព័រ {0}, ទំព័របច្ចុប្បន្ន', + first: 'ទំព័រដំបូង', + last: 'ទំព័រចុងក្រោយ', + }, + }, + stepper: { + next: 'បន្ទាប់', + prev: 'មុន', + }, + rating: { + ariaLabel: { + item: 'ការវាយតម្លៃ {0} នៃ {1}', + }, + }, + loading: 'កំពុងដំណើរការ...', + infiniteScroll: { + loadMore: 'ទាញយកបន្ថែម', + empty: 'គ្មានទំព័រទៀត', + }, +} diff --git a/packages/alpinui/src/locale/ko.ts b/packages/alpinui/src/locale/ko.ts new file mode 100644 index 0000000..1a0782e --- /dev/null +++ b/packages/alpinui/src/locale/ko.ts @@ -0,0 +1,102 @@ +export default { + badge: '배지', + open: 'Open', + close: '닫기', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: '일치하는 항목이 없습니다.', + loadingText: '불러오는 중...', + }, + dataTable: { + itemsPerPageText: '페이지 당 행 수:', + ariaLabel: { + sortDescending: '내림차순 정렬.', + sortAscending: '오름차순 정렬.', + sortNone: '정렬하지 않음.', + activateNone: '정렬을 취소하려면 활성화하세요.', + activateDescending: '내림차순 정렬을 위해 활성화하세요.', + activateAscending: '오름차순 정렬을 위해 활성화하세요.', + }, + sortBy: 'Sort by', + }, + dataFooter: { + itemsPerPageText: '페이지 당 항목 수:', + itemsPerPageAll: '전체', + nextPage: '다음 페이지', + prevPage: '이전 페이지', + firstPage: '첫 페이지', + lastPage: '마지막 페이지', + pageText: '{2} 중 {0}-{1}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: '데이터가 없습니다.', + carousel: { + prev: '이전 화면', + next: '다음 화면', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '{0} 더보기', + today: '오늘', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} files', + counterSize: '{0} files ({1} in total)', + }, + timePicker: { + am: '오전', + pm: '오후', + title: '시간을 선택하세요.', + }, + pagination: { + ariaLabel: { + root: 'Pagination Navigation', + next: '다음 페이지', + previous: '이전 페이지', + page: '{0} 페이지로 이동', + currentPage: '현재 페이지, 페이지 {0}', + first: '첫 페이지', + last: '마지막 페이지', + }, + }, + stepper: { + next: '다음', + prev: '이전', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: '불러오는 중...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/lt.ts b/packages/alpinui/src/locale/lt.ts new file mode 100644 index 0000000..307340e --- /dev/null +++ b/packages/alpinui/src/locale/lt.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Ženklelis', + open: 'Atidaryti', + close: 'Uždaryti', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Atšaukti', + }, + dataIterator: { + noResultsText: 'Nerasta atitinkančių įrašų', + loadingText: 'Kraunama...', + }, + dataTable: { + itemsPerPageText: 'Eilutės per puslapį:', + ariaLabel: { + sortDescending: 'Išrikiuota mažėjimo tvarka.', + sortAscending: 'Išrikiuota didėjimo tvarka.', + sortNone: 'Nerikiuota.', + activateNone: 'Suaktyvinkite, jei norite rikiavimą pašalinti.', + activateDescending: 'Suaktyvinkite, jei norite rikiuoti mažėjimo tvarka.', + activateAscending: 'Suaktyvinkite, jei norite rikiuoti didėjimo tvarka.', + }, + sortBy: 'Rikiuoti pagal', + }, + dataFooter: { + itemsPerPageText: 'Įrašai per puslapį:', + itemsPerPageAll: 'Visi', + nextPage: 'Kitas puslapis', + prevPage: 'Ankstesnis puslapis', + firstPage: 'Pirmas puslapis', + lastPage: 'Paskutinis puslapis', + pageText: '{0}-{1} iš {2}', + }, + dateRangeInput: { + divider: 'iki', + }, + datePicker: { + itemsSelected: '{0} parinkta', + range: { + title: 'Pasirinkite datas', + header: 'Įveskite datas', + }, + title: 'Pasirinkite datą', + header: 'Įveskite datą', + input: { + placeholder: 'Įveskite datą', + }, + }, + noDataText: 'Nėra duomenų', + carousel: { + prev: 'Ankstesnioji skaidrė', + next: 'Kita skaidrė', + ariaLabel: { + delimiter: 'Skaidrė {0} iš {1}', + }, + }, + calendar: { + moreEvents: 'Daugiau {0}', + today: 'Šiandien', + }, + input: { + clear: 'Išvalyti {0}', + prependAction: '{0} pridėtas veiksmas', + appendAction: '{0} pridėtas veiksmas', + otp: 'Prašome įvesti OTP simbolį {0}', + }, + fileInput: { + counter: '{0} failų', + counterSize: '{0} failų ({1} iš viso)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Pasirinkite laiką', + }, + pagination: { + ariaLabel: { + root: 'Puslapio naršymas', + next: 'Kitas puslapis', + previous: 'Ankstesnis puslapis', + page: 'Eiti į puslapį {0}', + currentPage: 'Dabartinis puslapis, puslapis {0}', + first: 'Pirmas puslapis', + last: 'Paskutinis puslapis', + }, + }, + stepper: { + next: 'Kitas', + prev: 'Ankstesnis', + }, + rating: { + ariaLabel: { + item: 'Įvertinimas {0} iš {1}', + }, + }, + loading: 'Kraunama...', + infiniteScroll: { + loadMore: 'Užkrauti daugiau', + empty: 'Daugiau nėra', + }, +} diff --git a/packages/alpinui/src/locale/lv.ts b/packages/alpinui/src/locale/lv.ts new file mode 100644 index 0000000..eb49358 --- /dev/null +++ b/packages/alpinui/src/locale/lv.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Žetons', + open: 'Open', + close: 'Aizvērt', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Nekas netika atrasts', + loadingText: 'Ielādē...', + }, + dataTable: { + itemsPerPageText: 'Rādīt lapā:', + ariaLabel: { + sortDescending: 'Sakārtots dilstošā secībā.', + sortAscending: 'Sakārtots augošā secībā.', + sortNone: 'Nav sakārtots.', + activateNone: 'Aktivizēt, lai noņemtu kārtošanu.', + activateDescending: 'Aktivizēt, lai sakārtotu dilstošā secībā.', + activateAscending: 'Aktivizēt, lai sakārtotu augošā secībā.', + }, + sortBy: 'Sort by', + }, + dataFooter: { + itemsPerPageText: 'Rādīt lapā:', + itemsPerPageAll: 'Visu', + nextPage: 'Nākamā lapa', + prevPage: 'Iepriekšējā lapa', + firstPage: 'Pirmā lapa', + lastPage: 'Pēdējā lapa', + pageText: '{0}-{1} no {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Nav pieejamu datu', + carousel: { + prev: 'Iepriekšējais slaids', + next: 'Nākamais slaids', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: 'Vēl {0}', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} files', + counterSize: '{0} files ({1} in total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigācija paginationā', + next: 'Nākamā lapa', + previous: 'Iepriekšējā lapa', + page: 'Iet uz lapu {0}', + currentPage: 'Pašreizējā lapa, lapa {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/nl.ts b/packages/alpinui/src/locale/nl.ts new file mode 100644 index 0000000..b8c6032 --- /dev/null +++ b/packages/alpinui/src/locale/nl.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Insigne', + open: 'Openen', + close: 'Sluiten', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Annuleren', + }, + dataIterator: { + noResultsText: 'Geen overeenkomende resultaten gevonden', + loadingText: 'Items aan het laden...', + }, + dataTable: { + itemsPerPageText: 'Rijen per pagina:', + ariaLabel: { + sortDescending: 'Aflopend gesorteerd.', + sortAscending: 'Oplopend gesorteerd.', + sortNone: 'Niet gesorteerd.', + activateNone: 'Activeer om de sortering te verwijderen.', + activateDescending: 'Activeer om aflopend te sorteren.', + activateAscending: 'Activeer om oplopend te sorteren.', + }, + sortBy: 'Sorteer volgens', + }, + dataFooter: { + itemsPerPageText: 'Aantal per pagina:', + itemsPerPageAll: 'Alles', + nextPage: 'Volgende pagina', + prevPage: 'Vorige pagina', + firstPage: 'Eerste pagina', + lastPage: 'Laatste pagina', + pageText: '{0}-{1} van {2}', + }, + dateRangeInput: { + divider: 'tot', + }, + datePicker: { + itemsSelected: '{0} geselecteerd', + range: { + title: 'Selecteer datums', + header: 'Voer datums in', + }, + title: 'Selecteer datum', + header: 'Voer datum in', + input: { + placeholder: 'Voer datum in', + }, + }, + noDataText: 'Geen gegevens beschikbaar', + carousel: { + prev: 'Vorig beeld', + next: 'Volgend beeld', + ariaLabel: { + delimiter: 'Carrousel beeld {0} van {1}', + }, + }, + calendar: { + moreEvents: '{0} meer', + today: 'Vandaag', + }, + input: { + clear: 'Maak {0} leeg', + prependAction: '{0} voorafgaande actie', + appendAction: '{0} bijgevoegde actie', + otp: 'Vul alsjeblieft OTP karakter {0} in', + }, + fileInput: { + counter: '{0} bestanden', + counterSize: '{0} bestanden ({1} in totaal)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Pagina navigatie', + next: 'Volgende pagina', + previous: 'Vorige pagina', + page: 'Ga naar pagina {0}', + currentPage: 'Huidige pagina, pagina {0}', + first: 'Eerste pagina', + last: 'Laatste pagina', + }, + }, + stepper: { + next: 'Volgende', + prev: 'Vorige', + }, + rating: { + ariaLabel: { + item: 'Beoordeling {0} van {1}', + }, + }, + loading: 'Aan het laden...', + infiniteScroll: { + loadMore: 'Laad meer', + empty: 'Niet meer', + }, +} diff --git a/packages/alpinui/src/locale/no.ts b/packages/alpinui/src/locale/no.ts new file mode 100644 index 0000000..c9fc72d --- /dev/null +++ b/packages/alpinui/src/locale/no.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Skilt', + open: 'Åpne', + close: 'Lukk', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Avbryt', + }, + dataIterator: { + noResultsText: 'Fant ingen matchende elementer.', + loadingText: 'Laster elementer...', + }, + dataTable: { + itemsPerPageText: 'Rader per side:', + ariaLabel: { + sortDescending: 'Sortert synkende.', + sortAscending: 'Sortert stigende.', + sortNone: 'Ikke sortert.', + activateNone: 'Aktiver for å fjerne sortering.', + activateDescending: 'Aktiver for å sortere synkende.', + activateAscending: 'Aktiver for å sortere stigende.', + }, + sortBy: 'Sorter etter', + }, + dataFooter: { + itemsPerPageText: 'Elementer per side:', + itemsPerPageAll: 'Alle', + nextPage: 'Neste side', + prevPage: 'Forrige side', + firstPage: 'Første side', + lastPage: 'Siste side', + pageText: '{0}-{1} av {2}', + }, + dateRangeInput: { + divider: 'til', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Velg datoer', + header: 'Velg datoer', + }, + title: 'Velg dato', + header: 'Velg dato', + input: { + placeholder: 'Fyll inn dato', + }, + }, + noDataText: 'Ingen data er tilgjengelig', + carousel: { + prev: 'Forrige bilde', + next: 'Neste bilde', + ariaLabel: { + delimiter: 'Karusellbilde {0} av {1}', + }, + }, + calendar: { + moreEvents: '{0} flere', + today: 'Today', + }, + input: { + clear: 'Fjern {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} filer', + counterSize: '{0} filer ({1} totalt)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Paginasjonsnavigasjon', + next: 'Neste side', + previous: 'Forrige side', + page: 'Gå til side {0}', + currentPage: 'Gjeldende side, side {0}', + first: 'Første side', + last: 'Siste side', + }, + }, + stepper: { + next: 'Neste', + prev: 'Forrige', + }, + rating: { + ariaLabel: { + item: 'Anmeldelse {0} av {1}', + }, + }, + loading: 'Laster...', + infiniteScroll: { + loadMore: 'Last flere', + empty: 'Det var alt', + }, +} diff --git a/packages/alpinui/src/locale/pl.ts b/packages/alpinui/src/locale/pl.ts new file mode 100644 index 0000000..0e45ad3 --- /dev/null +++ b/packages/alpinui/src/locale/pl.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Odznaka', + open: 'Otwórz', + close: 'Zamknij', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Anuluj', + }, + dataIterator: { + noResultsText: 'Nie znaleziono danych odpowiadających wyszukiwaniu', + loadingText: 'Wczytywanie danych...', + }, + dataTable: { + itemsPerPageText: 'Wierszy na stronie:', + ariaLabel: { + sortDescending: 'Sortowanie malejąco. Kliknij aby zmienić.', + sortAscending: 'Sortowanie rosnąco. Kliknij aby zmienić.', + sortNone: 'Bez sortowania. Kliknij aby posortować rosnąco.', + activateNone: 'Kliknij aby usunąć sortowanie.', + activateDescending: 'Kliknij aby posortować malejąco.', + activateAscending: 'Kliknij aby posortować rosnąco.', + }, + sortBy: 'Sortuj według', + }, + dataFooter: { + itemsPerPageText: 'Pozycji na stronie:', + itemsPerPageAll: 'Wszystkie', + nextPage: 'Następna strona', + prevPage: 'Poprzednia strona', + firstPage: 'Pierwsza strona', + lastPage: 'Ostatnia strona', + pageText: '{0}-{1} z {2}', + }, + dateRangeInput: { + divider: 'do', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Wybór zakresu dat', + header: 'Wprowadź zakres dat', + }, + title: 'Wybór daty', + header: 'Wprowadź datę', + input: { + placeholder: 'Wprowadź datę', + }, + }, + noDataText: 'Brak danych', + carousel: { + prev: 'Poprzedni obraz', + next: 'Następny obraz', + ariaLabel: { + delimiter: 'Obraz {0} z {1}', + }, + }, + calendar: { + moreEvents: '{0} więcej', + today: 'Today', + }, + input: { + clear: 'Wyczyść {0}', + prependAction: '{0} dodatkowa akcja', + appendAction: '{0} dodatkowa akcja', + otp: 'Proszę wprowadzić znak nr {0}', + }, + fileInput: { + counter: 'Liczba plików: {0}', + counterSize: 'Liczba plików: {0} (łącznie {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Nawigacja paginacyjna', + next: 'Następna strona', + previous: 'Poprzednia strona', + page: 'Idź do strony {0}', + currentPage: 'Bieżąca strona, strona {0}', + first: 'Pierwsza strona', + last: 'Ostatnia strona', + }, + }, + stepper: { + next: 'Następny', + prev: 'Poprzedni', + }, + rating: { + ariaLabel: { + item: 'Ocena {0} na {1}', + }, + }, + loading: 'Wczytywanie danych...', + infiniteScroll: { + loadMore: 'Wczytaj więcej', + empty: 'Brak kolejnych danych', + }, +} diff --git a/packages/alpinui/src/locale/pt.ts b/packages/alpinui/src/locale/pt.ts new file mode 100644 index 0000000..d6094cb --- /dev/null +++ b/packages/alpinui/src/locale/pt.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Distintivo', + open: 'Abrir', + close: 'Fechar', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Nenhum dado encontrado', + loadingText: 'Carregando itens...', + }, + dataTable: { + itemsPerPageText: 'Linhas por página:', + ariaLabel: { + sortDescending: 'Ordenado decrescente.', + sortAscending: 'Ordenado crescente.', + sortNone: 'Não ordenado.', + activateNone: 'Ative para remover a ordenação.', + activateDescending: 'Ative para ordenar decrescente.', + activateAscending: 'Ative para ordenar crescente.', + }, + sortBy: 'Ordenar por', + }, + dataFooter: { + itemsPerPageText: 'Itens por página:', + itemsPerPageAll: 'Todos', + nextPage: 'Próxima página', + prevPage: 'Página anterior', + firstPage: 'Primeira página', + lastPage: 'Última página', + pageText: '{0}-{1} de {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selecionados', + range: { + title: 'Selecione as datas', + header: 'Digite as datas', + }, + title: 'Selecione a data', + header: 'Digite a data', + input: { + placeholder: 'Insira a data', + }, + }, + noDataText: 'Não há dados disponíveis', + carousel: { + prev: 'Visão anterior', + next: 'Próxima visão', + ariaLabel: { + delimiter: 'Slide {0} de {1} do carrossel', + }, + }, + calendar: { + moreEvents: 'Mais {0}', + today: 'Today', + }, + input: { + clear: 'Limpar {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Por favor insira o caracter OTP {0}', + }, + fileInput: { + counter: '{0} arquivo(s)', + counterSize: '{0} arquivo(s) ({1} no total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navegação de paginação', + next: 'Próxima página', + previous: 'Página anterior', + page: 'Ir à página {0}', + currentPage: 'Página atual, página {0}', + first: 'Primeira página', + last: 'Última página', + }, + }, + stepper: { + next: 'Próximo', + prev: 'Anterior', + }, + rating: { + ariaLabel: { + item: 'Avaliação {0} de {1}', + }, + }, + loading: 'Carregando...', + infiniteScroll: { + loadMore: 'Carregar mais', + empty: 'Não há mais dados', + }, +} diff --git a/packages/alpinui/src/locale/ro.ts b/packages/alpinui/src/locale/ro.ts new file mode 100644 index 0000000..615b286 --- /dev/null +++ b/packages/alpinui/src/locale/ro.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Insignă', + open: 'Open', + close: 'Închideți', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Anulează', + }, + dataIterator: { + noResultsText: 'Nu s-au găsit înregistrări corespunzătoare', + loadingText: 'Se încarcă articolele...', + }, + dataTable: { + itemsPerPageText: 'Rânduri pe pagină:', + ariaLabel: { + sortDescending: 'Sortate descendent.', + sortAscending: 'Sortate ascendent.', + sortNone: 'Nesortate.', + activateNone: 'Activați pentru a elimina sortarea.', + activateDescending: 'Activați pentru a sorta descendent.', + activateAscending: 'Activați pentru a sorta ascendent.', + }, + sortBy: 'Sortați după', + }, + dataFooter: { + itemsPerPageText: 'Articole pe pagină:', + itemsPerPageAll: 'Toate', + nextPage: 'Pagina următoare', + prevPage: 'Pagina anterioară', + firstPage: 'Prima pagină', + lastPage: 'Ultima pagină', + pageText: '{0}-{1} din {2}', + }, + dateRangeInput: { + divider: 'până la', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Selectați datele', + header: 'Introduceți datele', + }, + title: 'Selectați data', + header: 'Introduceți data', + input: { + placeholder: 'Introduceți data', + }, + }, + noDataText: 'Nu există date disponibile', + carousel: { + prev: 'Vizualul anterior', + next: 'Vizualul următor', + ariaLabel: { + delimiter: 'Slide carusel {0} din {1}', + }, + }, + calendar: { + moreEvents: 'încă {0}', + today: 'Today', + }, + input: { + clear: 'Șterge {0}', + prependAction: '{0} acțiune de inserare la început', + appendAction: '{0} acțiune de inserare la sfârșit', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} fișiere', + counterSize: '{0} fișiere ({1} în total)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigare prin pagini', + next: 'Pagina următoare', + previous: 'Pagina anterioară', + page: 'Mergeți la pagina {0}', + currentPage: 'Pagina curentă, pagina {0}', + first: 'Prima pagină', + last: 'Ultima pagină', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating de {0} din {1}', + }, + }, + loading: 'Se încarcă...', + infiniteScroll: { + loadMore: 'Încarcă mai multe', + empty: 'Nu mai există', + }, +} diff --git a/packages/alpinui/src/locale/ru.ts b/packages/alpinui/src/locale/ru.ts new file mode 100644 index 0000000..3c6eb2c --- /dev/null +++ b/packages/alpinui/src/locale/ru.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Знак', + open: 'Открыть', + close: 'Закрыть', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'ОК', + cancel: 'Отмена', + }, + dataIterator: { + noResultsText: 'Не найдено подходящих записей', + loadingText: 'Запись загружается...', + }, + dataTable: { + itemsPerPageText: 'Строк на странице:', + ariaLabel: { + sortDescending: 'Упорядочено по убыванию.', + sortAscending: 'Упорядочено по возрастанию.', + sortNone: 'Не упорядочено.', + activateNone: 'Активируйте, чтобы убрать сортировку.', + activateDescending: 'Активируйте для упорядочивания убыванию.', + activateAscending: 'Активируйте для упорядочивания по возрастанию.', + }, + sortBy: 'Сортировать по', + }, + dataFooter: { + itemsPerPageText: 'Записей на странице:', + itemsPerPageAll: 'Все', + nextPage: 'Следующая страница', + prevPage: 'Предыдущая страница', + firstPage: 'Первая страница', + lastPage: 'Последняя страница', + pageText: '{0}-{1} из {2}', + }, + dateRangeInput: { + divider: 'до', + }, + datePicker: { + itemsSelected: '{0} выбрано', + range: { + title: 'Выбранные даты', + header: 'Ввод дат', + }, + title: 'Выбор даты', + header: 'Ввод даты', + input: { + placeholder: 'Введите дату', + }, + }, + noDataText: 'Отсутствуют данные', + carousel: { + prev: 'Предыдущий слайд', + next: 'Следующий слайд', + ariaLabel: { + delimiter: 'Слайд {0} из {1}', + }, + }, + calendar: { + moreEvents: 'Еще {0}', + today: 'Today', + }, + input: { + clear: 'Очистить {0}', + prependAction: '{0} предварительных действий', + appendAction: '{0} добавочных действий', + otp: 'Пожалуйста введите символы OTP {0}', + }, + fileInput: { + counter: 'Файлов: {0}', + counterSize: 'Файлов: {0} (всего {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Навигация по страницам', + next: 'Следующая страница', + previous: 'Предыдущая страница', + page: 'Перейти на страницу {0}', + currentPage: 'Текущая страница, Страница {0}', + first: 'Первая страница', + last: 'Последняя страница', + }, + }, + stepper: { + next: 'Следующий', + prev: 'Предыдущий', + }, + rating: { + ariaLabel: { + item: 'Рейтинг {0} из {1}', + }, + }, + loading: 'Загрузка...', + infiniteScroll: { + loadMore: 'Загрузить ещё', + empty: 'Больше нечего загружать', + }, +} diff --git a/packages/alpinui/src/locale/sk.ts b/packages/alpinui/src/locale/sk.ts new file mode 100644 index 0000000..9b1ffe2 --- /dev/null +++ b/packages/alpinui/src/locale/sk.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Odznak', + open: 'Otvoriť', + close: 'Zavrieť', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Zrušiť', + }, + dataIterator: { + noResultsText: 'Neboli nájdené žiadne záznamy', + loadingText: 'Načítavam položky...', + }, + dataTable: { + itemsPerPageText: 'Počet riadkov na stránku:', + ariaLabel: { + sortDescending: 'Zoradené zostupne.', + sortAscending: 'Zoradené vzostupne.', + sortNone: 'Nezoradené.', + activateNone: 'Aktivujte na zrušenie zoradenia.', + activateDescending: 'Aktivujte na zoradenie zostupne.', + activateAscending: 'Aktivujte na zoradenie vzostupne.', + }, + sortBy: 'Zoradiť podľa', + }, + dataFooter: { + itemsPerPageText: 'Počet položiek na stránku:', + itemsPerPageAll: 'Všetko', + nextPage: 'Ďalšia stránka', + prevPage: 'Predchádzajúca stránka', + firstPage: 'Prvá stránka', + lastPage: 'Posledná stránka', + pageText: '{0}–{1} z {2}', + }, + dateRangeInput: { + divider: 'až', + }, + datePicker: { + itemsSelected: '{0} vybraných', + range: { + title: 'Vyberte rozsah dátumov', + header: 'Zadajte rozsah dátumov', + }, + title: 'Vyberte dátum', + header: 'Zadajte dátum', + input: { + placeholder: 'Zadajte dátum', + }, + }, + noDataText: 'Nie sú dostupné žiadne dáta', + carousel: { + prev: 'Predchádzajúci obrázok', + next: 'Další obrázok', + ariaLabel: { + delimiter: 'Snímka {0} z {1}', + }, + }, + calendar: { + moreEvents: '{0} ďalších', + today: 'Dnes', + }, + input: { + clear: 'Vymazať {0}', + prependAction: 'Akcia pred {0}', + appendAction: 'Akcia za {0}', + otp: 'Prosím zadajte OTP znak {0}', + }, + fileInput: { + counter: '{0} súborov', + counterSize: '{0} súborov ({1} celkom)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigácia stránkovania', + next: 'Ďalšia stránka', + previous: 'Predchádzajúca stránka', + page: 'Ísť na stránku {0}', + currentPage: 'Aktuálna stránka, stránka {0}', + first: 'Prvá stránka', + last: 'Posledná stránka', + }, + }, + stepper: { + next: 'Ďalší', + prev: 'Predchádzajúci', + }, + rating: { + ariaLabel: { + item: 'Hodnotenie {0} z {1}', + }, + }, + loading: 'Načítavam...', + infiniteScroll: { + loadMore: 'Načítať viac', + empty: 'Žiadne ďalšie', + }, +} diff --git a/packages/alpinui/src/locale/sl.ts b/packages/alpinui/src/locale/sl.ts new file mode 100644 index 0000000..c36e668 --- /dev/null +++ b/packages/alpinui/src/locale/sl.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Značka', + open: 'Odpri', + close: 'Zapri', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'V redu', + cancel: 'Prekliči', + }, + dataIterator: { + noResultsText: 'Ni iskanega zapisa', + loadingText: 'Nalaganje ...', + }, + dataTable: { + itemsPerPageText: 'Vrstic na stran:', + ariaLabel: { + sortDescending: 'Razvrščeno padajoče.', + sortAscending: 'Razvrščeno naraščajoče.', + sortNone: 'Ni razvrščeno.', + activateNone: 'Aktivirajte za odstranitev razvrščanja.', + activateDescending: 'Aktivirajte za padajoče razvrščanje.', + activateAscending: 'Aktivirajte za naraščajoče razvrščanje.', + }, + sortBy: 'Razvrsti po', + }, + dataFooter: { + itemsPerPageText: 'Elementov na stran:', + itemsPerPageAll: 'Vsi', + nextPage: 'Naslednja stran', + prevPage: 'Prejšnja stran', + firstPage: 'Prva stran', + lastPage: 'Zadnja stran', + pageText: '{0}-{1} od {2}', + }, + dateRangeInput: { + divider: 'do', + }, + datePicker: { + itemsSelected: '{0} izbranih', + range: { + title: 'Izberite datume', + header: 'Vnesite datume', + }, + title: 'Izberite datum', + header: 'Vnesite datum', + input: { + placeholder: 'Vnesite datum', + }, + }, + noDataText: 'Ni podatkov', + carousel: { + prev: 'Prejšnji prikaz', + next: 'Naslednji prikaz', + ariaLabel: { + delimiter: 'Prikaz {0} od {1}', + }, + }, + calendar: { + moreEvents: 'Še {0}', + today: 'Danes', + }, + input: { + clear: 'Počisti {0}', + prependAction: 'Dejanje pred {0}', + appendAction: 'Dejanje po {0}', + otp: 'Vnesite {0}. OTP znak', + }, + fileInput: { + counter: '{0} datotek', + counterSize: '{0} datotek (skupno {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Izberite čas', + }, + pagination: { + ariaLabel: { + root: 'Navigacija po straneh', + next: 'Naslednja stran', + previous: 'Prejšnja stran', + page: 'Pojdi na stran {0}', + currentPage: 'Trenutna stran, stran {0}', + first: 'Prva stran', + last: 'Zadnja stran', + }, + }, + stepper: { + next: 'Naprej', + prev: 'Nazaj', + }, + rating: { + ariaLabel: { + item: 'Ocena {0} od {1}', + }, + }, + loading: 'Nalaganje ...', + infiniteScroll: { + loadMore: 'Naloži več', + empty: 'Konec', + }, +} diff --git a/packages/alpinui/src/locale/sr-Cyrl.ts b/packages/alpinui/src/locale/sr-Cyrl.ts new file mode 100644 index 0000000..6e9c1f9 --- /dev/null +++ b/packages/alpinui/src/locale/sr-Cyrl.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Значка', + open: 'Open', + close: 'Затвори', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Ни један запис није пронађен', + loadingText: 'Учитавање ставке...', + }, + dataTable: { + itemsPerPageText: 'Редова по страници:', + ariaLabel: { + sortDescending: 'Сортирано опадајуће.', + sortAscending: 'Сортирано растуће.', + sortNone: 'Није сортирано.', + activateNone: 'Кликни да уклониш сортирање.', + activateDescending: 'Кликни да сортираш опадајуће.', + activateAscending: 'Кликни да сортираш растуће.', + }, + sortBy: 'Сортирај по', + }, + dataFooter: { + itemsPerPageText: 'Ставки по страници:', + itemsPerPageAll: 'Све', + nextPage: 'Следећа страница', + prevPage: 'Претходна страница', + firstPage: 'Прва страница', + lastPage: 'Последња страница', + pageText: '{0}-{1} од {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Нема доступних података', + carousel: { + prev: 'Претходна слика', + next: 'Следећа слика', + ariaLabel: { + delimiter: 'Слика {0} од {1}', + }, + }, + calendar: { + moreEvents: '{0} више', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} фајлова', + counterSize: '{0} фајлова ({1} укупно)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Навигација страницама', + next: 'Следећа страница', + previous: 'Претходна страница', + page: 'Иди на страну {0}', + currentPage: 'Тренутна страница, страница {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Оцена {0} од {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/sr-Latn.ts b/packages/alpinui/src/locale/sr-Latn.ts new file mode 100644 index 0000000..485d81b --- /dev/null +++ b/packages/alpinui/src/locale/sr-Latn.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Značka', + open: 'Open', + close: 'Zatvori', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Nijedan zapis nije pronađen', + loadingText: 'Učitavanje stavke...', + }, + dataTable: { + itemsPerPageText: 'Redova po stranici:', + ariaLabel: { + sortDescending: 'Sortirano opadajuće.', + sortAscending: 'Sortirano rastuće.', + sortNone: 'Nije sortirano.', + activateNone: 'Klikni da ukloniš sortiranje.', + activateDescending: 'Klikni da sortiraš opadajuće.', + activateAscending: 'Klikni da sortiraš rastuće.', + }, + sortBy: 'Sortiraj po', + }, + dataFooter: { + itemsPerPageText: 'Stavki po stranici:', + itemsPerPageAll: 'Sve', + nextPage: 'Sledeća stranica', + prevPage: 'Prethodna stranica', + firstPage: 'Prva stranica', + lastPage: 'Poslednja stranica', + pageText: '{0}-{1} od {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Nema dostupnih podataka', + carousel: { + prev: 'Prethodna slika', + next: 'Sledeća slika', + ariaLabel: { + delimiter: 'Slika {0} od {1}', + }, + }, + calendar: { + moreEvents: '{0} više', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} fajlova', + counterSize: '{0} fajlova ({1} ukupno)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Navigacija stranicama', + next: 'Sledeća stranica', + previous: 'Prethodna stranica', + page: 'Idi na stranu {0}', + currentPage: 'Trenutna stranica, stranica {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Ocena {0} od {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/sv.ts b/packages/alpinui/src/locale/sv.ts new file mode 100644 index 0000000..2a0b576 --- /dev/null +++ b/packages/alpinui/src/locale/sv.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Bricka', + open: 'Open', + close: 'Stäng', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Avbryt', + }, + dataIterator: { + noResultsText: 'Hittade inga poster', + loadingText: 'Laddar data...', + }, + dataTable: { + itemsPerPageText: 'Rader per sida:', + ariaLabel: { + sortDescending: 'Fallande sortering.', + sortAscending: 'Stigande sortering.', + sortNone: 'Osorterat.', + activateNone: 'Aktivera för att ta bort sortering.', + activateDescending: 'Aktivera för att sortera fallande.', + activateAscending: 'Aktivera för att sortera stigande.', + }, + sortBy: 'Sortera efter', + }, + dataFooter: { + itemsPerPageText: 'Objekt per sida:', + itemsPerPageAll: 'Alla', + nextPage: 'Nästa sida', + prevPage: 'Föregående sida', + firstPage: 'Första sidan', + lastPage: 'Sista sidan', + pageText: '{0}-{1} av {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Välj datum', + header: 'Välj datum', + }, + title: 'Välj datum', + header: 'Välj datum', + input: { + placeholder: 'Välj datum', + }, + }, + noDataText: 'Ingen data tillgänglig', + carousel: { + prev: 'Föregående vy', + next: 'Nästa vy', + ariaLabel: { + delimiter: 'Karusellvy {0} av {1}', + }, + }, + calendar: { + moreEvents: '{0} fler', + today: 'Today', + }, + input: { + clear: 'Rensa {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} filer', + counterSize: '{0} filer ({1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Paginering', + next: 'Nästa sida', + previous: 'Föregående sida', + page: 'Gå till sida {0}', + currentPage: 'Aktuell sida, sida {0}', + first: 'Första sidan', + last: 'Sista sidan', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Betyg {0} av {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/th.ts b/packages/alpinui/src/locale/th.ts new file mode 100644 index 0000000..672643c --- /dev/null +++ b/packages/alpinui/src/locale/th.ts @@ -0,0 +1,102 @@ +export default { + badge: 'สัญลักษณ์', + open: 'Open', + close: 'ปิด', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'ไม่พบข้อมูลที่ค้นหา', + loadingText: 'กำลังโหลดข้อมูล...', + }, + dataTable: { + itemsPerPageText: 'แถวต่อหน้า:', + ariaLabel: { + sortDescending: 'เรียงจากมากไปน้อยอยู่', + sortAscending: 'เรียงจากน้อยไปมากอยู่', + sortNone: 'ไม่ได้เรียงลำดับ', + activateNone: 'กดเพื่อปิดการเรียงลำดับ', + activateDescending: 'กดเพื่อเรียงจากมากไปน้อย', + activateAscending: 'กดเพื่อเรียงจากน้อยไปมาก', + }, + sortBy: 'เรียงตาม', + }, + dataFooter: { + itemsPerPageText: 'รายการต่อหน้า:', + itemsPerPageAll: 'ทั้งหมด', + nextPage: 'หน้าต่อไป', + prevPage: 'หน้าที่แล้ว', + firstPage: 'หน้าแรก', + lastPage: 'หน้าสุดท้าย', + pageText: '{0}-{1} จาก {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'ไม่มีข้อมูล', + carousel: { + prev: 'ภาพก่อนหน้า', + next: 'ภาพถัดไป', + ariaLabel: { + delimiter: 'ภาพสไลด์ที่ {0} จาก {1}', + }, + }, + calendar: { + moreEvents: 'มีอีก {0}', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} ไฟล์', + counterSize: '{0} ไฟล์ (รวม {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'การนำทางไปยังหน้า', + next: 'หน้าต่อไป', + previous: 'หน้าที่แล้ว', + page: 'ไปที่หน้า {0}', + currentPage: 'หน้าปัจจุบัน (หน้า {0})', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/tr.ts b/packages/alpinui/src/locale/tr.ts new file mode 100644 index 0000000..2463d23 --- /dev/null +++ b/packages/alpinui/src/locale/tr.ts @@ -0,0 +1,102 @@ +export default { + badge: 'rozet', + open: 'Open', + close: 'Kapat', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Eşleşen veri bulunamadı', + loadingText: 'Yükleniyor... Lütfen bekleyin.', + }, + dataTable: { + itemsPerPageText: 'Sayfa başına satır:', + ariaLabel: { + sortDescending: 'Z den A ya sıralı.', + sortAscending: 'A dan Z ye sıralı.', + sortNone: 'Sıralı değil. ', + activateNone: 'Sıralamayı kaldırmak için etkinleştir.', + activateDescending: 'Z den A ya sıralamak için etkinleştir.', + activateAscending: 'A dan Z ye sıralamak için etkinleştir.', + }, + sortBy: 'Sırala', + }, + dataFooter: { + itemsPerPageText: 'Sayfa başına satır:', + itemsPerPageAll: 'Hepsi', + nextPage: 'Sonraki sayfa', + prevPage: 'Önceki sayfa', + firstPage: 'İlk sayfa', + lastPage: 'Son sayfa', + pageText: '{0} - {1} arası, Toplam: {2} kayıt', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Bu görünümde veri yok.', + carousel: { + prev: 'Önceki görsel', + next: 'Sonraki görsel', + ariaLabel: { + delimiter: 'Galeri sayfa {0} / {1}', + }, + }, + calendar: { + moreEvents: '{0} tane daha', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} dosya', + counterSize: '{0} dosya (toplamda {1})', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Sayfalandırma Navigasyonu', + next: 'Sonraki sayfa', + previous: 'Önceki sayfa', + page: 'Sayfaya git {0}', + currentPage: 'Geçerli Sayfa, Sayfa {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/uk.ts b/packages/alpinui/src/locale/uk.ts new file mode 100644 index 0000000..4d1d285 --- /dev/null +++ b/packages/alpinui/src/locale/uk.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Знак', + open: 'Open', + close: 'Закрити', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'В результаті пошуку нічого не знайдено', + loadingText: 'Завантаження...', + }, + dataTable: { + itemsPerPageText: 'Рядків на сторінці:', + ariaLabel: { + sortDescending: 'Відсортовано за спаданням.', + sortAscending: 'Відсортовано за зростанням.', + sortNone: 'Не відсортовано.', + activateNone: 'Активувати, щоб видалити сортування.', + activateDescending: 'Активувати, щоб відсортувати за спаданням.', + activateAscending: 'Активувати, щоб відсортувати за зростанням.', + }, + sortBy: 'Відсортувати за', + }, + dataFooter: { + itemsPerPageText: 'Елементів на сторінці:', + itemsPerPageAll: 'Всі', + nextPage: 'Наступна сторінка', + prevPage: 'Попередня сторінка', + firstPage: 'Перша сторінка', + lastPage: 'Остання сторінка', + pageText: '{0}-{1} з {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Немає даних для відображення', + carousel: { + prev: 'Попередній слайд', + next: 'Наступий слайд', + ariaLabel: { + delimiter: 'Слайд {0} з {1}', + }, + }, + calendar: { + moreEvents: 'Ще {0}', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} файлів', + counterSize: '{0} файлів ({1} загалом)', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Навігація по сторінках', + next: 'Наступна сторінка', + previous: 'Попередня сторінка', + page: 'Перейти на сторінку {0}', + currentPage: 'Поточна сторінка, Сторінка {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/vi.ts b/packages/alpinui/src/locale/vi.ts new file mode 100644 index 0000000..67915a2 --- /dev/null +++ b/packages/alpinui/src/locale/vi.ts @@ -0,0 +1,102 @@ +export default { + badge: 'Huy hiệu', + open: 'Open', + close: 'Đóng', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: 'Không tìm thấy kết quả nào', + loadingText: 'Đang tải...', + }, + dataTable: { + itemsPerPageText: 'Số hàng mỗi trang:', + ariaLabel: { + sortDescending: 'Sắp xếp giảm dần.', + sortAscending: 'Sắp xếp tăng dần.', + sortNone: 'Không sắp xếp.', + activateNone: 'Kích hoạt để bỏ sắp xếp.', + activateDescending: 'Kích hoạt để sắp xếp giảm dần.', + activateAscending: 'Kích hoạt để sắp xếp tăng dần.', + }, + sortBy: 'Sắp xếp', + }, + dataFooter: { + itemsPerPageText: 'Số mục mỗi trang:', + itemsPerPageAll: 'Toàn bộ', + nextPage: 'Trang tiếp theo', + prevPage: 'Trang trước', + firstPage: 'Trang đầu', + lastPage: 'Trang cuối', + pageText: '{0}-{1} trên {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: 'Không có dữ liệu', + carousel: { + prev: 'Ảnh tiếp theo', + next: 'Ảnh trước', + ariaLabel: { + delimiter: 'Carousel slide {0} trên {1}', + }, + }, + calendar: { + moreEvents: '{0} nữa', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} tệp', + counterSize: '{0} tệp (tổng cộng {1})', + }, + timePicker: { + am: 'SA', + pm: 'CH', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: 'Điều hướng phân trang', + next: 'Trang tiếp theo', + previous: 'Trang trước', + page: 'Đến trang {0}', + currentPage: 'Trang hiện tại, Trang {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Đánh giá {0} trên {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/zh-Hans.ts b/packages/alpinui/src/locale/zh-Hans.ts new file mode 100644 index 0000000..dec1c61 --- /dev/null +++ b/packages/alpinui/src/locale/zh-Hans.ts @@ -0,0 +1,102 @@ +export default { + badge: '徽章', + open: 'Open', + close: '关闭', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: '没有符合条件的结果', + loadingText: '加载中……', + }, + dataTable: { + itemsPerPageText: '每页数目：', + ariaLabel: { + sortDescending: '：降序排列。', + sortAscending: '：升序排列。', + sortNone: '：未排序。', + activateNone: '点击以移除排序。', + activateDescending: '点击以降序排列。', + activateAscending: '点击以升序排列。', + }, + sortBy: '排序方式', + }, + dataFooter: { + itemsPerPageText: '每页数目：', + itemsPerPageAll: '全部', + nextPage: '下一页', + prevPage: '上一页', + firstPage: '首页', + lastPage: '尾页', + pageText: '{0}-{1} 共 {2}', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: '没有数据', + carousel: { + prev: '上一张', + next: '下一张', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '还有 {0} 项', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} 个文件', + counterSize: '{0} 个文件（共 {1}）', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: '分页导航', + next: '下一页', + previous: '上一页', + page: '转到页面 {0}', + currentPage: '当前页 {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/locale/zh-Hant.ts b/packages/alpinui/src/locale/zh-Hant.ts new file mode 100644 index 0000000..dbae45b --- /dev/null +++ b/packages/alpinui/src/locale/zh-Hant.ts @@ -0,0 +1,102 @@ +export default { + badge: '徽章', + open: 'Open', + close: '關閉', + dismiss: 'Dismiss', + confirmEdit: { + ok: 'OK', + cancel: 'Cancel', + }, + dataIterator: { + noResultsText: '沒有符合條件的結果', + loadingText: '讀取中...', + }, + dataTable: { + itemsPerPageText: '每頁列數：', + ariaLabel: { + sortDescending: '：降序排列。', + sortAscending: '：升序排列。', + sortNone: '無排序方式。點擊以升序排列。', + activateNone: '點擊以移除排序方式。', + activateDescending: '點擊以降序排列。', + activateAscending: '點擊以移除排序方式。', + }, + sortBy: '排序方式', + }, + dataFooter: { + itemsPerPageText: '每頁項目：', + itemsPerPageAll: '全部', + nextPage: '下一頁', + prevPage: '上一頁', + firstPage: '第一頁', + lastPage: '最後頁', + pageText: '{2} 條中的 {0}~{1} 條', + }, + dateRangeInput: { + divider: 'to', + }, + datePicker: { + itemsSelected: '{0} selected', + range: { + title: 'Select dates', + header: 'Enter dates', + }, + title: 'Select date', + header: 'Enter date', + input: { + placeholder: 'Enter date', + }, + }, + noDataText: '沒有資料', + carousel: { + prev: '上一張', + next: '下一張', + ariaLabel: { + delimiter: 'Carousel slide {0} of {1}', + }, + }, + calendar: { + moreEvents: '還有其他 {0} 項', + today: 'Today', + }, + input: { + clear: 'Clear {0}', + prependAction: '{0} prepended action', + appendAction: '{0} appended action', + otp: 'Please enter OTP character {0}', + }, + fileInput: { + counter: '{0} 個檔案', + counterSize: '{0} 個檔案（共 {1}）', + }, + timePicker: { + am: 'AM', + pm: 'PM', + title: 'Select Time', + }, + pagination: { + ariaLabel: { + root: '分頁導航', + next: '下一頁', + previous: '上一頁', + page: '轉到頁面 {0}', + currentPage: '當前頁 {0}', + first: 'First page', + last: 'Last page', + }, + }, + stepper: { + next: 'Next', + prev: 'Previous', + }, + rating: { + ariaLabel: { + item: 'Rating {0} of {1}', + }, + }, + loading: 'Loading...', + infiniteScroll: { + loadMore: 'Load more', + empty: 'No more', + }, +} diff --git a/packages/alpinui/src/services/goto/__tests__/easing-patterns.spec.ts b/packages/alpinui/src/services/goto/__tests__/easing-patterns.spec.ts new file mode 100644 index 0000000..7b01040 --- /dev/null +++ b/packages/alpinui/src/services/goto/__tests__/easing-patterns.spec.ts @@ -0,0 +1,26 @@ +// @ts-nocheck +/* eslint-disable */ + +import * as easingPatterns from '../easing-patterns' + +describe.skip('easing-patterns.ts', () => { + it('should work', () => { + expect(easingPatterns.linear(5)).toBe(5) + expect(easingPatterns.easeInQuad(5)).toBe(25) + expect(easingPatterns.easeOutQuad(5)).toBe(-15) + expect(easingPatterns.easeInOutQuad(5)).toBe(-31) + expect(easingPatterns.easeInOutQuad(0.1)).toBe(0.020000000000000004) + expect(easingPatterns.easeInCubic(5)).toBe(125) + expect(easingPatterns.easeOutCubic(5)).toBe(65) + expect(easingPatterns.easeInOutCubic(5)).toBe(257) + expect(easingPatterns.easeInOutCubic(0.1)).toBe(0.004000000000000001) + expect(easingPatterns.easeInQuart(5)).toBe(625) + expect(easingPatterns.easeOutQuart(5)).toBe(-255) + expect(easingPatterns.easeInOutQuart(5)).toBe(-2047) + expect(easingPatterns.easeInOutQuart(0.1)).toBe(0.0008000000000000003) + expect(easingPatterns.easeInQuint(5)).toBe(3125) + expect(easingPatterns.easeOutQuint(5)).toBe(1025) + expect(easingPatterns.easeInOutQuint(5)).toBe(16385) + expect(easingPatterns.easeInOutQuint(0.1)).toBeCloseTo(0.00016, 5) + }) +}) diff --git a/packages/alpinui/src/services/goto/__tests__/goto.spec.ts b/packages/alpinui/src/services/goto/__tests__/goto.spec.ts new file mode 100644 index 0000000..85af429 --- /dev/null +++ b/packages/alpinui/src/services/goto/__tests__/goto.spec.ts @@ -0,0 +1,73 @@ +// @ts-nocheck +/* eslint-disable */ + +// Lib +import { mount } from '@vue/test-utils' +import { describe, expect, it } from '@jest/globals' + +// Components +// import VBtn from '../../../components/VBtn' + +// Services +import goTo, { Goto } from '../index' +// import { Application } from '../../application/index' + +// Types +import { VuetifyServiceContract } from 'vuetify/types/services' + +describe.skip('$vuetify.goTo', () => { + // (global as any).performance = require('perf_hooks').performance + let framework: Record = {} + + beforeEach(() => { + framework = { + application: new Application(), + } + + goTo.framework = framework + }) + + it('should throw error when target is undefined or null', async () => { + expect(() => goTo(undefined)) + .toThrow(new TypeError('Target must be a Number/Selector/HTMLElement/VueComponent, received undefined instead.')) + + expect(() => goTo(null)) + .toThrow(new TypeError('Target must be a Number/Selector/HTMLElement/VueComponent, received null instead.')) + }) + + it('should throw error when target element is not found', async () => { + expect(() => goTo('#foo')) + .toThrow(new Error('Target element "#foo" not found.')) + }) + + it('should throw error when container element is not found', async () => { + expect(() => goTo(0, { container: '#thisContainerDoesNotExist' })) + .toThrow(new Error('Container element "#thisContainerDoesNotExist" not found.')) + }) + + it('should throw error when container is undefined or null', async () => { + expect(() => goTo(0, { container: undefined })) + .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received undefined instead.')) + + expect(() => goTo(0, { container: null })) + .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received null instead.')) + + expect(() => goTo(0, { container: 42 as any })) + .toThrow(new TypeError('Container must be a Selector/HTMLElement/VueComponent, received Number instead.')) + }) + + it('should throw error if easing does not exist', async () => { + expect(() => goTo(1, { easing: 'thisEasingDoesNotExist' })) + .toThrow(new TypeError('Easing function "thisEasingDoesNotExist" not found.')) + }) + + it('should not throw error when using VueComponent as target', async () => { + const btn = mount(VBtn) + + await expect(goTo(btn.vm, { duration: 0 })).resolves.not.toBeUndefined() + }) + + it('should instantiate and return goto', () => { + expect(new Goto()).toEqual(goTo) + }) +}) diff --git a/packages/alpinui/src/services/goto/easing-patterns.ts b/packages/alpinui/src/services/goto/easing-patterns.ts new file mode 100644 index 0000000..8eacd63 --- /dev/null +++ b/packages/alpinui/src/services/goto/easing-patterns.ts @@ -0,0 +1,28 @@ +export type EasingFunction = (t: number) => number + +// linear +export const linear = (t: number) => t; +// accelerating from zero velocity +export const easeInQuad = (t: number) => t ** 2; +// decelerating to zero velocity +export const easeOutQuad = (t: number) => t * (2 - t); +// acceleration until halfway, then deceleration +export const easeInOutQuad = (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t); +// accelerating from zero velocity +export const easeInCubic = (t: number) => t ** 3; +// decelerating to zero velocity +export const easeOutCubic = (t: number) => --t ** 3 + 1; +// acceleration until halfway, then deceleration +export const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; +// accelerating from zero velocity +export const easeInQuart = (t: number) => t ** 4; +// decelerating to zero velocity +export const easeOutQuart = (t: number) => 1 - --t ** 4; +// acceleration until halfway, then deceleration +export const easeInOutQuart = (t: number) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t); +// accelerating from zero velocity +export const easeInQuint = (t: number) => t ** 5; +// decelerating to zero velocity +export const easeOutQuint = (t: number) => 1 + --t ** 5; +// acceleration until halfway, then deceleration +export const easeInOutQuint = (t: number) => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5; diff --git a/packages/alpinui/src/services/goto/index.ts b/packages/alpinui/src/services/goto/index.ts new file mode 100644 index 0000000..8fb8fc6 --- /dev/null +++ b/packages/alpinui/src/services/goto/index.ts @@ -0,0 +1,94 @@ +// @ts-nocheck +/* eslint-disable */ + +// Extensions +// import { Service } from '../service' + +// Utilities +import * as easingPatterns from './easing-patterns' +import { + getContainer, + getOffset, +} from './util' + +// Types +import { GoToOptions, VuetifyGoToTarget } from 'vuetify/types/services/goto' + +import { VuetifyServiceContract } from 'vuetify/types/services' + +function goTo ( + _target: VuetifyGoToTarget, + _settings: GoToOptions = {} +): Promise { + const settings: GoToOptions = { + container: (document.scrollingElement as HTMLElement | null) || document.body || document.documentElement, + duration: 500, + offset: 0, + easing: 'easeInOutCubic', + appOffset: true, + ..._settings, + } + const container = getContainer(settings.container) + + /* istanbul ignore else */ + if (settings.appOffset && goTo.framework.application) { + const isDrawer = container.classList.contains('v-navigation-drawer') + const isClipped = container.classList.contains('v-navigation-drawer--clipped') + const { bar, top } = goTo.framework.application as any + + settings.offset += bar + /* istanbul ignore else */ + if (!isDrawer || isClipped) settings.offset += top + } + + const startTime = performance.now() + + let targetLocation: number + if (typeof _target === 'number') { + targetLocation = getOffset(_target) - settings.offset! + } else { + targetLocation = getOffset(_target) - getOffset(container) - settings.offset! + } + + const startLocation = container.scrollTop + if (targetLocation === startLocation) return Promise.resolve(targetLocation) + + const ease = typeof settings.easing === 'function' + ? settings.easing + : easingPatterns[settings.easing!] + /* istanbul ignore else */ + if (!ease) throw new TypeError(`Easing function "${settings.easing}" not found.`) + + // Cannot be tested properly in jsdom + /* istanbul ignore next */ + return new Promise(resolve => requestAnimationFrame(function step (currentTime: number) { + const timeElapsed = currentTime - startTime + const progress = Math.abs(settings.duration ? Math.min(timeElapsed / settings.duration, 1) : 1) + + container.scrollTop = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress)) + + const clientHeight = container === document.body ? document.documentElement.clientHeight : container.clientHeight + const reachBottom = clientHeight + container.scrollTop >= container.scrollHeight + if ( + progress === 1 || + // Need to go lower but reach bottom + (targetLocation > container.scrollTop && reachBottom) + ) { + return resolve(targetLocation) + } + + requestAnimationFrame(step) + })) +} + +// goTo.framework = {} as Record + +// export class Goto extends Service { +// public static property: 'goTo' = 'goTo' + +// constructor () { +// super() + +// return goTo +// } +// } diff --git a/packages/alpinui/src/services/goto/util.ts b/packages/alpinui/src/services/goto/util.ts new file mode 100644 index 0000000..8457dc3 --- /dev/null +++ b/packages/alpinui/src/services/goto/util.ts @@ -0,0 +1,52 @@ +// @ts-nocheck +/* eslint-disable */ + +import Vue from 'vue' + +// Return target's cumulative offset from the top +export function getOffset (target: any): number { + if (typeof target === 'number') { + return target + } + + let el = $(target) + if (!el) { + throw typeof target === 'string' + ? new Error(`Target element "${target}" not found.`) + : new TypeError(`Target must be a Number/Selector/HTMLElement/VueComponent, received ${type(target)} instead.`) + } + + let totalOffset = 0 + while (el) { + totalOffset += el.offsetTop + el = el.offsetParent as HTMLElement + } + + return totalOffset +} + +export function getContainer (container: any): HTMLElement { + const el = $(container) + + if (el) return el + + throw typeof container === 'string' + ? new Error(`Container element "${container}" not found.`) + : new TypeError(`Container must be a Selector/HTMLElement/VueComponent, received ${type(container)} instead.`) +} + +function type (el: any) { + return el == null ? el : el.constructor.name +} + +function $ (el: any): HTMLElement | null { + if (typeof el === 'string') { + return document.querySelector(el) + } else if (el && el.__isVue) { + return (el as Vue).$el as HTMLElement + } else if (el instanceof HTMLElement) { + return el + } else { + return null + } +} diff --git a/packages/alpinui/src/shims.d.ts b/packages/alpinui/src/shims.d.ts new file mode 100644 index 0000000..ac4f352 --- /dev/null +++ b/packages/alpinui/src/shims.d.ts @@ -0,0 +1,50 @@ +/* eslint-disable local-rules/sort-imports */ + +import 'vue/jsx' +import type { FunctionalComponent, UnwrapNestedRefs, VNodeChild } from 'vue' + +// @skip-build +import type { ComponentPublicInstance } from 'vue' + +// @skip-build +import type { DateInstance, DefaultsInstance, DisplayInstance, IconOptions, LocaleInstance, RtlInstance, ThemeInstance } from './framework' + +declare global { + namespace JSX { + interface ElementChildrenAttribute { + $children: {} + } + } +} + +declare module 'vue' { + export type JSXComponent = { new (): ComponentPublicInstance } | FunctionalComponent +} + +declare module '@vue/runtime-dom' { + export interface HTMLAttributes { + $children?: VNodeChild + } + export interface SVGAttributes { + $children?: VNodeChild + } +} + +declare module '@vue/runtime-core' { + interface Vuetify { + defaults: DefaultsInstance + display: UnwrapNestedRefs + theme: UnwrapNestedRefs + icons: IconOptions + locale: UnwrapNestedRefs + date: DateInstance + } + + export interface ComponentCustomProperties { + $vuetify: Vuetify + } + + export interface GlobalComponents { + // @generate-components + } +} diff --git a/packages/alpinui/src/styles/elements/_blockquote.sass b/packages/alpinui/src/styles/elements/_blockquote.sass new file mode 100644 index 0000000..82ad588 --- /dev/null +++ b/packages/alpinui/src/styles/elements/_blockquote.sass @@ -0,0 +1,8 @@ +@use '../settings' +@use '../tools' + +@include tools.layer('components') + .blockquote + padding: settings.$spacer*4 0 settings.$spacer*4 settings.$spacer*6 + font-size: settings.$blockquote-font-size + font-weight: settings.$blockquote-font-weight diff --git a/packages/alpinui/src/styles/elements/_global.sass b/packages/alpinui/src/styles/elements/_global.sass new file mode 100644 index 0000000..0cfac6d --- /dev/null +++ b/packages/alpinui/src/styles/elements/_global.sass @@ -0,0 +1,25 @@ +@use '../settings' +@use '../tools' + +@include tools.layer('base') + html + font-family: settings.$body-font-family + line-height: settings.$line-height-root + font-size: settings.$font-size-root + overflow-x: hidden + text-rendering: optimizeLegibility + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) + + html.overflow-y-hidden + overflow-y: hidden !important + + :root + --v-theme-overlay-multiplier: 1 + --v-scrollbar-offset: 0px + + // iOS Safari hack to allow click events on body + @supports (-webkit-touch-callout: none) + body + cursor: pointer diff --git a/packages/alpinui/src/styles/elements/_index.sass b/packages/alpinui/src/styles/elements/_index.sass new file mode 100644 index 0000000..40eb482 --- /dev/null +++ b/packages/alpinui/src/styles/elements/_index.sass @@ -0,0 +1,2 @@ +@use './blockquote' +@use './global' diff --git a/packages/alpinui/src/styles/generic/_animations.scss b/packages/alpinui/src/styles/generic/_animations.scss new file mode 100644 index 0000000..f764aa6 --- /dev/null +++ b/packages/alpinui/src/styles/generic/_animations.scss @@ -0,0 +1,17 @@ +@use '../tools'; + +@include tools.layer('transitions') { + @keyframes v-shake { + 59% { + margin-left: 0; + } + + 60%, 80% { + margin-left: 2px; + } + + 70%, 90% { + margin-left: -2px; + } + } +} diff --git a/packages/alpinui/src/styles/generic/_colors.scss b/packages/alpinui/src/styles/generic/_colors.scss new file mode 100644 index 0000000..ce4d091 --- /dev/null +++ b/packages/alpinui/src/styles/generic/_colors.scss @@ -0,0 +1,73 @@ +@use 'sass:map'; +@use '../settings'; +@use '../settings/colors'; +@use '../tools'; +@use '../tools/functions' as *; + +@mixin background-color($color_value) { + background-color: $color_value !important; +} +@mixin text-color($color_value) { + color: $color_value !important; +} +@mixin background-text-color($color_name, $color_type) { + $map_value: map-deep-get(colors.$text-on-colors, $color_name, $color_type); + + color: $map_value !important; +} + +@if (settings.$color-pack) { + @include tools.layer('colors') { + @each $color_name, $color_value in colors.$shades { + .bg-#{$color_name} { + @include background-color($color_value); + + @if (map.has-key(colors.$text-on-colors, 'shades')) { + @include background-text-color('shades', $color_name); + } + } + } + + @each $color_name, $color_color in colors.$colors { + @each $color_type, $color_value in $color_color { + @if ($color_type == 'base') { + .bg-#{$color_name} { + @include background-color($color_value); + + @if (map.has-key(colors.$text-on-colors, $color_name)) { + @include background-text-color($color_name, $color_type); + } + } + } @else if ($color_type != 'shades') { + .bg-#{$color_name}-#{$color_type} { + @include background-color($color_value); + + @if (map.has-key(colors.$text-on-colors, $color_name)) { + @include background-text-color($color_name, $color_type); + } + } + } + } + } + + @each $color_name, $color_value in colors.$shades { + .text-#{$color_name} { + @include text-color($color_value); + } + } + + @each $color_name, $color_color in colors.$colors { + @each $color_type, $color_value in $color_color { + @if ($color_type == 'base') { + .text-#{$color_name} { + @include text-color($color_value); + } + } @else if ($color_type != 'shades') { + .text-#{$color_name}-#{$color_type} { + @include text-color($color_value); + } + } + } + } + } +} diff --git a/packages/alpinui/src/styles/generic/_index.scss b/packages/alpinui/src/styles/generic/_index.scss new file mode 100644 index 0000000..f933655 --- /dev/null +++ b/packages/alpinui/src/styles/generic/_index.scss @@ -0,0 +1,6 @@ +@use './layers'; +@use './animations'; +@use './colors'; +@use './reset'; +@use './transitions'; +@use './rtl'; diff --git a/packages/alpinui/src/styles/generic/_layers.scss b/packages/alpinui/src/styles/generic/_layers.scss new file mode 100644 index 0000000..aabefdf --- /dev/null +++ b/packages/alpinui/src/styles/generic/_layers.scss @@ -0,0 +1,7 @@ +@use '../settings'; + +@if (settings.$layers) { + @layer vuetify { + @layer reset, transitions, base, components, overrides, colors, theme, utilities; + } +} diff --git a/packages/alpinui/src/styles/generic/_reset.scss b/packages/alpinui/src/styles/generic/_reset.scss new file mode 100644 index 0000000..586d9ef --- /dev/null +++ b/packages/alpinui/src/styles/generic/_reset.scss @@ -0,0 +1,294 @@ +@use '../settings'; +@use '../tools'; + +/*! + * ress.css • v2.0.4 + * MIT License + * github.com/filipelinhares/ress + */ + +@if (settings.$reset) { + @include tools.layer('reset') { + /* # ================================================================= + # Global selectors + # ================================================================= */ + + html { + box-sizing: border-box; + overflow-y: scroll; /* All browsers without overlaying scrollbars */ + -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ + word-break: normal; + -moz-tab-size: 4; + tab-size: 4; + } + + *, + ::before, + ::after { + background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ + box-sizing: inherit; + } + + ::before, + ::after { + text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ + vertical-align: inherit; + } + + * { + padding: 0; /* Reset `padding` and `margin` of all elements */ + margin: 0; + } + + /* # ================================================================= + # General elements + # ================================================================= */ + + hr { + overflow: visible; /* Show the overflow in Edge and IE */ + height: 0; /* Add the correct box sizing in Firefox */ + } + + details, + main { + display: block; /* Render the `main` element consistently in IE. */ + } + + summary { + display: list-item; /* Add the correct display in all browsers */ + } + + small { + font-size: 80%; /* Set font-size to 80% in `small` elements */ + } + + [hidden] { + display: none; /* Add the correct display in IE */ + } + + abbr[title] { + border-bottom: none; /* Remove the bottom border in Chrome 57 */ + /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */ + text-decoration: underline; + text-decoration: underline dotted; + } + + a { + background-color: transparent; /* Remove the gray background on active links in IE 10 */ + } + + a:active, + a:hover { + outline-width: 0; /* Remove the outline when hovering in all browsers */ + } + + code, + kbd, + pre, + samp { + font-family: monospace, monospace; /* Specify the font family of code elements */ + } + + pre { + font-size: 1em; /* Correct the odd `em` font sizing in all browsers */ + } + + b, + strong { + font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */ + } + + /* https://gist.github.com/unruthless/413930 */ + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* # ================================================================= + # Forms + # ================================================================= */ + + input { + border-radius: 0; + } + + /* Replace pointer cursor in disabled elements */ + [disabled] { + cursor: default; + } + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */ + } + + [type="search"] { + -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */ + outline-offset: -2px; /* Correct the outline style in Safari */ + } + + [type="search"]::-webkit-search-cancel-button, + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */ + } + + textarea { + overflow: auto; /* Internet Explorer 11+ */ + resize: vertical; /* Specify textarea resizability */ + } + + button, + input, + optgroup, + select, + textarea { + font: inherit; /* Specify font inheritance of form elements */ + } + + optgroup { + font-weight: bold; /* Restore the font weight unset by the previous rule */ + } + + button { + overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */ + } + + button, + select { + text-transform: none; /* Firefox 40+, Internet Explorer 11- */ + } + + /* Apply cursor pointer to button elements */ + button, + [type="button"], + [type="reset"], + [type="submit"], + [role="button"] { + cursor: pointer; + color: inherit; + } + + /* Remove inner padding and border in Firefox 4+ */ + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /* Replace focus style removed in the border reset above */ + button:-moz-focusring, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + outline: 1px dotted ButtonText; + } + + button, + html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */ + [type="reset"], + [type="submit"] { + -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */ + } + + /* Remove the default button styling in all browsers */ + button, + input, + select, + textarea { + background-color: transparent; + border-style: none; + } + + /* Style select like a standard input */ + select { + -moz-appearance: none; /* Firefox 36+ */ + -webkit-appearance: none; /* Chrome 41+ */ + } + + select::-ms-expand { + display: none; /* Internet Explorer 11+ */ + } + + select::-ms-value { + color: currentColor; /* Internet Explorer 11+ */ + } + + legend { + border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */ + color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */ + display: table; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge and IE */ + white-space: normal; /* Correct the text wrapping in Edge and IE */ + max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */ + } + + ::-webkit-file-upload-button { + /* Correct the inability to style clickable types in iOS and Safari */ + -webkit-appearance: button; + color: inherit; + font: inherit; /* Change font properties to `inherit` in Chrome and Safari */ + } + + // Remove default password icon in EdgeHTML (#537) + ::-ms-clear, + ::-ms-reveal { + display: none + } + + /* # ================================================================= + # Specify media element style + # ================================================================= */ + + img { + border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */ + } + + /* Add the correct vertical alignment in Chrome, Firefox, and Opera */ + progress { + vertical-align: baseline; + } + + /* # ================================================================= + # Accessibility + # ================================================================= */ + + /* Hide content from screens but not screenreaders */ + @media screen { + [hidden~="screen"] { + display: inherit; + } + [hidden~="screen"]:not(:active):not(:focus):not(:target) { + position: absolute !important; + clip: rect(0 0 0 0) !important; + } + } + + /* Specify the progress cursor of updating elements */ + [aria-busy="true"] { + cursor: progress; + } + + /* Specify the pointer cursor of trigger elements */ + [aria-controls] { + cursor: pointer; + } + + /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ + [aria-disabled="true"] { + cursor: default; + } + } +} diff --git a/packages/alpinui/src/styles/generic/_rtl.scss b/packages/alpinui/src/styles/generic/_rtl.scss new file mode 100644 index 0000000..4d3926d --- /dev/null +++ b/packages/alpinui/src/styles/generic/_rtl.scss @@ -0,0 +1,13 @@ +@use '../tools'; + +@include tools.layer('base') { + .v-locale { + &--is-rtl { + direction: rtl; + } + + &--is-ltr { + direction: ltr; + } + } +} diff --git a/packages/alpinui/src/styles/generic/_transitions.scss b/packages/alpinui/src/styles/generic/_transitions.scss new file mode 100644 index 0000000..8865967 --- /dev/null +++ b/packages/alpinui/src/styles/generic/_transitions.scss @@ -0,0 +1,367 @@ +@use '../settings'; +@use '../tools'; + +@mixin transition-default() { + &-enter-active { + transition-duration: settings.$transition-duration-root !important; + transition-timing-function: settings.$standard-easing !important; + } + + &-leave-active { + transition-duration: settings.$transition-duration-root !important; + transition-timing-function: settings.$standard-easing !important; + } + + &-move { + transition-duration: settings.$transition-move-duration-root !important; + transition-property: transform !important; + transition-timing-function: settings.$standard-easing !important; + } +} +@mixin fade-out() { + &-leave-to { + opacity: 0; + } + &-leave-active { + transition-duration: 100ms !important; + } +} + +@include tools.layer('transitions') { + // Component specific transitions + .dialog-transition, + .dialog-bottom-transition, + .dialog-top-transition { + &-enter-active { + transition-duration: 225ms !important; + transition-timing-function: settings.$decelerated-easing !important; + } + + &-leave-active { + transition-duration: 125ms !important; + transition-timing-function: settings.$accelerated-easing !important; + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + pointer-events: none; + } + } + + .dialog-transition { + &-enter-from, &-leave-to { + transform: scale(0.9); + opacity: 0; + } + + &-enter-to, &-leave-from { + opacity: 1; + } + } + + .dialog-bottom-transition { + &-enter-from, &-leave-to { + transform: translateY(calc(50vh + 50%)); + } + } + + .dialog-top-transition { + &-enter-from, &-leave-to { + transform: translateY(calc(-50vh - 50%)); + } + } + + .picker-transition, + .picker-reverse-transition { + @include transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + } + + &-leave-from, + &-leave-active, + &-leave-to { + position: absolute !important; + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .picker-transition { + @include transition-default(); + + &-enter-from { + transform: translate(100%, 0); + } + + &-leave-to { + transform: translate(-100%, 0); + } + } + + .picker-reverse-transition { + @include transition-default(); + + &-enter-from { + transform: translate(-100%, 0); + } + + &-leave-to { + transform: translate(100%, 0); + } + } + + // Generic transitions + .expand-transition { + @include transition-default(); + + &-enter-active, + &-leave-active { + transition-property: height !important; + } + } + + .expand-x-transition { + @include transition-default(); + + &-enter-active, + &-leave-active { + transition-property: width !important; + } + } + + .scale-transition { + @include transition-default(); + @include fade-out(); + + &-enter-from { + opacity: 0; + transform: scale(0); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .scale-rotate-transition { + @include transition-default(); + @include fade-out(); + + &-enter-from { + opacity: 0; + transform: scale(0) rotate(-45deg); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .scale-rotate-reverse-transition { + @include transition-default(); + @include fade-out(); + + &-enter-from { + opacity: 0; + transform: scale(0) rotate(45deg); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .message-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + transform: translateY(-15px); + } + + &-leave-from, &-leave-active { + position: absolute; + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .slide-y-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + transform: translateY(-15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .slide-y-reverse-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + transform: translateY(15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .scroll-y-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateY(-15px); + } + + &-leave-to { + transform: translateY(15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .scroll-y-reverse-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateY(15px); + } + + &-leave-to { + transform: translateY(-15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .scroll-x-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateX(-15px); + } + + &-leave-to { + transform: translateX(15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .scroll-x-reverse-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateX(15px); + } + + &-leave-to { + transform: translateX(-15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .slide-x-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + transform: translateX(-15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .slide-x-reverse-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0; + transform: translateX(15px); + } + + &-enter-active, + &-leave-active { + transition-property: transform, opacity !important; + } + } + + .fade-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + opacity: 0 !important; + } + + &-enter-active, + &-leave-active { + transition-property: opacity !important; + } + } + + .fab-transition { + @include transition-default(); + + &-enter-from, &-leave-to { + transform: scale(0) rotate(-45deg); + } + + &-enter-active, + &-leave-active { + transition-property: transform !important; + } + } +} diff --git a/packages/alpinui/src/styles/main.sass b/packages/alpinui/src/styles/main.sass new file mode 100644 index 0000000..b1786d5 --- /dev/null +++ b/packages/alpinui/src/styles/main.sass @@ -0,0 +1,6 @@ +// Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ + +@forward './settings' +@use './generic' +@use './elements' +@use './utilities' diff --git a/packages/alpinui/src/styles/settings/_colors.scss b/packages/alpinui/src/styles/settings/_colors.scss new file mode 100644 index 0000000..3195f0f --- /dev/null +++ b/packages/alpinui/src/styles/settings/_colors.scss @@ -0,0 +1,849 @@ +@use '../tools/functions' as *; + +$shades: () !default; +$shades: map-deep-merge( + ( + 'black': #000000, + 'white': #FFFFFF, + 'transparent': transparent + ), + $shades +); + +$text-on-shades: () !default; +$text-on-shades: map-deep-merge( + ( + 'black': map-get($shades, 'white'), + 'white': map-get($shades, 'black'), + 'transparent': currentColor + ), + $text-on-shades +); + +$red: () !default; +$red: map-deep-merge( + ( + 'base': #F44336, + 'lighten-5': #FFEBEE, + 'lighten-4': #FFCDD2, + 'lighten-3': #EF9A9A, + 'lighten-2': #E57373, + 'lighten-1': #EF5350, + 'darken-1': #E53935, + 'darken-2': #D32F2F, + 'darken-3': #C62828, + 'darken-4': #B71C1C, + 'accent-1': #FF8A80, + 'accent-2': #FF5252, + 'accent-3': #FF1744, + 'accent-4': #D50000 + ), + $red +); + +$text-on-red: () !default; +$text-on-red: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'white'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-red +); + +$pink: () !default; +$pink: map-deep-merge( + ( + 'base': #e91e63, + 'lighten-5': #fce4ec, + 'lighten-4': #f8bbd0, + 'lighten-3': #f48fb1, + 'lighten-2': #f06292, + 'lighten-1': #ec407a, + 'darken-1': #d81b60, + 'darken-2': #c2185b, + 'darken-3': #ad1457, + 'darken-4': #880e4f, + 'accent-1': #ff80ab, + 'accent-2': #ff4081, + 'accent-3': #f50057, + 'accent-4': #c51162 + ), + $pink +); + +$text-on-pink: () !default; +$text-on-pink: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'white'), + 'accent-2': map-get($shades, 'white'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-pink +); + +$purple: () !default; +$purple: map-deep-merge( + ( + 'base': #9c27b0, + 'lighten-5': #f3e5f5, + 'lighten-4': #e1bee7, + 'lighten-3': #ce93d8, + 'lighten-2': #ba68c8, + 'lighten-1': #ab47bc, + 'darken-1': #8e24aa, + 'darken-2': #7b1fa2, + 'darken-3': #6a1b9a, + 'darken-4': #4a148c, + 'accent-1': #ea80fc, + 'accent-2': #e040fb, + 'accent-3': #d500f9, + 'accent-4': #aa00ff + ), + $purple +); + +$text-on-purple: () !default; +$text-on-purple: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'white'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'white'), + 'accent-2': map-get($shades, 'white'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-purple +); + +$deep-purple: () !default; +$deep-purple: map-deep-merge( + ( + 'base': #673ab7, + 'lighten-5': #ede7f6, + 'lighten-4': #d1c4e9, + 'lighten-3': #b39ddb, + 'lighten-2': #9575cd, + 'lighten-1': #7e57c2, + 'darken-1': #5e35b1, + 'darken-2': #512da8, + 'darken-3': #4527a0, + 'darken-4': #311b92, + 'accent-1': #b388ff, + 'accent-2': #7c4dff, + 'accent-3': #651fff, + 'accent-4': #6200ea + ), + $deep-purple +); + +$text-on-deep-purple: () !default; +$text-on-deep-purple: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'white'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'white'), + 'accent-2': map-get($shades, 'white'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-deep-purple +); + +$indigo: () !default; +$indigo: map-deep-merge( + ( + 'base': #3f51b5, + 'lighten-5': #e8eaf6, + 'lighten-4': #c5cae9, + 'lighten-3': #9fa8da, + 'lighten-2': #7986cb, + 'lighten-1': #5c6bc0, + 'darken-1': #3949ab, + 'darken-2': #303f9f, + 'darken-3': #283593, + 'darken-4': #1a237e, + 'accent-1': #8c9eff, + 'accent-2': #536dfe, + 'accent-3': #3d5afe, + 'accent-4': #304ffe + ), + $indigo +); + +$text-on-indigo: () !default; +$text-on-indigo: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'white'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'white'), + 'accent-2': map-get($shades, 'white'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-indigo +); + +$blue: () !default; +$blue: map-deep-merge( + ( + 'base': #2196F3, + 'lighten-5': #E3F2FD, + 'lighten-4': #BBDEFB, + 'lighten-3': #90CAF9, + 'lighten-2': #64B5F6, + 'lighten-1': #42A5F5, + 'darken-1': #1E88E5, + 'darken-2': #1976D2, + 'darken-3': #1565C0, + 'darken-4': #0D47A1, + 'accent-1': #82B1FF, + 'accent-2': #448AFF, + 'accent-3': #2979FF, + 'accent-4': #2962FF, + ), + $blue +); + +$text-on-blue: () !default; +$text-on-blue: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'white'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-blue +); + +$light-blue: () !default; +$light-blue: map-deep-merge( + ( + 'base': #03a9f4, + 'lighten-5': #e1f5fe, + 'lighten-4': #b3e5fc, + 'lighten-3': #81d4fa, + 'lighten-2': #4fc3f7, + 'lighten-1': #29b6f6, + 'darken-1': #039be5, + 'darken-2': #0288d1, + 'darken-3': #0277bd, + 'darken-4': #01579b, + 'accent-1': #80d8ff, + 'accent-2': #40c4ff, + 'accent-3': #00b0ff, + 'accent-4': #0091ea + ), + $light-blue +); + +$text-on-light-blue: () !default; +$text-on-light-blue: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-light-blue +); + +$cyan: () !default; +$cyan: map-deep-merge( + ( + 'base': #00bcd4, + 'lighten-5': #e0f7fa, + 'lighten-4': #b2ebf2, + 'lighten-3': #80deea, + 'lighten-2': #4dd0e1, + 'lighten-1': #26c6da, + 'darken-1': #00acc1, + 'darken-2': #0097a7, + 'darken-3': #00838f, + 'darken-4': #006064, + 'accent-1': #84ffff, + 'accent-2': #18ffff, + 'accent-3': #00e5ff, + 'accent-4': #00b8d4 + ), + $cyan +); + +$text-on-cyan: () !default; +$text-on-cyan: map-deep-merge( + ( + 'base': map-get($shades, 'black'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-cyan +); + +$teal: () !default; +$teal: map-deep-merge( + ( + 'base': #009688, + 'lighten-5': #e0f2f1, + 'lighten-4': #b2dfdb, + 'lighten-3': #80cbc4, + 'lighten-2': #4db6ac, + 'lighten-1': #26a69a, + 'darken-1': #00897b, + 'darken-2': #00796b, + 'darken-3': #00695c, + 'darken-4': #004d40, + 'accent-1': #a7ffeb, + 'accent-2': #64ffda, + 'accent-3': #1de9b6, + 'accent-4': #00bfa5 + ), + $teal +); + +$text-on-teal: () !default; +$text-on-teal: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-teal +); + +$green: () !default; +$green: map-deep-merge( + ( + 'base': #4CAF50, + 'lighten-5': #E8F5E9, + 'lighten-4': #C8E6C9, + 'lighten-3': #A5D6A7, + 'lighten-2': #81C784, + 'lighten-1': #66BB6A, + 'darken-1': #43A047, + 'darken-2': #388E3C, + 'darken-3': #2E7D32, + 'darken-4': #1B5E20, + 'accent-1': #B9F6CA, + 'accent-2': #69F0AE, + 'accent-3': #00E676, + 'accent-4': #00C853 + ), + $green +); + +$text-on-green: () !default; +$text-on-green: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'black') + ), + $text-on-green +); + +$light-green: () !default; +$light-green: map-deep-merge( + ( + 'base': #8bc34a, + 'lighten-5': #f1f8e9, + 'lighten-4': #dcedc8, + 'lighten-3': #c5e1a5, + 'lighten-2': #aed581, + 'lighten-1': #9ccc65, + 'darken-1': #7cb342, + 'darken-2': #689f38, + 'darken-3': #558b2f, + 'darken-4': #33691e, + 'accent-1': #ccff90, + 'accent-2': #b2ff59, + 'accent-3': #76ff03, + 'accent-4': #64dd17 + ), + $light-green +); + +$text-on-light-green: () !default; +$text-on-light-green: map-deep-merge( + ( + 'base': map-get($shades, 'black'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'black') + ), + $text-on-light-green +); + +$lime: () !default; +$lime: map-deep-merge( + ( + 'base': #cddc39, + 'lighten-5': #f9fbe7, + 'lighten-4': #f0f4c3, + 'lighten-3': #e6ee9c, + 'lighten-2': #dce775, + 'lighten-1': #d4e157, + 'darken-1': #c0ca33, + 'darken-2': #afb42b, + 'darken-3': #9e9d24, + 'darken-4': #827717, + 'accent-1': #f4ff81, + 'accent-2': #eeff41, + 'accent-3': #c6ff00, + 'accent-4': #aeea00 + ), + $lime +); + +$text-on-lime: () !default; +$text-on-lime: map-deep-merge( + ( + 'base': map-get($shades, 'black'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'black'), + 'darken-2': map-get($shades, 'black'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'black') + ), + $text-on-lime +); + +$yellow: () !default; +$yellow: map-deep-merge( + ( + 'base': #ffeb3b, + 'lighten-5': #fffde7, + 'lighten-4': #fff9c4, + 'lighten-3': #fff59d, + 'lighten-2': #fff176, + 'lighten-1': #ffee58, + 'darken-1': #fdd835, + 'darken-2': #fbc02d, + 'darken-3': #f9a825, + 'darken-4': #f57f17, + 'accent-1': #ffff8d, + 'accent-2': #ffff00, + 'accent-3': #ffea00, + 'accent-4': #ffd600 + ), + $yellow +); + +$text-on-yellow: () !default; +$text-on-yellow: map-deep-merge( + ( + 'base': map-get($shades, 'black'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'black'), + 'darken-2': map-get($shades, 'black'), + 'darken-3': map-get($shades, 'black'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'black') + ), + $text-on-yellow +); + +$amber: () !default; +$amber: map-deep-merge( + ( + 'base': #ffc107, + 'lighten-5': #fff8e1, + 'lighten-4': #ffecb3, + 'lighten-3': #ffe082, + 'lighten-2': #ffd54f, + 'lighten-1': #ffca28, + 'darken-1': #ffb300, + 'darken-2': #ffa000, + 'darken-3': #ff8f00, + 'darken-4': #ff6f00, + 'accent-1': #ffe57f, + 'accent-2': #ffd740, + 'accent-3': #ffc400, + 'accent-4': #ffab00 + ), + $amber +); + +$text-on-amber: () !default; +$text-on-amber: map-deep-merge( + ( + 'base': map-get($shades, 'black'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'black'), + 'darken-2': map-get($shades, 'black'), + 'darken-3': map-get($shades, 'black'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'black') + ), + $text-on-amber +); + +$orange: () !default; +$orange: map-deep-merge( + ( + 'base': #ff9800, + 'lighten-5': #fff3e0, + 'lighten-4': #ffe0b2, + 'lighten-3': #ffcc80, + 'lighten-2': #ffb74d, + 'lighten-1': #ffa726, + 'darken-1': #fb8c00, + 'darken-2': #f57c00, + 'darken-3': #ef6c00, + 'darken-4': #e65100, + 'accent-1': #ffd180, + 'accent-2': #ffab40, + 'accent-3': #ff9100, + 'accent-4': #ff6d00 + ), + $orange +); + +$text-on-orange: () !default; +$text-on-orange: map-deep-merge( + ( + 'base': map-get($shades, 'black'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'black'), + 'accent-3': map-get($shades, 'black'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-orange +); + +$deep-orange: () !default; +$deep-orange: map-deep-merge( + ( + 'base': #ff5722, + 'lighten-5': #fbe9e7, + 'lighten-4': #ffccbc, + 'lighten-3': #ffab91, + 'lighten-2': #ff8a65, + 'lighten-1': #ff7043, + 'darken-1': #f4511e, + 'darken-2': #e64a19, + 'darken-3': #d84315, + 'darken-4': #bf360c, + 'accent-1': #ff9e80, + 'accent-2': #ff6e40, + 'accent-3': #ff3d00, + 'accent-4': #dd2c00 + ), + $deep-orange +); + +$text-on-deep-orange: () !default; +$text-on-deep-orange: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white'), + 'accent-1': map-get($shades, 'black'), + 'accent-2': map-get($shades, 'white'), + 'accent-3': map-get($shades, 'white'), + 'accent-4': map-get($shades, 'white') + ), + $text-on-deep-orange +); + +$brown: () !default; +$brown: map-deep-merge( + ( + 'base': #795548, + 'lighten-5': #efebe9, + 'lighten-4': #d7ccc8, + 'lighten-3': #bcaaa4, + 'lighten-2': #a1887f, + 'lighten-1': #8d6e63, + 'darken-1': #6d4c41, + 'darken-2': #5d4037, + 'darken-3': #4e342e, + 'darken-4': #3e2723 + ), + $brown +); + +$text-on-brown: () !default; +$text-on-brown: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white') + ), + $text-on-brown +); + +$blue-grey: () !default; +$blue-grey: map-deep-merge( + ( + 'base': #607d8b, + 'lighten-5': #eceff1, + 'lighten-4': #cfd8dc, + 'lighten-3': #b0bec5, + 'lighten-2': #90a4ae, + 'lighten-1': #78909c, + 'darken-1': #546e7a, + 'darken-2': #455a64, + 'darken-3': #37474f, + 'darken-4': #263238 + ), + $blue-grey +); + +$text-on-blue-grey: () !default; +$text-on-blue-grey: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'white'), + 'lighten-1': map-get($shades, 'white'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white') + ), + $text-on-blue-grey +); + +$grey: () !default; +$grey: map-deep-merge( + ( + 'base': #9e9e9e, + 'lighten-5': #fafafa, + 'lighten-4': #f5f5f5, + 'lighten-3': #eeeeee, + 'lighten-2': #e0e0e0, + 'lighten-1': #bdbdbd, + 'darken-1': #757575, + 'darken-2': #616161, + 'darken-3': #424242, + 'darken-4': #212121 + ), + $grey +); + +$text-on-grey: () !default; +$text-on-grey: map-deep-merge( + ( + 'base': map-get($shades, 'white'), + 'lighten-5': map-get($shades, 'black'), + 'lighten-4': map-get($shades, 'black'), + 'lighten-3': map-get($shades, 'black'), + 'lighten-2': map-get($shades, 'black'), + 'lighten-1': map-get($shades, 'black'), + 'darken-1': map-get($shades, 'white'), + 'darken-2': map-get($shades, 'white'), + 'darken-3': map-get($shades, 'white'), + 'darken-4': map-get($shades, 'white') + ), + $text-on-grey +); + +$colors: () !default; +$colors: map-deep-merge( + ( + 'red': $red, + 'pink': $pink, + 'purple': $purple, + 'deep-purple': $deep-purple, + 'indigo': $indigo, + 'blue': $blue, + 'light-blue': $light-blue, + 'cyan': $cyan, + 'teal': $teal, + 'green': $green, + 'light-green': $light-green, + 'lime': $lime, + 'yellow': $yellow, + 'amber': $amber, + 'orange': $orange, + 'deep-orange': $deep-orange, + 'brown': $brown, + 'blue-grey': $blue-grey, + 'grey': $grey, + 'shades': $shades + ), + $colors +); + +$text-on-colors: () !default; +$text-on-colors: map-deep-merge( + ( + 'red': $text-on-red, + 'pink': $text-on-pink, + 'purple': $text-on-purple, + 'deep-purple': $text-on-deep-purple, + 'indigo': $text-on-indigo, + 'blue': $text-on-blue, + 'light-blue': $text-on-light-blue, + 'cyan': $text-on-cyan, + 'teal': $text-on-teal, + 'green': $text-on-green, + 'light-green': $text-on-light-green, + 'lime': $text-on-lime, + 'yellow': $text-on-yellow, + 'amber': $text-on-amber, + 'orange': $text-on-orange, + 'deep-orange': $text-on-deep-orange, + 'brown': $text-on-brown, + 'blue-grey': $text-on-blue-grey, + 'grey': $text-on-grey, + 'shades': $text-on-shades + ), + $text-on-colors +); diff --git a/packages/alpinui/src/styles/settings/_elevations.scss b/packages/alpinui/src/styles/settings/_elevations.scss new file mode 100644 index 0000000..57c1c08 --- /dev/null +++ b/packages/alpinui/src/styles/settings/_elevations.scss @@ -0,0 +1,101 @@ +@use '../tools/functions' as *; + +$shadow-key-umbra-opacity: var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)) !default; +$shadow-key-penumbra-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)) !default; +$shadow-key-ambient-opacity: var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !default; + +$shadow-key-umbra: () !default; +$shadow-key-umbra: map-deep-merge( + ( + 0: (0px 0px 0px 0px $shadow-key-umbra-opacity), + 1: (0px 2px 1px -1px $shadow-key-umbra-opacity), + 2: (0px 3px 1px -2px $shadow-key-umbra-opacity), + 3: (0px 3px 3px -2px $shadow-key-umbra-opacity), + 4: (0px 2px 4px -1px $shadow-key-umbra-opacity), + 5: (0px 3px 5px -1px $shadow-key-umbra-opacity), + 6: (0px 3px 5px -1px $shadow-key-umbra-opacity), + 7: (0px 4px 5px -2px $shadow-key-umbra-opacity), + 8: (0px 5px 5px -3px $shadow-key-umbra-opacity), + 9: (0px 5px 6px -3px $shadow-key-umbra-opacity), + 10: (0px 6px 6px -3px $shadow-key-umbra-opacity), + 11: (0px 6px 7px -4px $shadow-key-umbra-opacity), + 12: (0px 7px 8px -4px $shadow-key-umbra-opacity), + 13: (0px 7px 8px -4px $shadow-key-umbra-opacity), + 14: (0px 7px 9px -4px $shadow-key-umbra-opacity), + 15: (0px 8px 9px -5px $shadow-key-umbra-opacity), + 16: (0px 8px 10px -5px $shadow-key-umbra-opacity), + 17: (0px 8px 11px -5px $shadow-key-umbra-opacity), + 18: (0px 9px 11px -5px $shadow-key-umbra-opacity), + 19: (0px 9px 12px -6px $shadow-key-umbra-opacity), + 20: (0px 10px 13px -6px $shadow-key-umbra-opacity), + 21: (0px 10px 13px -6px $shadow-key-umbra-opacity), + 22: (0px 10px 14px -6px $shadow-key-umbra-opacity), + 23: (0px 11px 14px -7px $shadow-key-umbra-opacity), + 24: (0px 11px 15px -7px $shadow-key-umbra-opacity) + ), + $shadow-key-umbra +); + +$shadow-key-penumbra: () !default; +$shadow-key-penumbra: map-deep-merge( + ( + 0: (0px 0px 0px 0px $shadow-key-penumbra-opacity), + 1: (0px 1px 1px 0px $shadow-key-penumbra-opacity), + 2: (0px 2px 2px 0px $shadow-key-penumbra-opacity), + 3: (0px 3px 4px 0px $shadow-key-penumbra-opacity), + 4: (0px 4px 5px 0px $shadow-key-penumbra-opacity), + 5: (0px 5px 8px 0px $shadow-key-penumbra-opacity), + 6: (0px 6px 10px 0px $shadow-key-penumbra-opacity), + 7: (0px 7px 10px 1px $shadow-key-penumbra-opacity), + 8: (0px 8px 10px 1px $shadow-key-penumbra-opacity), + 9: (0px 9px 12px 1px $shadow-key-penumbra-opacity), + 10: (0px 10px 14px 1px $shadow-key-penumbra-opacity), + 11: (0px 11px 15px 1px $shadow-key-penumbra-opacity), + 12: (0px 12px 17px 2px $shadow-key-penumbra-opacity), + 13: (0px 13px 19px 2px $shadow-key-penumbra-opacity), + 14: (0px 14px 21px 2px $shadow-key-penumbra-opacity), + 15: (0px 15px 22px 2px $shadow-key-penumbra-opacity), + 16: (0px 16px 24px 2px $shadow-key-penumbra-opacity), + 17: (0px 17px 26px 2px $shadow-key-penumbra-opacity), + 18: (0px 18px 28px 2px $shadow-key-penumbra-opacity), + 19: (0px 19px 29px 2px $shadow-key-penumbra-opacity), + 20: (0px 20px 31px 3px $shadow-key-penumbra-opacity), + 21: (0px 21px 33px 3px $shadow-key-penumbra-opacity), + 22: (0px 22px 35px 3px $shadow-key-penumbra-opacity), + 23: (0px 23px 36px 3px $shadow-key-penumbra-opacity), + 24: (0px 24px 38px 3px $shadow-key-penumbra-opacity) + ), + $shadow-key-penumbra +); + +$shadow-key-ambient: () !default; +$shadow-key-ambient: map-deep-merge( + ( + 0: (0px 0px 0px 0px $shadow-key-ambient-opacity), + 1: (0px 1px 3px 0px $shadow-key-ambient-opacity), + 2: (0px 1px 5px 0px $shadow-key-ambient-opacity), + 3: (0px 1px 8px 0px $shadow-key-ambient-opacity), + 4: (0px 1px 10px 0px $shadow-key-ambient-opacity), + 5: (0px 1px 14px 0px $shadow-key-ambient-opacity), + 6: (0px 1px 18px 0px $shadow-key-ambient-opacity), + 7: (0px 2px 16px 1px $shadow-key-ambient-opacity), + 8: (0px 3px 14px 2px $shadow-key-ambient-opacity), + 9: (0px 3px 16px 2px $shadow-key-ambient-opacity), + 10: (0px 4px 18px 3px $shadow-key-ambient-opacity), + 11: (0px 4px 20px 3px $shadow-key-ambient-opacity), + 12: (0px 5px 22px 4px $shadow-key-ambient-opacity), + 13: (0px 5px 24px 4px $shadow-key-ambient-opacity), + 14: (0px 5px 26px 4px $shadow-key-ambient-opacity), + 15: (0px 6px 28px 5px $shadow-key-ambient-opacity), + 16: (0px 6px 30px 5px $shadow-key-ambient-opacity), + 17: (0px 6px 32px 5px $shadow-key-ambient-opacity), + 18: (0px 7px 34px 6px $shadow-key-ambient-opacity), + 19: (0px 7px 36px 6px $shadow-key-ambient-opacity), + 20: (0px 8px 38px 7px $shadow-key-ambient-opacity), + 21: (0px 8px 40px 7px $shadow-key-ambient-opacity), + 22: (0px 8px 42px 7px $shadow-key-ambient-opacity), + 23: (0px 9px 44px 8px $shadow-key-ambient-opacity), + 24: (0px 9px 46px 8px $shadow-key-ambient-opacity) + ), + $shadow-key-ambient +); diff --git a/packages/alpinui/src/styles/settings/_index.sass b/packages/alpinui/src/styles/settings/_index.sass new file mode 100644 index 0000000..6ad8b9a --- /dev/null +++ b/packages/alpinui/src/styles/settings/_index.sass @@ -0,0 +1,4 @@ +@forward './variables' +@forward './colors' +@forward './elevations' +@forward './utilities' diff --git a/packages/alpinui/src/styles/settings/_utilities.scss b/packages/alpinui/src/styles/settings/_utilities.scss new file mode 100644 index 0000000..dc4ce44 --- /dev/null +++ b/packages/alpinui/src/styles/settings/_utilities.scss @@ -0,0 +1,619 @@ +@use 'sass:map'; +@use './variables'; +@use '../tools/functions' as *; + +$utilities: () !default; +@if ($utilities != false) { + $utilities: map-deep-merge( + ( + // Display utilities + "overflow": ( + property: overflow, + values: auto hidden visible scroll, + ), + "overflow-x": ( + property: overflow-x, + values: auto hidden scroll + ), + "overflow-y": ( + property: overflow-y, + values: auto hidden scroll + ), + "display": ( + responsive: true, + print: true, + property: display, + class: d, + values: none inline inline-block block table table-row table-cell flex inline-flex + ), + "float": ( + responsive: true, + print: true, + property: float, + class: float, + values: none left right + ), + "float:rtl": ( + responsive: true, + print: true, + property: float, + class: float, + values: ( + end: left, + start: right, + ) + ), + "float:ltr": ( + responsive: true, + print: true, + property: float, + class: float, + values: ( + end: right, + start: left, + ) + ), + + // Flex utilities + "flex": ( + responsive: true, + property: flex, + values: ( + fill: 1 1 auto, + '1-1': 1 1 auto, + '1-0': 1 0 auto, + '0-1': 0 1 auto, + '0-0': 0 0 auto, + '1-1-100': 1 1 100%, + '1-0-100': 1 0 100%, + '0-1-100': 0 1 100%, + '0-0-100': 0 0 100%, + '1-1-0': 1 1 0, + '1-0-0': 1 0 0, + '0-1-0': 0 1 0, + '0-0-0': 0 0 0, + ) + ), + "flex-direction": ( + responsive: true, + property: flex-direction, + class: flex, + values: row column row-reverse column-reverse + ), + "flex-grow": ( + responsive: true, + property: flex-grow, + class: flex, + values: ( + grow-0: 0, + grow-1: 1, + ) + ), + "flex-shrink": ( + responsive: true, + property: flex-shrink, + class: flex, + values: ( + shrink-0: 0, + shrink-1: 1, + ) + ), + "flex-wrap": ( + responsive: true, + property: flex-wrap, + class: flex, + values: wrap nowrap wrap-reverse + ), + "justify-content": ( + responsive: true, + property: justify-content, + class: justify, + values: ( + start: flex-start, + end: flex-end, + center: center, + space-between: space-between, + space-around: space-around, + space-evenly: space-evenly, + ) + ), + "align-items": ( + responsive: true, + property: align-items, + class: align, + values: ( + start: flex-start, + end: flex-end, + center: center, + baseline: baseline, + stretch: stretch, + ) + ), + "align-content": ( + responsive: true, + property: align-content, + values: ( + start: flex-start, + end: flex-end, + center: center, + space-between: space-between, + space-around: space-around, + space-evenly: space-evenly, + stretch: stretch, + ) + ), + "align-self": ( + responsive: true, + property: align-self, + values: ( + auto: auto, + start: flex-start, + end: flex-end, + center: center, + baseline: baseline, + stretch: stretch, + ) + ), + "order": ( + responsive: true, + property: order, + values: ( + first: -1, + 0: 0, + 1: 1, + 2: 2, + 3: 3, + 4: 4, + 5: 5, + 6: 6, + 7: 7, + 8: 8, + 9: 9, + 10: 10, + 11: 11, + 12: 12, + last: 13, + ), + ), + + // gap utilities + "gap": ( + responsive: true, + property: gap, + class: ga, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "gap-row": ( + responsive: true, + property: row-gap, + class: gr, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "gap-column": ( + responsive: true, + property: column-gap, + class: gc, + values: map.merge(variables.$spacers, (auto: auto)) + ), + + // Margin utilities + "margin": ( + responsive: true, + property: margin, + class: ma, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-right": ( + responsive: true, + property: margin-right, + class: mr, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-left": ( + responsive: true, + property: margin-left, + class: ml, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-start": ( + responsive: true, + property: margin-inline-start, + class: ms, + values: map.merge(variables.$spacers, (auto: auto)) + ), + "margin-end": ( + responsive: true, + property: margin-inline-end, + class: me, + values: map.merge(variables.$spacers, (auto: auto)) + ), + + // Negative margin utilities + "negative-margin": ( + responsive: true, + property: margin, + class: ma, + values: variables.$negative-spacers + ), + "negative-margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: variables.$negative-spacers + ), + "negative-margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: variables.$negative-spacers + ), + "negative-margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: variables.$negative-spacers + ), + "negative-margin-right": ( + responsive: true, + property: margin-right, + class: mr, + values: variables.$negative-spacers + ), + "negative-margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: variables.$negative-spacers + ), + "negative-margin-left": ( + responsive: true, + property: margin-left, + class: ml, + values: variables.$negative-spacers + ), + "negative-margin-start": ( + responsive: true, + property: margin-inline-start, + class: ms, + values: variables.$negative-spacers + ), + "negative-margin-end": ( + responsive: true, + property: margin-inline-end, + class: me, + values: variables.$negative-spacers + ), + + // Padding utilities + "padding": ( + responsive: true, + property: padding, + class: pa, + values: variables.$spacers + ), + "padding-x": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: variables.$spacers + ), + "padding-y": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: variables.$spacers + ), + "padding-top": ( + responsive: true, + property: padding-top, + class: pt, + values: variables.$spacers + ), + "padding-right": ( + responsive: true, + property: padding-right, + class: pr, + values: variables.$spacers + ), + "padding-bottom": ( + responsive: true, + property: padding-bottom, + class: pb, + values: variables.$spacers + ), + "padding-left": ( + responsive: true, + property: padding-left, + class: pl, + values: variables.$spacers + ), + "padding-start": ( + responsive: true, + property: padding-inline-start, + class: ps, + values: variables.$spacers + ), + "padding-end": ( + responsive: true, + property: padding-inline-end, + class: pe, + values: variables.$spacers + ), + + // Border radius + "rounded": ( + property: border-radius, + class: rounded, + values: variables.$rounded + ), + "rounded-top": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-t, + values: variables.$rounded + ), + "rounded-end": ( + property: (ltr: border-top-right-radius border-bottom-right-radius, rtl: border-top-left-radius border-bottom-left-radius), + class: rounded-e, + values: variables.$rounded + ), + "rounded-bottom": ( + property: border-bottom-left-radius border-bottom-right-radius, + class: rounded-b, + values: variables.$rounded + ), + "rounded-start": ( + property: (ltr: border-top-left-radius border-bottom-left-radius, rtl: border-top-right-radius border-bottom-right-radius), + class: rounded-s, + values: variables.$rounded + ), + "rounded-top-start": ( + property: (ltr: border-top-left-radius, rtl: border-top-right-radius), + class: rounded-ts, + values: variables.$rounded + ), + "rounded-top-end": ( + property: (ltr: border-top-right-radius, rtl: border-top-left-radius), + class: rounded-te, + values: variables.$rounded + ), + "rounded-bottom-end": ( + property: (ltr: border-bottom-right-radius, rtl: border-bottom-left-radius), + class: rounded-be, + values: variables.$rounded + ), + "rounded-bottom-start": ( + property: (ltr: border-bottom-left-radius, rtl: border-bottom-right-radius), + class: rounded-bs, + values: variables.$rounded + ), + + // Border + "border": ( + property: border-width border-style border-color, + class: border, + values: variables.$borders + ), + "border-opacity": ( + property: --v-border-opacity, + class: border-opacity, + values: variables.$border-opacities + ), + "border-top": ( + property: border-block-start-width border-block-start-style border-block-start-color, + class: border-t, + values: variables.$borders + ), + "border-end": ( + property: border-inline-end-width border-inline-end-style border-inline-end-color, + class: border-e, + values: variables.$borders + ), + "border-bottom": ( + property: border-block-end-width border-block-end-style border-block-end-color, + class: border-b, + values: variables.$borders + ), + "border-start": ( + property: border-inline-start-width border-inline-start-style border-inline-start-color, + class: border-s, + values: variables.$borders + ), + "border-style": ( + property: border-style, + class: border, + values: solid dashed dotted double none + ), + + // Text + "text-align": ( + responsive: true, + property: text-align, + class: text, + values: left right center justify start end + ), + "text-decoration": ( + property: text-decoration, + class: text-decoration, + values: line-through none overline underline + ), + "white-space": ( + property: white-space, + class: text, + values: ( + wrap: normal, + no-wrap: nowrap, + pre: pre, + pre-line: pre-line, + pre-wrap: pre-wrap, + ) + ), + "overflow-wrap": ( + property: overflow-wrap word-break, // word-break for IE & < Edge 18 + class: text, + values: (break: break-word) + ), + "opacity": ( + property: opacity, + class: opacity, + values: variables.$opacities + ), + "text-opacity": ( + property: color, + class: text, + values: ( + high-emphasis: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)), + medium-emphasis: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)), + disabled: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)), + ) + ), + "text-overflow": ( + property: white-space overflow text-overflow, + class: text, + values: (truncate: nowrap hidden ellipsis) + ), + "typography": ( + responsive: true, + property: ( + font-size, + font-weight, + line-height, + letter-spacing, + font-family, + text-transform + ), + class: text, + unimportant: ( + font-family, + font-weight, + line-height + ), + values: variables.$flat-typography + ), + "text-transform": ( + property: text-transform, + class: text, + values: none capitalize lowercase uppercase + ), + "font-weight": ( + property: font-weight, + class: font-weight, + values: variables.$font-weights + ), + "font-italic": ( + property: font-style, + class: font, + values: italic + ), + "text-mono": ( + property: font-family, + class: text, + values: ( + mono: monospace + ) + ), + // Position + "position": ( + property: position, + class: position, + values: static relative fixed absolute sticky + ), + "top": ( + property: top, + class: top, + values: 0 + ), + "right": ( + property: right, + class: right, + values: 0 + ), + "bottom": ( + property: bottom, + class: bottom, + values: 0 + ), + "left": ( + property: left, + class: left, + values: 0 + ), + // Cursor + "cursor": ( + property: cursor, + class: cursor, + values: auto default pointer wait text move help not-allowed progress grab grabbing none + ), + // Sizing + "fill-height": ( + property: height, + class: fill, + values: ( + height: 100% + ) + ), + "height": ( + property: height, + responsive: true, + class: h, + values: ( + auto: auto, + screen: 100vh, + 0: 0, + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100% + ) + ), + "height-screen": ( + property: height, + class: h, + values: ( + screen: 100dvh + ) + ), + "width": ( + property: width, + responsive: true, + class: w, + values: ( + auto: auto, + 0: 0, + 25: 25%, + 33: 33%, + 50: 50%, + 66: 66%, + 75: 75%, + 100: 100% + ) + ) + ), + $utilities + ); +} @else { + $utilities: (); +} diff --git a/packages/alpinui/src/styles/settings/_variables.scss b/packages/alpinui/src/styles/settings/_variables.scss new file mode 100644 index 0000000..615e71b --- /dev/null +++ b/packages/alpinui/src/styles/settings/_variables.scss @@ -0,0 +1,363 @@ +@use 'sass:math'; +@use 'sass:map'; +@use 'sass:meta'; +@use '../tools/functions' as *; + +$color-pack: true !default; +$reset: true !default; +$layers: false !default; + +$body-font-family: 'Roboto', sans-serif !default; +$font-size-root: 1rem !default; +$line-height-root: 1.5 !default; +$border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default; +$border-radius-root: 4px !default; +$border-style-root: solid !default; +$border-width-root: thin !default; +$transition-duration-root: 0.3s !default; +$transition-move-duration-root: 0.5s !default; + +$borders: () !default; +$borders: map-deep-merge( + ( + 0: 0, + null: $border-width-root, + thin: $border-width-root, + sm: 1px, + md: 2px, + lg: 4px, + xl: 8px + ), + $borders +); + +@each $key, $border in $borders { + $borders: map-deep-merge( + $borders, + ( $key: $border $border-style-root $border-color-root ) + ) +} + +$border-opacities: () !default; +$border-opacities: map-deep-merge( + ( + 0: 0, + null: .12, + 25: .25, + 50: .50, + 75: .75, + 100: 1 + ), + $border-opacities +); + +$opacities: () !default; +$opacities: map-deep-merge( + ( + hover: var(--v-hover-opacity), + focus: var(--v-focus-opacity), + selected: var(--v-selected-opacity), + activated: var(--v-activated-opacity), + pressed: var(--v-pressed-opacity), + dragged: var(--v-dragged-opacity), + 0: 0, + 10: .1, + 20: .2, + 30: .3, + 40: .4, + 50: .5, + 60: .6, + 70: .7, + 80: .8, + 90: .9, + 100: 1 + ), + $opacities +); + +$states: () !default; +$states: map-deep-merge( + ( + 'hover': var(--v-hover-opacity), + 'focus': var(--v-focus-opacity), + 'selected': var(--v-selected-opacity), + 'activated': var(--v-activated-opacity), + 'pressed': var(--v-pressed-opacity), + 'dragged': var(--v-dragged-opacity) + ), + $states +); + +$rounded: () !default; +$rounded: map-deep-merge( + ( + 0: 0, + 'sm': $border-radius-root * .5, + null: $border-radius-root, + 'lg': $border-radius-root * 2, + 'xl': $border-radius-root * 6, + 'pill': 9999px, + 'circle': 50%, + 'shaped': $border-radius-root * 6 0 + ), + $rounded +); + +$spacer: 4px !default; +$spacers-steps: 16 !default; + +$spacers: () !default; +@if (meta.type-of($spacers) == list) { + @for $i from 0 through $spacers-steps { + $spacers: map.merge($spacers, ($i: $spacer * $i)) + } +} + +$negative-spacers: () !default; +@if (meta.type-of($negative-spacers) == list) { + @for $i from 1 through $spacers-steps { + $negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i)) + } +} + +$grid-breakpoints: () !default; +$grid-breakpoints: map-deep-merge( + ( + 'xs': 0, + 'sm': 600px, + 'md': 960px, + 'lg': 1280px, + 'xl': 1920px, + 'xxl': 2560px, + ), + $grid-breakpoints +); + +$grid-gutter: $spacer * 6 !default; +$form-grid-gutter: $spacer * 2 !default; +$grid-columns: 12 !default; +$container-padding-x: $spacer * 4 !default; + +$grid-gutters: () !default; +$grid-gutters: map-deep-merge( + ( + 'xs': math.div($grid-gutter, 12), + 'sm': math.div($grid-gutter, 6), + 'md': math.div($grid-gutter, 3), + 'lg': math.div($grid-gutter * 2, 3), + 'xl': $grid-gutter, + ), + $grid-gutters +); + +$container-max-widths: () !default; +$container-max-widths: map-deep-merge( + ( + 'xs': null, + 'sm': null, + 'md': map.get($grid-breakpoints, 'md') * 0.9375, + 'lg': map.get($grid-breakpoints, 'lg') * 0.9375, + 'xl': map.get($grid-breakpoints, 'xl') * 0.9375, + 'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375, + ), + $container-max-widths +); + +// Avoid using *-and-down where possible +$display-breakpoints: () !default; +$display-breakpoints: map-deep-merge( + ( + 'print-only': 'only print', + 'screen-only': 'only screen', + 'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})', + 'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})', + 'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})', + 'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})', + 'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})', + 'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})', + 'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})', + 'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})', + 'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})', + 'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})', + 'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})', + 'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})', + 'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})', + 'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})', + ), + $display-breakpoints +); + +$font-weights: () !default; +$font-weights: map-deep-merge( + ( + 'thin': 100, + 'light': 300, + 'regular': 400, + 'medium': 500, + 'bold': 700, + 'black': 900 + ), + $font-weights +); + +$heading-font-family: $body-font-family !default; + +$typography: () !default; +$typography: map-deep-merge( + ( + 'h1': ( + 'size': 6rem, + 'weight': 300, + 'line-height': 1, + 'letter-spacing': -.015625em, + 'font-family': $heading-font-family, + 'text-transform': none + ), + 'h2': ( + 'size': 3.75rem, + 'weight': 300, + 'line-height': 1, + 'letter-spacing': -.0083333333em, + 'font-family': $heading-font-family, + 'text-transform': none + ), + 'h3': ( + 'size': 3rem, + 'weight': 400, + 'line-height': 1.05, + 'letter-spacing': normal, + 'font-family': $heading-font-family, + 'text-transform': none + ), + 'h4': ( + 'size': 2.125rem, + 'weight': 400, + 'line-height': 1.175, + 'letter-spacing': .0073529412em, + 'font-family': $heading-font-family, + 'text-transform': none + ), + 'h5': ( + 'size': 1.5rem, + 'weight': 400, + 'line-height': 1.333, + 'letter-spacing': normal, + 'font-family': $heading-font-family, + 'text-transform': none + ), + 'h6': ( + 'size': 1.25rem, + 'weight': 500, + 'line-height': 1.6, + 'letter-spacing': .0125em, + 'font-family': $heading-font-family, + 'text-transform': none + ), + 'subtitle-1': ( + 'size': 1rem, + 'weight': normal, + 'line-height': 1.75, + 'letter-spacing': .009375em, + 'font-family': $body-font-family, + 'text-transform': none + ), + 'subtitle-2': ( + 'size': .875rem, + 'weight': 500, + 'line-height': 1.6, + 'letter-spacing': .0071428571em, + 'font-family': $body-font-family, + 'text-transform': none + ), + 'body-1': ( + 'size': 1rem, + 'weight': 400, + 'line-height': 1.5, + 'letter-spacing': .03125em, + 'font-family': $body-font-family, + 'text-transform': none + ), + 'body-2': ( + 'size': .875rem, + 'weight': 400, + 'line-height': 1.425, + 'letter-spacing': .0178571429em, + 'font-family': $body-font-family, + 'text-transform': none + ), + 'button': ( + 'size': .875rem, + 'weight': 500, + 'line-height': 2.6, + 'letter-spacing': .0892857143em, + 'font-family': $body-font-family, + 'text-transform': uppercase + ), + 'caption': ( + 'size': .75rem, + 'weight': 400, + 'line-height': 1.667, + 'letter-spacing': .0333333333em, + 'font-family': $body-font-family, + 'text-transform': none + ), + 'overline': ( + 'size': .75rem, + 'weight': 500, + 'line-height': 2.667, + 'letter-spacing': .1666666667em, + 'font-family': $body-font-family, + 'text-transform': uppercase + ) + ), + $typography +); + +$flat-typography: () !default; +@each $type, $values in $typography { + $flat-typography: map-deep-merge( + $flat-typography, + (#{$type}: ( + map.get($values, 'size'), + map.get($values, 'weight'), + map.get($values, 'line-height'), + map.get($values, 'letter-spacing'), + map.get($values, 'font-family'), + map.get($values, 'text-transform'), + )) + ); +} + +// Mapping from transition to easings: +// fast-out-slow-in -> standard +// linear-out-slow-in -> decelerated +// fast-out-linear-in -> accelerated +// ease-in-out -> standard or accelerated depending on usage +// fast-in-fast-out -> accelerated +// swing -> standard + +$standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default; +$decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering +$accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving + +// Elements +$bootable-transition: 0.2s $decelerated-easing !default; +$blockquote-font-size: 18px !default; +$blockquote-font-weight: 300 !default; + +$sizes: ( + 'x-small', + 'small', + 'default', + 'large', + 'x-large' +) !default; + +$size-scale: $spacer * 2 !default; +$size-scales: ( + 'x-small': -2, + 'small': -1, + 'default': 0, + 'large': 1, + 'x-large': 2 +) !default; diff --git a/packages/alpinui/src/styles/tools/_absolute.sass b/packages/alpinui/src/styles/tools/_absolute.sass new file mode 100644 index 0000000..e7e7592 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_absolute.sass @@ -0,0 +1,8 @@ +@mixin absolute($pseudo: false) + @if ($pseudo) + content: '' + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% diff --git a/packages/alpinui/src/styles/tools/_bootable.sass b/packages/alpinui/src/styles/tools/_bootable.sass new file mode 100644 index 0000000..8d9808f --- /dev/null +++ b/packages/alpinui/src/styles/tools/_bootable.sass @@ -0,0 +1,3 @@ +@mixin bootable() + &:not([data-booted="true"]) + transition: none !important diff --git a/packages/alpinui/src/styles/tools/_border.sass b/packages/alpinui/src/styles/tools/_border.sass new file mode 100644 index 0000000..e0e5897 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_border.sass @@ -0,0 +1,9 @@ +@mixin border($color: null, $style: null, $width: null, $thin-width: false, $important: false) + border-color: $color if($important, !important, null) + border-style: $style if($important, !important, null) + border-width: $width if($important, !important, null) + + @if $thin-width + &--border + border-width: $thin-width + box-shadow: none diff --git a/packages/alpinui/src/styles/tools/_density.sass b/packages/alpinui/src/styles/tools/_density.sass new file mode 100644 index 0000000..aa7e310 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_density.sass @@ -0,0 +1,6 @@ +@use '../settings' + +@mixin density($name, $densities) + @each $density, $multiplier in $densities + .#{$name}--density-#{$density} + @content($multiplier * settings.$spacer) diff --git a/packages/alpinui/src/styles/tools/_display.sass b/packages/alpinui/src/styles/tools/_display.sass new file mode 100644 index 0000000..d22c097 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_display.sass @@ -0,0 +1,19 @@ +@use './functions' as * +@use '../settings' as * + +@mixin visually-hidden + position: absolute !important + height: 1px + width: 1px + overflow: hidden + clip: rect(1px, 1px, 1px, 1px) + white-space: nowrap + display: initial + +=media-breakpoint-up($name, $breakpoints: $grid-breakpoints) + $min: breakpoint-min($name, $breakpoints) + @if $min + @media (min-width: $min) + @content + @else + @content diff --git a/packages/alpinui/src/styles/tools/_elevation.sass b/packages/alpinui/src/styles/tools/_elevation.sass new file mode 100644 index 0000000..fff1c2e --- /dev/null +++ b/packages/alpinui/src/styles/tools/_elevation.sass @@ -0,0 +1,8 @@ +@use 'sass:map' +@use '../settings' + +@mixin elevation($z, $important: false) + box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z) if($important, !important, null) + +@mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1)) + transition: box-shadow $duration $easing diff --git a/packages/alpinui/src/styles/tools/_functions.sass b/packages/alpinui/src/styles/tools/_functions.sass new file mode 100644 index 0000000..531a020 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_functions.sass @@ -0,0 +1,82 @@ +@use 'sass:list' +@use 'sass:map' +@use 'sass:math' +@use 'sass:meta' + +@function map-deep-set($map, $keys, $value) + $maps: ($map,) + $result: null + + // If the last key is a map already + // Warn the user we will be overriding it with $value + @if meta.type-of(list.nth($keys, -1)) == "map" + @warn "The last key you specified is a map; it will be overrided with `#{$value}`." + + // If $keys is a single key + // Just merge and return + @if list.length($keys) == 1 + @return map.merge($map, ( $keys: $value )) + + // Loop from the first to the second to last key from $keys + // Store the associated map to this key in the $maps list + // If the key doesn't exist, throw an error + @for $i from 1 through list.length($keys) - 1 + $current-key: list.nth($keys, $i) + $current-map: list.nth($maps, -1) + $current-get: map.get($current-map, $current-key) + + @if $current-get == null + @error "Key `#{$current-key}` doesn't exist at current level in map." + + $maps: list.append($maps, $current-get) + + // Loop from the last map to the first one + // Merge it with the previous one + @for $i from list.length($maps) through 1 + $current-map: list.nth($maps, $i) + $current-key: list.nth($keys, $i) + $current-val: if($i == list.length($maps), $value, $result) + $result: map.merge($current-map, ($current-key: $current-val)) + + // Return result + @return $result + +@function map-deep-get($map, $keys...) + @each $key in $keys + $map: map.get($map, $key) + + @return $map + +@function breakpoint-min($name, $breakpoints) + $min: map.get($breakpoints, $name) + @return if($min != 0, $min, null) + +@function breakpoint-infix($name, $breakpoints) + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}") + +// Adapted from https://gist.github.com/pentzzsolt/4949bbd7691d43d00616dc4f1451cae9#file-non-destructive-map-merge-4-scss +@function map-deep-merge($parent-map, $child-map) + $result: $parent-map + + @each $key, $child in $child-map + $parent-has-key: map.has-key($result, $key) + $parent-value: map.get($result, $key) + $parent-type: meta.type-of($parent-value) + $child-type: meta.type-of($child) + $parent-is-map: $parent-type == map + $child-is-map: $child-type == map + + @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)) + $result: map.merge($result, ( $key: $child )) + + @else + $result: map.merge($result, ( $key: map-deep-merge($parent-value, $child) )) + + @return $result + +@function theme-color($color, $opacity: 1) + $color: rgba(var(--v-theme-#{$color}), $opacity) + @return $color + +@function roundEven($val) + @return 2 * math.round($val * .5) diff --git a/packages/alpinui/src/styles/tools/_index.sass b/packages/alpinui/src/styles/tools/_index.sass new file mode 100644 index 0000000..fa6599c --- /dev/null +++ b/packages/alpinui/src/styles/tools/_index.sass @@ -0,0 +1,18 @@ +@forward '_absolute' +@forward '_functions' +@forward '_bootable' +@forward '_border' +@forward '_density' +@forward '_elevation' +@forward '_layer' +@forward '_position' +@forward '_radius' +@forward '_rounded' +@forward '_rtl' +@forward '_sheet' +@forward '_states' +@forward '_theme' +@forward '_typography' +@forward '_utilities' +@forward '_variant' +@forward '_display' diff --git a/packages/alpinui/src/styles/tools/_layer.scss b/packages/alpinui/src/styles/tools/_layer.scss new file mode 100644 index 0000000..74fb238 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_layer.scss @@ -0,0 +1,11 @@ +@use '../settings'; + +@mixin layer ($name) { + @if (settings.$layers) { + @layer vuetify.#{$name} { + @content; + } + } @else { + @content; + } +} diff --git a/packages/alpinui/src/styles/tools/_position.sass b/packages/alpinui/src/styles/tools/_position.sass new file mode 100644 index 0000000..1e96136 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_position.sass @@ -0,0 +1,4 @@ +@mixin position($positions, $important: false) + @each $position in $positions + &--#{$position} + position: #{$position} if($important, !important, null) diff --git a/packages/alpinui/src/styles/tools/_radius.sass b/packages/alpinui/src/styles/tools/_radius.sass new file mode 100644 index 0000000..db1c3a5 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_radius.sass @@ -0,0 +1,9 @@ +@use 'sass:map' +@use '../settings' + +@mixin radius($r, $important: false) + // Key exists within the $rounded variable + @if (map.has-key(settings.$rounded, $r)) + border-radius: map.get(settings.$rounded, $r) if($important, !important, null) + @else + border-radius: $r if($important, !important, null) diff --git a/packages/alpinui/src/styles/tools/_rounded.sass b/packages/alpinui/src/styles/tools/_rounded.sass new file mode 100644 index 0000000..1d346b5 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_rounded.sass @@ -0,0 +1,2 @@ +@mixin rounded($radius: null, $important: false) + border-radius: $radius if($important, !important, null) diff --git a/packages/alpinui/src/styles/tools/_rtl.sass b/packages/alpinui/src/styles/tools/_rtl.sass new file mode 100644 index 0000000..302c530 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_rtl.sass @@ -0,0 +1,11 @@ +@use 'sass:selector' + +@mixin rtl() + @at-root #{selector.append('.v-locale--is-rtl', &)}, + .v-locale--is-rtl & + @content + +@mixin ltr() + @at-root #{selector.append('.v-locale--is-ltr', &)}, + .v-locale--is-ltr & + @content diff --git a/packages/alpinui/src/styles/tools/_sheet.sass b/packages/alpinui/src/styles/tools/_sheet.sass new file mode 100644 index 0000000..2dd5133 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_sheet.sass @@ -0,0 +1,14 @@ +@mixin paper ($elevation, $radius, $shaped-radius) + @include tools.radius($radius) + + &:not(.v-sheet--outlined) + @include tools.elevation($elevation) + + @if ($shaped-radius) + &.v-sheet--shaped + @include tools.radius($shaped-radius) + + +@mixin sheet ($component, $elevation, $radius, $shaped-radius) + .v-sheet.#{$component} + @include paper($elevation, $radius, $shaped-radius) diff --git a/packages/alpinui/src/styles/tools/_states.sass b/packages/alpinui/src/styles/tools/_states.sass new file mode 100644 index 0000000..68558ca --- /dev/null +++ b/packages/alpinui/src/styles/tools/_states.sass @@ -0,0 +1,42 @@ +@use 'sass:map' +@use 'sass:string' +@use '../settings' + +@mixin states ($selector: '&::before', $active: true) + @if string.slice(string.unquote($selector), 1, 1) != '&' + $selector: #{'>'} #{$selector} + + &:hover + #{$selector} + opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier)) + + &:focus-visible + #{$selector} + opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier)) + + @supports not selector(:focus-visible) + &:focus + #{$selector} + opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier)) + + @if ($active) + &--active, + &[aria-haspopup="menu"][aria-expanded="true"] + @include active-states($selector) + +@mixin active-states ($selector, $base: map.get(settings.$states, 'activated')) + #{$selector} + opacity: calc(#{$base} * var(--v-theme-overlay-multiplier)) + + &:hover + #{$selector} + opacity: calc((#{$base} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + + &:focus-visible + #{$selector} + opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) + + @supports not selector(:focus-visible) + &:focus + #{$selector} + opacity: calc((#{$base} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) diff --git a/packages/alpinui/src/styles/tools/_theme.sass b/packages/alpinui/src/styles/tools/_theme.sass new file mode 100644 index 0000000..e199016 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_theme.sass @@ -0,0 +1,3 @@ +@mixin theme ($background, $color) + background: $background + color: $color diff --git a/packages/alpinui/src/styles/tools/_typography.sass b/packages/alpinui/src/styles/tools/_typography.sass new file mode 100644 index 0000000..33ad03d --- /dev/null +++ b/packages/alpinui/src/styles/tools/_typography.sass @@ -0,0 +1,6 @@ +@mixin typography ($font-size, $font-weight, $letter-spacing, $line-height, $text-transform) + font-size: $font-size + font-weight: $font-weight + letter-spacing: $letter-spacing + line-height: $line-height + text-transform: $text-transform diff --git a/packages/alpinui/src/styles/tools/_utilities.sass b/packages/alpinui/src/styles/tools/_utilities.sass new file mode 100644 index 0000000..1327fe9 --- /dev/null +++ b/packages/alpinui/src/styles/tools/_utilities.sass @@ -0,0 +1,64 @@ +@use 'sass:list' +@use 'sass:map' +@use 'sass:meta' + +=generate-utility($utility, $infix, $forceDir) + $values: map.get($utility, values) + + // If the values are a list or string, convert it into a map + @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" + $values: list.zip($values, $values) + + @each $value in $values + $properties: map.get($utility, property) + + // Multiple properties are possible, for example with vertical or horizontal margins or paddings + @if meta.type-of($properties) == 'string' + $properties: list.append((), $properties) + + // Property can be a map, where the key is a mixin to include + @if meta.type-of($properties) == 'map' + @each $dir in $properties + $mixin: list.nth($dir, 1) + // SASS doesn't support dynamic mixin invocation + // https://github.com/sass/sass/issues/626 + @if $mixin == 'ltr' + .v-locale--is-ltr + +generate-utility-body($utility, list.nth($dir, 2), $value, $infix) + @else if $mixin == 'rtl' + .v-locale--is-rtl + +generate-utility-body($utility, list.nth($dir, 2), $value, $infix) + @else + @error 'Only RTL and LTR are supported' + @else + @if $forceDir == 'ltr' + .v-locale--is-ltr + +generate-utility-body($utility, $properties, $value, $infix) + @else if $forceDir == 'rtl' + .v-locale--is-rtl + +generate-utility-body($utility, $properties, $value, $infix) + @else + +generate-utility-body($utility, $properties, $value, $infix) + +=generate-utility-body($utility, $properties, $value, $infix) + // Use custom class if present + $property-class: map.get($utility, class) + $property-class: if($property-class, $property-class, list.nth($properties, 1)) + + // Don't prefix if value key is null (eg. with shadow class) + $property-class-modifier: if(list.nth($value, 1), "-" + list.nth($value, 1), "") + + $value: list.nth($value, 2) + + .#{$property-class + $infix + $property-class-modifier} + @for $i from 1 through list.length($properties) + $property: list.nth($properties, $i) + $val: $value + @if meta.type-of($value) == 'list' and list.length($properties) == list.length($value) + $val: list.nth($value, $i) + @if $val != false + // Check if unimportant property exists. + // This allows you to conditional skip + // defining a property as important. + $unimportant: map.get($utility, unimportant) + #{$property}: #{meta.inspect($val) if(list.index($unimportant, $property), null, !important)} diff --git a/packages/alpinui/src/styles/tools/_variant.sass b/packages/alpinui/src/styles/tools/_variant.sass new file mode 100644 index 0000000..6516f2d --- /dev/null +++ b/packages/alpinui/src/styles/tools/_variant.sass @@ -0,0 +1,55 @@ +@use "./absolute" as * +@use "./elevation" as * +@use "../settings/variables" as * + +@mixin variant($contained-background, $contained-color, $contained-elevation, $plain-opacity, $name) + &--variant-plain, + &--variant-outlined, + &--variant-text, + &--variant-tonal + background: transparent + color: inherit + + &--variant-plain + opacity: $plain-opacity + + &:focus, + &:hover + opacity: 1 + + &--variant-plain + .#{$name}__overlay + display: none + + &--variant-elevated, + &--variant-flat + background: $contained-background + color: $contained-color + + @if ($contained-elevation > 0) + &--variant-elevated + @include elevation($contained-elevation) + + &--variant-flat + @include elevation(0) + + &--variant-outlined + border: $border-width-root solid currentColor + + &--variant-text + .#{$name}__overlay + background: currentColor + + &--variant-tonal + .#{$name}__underlay + background: currentColor + opacity: var(--v-activated-opacity) + border-radius: inherit + top: 0 + right: 0 + bottom: 0 + left: 0 + pointer-events: none + + .#{$name}__underlay + position: absolute diff --git a/packages/alpinui/src/styles/utilities/_display.sass b/packages/alpinui/src/styles/utilities/_display.sass new file mode 100644 index 0000000..d30de6c --- /dev/null +++ b/packages/alpinui/src/styles/utilities/_display.sass @@ -0,0 +1,10 @@ +@use '../settings' +@use '../tools' + +@if (settings.$utilities != false and length(settings.$utilities) > 0) + @include tools.layer('utilities') + @each $size, $media_query in settings.$display-breakpoints + .hidden + &-#{$size} + @media #{$media_query} + display: none !important diff --git a/packages/alpinui/src/styles/utilities/_elevation.scss b/packages/alpinui/src/styles/utilities/_elevation.scss new file mode 100644 index 0000000..37cdefb --- /dev/null +++ b/packages/alpinui/src/styles/utilities/_elevation.scss @@ -0,0 +1,15 @@ +@use '../tools'; +@use '../settings'; + +@if (settings.$utilities != false and length(settings.$utilities) > 0) { + @include tools.layer('utilities') { + $z: 24; + @while $z >= 0 { + .elevation-#{$z} { + @include tools.elevation($z, $important: true); + } + + $z: $z - 1; + } + } +} diff --git a/packages/alpinui/src/styles/utilities/_index.sass b/packages/alpinui/src/styles/utilities/_index.sass new file mode 100644 index 0000000..e0a13f9 --- /dev/null +++ b/packages/alpinui/src/styles/utilities/_index.sass @@ -0,0 +1,43 @@ +@use 'sass:string' +@use 'sass:map' +@use 'sass:meta' +@use '../settings' +@use '../tools' +@use './display' +@use './elevation' +@use './screenreaders' + +@include tools.layer('utilities') + @each $breakpoint in map.keys(settings.$grid-breakpoints) + // Generate media query if needed + +tools.media-breakpoint-up($breakpoint) + $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints) + + // Loop over each utility property + @each $key, $utility in settings.$utilities + // The utility can be disabled with `false`, thus check if the utility is a map first + // Only proceed if responsive media queries are enabled or if it's the base media query + @if string.slice($key, -4) == ':ltr' + @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") + +tools.generate-utility($utility, $infix, 'ltr') + @else if string.slice($key, -4) == ':rtl' + @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") + +tools.generate-utility($utility, $infix, 'rtl') + @else + @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") + +tools.generate-utility($utility, $infix, 'bidi') + + // Print utilities + @media print + @each $key, $utility in settings.$utilities + // The utility can be disabled with `false`, thus check if the utility is a map first + // Then check if the utility needs print styles + @if string.slice($key, -4) == ':ltr' + @if meta.type-of($utility) == "map" and map.get($utility, print) == true + +tools.generate-utility($utility, "-print", 'ltr') + @else if string.slice($key, -4) == ':rtl' + @if meta.type-of($utility) == "map" and map.get($utility, print) == true + +tools.generate-utility($utility, "-print", 'rtl') + @else + @if meta.type-of($utility) == "map" and map.get($utility, print) == true + +tools.generate-utility($utility, "-print", 'bidi') diff --git a/packages/alpinui/src/styles/utilities/_screenreaders.sass b/packages/alpinui/src/styles/utilities/_screenreaders.sass new file mode 100644 index 0000000..7a44397 --- /dev/null +++ b/packages/alpinui/src/styles/utilities/_screenreaders.sass @@ -0,0 +1,17 @@ +// Source: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss +@use '../settings' +@use '../tools' + +@if (settings.$utilities != false and length(settings.$utilities) > 0) + @include tools.layer('utilities') + .d-sr-only, + .d-sr-only-focusable:not(:focus) + border: 0 !important + clip: rect(0, 0, 0, 0) !important + height: 1px !important + margin: -1px !important // Fix for https://github.com/twbs/bootstrap/issues/25686 + overflow: hidden !important + padding: 0 !important + position: absolute !important + white-space: nowrap !important + width: 1px !important diff --git a/packages/alpinui/src/util/color/APCA.ts b/packages/alpinui/src/util/color/APCA.ts new file mode 100644 index 0000000..d9c1132 --- /dev/null +++ b/packages/alpinui/src/util/color/APCA.ts @@ -0,0 +1,98 @@ +/** + * WCAG 3.0 APCA perceptual contrast algorithm from https://github.com/Myndex/SAPC-APCA + * @licence https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * @see https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup + */ +// Types +import type { RGB } from '@/util/colorUtils'; + +// MAGICAL NUMBERS + +// sRGB Conversion to Relative Luminance (Y) + +// Transfer Curve (aka "Gamma") for sRGB linearization +// Simple power curve vs piecewise described in docs +// Essentially, 2.4 best models actual display +// characteristics in combination with the total method +const mainTRC = 2.4; + +const Rco = 0.2126729; // sRGB Red Coefficient (from matrix) +const Gco = 0.7151522; // sRGB Green Coefficient (from matrix) +const Bco = 0.0721750; // sRGB Blue Coefficient (from matrix) + +// For Finding Raw SAPC Contrast from Relative Luminance (Y) + +// Constants for SAPC Power Curve Exponents +// One pair for normal text, and one for reverse +// These are the "beating heart" of SAPC +const normBG = 0.55; +const normTXT = 0.58; +const revTXT = 0.57; +const revBG = 0.62; + +// For Clamping and Scaling Values + +const blkThrs = 0.03; // Level that triggers the soft black clamp +const blkClmp = 1.45; // Exponent for the soft black clamp curve +const deltaYmin = 0.0005; // Lint trap +const scaleBoW = 1.25; // Scaling for dark text on light +const scaleWoB = 1.25; // Scaling for light text on dark +const loConThresh = 0.078; // Threshold for new simple offset scale +const loConFactor = 12.82051282051282; // = 1/0.078, +const loConOffset = 0.06; // The simple offset +const loClip = 0.001; // Output clip (lint trap #2) + +export function APCAcontrast(text: RGB, background: RGB) { + // Linearize sRGB + const Rtxt = (text.r / 255) ** mainTRC; + const Gtxt = (text.g / 255) ** mainTRC; + const Btxt = (text.b / 255) ** mainTRC; + + const Rbg = (background.r / 255) ** mainTRC; + const Gbg = (background.g / 255) ** mainTRC; + const Bbg = (background.b / 255) ** mainTRC; + + // Apply the standard coefficients and sum to Y + let Ytxt = (Rtxt * Rco) + (Gtxt * Gco) + (Btxt * Bco); + let Ybg = (Rbg * Rco) + (Gbg * Gco) + (Bbg * Bco); + + // Soft clamp Y when near black. + // Now clamping all colors to prevent crossover errors + if (Ytxt <= blkThrs) Ytxt += (blkThrs - Ytxt) ** blkClmp; + if (Ybg <= blkThrs) Ybg += (blkThrs - Ybg) ** blkClmp; + + // Return 0 Early for extremely low ∆Y (lint trap #1) + if (Math.abs(Ybg - Ytxt) < deltaYmin) return 0.0; + + // SAPC CONTRAST + + let outputContrast: number; // For weighted final values + if (Ybg > Ytxt) { + // For normal polarity, black text on white + // Calculate the SAPC contrast value and scale + + const SAPC = ((Ybg ** normBG) - (Ytxt ** normTXT)) * scaleBoW; + + // NEW! SAPC SmoothScale™ + // Low Contrast Smooth Scale Rollout to prevent polarity reversal + // and also a low clip for very low contrasts (lint trap #2) + // much of this is for very low contrasts, less than 10 + // therefore for most reversing needs, only loConOffset is important + outputContrast = + (SAPC < loClip) ? 0.0 + : (SAPC < loConThresh) ? SAPC - SAPC * loConFactor * loConOffset + : SAPC - loConOffset; + } else { + // For reverse polarity, light text on dark + // WoB should always return negative value. + + const SAPC = ((Ybg ** revBG) - (Ytxt ** revTXT)) * scaleWoB; + + outputContrast = + (SAPC > -loClip) ? 0.0 + : (SAPC > -loConThresh) ? SAPC - SAPC * loConFactor * loConOffset + : SAPC + loConOffset; + } + + return outputContrast * 100; +} diff --git a/packages/alpinui/src/util/color/transformCIELAB.ts b/packages/alpinui/src/util/color/transformCIELAB.ts new file mode 100644 index 0000000..bf9cac2 --- /dev/null +++ b/packages/alpinui/src/util/color/transformCIELAB.ts @@ -0,0 +1,37 @@ +// Types +import type { LAB, XYZ } from '../colorUtils'; + +const delta = 0.20689655172413793; // 6÷29 + +const cielabForwardTransform = (t: number): number => ( + t > delta ** 3 + ? Math.cbrt(t) + : (t / (3 * delta ** 2)) + 4 / 29 +); + +const cielabReverseTransform = (t: number): number => ( + t > delta + ? t ** 3 + : (3 * delta ** 2) * (t - 4 / 29) +); + +export function fromXYZ(xyz: XYZ): LAB { + const transform = cielabForwardTransform; + const transformedY = transform(xyz[1]); + + return [ + 116 * transformedY - 16, + 500 * (transform(xyz[0] / 0.95047) - transformedY), + 200 * (transformedY - transform(xyz[2] / 1.08883)), + ]; +} + +export function toXYZ(lab: LAB): XYZ { + const transform = cielabReverseTransform; + const Ln = (lab[0] + 16) / 116; + return [ + transform(Ln + lab[1] / 500) * 0.95047, + transform(Ln), + transform(Ln - lab[2] / 200) * 1.08883, + ]; +} diff --git a/packages/alpinui/src/util/color/transformSRGB.ts b/packages/alpinui/src/util/color/transformSRGB.ts new file mode 100644 index 0000000..d0ab292 --- /dev/null +++ b/packages/alpinui/src/util/color/transformSRGB.ts @@ -0,0 +1,73 @@ +// Utilities +import { clamp } from '@/util/helpers'; + +// Types +import type { RGB, XYZ } from '../colorUtils'; + +// For converting XYZ to sRGB +const srgbForwardMatrix = [ + [3.2406, -1.5372, -0.4986], + [-0.9689, 1.8758, 0.0415], + [0.0557, -0.2040, 1.0570], +]; + +// Forward gamma adjust +const srgbForwardTransform = (C: number): number => ( + C <= 0.0031308 + ? C * 12.92 + : 1.055 * C ** (1 / 2.4) - 0.055 +); + +// For converting sRGB to XYZ +const srgbReverseMatrix = [ + [0.4124, 0.3576, 0.1805], + [0.2126, 0.7152, 0.0722], + [0.0193, 0.1192, 0.9505], +]; + +// Reverse gamma adjust +const srgbReverseTransform = (C: number): number => ( + C <= 0.04045 + ? C / 12.92 + : ((C + 0.055) / 1.055) ** 2.4 +); + +export function fromXYZ(xyz: XYZ): RGB { + const rgb = Array(3); + const transform = srgbForwardTransform; + const matrix = srgbForwardMatrix; + + // Matrix transform, then gamma adjustment + for (let i = 0; i < 3; ++i) { + // Rescale back to [0, 255] + rgb[i] = Math.round(clamp(transform( + matrix[i][0] * xyz[0] + + matrix[i][1] * xyz[1] + + matrix[i][2] * xyz[2] + )) * 255); + } + + return { + r: rgb[0], + g: rgb[1], + b: rgb[2], + }; +} + +export function toXYZ({ r, g, b }: RGB): XYZ { + const xyz: XYZ = [0, 0, 0]; + const transform = srgbReverseTransform; + const matrix = srgbReverseMatrix; + + // Rescale from [0, 255] to [0, 1] then adjust sRGB gamma to linear RGB + r = transform(r / 255); + g = transform(g / 255); + b = transform(b / 255); + + // Matrix color space transform + for (let i = 0; i < 3; ++i) { + xyz[i] = matrix[i][0] * r + matrix[i][1] * g + matrix[i][2] * b; + } + + return xyz; +} diff --git a/packages/alpinui/src/util/colorUtils.ts b/packages/alpinui/src/util/colorUtils.ts new file mode 100644 index 0000000..e72d4e7 --- /dev/null +++ b/packages/alpinui/src/util/colorUtils.ts @@ -0,0 +1,304 @@ +// Utilities +import { APCAcontrast } from './color/APCA'; +import { consoleWarn } from './console'; +import { chunk, has, padEnd } from './helpers'; +import * as CIELAB from '@/util/color/transformCIELAB'; +import * as sRGB from '@/util/color/transformSRGB'; + +// Types +import type { Colors } from '@/composables/theme'; + +export type XYZ = [number, number, number] +export type LAB = [number, number, number] +export type HSV = { h: number, s: number, v: number, a?: number } +export type RGB = { r: number, g: number, b: number, a?: number } +export type HSL = { h: number, s: number, l: number, a?: number } +export type Hex = string & { __hexBrand: never } +export type Color = string | number | HSV | RGB | HSL + +export function isCssColor(color?: string | null | false): boolean { + return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color); +} + +export function isParsableColor(color: string): boolean { + return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color); +} + +const cssColorRe = /^(?(?:rgb|hsl)a?)\((?.+)\)/; +const mappers = { + rgb: (r: number, g: number, b: number, a?: number) => ({ r, g, b, a }), + rgba: (r: number, g: number, b: number, a?: number) => ({ r, g, b, a }), + hsl: (h: number, s: number, l: number, a?: number) => HSLtoRGB({ h, s, l, a }), + hsla: (h: number, s: number, l: number, a?: number) => HSLtoRGB({ h, s, l, a }), + hsv: (h: number, s: number, v: number, a?: number) => HSVtoRGB({ h, s, v, a }), + hsva: (h: number, s: number, v: number, a?: number) => HSVtoRGB({ h, s, v, a }), +}; + +export function parseColor(color: Color): RGB { + if (typeof color === 'number') { + if (isNaN(color) || color < 0 || color > 0xFFFFFF) { // int can't have opacity + consoleWarn(`'${color}' is not a valid hex color`); + } + + return { + r: (color & 0xFF0000) >> 16, + g: (color & 0xFF00) >> 8, + b: (color & 0xFF), + }; + } else if (typeof color === 'string' && cssColorRe.test(color)) { + const { groups } = color.match(cssColorRe)!; + const { fn, values } = groups as { fn: keyof typeof mappers, values: string }; + const realValues = values.split(/,\s*/) + .map((v) => { + if (v.endsWith('%') && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn)) { + return parseFloat(v) / 100; + } else { + return parseFloat(v); + } + }) as [number, number, number, number?]; + + return mappers[fn](...realValues); + } else if (typeof color === 'string') { + let hex = color.startsWith('#') ? color.slice(1) : color; + + if ([3, 4].includes(hex.length)) { + hex = hex.split('').map((char) => char + char).join(''); + } else if (![6, 8].includes(hex.length)) { + consoleWarn(`'${color}' is not a valid hex(a) color`); + } + + const int = parseInt(hex, 16); + if (isNaN(int) || int < 0 || int > 0xFFFFFFFF) { + consoleWarn(`'${color}' is not a valid hex(a) color`); + } + + return HexToRGB(hex as Hex); + } else if (typeof color === 'object') { + if (has(color, ['r', 'g', 'b'])) { + return color; + } else if (has(color, ['h', 's', 'l'])) { + return HSVtoRGB(HSLtoHSV(color)); + } else if (has(color, ['h', 's', 'v'])) { + return HSVtoRGB(color); + } + } + + throw new TypeError(`Invalid color: ${color == null ? color : (String(color) || (color as any).constructor.name)}\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`); +} + +export function RGBToInt(color: RGB) { + return (color.r << 16) + (color.g << 8) + color.b; +} + +export function classToHex( + color: string, + colors: Record>, + currentTheme: Partial, +): string { + const [colorName, colorModifier] = color + .toString().trim().replace('-', '').split(' ', 2) as (string | undefined)[]; + + let hexColor = ''; + if (colorName && colorName in colors) { + if (colorModifier && colorModifier in colors[colorName]) { + hexColor = colors[colorName][colorModifier]; + } else if ('base' in colors[colorName]) { + hexColor = colors[colorName].base; + } + } else if (colorName && colorName in currentTheme) { + hexColor = currentTheme[colorName] as string; + } + + return hexColor; +} + +/** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */ +export function HSVtoRGB(hsva: HSV): RGB { + const { h, s, v, a } = hsva; + const f = (n: number) => { + const k = (n + (h / 60)) % 6; + return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0); + }; + + const rgb = [f(5), f(3), f(1)].map((v) => Math.round(v * 255)); + + return { r: rgb[0], g: rgb[1], b: rgb[2], a }; +} + +export function HSLtoRGB(hsla: HSL): RGB { + return HSVtoRGB(HSLtoHSV(hsla)); +} + +/** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */ +export function RGBtoHSV(rgba: RGB): HSV { + if (!rgba) return { h: 0, s: 1, v: 1, a: 1 }; + + const r = rgba.r / 255; + const g = rgba.g / 255; + const b = rgba.b / 255; + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + + let h = 0; + + if (max !== min) { + if (max === r) { + h = 60 * (0 + ((g - b) / (max - min))); + } else if (max === g) { + h = 60 * (2 + ((b - r) / (max - min))); + } else if (max === b) { + h = 60 * (4 + ((r - g) / (max - min))); + } + } + + if (h < 0) h = h + 360; + + const s = max === 0 ? 0 : (max - min) / max; + const hsv = [h, s, max]; + + return { h: hsv[0], s: hsv[1], v: hsv[2], a: rgba.a }; +} + +export function HSVtoHSL(hsva: HSV): HSL { + const { h, s, v, a } = hsva; + + const l = v - (v * s / 2); + + const sprime = l === 1 || l === 0 ? 0 : (v - l) / Math.min(l, 1 - l); + + return { h, s: sprime, l, a }; +} + +export function HSLtoHSV(hsl: HSL): HSV { + const { h, s, l, a } = hsl; + + const v = l + s * Math.min(l, 1 - l); + + const sprime = v === 0 ? 0 : 2 - (2 * l / v); + + return { h, s: sprime, v, a }; +} + +export function RGBtoCSS({ r, g, b, a }: RGB): string { + return a === undefined ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`; +} + +export function HSVtoCSS(hsva: HSV): string { + return RGBtoCSS(HSVtoRGB(hsva)); +} + +function toHex(v: number) { + const h = Math.round(v).toString(16); + return ('00'.substr(0, 2 - h.length) + h).toUpperCase(); +} + +export function RGBtoHex({ r, g, b, a }: RGB): Hex { + return `#${[ + toHex(r), + toHex(g), + toHex(b), + a !== undefined ? toHex(Math.round(a * 255)) : '', + ].join('')}` as Hex; +} + +export function HexToRGB(hex: Hex): RGB { + hex = parseHex(hex); + let [r, g, b, a] = chunk(hex, 2).map((c: string) => parseInt(c, 16)); + a = a === undefined ? a : (a / 255); + + return { r, g, b, a }; +} + +export function HexToHSV(hex: Hex): HSV { + const rgb = HexToRGB(hex); + return RGBtoHSV(rgb); +} + +export function HSVtoHex(hsva: HSV): Hex { + return RGBtoHex(HSVtoRGB(hsva)); +} + +export function parseHex(hex: string): Hex { + if (hex.startsWith('#')) { + hex = hex.slice(1); + } + + hex = hex.replace(/([^0-9a-f])/gi, 'F'); + + if (hex.length === 3 || hex.length === 4) { + hex = hex.split('').map((x) => x + x).join(''); + } + + if (hex.length !== 6) { + hex = padEnd(padEnd(hex, 6), 8, 'F'); + } + + return hex as Hex; +} + +export function parseGradient( + gradient: string, + colors: Record>, + currentTheme: Partial, +) { + return gradient.replace(/([a-z]+(\s[a-z]+-[1-5])?)(?=$|,)/gi, (x) => { + return classToHex(x, colors, currentTheme) || x; + }).replace(/(rgba\()#[0-9a-f]+(?=,)/gi, (x) => { + return 'rgba(' + Object.values(HexToRGB(parseHex(x.replace(/rgba\(/, '')))).slice(0, 3).join(','); + }); +} + +export function lighten(value: RGB, amount: number): RGB { + const lab = CIELAB.fromXYZ(sRGB.toXYZ(value)); + lab[0] = lab[0] + amount * 10; + + return sRGB.fromXYZ(CIELAB.toXYZ(lab)); +} + +export function darken(value: RGB, amount: number): RGB { + const lab = CIELAB.fromXYZ(sRGB.toXYZ(value)); + lab[0] = lab[0] - amount * 10; + + return sRGB.fromXYZ(CIELAB.toXYZ(lab)); +} + +/** + * Calculate the relative luminance of a given color + * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef + */ +export function getLuma(color: Color) { + const rgb = parseColor(color); + + return sRGB.toXYZ(rgb)[1]; +} + +/** + * Returns the contrast ratio (1-21) between two colors. + * @see https://www.w3.org/TR/WCAG20/#contrast-ratiodef + */ +export function getContrast(first: Color, second: Color) { + const l1 = getLuma(first); + const l2 = getLuma(second); + + const light = Math.max(l1, l2); + const dark = Math.min(l1, l2); + + return (light + 0.05) / (dark + 0.05); +} + +export function getForeground(color: Color) { + const blackContrast = Math.abs(APCAcontrast(parseColor(0), parseColor(color))); + const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), parseColor(color))); + + // TODO: warn about poor color selections + // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background))) + // const minContrast = Math.max(blackContrast, whiteContrast) + // if (minContrast < 60) { + // consoleInfo(`${key} theme color ${color} has poor contrast (${minContrast.toFixed()}%)`) + // } else if (contrastAsText < 60 && !['background', 'surface'].includes(color)) { + // consoleInfo(`${key} theme color ${color} has poor contrast as text (${contrastAsText.toFixed()}%)`) + // } + + // Prefer white text if both have an acceptable contrast ratio + return whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000'; +} diff --git a/packages/alpinui/src/util/console.ts b/packages/alpinui/src/util/console.ts new file mode 100644 index 0000000..2f1c863 --- /dev/null +++ b/packages/alpinui/src/util/console.ts @@ -0,0 +1,29 @@ +/* eslint-disable no-console */ + +const warn = (msg: string) => console.warn(msg); + +export function consoleWarn(message: string): void { + warn(`Alpinui: ${message}`); +} + +export function consoleError(message: string): void { + warn(`Alpinui error: ${message}`); +} + +export function deprecate(original: string, replacement: string | string[]) { + replacement = Array.isArray(replacement) + ? replacement.slice(0, -1).map((s) => `'${s}'`).join(', ') + ` or '${replacement.at(-1)}'` + : `'${replacement}'`; + warn(`[Alpinui UPGRADE] '${original}' is deprecated, use ${replacement} instead.`); +} + +// TODO +export function breaking(original: string, replacement: string) { + warn(`[Alpinui BREAKING] '${original}' has been removed, use '${replacement}' instead.` + + ` For more information, see the upgrade guide ` + + `https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide`); +} + +export function removed(original: string) { + warn(`[Alpinui REMOVED] '${original}' has been removed. You can safely omit it.`); +} diff --git a/packages/alpinui/src/util/defineComponent.tsx b/packages/alpinui/src/util/defineComponent.tsx new file mode 100644 index 0000000..cb9f2b3 --- /dev/null +++ b/packages/alpinui/src/util/defineComponent.tsx @@ -0,0 +1,94 @@ +// Composables +import { injectDefaults, internalUseDefaults } from '@/composables/defaults'; + +// Utilities +import { consoleWarn } from './console'; +import { pick } from './helpers'; +import { propsFactory } from './propsFactory'; + +// Types +import type { ComponentOptions, Data, EmitsOptions } from 'alpine-composition'; +import type { + Component, + ComponentPublicInstance, + FunctionalComponent, +} from 'vue'; + +// TODO +// TODO +// TODO - TODO - USE THIS INSTEAD OF @/alpine/component !!! +// TODO +// TODO + +// Implementation +export function defineComponent< + T extends Data, + P extends Data, + E extends EmitsOptions, +>(options: ComponentOptions) { + options._setup = options._setup ?? options.setup; + + if (!options.name) { + consoleWarn('The component is missing an explicit name, unable to generate default prop value'); + + return options; + } + + if (options._setup) { + options.props = propsFactory(options.props ?? {}, options.name)() as any; + const propKeys = Object.keys(options.props).filter((key) => key !== 'class' && key !== 'style'); + options.filterProps = function filterProps(props: Record) { + return pick(props, propKeys); + }; + + (options.props as any)._as = String; + options.setup = (props: Record, vm) => { + const defaults = injectDefaults(vm); + + // Skip props proxy if defaults are not provided + if (!defaults.value) return options._setup(props, vm); + + const { props: _props, provideSubDefaults } = internalUseDefaults(vm, props, props._as ?? options.name, defaults); + + const setupBindings = options._setup(_props, vm); + + provideSubDefaults(); + + return setupBindings; + }; + } + + return options; +} + +// TODO +// TODO +// TODO - TODO - IS THIS NEEDED? +// TODO +// TODO + +// https://github.com/vuejs/core/pull/10557 +export type ComponentInstance = T extends { new (): ComponentPublicInstance } + ? InstanceType + : T extends FunctionalComponent + ? ComponentPublicInstance> + : T extends Component< + infer Props, + infer RawBindings, + infer D, + infer C, + infer M + > + ? // NOTE we override Props/RawBindings/D to make sure is not `unknown` + ComponentPublicInstance< + unknown extends Props ? {} : Props, + unknown extends RawBindings ? {} : RawBindings, + unknown extends D ? {} : D, + C, + M + > + : never // not a vue Component + +type ShortEmitsToObject = E extends Record ? { + [K in keyof E]: (...args: E[K]) => any; +} : E; diff --git a/packages/alpinui/src/util/getCurrentInstance.ts b/packages/alpinui/src/util/getCurrentInstance.ts new file mode 100644 index 0000000..637b8b5 --- /dev/null +++ b/packages/alpinui/src/util/getCurrentInstance.ts @@ -0,0 +1,24 @@ +// Utilities +import { getCurrentInstance as _getCurrentInstance } from 'vue'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; + +export function getCurrentInstanceName(vm: AlpineInstance) { + return vm?.$aliasName || vm?.$name; +} + +let _uid = 0; +let _map = new WeakMap, number>(); +export function getUid(vm: AlpineInstance) { + if (_map.has(vm)) return _map.get(vm)!; + else { + const uid = _uid++; + _map.set(vm, uid); + return uid; + } +} +getUid.reset = () => { + _uid = 0; + _map = new WeakMap(); +}; diff --git a/packages/alpinui/src/util/globals.ts b/packages/alpinui/src/util/globals.ts new file mode 100644 index 0000000..a25b7ed --- /dev/null +++ b/packages/alpinui/src/util/globals.ts @@ -0,0 +1,4 @@ +export const IN_BROWSER = typeof window !== 'undefined'; +export const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window; +export const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0); +export const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window; diff --git a/packages/alpinui/src/util/helpers.ts b/packages/alpinui/src/util/helpers.ts new file mode 100644 index 0000000..6b8b4a1 --- /dev/null +++ b/packages/alpinui/src/util/helpers.ts @@ -0,0 +1,783 @@ +// TODO +// TODO +// TODO - Remove dependency on vue +// TODO +// TODO + +// Utilities +import { computed, reactive, readonly, shallowRef, toRefs, unref, watchEffect } from 'alpine-reactivity'; +import { Comment, Fragment, isVNode } from 'vue'; +import { IN_BROWSER } from '@/util/globals'; + +// Types +import type { AlpineInstance, Data, EmitsOptions } from 'alpine-composition'; +import type { Ref, ToRefs } from 'alpine-reactivity'; +import type { + ComponentInternalInstance, + ComputedGetter, + InjectionKey, + PropType, + VNode, + VNodeArrayChildren, + VNodeChild, +} from 'vue'; + +// See https://github.com/vuejs/core/blob/91112520427ff55941a1c759d7d60a0811ff4a61/packages/shared/src/general.ts#L93 +const cacheStringFunction = string>(fn: T): T => { + const cache: Record = Object.create(null); + return ((str: string) => { + const hit = cache[str]; + return hit || (cache[str] = fn(str)); + }) as T; +}; + +// See https://github.com/vuejs/core/blob/91112520427ff55941a1c759d7d60a0811ff4a61/packages/shared/src/general.ts#L120 +export const capitalize = cacheStringFunction((str: T) => { + return (str.charAt(0).toUpperCase() + str.slice(1)) as Capitalize; +}); + +export function getNestedValue(obj: any, path: (string | number)[], fallback?: any): any { + const last = path.length - 1; + + if (last < 0) return obj === undefined ? fallback : obj; + + for (let i = 0; i < last; i++) { + if (obj == null) { + return fallback; + } + obj = obj[path[i]]; + } + + if (obj == null) return fallback; + + return obj[path[last]] === undefined ? fallback : obj[path[last]]; +} + +export function deepEqual(a: any, b: any): boolean { + if (a === b) return true; + + if ( + a instanceof Date && + b instanceof Date && + a.getTime() !== b.getTime() + ) { + // If the values are Date, compare them as timestamps + return false; + } + + if (a !== Object(a) || b !== Object(b)) { + // If the values aren't objects, they were already checked for equality + return false; + } + + const props = Object.keys(a); + + if (props.length !== Object.keys(b).length) { + // Different number of props, don't bother to check + return false; + } + + return props.every((p) => deepEqual(a[p], b[p])); +} + +export function getObjectValueByPath(obj: any, path?: string | null, fallback?: any): any { + // credit: http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key#comment55278413_6491621 + if (obj == null || !path || typeof path !== 'string') return fallback; + if (obj[path] !== undefined) return obj[path]; + path = path.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties + path = path.replace(/^\./, ''); // strip a leading dot + return getNestedValue(obj, path.split('.'), fallback); +} + +export type SelectItemKey> = + | boolean | null | undefined // Ignored + | string // Lookup by key, can use dot notation for nested objects + | readonly (string | number)[] // Nested lookup by key, each array item is a key in the next level + | ((item: T, fallback?: any) => any) + +export function getPropertyFromItem( + item: any, + property: SelectItemKey, + fallback?: any +): any { + if (property === true) return item === undefined ? fallback : item; + + if (property == null || typeof property === 'boolean') return fallback; + + if (item !== Object(item)) { + if (typeof property !== 'function') return fallback; + + const value = property(item, fallback); + + return typeof value === 'undefined' ? fallback : value; + } + + if (typeof property === 'string') return getObjectValueByPath(item, property, fallback); + + if (Array.isArray(property)) return getNestedValue(item, property, fallback); + + if (typeof property !== 'function') return fallback; + + const value = property(item, fallback); + + return typeof value === 'undefined' ? fallback : value; +} + +export function createRange(length: number, start = 0): number[] { + return Array.from({ length }, (v, k) => start + k); +} + +export function getZIndex(el?: Element | null): number { + if (!el || el.nodeType !== Node.ELEMENT_NODE) return 0; + + const index = +window.getComputedStyle(el).getPropertyValue('z-index'); + + if (!index) return getZIndex(el.parentNode as Element); + return index; +} + +export function convertToUnit (str: number, unit?: string): string +export function convertToUnit (str: string | number | null | undefined, unit?: string): string | undefined +export function convertToUnit(str: string | number | null | undefined, unit = 'px'): string | undefined { + if (str == null || str === '') { + return undefined; + } else if (isNaN(+str!)) { + return String(str); + } else if (!isFinite(+str!)) { + return undefined; + } else { + return `${Number(str)}${unit}`; + } +} + +export function isObject(obj: any): obj is Record { + return obj !== null && typeof obj === 'object' && !Array.isArray(obj); +} + +export function refElement(obj?: AlpineInstance | HTMLElement | null): HTMLElement | undefined { + if (obj && '$el' in obj) { + const el = obj.$el as HTMLElement; + if (el?.nodeType === Node.TEXT_NODE) { + // Multi-root component, use the first element + return el.nextElementSibling as HTMLElement; + } + return el; + } + return obj as HTMLElement; +} + +// KeyboardEvent.keyCode aliases +export const keyCodes = Object.freeze({ + enter: 13, + tab: 9, + delete: 46, + esc: 27, + space: 32, + up: 38, + down: 40, + left: 37, + right: 39, + end: 35, + home: 36, + del: 46, + backspace: 8, + insert: 45, + pageup: 33, + pagedown: 34, + shift: 16, +}); + +export const keyValues: Record = Object.freeze({ + enter: 'Enter', + tab: 'Tab', + delete: 'Delete', + esc: 'Escape', + space: 'Space', + up: 'ArrowUp', + down: 'ArrowDown', + left: 'ArrowLeft', + right: 'ArrowRight', + end: 'End', + home: 'Home', + del: 'Delete', + backspace: 'Backspace', + insert: 'Insert', + pageup: 'PageUp', + pagedown: 'PageDown', + shift: 'Shift', +}); + +export function keys(o: O) { + return Object.keys(o) as (keyof O)[]; +} + +export function has(obj: object, key: T[]): obj is Record { + return key.every((k) => obj.hasOwnProperty(k)); +} + +type MaybePick< + T extends object, + U extends Extract +> = Record extends T ? Partial> : Pick + +// Array of keys +export function pick< + T extends object, + U extends Extract +>(obj: T, paths: U[]): MaybePick { + const found: any = {}; + + const keys = new Set(Object.keys(obj)); + for (const path of paths) { + if (keys.has(path)) { + found[path] = obj[path]; + } + } + + return found; +} + +// Array of keys +export function pickWithRest< + T extends object, + U extends Extract, + E extends Extract +> (obj: T, paths: U[], exclude?: E[]): [yes: MaybePick>, no: Omit>] +// Array of keys or RegExp to test keys against +export function pickWithRest< + T extends object, + U extends Extract, + E extends Extract +> (obj: T, paths: (U | RegExp)[], exclude?: E[]): [yes: Partial, no: Partial] +export function pickWithRest< + T extends object, + U extends Extract, + E extends Extract +>(obj: T, paths: (U | RegExp)[], exclude?: E[]): [yes: Partial, no: Partial] { + const found = Object.create(null); + const rest = Object.create(null); + + for (const key in obj) { + if ( + paths.some((path) => path instanceof RegExp + ? path.test(key) + : path === key + ) && !exclude?.some((path) => path === key) + ) { + found[key] = obj[key]; + } else { + rest[key] = obj[key]; + } + } + + return [found, rest]; +} + +export function omit< + T extends object, + U extends Extract +>(obj: T, exclude: U[]): Omit { + const clone = { ...obj }; + + exclude.forEach((prop) => delete clone[prop]); + + return clone; +} + +export function only< + T extends object, + U extends Extract +>(obj: T, include: U[]): Pick { + const clone = {} as T; + + include.forEach((prop) => clone[prop] = obj[prop]); + + return clone; +} + +const onRE = /^on[^a-z]/; +export const isOn = (key: string) => onRE.test(key); + +const bubblingEvents = [ + 'onAfterscriptexecute', + 'onAnimationcancel', + 'onAnimationend', + 'onAnimationiteration', + 'onAnimationstart', + 'onAuxclick', + 'onBeforeinput', + 'onBeforescriptexecute', + 'onChange', + 'onClick', + 'onCompositionend', + 'onCompositionstart', + 'onCompositionupdate', + 'onContextmenu', + 'onCopy', + 'onCut', + 'onDblclick', + 'onFocusin', + 'onFocusout', + 'onFullscreenchange', + 'onFullscreenerror', + 'onGesturechange', + 'onGestureend', + 'onGesturestart', + 'onGotpointercapture', + 'onInput', + 'onKeydown', + 'onKeypress', + 'onKeyup', + 'onLostpointercapture', + 'onMousedown', + 'onMousemove', + 'onMouseout', + 'onMouseover', + 'onMouseup', + 'onMousewheel', + 'onPaste', + 'onPointercancel', + 'onPointerdown', + 'onPointerenter', + 'onPointerleave', + 'onPointermove', + 'onPointerout', + 'onPointerover', + 'onPointerup', + 'onReset', + 'onSelect', + 'onSubmit', + 'onTouchcancel', + 'onTouchend', + 'onTouchmove', + 'onTouchstart', + 'onTransitioncancel', + 'onTransitionend', + 'onTransitionrun', + 'onTransitionstart', + 'onWheel', +]; + +const compositionIgnoreKeys = [ + 'ArrowUp', + 'ArrowDown', + 'ArrowRight', + 'ArrowLeft', + 'Enter', + 'Escape', + 'Tab', + ' ', +]; + +export function isComposingIgnoreKey(e: KeyboardEvent): boolean { + return e.isComposing && compositionIgnoreKeys.includes(e.key); +} + +/** + * Filter attributes that should be applied to + * the root element of an input component. Remaining + * attributes should be passed to the element inside. + */ +export function filterInputAttrs(attrs: Record) { + const [events, props] = pickWithRest(attrs, [onRE]); + const inputEvents = omit(events, bubblingEvents); + const [rootAttrs, inputAttrs] = pickWithRest(props, ['class', 'style', 'id', /^data-/]); + Object.assign(rootAttrs, events); + Object.assign(inputAttrs, inputEvents); + return [rootAttrs, inputAttrs]; +} + +/** + * Returns the set difference of B and A, i.e. the set of elements in B but not in A + */ +export function arrayDiff(a: any[], b: any[]): any[] { + const diff: any[] = []; + for (let i = 0; i < b.length; i++) { + if (!a.includes(b[i])) diff.push(b[i]); + } + return diff; +} + +type IfAny = 0 extends (1 & T) ? Y : N; +export function wrapInArray( + v: T | null | undefined +): T extends readonly any[] + ? IfAny + : NonNullable[] { + return v == null + ? [] + : Array.isArray(v) + ? v as any : [v]; +} + +export function defaultFilter(value: any, search: string | null, item: any) { + return value != null && + search != null && + typeof value !== 'boolean' && + value.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1; +} + +export function debounce(fn: Function, delay: MaybeRef) { + let timeoutId = 0 as any; + const wrap = (...args: any[]) => { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => fn(...args), unref(delay)); + }; + wrap.clear = () => { + clearTimeout(timeoutId); + }; + wrap.immediate = fn; + return wrap; +} + +export function throttle any> (fn: T, limit: number) { + let throttling = false; + return (...args: Parameters): void | ReturnType => { + if (!throttling) { + throttling = true; + setTimeout(() => throttling = false, limit); + return fn(...args); + } + }; +} + +export function clamp(value: number, min = 0, max = 1) { + return Math.max(min, Math.min(max, value)); +} + +export function getDecimals(value: number) { + const trimmedStr = value.toString().trim(); + return trimmedStr.includes('.') + ? (trimmedStr.length - trimmedStr.indexOf('.') - 1) + : 0; +} + +export function padEnd(str: string, length: number, char = '0') { + return str + char.repeat(Math.max(0, length - str.length)); +} + +export function padStart(str: string, length: number, char = '0') { + return char.repeat(Math.max(0, length - str.length)) + str; +} + +export function chunk(str: string, size = 1) { + const chunked: string[] = []; + let index = 0; + while (index < str.length) { + chunked.push(str.substr(index, size)); + index += size; + } + return chunked; +} + +export function chunkArray(array: any[], size = 1) { + return Array.from({ length: Math.ceil(array.length / size) }, (v, i) => + array.slice(i * size, i * size + size) + ); +} + +export function humanReadableFileSize(bytes: number, base: 1000 | 1024 = 1000): string { + if (bytes < base) { + return `${bytes} B`; + } + + const prefix = base === 1024 ? ['Ki', 'Mi', 'Gi'] : ['k', 'M', 'G']; + let unit = -1; + while (Math.abs(bytes) >= base && unit < prefix.length - 1) { + bytes /= base; + ++unit; + } + return `${bytes.toFixed(1)} ${prefix[unit]}B`; +} + +export function mergeDeep( + source: Record = {}, + target: Record = {}, + arrayFn?: (a: unknown[], b: unknown[]) => unknown[], +) { + const out: Record = {}; + + for (const key in source) { + out[key] = source[key]; + } + + for (const key in target) { + const sourceProperty = source[key]; + const targetProperty = target[key]; + + // Only continue deep merging if + // both properties are objects + if ( + isObject(sourceProperty) && + isObject(targetProperty) + ) { + out[key] = mergeDeep(sourceProperty, targetProperty, arrayFn); + + continue; + } + + if (Array.isArray(sourceProperty) && Array.isArray(targetProperty) && arrayFn) { + out[key] = arrayFn(sourceProperty, targetProperty); + + continue; + } + + out[key] = targetProperty; + } + + return out; +} + +export function flattenFragments(nodes: VNode[]): VNode[] { + return nodes.map((node) => { + if (node.type === Fragment) { + return flattenFragments(node.children as VNode[]); + } else { + return node; + } + }).flat(); +} + +export function toKebabCase(str = '') { + if (toKebabCase.cache.has(str)) return toKebabCase.cache.get(str)!; + const kebab = str + .replace(/[^a-z]/gi, '-') + .replace(/\B([A-Z])/g, '-$1') + .toLowerCase(); + toKebabCase.cache.set(str, kebab); + return kebab; +} +toKebabCase.cache = new Map(); + +export type MaybeRef = T | Ref + +// TODO +// TODO +// TODO +// TODO +export function findChildrenWithProvide( + key: InjectionKey | symbol, + vnode?: VNodeChild, +): ComponentInternalInstance[] { + if (!vnode || typeof vnode !== 'object') return []; + + if (Array.isArray(vnode)) { + return vnode.map((child) => findChildrenWithProvide(key, child)).flat(1); + } else if (vnode.suspense) { + return findChildrenWithProvide(key, vnode.ssContent!); + } else if (Array.isArray(vnode.children)) { + return vnode.children.map((child) => findChildrenWithProvide(key, child)).flat(1); + } else if (vnode.component) { + if (Object.getOwnPropertySymbols(vnode.component.provides).includes(key as symbol)) { + return [vnode.component]; + } else if (vnode.component.subTree) { + return findChildrenWithProvide(key, vnode.component.subTree).flat(1); + } + } + + return []; +} + +export class CircularBuffer { + readonly #arr: Array = []; + #pointer = 0; + + constructor(public readonly size: number) {} + + push(val: T) { + this.#arr[this.#pointer] = val; + this.#pointer = (this.#pointer + 1) % this.size; + } + + values(): T[] { + return this.#arr.slice(this.#pointer).concat(this.#arr.slice(0, this.#pointer)); + } +} + +export type UnionToIntersection = + (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never + +export function getEventCoordinates(e: MouseEvent | TouchEvent) { + if ('touches' in e) { + return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY }; + } + + return { clientX: e.clientX, clientY: e.clientY }; +} + +// Only allow a single return type +type NotAUnion = [T] extends [infer U] ? _NotAUnion : never +type _NotAUnion = U extends any ? [T] extends [U] ? unknown : never : never + +/** + * Convert a computed ref to a record of refs. + * The getter function must always return an object with the same keys. + */ +export function destructComputed (getter: ComputedGetter>): ToRefs +export function destructComputed(getter: ComputedGetter) { + const refs = reactive({}) as T; + const base = computed(getter); + // TODO: REMOVED "flush: sync" option + watchEffect(() => { + for (const key in base.value) { + (refs as any)[key] = base.value[key]; + } + }); + return toRefs(refs); +} + +/** Array.includes but value can be any type */ +export function includes(arr: readonly any[], val: any) { + return arr.includes(val); +} + +export function eventName(propName: string) { + return propName[2].toLowerCase() + propName.slice(3); +} + +export type EventProp void> = F +export const EventProp = () => [Function, Array] as PropType>; + +export function callEvent(handler: EventProp | undefined, ...args: T) { + if (Array.isArray(handler)) { + for (const h of handler) { + h(...args); + } + } else if (typeof handler === 'function') { + handler(...args); + } +} + +export function focusableChildren(el: Element, filterByTabIndex = true) { + const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'] + .map((s) => `${s}${filterByTabIndex ? ':not([tabindex="-1"])' : ''}:not([disabled])`) + .join(', '); + return [...el.querySelectorAll(targets)] as HTMLElement[]; +} + +export function getNextElement(elements: HTMLElement[], location?: 'next' | 'prev', condition?: (el: HTMLElement) => boolean) { + let _el; + let idx = elements.indexOf(document.activeElement as HTMLElement); + const inc = location === 'next' ? 1 : -1; + do { + idx += inc; + _el = elements[idx]; + } while ((!_el || _el.offsetParent == null || !(condition?.(_el) ?? true)) && idx < elements.length && idx >= 0); + return _el; +} + +export function focusChild(el: Element, location?: 'next' | 'prev' | 'first' | 'last' | number) { + const focusable = focusableChildren(el); + + if (!location) { + if (el === document.activeElement || !el.contains(document.activeElement)) { + focusable[0]?.focus(); + } + } else if (location === 'first') { + focusable[0]?.focus(); + } else if (location === 'last') { + focusable.at(-1)?.focus(); + } else if (typeof location === 'number') { + focusable[location]?.focus(); + } else { + const _el = getNextElement(focusable, location); + if (_el) _el.focus(); + else focusChild(el, location === 'next' ? 'first' : 'last'); + } +} + +export function isEmpty(val: any): boolean { + return val === null || val === undefined || (typeof val === 'string' && val.trim() === ''); +} + +export function noop() {} + +/** Returns null if the selector is not supported or we can't check */ +export function matchesSelector(el: Element | undefined, selector: string): boolean | null { + const supportsSelector = IN_BROWSER && + typeof CSS !== 'undefined' && + typeof CSS.supports !== 'undefined' && + CSS.supports(`selector(${selector})`); + + if (!supportsSelector) return null; + + try { + return !!el && el.matches(selector); + } catch (err) { + return null; + } +} + +// TODO +// TODO +// TODO +// TODO +export function ensureValidVNode(vnodes: VNodeArrayChildren): VNodeArrayChildren | null { + return vnodes.some((child) => { + if (!isVNode(child)) return true; + if (child.type === Comment) return false; + return child.type !== Fragment || + ensureValidVNode(child.children as VNodeArrayChildren); + }) + ? vnodes + : null; +} + +export function defer(timeout: number, cb: () => void) { + if (!IN_BROWSER || timeout === 0) { + cb(); + + return () => {}; + } + + const timeoutId = window.setTimeout(cb, timeout); + + return () => window.clearTimeout(timeoutId); +} + +export function eagerComputed(fn: () => T): Readonly> { + const result = shallowRef(); + + // TODO: REMOVED "flush: sync" option + watchEffect(() => { + result.value = fn(); + }); + + return readonly(result); +} + +export function isClickInsideElement(event: MouseEvent, targetDiv: HTMLElement) { + const mouseX = event.clientX; + const mouseY = event.clientY; + + const divRect = targetDiv.getBoundingClientRect(); + const divLeft = divRect.left; + const divTop = divRect.top; + const divRight = divRect.right; + const divBottom = divRect.bottom; + + return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom; +} + +export type TemplateRef = { + (target: Element | AlpineInstance | null): void; + value: HTMLElement | AlpineInstance | null | undefined; + readonly el: HTMLElement | undefined; +} +export function templateRef() { + const el = shallowRef | null>(); + const fn = (target: HTMLElement | AlpineInstance | null) => { + el.value = target; + }; + Object.defineProperty(fn, 'value', { + enumerable: true, + get: () => el.value, + set: (val) => el.value = val, + }); + Object.defineProperty(fn, 'el', { + enumerable: true, + get: () => refElement(el.value), + }); + + return fn as TemplateRef; +} diff --git a/packages/alpinui/src/util/propsFactory.ts b/packages/alpinui/src/util/propsFactory.ts new file mode 100644 index 0000000..eccfaf7 --- /dev/null +++ b/packages/alpinui/src/util/propsFactory.ts @@ -0,0 +1,102 @@ +// Types +import type { IfAny } from '@vue/shared'; // eslint-disable-line vue/prefer-import-from-vue +import type { ComponentObjectPropsOptions, Prop, PropType } from 'vue'; + +/** + * Creates a factory function for props definitions. + * This is used to define props in a composable then override + * default values in an implementing component. + * + * @example Simplified signature + * (props: Props) => (defaults?: Record) => Props + * + * @example Usage + * const makeProps = propsFactory({ + * foo: String, + * }) + * + * defineComponent({ + * props: { + * ...makeProps({ + * foo: 'a', + * }), + * }, + * setup (props) { + * // would be "string | undefined", now "string" because a default has been provided + * props.foo + * }, + * } + */ + +export function propsFactory< + PropsOptions extends ComponentObjectPropsOptions +>(props: PropsOptions, source: string) { + return = {}>( + defaults?: Defaults + ): AppendDefault => { + return Object.keys(props).reduce((obj, prop) => { + const isObjectDefinition = typeof props[prop] === 'object' && props[prop] != null && !Array.isArray(props[prop]); + const definition = isObjectDefinition ? props[prop] : { type: props[prop] }; + + if (defaults && prop in defaults) { + obj[prop] = { + ...definition, + default: defaults[prop], + }; + } else { + obj[prop] = definition; + } + + if (source && !obj[prop].source) { + obj[prop].source = source; + } + + return obj; + }, {}); + }; +} + +type AppendDefault> = { + [P in keyof T]-?: unknown extends D[P] + ? T[P] + : T[P] extends Record + ? Omit & { + type: PropType>; + default: MergeDefault; + } + : { + type: PropType>; + default: MergeDefault; + } +} + +type MergeDefault = unknown extends D ? InferPropType : (NonNullable> | D) + +/** + * Like `Partial` but doesn't care what the value is + */ +type PartialKeys = { [P in keyof T]?: unknown } + +// Copied from Vue +type InferPropType = [T] extends [null] + ? any // null & true would fail to infer + : [T] extends [{ type: null | true }] + // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 + // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` + // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean` + ? any + : [T] extends [ObjectConstructor | { type: ObjectConstructor }] + ? Record + : [T] extends [BooleanConstructor | { type: BooleanConstructor }] + ? boolean + : [T] extends [DateConstructor | { type: DateConstructor }] + ? Date + : [T] extends [(infer U)[] | { type: (infer U)[] }] + ? U extends DateConstructor + ? Date | InferPropType + : InferPropType + : [T] extends [Prop] + ? unknown extends V + ? IfAny + : V + : T diff --git a/packages/alpinui/src/util/useRender.ts b/packages/alpinui/src/util/useRender.ts new file mode 100644 index 0000000..889f6a6 --- /dev/null +++ b/packages/alpinui/src/util/useRender.ts @@ -0,0 +1,6 @@ +// Types +import type { VNode } from 'vue'; + +export function useRender(render: () => VNode): void { + // NOOP +} diff --git a/packages/alpinui/test/index.ts b/packages/alpinui/test/index.ts new file mode 100644 index 0000000..72a8928 --- /dev/null +++ b/packages/alpinui/test/index.ts @@ -0,0 +1,111 @@ +// Setup +// import type { ComponentOptions } from 'vue' + +// Utilities +import toHaveBeenWarnedInit from './util/to-have-been-warned' + +// export function functionalContext (context: ComponentOptions = {}, children = []) { +// if (!Array.isArray(children)) children = [children] +// return { +// context: { +// data: {}, +// props: {}, +// ...context, +// }, +// children, +// } +// } + +export function touch (element: Element) { + const createTrigger = (eventName: string) => (clientX: number, clientY: number) => { + const touches = [{ clientX, clientY }] + const event = new Event(eventName) + + ;(event as any).touches = touches + ;(event as any).changedTouches = touches + element.dispatchEvent(event) + + return touch(element) + } + + return { + start: createTrigger('touchstart'), + move: createTrigger('touchmove'), + end: createTrigger('touchend'), + } +} + +export const wait = (timeout?: number) => { + return new Promise(resolve => setTimeout(resolve, timeout)) +} + +export const waitAnimationFrame = (timeout?: number) => { + return new Promise(resolve => requestAnimationFrame(resolve)) +} + +export const resizeWindow = (width = window.innerWidth, height = window.innerHeight) => { + (window as any).innerWidth = width + ;(window as any).innerHeight = height + window.dispatchEvent(new Event('resize')) + + return wait(200) +} + +export const scrollWindow = (y: number) => { + (window as any).pageYOffset = y + window.dispatchEvent(new Event('scroll')) + + return wait(200) +} + +export const scrollElement = (element: Element, y: number) => { + element.scrollTop = y + element.dispatchEvent(new Event('scroll')) + + return wait(200) +} + +// Add a global mockup for IntersectionObserver +class IntersectionObserver { + callback?: (entries: any, observer: any) => {} + + constructor (callback: any) { + this.callback = callback + } + + observe () { + this.callback?.([], this) + return null + } + + unobserve () { + this.callback = undefined + return null + } +} + +(global as any).IntersectionObserver = IntersectionObserver + +class ResizeObserver { + callback?: ResizeObserverCallback + + constructor (callback: ResizeObserverCallback) { + this.callback = callback + } + + observe () { + this.callback?.([], this) + } + + unobserve () { + this.callback = undefined + } + + disconnect () { + this.callback = undefined + } +} + +(global as any).ResizeObserver = ResizeObserver + +toHaveBeenWarnedInit() diff --git a/packages/alpinui/test/util/to-have-been-warned.ts b/packages/alpinui/test/util/to-have-been-warned.ts new file mode 100644 index 0000000..c2929d9 --- /dev/null +++ b/packages/alpinui/test/util/to-have-been-warned.ts @@ -0,0 +1,75 @@ +import { afterEach, beforeAll, beforeEach, expect, jest } from '@jest/globals' + +// From Vue, slightly modified +function noop () { } + +if (typeof console === 'undefined') { + (window as any).console = { + warn: noop, + error: noop, + } +} + +// avoid info messages during test +// eslint-disable-next-line no-console +console.info = noop + +const asserted: string[] = [] + +function createCompareFn (spy: jest.Mock) { + const hasWarned = (msg: string) => { + for (const args of spy.mock.calls) { + if (args.some((arg: any) => ( + arg.toString().includes(msg) + ))) return true + } + return false + } + + return (msg: string) => { + asserted.push(msg) + const warned = Array.isArray(msg) + ? msg.some(hasWarned) + : hasWarned(msg) + return { + pass: warned, + message: warned + ? () => (`Expected message "${msg}" not to have been warned`) + : () => (`Expected message "${msg}" to have been warned`), + } + } +} + +function toHaveBeenWarnedInit () { + let warn: jest.Mock + let error: jest.Mock + beforeAll(() => { + warn = jest.spyOn(console, 'warn').mockImplementation(noop) as any + error = jest.spyOn(console, 'error').mockImplementation(noop) as any + expect.extend({ + toHaveBeenWarned: createCompareFn(error), + toHaveBeenTipped: createCompareFn(warn), + }) + }) + + beforeEach(() => { + asserted.length = 0 + warn.mockClear() + error.mockClear() + }) + + afterEach(done => { + for (const type of ['error', 'warn']) { + const warned = (msg: string) => asserted.some(assertedMsg => msg.toString().includes(assertedMsg)) + for (const args of (console as any)[type].mock.calls) { + if (!warned(args[0])) { + done!(new Error(`Unexpected console.${type} message: ${args[0]}`)) + return + } + } + } + done!() + }) +} + +export default toHaveBeenWarnedInit diff --git a/packages/alpinui/tsconfig.checks.json b/packages/alpinui/tsconfig.checks.json new file mode 100644 index 0000000..8ac8c68 --- /dev/null +++ b/packages/alpinui/tsconfig.checks.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.dev.json", + "compilerOptions": { + "skipLibCheck": true + } +} diff --git a/packages/alpinui/tsconfig.dev.json b/packages/alpinui/tsconfig.dev.json new file mode 100644 index 0000000..c4fcb09 --- /dev/null +++ b/packages/alpinui/tsconfig.dev.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "include": [ + "src", + "dev", + "cypress" + ], + "compilerOptions": { + "allowJs": true + }, + "vueCompilerOptions": { + "strictTemplates": true + } +} diff --git a/packages/alpinui/tsconfig.dist.json b/packages/alpinui/tsconfig.dist.json new file mode 100644 index 0000000..d3ed99e --- /dev/null +++ b/packages/alpinui/tsconfig.dist.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "exclude": ["dev", "**/*.spec.*", "cypress"] +} diff --git a/packages/alpinui/tsconfig.json b/packages/alpinui/tsconfig.json new file mode 100644 index 0000000..2b227e4 --- /dev/null +++ b/packages/alpinui/tsconfig.json @@ -0,0 +1,24 @@ +{ + "extends": "../../tsconfig.json", + "include": [ + "src", + "dev" + ], + "exclude": ["types-temp"], + "compilerOptions": { + "baseUrl": ".", + "outDir": "./types-temp", + "paths": { + "@/*": [ + "src/*" + ], + "types": [ + "jest", + "node", + "vue-router" + ] + }, + "stripInternal": true, + "skipLibCheck": true, + } +} diff --git a/packages/alpinui/types/cypress.d.ts b/packages/alpinui/types/cypress.d.ts new file mode 100644 index 0000000..c578b2b --- /dev/null +++ b/packages/alpinui/types/cypress.d.ts @@ -0,0 +1,49 @@ +import 'cypress-file-upload' +import 'cypress-real-events' +import type { mount as cyMount } from 'cypress/vue' +import type { SnapshotOptions } from '@percy/core' +import type { MountingOptions, VueWrapper } from '@vue/test-utils' +import type { AllowedComponentProps, ComponentPublicInstance, DefineSetupFnComponent, FunctionalComponent, VNodeProps } from 'vue' +import type { VuetifyOptions } from '@/framework' + +type Swipe = number[] | string + +type StripProps = keyof VNodeProps | keyof AllowedComponentProps | 'v-slots' | '$children' | `v-slot:${string}` +type Events = T extends { $props: infer P extends object } + ? { + [K in Exclude as K extends `on${infer N}` + ? Uncapitalize + : never + ]: P[K] extends (((...args: any[]) => any) | undefined) + ? Parameters>[] + : never + } + : never + +declare global { + namespace Cypress { + export interface Chainable { + mount: typeof cyMount & ( + (component: FunctionalComponent, options?: MountingOptions | null, vuetifyOptions?: VuetifyOptions) => Chainable + ) & ( + (component: JSX.Element, options?: MountingOptions | null, vuetifyOptions?: VuetifyOptions) => Chainable + ) + setProps (props: Record): Chainable> + getBySel (dataTestAttribute: string, args?: any): Chainable + percySnapshot ( + name?: string, + options?: SnapshotOptions + ): Chainable + vue (): Chainable> + swipe (...path: Swipe[]): Chainable + emitted any, E extends Events>, K extends keyof E> ( + selector: T, + event?: K + ): Chainable + } + } +} + +declare module 'cypress/vue' { + export function mount (component: JSX.Element, options?: MountingOptions | null): Cypress.Chainable +} diff --git a/packages/alpinui/vite.config.mjs b/packages/alpinui/vite.config.mjs new file mode 100644 index 0000000..3dd8820 --- /dev/null +++ b/packages/alpinui/vite.config.mjs @@ -0,0 +1,84 @@ +import path from 'path' +import fs, { readFileSync } from 'fs' +import { fileURLToPath } from 'url' + +import fg from 'fast-glob' +import { loadEnv, defineConfig } from 'vite' + +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import viteSSR from 'vite-ssr/plugin.js' +import Components from 'unplugin-vue-components/vite'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)) +const resolve = file => path.resolve(__dirname, file) + +const vuetifyPackage = fs.readFileSync('./package.json', 'utf-8') + +const index = readFileSync(resolve('src/components/index.ts'), { encoding: 'utf8' }) +const block = Array.from(index.matchAll(/^\/\/ export \* from '\.\/(.*)';?$/gm), m => m[1]) +const files = fg.sync(['src/components/**/index.ts', 'src/labs/**/index.ts'], { cwd: __dirname }) +const components = files.filter(file => file.startsWith('src/labs') || !block.some(name => file.includes(`/${name}/`))) +const map = new Map(components.flatMap(file => { + const src = readFileSync(file, { encoding: 'utf8' }) + const matches = src.matchAll(/export const (V\w+)|export { (V\w+) }/gm) + return Array.from(matches, m => [m[1] || m[2], file.replace('src/', '@/').replace('.ts', '')]) +})) + +console.log({map}) // TODO DELETEME + +export default defineConfig(({ mode }) => { + Object.assign(process.env, loadEnv(mode, process.cwd(), '')) + + return { + root: resolve('dev'), + server: { + host: process.env.HOST, + port: process.env.CYPRESS ? undefined : +(process.env.PORT ?? 8090), + strictPort: !!process.env.PORT && !process.env.CYPRESS, + warmup: { + clientFiles: process.env.CYPRESS ? [ + './src/**/*.spec.cy.{js,jsx,ts,tsx}', + './cypress/support/index.ts', + ] : [ + './dev/index.html', + ], + } + }, + preview: { + host: process.env.HOST, + port: +(process.env.PORT ?? 8090), + strictPort: !!process.env.PORT, + }, + resolve: { + alias: [ + { find: /^vuetify$/, replacement: resolve('./src/framework.ts') }, + { find: /^vuetify\/(.*)/, replacement: resolve('./$1') }, + { find: /^@\/(.*)/, replacement: resolve('./src/$1')} + ] + }, + plugins: [ + vue(), + vueJsx({ optimize: false, enableObjectSlots: false }), + viteSSR(), + Components({ + dts: !process.env.CYPRESS, + resolvers: [ + name => { + if (map.has(name)) { + return { name, from: map.get(name) } + } + } + ] + }), + ], + define: { + __VUETIFY_VERSION__: JSON.stringify(vuetifyPackage.version), + 'process.env.BABEL_TYPES_8_BREAKING': 'false', + 'process.env.VITE_SSR': process.env.VITE_SSR, + }, + build: { + minify: false, + } + } +}) diff --git a/packages/api-generator/.gitignore b/packages/api-generator/.gitignore new file mode 100644 index 0000000..003c947 --- /dev/null +++ b/packages/api-generator/.gitignore @@ -0,0 +1,5 @@ +/dist/ +/lib/ +/src/locale/* +/templates/tmp/ +!/src/locale/en diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json new file mode 100755 index 0000000..fab05b9 --- /dev/null +++ b/packages/api-generator/package.json @@ -0,0 +1,26 @@ +{ + "name": "@vuetify/api-generator", + "version": "3.6.12", + "private": true, + "description": "", + "scripts": { + "build": "node --import tsx --no-warnings src/index.ts", + "lint": "eslint --ext .ts,.json src -f codeframe --max-warnings 0", + "lint:fix": "yarn lint --fix" + }, + "author": "", + "license": "ISC", + "dependencies": { + "alpinejs": "^3.14.1", + "deepmerge": "^4.3.1", + "piscina": "^4.4.0", + "prettier": "^3.2.5", + "ts-morph": "^22.0.0", + "tsx": "^4.7.2", + "vue": "^3.4.27", + "vuetify": "^3.6.12" + }, + "devDependencies": { + "@types/stringify-object": "^4.0.5" + } +} diff --git a/packages/api-generator/src/helpers/sass.ts b/packages/api-generator/src/helpers/sass.ts new file mode 100644 index 0000000..55b8165 --- /dev/null +++ b/packages/api-generator/src/helpers/sass.ts @@ -0,0 +1,43 @@ +import fs from 'fs' + +function processVariableFile (filePath: string) { + if (fs.existsSync(filePath)) { + const varFile = fs.readFileSync(filePath, 'utf8') + const vars = varFile.replace(/\/\/.+[\r\n]+/g, '').split(/;[\n]*/g) + const varValues: Record = {} + for (const [index, variable] of vars.entries()) { + const varArr = variable.split(':') + if (varArr.length >= 2 && varArr[0].startsWith('$')) { + const varName = varArr.shift()!.trim() + const varDefault = (vars[index + 1].startsWith('@')) + ? vars[index + 1] + : varArr.join(':') + varValues[varName] = { + default: varDefault.replace('!default', '').trim(), + } + } + } + return varValues + } + + return {} +} + +export const parseSassVariables = (componentName: string) => { + const rootDir = './../vuetify/src/components' + return processVariableFile(`${rootDir}/${componentName}/_variables.scss`) +} + +// export function parseGlobalSassVariables () { +// return [ +// './../vuetify/src/styles/settings/_colors.scss', +// './../vuetify/src/styles/settings/_dark.scss', +// './../vuetify/src/styles/settings/_elevations.scss', +// './../vuetify/src/styles/settings/_light.scss', +// './../vuetify/src/styles/settings/_theme.scss', +// './../vuetify/src/styles/settings/_variables.scss', +// ].reduce((acc, path) => { +// acc.push(...processVariableFile(path)) +// return acc +// }, []).sort((a, b) => a.name.localeCompare(b.name)) +// } diff --git a/packages/api-generator/src/helpers/text.ts b/packages/api-generator/src/helpers/text.ts new file mode 100644 index 0000000..d95e958 --- /dev/null +++ b/packages/api-generator/src/helpers/text.ts @@ -0,0 +1,18 @@ +import { capitalize } from 'lodash-es' + +export { camelCase, capitalize } from 'lodash-es' + +export const kebabCase = (str: string) => { + let kebab = '' + for (let i = 0; i < str.length; i++) { + const charCode = str.charCodeAt(i) + if (charCode >= 65 && charCode <= 90) { + kebab += `${i > 0 ? '-' : ''}${str[i].toLowerCase()}` + } else { + kebab += str[i] + } + } + return kebab +} + +export const pascalize = (str: string) => str.split('-').map(capitalize).join('') diff --git a/packages/api-generator/src/index.ts b/packages/api-generator/src/index.ts new file mode 100644 index 0000000..0521edd --- /dev/null +++ b/packages/api-generator/src/index.ts @@ -0,0 +1,137 @@ +import fs from 'fs/promises' +import path from 'upath' +import { components } from 'vuetify/dist/vuetify-labs.js' +import importMap from 'vuetify/dist/json/importMap.json' assert { type: 'json' } +import importMapLabs from 'vuetify/dist/json/importMap-labs.json' assert { type: 'json' } +import { kebabCase } from './helpers/text' +import type { BaseData, ComponentData, DirectiveData } from './types' +import { generateComposableDataFromTypes, generateDirectiveDataFromTypes } from './types' +import Piscina from 'piscina' +import { addDescriptions, addDirectiveDescriptions, addPropData, stringifyProps } from './utils' +import * as os from 'os' +import { mkdirp } from 'mkdirp' +import { createVeturApi } from './vetur' +import { rimraf } from 'rimraf' +import { createWebTypesApi } from './web-types' +import inspector from 'inspector' +import yargs from 'yargs' +import { parseSassVariables } from './helpers/sass' + +const yar = yargs(process.argv.slice(2)) + .option('components', { + type: 'array', + }) + .option('skip-directives', { + type: 'boolean', + }) + .option('skip-composables', { + type: 'boolean', + }) + +const reset = '\x1b[0m' +const red = '\x1b[31m' +const blue = '\x1b[34m' + +const componentsInfo: Record = { + ...importMap.components, + ...importMapLabs.components, +} + +type Truthy = Exclude; +const BooleanFilter = (x: T): x is Truthy => Boolean(x) + +const run = async () => { + const argv = await yar.argv + + const locales = await fs.readdir('./src/locale', 'utf-8') + + // Components + const pool = new Piscina({ + filename: path.resolve('./src/worker.ts'), + niceIncrement: 10, + maxThreads: inspector.url() ? 1 : Math.max(1, Math.floor(Math.min(os.cpus().length / 2, os.freemem() / (1.1 * 1024 ** 3)))), + }) + + const template = await fs.readFile('./templates/component.d.ts', 'utf-8') + + await rimraf(path.resolve('./dist')) + await fs.mkdir(path.resolve('./dist')) + await mkdirp('./templates/tmp') + for (const component in components) { + // await fs.writeFile(`./templates/tmp/${component}.d.ts`, template.replaceAll('__component__', component)) + await fs.writeFile(`./templates/tmp/${component}.d.ts`, + template.replaceAll('__component__', component) + .replaceAll('__name__', componentsInfo[component].from.replace('.mjs', '.js')) + ) + } + + const outPath = path.resolve('./dist/api') + await mkdirp(outPath) + + const componentData = (await Promise.all( + Object.entries(components).map(async ([componentName, componentInstance]) => { + if (argv.components && !argv.components.includes(componentName)) return null + + const data = await pool.run(componentName) + const componentProps = stringifyProps(componentInstance.props) + const sources = addPropData(componentName, data, componentProps) + await addDescriptions(componentName, data, locales, sources) + const sass = parseSassVariables(componentName) + + const component = { + displayName: componentName, + fileName: componentName, + pathName: kebabCase(componentName), + ...data, + sass, + } satisfies ComponentData + await fs.writeFile(path.resolve(outPath, `${component.fileName}.json`), JSON.stringify(component, null, 2)) + + return component + }) + )).filter(BooleanFilter) + + // Composables + if (!argv.skipComposables) { + const composables = await Promise.all((await generateComposableDataFromTypes()).map(async composable => { + console.log(blue, composable.displayName, reset) + await addDescriptions(composable.fileName, composable, locales) + return composable + })) + + for (const composable of composables) { + await fs.writeFile( + path.resolve(outPath, `${composable.fileName}.json`), + JSON.stringify(composable, null, 2) + ) + } + } + + // Directives + let directives: DirectiveData[] = [] + if (!argv.skipDirectives) { + directives = await Promise.all((await generateDirectiveDataFromTypes()).map(async data => { + console.log(blue, data.fileName, reset) + await addDirectiveDescriptions(data.fileName, data, locales) + + return data + })) + + for (const directive of directives) { + await fs.writeFile( + path.resolve(outPath, `${directive.fileName}.json`), + JSON.stringify(directive, null, 2) + ) + } + } + + createVeturApi(componentData) + createWebTypesApi(componentData, directives) + await fs.mkdir(path.resolve('../vuetify/dist/json'), { recursive: true }) + await fs.copyFile(path.resolve('./dist/tags.json'), path.resolve('../vuetify/dist/json/tags.json')) + await fs.copyFile(path.resolve('./dist/attributes.json'), path.resolve('../vuetify/dist/json/attributes.json')) + await fs.copyFile(path.resolve('./dist/web-types.json'), path.resolve('../vuetify/dist/json/web-types.json')) + rimraf.sync(path.resolve('./templates/tmp')) +} + +run() diff --git a/packages/api-generator/src/locale/en/$vuetify.json b/packages/api-generator/src/locale/en/$vuetify.json new file mode 100644 index 0000000..6d557a5 --- /dev/null +++ b/packages/api-generator/src/locale/en/$vuetify.json @@ -0,0 +1,5 @@ +{ + "functions": { + "goTo": "Scroll to target location, using provided options." + } +} diff --git a/packages/api-generator/src/locale/en/DataIterator-items.json b/packages/api-generator/src/locale/en/DataIterator-items.json new file mode 100644 index 0000000..ab4df0b --- /dev/null +++ b/packages/api-generator/src/locale/en/DataIterator-items.json @@ -0,0 +1,7 @@ +{ + "props": { + "itemSelectable": "Property on supplied `items` that contains the boolean value indicating if the item is selectable.", + "itemValue": "Property on supplied `items` that contains its value.", + "returnObject": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**." + } +} diff --git a/packages/api-generator/src/locale/en/DataTable-expand.json b/packages/api-generator/src/locale/en/DataTable-expand.json new file mode 100644 index 0000000..63d560c --- /dev/null +++ b/packages/api-generator/src/locale/en/DataTable-expand.json @@ -0,0 +1,7 @@ +{ + "props": { + "expanded": "Whether the item is expanded or not.", + "expandOnClick": "Expands item when the row is clicked.", + "showExpand": "Shows the expand icon." + } +} diff --git a/packages/api-generator/src/locale/en/DataTable-group.json b/packages/api-generator/src/locale/en/DataTable-group.json new file mode 100644 index 0000000..54e9691 --- /dev/null +++ b/packages/api-generator/src/locale/en/DataTable-group.json @@ -0,0 +1,5 @@ +{ + "props": { + "groupBy": "Defines the grouping of the table items." + } +} diff --git a/packages/api-generator/src/locale/en/DataTable-header.json b/packages/api-generator/src/locale/en/DataTable-header.json new file mode 100644 index 0000000..98cab8a --- /dev/null +++ b/packages/api-generator/src/locale/en/DataTable-header.json @@ -0,0 +1,5 @@ +{ + "props": { + "headers": "An array of objects that each describe a header column." + } +} diff --git a/packages/api-generator/src/locale/en/DataTable-items.json b/packages/api-generator/src/locale/en/DataTable-items.json new file mode 100644 index 0000000..31892f4 --- /dev/null +++ b/packages/api-generator/src/locale/en/DataTable-items.json @@ -0,0 +1,7 @@ +{ + "props": { + "itemSelectable": "Property on supplied `items` that indicates whether the item is selectable.", + "itemValue": "Property on supplied `items` that contains its value.", + "returnObject": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**." + } +} diff --git a/packages/api-generator/src/locale/en/DataTable-paginate.json b/packages/api-generator/src/locale/en/DataTable-paginate.json new file mode 100644 index 0000000..07f267d --- /dev/null +++ b/packages/api-generator/src/locale/en/DataTable-paginate.json @@ -0,0 +1,6 @@ +{ + "props": { + "itemsPerPage": "The number of items to display on each page.", + "page": "The current displayed page number (1-indexed)." + } +} diff --git a/packages/api-generator/src/locale/en/DataTable-select.json b/packages/api-generator/src/locale/en/DataTable-select.json new file mode 100644 index 0000000..d025224 --- /dev/null +++ b/packages/api-generator/src/locale/en/DataTable-select.json @@ -0,0 +1,6 @@ +{ + "props": { + "selectStrategy": "Defines the strategy of selecting items in the list. Possible values are: 'single' (only one item can be selected at a time), 'page' ('Select all' button will select only items on the current page), 'all' ('Select all' button will select all items in the list).", + "showSelect": "Shows the column with checkboxes for selecting items in the list." + } +} diff --git a/packages/api-generator/src/locale/en/DataTable-sort.json b/packages/api-generator/src/locale/en/DataTable-sort.json new file mode 100644 index 0000000..f38c00b --- /dev/null +++ b/packages/api-generator/src/locale/en/DataTable-sort.json @@ -0,0 +1,8 @@ +{ + "props": { + "customKeySort": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.", + "mustSort": "Forces sorting on the column(s).", + "sortBy": "Array of column keys and sort orders that determines the sort order of the table." + + } +} diff --git a/packages/api-generator/src/locale/en/Select.json b/packages/api-generator/src/locale/en/Select.json new file mode 100644 index 0000000..e2af9a0 --- /dev/null +++ b/packages/api-generator/src/locale/en/Select.json @@ -0,0 +1,14 @@ +{ + "props": { + "closeText": "Text set to to the inputs `aria-label` and `title` when input menu is closed.", + "chips": "Changes display of selections to chips.", + "closableChips": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.", + "hideSelected": "Do not display in the select menu items that are already selected.", + "itemColor": "Sets color of selected items.", + "listProps": "Pass props through to the `v-list` component. Accepts an object with anything from [v-list](/api/v-list/#props) props, camelCase keys are recommended.", + "menuProps": "Pass props through to the `v-menu` component. Accepts an object with anything from [v-menu](/api/v-menu/#props) props, camelCase keys are recommended.", + "multiple": "Changes select to multiple. Accepts array for value.", + "openOnClear": "Open's the menu whenever the clear icon is clicked.", + "openText": "Text set to to the inputs **aria-label** and **title** when input menu is open." + } +} diff --git a/packages/api-generator/src/locale/en/SelectionControlGroup.json b/packages/api-generator/src/locale/en/SelectionControlGroup.json new file mode 100644 index 0000000..c5ec104 --- /dev/null +++ b/packages/api-generator/src/locale/en/SelectionControlGroup.json @@ -0,0 +1,13 @@ +{ + "props": { + "defaultsTarget": "The target component to provide defaults values for.", + "error": "Puts the input in a manual error state.", + "falseIcon": "The icon used when inactive.", + "id": "Sets the DOM id on the component.", + "inline": "Puts children inputs into a row.", + "multiple": "Changes select to multiple. Accepts array for value.", + "readonly": "Puts input in readonly state.", + "trueIcon": "The icon used when active.", + "type": "Provides the default type for children selection controls." + } +} diff --git a/packages/api-generator/src/locale/en/Slider.json b/packages/api-generator/src/locale/en/Slider.json new file mode 100644 index 0000000..388b2ae --- /dev/null +++ b/packages/api-generator/src/locale/en/Slider.json @@ -0,0 +1,18 @@ +{ + "props": { + "max": "Sets the maximum allowed value.", + "min": "Sets the minimum allowed value.", + "reverse": "Reverses the slider direction.", + "showTicks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.", + "step": "If greater than 0, sets step interval for ticks.", + "thumbColor": "Sets the thumb and thumb label color.", + "thumbLabel": "Show thumb label. If `true` it shows label when using slider. If set to `'always'` it always shows label.", + "thumbSize": "Controls the size of the thumb label.", + "ticks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.", + "tickLabels": "When provided with Array, will attempt to map the labels to each step in index order.", + "tickSize": "Controls the size of **ticks**", + "trackColor": "Sets the track's color", + "trackFillColor": "Sets the track's fill color", + "trackSize": "Sets the track's size (height)." + } +} diff --git a/packages/api-generator/src/locale/en/Stepper.json b/packages/api-generator/src/locale/en/Stepper.json new file mode 100644 index 0000000..797be50 --- /dev/null +++ b/packages/api-generator/src/locale/en/Stepper.json @@ -0,0 +1,27 @@ +{ + "props": { + "altLabels": "Places the labels beneath the step.", + "editable": "Marks step as editable.", + "hideActions": "Hide actions bar (prev and next buttons).", + "itemTitle": "Property on supplied `items` that contains its title.", + "itemValue": "Property on supplied `items` that contains its value.", + "mobile": "Forces the stepper into a mobile state, removing labels from stepper items.", + "nextText": "The text used for the Next button.", + "prevText": "The text used for the Prev button.", + "nonLinear": "Allow user to jump to any step." + }, + "slots": { + "[`header-item.${string}`]": "Slot for customizing header items when using the [items](/api/v-stepper/#props-items) prop.", + "[`item.${string}`]": "Slot for customizing the content for each step.", + "actions": "Slot for customizing [v-stepper-actions](/api/v-stepper-actions/).", + "header": "Slot for customizing the header.", + "header-item": "Slot for customizing all header items.", + "icon": "Slot for customizing all stepper item icons.", + "next": "Slot for customizing the next step functionailty", + "prev": "Slot for customizing the prev step functionality" + }, + "exposed": { + "next": "Move to the next step.", + "prev": "Move to the prev step." + } +} diff --git a/packages/api-generator/src/locale/en/StepperItem.json b/packages/api-generator/src/locale/en/StepperItem.json new file mode 100644 index 0000000..3f1ddeb --- /dev/null +++ b/packages/api-generator/src/locale/en/StepperItem.json @@ -0,0 +1,12 @@ +{ + "props": { + "complete": "Marks step as complete.", + "completeIcon": "Icon to display when step is marked as completed.", + "editable": "Marks step as editable.", + "editIcon": "Icon to display when step is editable.", + "errorIcon": "Icon to display when step has an error.", + "error": "Puts the stepper item in a manual error state.", + "rules": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.", + "step": "Content to display inside step circle." + } +} diff --git a/packages/api-generator/src/locale/en/VAlert.json b/packages/api-generator/src/locale/en/VAlert.json new file mode 100644 index 0000000..20c2077 --- /dev/null +++ b/packages/api-generator/src/locale/en/VAlert.json @@ -0,0 +1,29 @@ +{ + "props": { + "border": "Adds a colored border to the component.", + "borderColor": "Specifies the color of the border. Accepts any color value.", + "closable": "Adds a close icon that can hide the alert.", + "closeIcon": "Change the default icon used for **closable** alerts.", + "closeLabel": "Text used for *aria-label* on **closable** alerts. Can also be customized globally in [Internationalization](/customization/internationalization).", + "dense": "Decreases component's height.", + "elevation": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).", + "height": "Sets the height for the component.", + "maxHeight": "Sets the maximum height for the component.", + "maxWidth": "Sets the maximum width for the component.", + "minHeight": "Sets the minimum height for the component.", + "minWidth": "Sets the minimum width for the component.", + "modelValue": "Controls whether the component is visible or hidden.", + "prominent": "Displays a larger vertically centered icon to draw more attention.", + "tile": "Removes the component's border-radius.", + "type": "Create a specialized alert that uses a contextual color and has a pre-defined icon.", + "width": "Sets the width for the component." + }, + "slots": { + "append": "Slot for icon at end of alert.", + "close": "Slot for icon used in **dismissible** prop.", + "prepend": "Slot for icon at beginning of alert." + }, + "functions": { + "toggle": "Toggles the alert's active state. Available in the close slot and used as the click action in **dismissible**." + } +} diff --git a/packages/api-generator/src/locale/en/VApp.json b/packages/api-generator/src/locale/en/VApp.json new file mode 100644 index 0000000..a686182 --- /dev/null +++ b/packages/api-generator/src/locale/en/VApp.json @@ -0,0 +1,5 @@ +{ + "exposed": { + "theme": "The instance of the injected active theme." + } +} diff --git a/packages/api-generator/src/locale/en/VAppBar.json b/packages/api-generator/src/locale/en/VAppBar.json new file mode 100644 index 0000000..1206247 --- /dev/null +++ b/packages/api-generator/src/locale/en/VAppBar.json @@ -0,0 +1,18 @@ +{ + "props": { + "collapse": "Morphs the component into a collapsed state, reducing its maximum width.", + "extensionHeight": "Designate an explicit height for the `extension` slot.", + "flat": "Removes the component's **box-shadow**.", + "floating": "Applies **display: inline-flex** to the component.", + "location": "Aligns the component towards the top or bottom.", + "prominent": "Increases the height of the component content to the value of the **prominentHeight** prop.", + "prominentHeight": "Designate an explicit height when using the **prominent** prop.", + "scrollBehavior": "Specify an action to take when the scroll position of **scroll-target** reaches **scroll-threshold**. Accepts any combination of hide, inverted, collapse, elevate, and fade-image. Multiple values can be used, separated by a space.", + "scrollTarget": "The element to target for scrolling events. Uses `window` by default.", + "scrollThreshold": "The amount of scroll distance down before **scroll-behavior** activates." + }, + "slots": { + "extension": "Slot positioned directly under the main content of the toolbar. Height of this slot can be set explicitly with the **extension-height** prop.", + "image": "Expects the [`v-img`](/components/images/) component." + } +} diff --git a/packages/api-generator/src/locale/en/VAutocomplete.json b/packages/api-generator/src/locale/en/VAutocomplete.json new file mode 100644 index 0000000..4b1a56c --- /dev/null +++ b/packages/api-generator/src/locale/en/VAutocomplete.json @@ -0,0 +1,13 @@ +{ + "props": { + "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.", + "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.", + "itemChildren": "This property currently has **no effect**.", + "filter": "The filtering algorithm used when searching. [example](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts#L40).", + "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props.", + "noFilter": "Do not apply filtering when searching. Useful when data is being filtered server side." + }, + "slots": { + "item": "Define a custom item appearance. The root element of this slot must be a **v-list-item** with `v-bind=\"props\"` applied. `props` includes everything required for the default select list behaviour - including title, value, click handlers, virtual scrolling, and anything else that has been added with `item-props`." + } +} diff --git a/packages/api-generator/src/locale/en/VBadge.json b/packages/api-generator/src/locale/en/VBadge.json new file mode 100644 index 0000000..df9a307 --- /dev/null +++ b/packages/api-generator/src/locale/en/VBadge.json @@ -0,0 +1,17 @@ +{ + "props": { + "bordered": "Applies a **2px** by default and **1.5px** border around the badge when using the **dot** property.", + "content": "Text content to show in the badge.", + "dot": "Reduce the size of the badge and hide its contents.", + "floating": "Elevates the badge above the slotted content.", + "inline": "Moves the badge to be inline with the wrapping element. Supports the usage of the **left** prop.", + "label": "The **aria-label** used for the badge.", + "max": "Sets the maximum number allowed when using the **content** prop with a `number` like value. If the content number exceeds the maximum value, a `+` suffix is added.", + "offsetX": "Offset the badge on the x-axis.", + "offsetY": "Offset the badge on the y-axis.", + "overlap": "Overlaps the slotted content on top of the component." + }, + "slots": { + "badge": "The slot used for the badge's content." + } +} diff --git a/packages/api-generator/src/locale/en/VBanner.json b/packages/api-generator/src/locale/en/VBanner.json new file mode 100644 index 0000000..08ee5c4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VBanner.json @@ -0,0 +1,13 @@ +{ + "props": { + "avatar": "Designates a specific src image to pass to the thumbnail.", + "lines": "The amount of visible lines of text before it truncates.", + "mobile": "Applies the mobile banner styles.", + "sticky": "Applies `position: sticky` to the component with `top: 0`. You can find more information on the [MDN documentation for sticky position](https://developer.mozilla.org/en-US/docs/Web/CSS/position).", + "stacked": "Forces the banner actions onto a new line. This is not applicable when the banner has `lines=\"one\"`." + }, + "slots": { + "actions": "The slot used for the action's content such as a [v-btn](/components/buttons).", + "thumbnail": "The slot used for avatars and icon content." + } +} diff --git a/packages/api-generator/src/locale/en/VBottomNavigation.json b/packages/api-generator/src/locale/en/VBottomNavigation.json new file mode 100644 index 0000000..2e8546d --- /dev/null +++ b/packages/api-generator/src/locale/en/VBottomNavigation.json @@ -0,0 +1,6 @@ +{ + "props": { + "grow": "Force all [v-btn](/components/buttons) children to take up all available horizontal space.", + "mode": "Changes the orientation and active state styling of the component." + } +} diff --git a/packages/api-generator/src/locale/en/VBottomSheet.json b/packages/api-generator/src/locale/en/VBottomSheet.json new file mode 100644 index 0000000..7e27109 --- /dev/null +++ b/packages/api-generator/src/locale/en/VBottomSheet.json @@ -0,0 +1,5 @@ +{ + "props": { + "inset": "Reduces the sheet content maximum width to 70%." + } +} diff --git a/packages/api-generator/src/locale/en/VBreadcrumbs.json b/packages/api-generator/src/locale/en/VBreadcrumbs.json new file mode 100644 index 0000000..6bc0747 --- /dev/null +++ b/packages/api-generator/src/locale/en/VBreadcrumbs.json @@ -0,0 +1,14 @@ +{ + "props": { + "divider": "Specifies the dividing character between items.", + "icons": "Specifies that the dividers between items are [v-icon](/components/icons)s.", + "justifyCenter": "Align the breadcrumbs center.", + "justifyEnd": "Align the breadcrumbs at the end.", + "large": "Increase the font-size of the breadcrumb item text to 16px (14px default)." + }, + "slots": { + "divider": "The slot used for dividers.", + "prepend": "The slot used for prepend content.", + "title": "The slot used to display the title of each breadcrumb." + } +} diff --git a/packages/api-generator/src/locale/en/VBreadcrumbsDivider.json b/packages/api-generator/src/locale/en/VBreadcrumbsDivider.json new file mode 100644 index 0000000..2981cbd --- /dev/null +++ b/packages/api-generator/src/locale/en/VBreadcrumbsDivider.json @@ -0,0 +1,5 @@ +{ + "props": { + "divider": "Specifies the dividing character between items." + } +} diff --git a/packages/api-generator/src/locale/en/VBtn.json b/packages/api-generator/src/locale/en/VBtn.json new file mode 100644 index 0000000..196ab42 --- /dev/null +++ b/packages/api-generator/src/locale/en/VBtn.json @@ -0,0 +1,14 @@ +{ + "props": { + "block": "Expands the button to 100% of available space.", + "flat": "Removes the button box shadow. This is different than using the 'flat' variant.", + "icon": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.", + "plain": "Removes the default background change applied when hovering over the button.", + "readonly": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.", + "stacked": "Displays the button as a flex-column.", + "slim": "Reduces padding to 0 8px." + }, + "exposed": { + "group": "Internal representation when used in VBtnToggle." + } +} diff --git a/packages/api-generator/src/locale/en/VBtnGroup.json b/packages/api-generator/src/locale/en/VBtnGroup.json new file mode 100644 index 0000000..b41e5db --- /dev/null +++ b/packages/api-generator/src/locale/en/VBtnGroup.json @@ -0,0 +1,5 @@ +{ + "props": { + "divided": "Add dividers between children [v-btn](/components/buttons) components." + } +} diff --git a/packages/api-generator/src/locale/en/VBtnToggle.json b/packages/api-generator/src/locale/en/VBtnToggle.json new file mode 100644 index 0000000..3892508 --- /dev/null +++ b/packages/api-generator/src/locale/en/VBtnToggle.json @@ -0,0 +1,16 @@ +{ + "props": { + "backgroundColor": "Changes the background-color for the component.", + "borderless": "Removes the group's border.", + "dense": "Reduces the button size and padding.", + "group": "Generally used in [v-toolbar](/components/toolbars) and [v-app-bar](/components/app-bars). Removes background color, border and increases space between the buttons.", + "rounded": "Round edge buttons.", + "shaped": "Applies a large border radius on the top left and bottom right of the card.", + "tile": "Removes the component's border-radius." + }, + "exposed": { + "next": "Activates the next button.", + "prev": "Activates the previous button.", + "select": "Selects a button by index, the second parameter is a boolean to indicate if the button should be selected or not." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendar.json b/packages/api-generator/src/locale/en/VCalendar.json new file mode 100644 index 0000000..f4fd72b --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendar.json @@ -0,0 +1,29 @@ +{ + "props": { + "allowedDates": "Determines which dates are selectable.", + "displayValue": "Value to display for the component, possibly a formatted date.", + "hideHeader": "Determines whether the header is hidden in the calendar view.", + "hideWeekNumber": "Toggles the display of week numbers in a calendar view.", + "intervals": "Total number of intervals in a day view.", + "max": "Maximum date or value that can be selected.", + "min": "Minimum date or value that can be selected.", + "month": "Specifies the month for the calendar view.", + "showAdjacentMonths": "Shows or hides days from adjacent months.", + "type": "Defines the type of calendar view, such as month, week, day, etc.", + "weekdays": "Specifies which days of the week to display.", + "year": "Specifies the year for the calendar view." + }, + "slots": { + "header": "Slot for custom header content." + }, + "events": { + "next": "Emitted when moving to the next time period.", + "prev": "Emitted when moving to the previous time period.", + "updateModelValue": "Event that is emitted when the component’s model changes." + }, + "exposed": { + "daysInMonth": "Provides data about the days in the selected month.", + "daysInWeek": "Provides data about the days in the selected week.", + "genDays": "Generates day objects based on provided dates." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendarDay.json b/packages/api-generator/src/locale/en/VCalendarDay.json new file mode 100644 index 0000000..333e4ac --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendarDay.json @@ -0,0 +1,9 @@ +{ + "props": { + "hideDayHeader": "Determines whether the day header is visible in the calendar day view.", + "intervals": "Specifies the total number of time intervals for the day in the calendar view." + }, + "exposed": { + "intervals": "Computed reference containing details about each interval in the day view." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendarHeader.json b/packages/api-generator/src/locale/en/VCalendarHeader.json new file mode 100644 index 0000000..b7291e8 --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendarHeader.json @@ -0,0 +1,12 @@ +{ + "props": { + "nextIcon": "The icon to use for the next button.", + "prevIcon": "The icon to use for the prev button.", + "viewMode": "The current view mode of the calendar." + }, + "events": { + "click:next": "Event emitted when clicking the next button.", + "click:prev": "Event emitted when clicking the prev button.", + "click:toToday": "Event emitted when clicking the today button." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendarInterval.json b/packages/api-generator/src/locale/en/VCalendarInterval.json new file mode 100644 index 0000000..f15b989 --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendarInterval.json @@ -0,0 +1,16 @@ +{ + "props": { + "day": "Represents the specific day associated with the interval.", + "dayIndex": "Index of the day this interval is a part of, in a week or month view.", + "events": "Array of events specific to this interval.", + "index": "Index or position of the interval in the day view.", + "intervalDivisions": "Number of subdivisions within this interval.", + "intervalDuration": "Duration of this specific interval in minutes.", + "intervalFormat": "Formatting rule for displaying the interval, as a string or function.", + "intervalHeight": "Height of the interval in pixels in the calendar view.", + "intervalStart": "Starting time for this specific interval." + }, + "exposed": { + "interval": "Computed reference for the interval, including label, start and end times, and associated events." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendarIntervalEvent.json b/packages/api-generator/src/locale/en/VCalendarIntervalEvent.json new file mode 100644 index 0000000..044424d --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendarIntervalEvent.json @@ -0,0 +1,10 @@ +{ + "props": { + "allDay": "Indicates whether the event spans the entire day.", + "event": "The event object associated with this calendar interval.", + "interval": "The specific time interval this event is associated with.", + "intervalDivisions": "Number of subdivisions within the interval for this event.", + "intervalDuration": "Duration of the interval in which this event occurs, in minutes.", + "intervalHeight": "Height of the interval in the calendar view, in pixels." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendarMonthDay.json b/packages/api-generator/src/locale/en/VCalendarMonthDay.json new file mode 100644 index 0000000..d1d3e30 --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendarMonthDay.json @@ -0,0 +1,9 @@ +{ + "props": { + "day": "Represents the specific day in the month view of the calendar.", + "events": "Array of events associated with this specific day." + }, + "slots": { + "content": "Slot for custom content related to the day in the month view." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendarMonthly.json b/packages/api-generator/src/locale/en/VCalendarMonthly.json new file mode 100644 index 0000000..cf71cd0 --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendarMonthly.json @@ -0,0 +1,19 @@ +{ + "props": { + "dayFormat": "Formats day of the month string that appears in a day to a specified locale.", + "end": "The ending date on the calendar (inclusive) in the format of `YYYY-MM-DD`. This may be ignored depending on the `type` of the calendar.", + "hideHeader": "If the header at the top of the `day` view should be visible.", + "locale": "The locale of the calendar.", + "localeFirstDayOfYear": "Sets the day that determines the first week of the year, starting with 0 for **Sunday**. For ISO 8601 this should be 4.", + "minWeeks": "The minimum number of weeks to display in the `month` or `week` view.", + "monthFormat": "Formats month string that appears in a day to specified locale.", + "now": "Override the day & time which is considered now. This is in the format of `YYYY-MM-DD hh:mm:ss`. The calendar is styled according to now.", + "shortMonths": "Whether the short versions of a month should be used (Jan vs January).", + "shortWeekdays": "Whether the short versions of a weekday should be used (Mon vs Monday).", + "showMonthOnFirst": "Whether the name of the month should be displayed on the first day of the month.", + "showWeek": "Whether week numbers should be displayed when using the `month` view.", + "start": "The starting date on the calendar (inclusive) in the format of `YYYY-MM-DD`. This may be ignored depending on the `type` of the calendar.", + "weekdayFormat": "Formats day of the week string that appears in the header to specified locale.", + "weekdays": "Specifies which days of the week to display. To display Monday through Friday only, a value of `[1, 2, 3, 4, 5]` can be used. To display a week starting on Monday a value of `[1, 2, 3, 4, 5, 6, 0]` can be used." + } +} diff --git a/packages/api-generator/src/locale/en/VCalendarWeekly.json b/packages/api-generator/src/locale/en/VCalendarWeekly.json new file mode 100644 index 0000000..cf71cd0 --- /dev/null +++ b/packages/api-generator/src/locale/en/VCalendarWeekly.json @@ -0,0 +1,19 @@ +{ + "props": { + "dayFormat": "Formats day of the month string that appears in a day to a specified locale.", + "end": "The ending date on the calendar (inclusive) in the format of `YYYY-MM-DD`. This may be ignored depending on the `type` of the calendar.", + "hideHeader": "If the header at the top of the `day` view should be visible.", + "locale": "The locale of the calendar.", + "localeFirstDayOfYear": "Sets the day that determines the first week of the year, starting with 0 for **Sunday**. For ISO 8601 this should be 4.", + "minWeeks": "The minimum number of weeks to display in the `month` or `week` view.", + "monthFormat": "Formats month string that appears in a day to specified locale.", + "now": "Override the day & time which is considered now. This is in the format of `YYYY-MM-DD hh:mm:ss`. The calendar is styled according to now.", + "shortMonths": "Whether the short versions of a month should be used (Jan vs January).", + "shortWeekdays": "Whether the short versions of a weekday should be used (Mon vs Monday).", + "showMonthOnFirst": "Whether the name of the month should be displayed on the first day of the month.", + "showWeek": "Whether week numbers should be displayed when using the `month` view.", + "start": "The starting date on the calendar (inclusive) in the format of `YYYY-MM-DD`. This may be ignored depending on the `type` of the calendar.", + "weekdayFormat": "Formats day of the week string that appears in the header to specified locale.", + "weekdays": "Specifies which days of the week to display. To display Monday through Friday only, a value of `[1, 2, 3, 4, 5]` can be used. To display a week starting on Monday a value of `[1, 2, 3, 4, 5, 6, 0]` can be used." + } +} diff --git a/packages/api-generator/src/locale/en/VCard.json b/packages/api-generator/src/locale/en/VCard.json new file mode 100644 index 0000000..8ca719a --- /dev/null +++ b/packages/api-generator/src/locale/en/VCard.json @@ -0,0 +1,15 @@ +{ + "props": { + "flat": "Removes the card's elevation.", + "hover": "Applies **4dp** of elevation when hovered (default 2dp). You can find more information on the [elevation page](/styles/elevation).", + "image": "Apply a specific background image to the component.", + "prependIcon": "Prepends a [v-icon](/components/icons/) component to the header." + }, + "slots": { + "actions": "The slot used for the card actions; located at the bottom of the card.", + "image": "The slot used for the card image. This is used with the [image](#props-image) prop." + }, + "events": { + "click": "Emitted when component is clicked - Will trigger component to ripple when clicked unless the `.native` modifier is used." + } +} diff --git a/packages/api-generator/src/locale/en/VCarousel.json b/packages/api-generator/src/locale/en/VCarousel.json new file mode 100644 index 0000000..40f2f15 --- /dev/null +++ b/packages/api-generator/src/locale/en/VCarousel.json @@ -0,0 +1,19 @@ +{ + "props": { + "color": "Applies a color to the navigation dots - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "continuous": "Determines whether carousel is continuous.", + "cycle": "Determines if the carousel should cycle through images.", + "delimiterIcon": "Sets icon for carousel delimiter.", + "hideControls": "Hides the navigation controls (left and right).", + "hideDelimiters": "Hides the carousel's bottom delimiters.", + "hideDelimiterBackground": "Hides the bottom delimiter background.", + "interval": "The duration between image cycles. Requires the **cycle** prop.", + "nextIcon": "The displayed icon for forcing pagination to the next item.", + "prevIcon": "The displayed icon for forcing pagination to the previous item.", + "progress": "Displays a carousel progress bar. Requires the **cycle** prop and **interval**.", + "progressColor": "Applies specified color to progress bar.", + "showArrows": "Displays arrows for next/previous navigation.", + "showArrowsOnHover": "Displays navigation arrows only when the carousel is hovered over.", + "verticalDelimiters": "Displays carousel delimiters vertically." + } +} diff --git a/packages/api-generator/src/locale/en/VCheckbox.json b/packages/api-generator/src/locale/en/VCheckbox.json new file mode 100644 index 0000000..521d96d --- /dev/null +++ b/packages/api-generator/src/locale/en/VCheckbox.json @@ -0,0 +1,18 @@ +{ + "props": { + "column": "Displays radio buttons in column.", + "dark": "Applies the dark theme variant to the component. This will default the components color to _white_ unless you've configured your [application theme](/customization/theme) to **dark** or if you are using the **color** prop on the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).", + "falseIcon": "The icon used when inactive.", + "flat": "Display component without elevation. Default elevation for thumb is 4dp, `flat` resets it.", + "indeterminate": "Sets an indeterminate state for the checkbox.", + "indeterminateIcon": "The icon used when in an indeterminate state.", + "inputValue": "The **v-model** bound value.", + "inset": "Enlarge the `v-switch` track to encompass the thumb.", + "multiple": "Changes expected model to an array.", + "row": "Displays radio buttons in row.", + "trueIcon": "The icon used when active." + }, + "events": { + "change": "Emitted when the input is changed by user interaction." + } +} diff --git a/packages/api-generator/src/locale/en/VCheckboxBtn.json b/packages/api-generator/src/locale/en/VCheckboxBtn.json new file mode 100644 index 0000000..d7fca3e --- /dev/null +++ b/packages/api-generator/src/locale/en/VCheckboxBtn.json @@ -0,0 +1,9 @@ +{ + "props": { + "indeterminate": "Puts the control in an indeterminate state. Used with the [indeterminate-icon](#props-indeterminate-icon) property.", + "indeterminateIcon": "Icon used when the component is in an indeterminate state." + }, + "events": { + "update:indeterminate": "Event that is emitted when the component's indeterminate state changes." + } +} diff --git a/packages/api-generator/src/locale/en/VChip.json b/packages/api-generator/src/locale/en/VChip.json new file mode 100644 index 0000000..0f19ce2 --- /dev/null +++ b/packages/api-generator/src/locale/en/VChip.json @@ -0,0 +1,24 @@ +{ + "props": { + "active": "Determines whether the chip is visible or not.", + "closable": "Adds remove button and then a chip can be closed.", + "close": "Adds remove button.", + "closeIcon": "Change the default icon used for **close** chips.", + "closeLabel": "Text used for *aria-label* on the close button in **close** chips. Can also be customized globally in [Internationalization](/customization/internationalization).", + "draggable": "Makes the chip draggable.", + "filter": "Displays a selection icon when selected.", + "filterIcon": "Change the default icon used for **filter** chips.", + "inputValue": "Controls the **active** state of the item. This is typically used to highlight the component.", + "label": "Applies a medium size border radius.", + "outlined": "Removes background and applies border and text color.", + "pill": "Remove `v-avatar` padding.", + "value": "The value used when a child of a [v-chip-group](/components/chip-groups)." + }, + "events": { + "click": "Emitted when component is clicked, toggles chip if contained in a chip group - Will trigger component to ripple when clicked unless the `.native` modifier is used." + }, + "slots": { + "close": "Slot for icon used in **close** prop.", + "filter": "Slot for icon used in **filter** prop." + } +} diff --git a/packages/api-generator/src/locale/en/VChipGroup.json b/packages/api-generator/src/locale/en/VChipGroup.json new file mode 100644 index 0000000..66adad8 --- /dev/null +++ b/packages/api-generator/src/locale/en/VChipGroup.json @@ -0,0 +1,11 @@ +{ + "props": { + "centerActive": "Forces the selected chip to be centered.", + "column": "Remove horizontal pagination and wrap items as needed.", + "filter": "Applies an checkmark icon in front of every chip for using it like a filter.", + "nextIcon": "Specify the icon to use for the next icon.", + "prependIcon": "This icon used in the prepend slot (if shown).", + "prevIcon": "Specify the icon to use for the prev icon.", + "showArrows": "Force the display of the pagination arrows." + } +} diff --git a/packages/api-generator/src/locale/en/VCol.json b/packages/api-generator/src/locale/en/VCol.json new file mode 100644 index 0000000..18b3b0f --- /dev/null +++ b/packages/api-generator/src/locale/en/VCol.json @@ -0,0 +1,23 @@ +{ + "props": { + "alignSelf": "Applies the [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) css property. Available options are: **start**, **center**, **end**, **auto**, **baseline** and **stretch**.", + "cols": "Sets the default number of columns the component extends. Available options are: **1 -> 12** and **auto**.", + "lg": "Changes the number of columns on large and greater breakpoints.", + "md": "Changes the number of columns on medium and greater breakpoints.", + "offset": "Sets the default offset for the column.", + "offsetLg": "Changes the offset of the component on large and greater breakpoints.", + "offsetMd": "Changes the offset of the component on medium and greater breakpoints.", + "offsetSm": "Changes the offset of the component on small and greater breakpoints.", + "offsetXl": "Changes the offset of the component on extra large and greater breakpoints.", + "offsetXxl": "Changes the offset of the component on extra extra large and greater breakpoints.", + "order": "Sets the default [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) for the column.", + "orderLg": "Changes the order of the component on large and greater breakpoints.", + "orderMd": "Changes the order of the component on medium and greater breakpoints.", + "orderSm": "Changes the order of the component on small and greater breakpoints.", + "orderXl": "Changes the order of the component on extra large and greater breakpoints.", + "orderXxl": "Changes the order of the component on extra extra large and greater breakpoints.", + "sm": "Changes the number of columns on small and greater breakpoints.", + "xl": "Changes the number of columns on extra large and greater breakpoints.", + "xxl": "Changes the number of columns on extra extra large and greater breakpoints." + } +} diff --git a/packages/api-generator/src/locale/en/VColorPicker.json b/packages/api-generator/src/locale/en/VColorPicker.json new file mode 100644 index 0000000..4eb127e --- /dev/null +++ b/packages/api-generator/src/locale/en/VColorPicker.json @@ -0,0 +1,23 @@ +{ + "props": { + "canvasHeight": "Height of canvas.", + "dotSize": "Changes the size of the selection dot on the canvas.", + "flat": "Removes elevation.", + "hideCanvas": "Hides canvas.", + "hideSliders": "Hides sliders.", + "hideInputs": "Hides inputs.", + "hideModeSwitch": "Hides mode switch.", + "mode": "The current selected input type. Syncable with `v-model:mode`.", + "modes": "Sets available input types.", + "showSwatches": "Displays color swatches.", + "swatches": "Sets the available color swatches to select from. 2D array of rows and columns, accepts any color format the picker does.", + "swatchesMaxHeight": "Sets the maximum height of the swatches section.", + "value": "Current color. This can be either a string representing a hex color, or an object representing a RGBA, HSLA, or HSVA value.", + "width": "Sets the width of the color picker." + }, + "events": { + "input": "Selected color. Depending on what you passed to the `value` prop this is either a string or an object.", + "update:color": "Selected color. This is the internal representation of the color, containing all values.", + "update:mode": "Selected mode." + } +} diff --git a/packages/api-generator/src/locale/en/VCombobox.json b/packages/api-generator/src/locale/en/VCombobox.json new file mode 100644 index 0000000..9f4496d --- /dev/null +++ b/packages/api-generator/src/locale/en/VCombobox.json @@ -0,0 +1,12 @@ +{ + "props": { + "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.", + "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.", + "itemChildren": "This property currently has **no effect**.", + "delimiters": "Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys.", + "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props." + }, + "slots": { + "item": "Define a custom item appearance. The root element of this slot must be a **v-list-item** with `v-bind=\"props\"` applied. `props` includes everything required for the default select list behaviour - including title, value, click handlers, virtual scrolling, and anything else that has been added with `item-props`." + } +} diff --git a/packages/api-generator/src/locale/en/VConfirmEdit.json b/packages/api-generator/src/locale/en/VConfirmEdit.json new file mode 100644 index 0000000..61341dd --- /dev/null +++ b/packages/api-generator/src/locale/en/VConfirmEdit.json @@ -0,0 +1,10 @@ +{ + "props": { + "cancelText": "Text for the cancel button", + "okText": "Text for the ok button" + }, + "events": { + "ok": "The event emitted when the user clicks the OK button", + "cancel": "The event emitted when the user clicks the Cancel button" + } +} diff --git a/packages/api-generator/src/locale/en/VContainer.json b/packages/api-generator/src/locale/en/VContainer.json new file mode 100644 index 0000000..b53db48 --- /dev/null +++ b/packages/api-generator/src/locale/en/VContainer.json @@ -0,0 +1,5 @@ +{ + "props": { + "fluid": "Removes viewport maximum-width size breakpoints." + } +} diff --git a/packages/api-generator/src/locale/en/VCounter.json b/packages/api-generator/src/locale/en/VCounter.json new file mode 100644 index 0000000..752eebb --- /dev/null +++ b/packages/api-generator/src/locale/en/VCounter.json @@ -0,0 +1,7 @@ +{ + "props": { + "active": "Determines whether the counter is visible or not.", + "max": "Sets the maximum allowed value.", + "value": "Sets the current counter value." + } +} diff --git a/packages/api-generator/src/locale/en/VDataFooter.json b/packages/api-generator/src/locale/en/VDataFooter.json new file mode 100644 index 0000000..b542f73 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataFooter.json @@ -0,0 +1,24 @@ +{ + "props": { + "disableItemsPerPage": "Disables items-per-page dropdown.", + "disablePagination": "Disables pagination buttons.", + "firstIcon": "First icon.", + "itemsPerPageAllText": "Text for 'All' option in items-per-page dropdown.", + "itemsPerPageOptions": "Array of options to show in the items-per-page dropdown.", + "itemsPerPageText": "Text for items-per-page dropdown.", + "lastIcon": "Last icon.", + "nextIcon": "Next icon.", + "options": "DataOptions.", + "pagination": "DataPagination.", + "prevIcon": "Previous icon.", + "showCurrentPage": "Show current page number between prev/next icons.", + "showFirstLastPage": "Show first/last icons." + }, + "slots": { + "prepend": "Adds content to the empty space in the footer.", + "page-text": "Defines content for the items-per-page text." + }, + "events": { + "update:options": "The `.sync` event for `options` prop." + } +} diff --git a/packages/api-generator/src/locale/en/VDataIterator.json b/packages/api-generator/src/locale/en/VDataIterator.json new file mode 100644 index 0000000..84967bc --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataIterator.json @@ -0,0 +1,53 @@ +{ + "props": { + "customFilter": "Function to filter items.", + "customGroup": "Function used to group items.", + "customSort": "Function used to sort items.", + "disableFiltering": "Disables filtering completely.", + "disablePagination": "Disables pagination completely.", + "disableSort": "Disables sorting completely.", + "expanded": "Array of expanded items. Can be used with `.sync` modifier.", + "footerProps": "See the [`v-data-footer`](/api/v-data-footer) API for more information.", + "groupBy": "Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: `group` or `['group']`. When using an array, only the first element is considered. Can be used with `.sync` modifier.", + "groupDesc": "Changes which direction grouping is done. Can be used with `.sync` modifier.", + "hideDefaultFooter": "Hides default footer.", + "itemKey": "The property on each item that is used as a unique key.", + "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.", + "loading": "If `true` and no items are provided, then a loading text will be shown.", + "loadingText": "Text shown when `loading` is true and no items are provided.", + "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", + "mobileBreakpoint": "Used to set when to toggle between regular table and mobile view.", + "multiSort": "If `true` then one can sort on multiple properties.", + "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", + "noResultsText": "Text shown when `search` prop is used and there are no results.", + "search": "Text input used to filter items.", + "selectableKey": "The property on each item that is used to determine if it is selectable or not.", + "serverItemsLength": "Used only when data is provided by a server. Should be set to the total amount of items available on server so that pagination works correctly.", + "singleExpand": "Changes expansion mode to single expand.", + "singleSelect": "Changes selection mode to single select.", + "sortBy": "Changes which item property (or properties) should be used for sort order. Can be used with `.sync` modifier.", + "sortDesc": "Changes which direction sorting is done. Can be used with `.sync` modifier.", + "value": "Used for controlling selected rows." + }, + "slots": { + "default": "The default slot. Use this to render your items.", + "footer.page-text": "This slot is forwarded to the default footer. See the [`v-data-footer`](/api/v-data-footer) API for more information.", + "footer": "Defines a footer below the items.", + "header": "Defines a header above the items.", + "item": "Slot for each item.", + "loading": "Defines content for when `loading` is true and no items are provided.", + "no-data": "Defines content for when no items are provided.", + "no-results": "Defines content for when `search` is provided but no results are found." + }, + "events": { + "input": "Array of selected items.", + "itemExpanded": "Event emitted when an item is expanded or closed.", + "itemSelected": "Event emitted when an item is selected or deselected.", + "update:expanded": "The `.sync` event for `expanded` prop.", + "update:groupBy": "The `.sync` event for `groupBy` prop.", + "update:itemsPerPage": "The `.sync` event for `itemsPerPage` prop.", + "update:options": "The `.sync` event for `options` prop.", + "update:page": "The `.sync` event for `page` prop.", + "update:sortBy": "The `.sync` event for `sortBy` prop." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json new file mode 100644 index 0000000..2e5bdcd --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -0,0 +1,88 @@ +{ + "props": { + "calculateWidths": "Enables calculation of column widths. `widths` property will be available in select scoped slots.", + "checkboxColor": "Set the color of the checkboxes (showSelect must be used).", + "customFilter": "Function to filter items.", + "customGroup": "Function used to group items.", + "customSort": "Function used to sort items.", + "caption": "Set the caption (using ``).", + "density": "Adjusts the vertical height of the table rows.", + "disableFiltering": "Disables filtering completely.", + "disablePagination": "Disables pagination completely.", + "disableSort": "Disables sorting completely.", + "expandIcon": "Icon used for expand toggle button.", + "fixedHeader": "Fixed header to top of table.", + "groupBy": "Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: `group` or `['group']`. When using an array, only the first element is considered. Can be used with `.sync` modifier.", + "groupDesc": "Changes which direction grouping is done. Can be used with `.sync` modifier.", + "headerProps": "Pass props to the default header. See [`v-data-table-headers` API](/api/v-data-table-headers) for more information.", + "headers": "An array of objects that each describe a header column. See the example below for a definition of all properties.", + "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.", + "height": "Set an explicit height of table.", + "hideDefaultBody": "Hides the default body.", + "hideDefaultHeader": "Hides the default header.", + "hideDefaultFooter": "Hides the default footer. This has no effect on `v-data-table-virtual`.", + "hover": "Adds a hover effects to a table rows.", + "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.", + "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.", + "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.", + "multiSort": "If `true` then one can sort on multiple properties.", + "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.", + "page": "The current displayed page number (1-indexed).", + "search": "Text input used to filter items.", + "serverItemsLength": "Used only when data is provided by a server. Should be set to the total amount of items available on server so that pagination works correctly.", + "showSelect": "Shows the select checkboxes in both the header and rows (if using default rows).", + "showExpand": "Shows the expand toggle in default rows.", + "showGroupBy": "Shows the group by toggle in the header and enables grouped rows.", + "sortBy": "Changes which item property (or properties) should be used for sort order. Can be used with `.sync` modifier.", + "sortDesc": "Changes which direction sorting is done. Can be used with `.sync` modifier.", + "virtualRows": "Virtualizes the rendering of rows. Be aware that you can not use the `body`, `body.prepend` or `body.append` slots with this prop." + }, + "slots": { + "[`item.${string}`]": "Slot for custom rendering of a row cell.", + "body": "Slot to replace the default table ``.", + "body.append": "Appends elements to the end of the default table ``.", + "body.prepend": "Prepends elements to the start of the default table ``.", + "bottom": "Slot for custom rendering of a data table footer.", + "colgroup": "Slot to replace the default rendering of the `` element.", + "foot": "Slot to add a `` element after the ``. Not to be confused with the `footer` slot.", + "expanded-item": "Slot to customize expanded rows.", + "footer": "Slot to add a custom footer.", + "footer.prepend": "Adds content to the empty space in the footer.", + "footer.page-text": "Slot to customize footer page text.", + "group": "Slot to replace the default rendering of grouped rows.", + "group.header": "Slot to customize the default rendering of group headers.", + "group.summary": "Slot to customize the default rendering of group summaries.", + "heading": "Slot to add a custom header.", + "header.": "Slot to customize a specific header column.", + "header.data-table-select": "Slot to replace the default `v-checkbox-btn` in header.", + "item": "Slot to replace the default rendering of a row.", + "item.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.", + "item.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", + "item.": "Slot to customize a specific column.", + "loading": "Defines content for when `loading` is true and no items are provided.", + "no-data": "Defines content for when no items are provided.", + "no-results": "Defines content for when `search` is provided but no results are found.", + "progress": "Slot to replace the default `` component.", + "top": "Slot to add content above the table." + }, + "events": { + "click:row": "Emits when a table row is clicked. This event provides 2 arguments: the first is the native click event, and the second is an object containing the corresponding item for that row. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.", + "contextmenu:row": "Emits when a table row is right-clicked. The item for the row is included. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.", + "dblclick:row": "Emits when a table row is double-clicked. The item for the row is included. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.", + "currentItems": "Emits the items provided via the **items** prop, every time the internal **computedItems** is changed.", + "pageCount": "Emits when the **pageCount** property of the **pagination** prop is updated.", + "pagination": "Emits when something changed to the `pagination` which can be provided via the `pagination` prop.", + "toggleSelectAll": "Emits when the `select-all` checkbox in table header is clicked. This checkbox is enabled by the **show-select** prop.", + "update:expanded": "Emits when the **expanded** property of the **options** prop is updated.", + "update:groupBy": "Emits when the **group-by** property of the **options** property is updated.", + "update:groupDesc": "Emits when the **group-desc** property of the **options** prop is updated.", + "update:itemsPerPage": "Emits when the **items-per-page** property of the **options** prop is updated.", + "update:modelValue": "Emits when the component's model changes.", + "update:multiSort": "Emits when the **multi-sort** property of the **options** prop is updated.", + "update:mustSort": "Emits when the **must-sort** property of the **options** prop is updated.", + "update:options": "Emits when one of the **options** properties is updated.", + "update:page": "Emits when the **page** property of the **options** prop is updated.", + "update:sortBy": "Emits when the **sortBy** property of the **options** prop is updated.", + "update:sortDesc": "Emits when the **sort-desc** property of the **options** prop is updated." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTableFooter.json b/packages/api-generator/src/locale/en/VDataTableFooter.json new file mode 100644 index 0000000..a4a1cb8 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTableFooter.json @@ -0,0 +1,16 @@ +{ + "props": { + "firstIcon": "First icon.", + "firstPageLabel": "Label for first page.", + "itemsPerPageOptions": "Array of options to show in the items-per-page dropdown.", + "itemsPerPageText": "Text for items-per-page dropdown.", + "lastIcon": "Last icon.", + "lastPageLabel": "Label for last page.", + "nextIcon": "Next icon.", + "nextPageLabel": "Label for next page.", + "pageText": "Label for page number.", + "prevIcon": "Previous icon.", + "prevPageLabel": "Label for previous page.", + "showCurrentPage": "Show current page number between prev/next icons." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTableHeader.json b/packages/api-generator/src/locale/en/VDataTableHeader.json new file mode 100644 index 0000000..9ac97c7 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTableHeader.json @@ -0,0 +1,13 @@ +{ + "props": { + "everyItem": "Indicates if all items in table are selected.", + "headers": "Array of header items to display.", + "mobile": "Renders mobile view of headers.", + "options": "Options object. Identical to the one on `v-data-table`.", + "showGroupBy": "Shows group by button.", + "singleSelect": "Toggles rendering of select-all checkbox.", + "someItems": "Indicates if one or more items in table are selected.", + "sortByText": "Sets the label text used by the default sort-by selector when `v-data-table` is rendering the mobile view.", + "sortIcon": "Icon used for sort button." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTableHeaders.json b/packages/api-generator/src/locale/en/VDataTableHeaders.json new file mode 100644 index 0000000..d00ed1a --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTableHeaders.json @@ -0,0 +1,11 @@ +{ + "props": { + "disableSort": "Toggles rendering of sort button.", + "sortAscIcon": "Icon used for ascending sort button.", + "sortDescIcon": "Icon used for descending sort button.", + "sticky": "Sticks the header to the top of the table." + }, + "slots": { + "[`column.${string}`]": "Slot for custom rendering of a column." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTableRow.json b/packages/api-generator/src/locale/en/VDataTableRow.json new file mode 100644 index 0000000..b2e97b4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTableRow.json @@ -0,0 +1,6 @@ +{ + "props": { + "index": "Row index.", + "item": "Data (key, index and column values) of the displayed item." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTableRows.json b/packages/api-generator/src/locale/en/VDataTableRows.json new file mode 100644 index 0000000..65a4178 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTableRows.json @@ -0,0 +1,22 @@ +{ + "props": { + "cellProps": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.", + "loading": "Displays `loading` slot if set to `true`", + "loadingText": "Text shown when the data is loading.", + "multiSort": "Allows sorting by multiple columns.", + "rowProps": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row." + }, + "events": { + "click:row": "Emitted when a row is clicked. Native event is passed as the first argument, row data as the second." + }, + "slots": { + "[`item.${string}]`": "Slot for custom rendering of a column.", + "data-table-group": "Slot for custom rendering of a group.", + "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.", + "expanded-row": "Slot for custom rendering of an expanded row.", + "group-header": "Slot for custom rendering of a group header.", + "item.data-table-expand": "Slot for custom rendering of a row cell with the expand icon.", + "item.data-table-select": "Slot for custom rendering of a row cell with the select checkbox.", + "loading": "Slot for custom rendering of the loading state." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTableServer.json b/packages/api-generator/src/locale/en/VDataTableServer.json new file mode 100644 index 0000000..c4c85b6 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTableServer.json @@ -0,0 +1,39 @@ +{ + "props": { + "itemsLength": "Number of all items." + }, + "slots": { + "[`column.${string}`]": "Slot for custom rendering of a column.", + "[`item.${string}`]": "Slot for custom rendering of a row cell.", + "body": "Slot to replace the default rendering of the `` element.", + "bottom": "Slot to add content below the table.", + "colgroup": "Slot to replace the default rendering of the `` element.", + "column.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", + "column.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.", + "dataTableGroup": "Slot for custom rendering of a group.", + "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.", + "disableSort": "Disables sorting completely.", + "expanded-row": "Slot for custom rendering of an expanded row.", + "footer.prepend": "Adds content to the empty space in the footer.", + "group-header": "Slot for custom rendering of a group header.", + "headers": "Slot to replace the default rendering of the `` element.", + "item": "Slot to replace the default rendering of a row.", + "item.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", + "item.data-table-select": "Slot to replace the default checkbox used when selecting rows.", + "loading": "Defines content for when `loading` is true and no items are provided.", + "tbody": "Slot to replace the default rendering of the `` element.", + "tfoot": "Slot to replace the default rendering of the `` element.", + "thead": "Slot to replace the default rendering of the `` element.", + "top": "Slot to add content above the table." + }, + "events": { + "click:row": "Emits when a table row is clicked. This event provides 2 arguments: the first is the native click event, and the second is an object containing the corresponding item for that row. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.", + "update:expanded": "Emits when the **expanded** property of the **options** prop is updated.", + "update:groupBy": "Emits when the **group-by** property of the **options** property is updated.", + "update:itemsPerPage": "Emits when the **items-per-page** property of the **options** prop is updated.", + "update:modelValue": "Emits when the component's model changes.", + "update:options": "Emits when one of the **options** properties is updated.", + "update:page": "Emits when the **page** property of the **options** prop is updated.", + "update:sortBy": "Emits when the **sort-by** property of the **options** prop is updated." + } +} diff --git a/packages/api-generator/src/locale/en/VDataTableVirtual.json b/packages/api-generator/src/locale/en/VDataTableVirtual.json new file mode 100644 index 0000000..e24b810 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDataTableVirtual.json @@ -0,0 +1,30 @@ +{ + "slots": { + "[`column.${string}`]": "Slot for custom rendering of a column.", + "[`item.${string}`]": "Slot for custom rendering of a row cell.", + "body": "Slot to replace the default rendering of the `` element.", + "bottom": "Slot to add content below the table.", + "colgroup": "Slot to replace the default rendering of the `` element.", + "column.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", + "column.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.", + "data-table-group": "Slot for custom rendering of a group.", + "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.", + "disableSort": "Disables sorting completely.", + "expanded-row": "Slot for custom rendering of an expanded row.", + "group-header": "Slot for custom rendering of a group header.", + "headers": "Slot to replace the default rendering of the `` element.", + "item": "Slot to replace the default rendering of a row.", + "item.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.", + "item.data-table-select": "Slot to replace the default checkbox used when selecting rows.", + "loading": "Defines content for when `loading` is true and no items are provided.", + "top": "Slot to add content above the table" + }, + "events": { + "click:row": "Emits when a table row is clicked. This event provides 2 arguments: the first is the native click event, and the second is an object containing the corresponding item for that row. **NOTE:** will not emit when table rows are defined through a slot such as `item` or `body`.", + "update:expanded": "Emits when the **expanded** property of the **options** prop is updated.", + "update:groupBy": "Emits when the **group-by** property of the **options** property is updated.", + "update:modelValue": "Emits when the component's model changes.", + "update:options": "Emits when one of the **options** properties is updated.", + "update:sortBy": "Emits when the **sort-by** property of the **options** prop is updated." + } +} diff --git a/packages/api-generator/src/locale/en/VDatePicker.json b/packages/api-generator/src/locale/en/VDatePicker.json new file mode 100644 index 0000000..2234f5b --- /dev/null +++ b/packages/api-generator/src/locale/en/VDatePicker.json @@ -0,0 +1,49 @@ +{ + "props": { + "allowedDates": "Restricts which dates can be selected.", + "calendarIcon": "The icon shown in the header when in 'input' **input-mode**.", + "dayFormat": "Allows you to customize the format of the day string that appears in the date table. Called with date (ISO 8601 **date** string) arguments.", + "displayDate": "The date displayed in the picker header.", + "eventColor": "Sets the color for event dot. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date.", + "events": "Array of dates or object defining events or colors or function returning boolean/color/array of colors.", + "expandIcon": "Icon used for **view-mode** toggle.", + "firstDayOfWeek": "Sets the first day of the week, starting with 0 for Sunday.", + "flat": "Removes elevation.", + "format": "Takes a date object and returns it in a specified format.", + "header": "Text shown when no **display-date** is set.", + "headerDateFormat": "Allows you to customize the format of the month string that appears in the header of the calendar. Called with date (ISO 8601 **date** string) arguments.", + "inputMode": "Toggles between showing dates or inputs.", + "locale": "Sets the locale. Accepts a string with a BCP 47 language tag.", + "localeFirstDayOfYear": "Sets the day that determines the first week of the year, starting with 0 for **Sunday**. For ISO 8601 this should be 4.", + "max": "Maximum allowed date/month (ISO 8601 format).", + "min": "Minimum allowed date/month (ISO 8601 format).", + "modeIcon": "Icon displayed next to the current month and year, toggles year selection when clicked.", + "monthFormat": "Formatting function used for displaying months in the months table. Called with date (ISO 8601 **date** string) arguments.", + "multiple": "Allow the selection of multiple dates. The **range** value selects all dates between two selections.", + "nextIcon": "Sets the icon for next month/year button.", + "pickerDate": "Displayed year/month.", + "prevIcon": "Sets the icon for previous month/year button.", + "reactive": "Updates the picker model when changing months/years automatically.", + "readonly": "Makes the picker readonly (doesn't allow to select new date).", + "scrollable": "Allows changing displayed month with mouse scroll.", + "selectedItemsText": "Text used for translating the number of selected dates when using *multiple* prop. Can also be customizing globally in [Internationalization](/customization/internationalization).", + "showCurrent": "Toggles visibility of the current date/month outline or shows the provided date/month as a current.", + "showAdjacentMonths": "Toggles visibility of days from previous and next months.", + "showWeek": "Toggles visibility of the week numbers in the body of the calendar.", + "titleDateFormat": "Allows you to customize the format of the date string that appears in the title of the date picker. Called with date (ISO 8601 **date** string) arguments.", + "type": "Determines the type of the picker - `date` for date picker, `month` for month picker.", + "value": "Date picker model (ISO 8601 format, YYYY-mm-dd or YYYY-mm).", + "viewMode": "Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.", + "weekdayFormat": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Called with date (ISO 8601 **date** string) arguments.", + "width": "Width of the picker.", + "yearFormat": "Allows you to customize the format of the year string that appears in the header of the calendar. Called with date (ISO 8601 **date** string) arguments.", + "yearIcon": "Sets the icon in the year selection button." + }, + "events": { + ":date": "Emitted when the specified DOM event occurs on the date button.", + ":month": "Emitted when the specified DOM event occurs on the month button.", + ":year": "Emitted when the specified DOM event occurs on the year button.", + "change": "Reactive date picker emits `input` even when any part of the date (year/month/day) changes, but `change` event is emitted only when the day (for date pickers) or month (for month pickers) changes. If `range` prop is set, date picker emits `change` when both [from, to] are selected.", + "update:pickerDate": "The `.sync` event for `picker-date` prop." + } +} diff --git a/packages/api-generator/src/locale/en/VDatePickerMonth.json b/packages/api-generator/src/locale/en/VDatePickerMonth.json new file mode 100644 index 0000000..e7697b7 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDatePickerMonth.json @@ -0,0 +1,7 @@ +{ + "props": { + "hideWeekdays": "Hide the days of the week letters.", + "transition": "The transition used when changing months into the future", + "reverseTransition": "The transition used when changing months into the past" + } +} diff --git a/packages/api-generator/src/locale/en/VDefaultsProvider.json b/packages/api-generator/src/locale/en/VDefaultsProvider.json new file mode 100644 index 0000000..be5f9ce --- /dev/null +++ b/packages/api-generator/src/locale/en/VDefaultsProvider.json @@ -0,0 +1,9 @@ +{ + "props": { + "defaults": "Specify new default prop values for components. Keep in mind that this will be merged with previously defined values.", + "disabled": "Turns off all calculations of new default values for improved performance in situations where defaults propagation isn't necessary.", + "reset": "Reset the default values up the nested chain by {n} amount.", + "root": "Force current defaults to match the application root defaults.", + "scoped": "Prevents the ability for default values to be inherited from parent components." + } +} diff --git a/packages/api-generator/src/locale/en/VDialog.json b/packages/api-generator/src/locale/en/VDialog.json new file mode 100644 index 0000000..c5cb77f --- /dev/null +++ b/packages/api-generator/src/locale/en/VDialog.json @@ -0,0 +1,27 @@ +{ + "props": { + "dark": "Applies the dark theme variant to the component. This will default the components color to _white_ unless you've configured your [application theme](/customization/theme) to **dark** or if you are using the **color** prop on the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).", + "fullWidth": "Forces the dialog to expand 100% of available width.", + "fullscreen": "Changes layout for fullscreen display.", + "internalActivator": "Detaches the menu content inside of the component as opposed to the document.", + "light": "Applies the light theme variant to the component.", + "maxWidth": "Sets the maximum width for the component.", + "noClickAnimation": "Disables the bounce effect when clicking outside of a `v-dialog`'s content when using the **persistent** prop.", + "openOnHover": "Designates whether component should activate when its activator is hovered.", + "persistent": "Clicking outside of the element or pressing **esc** key will not deactivate it.", + "retainFocus": "Tab focus will return to the first child of the dialog by default. Disable this when using external tools that require focus such as TinyMCE or vue-clipboard.", + "scrollable": "When set to true, expects a `v-card` and a `v-card-text` component with a designated height. For more information, check out the [scrollable example](/components/dialogs#scrollable)." + }, + "events": { + "click:outside": "Event that fires when clicking outside an active dialog.", + "keydown": "Event that fires when key is pressed. If dialog is active and not using the **persistent** prop, the **esc** key will deactivate it." + }, + "exposed": { + "activatorEl": "Ref to the current activator element.", + "animateClick": "Function invoked when user clicks outside the component and the **persistent** prop is used.", + "contentEl": "Ref to the current content element.", + "globalTop": "Used by activator to determine a components position in the global stack order.", + "localTop": "Used by activator to determine a components position in the local stack order.", + "updateLocation": "Function used for locationStrategy positioning." + } +} diff --git a/packages/api-generator/src/locale/en/VDialogTransition.json b/packages/api-generator/src/locale/en/VDialogTransition.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDialogTransition.json @@ -0,0 +1 @@ +{} diff --git a/packages/api-generator/src/locale/en/VDivider.json b/packages/api-generator/src/locale/en/VDivider.json new file mode 100644 index 0000000..3832169 --- /dev/null +++ b/packages/api-generator/src/locale/en/VDivider.json @@ -0,0 +1,8 @@ +{ + "props": { + "inset": "Adds indentation (72px) for **normal** dividers, reduces max height for **vertical**.", + "length": "Sets the dividers length. Default unit is px.", + "thickness": "Sets the dividers thickness. Default unit is px.", + "vertical": "Displays dividers vertically." + } +} diff --git a/packages/api-generator/src/locale/en/VEmptyState.json b/packages/api-generator/src/locale/en/VEmptyState.json new file mode 100644 index 0000000..7e0a459 --- /dev/null +++ b/packages/api-generator/src/locale/en/VEmptyState.json @@ -0,0 +1,18 @@ +{ + "props": { + "actionText": "The text used for the action button.", + "headline": "A large headline often used for 404 pages.", + "href": "The URL the action button links to.", + "justify": "Control the justification of the text.", + "textWidth": "Sets the width of the text container.", + "to": "The URL the action button links to." + }, + "events": { + "click:action": "Event emitted when the action button is clicked." + }, + "slots": { + "actions": "Slot for the action button.", + "headline": "Slot for the component's headline.", + "media": "Slot for the component's media." + } +} diff --git a/packages/api-generator/src/locale/en/VExpansionPanel.json b/packages/api-generator/src/locale/en/VExpansionPanel.json new file mode 100644 index 0000000..4dedda4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VExpansionPanel.json @@ -0,0 +1,11 @@ +{ + "props": { + "disabled": "Disables the expansion-panel content.", + "readonly": "Makes the expansion-panel content read only.", + "value": "Controls the opened/closed state of content." + }, + "events": { + "change": "Toggles the value of the selected panel.", + "click": "Mouse click event." + } +} diff --git a/packages/api-generator/src/locale/en/VExpansionPanelTitle.json b/packages/api-generator/src/locale/en/VExpansionPanelTitle.json new file mode 100644 index 0000000..c3d385c --- /dev/null +++ b/packages/api-generator/src/locale/en/VExpansionPanelTitle.json @@ -0,0 +1,8 @@ +{ + "props": { + "collapseIcon": "Icon used when the expansion panel is in a collapsable state.", + "expandIcon": "Icon used when the expansion panel is in a expandable state.", + "hideActions": "Hide the expand icon in the content title.", + "static": "Remove title size expansion when selected." + } +} diff --git a/packages/api-generator/src/locale/en/VExpansionPanels.json b/packages/api-generator/src/locale/en/VExpansionPanels.json new file mode 100644 index 0000000..0fcd1a5 --- /dev/null +++ b/packages/api-generator/src/locale/en/VExpansionPanels.json @@ -0,0 +1,14 @@ +{ + "props": { + "accordion": "Removes the margin around open panels.", + "expand": "Leaves the expansion-panel open while selecting another.", + "focusable": "Makes the expansion-panel headers focusable.", + "flat": "Removes the expansion-panel's elevation and borders.", + "hover": "Applies a background-color shift on hover to expansion panel headers.", + "inset": "Makes the expansion-panel open with a inset style.", + "popout": "Makes the expansion-panel open with an popout style.", + "readonly": "Makes the entire expansion-panel read only.", + "tile": "Removes the border-radius.", + "value": "Controls the opened/closed state of content in the expansion-panel. Corresponds to a zero-based index of the currently opened content. If the `multiple` prop (previously `expand` in 1.5.x) is used then it is an array of numbers where each entry corresponds to the index of the opened content. The index order is not relevant." + } +} diff --git a/packages/api-generator/src/locale/en/VFab.json b/packages/api-generator/src/locale/en/VFab.json new file mode 100644 index 0000000..e62d134 --- /dev/null +++ b/packages/api-generator/src/locale/en/VFab.json @@ -0,0 +1,10 @@ +{ + "props": { + "app": "If true, attaches to the closest layout and positions according to the value of **location**.", + "layout": "If true, will effect layout dimensions based on size and position.", + "appear": "Used to control the animation of the FAB.", + "extended": "An alternate style for the FAB that expects text.", + "location": "The location of the fab relative to the layout. Only works when using **app**.", + "offset": "Translates the Fab up or down, depending on if location is set to **top** or **bottom**." + } +} diff --git a/packages/api-generator/src/locale/en/VField.json b/packages/api-generator/src/locale/en/VField.json new file mode 100644 index 0000000..82bc878 --- /dev/null +++ b/packages/api-generator/src/locale/en/VField.json @@ -0,0 +1,36 @@ +{ + "props": { + "appendInnerIcon": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot.", + "baseColor": "Sets the color of the input when it is not focused.", + "centerAffix": "Automatically apply **[singleLine](/api/v-field/#props-single-line)** under the hood, and vertically align **appendInner**, **prependInner**, **clearIcon**, **label** and **input field** in the center.", + "clearIcon": "The icon used when the **clearable** prop is set to true.", + "dirty": "Manually apply the dirty state styling.", + "disabled": "Removes the ability to click or target the input.", + "error": "Puts the input in a manual error state.", + "flat": "Removes box shadow when using a variant with elevation.", + "id": "Sets the DOM id on the component.", + "persistentClear": "Always show the clearable icon when the input is dirty (By default it only shows on hover).", + "prependInnerIcon": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot.", + "reverse": "Reverses the orientation.", + "singleLine": "Label does not move on focus/dirty." + }, + "events": { + "click:append": "Emitted when append icon is clicked.", + "click:appendInner": "Emitted when appended inner icon is clicked.", + "click:clear": "Emitted when clearable icon clicked.", + "click:control": "Emitted when the main input is clicked.", + "click:prepend": "Emitted when prepended icon is clicked.", + "click:prependInner": "Emitted when prepended inner icon is clicked.", + "group:selected": "Event that is emitted when an item is selected within a group.", + "update:focused": "Emitted when the input is focused or blurred" + }, + "slots": { + "append-iInner": "Slot that is appended to the input.", + "clear": "Slot for custom clear icon (displayed when the **clearable** prop is equal to true).", + "label": "The default slot of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.", + "prepend-inner": "Slot that is prepended to the input." + }, + "exposed": { + "controlRef": "Reference to the control element of the field." + } +} diff --git a/packages/api-generator/src/locale/en/VFieldLabel.json b/packages/api-generator/src/locale/en/VFieldLabel.json new file mode 100644 index 0000000..e43150e --- /dev/null +++ b/packages/api-generator/src/locale/en/VFieldLabel.json @@ -0,0 +1,5 @@ +{ + "props": { + "floating": "Elevates the label above the slotted content." + } +} diff --git a/packages/api-generator/src/locale/en/VFileInput.json b/packages/api-generator/src/locale/en/VFileInput.json new file mode 100644 index 0000000..1530cc6 --- /dev/null +++ b/packages/api-generator/src/locale/en/VFileInput.json @@ -0,0 +1,23 @@ +{ + "props": { + "accept": "One or more [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) describing file types to allow.", + "chips": "Changes display of selections to chips.", + "counter": "Displays the number of selected files.", + "counterSizeString": "The text displayed when using the **counter** and **show-size** props. Can also be customized globally on the [internationalization page](/customization/internationalization).", + "counterString": "The text displayed when using the **counter** prop. Can also be customized globally on the [internationalization page](/customization/internationalization).", + "hideInput": "Display the icon only without the input (file names).", + "multiple": "Adds the **multiple** attribute to the input, allowing multiple file selections.", + "showSize": "Sets the displayed size of selected file(s). When using **true** will default to _1000_ displaying (**kB, MB, GB**) while _1024_ will display (**KiB, MiB, GiB**).", + "smallChips": "Changes display of selections to chips with the **small** property.", + "truncateLength": "The length of a filename before it is truncated with ellipsis.", + "value": "A single or array of [File objects](https://developer.mozilla.org/en-US/docs/Web/API/File)." + }, + "slots": { + "counter": "Slot for the input’s counter text.", + "selection": "Slot for defining a custom appearance for selected item(s). Provides the current **index**, **text** (truncated) and [file](https://developer.mozilla.org/en-US/docs/Web/API/File)." + }, + "events": { + "counter": "Creates counter for selected files length. Does not apply any validation.", + "mousedown:control": "Event that is emitted when using mousedown on the main control area." + } +} diff --git a/packages/api-generator/src/locale/en/VFooter.json b/packages/api-generator/src/locale/en/VFooter.json new file mode 100644 index 0000000..80dc1f3 --- /dev/null +++ b/packages/api-generator/src/locale/en/VFooter.json @@ -0,0 +1,5 @@ +{ + "props": { + "app": "Determines the position of the footer. If true, the footer would be given a fixed position at the bottom of the viewport. If false, the footer is set to the bottom of the page." + } +} diff --git a/packages/api-generator/src/locale/en/VForm.json b/packages/api-generator/src/locale/en/VForm.json new file mode 100644 index 0000000..660ad55 --- /dev/null +++ b/packages/api-generator/src/locale/en/VForm.json @@ -0,0 +1,16 @@ +{ + "events": { + "submit": "Emitted when form is submitted.", + "update:modelValue": "Event emitted when the form's validity changes." + }, + "exposed": { + "errors": "Contains all current form input errors.", + "isDisabled": "Indicates if form is disabled or not.", + "isReadonly": "Indicates if form is readonly or not.", + "isValidating": "Indicates if form is currently being validated or not.", + "items": "Array of all registered inputs.", + "reset": "Resets validation of all registered inputs, and clears their values.", + "resetValidation": "Resets validation of all registered inputs without modifying their values.", + "validate": "Validates all registered inputs." + } +} diff --git a/packages/api-generator/src/locale/en/VHover.json b/packages/api-generator/src/locale/en/VHover.json new file mode 100644 index 0000000..180e470 --- /dev/null +++ b/packages/api-generator/src/locale/en/VHover.json @@ -0,0 +1,5 @@ +{ + "props": { + "disabled": "Removes hover functionality." + } +} diff --git a/packages/api-generator/src/locale/en/VImg.json b/packages/api-generator/src/locale/en/VImg.json new file mode 100644 index 0000000..3519c53 --- /dev/null +++ b/packages/api-generator/src/locale/en/VImg.json @@ -0,0 +1,28 @@ +{ + "props": { + "alt": "Alternate text for screen readers. Leave empty for decorative images.", + "aspectRatio": "Calculated as `width/height`, so for a 1920x1080px image this will be `1.7778`. Will be calculated automatically if omitted.", + "cover": "Resizes the background image to cover the entire container.", + "draggable": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable).", + "lazySrc": "Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied. \nNOTE: This prop has no effect unless either `height` or `aspect-ratio` are provided.", + "crossorigin": "Specify that images should be fetched with CORS enabled [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin)", + "position": "Applies [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) styles to the image and placeholder elements.", + "referrerpolicy": "Define which referrer is sent when fetching the resource [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy)", + "options": "Options that are passed to the [Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) constructor.", + "sizes": "For use with `srcset`, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).", + "src": "The image URL. This prop is mandatory.", + "srcset": "A set of alternate images to use based on device size. [Read more...](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).", + "transition": "The transition to use when switching from `lazy-src` to `src`. Can be one of the [built in](/styles/transitions/) or custom transition.", + "gradient": "The gradient to apply to the image. Only supports [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) syntax, anything else should be done with classes." + }, + "slots": { + "placeholder": "Display an overlay while the image is loading.", + "error": "Will be shown if the image fails to load, replacing the placeholder slot.", + "sources": "A list of `` elements. If this slot is used v-img will render a `` instead of ``." + }, + "events": { + "error": "Emitted if the image fails to load.", + "load": "Emitted when the image is loaded.", + "loadstart": "Emitted when the image starts to load." + } +} diff --git a/packages/api-generator/src/locale/en/VInfiniteScroll.json b/packages/api-generator/src/locale/en/VInfiniteScroll.json new file mode 100644 index 0000000..f6b3a88 --- /dev/null +++ b/packages/api-generator/src/locale/en/VInfiniteScroll.json @@ -0,0 +1,19 @@ +{ + "props": { + "direction": "Specifies if scroller is **vertical** or **horizontal**.", + "emptyText": "Text shown when there is no more content to load.", + "loadMoreText": "Text shown in default load more button, when in manual mode.", + "margin": "Value sent to the intersection observer. Will make the observer trigger earlier, by the margin (px) value supplied.", + "mode": "Specifies if content should load automatically when scrolling (**intersect**) or manually (**manual**).", + "side": "Specifies the side where new content should appear. Either the **start**, **end**, or **both** sides." + }, + "slots": { + "empty": "Shown when load returned status 'empty'.", + "error": "Shown when load returned status 'error'.", + "load-more": "Shown when scrolled to either side of the content, in manual mode.", + "loading": "Shown when content is loading." + }, + "events": { + "load": "Emitted when reaching the start / end threshold, or if triggered when using manual mode." + } +} diff --git a/packages/api-generator/src/locale/en/VInput.json b/packages/api-generator/src/locale/en/VInput.json new file mode 100644 index 0000000..d6f181d --- /dev/null +++ b/packages/api-generator/src/locale/en/VInput.json @@ -0,0 +1,34 @@ +{ + "props": { + "backgroundColor": "Changes the background-color of the input.", + "centerAffix": "Vertically align **append** and **prepend** in the center.", + "direction": "Changes the direction of the input.", + "hideDetails": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display.", + "hideSpinButtons": "Hides spin buttons on the input when type is set to `number`.", + "dense": "Reduces the input height.", + "height": "Sets the height of the input.", + "hint": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.", + "id": "Sets the DOM id on the component.", + "loading": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.", + "persistentHint": "Forces [hint](#props-hint) to always be visible.", + "placeholder": "Sets the input's placeholder text.", + "prependIcon": "Prepends an icon to the component, uses the same syntax as `v-icon`.", + "required": "Designates the input as required; Adds an asterisk to the end of the label; Does not perform any validation.", + "tabindex": "Tab index of input.", + "toggleKeys": "Array of key codes that will toggle the input (if it supports toggling).", + "value": "The input's value." + }, + "events": { + "change": "Emitted when the input is changed by user interaction.", + "click": "Emitted when input is clicked.", + "click:append": "Emitted when appended icon is clicked.", + "click:prepend": "Emitted when prepended icon is clicked.", + "mousedown": "Emitted when click is pressed.", + "mouseup": "Emitted when click is released." + }, + "exposed": { + "reset": "Resets the input value.", + "resetValidation": "Resets validation of the input without modifying its value.", + "validate": "Validates the input's value." + } +} diff --git a/packages/api-generator/src/locale/en/VItemGroup.json b/packages/api-generator/src/locale/en/VItemGroup.json new file mode 100644 index 0000000..46ef1f6 --- /dev/null +++ b/packages/api-generator/src/locale/en/VItemGroup.json @@ -0,0 +1,5 @@ +{ + "props": { + "selectedClass": "Configure the selected CSS class. This class will be available in `v-item` default scoped slot." + } +} diff --git a/packages/api-generator/src/locale/en/VLabel.json b/packages/api-generator/src/locale/en/VLabel.json new file mode 100644 index 0000000..ecc2cd8 --- /dev/null +++ b/packages/api-generator/src/locale/en/VLabel.json @@ -0,0 +1,5 @@ +{ + "props": { + "clickable": "Changes the cursor to a pointer when the mouse is over the element." + } +} diff --git a/packages/api-generator/src/locale/en/VLayout.json b/packages/api-generator/src/locale/en/VLayout.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VLayout.json @@ -0,0 +1 @@ +{} diff --git a/packages/api-generator/src/locale/en/VLayoutItem.json b/packages/api-generator/src/locale/en/VLayoutItem.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VLayoutItem.json @@ -0,0 +1 @@ +{} diff --git a/packages/api-generator/src/locale/en/VLazy.json b/packages/api-generator/src/locale/en/VLazy.json new file mode 100644 index 0000000..fba8fb4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VLazy.json @@ -0,0 +1,5 @@ +{ + "props": { + "options": "Options that are passed to the [Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) constructor." + } +} diff --git a/packages/api-generator/src/locale/en/VList.json b/packages/api-generator/src/locale/en/VList.json new file mode 100644 index 0000000..f2db19c --- /dev/null +++ b/packages/api-generator/src/locale/en/VList.json @@ -0,0 +1,12 @@ +{ + "props": { + "itemType": "Designates the key on the supplied items that is used for determining the nodes type.", + "disabled": "Puts all children inputs into a disabled state.", + "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler.", + "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.", + "link": "Applies `v-list-item` hover styles. Useful when using the item is an _activator_.", + "nav": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**.", + "subheader": "Removes the top padding from `v-list-subheader` components. When used as a **String**, renders a subheader for you.", + "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation." + } +} diff --git a/packages/api-generator/src/locale/en/VListGroup.json b/packages/api-generator/src/locale/en/VListGroup.json new file mode 100644 index 0000000..798eb02 --- /dev/null +++ b/packages/api-generator/src/locale/en/VListGroup.json @@ -0,0 +1,15 @@ +{ + "props": { + "disabled": "Puts all children inputs into a disabled state.", + "collapseIcon": "Icon to display when the list item is expanded.", + "expandIcon": "Icon to display when the list item is collapsed.", + "group": "Assign a route namespace. Accepts a string or regexp for determining active state.", + "noAction": "Removes left padding assigned for action icons from group items.", + "prependIcon": "Prepends an icon to the component, uses the same syntax as `v-icon`.", + "subgroup": "Designate the component as nested list group.", + "value": "Expands / Collapse the list-group." + }, + "exposed": { + "isOpen": "Returns the current state of the list-group." + } +} diff --git a/packages/api-generator/src/locale/en/VListItem.json b/packages/api-generator/src/locale/en/VListItem.json new file mode 100644 index 0000000..61d1733 --- /dev/null +++ b/packages/api-generator/src/locale/en/VListItem.json @@ -0,0 +1,12 @@ +{ + "props": { + "active": "Controls the **active** state of the item. This is typically used to highlight the component.", + "color": "Applies specified color to the control when in an **active** state or **input-value** is **true** - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors),", + "contained": "Changes the component style by changing how color is applied to the background.", + "title": "Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with `v-bind:title.attr` instead.", + "value": "The value used for selection.", + "lines": "The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.", + "nav": "Reduces the width v-list-item takes up as well as adding a border radius.", + "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation." + } +} diff --git a/packages/api-generator/src/locale/en/VListItemAvatar.json b/packages/api-generator/src/locale/en/VListItemAvatar.json new file mode 100644 index 0000000..4b0f4af --- /dev/null +++ b/packages/api-generator/src/locale/en/VListItemAvatar.json @@ -0,0 +1,5 @@ +{ + "props": { + "horizontal": "Uses an alternative horizontal style." + } +} diff --git a/packages/api-generator/src/locale/en/VListItemGroup.json b/packages/api-generator/src/locale/en/VListItemGroup.json new file mode 100644 index 0000000..60c4207 --- /dev/null +++ b/packages/api-generator/src/locale/en/VListItemGroup.json @@ -0,0 +1,9 @@ +{ + "props": { + "value": "Sets the active list-item inside the list-group." + }, + "events": { + "change": "Emitted when the component value is changed by user interaction.", + "click": "Emitted when component is clicked - Will trigger component to ripple when clicked unless the `.native` modifier is used." + } +} diff --git a/packages/api-generator/src/locale/en/VListSubheader.json b/packages/api-generator/src/locale/en/VListSubheader.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VListSubheader.json @@ -0,0 +1 @@ +{} diff --git a/packages/api-generator/src/locale/en/VLocaleProvider.json b/packages/api-generator/src/locale/en/VLocaleProvider.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VLocaleProvider.json @@ -0,0 +1 @@ +{} diff --git a/packages/api-generator/src/locale/en/VMain.json b/packages/api-generator/src/locale/en/VMain.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VMain.json @@ -0,0 +1 @@ +{} diff --git a/packages/api-generator/src/locale/en/VMenu.json b/packages/api-generator/src/locale/en/VMenu.json new file mode 100644 index 0000000..1c722b3 --- /dev/null +++ b/packages/api-generator/src/locale/en/VMenu.json @@ -0,0 +1,18 @@ +{ + "props": { + "attach": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator.", + "id": "The unique identifier of the component.", + "closeOnClick": "Designates if menu should close on outside-activator click.", + "closeOnContentClick": "Designates if menu should close when its content is clicked.", + "closeDelay": "Milliseconds to wait before closing component. Only works with the **open-on-hover** prop.", + "disableKeys": "Removes all keyboard interaction.", + "internalActivator": "Detaches the menu content inside of the component as opposed to the document.", + "minWidth": "Sets the minimum width for the component. Use `auto` to use the activator width.", + "offsetX": "Offset the menu on the x-axis. Works in conjunction with direction left/right.", + "offsetY": "Offset the menu on the y-axis. Works in conjunction with direction top/bottom.", + "openDelay": "Milliseconds to wait before opening component. Only works with the **open-on-hover** prop.", + "openOnClick": "Designates whether menu should open on activator click.", + "openOnHover": "Designates whether menu should open on activator hover.", + "returnValue": "The value that is updated when the menu is closed - must be primitive. Dot notation is supported." + } +} diff --git a/packages/api-generator/src/locale/en/VMessages.json b/packages/api-generator/src/locale/en/VMessages.json new file mode 100644 index 0000000..c4f979c --- /dev/null +++ b/packages/api-generator/src/locale/en/VMessages.json @@ -0,0 +1,6 @@ +{ + "props": { + "active": "Determines whether the messages are visible or not.", + "message": "Display a single message." + } +} diff --git a/packages/api-generator/src/locale/en/VNavigationDrawer.json b/packages/api-generator/src/locale/en/VNavigationDrawer.json new file mode 100644 index 0000000..24ac310 --- /dev/null +++ b/packages/api-generator/src/locale/en/VNavigationDrawer.json @@ -0,0 +1,33 @@ +{ + "props": { + "bottom": "Expands from the bottom of the screen on mobile devices.", + "clipped": "A clipped drawer rests under the application toolbar. **Note:** requires the **clipped-left** or **clipped-right** prop on `v-app-bar` to work as intended.", + "disableResizeWatcher": "Prevents the automatic opening or closing of the drawer when resized, based on whether the device is mobile or desktop.", + "disableRouteWatcher": "Disables opening of navigation drawer when route changes.", + "expandOnHover": "Collapses the drawer to a **mini-variant** until hovering with the mouse.", + "floating": "A floating drawer has no visible container (no border-right).", + "height": "Sets the height of the navigation drawer.", + "image": "Apply a specific background image to the component.", + "miniVariantWidth": "Designates the width assigned when the `mini` prop is turned on.", + "miniVariant": "Condenses navigation drawer width, also accepts the **.sync** modifier. With this, the drawer will re-open when clicking it.", + "mobileBreakpoint": "Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the `temporary` prop, or activate the `bottom` prop when the breakpoint value is met. Setting the value to `0` will disable this functionality.", + "permanent": "The drawer remains visible regardless of screen size.", + "rail": "Sets the component width to the **rail-width** value.", + "railWidth": "Sets the width for the component when `rail` is enabled.", + "right": "Places the navigation drawer on the right.", + "scrim": "Determines whether an overlay is used when a **temporary** drawer is open. Accepts true/false to enable background, and string to define color.", + "temporary": "A temporary drawer sits above its application and uses a scrim (overlay) to darken the background.", + "touchless": "Disable mobile touch functionality.", + "value": "Controls whether the component is visible or hidden.", + "location": "Controls the edge of the screen the drawer is attached to." + }, + "slots": { + "append": "A slot at the bottom of the drawer.", + "image": "Used to modify `v-img` properties when using the **src** prop.", + "prepend": "A slot at the top of the drawer" + }, + "events": { + "transitionend": "Emits event object when transition is complete.", + "update:rail": "Event that is emitted when the rail model changes." + } +} diff --git a/packages/api-generator/src/locale/en/VOtpInput.json b/packages/api-generator/src/locale/en/VOtpInput.json new file mode 100644 index 0000000..2bf72d7 --- /dev/null +++ b/packages/api-generator/src/locale/en/VOtpInput.json @@ -0,0 +1,18 @@ +{ + "props": { + "autofocus": "Automatically focuses the first input on page load", + "divider": "Specifies the dividing character between items.", + "focusAll": "Puts all inputs into a focus state when any are focused", + "length": "The OTP field's length.", + "placeholder": "Sets the input’s placeholder text.", + "type": "Supported types: `text`, `password`, `number`." + }, + "events": { + "finish": "Emitted when the input is filled completely and cursor is blurred." + }, + "exposed": { + "blur": "Forces the input to lose focus.", + "focus": "Focuses the first field in the input", + "reset": "Reset's the input model to an empty array" + } +} diff --git a/packages/api-generator/src/locale/en/VOverflowBtn.json b/packages/api-generator/src/locale/en/VOverflowBtn.json new file mode 100644 index 0000000..a358d0b --- /dev/null +++ b/packages/api-generator/src/locale/en/VOverflowBtn.json @@ -0,0 +1,8 @@ +{ + "props": { + "editable": "Creates an editable button.", + "overflow": "Creates an overflow button.", + "persistentPlaceholder": "Forces label to always be visible.", + "segmented": "Creates a segmented button." + } +} diff --git a/packages/api-generator/src/locale/en/VOverlay-activator.json b/packages/api-generator/src/locale/en/VOverlay-activator.json new file mode 100644 index 0000000..7cba7c6 --- /dev/null +++ b/packages/api-generator/src/locale/en/VOverlay-activator.json @@ -0,0 +1,13 @@ +{ + "props": { + "activator": "Explicitly sets the overlay's activator.", + "activatorProps": "Apply custom properties to the activator.", + "contentProps": "Apply custom properties to the content.", + "closeOnContentClick": "Closes component when you click on its content.", + "location": "Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..", + "openOnClick": "Activate the component when the activator is clicked.", + "openOnFocus": "Activate the component when the activator is focused.", + "openOnHover": "Activate the component when the activator is hovered.", + "target": "For locationStrategy=\"connected\", specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default." + } +} diff --git a/packages/api-generator/src/locale/en/VOverlay-location-strategies.json b/packages/api-generator/src/locale/en/VOverlay-location-strategies.json new file mode 100644 index 0000000..80f93d4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VOverlay-location-strategies.json @@ -0,0 +1,6 @@ +{ + "props": { + "locationStrategy": "A function used to specifies how the component should position relative to its activator.", + "offset": "A single value that offsets content away from the target based upon what side it is on." + } +} diff --git a/packages/api-generator/src/locale/en/VOverlay-scroll-strategies.json b/packages/api-generator/src/locale/en/VOverlay-scroll-strategies.json new file mode 100644 index 0000000..c85647b --- /dev/null +++ b/packages/api-generator/src/locale/en/VOverlay-scroll-strategies.json @@ -0,0 +1,5 @@ +{ + "props": { + "scrollStrategy": "Strategy used when the component is activate and user scrolls." + } +} diff --git a/packages/api-generator/src/locale/en/VOverlay.json b/packages/api-generator/src/locale/en/VOverlay.json new file mode 100644 index 0000000..36cd8a8 --- /dev/null +++ b/packages/api-generator/src/locale/en/VOverlay.json @@ -0,0 +1,17 @@ +{ + "props": { + "absolute": "Applies **position: absolute** to the content element.", + "attach": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default.", + "closeOnBack": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing.", + "contained": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.).", + "noClickAnimation": "Disables the bounce effect when clicking outside of the content element when using the persistent prop.", + "opacity": "Sets the overlay opacity.", + "persistent": "Clicking outside of the element or pressing esc key will not deactivate it.", + "scrim": "Accepts true/false to enable background, and string to define color.", + "zIndex": "The z-index used for the component." + }, + "events": { + "click:outside": "Event that fires when clicking outside an active overlay.", + "afterLeave": "Event that fires after the overlay has finished transitioning out." + } +} diff --git a/packages/api-generator/src/locale/en/VPagination.json b/packages/api-generator/src/locale/en/VPagination.json new file mode 100644 index 0000000..2c222a1 --- /dev/null +++ b/packages/api-generator/src/locale/en/VPagination.json @@ -0,0 +1,33 @@ +{ + "props": { + "ariaLabel": "Label for the root element.", + "color": "Applies specified color to the selected page button - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "currentPageAriaLabel": "Label for the currently selected page.", + "ellipsis": "Text to show between page buttons when truncating the list.", + "firstAriaLabel": "Label for the go to first button.", + "firstIcon": "The icon to use for the first button.", + "lastAriaLabel": "Label for the go to last button.", + "lastIcon": "The icon to use for the last button.", + "length": "The number of pages.", + "nextAriaLabel": "Label for the next button.", + "nextIcon": "The icon to use for the next button.", + "pageAriaLabel": "Label for each page button.", + "prevIcon": "The icon to use for the prev button.", + "previousAriaLabel": "Label for the previous button.", + "showFirstLastPage": "Show buttons for going to first and last page.", + "start": "Specify the starting page.", + "totalVisible": "Specify the total visible pagination numbers." + }, + "slots": { + "first": "Define a custom appearance for the first button.", + "last": "Define a custom appearance for the last button.", + "next": "Define a custom appearance for the next button.", + "prev": "Define a custom appearance for the previous button." + }, + "events": { + "first": "Emitted when clicking on go to first button.", + "last": "Emitted when clicking on go to last button.", + "next": "Emitted when clicking on go to next button.", + "prev": "Emitted when clicking on go to previous button." + } +} diff --git a/packages/api-generator/src/locale/en/VParallax.json b/packages/api-generator/src/locale/en/VParallax.json new file mode 100644 index 0000000..832d1d0 --- /dev/null +++ b/packages/api-generator/src/locale/en/VParallax.json @@ -0,0 +1,7 @@ +{ + "props": { + "alt": "Attaches an alt property to the parallax image.", + "src": "The image to parallax.", + "srcset": "A set of alternate images to use based on device size. [Read more...](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset)." + } +} diff --git a/packages/api-generator/src/locale/en/VPicker.json b/packages/api-generator/src/locale/en/VPicker.json new file mode 100644 index 0000000..0e720d6 --- /dev/null +++ b/packages/api-generator/src/locale/en/VPicker.json @@ -0,0 +1,6 @@ +{ + "props": { + "landscape": "Puts the picker into landscape mode.", + "hideHeader": "Hide the picker header." + } +} diff --git a/packages/api-generator/src/locale/en/VProgressCircular.json b/packages/api-generator/src/locale/en/VProgressCircular.json new file mode 100644 index 0000000..6044a2b --- /dev/null +++ b/packages/api-generator/src/locale/en/VProgressCircular.json @@ -0,0 +1,10 @@ +{ + "props": { + "indeterminate": "Constantly animates, use when loading progress is unknown. If set to the string `'disable-shrink'` it will use a simpler animation that does not run on the main thread.", + "modelValue": "The percentage value for current progress.", + "query": "Animates like **indeterminate** prop but inverse.", + "rotate": "Rotates the circle start point in degrees.", + "size": "Sets the diameter of the circle in pixels.", + "width": "Sets the stroke of the circle in pixels." + } +} diff --git a/packages/api-generator/src/locale/en/VProgressLinear.json b/packages/api-generator/src/locale/en/VProgressLinear.json new file mode 100644 index 0000000..07f0f12 --- /dev/null +++ b/packages/api-generator/src/locale/en/VProgressLinear.json @@ -0,0 +1,23 @@ +{ + "props": { + "absolute": "Applies position: absolute to the component.", + "active": "Reduce the height to 0, hiding component.", + "bgOpacity": "Background opacity, if null it defaults to 0.3 if background color is not specified or 1 otherwise.", + "bottom": "Aligns the component towards the bottom.", + "bufferColor": "Sets the color of the buffer bar.", + "bufferOpacity": "Set the opacity of the buffer bar.", + "bufferValue": "The percentage value for the buffer.", + "clickable": "Clicking on the progress track will automatically set the value.", + "indeterminate": "Constantly animates, use when loading progress is unknown.", + "max": "Sets the maximum value the progress can reach.", + "opacity": "Set the opacity of the progress bar.", + "reverse": "Displays reversed progress (right to left in LTR mode and left to right in RTL).", + "roundedBar": "Applies a border radius to the progress bar.", + "stream": "An alternative style for portraying loading that works in tandem with **buffer-value**.", + "striped": "Adds a stripe background to the filled portion of the progress component.", + "top": "Aligns the content towards the top." + }, + "slots": { + "default": "Provides the current value of the component." + } +} diff --git a/packages/api-generator/src/locale/en/VRadio.json b/packages/api-generator/src/locale/en/VRadio.json new file mode 100644 index 0000000..0766a1f --- /dev/null +++ b/packages/api-generator/src/locale/en/VRadio.json @@ -0,0 +1,10 @@ +{ + "props": { + "falseIcon": "The icon used when inactive.", + "trueIcon": "The icon used when active." + }, + "events": { + "change": "Emitted when the input is changed by user interaction.", + "click": "Emitted when input is clicked. **Note:** the **change** event should be used instead of **click** when monitoring state change." + } +} diff --git a/packages/api-generator/src/locale/en/VRadioGroup.json b/packages/api-generator/src/locale/en/VRadioGroup.json new file mode 100644 index 0000000..d72d0d2 --- /dev/null +++ b/packages/api-generator/src/locale/en/VRadioGroup.json @@ -0,0 +1,9 @@ +{ + "props": { + "column": "Displays radio buttons in column.", + "inline": "Displays radio buttons in row." + }, + "events": { + "change": "Emitted when the input is changed by user interaction." + } +} diff --git a/packages/api-generator/src/locale/en/VRangeSlider.json b/packages/api-generator/src/locale/en/VRangeSlider.json new file mode 100644 index 0000000..3e06273 --- /dev/null +++ b/packages/api-generator/src/locale/en/VRangeSlider.json @@ -0,0 +1,14 @@ +{ + "props": { + "strict": "Disallows dragging the ending thumb past the starting thumb and vice versa." + + }, + "slots": { + "thumb-label": "Slot for the thumb label.", + "tick-label": "Slot for the tick label." + }, + "events": { + "end": "Slider value emitted at the end of slider movement.", + "start": "Slider value emitted at start of slider movement." + } +} diff --git a/packages/api-generator/src/locale/en/VRating.json b/packages/api-generator/src/locale/en/VRating.json new file mode 100644 index 0000000..8909cf2 --- /dev/null +++ b/packages/api-generator/src/locale/en/VRating.json @@ -0,0 +1,19 @@ +{ + "props": { + "ariaLabel": "The **aria-label** used for each item.", + "clearable": "Allows for the component to be cleared by clicking on the current value.", + "emptyIcon": "The icon displayed when empty.", + "fullIcon": "The icon displayed when full.", + "itemLabels": "Array of labels to display next to each item..", + "itemLabelPosition": "Position of item labels. Accepts 'top' and 'bottom'.", + "halfIcon": "The icon displayed when half (requires **half-increments** prop).", + "halfIncrements": "Allows the selection of half increments.", + "hover": "Provides visual feedback when hovering over icons.", + "length": "The amount of items to show.", + "readonly": "Removes all hover effects and pointer events." + }, + "slots": { + "item": "The slot for each item.", + "item-label": "The slot for each item label." + } +} diff --git a/packages/api-generator/src/locale/en/VResponsive.json b/packages/api-generator/src/locale/en/VResponsive.json new file mode 100644 index 0000000..e899c62 --- /dev/null +++ b/packages/api-generator/src/locale/en/VResponsive.json @@ -0,0 +1,7 @@ +{ + "props": { + "aspectRatio": "Sets a base aspect ratio, calculated as width/height. This will only set a **minimum** height, the component can still grow if it has a lot of content.", + "contentClass": "Apply a custom class to the internal content element.", + "inline": "Display as an inline element instead of a block, also disables flex-grow." + } +} diff --git a/packages/api-generator/src/locale/en/VRow.json b/packages/api-generator/src/locale/en/VRow.json new file mode 100644 index 0000000..6185af8 --- /dev/null +++ b/packages/api-generator/src/locale/en/VRow.json @@ -0,0 +1,24 @@ +{ + "props": { + "align": "Applies the [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) css property. Available options are: **start**, **center**, **end**, **baseline** and **stretch**.", + "alignLg": "Changes the **align-items** property on large and greater breakpoints.", + "alignMd": "Changes the **align-items** property on medium and greater breakpoints.", + "alignSm": "Changes the **align-items** property on small and greater breakpoints.", + "alignXl": "Changes the **align-items** property on extra large and greater breakpoints.", + "alignXxl": "Changes the **align-items** property on extra extra large and greater breakpoints.", + "alignContent": "Applies the [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) css property. Available options are: **start**, **center**, **end**, **space-between**, **space-around** and **stretch**.", + "alignContentLg": "Changes the **align-content** property on large and greater breakpoints.", + "alignContentMd": "Changes the **align-content** property on medium and greater breakpoints.", + "alignContentSm": "Changes the **align-content** property on small and greater breakpoints.", + "alignContentXl": "Changes the **align-content** property on extra large and greater breakpoints.", + "alignContentXxl": "Changes the **align-content** property on extra extra large and greater breakpoints.", + "dense": "Reduces the gutter between `v-col`s.", + "justify": "Applies the [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) css property. Available options are: **start**, **center**, **end**, **space-between** and **space-around**.", + "justifyLg": "Changes the **justify-content** property on large and greater breakpoints.", + "justifyMd": "Changes the **justify-content** property on medium and greater breakpoints.", + "justifySm": "Changes the **justify-content** property on small and greater breakpoints.", + "justifyXl": "Changes the **justify-content** property on extra large and greater breakpoints.", + "justifyXxl": "Changes the **justify-content** property on extra extra large and greater breakpoints.", + "noGutters": "Removes the gutter between `v-col`s." + } +} diff --git a/packages/api-generator/src/locale/en/VSelect.json b/packages/api-generator/src/locale/en/VSelect.json new file mode 100644 index 0000000..b350a1a --- /dev/null +++ b/packages/api-generator/src/locale/en/VSelect.json @@ -0,0 +1,32 @@ +{ + "props": { + "autocomplete": "Filter the items in the list based on user input.", + "cacheItems": "Keeps a local _unique_ copy of all items that have been passed through the **items** prop.", + "chips": "Changes display of selections to chips.", + "closableChips": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.", + "combobox": "The single select variant of **tags**.", + "hideSelected": "Do not display in the select menu items that are already selected.", + "itemColor": "Sets color of selected items.", + "itemChildren": "This property currently has **no effect**.", + "itemDisabled": "Set property of **items**'s disabled value.", + "items": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props.", + "itemText": "Set property of **items**'s title value.", + "itemValue": "Set property of **items**'s value - **must be primitive**. Dot notation is supported. **Note:** This is currently not supported with `v-combobox` [GitHub Issue](https://github.com/vuetifyjs/vuetify/issues/5479).", + "minWidth": "Sets the minimum width of the select's `v-menu` content.", + "multiple": "Changes select to multiple. Accepts array for value.", + "multiLine": "Causes label to float when the select component is focused or dirty.", + "openOnClear": "When using the **clearable** prop, once cleared, the select menu will either open or stay open, depending on the current state.", + "overflow": "Creates an overflow button - [spec](https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons).", + "searchInput": "Use the **.sync** modifier to catch user input from the search input.", + "segmented": "Creates a segmented button - [spec](https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons).", + "smallChips": "Changes display of selections to chips with the **small** property.", + "tags": "Tagging functionality, allows the user to create new values not available from the **items** prop." + }, + "events": { + "update:listIndex": "Emitted when menu item is selected using keyboard arrows.", + "update:searchInput": "The `search-input.sync` event." + }, + "slots": { + "item": "Define a custom item appearance. The root element of this slot must be a **v-list-item** with `v-bind=\"props\"` applied. `props` includes everything required for the default select list behaviour - including title, value, click handlers, virtual scrolling, and anything else that has been added with [`item-props`](api/v-select/#props-item-props)." + } +} diff --git a/packages/api-generator/src/locale/en/VSelectionControl.json b/packages/api-generator/src/locale/en/VSelectionControl.json new file mode 100644 index 0000000..5d28a0e --- /dev/null +++ b/packages/api-generator/src/locale/en/VSelectionControl.json @@ -0,0 +1,13 @@ +{ + "props": { + "baseColor": "Sets the color of the input when it is not focused.", + "value": "The value used when the component is selected in a group. If not provided, a unique ID will be used." + }, + "slots": { + "input": "The slot used for the default input element." + }, + "exposed": { + "isFocused": "Will return true if the component is currently focused.", + "input": "Reference to the root input element." + } +} diff --git a/packages/api-generator/src/locale/en/VSheet.json b/packages/api-generator/src/locale/en/VSheet.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/packages/api-generator/src/locale/en/VSheet.json @@ -0,0 +1 @@ +{} diff --git a/packages/api-generator/src/locale/en/VSimpleCheckbox.json b/packages/api-generator/src/locale/en/VSimpleCheckbox.json new file mode 100644 index 0000000..2ea71f0 --- /dev/null +++ b/packages/api-generator/src/locale/en/VSimpleCheckbox.json @@ -0,0 +1,14 @@ +{ + "props": { + "dark": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).", + "indeterminate": "Sets an indeterminate state for the simple checkbox.", + "indeterminateIcon": "The icon used when in an indeterminate state.", + "falseIcon": "The icon used when inactive.", + "light": "Applies the light theme variant to the component.", + "trueIcon": "The icon used when active.", + "value": "A boolean value that represents whether the simple checkbox is checked." + }, + "events": { + "click": "Event that is emitted when the component is clicked." + } +} diff --git a/packages/api-generator/src/locale/en/VSimpleTable.json b/packages/api-generator/src/locale/en/VSimpleTable.json new file mode 100644 index 0000000..cde1dec --- /dev/null +++ b/packages/api-generator/src/locale/en/VSimpleTable.json @@ -0,0 +1,6 @@ +{ + "props": { + "dense": "Decreases paddings to render a dense table.", + "fixedHeader": "Sets table header to fixed mode." + } +} diff --git a/packages/api-generator/src/locale/en/VSkeletonLoader.json b/packages/api-generator/src/locale/en/VSkeletonLoader.json new file mode 100644 index 0000000..c78b20d --- /dev/null +++ b/packages/api-generator/src/locale/en/VSkeletonLoader.json @@ -0,0 +1,8 @@ +{ + "props": { + "boilerplate": "Remove the loading animation from the skeleton.", + "loading": "Applies a loading animation with a on-hover loading cursor. A value of **false** will only work when there is content in the `default` slot.", + "type": "A string delimited list of skeleton components to create such as `type=\"text@3\"` or `type=\"card, list-item\"`. Will recursively generate a corresponding skeleton from the provided string. Also supports short-hand for multiple elements such as **article@3** and **paragraph@2** which will generate 3 _article_ skeletons and 2 _paragraph_ skeletons. Please see below for a list of available pre-defined options.", + "types": "A custom types object that will be combined with the pre-defined options. For a list of available pre-defined options, see the **type** prop." + } +} diff --git a/packages/api-generator/src/locale/en/VSlideGroup.json b/packages/api-generator/src/locale/en/VSlideGroup.json new file mode 100644 index 0000000..4003ee8 --- /dev/null +++ b/packages/api-generator/src/locale/en/VSlideGroup.json @@ -0,0 +1,19 @@ +{ + "props": { + "centerActive": "Forces the selected component to be centered.", + "direction": "Switch between horizontal and vertical modes.", + "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.", + "nextIcon": "The appended slot when arrows are shown.", + "prevIcon": "The prepended slot when arrows are shown.", + "showArrows": "Change when the overflow arrow indicators are shown. By **default**, arrows *always* display on Desktop when the container is overflowing. When the container overflows on mobile, arrows are not shown by default. A **show-arrows** value of `true` allows these arrows to show on Mobile if the container overflowing. A value of `desktop` *always* displays arrows on Desktop while a value of `mobile` always displays arrows on Mobile. A value of `always` always displays arrows on Desktop *and* Mobile. Find more information on how to customize breakpoint thresholds on the [breakpoints page](/customizing/breakpoints)." + }, + "slots": { + "next": "The next slot.", + "prev": "The prev slot." + }, + "events": { + "change": "Emitted when the component value is changed by user interaction.", + "click:prev": "Emitted when the prev is clicked.", + "click:next": "Emitted when the next is clicked." + } +} diff --git a/packages/api-generator/src/locale/en/VSlider.json b/packages/api-generator/src/locale/en/VSlider.json new file mode 100644 index 0000000..8998cbf --- /dev/null +++ b/packages/api-generator/src/locale/en/VSlider.json @@ -0,0 +1,15 @@ +{ + "props": { + "alwaysDirty": "When used with the **thumb-label** prop will always show the thumb label.", + "inverseLabel": "Reverse the label position. Works with **rtl**.", + "vertical": "Changes slider direction to vertical." + }, + "slots": { + "thumb-label": "Slot for the thumb label.", + "tick-label": "Slot for the tick label." + }, + "events": { + "end": "Slider value emitted at the end of slider movement.", + "start": "Slider value emitted at start of slider movement." + } +} diff --git a/packages/api-generator/src/locale/en/VSnackbar.json b/packages/api-generator/src/locale/en/VSnackbar.json new file mode 100644 index 0000000..261ccb6 --- /dev/null +++ b/packages/api-generator/src/locale/en/VSnackbar.json @@ -0,0 +1,13 @@ +{ + "props": { + "app": "Respects boundaries of—and will not overlap with—other `app` components like `v-app-bar`, `v-navigation-drawer`, and `v-footer`.", + "centered": "Positions the snackbar in the center of the screen, (x and y axis).", + "multiLine": "Gives the snackbar a larger minimum height.", + "timer": "Display a progress bar that counts down until the snackbar closes. Pass a string to set a custom color, otherwise uses `info`.", + "timeout": "Time (in milliseconds) to wait until snackbar is automatically hidden. Use `-1` to keep open indefinitely (`0` in version < 2.3 ). It is recommended for this number to be between `4000` and `10000`. Changes to this property will reset the timeout.", + "vertical": "Stacks snackbar content on top of the actions (button)." + }, + "slots": { + "actions": "Used to bind styles to [v-btn](/components/buttons) to match MD2 specification." + } +} diff --git a/packages/api-generator/src/locale/en/VSnackbarQueue.json b/packages/api-generator/src/locale/en/VSnackbarQueue.json new file mode 100644 index 0000000..79a6819 --- /dev/null +++ b/packages/api-generator/src/locale/en/VSnackbarQueue.json @@ -0,0 +1,6 @@ +{ + "props": { + "closable": "Adds a dismiss button that closes the active snackbar.", + "closeText": "The text used in the close button when using the **closable** prop." + } +} diff --git a/packages/api-generator/src/locale/en/VSparkline.json b/packages/api-generator/src/locale/en/VSparkline.json new file mode 100644 index 0000000..fbb5343 --- /dev/null +++ b/packages/api-generator/src/locale/en/VSparkline.json @@ -0,0 +1,22 @@ +{ + "props": { + "autoDraw": "Trace the length of the line when first rendered.", + "autoDrawDuration": "Amount of time (in ms) to run the trace animation.", + "autoDrawEasing": "The easing function to use for the trace animation.", + "autoLineWidth": "Automatically expand bars to use space efficiently.", + "data": "An array of data points.", + "fill": "Using the **fill** property allows you to better customize the look and feel of your sparkline.", + "gradient": "An array of colors to use as a linear-gradient.", + "gradientDirection": "The direction the gradient should run.", + "height": "Height of the SVG trendline or bars.", + "labels": "An array of string labels that correspond to the same index as its data counterpart.", + "labelSize": "The label font size.", + "lineWidth": "The thickness of the line, in px.", + "padding": "Low `smooth` or high `line-width` values may result in cropping, increase padding to compensate.", + "showLabels": "Show labels below each data point.", + "smooth": "Number of px to use as a corner radius. `true` defaults to 8, `false` is 0.", + "type": "Choose between a trendline or bars.", + "value": "An array of numbers.", + "width": "Width of the SVG trendline or bars." + } +} diff --git a/packages/api-generator/src/locale/en/VSpeedDial.json b/packages/api-generator/src/locale/en/VSpeedDial.json new file mode 100644 index 0000000..b857b4e --- /dev/null +++ b/packages/api-generator/src/locale/en/VSpeedDial.json @@ -0,0 +1,6 @@ +{ + "props": { + "direction": "Direction in which speed-dial content will show. Possible values are `top`, `bottom`, `left`, `right`.", + "openOnHover": "Opens speed-dial on hover." + } +} diff --git a/packages/api-generator/src/locale/en/VStepper.json b/packages/api-generator/src/locale/en/VStepper.json new file mode 100644 index 0000000..ae3f593 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepper.json @@ -0,0 +1,9 @@ +{ + "props": { + "flat": "Removes the stepper's elevation." + }, + "exposed": { + "next": "Move to the next step.", + "prev": "Move to the prev step." + } +} diff --git a/packages/api-generator/src/locale/en/VStepperActions.json b/packages/api-generator/src/locale/en/VStepperActions.json new file mode 100644 index 0000000..02fb8c2 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperActions.json @@ -0,0 +1,14 @@ +{ + "props": { + "nextText": "The text used for the Next button.", + "prevText": "The text used for the Prev button." + }, + "events": { + "click:next": "Event emitted when clicking the next button.", + "click:prev": "Event emitted when clicking the prev button." + }, + "slots": { + "next": "Slot for customizing the next step functionailty", + "prev": "Slot for customizing the prev step functionality" + } +} diff --git a/packages/api-generator/src/locale/en/VStepperHeader.json b/packages/api-generator/src/locale/en/VStepperHeader.json new file mode 100644 index 0000000..25ca095 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperHeader.json @@ -0,0 +1,3 @@ +{ + "props": {} +} diff --git a/packages/api-generator/src/locale/en/VStepperItem.json b/packages/api-generator/src/locale/en/VStepperItem.json new file mode 100644 index 0000000..6ee1816 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperItem.json @@ -0,0 +1,9 @@ +{ + "props": { + }, + "events": { + }, + "slots": { + "icon": "Slot for customizing all stepper item icons." + } +} diff --git a/packages/api-generator/src/locale/en/VStepperVerticalActions.json b/packages/api-generator/src/locale/en/VStepperVerticalActions.json new file mode 100644 index 0000000..4ecea34 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperVerticalActions.json @@ -0,0 +1,9 @@ +{ + "props": { + "finish": "Changes the Next button to use the finish text.", + "finishText": "The text used for the finish button. Shown when using the **finish** prop." + }, + "events": { + "click:finish": "Emitted when the clicking the finish button." + } +} diff --git a/packages/api-generator/src/locale/en/VStepperVerticalItem.json b/packages/api-generator/src/locale/en/VStepperVerticalItem.json new file mode 100644 index 0000000..ca6696c --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperVerticalItem.json @@ -0,0 +1,7 @@ +{ + "events": { + "click:finish": "Event emitted when clicking the finish button", + "click:next": "Event emitted when clicking the next button", + "click:previous": "Event emitted when clicking the previous button" + } +} diff --git a/packages/api-generator/src/locale/en/VStepperWindow.json b/packages/api-generator/src/locale/en/VStepperWindow.json new file mode 100644 index 0000000..25ca095 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperWindow.json @@ -0,0 +1,3 @@ +{ + "props": {} +} diff --git a/packages/api-generator/src/locale/en/VStepperWindowItem.json b/packages/api-generator/src/locale/en/VStepperWindowItem.json new file mode 100644 index 0000000..25ca095 --- /dev/null +++ b/packages/api-generator/src/locale/en/VStepperWindowItem.json @@ -0,0 +1,3 @@ +{ + "props": {} +} diff --git a/packages/api-generator/src/locale/en/VSwitch.json b/packages/api-generator/src/locale/en/VSwitch.json new file mode 100644 index 0000000..6f01d0d --- /dev/null +++ b/packages/api-generator/src/locale/en/VSwitch.json @@ -0,0 +1,20 @@ +{ + "props": { + "flat": "Display component without elevation. Default elevation for thumb is 4dp, `flat` resets it.", + "inputValue": "The **v-model** bound value.", + "indeterminate": "Sets an indeterminate state for the switch.", + "inset": "Enlarge the `v-switch` track to encompass the thumb.", + "loading": "Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color.", + "multiple": "Changes expected model to an array." + }, + "events": { + "change": "Emitted when the input is changed by user interaction.", + "update:indeterminate": "Event that is emitted when the component's indeterminate state changes.", + "click": "Emitted when input is clicked. **Note:** the **change** event should be used instead of **click** when monitoring state change." + }, + "slots": { + "thumb": "Slot for custom thumb content.", + "track-true": "Slot for custom track content when value is true.", + "track-false": "Slot for custom track content when value is false." + } +} diff --git a/packages/api-generator/src/locale/en/VSystemBar.json b/packages/api-generator/src/locale/en/VSystemBar.json new file mode 100644 index 0000000..a5ca81a --- /dev/null +++ b/packages/api-generator/src/locale/en/VSystemBar.json @@ -0,0 +1,7 @@ +{ + "props": { + "height": "Sets the height for the component.", + "lightsOut": "Reduces the system bar opacity.", + "window": "Increases the system bar height to 32px (24px default)." + } +} diff --git a/packages/api-generator/src/locale/en/VTab.json b/packages/api-generator/src/locale/en/VTab.json new file mode 100644 index 0000000..5049aad --- /dev/null +++ b/packages/api-generator/src/locale/en/VTab.json @@ -0,0 +1,14 @@ +{ + "props": { + "direction": "Changes the direction of the tabs. Can be either `horizontal` or `vertical`.", + "hideSlider": "Hides the active tab slider component (no exit or enter animation).", + "fixed": "Forces component to take up all available space up to their maximum width (300px), and centers it.", + "sliderColor": "Applies specified color to the slider when active on that component - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "stacked": "Displays the tab as a flex-column." + }, + "events": { + "change": "Emitted when tab becomes active.", + "click": "Emitted when the component is clicked.", + "keydown": "Emitted when **enter** key is pressed." + } +} diff --git a/packages/api-generator/src/locale/en/VTabItem.json b/packages/api-generator/src/locale/en/VTabItem.json new file mode 100644 index 0000000..07be243 --- /dev/null +++ b/packages/api-generator/src/locale/en/VTabItem.json @@ -0,0 +1,5 @@ +{ + "props": { + "value": "Sets the value of the tab. If not provided, the index will be used." + } +} diff --git a/packages/api-generator/src/locale/en/VTable.json b/packages/api-generator/src/locale/en/VTable.json new file mode 100644 index 0000000..3ce432a --- /dev/null +++ b/packages/api-generator/src/locale/en/VTable.json @@ -0,0 +1,13 @@ +{ + "props": { + "fixedFooter": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.", + "fixedHeader": "Use the fixed-header prop together with the height prop to fix the header to the top of the table.", + "height": "Use the height prop to set the height of the table.", + "hover": "Will add a hover effect to a table's row when the mouse is over it." + }, + "slots": { + "bottom": "Slot to add content below the table.", + "top": "Slot to add content above the table.", + "wrapper": "Slots for custom rendering of the table wrapper." + } +} diff --git a/packages/api-generator/src/locale/en/VTabs.json b/packages/api-generator/src/locale/en/VTabs.json new file mode 100644 index 0000000..e44e735 --- /dev/null +++ b/packages/api-generator/src/locale/en/VTabs.json @@ -0,0 +1,31 @@ +{ + "props": { + "alignTabs": "Aligns the tabs to the `start`, `center`, or `end` of container. Also accepts `title` to align with the `v-toolbar-title` component.", + "alignWithTitle": "Make `v-tabs` lined up with the toolbar title.", + "color": "Applies specified color to the selected tab - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "centered": "Centers the tabs.", + "centerActive": "Forces the selected tab to be centered.", + "cycle": "Will reset to first or last tab when swiping left or right if at the end of indexes.", + "dark": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).", + "direction": "Changes the direction of the tabs. Can be either `horizontal` or `vertical`.", + "fixedTabs": "`v-tabs-item` min-width 160px, max-width 360px.", + "grow": "Force `v-tab`'s to take up all available space.", + "height": "Sets the height of the tabs bar.", + "hideSlider": "Hide's the generated `v-tabs-slider`.", + "iconsAndText": "Will stack icon and text vertically.", + "items": "The items to display in the component. This can be an array of strings or objects with a property `text`.", + "light": "Applies the light theme variant to the component.", + "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.", + "optional": "Does not require an active item. Useful when using `v-tab` as a `router-link`.", + "prevIcon": "Left pagination icon.", + "nextIcon": "Right pagination icon.", + "reverseTransition": "The transition used when the component is reversing items. Can be one of the [built in transitions](/styles/transitions) or one your own.", + "right": "Aligns tabs to the right.", + "showArrows": "Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop.", + "sliderColor": "Changes the background color of an auto-generated `v-tabs-slider`.", + "sliderSize": "Changes the size of the slider, **height** for horizontal, **width** for vertical.", + "stacked": "Apply the stacked prop to all children v-tab components.", + "touchless": "Disable mobile touch functionality.", + "vertical": "Stacks tabs on top of each other vertically." + } +} diff --git a/packages/api-generator/src/locale/en/VTabsItems.json b/packages/api-generator/src/locale/en/VTabsItems.json new file mode 100644 index 0000000..d08c79c --- /dev/null +++ b/packages/api-generator/src/locale/en/VTabsItems.json @@ -0,0 +1,5 @@ +{ + "events": { + "change": "Emitted when user swipes between tabs." + } +} diff --git a/packages/api-generator/src/locale/en/VTextField.json b/packages/api-generator/src/locale/en/VTextField.json new file mode 100644 index 0000000..0eff683 --- /dev/null +++ b/packages/api-generator/src/locale/en/VTextField.json @@ -0,0 +1,36 @@ +{ + "props": { + "autofocus": "Enables autofocus.", + "clearIcon": "Applied when using **clearable** and the input is dirty.", + "counterValue": "Function returns the counter display text.", + "flat": "Removes elevation (shadow) added to element when using the **solo** or **solo-inverted** props.", + "persistentPlaceholder": "Forces placeholder to always be visible.", + "placeholder": "Sets the input’s placeholder text.", + "prefix": "Displays prefix text.", + "prependIcon": "Prepends an icon to the outnside the component's input, uses the same syntax as `v-icon`.", + "prependInnerIcon": "Prepends an icon inside the component's input, uses the same syntax as `v-icon`.", + "reverse": "Reverses the input orientation.", + "role": "The role attribute applied to the input.", + "rounded": "Adds a border radius to the input.", + "suffix": "Displays suffix text.", + "toggleKeys": "Array of key codes that will toggle the input (if it supports toggling).", + "type": "Sets input type." + }, + "events": { + "blur": "Emitted when the input is blurred.", + "change": "Emitted when the input is changed by user interaction.", + "click:append": "Emitted when append icon is clicked.", + "click:append-outer": "Emitted when appended outer icon is clicked.", + "click:appendInner": "Emitted when appended inner icon is clicked.", + "click:clear": "Emitted when clearable icon clicked.", + "click:prepend": "Emitted when prepended icon is clicked.", + "click:prepend-inner": "Emitted when prepended inner icon is clicked.", + "click:prependInner": "Emitted when prepended inner icon is clicked.", + "focus": "Emitted when component is focused.", + "keydown": "Emitted when **any** key is pressed.", + "mousedown:control": "Event that is emitted when using mousedown on the main control area." + }, + "slots": { + "counter": "Slot for the input’s counter text." + } +} diff --git a/packages/api-generator/src/locale/en/VTextarea.json b/packages/api-generator/src/locale/en/VTextarea.json new file mode 100644 index 0000000..318d95a --- /dev/null +++ b/packages/api-generator/src/locale/en/VTextarea.json @@ -0,0 +1,20 @@ +{ + "props": { + "autoGrow": "Automatically grow the textarea depending on amount of text.", + "counterValue": "Display the input length but do not provide any validation.", + "noResize": "Remove resize handle.", + "persistentPlaceholder": "Forces placeholder to always be visible.", + "prefix": "Displays prefix text.", + "rowHeight": "Height value for each row. Requires the use of the **auto-grow** prop.", + "rows": "Default row count.", + "suffix": "Displays suffix text.", + "maxRows": "Specifies the maximum number of row count" + }, + "events": { + "keydown": "Emitted when **any** key is pressed, textarea must be focused.", + "mousedown:control": "Event that is emitted when using mousedown on the main control area." + }, + "slots": { + "counter": "Slot for the input’s counter text." + } +} diff --git a/packages/api-generator/src/locale/en/VThemeProvider.json b/packages/api-generator/src/locale/en/VThemeProvider.json new file mode 100644 index 0000000..2cd0275 --- /dev/null +++ b/packages/api-generator/src/locale/en/VThemeProvider.json @@ -0,0 +1,8 @@ +{ + "props": { + "root": "Use the current value of `$vuetify.theme.dark` as opposed to the provided one." + }, + "slots": { + "default": "All child components will have their theme overridden. Must have exactly one root element." + } +} diff --git a/packages/api-generator/src/locale/en/VTimePicker.json b/packages/api-generator/src/locale/en/VTimePicker.json new file mode 100644 index 0000000..ce361a1 --- /dev/null +++ b/packages/api-generator/src/locale/en/VTimePicker.json @@ -0,0 +1,28 @@ +{ + "props": { + "allowedHours": "Restricts which hours can be selected.", + "allowedMinutes": "Restricts which minutes can be selected.", + "allowedSeconds": "Restricts which seconds can be selected.", + "ampmInTitle": "Place AM/PM switch in title, not near the clock.", + "flat": "Removes elevation.", + "format": "Defines the format of a time displayed in picker. Available options are `ampm` and `24hr`.", + "max": "Maximum allowed time.", + "min": "Minimum allowed time.", + "hide-header": "Hide the header of the picker.", + "readonly": "Puts picker in readonly state.", + "scrollable": "Allows changing hour/minute with mouse scroll.", + "use-seconds": "Toggles the use of seconds in picker.", + "value": "Time picker model (ISO 8601 format, 24hr hh:mm).", + "width": "Width of the picker." + }, + "slots": { + "default": "Displayed below the clock, can be used for example for adding action button (`OK` and `Cancel`)/" + }, + "events": { + "change": "Emitted when the time selection is done (when user changes the minute for HH:MM picker and the second for HH:MM:SS picker.", + "update:hour": "Emitted when user selects the hour.", + "update:minute": "Emitted when user selects the minute.", + "update:second": "Emitted when user selects the second.", + "update:period": "Emitted when user clicks the AM/PM button." + } +} diff --git a/packages/api-generator/src/locale/en/VTimeline.json b/packages/api-generator/src/locale/en/VTimeline.json new file mode 100644 index 0000000..25a3bea --- /dev/null +++ b/packages/api-generator/src/locale/en/VTimeline.json @@ -0,0 +1,14 @@ +{ + "props": { + "align": "Places the timeline dot at the top or center of the timeline item.", + "direction": "Display timeline in a **vertical** or **horizontal** direction.", + "justify": "Places timeline line at the center or automatically on the left or right side.", + "lineColor": "Color of the timeline line.", + "lineInset": "Specifies the distance between the line and the dot of timeline items.", + "linePosition": "Shift the position of the line. By default the line will evenly split items before/after.", + "lineThickness": "Thickness of the timeline line.", + "mirror": "Mirror the before/after ordering of timeline items.", + "side": "Display all timeline items on one side of the timeline, either **before** or **after**.", + "truncateLine": "Truncate timeline directly at the **start** or **end** of the line, or on **both** ends." + } +} diff --git a/packages/api-generator/src/locale/en/VTimelineItem.json b/packages/api-generator/src/locale/en/VTimelineItem.json new file mode 100644 index 0000000..77a3f64 --- /dev/null +++ b/packages/api-generator/src/locale/en/VTimelineItem.json @@ -0,0 +1,20 @@ +{ + "props": { + "alignDot": "Align the dot to the **start** or **end** of the item.", + "color": "Applies specified color to the item dot - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "dotColor": "Color of the item dot.", + "fillDot": "Remove outer border of item dot, making the color fill the entire dot.", + "hideDot": "Hide the timeline item dot.", + "hideOpposite": "Hide opposite content if it exists.", + "icon": "Apply a specific icon to the inside dot using the [v-icon](/components/icons/) component.", + "iconColor": "Color of the icon.", + "index": "Used to allow dynamically shown items to be re-inserted in the correct position.", + "lineInset": "Specifies the distance between the line and the dot of the item.", + "side": "Show the item either **before** or **after** the timeline. This will override the implicit ordering of items, but will in turn be overriden by the `v-timeline` **single-side** prop.", + "size": "Size of the item dot" + }, + "slots": { + "icon": "Used to customize the icon inside the item dot.", + "opposite": "Used to customize the opposite side of timeline items." + } +} diff --git a/packages/api-generator/src/locale/en/VToolbar.json b/packages/api-generator/src/locale/en/VToolbar.json new file mode 100644 index 0000000..5242b0b --- /dev/null +++ b/packages/api-generator/src/locale/en/VToolbar.json @@ -0,0 +1,21 @@ +{ + "props": { + "absolute": "Applies position: absolute to the component.", + "bottom": "Aligns the component towards the bottom.", + "collapse": "Puts the toolbar into a collapsed state reducing its maximum width.", + "extended": "Use this prop to increase the height of the toolbar _without_ using the `extension` slot for adding content. May be used in conjunction with the **extension-height** prop, and any of the other props that affect the height of the toolbar, e.g. **prominent**, **dense**, etc., **WITH THE EXCEPTION** of **height**.", + "extensionHeight": "Specify an explicit height for the `extension` slot.", + "flat": "Removes the toolbar's box-shadow.", + "floating": "Applies **display: inline-flex** to the component.", + "height": "Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. **prominent**, **dense**, **extended**, etc.", + "image": "Specifies a [v-img](/components/images) as the component's background." + }, + "slots": { + "extension": "Slot positioned directly under the main content of the toolbar. Height of this slot can be set explicitly with the **extension-height** prop. If this slot has no content, the **extended** prop may be used instead.", + "image": "Expects the [v-img](/components/images) component. Scoped **props** should be applied with `v-bind=\"props\"`." + }, + "exposed": { + "contentHeight": "The current height of the component's content.", + "extensionHeight": "The current height of the component's extension slot." + } +} diff --git a/packages/api-generator/src/locale/en/VTooltip.json b/packages/api-generator/src/locale/en/VTooltip.json new file mode 100644 index 0000000..08406ae --- /dev/null +++ b/packages/api-generator/src/locale/en/VTooltip.json @@ -0,0 +1,20 @@ +{ + "props": { + "closeDelay": "Delay (in ms) after which menu closes (when open-on-hover prop is set to true).", + "debounce": "Duration before tooltip is shown and hidden when hovered.", + "id": "HTML id attribute of the tooltip overlay. If not set, a globally unique id will be used.", + "internalActivator": "Designates whether to use an internal activator.", + "openDelay": "Delay (in ms) after which tooltip opens (when `open-on-hover` prop is set to **true**).", + "openOnClick": "Designates whether the tooltip should open on activator click.", + "openOnHover": "Designates whether the tooltip should open on activator hover.", + "tag": "Specifies a custom tag for the activator wrapper." + }, + "exposed": { + "activatorEl": "Ref to the current activator element.", + "animateClick": "Function invoked when user clicks outside.", + "contentEl": "Ref to the current content element.", + "globalTop": "Used by activator to determine a components position in the global stack order.", + "localTop": "Used by activator to determine a components position in the local stack order.", + "updateLocation": "Function used for locationStrategy positioning." + } +} diff --git a/packages/api-generator/src/locale/en/VTreeview.json b/packages/api-generator/src/locale/en/VTreeview.json new file mode 100644 index 0000000..3025b82 --- /dev/null +++ b/packages/api-generator/src/locale/en/VTreeview.json @@ -0,0 +1,52 @@ +{ + "props": { + "activatable": "Allows user to mark a node as active by clicking on it.", + "color": "Applies specified color to the active node - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "dense": "Decreases the height of the items.", + "disabled": "Disables selection for all nodes.", + "disablePerNode": "Prevents disabling children nodes.", + "expandIcon": "Icon used to indicate that a node can be expanded.", + "hoverable": "Applies a hover class when mousing over nodes.", + "filter": "Custom item filtering function. By default it will use case-insensitive search in item's label.", + "indeterminateIcon": "Icon used when node is in an indeterminate state. Only visible when `selectable` is `true`.", + "itemChildren": "Property on supplied `items` that contains its children.", + "itemDisabled": "Property on supplied `items` that contains the disabled state of the item.", + "itemKey": "Property on supplied `items` used to keep track of node state. The value of this property has to be unique among all items.", + "items": "An array of items used to build the treeview.", + "itemText": "Property on supplied `items` that contains its label text.", + "loadChildren": "A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a `item-children` property that is an empty array. Supports returning a Promise.", + "loadingIcon": "Icon used when node is in a loading state.", + "multipleActive": "When `true`, allows user to have multiple active nodes at the same time.", + "offIcon": "Icon used when node is not selected. Only visible when `selectable` is `true`.", + "onIcon": "Icon used when leaf node is selected or when a branch node is fully selected. Only visible when `selectable` is `true`.", + "open": "Syncable prop that allows one to control which nodes are open. The array consists of the `item-key` of each open item.", + "openAll": "When `true` will cause all branch nodes to be opened when component is mounted.", + "openOnClick": "When `true` will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon. When using this prop with `activatable` you will be unable to mark nodes with children as active.", + "returnObject": "When `true` will make `v-model`, `active.sync` and `open.sync` return the complete object instead of just the key.", + "rounded": "Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `shaped` prop.", + "search": "The search model for filtering results.", + "selectable": "Will render a checkbox next to each node allowing them to be selected.", + "selectedColor": "The color of the selection checkbox.", + "selectionType": "Controls how the treeview selects nodes. There are two modes available: 'leaf' and 'independent'.", + "shaped": "Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `rounded` prop.", + "transition": "Applies a transition when nodes are opened and closed.", + "value": "Allows one to control which nodes are selected. The array consists of the `item-key` of each selected item. Is used with `@input` event to allow for `v-model` binding." + }, + "slots": { + "append": "Appends content after label.", + "prepend": "Prepends content before label.", + "header": "Slot for custom header.", + "subheader": "Slot for custom subheader.", + "divider": "Slot for custom divider." + }, + "events": { + "click:open": "Emits the item when it is clicked to open.", + "click:select": "Emits the item when it is clicked to select.", + "update:activated": "Emits the array of active items when this value changes.", + "update:opened": "Emits the array of open items when this value changes.", + "update:selected": "Emits the array of selected items when this value changes." + }, + "exposed": { + "open": "Open a node by id" + } +} diff --git a/packages/api-generator/src/locale/en/VTreeviewNode.json b/packages/api-generator/src/locale/en/VTreeviewNode.json new file mode 100644 index 0000000..6ff5bd7 --- /dev/null +++ b/packages/api-generator/src/locale/en/VTreeviewNode.json @@ -0,0 +1,27 @@ +{ + "props": { + "activatable": "Allows user to mark a node as active by clicking on it.", + "activeClass": "The class applied to the node when active.", + "expandIcon": "Icon used to indicate that a node can be expanded.", + "indeterminateIcon": "Icon used when node is in an indeterminate state. Only visible when `selectable` is `true`.", + "item": "Item object used to build the node.", + "itemChildren": "Property on supplied `items` that contains its children.", + "itemDisabled": "Property on supplied `items` that contains the disabled state of the item.", + "itemKey": "Property on supplied `items` used to keep track of node state. The value of this property has to be unique among all items.", + "itemText": "Property on supplied `items` that contains its label text.", + "level": "Property designating how deep the node is from the root of the treeview.", + "loadChildren": "A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a `item-children` property that is an empty array. Supports returning a Promise.", + "loadingIcon": "Icon used when node is in a loading state.", + "offIcon": "Icon used when node is not selected. Only visible when `selectable` is `true`.", + "onIcon": "Icon used when leaf node is selected or when a branch node is fully selected. Only visible when `selectable` is `true`.", + "openOnClick": "When `true` will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon. When using this prop with `activatable` you will be unable to mark nodes with children as active.", + "parentIsDisabled": ".", + "returnObject": "When `true` will make `v-model`, `active.sync` and `open.sync` return the complete object instead of just the key.", + "rounded": "Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `shaped` prop.", + "selectable": "Will render a checkbox next to each node allowing them to be selected.", + "selectedColor": "The color of the selection checkbox.", + "selectionType": "Controls how the treeview selects nodes. There are two modes available: 'leaf' and 'independent'.", + "shaped": "Provides an alternative active style for `v-treeview` node. Only visible when `activatable` is `true` and should not be used in conjunction with the `rounded` prop.", + "transition": "Applies a transition when nodes are opened and closed." + } +} diff --git a/packages/api-generator/src/locale/en/VVirtualScroll.json b/packages/api-generator/src/locale/en/VVirtualScroll.json new file mode 100644 index 0000000..e3fc609 --- /dev/null +++ b/packages/api-generator/src/locale/en/VVirtualScroll.json @@ -0,0 +1,11 @@ +{ + "props": { + "height": "Height of the component as a css value/", + "itemKey": "Required when using **dynamic-item-height** together with object items. Should point to a property with a unique value for each item.", + "items": "The array of items to display.", + "renderless": "Disables default component rendering functionality." + }, + "slots": { + "default": "Default slot to render a single item." + } +} diff --git a/packages/api-generator/src/locale/en/VWindow.json b/packages/api-generator/src/locale/en/VWindow.json new file mode 100644 index 0000000..881af8f --- /dev/null +++ b/packages/api-generator/src/locale/en/VWindow.json @@ -0,0 +1,26 @@ +{ + "props": { + "continuous": "If `true`, window will \"wrap around\" from the last item to the first, and from the first item to the last.", + "direction": "The transition direction when changing windows.", + "nextIcon": "Icon used for the \"next\" button if `show-arrows` is `true`.", + "prevIcon": "Icon used for the \"prev\" button if `show-arrows` is `true`.", + "reverse": "Reverse the normal transition direction.", + "reverseTransition": "The transition used when the component is reversing items. Can be one of the [built in transitions](/styles/transitions) or one your own.", + "showArrows": "Display the \"next\" and \"prev\" buttons.", + "showArrowsOnHover": "Display the \"next\" and \"prev\" buttons on hover. `show-arrows` MUST ALSO be set.", + "touch": "Provide a custom **left** and **right** function when swiped left or right.", + "touchless": "Disable touch support.", + "vertical": "Uses a vertical transition when changing windows." + }, + "events": { + "change": "Emitted when the component value is changed by user interaction." + }, + "slots": { + "next": "Slot displaying the arrow switching to the next item.", + "prev": "Slot displaying the arrow switching to the previous item.", + "additional": "Slot for additional content at the end of the component." + }, + "exposed": { + "group": "Returns item group data, state and helper methods." + } +} diff --git a/packages/api-generator/src/locale/en/VWindowItem.json b/packages/api-generator/src/locale/en/VWindowItem.json new file mode 100644 index 0000000..6f7e82e --- /dev/null +++ b/packages/api-generator/src/locale/en/VWindowItem.json @@ -0,0 +1,10 @@ +{ + "props": { + "disabled": "Prevents the item from becoming active when using the \"next\" and \"prev\" buttons or the `toggle` method.", + "reverseTransition": "Sets the reverse transition.", + "transition": "The transition used when the component progressing through items. Can be one of the [built in](/styles/transitions/) or custom transition." + }, + "exposed": { + "groupItem": "Returns item and item group data, state and helper methods." + } +} diff --git a/packages/api-generator/src/locale/en/border.json b/packages/api-generator/src/locale/en/border.json new file mode 100644 index 0000000..9639eec --- /dev/null +++ b/packages/api-generator/src/locale/en/border.json @@ -0,0 +1,5 @@ +{ + "props": { + "border": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**." + } +} diff --git a/packages/api-generator/src/locale/en/calendar.json b/packages/api-generator/src/locale/en/calendar.json new file mode 100644 index 0000000..e969085 --- /dev/null +++ b/packages/api-generator/src/locale/en/calendar.json @@ -0,0 +1,9 @@ +{ + "props": { + "displayValue": "The value that determines the month to show. This is different from modelValue, which determines the selected value.", + "month": "The current month number to show", + "weekdays": "An array of weekdays to display.", + "weeksInMonth": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.", + "year": "The current year number to show" + } +} diff --git a/packages/api-generator/src/locale/en/delay.json b/packages/api-generator/src/locale/en/delay.json new file mode 100644 index 0000000..1067d7b --- /dev/null +++ b/packages/api-generator/src/locale/en/delay.json @@ -0,0 +1,6 @@ +{ + "props": { + "closeDelay": "Milliseconds to wait before closing component. Only applies to hover and focus events.", + "openDelay": "Milliseconds to wait before opening component. Only applies to hover and focus events." + } +} diff --git a/packages/api-generator/src/locale/en/dimension.json b/packages/api-generator/src/locale/en/dimension.json new file mode 100644 index 0000000..e03d467 --- /dev/null +++ b/packages/api-generator/src/locale/en/dimension.json @@ -0,0 +1,10 @@ +{ + "props": { + "height": "Sets the height for the component.", + "maxHeight": "Sets the maximum height for the component.", + "maxWidth": "Sets the maximum width for the component.", + "minHeight": "Sets the minimum height for the component.", + "minWidth": "Sets the minimum width for the component.", + "width": "Sets the width for the component." + } +} diff --git a/packages/api-generator/src/locale/en/display.json b/packages/api-generator/src/locale/en/display.json new file mode 100644 index 0000000..22b1639 --- /dev/null +++ b/packages/api-generator/src/locale/en/display.json @@ -0,0 +1,6 @@ +{ + "props": { + "mobile": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint", + "mobileBreakpoint": "Overrides the display configuration default screen size that the component should be considered in mobile." + } +} diff --git a/packages/api-generator/src/locale/en/elevation.json b/packages/api-generator/src/locale/en/elevation.json new file mode 100644 index 0000000..5605dfa --- /dev/null +++ b/packages/api-generator/src/locale/en/elevation.json @@ -0,0 +1,5 @@ +{ + "props": { + "elevation": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)." + } +} diff --git a/packages/api-generator/src/locale/en/filter.json b/packages/api-generator/src/locale/en/filter.json new file mode 100644 index 0000000..a0f0a3f --- /dev/null +++ b/packages/api-generator/src/locale/en/filter.json @@ -0,0 +1,9 @@ +{ + "props": { + "customFilter": "Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.", + "customKeyFilter": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.", + "filterKeys": "Array of specific keys to filter on the item.", + "filterMode": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.", + "noFilter": "Disables all item filtering." + } +} diff --git a/packages/api-generator/src/locale/en/focus.json b/packages/api-generator/src/locale/en/focus.json new file mode 100644 index 0000000..353a69c --- /dev/null +++ b/packages/api-generator/src/locale/en/focus.json @@ -0,0 +1,5 @@ +{ + "props": { + "focused": "Forces a focused state styling on the component." + } +} diff --git a/packages/api-generator/src/locale/en/form.json b/packages/api-generator/src/locale/en/form.json new file mode 100644 index 0000000..4e6c9fc --- /dev/null +++ b/packages/api-generator/src/locale/en/form.json @@ -0,0 +1,9 @@ +{ + "props": { + "disabled": "Puts all children inputs into a disabled state.", + "fastFail": "Stop validation as soon as any rules fail.", + "modelValue": "The value representing the validity of the form. If the value is `null` then no validation has taken place yet, or the form has been reset. Otherwise the value will be a `boolean` that indicates if validation has passed or not.", + "readonly": "Puts all children inputs into a readonly state.", + "validateOn": "Changes the events in which validation occurs." + } +} diff --git a/packages/api-generator/src/locale/en/generic.json b/packages/api-generator/src/locale/en/generic.json new file mode 100644 index 0000000..7eaf6c8 --- /dev/null +++ b/packages/api-generator/src/locale/en/generic.json @@ -0,0 +1,107 @@ +{ + "props": { + "active": "Controls the **active** state of the item. This is typically used to highlight the component.", + "activeClass": "The class applied to the component when it is in an active state.", + "activeColor": "The applied color when the component is in an active state.", + "appendAvatar": "Appends a [v-avatar](/components/avatars/) component after default content in the **append** slot.", + "appendIcon": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.", + "auto": "Centers list on selected element.", + "baseColor": "Sets the color of component when not focused.", + "bgColor": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "clearable": "Allows for the component to be cleared.", + "color": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "contentClass": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component.", + "counter": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.", + "disabled": "Removes the ability to click or target the component.", + "density": "Adjusts the vertical height used by the component.", + "eager": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.", + "end": "Applies margin at the start of the component.", + "falseValue": "Sets value for falsy state.", + "fullWidth": "Sets the component width to 100%.", + "height": "Sets the height for the component.", + "hideNoData": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.", + "hideOnLeave": "Hides the leaving element (no exit animation).", + "group": "Creates a `transition-group` component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).", + "icon": "Apply a specific icon using the [v-icon](/components/icons/) component.", + "image": "Apply a specific image using [v-img](/components/images/).", + "items": "An array of strings or objects used for automatically generating children components.", + "label": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.", + "leaveAbsolute": "Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).", + "link": "Designates that the component is a link. This is automatic when using the href or to prop.", + "mandatory": "Forces at least one item to always be selected (if available).", + "menu": "Renders with the menu open by default.", + "menuIcon": "Sets the the spin icon.", + "messages": "Displays a list of messages or a single message if using a string.", + "mode": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).", + "modelModifiers": "**FOR INTERNAL USE ONLY**", + "modelValue": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.", + "name": "Sets the component's name attribute.", + "noDataText": "Text shown when no items are provided to the component.", + "opacity": "Sets the component's opacity value", + "origin": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).", + "persistent": "Clicking outside or pressing **esc** key will not dismiss the dialog.", + "persistentCounter": "Forces counter to always be visible.", + "prependAvatar": "Prepends a [v-avatar](/components/avatars/) component in the **prepend** slot before default content.", + "prependIcon": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content.", + "ripple": "Applies the [v-ripple](/directives/ripple) directive.", + "search": "Text input used to filter items.", + "selectedClass": "Configure the active CSS class applied when an item is selected.", + "size": "Sets the height and width of the component.", + "subtitle": "Specify a subtitle text for the component.", + "start": "Applies margin at the end of the component.", + "symbol": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/).", + "tag": "Specify a custom tag used on the root element.", + "text": "Specify content text for the component.", + "textColor": "Applies a specified color to the control text - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).", + "title": "Specify a title text for the component.", + "trueValue": "Sets value for truthy state.", + "valueComparator": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.", + "variant": "Applies a distinct style to the component.", + "width": "Sets the width for the component." + }, + "slots": { + "activator": "When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.", + "append": "Adds an item inside the input and after input content.", + "append-item": "Adds an item after menu content.", + "append-inner": "Adds an item inside the input content.", + "chip": "Slot for custom chip when using the [chip](#property-chip) prop.", + "details": "Slot for custom input details to modifying the display of [messages](#props-messages).", + "default": "The default Vue slot.", + "item": "Define a custom item appearance.", + "label": "The default slot of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.", + "loader": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).", + "message": "Slot used to customize the message content.", + "no-data": "Defines content for when no items are provided.", + "prepend": "Adds an item outside the input and before input content.", + "prepend-inner": "Adds an item inside the input content.", + "prepend-item": "Adds an item before menu content.", + "progress": "Slot for custom progress linear (displayed when **loading** prop is not equal to Boolean False).", + "selection": "Define a custom selection appearance.", + "subtitle": "Slot for the component's subtitle content.", + "text": "Slot for the component's text content.", + "title": "Slot for the component's title content." + }, + "events": { + "click": "Event that is emitted when the component is clicked.", + "click:close": "Emitted when close icon is clicked.", + "click:append": "Emitted when appended icon is clicked.", + "click:appendInner": "Emitted when appended inner icon is clicked.", + "click:clear": "Emitted when clear icon is clicked.", + "click:prepend": "Emitted when prepended icon is clicked.", + "click:prependInner": "Emitted when prepended inner icon is clicked.", + "input": "The updated bound model.", + "group:selected": "Event that is emitted when an item is selected within a group.", + "update:focused": "Event that is emitted when the component's focus state changes.", + "update:menu": "Event that is emitted when the component's menu state changes.", + "update:modelValue": "Event that is emitted when the component's model changes.", + "update:search": "Event emitted when the search value changes." + }, + "exposed": { + "filteredItems": "The current array of items based upon the current search text.", + "isFocused": "Returns true if the input is focused.", + "isPristine": "Returns true if the input has not been modified in any way.", + "menu": "Returns true if the menu is currently open.", + "search": "The current search text.", + "select": "The function used to select an items. The first argument expects the value of the item." + } +} diff --git a/packages/api-generator/src/locale/en/group-item.json b/packages/api-generator/src/locale/en/group-item.json new file mode 100644 index 0000000..35cc338 --- /dev/null +++ b/packages/api-generator/src/locale/en/group-item.json @@ -0,0 +1,5 @@ +{ + "props": { + "value": "The value used when the component is selected in a group. If not provided, a unique ID will be used." + } +} diff --git a/packages/api-generator/src/locale/en/group.json b/packages/api-generator/src/locale/en/group.json new file mode 100644 index 0000000..0887d56 --- /dev/null +++ b/packages/api-generator/src/locale/en/group.json @@ -0,0 +1,8 @@ +{ + "props": { + "disabled": "Puts all children components into a disabled state.", + "max": "Sets a maximum number of selections that can be made.", + "multiple": "Allows one to select multiple items.", + "value": "The value used when the component is selected within a group. If not provided, the render index is used." + } +} diff --git a/packages/api-generator/src/locale/en/layout-item.json b/packages/api-generator/src/locale/en/layout-item.json new file mode 100644 index 0000000..c748069 --- /dev/null +++ b/packages/api-generator/src/locale/en/layout-item.json @@ -0,0 +1,7 @@ +{ + "props": { + "absolute": "Applies **position: absolute** to the component.", + "name": "Assign a specific name for layout registration.", + "order": "Adjust the order of the component in relation to its registration order." + } +} diff --git a/packages/api-generator/src/locale/en/layout.json b/packages/api-generator/src/locale/en/layout.json new file mode 100644 index 0000000..a142629 --- /dev/null +++ b/packages/api-generator/src/locale/en/layout.json @@ -0,0 +1,10 @@ +{ + "props": { + "fullHeight": "Sets the component height to 100%.", + "overlaps": "**FOR INTERNAL USE ONLY**" + }, + "exposed": { + "getLayoutItem": "Function that returns position and size information about a specific layout item.", + "items": "A array of all registered layout items." + } +} diff --git a/packages/api-generator/src/locale/en/list-items.json b/packages/api-generator/src/locale/en/list-items.json new file mode 100644 index 0000000..ca66df6 --- /dev/null +++ b/packages/api-generator/src/locale/en/list-items.json @@ -0,0 +1,10 @@ +{ + "props": { + "items": "Can be an array of objects or strings. By default objects should have a **title** property, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props), a **value** property to allow selection, and a **children** property containing more item objects. Keys to use for these can be changed with the **item-title**, **item-value**, **item-props**, and **item-children** props.", + "itemChildren": "Property on supplied `items` that contains its children.", + "itemProps": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component.", + "itemTitle": "Property on supplied `items` that contains its title.", + "itemValue": "Property on supplied `items` that contains its value.", + "returnObject": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**." + } +} diff --git a/packages/api-generator/src/locale/en/loader.json b/packages/api-generator/src/locale/en/loader.json new file mode 100644 index 0000000..09cec7e --- /dev/null +++ b/packages/api-generator/src/locale/en/loader.json @@ -0,0 +1,5 @@ +{ + "props": { + "loading": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color." + } +} diff --git a/packages/api-generator/src/locale/en/location.json b/packages/api-generator/src/locale/en/location.json new file mode 100644 index 0000000..f979e24 --- /dev/null +++ b/packages/api-generator/src/locale/en/location.json @@ -0,0 +1,5 @@ +{ + "props": { + "location": "Specifies the component's location. Can combine by using a space separated string." + } +} diff --git a/packages/api-generator/src/locale/en/nested.json b/packages/api-generator/src/locale/en/nested.json new file mode 100644 index 0000000..0ec2a7a --- /dev/null +++ b/packages/api-generator/src/locale/en/nested.json @@ -0,0 +1,10 @@ +{ + "props": { + "activated": "Array of ids of activated nodes.", + "activeStrategy": "Affects how items with children behave when activated.\n- **leaf:** Only leaf nodes (items without children) can be activated.\n- **independent:** All nodes can be activated whether they have children or not.\n- **classic:** Activating a parent node will cause all children to be activated.", + "opened": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`.", + "openStrategy": "Affects how items with children behave when expanded.\n- **multiple:** Any number of groups can be open at once.\n- **single:** Only one group at each level can be open, opening a group will cause others to close.\n- **list:** Multiple, but all other groups will close when an item is selected.", + "selected": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`.", + "selectStrategy": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model." + } +} diff --git a/packages/api-generator/src/locale/en/position.json b/packages/api-generator/src/locale/en/position.json new file mode 100644 index 0000000..02c9123 --- /dev/null +++ b/packages/api-generator/src/locale/en/position.json @@ -0,0 +1,5 @@ +{ + "props": { + "position": "Sets the position for the component." + } +} diff --git a/packages/api-generator/src/locale/en/rounded.json b/packages/api-generator/src/locale/en/rounded.json new file mode 100644 index 0000000..2b9d8f2 --- /dev/null +++ b/packages/api-generator/src/locale/en/rounded.json @@ -0,0 +1,6 @@ +{ + "props": { + "rounded": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).", + "tile": "Removes any applied **border-radius** from the component." + } +} diff --git a/packages/api-generator/src/locale/en/router.json b/packages/api-generator/src/locale/en/router.json new file mode 100644 index 0000000..351d6e9 --- /dev/null +++ b/packages/api-generator/src/locale/en/router.json @@ -0,0 +1,9 @@ +{ + "props": { + "activeClass": "The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation.", + "exact": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation.", + "href": "Designates the component as anchor and applies the **href** attribute.", + "replace": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation.", + "to": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation." + } +} diff --git a/packages/api-generator/src/locale/en/size.json b/packages/api-generator/src/locale/en/size.json new file mode 100644 index 0000000..a81d44b --- /dev/null +++ b/packages/api-generator/src/locale/en/size.json @@ -0,0 +1,5 @@ +{ + "props": { + "size": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**." + } +} diff --git a/packages/api-generator/src/locale/en/tag.json b/packages/api-generator/src/locale/en/tag.json new file mode 100644 index 0000000..5db2064 --- /dev/null +++ b/packages/api-generator/src/locale/en/tag.json @@ -0,0 +1,5 @@ +{ + "props": { + "tag": "Specify a custom tag used on the root element." + } +} diff --git a/packages/api-generator/src/locale/en/theme.json b/packages/api-generator/src/locale/en/theme.json new file mode 100644 index 0000000..704a40c --- /dev/null +++ b/packages/api-generator/src/locale/en/theme.json @@ -0,0 +1,5 @@ +{ + "props": { + "theme": "Specify a theme for this component and all of its children." + } +} diff --git a/packages/api-generator/src/locale/en/transition.json b/packages/api-generator/src/locale/en/transition.json new file mode 100644 index 0000000..aea8bfb --- /dev/null +++ b/packages/api-generator/src/locale/en/transition.json @@ -0,0 +1,5 @@ +{ + "props": { + "transition": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition." + } +} diff --git a/packages/api-generator/src/locale/en/useDate.json b/packages/api-generator/src/locale/en/useDate.json new file mode 100644 index 0000000..69aa2f4 --- /dev/null +++ b/packages/api-generator/src/locale/en/useDate.json @@ -0,0 +1,32 @@ +{ + "exposed": { + "addDays": "Adds the specified number of days to the date.", + "addMonths": "Adds the specified number of months to the date.", + "date": "Takes any value and returns a date object.", + "endOfDay": "Returns the last second of the day.", + "endOfMonth": "Returns the last day of the month.", + "endOfWeek": "Returns the last day of the week.", + "endOfYear": "Returns the last day of the year.", + "format": "Takes a date object and returns it in a specified format.", + "getDiff": "Returns the difference between two dates in the specified unit.", + "getMonth": "Returns the month of the date.", + "getWeek": "Returns the week of the year of the date.", + "getWeekArray": "Returns an array of the days of the week of the date.", + "getWeekdays": "Returns an array of the names of the days of the week.", + "isAfter": "Returns true if the first date is after the second date.", + "isBefore": "Returns true if the first date is before the second date.", + "isEqual": "Returns true if the two dates are equal.", + "isSameDay": "Returns true if the two dates are the same day.", + "isSameMonth": "Returns true if the two dates are the same month.", + "isValid": "Returns true if the date is valid.", + "isWithinRange": "Returns true if the first date is within the range of the second and third dates.", + "locale": "Returns the current locale being used.", + "getYear": "Returns the year of the date.", + "setYear": "Sets the year of the date.", + "startOfDay": "Returns the first second of the day.", + "startOfMonth": "Returns first day of the month.", + "startOfWeek": "Returns the first day of the week.", + "startOfYear": "Returns the first day of the year.", + "toJsDate": "Converts date value to a JS Date Object." + } +} diff --git a/packages/api-generator/src/locale/en/useDisplay.json b/packages/api-generator/src/locale/en/useDisplay.json new file mode 100644 index 0000000..47c5a9d --- /dev/null +++ b/packages/api-generator/src/locale/en/useDisplay.json @@ -0,0 +1,26 @@ +{ + "exposed": { + "height": "The inner height of the browser window.", + "lg": "Returns **true** if the current browser breakpoint is **lg**.", + "lgAndDown": "Returns **true** if the current browser breakpoint is **lg** or lower.", + "lgAndUp": "Returns **true** if the current browser breakpoint is **lg** or higher.", + "md": "Returns **true** if the current browser breakpoint is **md**.", + "mdAndDown": "Returns **true** if the current browser breakpoint is **md** or lower.", + "mdAndUp": "Returns **true** if the current browser breakpoint is **md** or higher.", + "mobile": "Returns **true** if the current browser breakpoint is considered to be a mobile breakpoint.", + "mobileBreakpoint": "Controls which named breakpoint (**lg**, **md**, etc) or browser width (in px) is considered to be mobile.", + "name": "Name of the current breakpoint.", + "platform": "Name of the current platform.", + "sm": "Returns **true** if the current browser breakpoint is **sm**.", + "smAndDown": "Returns **true** if the current browser breakpoint is **sm** or lower.", + "smAndUp": "Returns **true** if the current browser breakpoint is **sm** or higher.", + "thresholds": "An object describing the width values of each breakpoint.", + "update": "Function that updates the current width and height values.", + "width": "The inner width of the browser window.", + "xl": "Returns **true** if the current browser breakpoint is **xl**.", + "xlAndDown": "Returns **true** if the current browser breakpoint is **xl** or lower.", + "xlAndUp": "Returns **true** if the current browser breakpoint is **xl** or higher.", + "xs": "Returns **true** if the current browser breakpoint is **xs**.", + "xxl": "Returns **true** if the current browser breakpoint is **xxl**." + } +} diff --git a/packages/api-generator/src/locale/en/useGoTo.json b/packages/api-generator/src/locale/en/useGoTo.json new file mode 100644 index 0000000..1821473 --- /dev/null +++ b/packages/api-generator/src/locale/en/useGoTo.json @@ -0,0 +1,6 @@ +{ + "exposed": { + "rtl": "The current RTL state.", + "options": "The current goTo scrolling options." + } +} diff --git a/packages/api-generator/src/locale/en/useLayout.json b/packages/api-generator/src/locale/en/useLayout.json new file mode 100644 index 0000000..ac60bd1 --- /dev/null +++ b/packages/api-generator/src/locale/en/useLayout.json @@ -0,0 +1,7 @@ +{ + "exposed": { + "getLayoutItem": "Function that returns position and size information about a specific layout item.", + "mainRect": "Position and size information for the v-main area.", + "mainStyles": "CSS styles applied to the v-main area." + } +} diff --git a/packages/api-generator/src/locale/en/useLocale.json b/packages/api-generator/src/locale/en/useLocale.json new file mode 100644 index 0000000..8784861 --- /dev/null +++ b/packages/api-generator/src/locale/en/useLocale.json @@ -0,0 +1,14 @@ +{ + "exposed": { + "current": "Current locale.", + "fallback": "Fallback locale.", + "isRtl": "Indicates if RTL is currently active or not.", + "messages": "Locale messages.", + "n": "Function to localize numbers.", + "name": "Name of the locale adapter used.", + "provide": "**FOR INTERNAL USE ONLY**", + "rtl": "**FOR INTERNAL USE ONLY**", + "rtlClasses": "**FOR INTERNAL USE ONLY**", + "t": "Function to localize strings." + } +} diff --git a/packages/api-generator/src/locale/en/useRtl.json b/packages/api-generator/src/locale/en/useRtl.json new file mode 100644 index 0000000..f6f6ff9 --- /dev/null +++ b/packages/api-generator/src/locale/en/useRtl.json @@ -0,0 +1,6 @@ +{ + "exposed": { + "isRtl": "Indicates if RTL is currently active or not.", + "rtlClasses": "**FOR INTERNAL USE ONLY**" + } +} diff --git a/packages/api-generator/src/locale/en/useTheme.json b/packages/api-generator/src/locale/en/useTheme.json new file mode 100644 index 0000000..f5f2c21 --- /dev/null +++ b/packages/api-generator/src/locale/en/useTheme.json @@ -0,0 +1,12 @@ +{ + "exposed": { + "computedThemes": "Object containing all parsed theme definitions.", + "current": "Current theme object.", + "global": "Reference to the global theme instance.", + "isDisabled": "Indicates if theming is disabled.", + "name": "Name of current theme.", + "styles": "**FOR INTERNAL USE ONLY**", + "themeClasses": "**FOR INTERNAL USE ONLY**", + "themes": "Raw theme definitions." + } +} diff --git a/packages/api-generator/src/locale/en/v-click-outside.json b/packages/api-generator/src/locale/en/v-click-outside.json new file mode 100644 index 0000000..c497b88 --- /dev/null +++ b/packages/api-generator/src/locale/en/v-click-outside.json @@ -0,0 +1,3 @@ +{ + "value": "Takes either a function that is invoked when user clicks outside of the element the directive is attached to, or an object containing `handler`, `closeConditional` and `include` callbacks." +} diff --git a/packages/api-generator/src/locale/en/v-intersect.json b/packages/api-generator/src/locale/en/v-intersect.json new file mode 100644 index 0000000..cfcc797 --- /dev/null +++ b/packages/api-generator/src/locale/en/v-intersect.json @@ -0,0 +1,7 @@ +{ + "value": "A handler function that is invoked when the element that the directive is attached to enters or leaves the visible browser area, or an object of [IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver).", + "modifiers": { + "once": "The handler function is only invoked once, the first time the element is visible.", + "quiet": "Will not invoke the handler function if the element is visible when the IntersectionObserver is created." + } +} diff --git a/packages/api-generator/src/locale/en/v-mutate.json b/packages/api-generator/src/locale/en/v-mutate.json new file mode 100644 index 0000000..35cdb4c --- /dev/null +++ b/packages/api-generator/src/locale/en/v-mutate.json @@ -0,0 +1,11 @@ +{ + "value": "A handler function that is invoked when the element that the directive is attached to is mutated, or an object of [MutationObserver options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe).", + "modifiers": { + "attr": "Sets the value of [attributes](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes) to true.", + "char": "Sets the value of [characterData](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData) to true.", + "child": "Sets the value of [childList](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList) to true.", + "immediate": "The provided handler function is invoked immediately when directive is attached to element.", + "once": "The provided handler function is only invoked once.", + "sub": "Sets the value of [subtree](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#Parameters) to true." + } +} diff --git a/packages/api-generator/src/locale/en/v-resize.json b/packages/api-generator/src/locale/en/v-resize.json new file mode 100644 index 0000000..74617b6 --- /dev/null +++ b/packages/api-generator/src/locale/en/v-resize.json @@ -0,0 +1,7 @@ +{ + "value": "A function that will be invoked each time the browser window is resized.", + "modifiers": { + "active": "By default the resize event listener is added to window with the `passive` option. This modifier sets `passive` to **false**.", + "quiet": "By default the provided handler function is invoked once when the directive is attached to the element. This modifier disables that behavior." + } +} diff --git a/packages/api-generator/src/locale/en/v-ripple.json b/packages/api-generator/src/locale/en/v-ripple.json new file mode 100644 index 0000000..dc62d08 --- /dev/null +++ b/packages/api-generator/src/locale/en/v-ripple.json @@ -0,0 +1,8 @@ +{ + "value": "An object containing options for the ripple effect. `class` applies a custom class to the ripple, and can be used for changing color. `center` forces the ripple to originate from the center of the target instead of the cursor position.", + "modifiers": { + "center": "Makes it so that the ripple originates from the center of the element, instead where the user clicked on it.", + "circle": "Changes the ripple behavior to better match circular elements.", + "stop": "Prevents ripples from being triggered on any other elements when the click event is bubbling up." + } +} diff --git a/packages/api-generator/src/locale/en/v-scroll.json b/packages/api-generator/src/locale/en/v-scroll.json new file mode 100644 index 0000000..408d0cf --- /dev/null +++ b/packages/api-generator/src/locale/en/v-scroll.json @@ -0,0 +1,7 @@ +{ + "argument": "Specify a query selector to attach the scroll event listener to. If no argument is provided then it is attached to the window object.", + "value": "A handler function that is invoked whenever the target element is scrolled, or an object of [event listener options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).", + "modifiers": { + "self": "By default the scroll event listener is attached to the argument provided to the directive, interpreted as a query selector. If no argument is provided then it is attached to the window object. If this modifier is used then it is instead attached to the element the directive is used on." + } +} diff --git a/packages/api-generator/src/locale/en/v-tooltip.json b/packages/api-generator/src/locale/en/v-tooltip.json new file mode 100644 index 0000000..2f4b222 --- /dev/null +++ b/packages/api-generator/src/locale/en/v-tooltip.json @@ -0,0 +1,4 @@ +{ + "argument": "Applies the VTooltip location prop.", + "value": "**string**: Sets the tooltip content. \n**boolean**: Controls visibility, tooltip content will be the innerText of the bound element. \n**object**: Use any [VTooltip props](/api/v-tooltip), content can be set with `text`. Keys are camelCase." +} diff --git a/packages/api-generator/src/locale/en/v-touch.json b/packages/api-generator/src/locale/en/v-touch.json new file mode 100644 index 0000000..58316fd --- /dev/null +++ b/packages/api-generator/src/locale/en/v-touch.json @@ -0,0 +1,3 @@ +{ + "value": "The value is always an object. The `start`, `end`, `move`, `left`, `right`, `up` and `down` functions can be used to invoke a function when the corresponding touch action occurs. If the `parent` option attaches the touch listeners to the parent element instead of the element the directive is used on. The `options` object is described [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)." +} diff --git a/packages/api-generator/src/locale/en/validation.json b/packages/api-generator/src/locale/en/validation.json new file mode 100644 index 0000000..49349b8 --- /dev/null +++ b/packages/api-generator/src/locale/en/validation.json @@ -0,0 +1,18 @@ +{ + "props": { + "error": "Puts the input in a manual error state.", + "errorCount": "The total number of errors that should display at once.", + "errorMessages": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation.", + "readonly": "Puts input in readonly state.", + "rules": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.", + "success": "Puts the input in a manual success state.", + "successMessages": "Puts the input in a success state and passes through custom success messages.", + "validateOnBlur": "Delays validation until blur event.", + "maxErrors": "Control the maximum number of shown errors from validation.", + "validateOn": "Change what type of event triggers validation to run.", + "validationValue": "The value used when applying validation rules." + }, + "events": { + "update:error": "The `v-model:error` event." + } +} diff --git a/packages/api-generator/src/locale/en/virtual.json b/packages/api-generator/src/locale/en/virtual.json new file mode 100644 index 0000000..dc0a343 --- /dev/null +++ b/packages/api-generator/src/locale/en/virtual.json @@ -0,0 +1,8 @@ +{ + "props": { + "itemHeight": "Height in pixels of each item to display." + }, + "exposed": { + "scrollToIndex": "Scrolls to the item at a given index." + } +} diff --git a/packages/api-generator/src/shims.d.ts b/packages/api-generator/src/shims.d.ts new file mode 100644 index 0000000..da9265c --- /dev/null +++ b/packages/api-generator/src/shims.d.ts @@ -0,0 +1,22 @@ +import '@ts-morph/common' + +declare module 'ts-morph' { + export interface Type { + _context: { + compilerFactory: { + getType(type: TType): Type + } + } + } + + namespace ts { + interface Type { + indexInfos: { + keyType: Type + type: Type + }[] + } + } +} + +export {} diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts new file mode 100644 index 0000000..0f14e00 --- /dev/null +++ b/packages/api-generator/src/types.ts @@ -0,0 +1,642 @@ +import type { Node, Type } from 'ts-morph' +import { Project, ts } from 'ts-morph' +import { prettifyType } from './utils' +import { kebabCase } from './helpers/text' + +const project = new Project({ + tsConfigFilePath: './tsconfig.json', +}) + +async function inspect (project: Project, node?: Node) { + if (!node) throw new Error('No node provided') + + const kind = node.getKind() + + if (kind === ts.SyntaxKind.TypeAliasDeclaration) { + const definition = generateDefinition(node, [], project) as ObjectDefinition + if (definition.properties) { + definition.properties = Object.fromEntries( + await Promise.all( + Object.entries(definition.properties) + // Exclude private properties + .filter(([name]) => !name.startsWith('$') && !name.startsWith('_') && !name.startsWith('Ψ')) + .map(async ([name, prop]) => [name, await prettifyType(name, prop)]) + ) + ) + } + return definition + } + + throw new Error(`Unsupported node kind: ${kind}`) +} + +export async function generateComposableDataFromTypes (): Promise { + const sourceFile = project.addSourceFileAtPath('./templates/composables.d.ts') + + const composables = await inspect(project, sourceFile.getTypeAlias('Composables')) + + return Promise.all( + Object.entries(composables.properties).map(async ([name, data]) => { + const returnType = (data as FunctionDefinition).returnType + let exposed: Record = {} + if (returnType.type === 'allOf') { + exposed = returnType.items.reduce((acc, item) => { + const props = (item as ObjectDefinition).properties + Object.assign(acc, props) + return acc + }, {}) + } else if (returnType.type === 'object') { + exposed = returnType.properties + } + if (exposed) { + exposed = Object.fromEntries( + await Promise.all( + Object.entries(exposed) + .map(async ([name, prop]) => [name, await prettifyType(name, prop)]) + ) + ) + } + + const kebabName = kebabCase(name) + + return { + fileName: name, + displayName: name, + pathName: kebabName, + exposed, + } + }) + ) +} + +export async function generateDirectiveDataFromTypes (): Promise { + const sourceFile = project.addSourceFileAtPath('./templates/directives.d.ts') + + const directives = await inspect(project, sourceFile.getTypeAlias('Directives')) + + return Promise.all( + Object.entries(directives.properties).map(async ([name, data]) => { + const kebabName = kebabCase(name) + return { + fileName: `v-${kebabName}`, + displayName: `v-${kebabName}`, + pathName: `v-${kebabName}-directive`, + value: await prettifyType(name, (data as ObjectDefinition).properties.value), + argument: (data as ObjectDefinition).properties.arg, + modifiers: ((data as ObjectDefinition).properties.modifiers as ObjectDefinition).properties, + } + }) + ) +} + +export async function generateComponentDataFromTypes (component: string): Promise { + const sourceFile = project.addSourceFileAtPath(`./templates/tmp/${component}.d.ts`) + + const [ + props, + events, + slots, + exposed, + ] = await Promise.all([ + inspect(project, sourceFile.getTypeAlias('ComponentProps')), + inspect(project, sourceFile.getTypeAlias('ComponentEvents')), + inspect(project, sourceFile.getTypeAlias('ComponentSlots')), + inspect(project, sourceFile.getTypeAlias('ComponentExposed')), + ]) + + const sections = [props, events, slots, exposed] + + sections.forEach(item => { + item.text = undefined! + item.source = undefined + }) + + for (const [name, { formatted }] of Object.entries(props.properties)) { + if (formatted.length > 400) { + console.log(`\x1b[33mLong prop type (${formatted.length}): ${component}.${name}\x1b[0m`) + } + } + + return { + props: props.properties, + events: events.properties, + slots: slots.properties, + exposed: exposed.properties, + displayName: component, + fileName: component, + pathName: kebabCase(component), + sass: {}, + } +} + +type BaseDefinition = { + text: string + formatted: string + source?: string + description?: Record + descriptionSource?: Record + default?: string + optional?: boolean +} + +export type ObjectDefinition = { + type: 'object' + properties: Record +} & BaseDefinition + +type BooleanDefinition = { + type: 'boolean' + literal?: string +} & BaseDefinition + +type StringDefinition = { + type: 'string' + literal?: string +} & BaseDefinition + +type NumberDefinition = { + type: 'number' + literal?: string +} & BaseDefinition + +type UnionDefinition = { + type: 'anyOf' + items: Definition[] +} & BaseDefinition + +type IntersectionDefinition = { + type: 'allOf' + items: Definition[] +} & BaseDefinition + +type ArrayDefinition = { + type: 'array' + items: Definition[] + length?: number +} & BaseDefinition + +type FunctionDefinition = { + type: 'function' + parameters: NamedDefinition[] + returnType: Definition +} & BaseDefinition + +type RefDefinition = { + type: 'ref' + ref: string +} & BaseDefinition + +type ConstructorDefinition = { + type: 'constructor' +} & BaseDefinition + +type RecordDefinition = { + type: 'record' + key: Definition + value: Definition +} & BaseDefinition + +type InterfaceDefinition = { + type: 'interface' + name: string + parameters: NamedDefinition[] +} & BaseDefinition + +type NamedDefinition = Definition & { name: string } + +export type Definition = + | ObjectDefinition + | BooleanDefinition + | StringDefinition + | NumberDefinition + | UnionDefinition + | IntersectionDefinition + | ArrayDefinition + | FunctionDefinition + | RefDefinition + | ConstructorDefinition + | RecordDefinition + | InterfaceDefinition + +export type BaseData = { + displayName: string // user visible name used in page titles + fileName: string // file name for translation strings and generated types + pathName: string // kebab-case name for use in urls +} +export type ComponentData = BaseData & { + sass: Record + props: Record + slots: Record + events: Record + exposed: Record + value?: never + argument?: never + modifiers?: never +} +export type DirectiveData = BaseData & { + sass?: never + props?: never + slots?: never + events?: never + exposed?: never + value: Definition + argument: Definition + modifiers: Record +} +export type ComposableData = BaseData & { + sass?: never + props?: never + slots?: never + events?: never + exposed: Record + value?: never + argument?: never + modifiers?: never +} +export type PartData = ComponentData | DirectiveData | ComposableData + +function isExternalDeclaration (declaration?: Node, definitionText?: string) { + const filePath = declaration?.getSourceFile().getFilePath() + + // Some internal typescript types should be processed (Array etc) + if (filePath?.includes('/typescript/lib/') && ( + definitionText?.endsWith('[]') || + /(Record|Map|Set|NonNullable)<.*?>/.test(definitionText ?? '') + )) return false + + if (filePath?.includes('/@vue/') && /^ToRefs<.*?>/.test(definitionText!)) { + return false + } + + return filePath?.includes('/node_modules/') +} + +function getSource (declaration?: Node) { + const filePath = declaration?.getSourceFile().getFilePath() + .replace(/.*\/node_modules\//, '') + .replace(/.*\/packages\/vuetify\//, 'vuetify/') + const startLine = declaration?.getStartLineNumber() + const endLine = declaration?.getEndLineNumber() + + if (!filePath || !startLine || filePath.startsWith(process.cwd())) return undefined + + return filePath && startLine ? `${filePath}#L${startLine}-L${endLine}` : undefined +} + +// function listFlags (flags: object, value?: number) { +// if (!value) return [] + +// const entries = Object.entries(flags).filter(([_, flag]) => typeof flag === 'number') + +// return entries.reduce((arr, [name, flag]) => { +// if (value & flag) { +// arr.push(name) +// } +// return arr +// }, []) +// } + +function getCleanText (text: string) { + return text.replace(/import\(.*?\)\./g, '') +} + +function count (arr: string[], needle: string) { + return arr.reduce((count, str) => { + return str === needle ? count + 1 : count + }, 0) +} + +// Types that are displayed as links +const allowedRefs = [ + 'Anchor', + 'ActiveStrategy', + 'DataIteratorItem', + 'DataTableHeader', + 'DataTableItem', + 'FilterFunction', + 'FormValidationResult', + 'Group', + 'InternalDataTableHeader', + 'ListItem', + 'LocationStrategyFn', + 'OpenSelectStrategyFn', + 'OpenStrategy', + 'OpenStrategyFn', + 'ScrollStrategyFn', + 'SelectItemKey', + 'SelectStrategy', + 'SelectStrategyFn', + 'SortItem', + 'SubmitEventPromise', + 'TemplateRef', + 'TouchHandlers', + 'ValidationRule', +] + +// Types that displayed without their generic arguments +const plainRefs = [ + 'Component', + 'ComponentPublicInstance', + 'ComponentInternalInstance', + 'FunctionalComponent', + 'DataTableItem', + 'ListItem', + 'Group', + 'DataIteratorItem', +] + +function formatDefinition (definition: Definition) { + let formatted = '' + + switch (definition.type) { + case 'allOf': + formatted = `${definition.items.map(item => item.formatted).join(' & ')}` + break + case 'anyOf': { + const formattedItems = definition.items.map(item => ( + ['function', 'constructor'].includes(item.type) ? `(${item.formatted})` : item.formatted + )).filter(item => item !== 'null' && item !== 'undefined') + formatted = `${formattedItems.join(' | ')}` + break + } + case 'array': { + const formattedItems = definition.items.map(item => ( + ['function', 'constructor', 'allOf', 'anyOf'].includes(item.type) ? `(${item.formatted})` : item.formatted) + ).filter(item => item !== 'null' && item !== 'undefined') + if (definition.length) { + formatted = `[${formattedItems.join(', ')}]` + } else { + formatted = `${definition.items.length > 1 ? '(' : ''}${formattedItems.join(' | ')}${definition.items.length > 1 ? ')' : ''}[]` + } + break + } + case 'function': + const formattedParameters = definition.parameters.map(p => `${p.name}: ${p.formatted}`) + formatted = `(${formattedParameters.join(', ')}) => ${definition.returnType.formatted}` + break + case 'record': + formatted = `Record<${definition.key.formatted}, ${definition.value.formatted}>` + break + case 'object': + formatted = `{ ${Object.entries(definition.properties).reduce((arr, [name, prop]) => { + if (name.includes(':') || name.includes('-')) name = `'${name}'` + arr.push(`${name}: ${prop.formatted}`) + return arr + }, []).join('; ')} }` + break + case 'ref': + if (plainRefs.includes(definition.ref)) { + formatted = definition.ref + } else { + formatted = definition.text + } + break + case 'interface': + case 'boolean': + case 'number': + case 'string': + case 'constructor': + default: + formatted = definition.text + break + } + + definition.formatted = formatted + + if (allowedRefs.includes(formatted)) { + definition.formatted = `${formatted}` + } +} + +// eslint-disable-next-line complexity +function generateDefinition (node: Node, recursed: string[], project: Project, type?: Type): Definition { + const tc = project.getTypeChecker() + type = type ?? node.getType() + + if (type.getAliasSymbol()?.getName() === 'NonNullable') { + const typeArguments = type.getAliasTypeArguments() + if (typeArguments.length) { + type = typeArguments[0] + } + } + + const symbol = type.getAliasSymbol() ?? type.getSymbol() + const declaration = symbol?.getDeclarations()?.[0] + const targetType = type.getTargetType() + + let definition: Definition = { + text: getCleanText(type.getText()), + source: getSource(declaration), + } as Definition + + if ( + count(recursed, type.getText()) > 1 || + allowedRefs.includes(symbol?.getName() as string) || + isExternalDeclaration(declaration, definition.text) + ) { + definition = definition as RefDefinition + definition.type = 'ref' + + // TODO: Parse this better? + definition.ref = symbol?.getFullyQualifiedName().replace(/".*"\./, '') ?? '' + } else if (type.isAny() || type.isUnknown() || type.isNever()) { + // @ts-expect-error asd + definition.type = type.getText() + } else if (type.isBoolean() || type.isBooleanLiteral()) { + definition = definition as BooleanDefinition + definition.type = 'boolean' + definition.literal = type.isBooleanLiteral() ? type.getText() : undefined + } else if (type.isString() || type.isStringLiteral()) { + definition = definition as StringDefinition + definition.type = 'string' + definition.literal = type.isStringLiteral() ? type.getText() : undefined + } else if (type.isNumber() || type.isNumberLiteral()) { + definition = definition as NumberDefinition + definition.type = 'number' + definition.literal = type.isNumberLiteral() ? type.getText() : undefined + } else if (type.isArray()) { + definition = definition as ArrayDefinition + definition.type = 'array' + + const arrayElementType = type.getArrayElementType() + + const arrayType = generateDefinition(node, getRecursiveTypes(recursed, type), project, arrayElementType) + + definition.items = arrayType.type === 'anyOf' ? arrayType.items : [arrayType] + } else if (type.isIntersection()) { + definition = definition as IntersectionDefinition + definition.type = 'allOf' + definition.items = type.getIntersectionTypes() + .map(intersectionType => generateDefinition(node, recursed, project, intersectionType)) + + // TODO: Should we collapse allOf with only objects to single object? + } else if (type.isUnion()) { + definition = definition as UnionDefinition + definition.type = 'anyOf' + definition.items = getUnionTypes(type) + .map(unionType => generateDefinition(node, recursed, project, unionType)) + + // Replace explicit true|false with boolean + // TODO: Do this some other way + let found = -1 + for (let i = 0; i < definition.items.length; i++) { + const item = definition.items[i] + + if (item.type === 'boolean' && item.literal != null) { + if (~found) { + definition.items.splice(i, 1) + definition.items.splice(found, 1, { + text: 'boolean', + type: 'boolean', + formatted: 'boolean', + }) + break + } else { + found = i + } + } + } + } else if (type.getConstructSignatures().length) { + definition = definition as ConstructorDefinition + definition.type = 'constructor' + } else if (type.getCallSignatures().length) { + definition = definition as FunctionDefinition + definition.type = 'function' + + const signature = type.getCallSignatures()[0] + + definition.parameters = signature.getParameters().map(parameter => { + const parameterType = tc.getTypeOfSymbolAtLocation(parameter, node) + return { + name: parameter.getEscapedName(), + optional: parameter.isOptional(), + ...generateDefinition(node, getRecursiveTypes(recursed, parameterType), project, parameterType), + } + }) + const returnType = signature.getReturnType() + definition.returnType = generateDefinition(node, getRecursiveTypes(recursed, returnType), project, returnType) + } else if (targetType && /^(Map|Set)<.*>/.test(definition.text)) { // TODO: Better way to detect Map/Set type + definition = definition as InterfaceDefinition + definition.type = 'interface' + definition.name = targetType?.getText() + const instanceTypeArguments = type.getTypeArguments() + definition.parameters = targetType?.getTypeArguments().map((arg, i) => { + return { name: arg.getText(), ...generateDefinition(node, recursed, project, instanceTypeArguments[i]) } + }) + } else if (/^Record<.*>/.test(definition.text)) { // TODO: Better way to detect Record type + definition = definition as RecordDefinition + definition.type = 'record' + definition.key = generateDefinition(node, recursed, project, type.getAliasTypeArguments()[0]) + definition.value = generateDefinition(node, recursed, project, type.getAliasTypeArguments()[1]) + } else if (type.isTuple()) { + definition = definition as ArrayDefinition + definition.type = 'array' + definition.items = type.getTupleElements().map(t => generateDefinition(node, recursed, project, t)) + definition.length = definition.items.length + } else if (type.isObject()) { + definition = definition as ObjectDefinition + definition.type = 'object' + definition.properties = {} + + for (const property of type.getProperties()) { + const propertyName = property.getEscapedName() + const propertyType = tc.getTypeOfSymbolAtLocation(property, node) + + definition.properties[propertyName] = generateDefinition(node, getRecursiveTypes(recursed, propertyType), project, propertyType) + + definition.properties[propertyName].optional = property.isOptional() + } + if (type.compilerType.indexInfos.length) { + for (const index of type.compilerType.indexInfos) { + const indexName = '[' + type._context.compilerFactory.getType(index.keyType).getText() + ']' + const indexType = type._context.compilerFactory.getType(index.type) + definition.properties[indexName] = generateDefinition(node, getRecursiveTypes(recursed, indexType), project, indexType) + definition.properties[indexName].optional = true + } + } + } else if (ts.TypeFlags.Void & type.getFlags()) { + // @ts-expect-error asd + definition.type = 'void' + } else { + // @ts-expect-error asd + definition.type = 'UNSUPPORTED' + } + + formatDefinition(definition) + + return definition +} + +/** type.getUnionTypes() but without unwrapping named string unions */ +function getUnionTypes (type: Type): Type[] { + if (!type.isUnion()) return [type] + + const compilerType = (type as any).compilerType + + if (compilerType.origin) { + return compilerType.origin.types + .map((unionType: any) => (type as any)._context.compilerFactory.getType(unionType)) + } else { + return type.getUnionTypes() + } +} + +// function getRecursiveObjectTypes (recursiveTypes: string[], type: Type) { +// return recursiveTypes.slice().concat(findPotentialRecursiveObjectTypes(type)) +// } + +// function getRecursiveArrayTypes (recursiveTypes: string[], type: Type) { +// return recursiveTypes.slice().concat(findPotentialRecursiveArrayTypes(type)) +// } + +// function findPotentialRecursiveObjectTypes (type: Type) { +// if (type == null || type.isArray()) return [] + +// const recursiveTypes = [] + +// if (type.isUnionOrIntersection()) { +// recursiveTypes.push(...type.getAliasTypeArguments().map(t => t.getText())) +// } else if (type.getAliasSymbol() || type.isClassOrInterface() || type.getTypeArguments().length) { +// recursiveTypes.push(type.getText()) +// } + +// return recursiveTypes +// } + +// function findPotentialRecursiveArrayTypes (type: Type) { +// if (type == null) return [] + +// const recursiveTypes = [] + +// if (type.isUnionOrIntersection()) { +// recursiveTypes.push(...type.getAliasTypeArguments().map(t => t.getText())) +// } else if (type.isArray()) { +// recursiveTypes.push(...findPotentialRecursiveArrayTypes(type.getArrayElementType())) +// } else if (type.getAliasSymbol() || type.isClassOrInterface() || type.getTypeArguments().length) { +// recursiveTypes.push(type.getText()) +// } + +// return recursiveTypes +// } + +function getRecursiveTypes (recursiveTypes: string[], type: Type) { + return recursiveTypes.slice().concat(findPotentialRecursiveTypes(type)) +} + +function findPotentialRecursiveTypes (type?: Type): string[] { + if (type == null) return [] + + const recursiveTypes: string[] = [] + + if (type.isUnion()) { + recursiveTypes.push(...getUnionTypes(type).map(t => t.getText())) + } else if (type.isIntersection()) { + recursiveTypes.push(...type.getIntersectionTypes().map(t => t.getText())) + } else if (type.isArray()) { + recursiveTypes.push(...findPotentialRecursiveTypes(type.getArrayElementType())) + } else if (type.getAliasSymbol() || type.isClassOrInterface() || type.getTypeArguments().length) { + recursiveTypes.push(type.getText()) + } + + return recursiveTypes +} diff --git a/packages/api-generator/src/utils.ts b/packages/api-generator/src/utils.ts new file mode 100644 index 0000000..b575f21 --- /dev/null +++ b/packages/api-generator/src/utils.ts @@ -0,0 +1,244 @@ +import { execSync } from 'child_process' +import stringifyObject from 'stringify-object' +import prettier from 'prettier' +import * as typescriptParser from 'prettier/plugins/typescript' +import type { Definition, DirectiveData } from './types' + +function parseFunctionParams (func: string) { + const [, regular] = /function\s\((.*)\)\s\{.*/i.exec(func) || [] + const [, arrow] = /\((.*)\)\s=>\s\{.*/i.exec(func) || [] + const args = regular || arrow + + return args ? `(${args}) => {}` : undefined +} + +function getPropType (type: any | any[]): string | string[] { + if (Array.isArray(type)) { + return type.flatMap(t => getPropType(t)) + } + + if (!type) return 'any' + + return type.name.toLowerCase() +} + +function getPropDefault (definition: any, type: string | string[]) { + const def = definition?.default + + if (typeof def === 'function' && type !== 'function') { + return def.call({}, {}) + } + + if (typeof def === 'string') { + return def ? `'${def}'` : def + } + + if (type === 'function') { + return parseFunctionParams(def) + } + + if ((!definition || !('default' in definition)) && ( + type === 'boolean' || + (Array.isArray(type) && type.includes('boolean')) + )) { + return false + } + + return def +} + +type ComponentData = { + props?: Record + slots?: Record + events?: Record + exposed?: Record +} + +export function addPropData ( + name: string, + componentData: ComponentData, + componentProps: any +) { + const sources = new Set() + for (const [propName, propObj] of Object.entries(componentData.props ?? {})) { + const instancePropObj = componentProps[propName] + + ;(propObj as any).default = instancePropObj?.default + ;(propObj as any).source = instancePropObj?.source + + sources.add(instancePropObj?.source ?? name) + } + + return [...sources.values()] +} + +export function stringifyProps (props: any) { + return Object.fromEntries( + Object.entries(props).map(([key, prop]) => { + let def = typeof prop === 'object' + ? getPropDefault(prop, getPropType(prop?.type)) + : getPropDefault(undefined, getPropType(prop)) + + if (typeof def === 'object') { + def = stringifyObject(def, { + indent: ' ', + inlineCharacterLimit: 60, + filter (obj, property) { + if (typeof obj === 'object' && !Array.isArray(obj) && obj != null && 'name' in obj && 'props' in obj && 'setup' in obj) { + return property === 'name' + } + return true + }, + }) + } + + return [key, { + source: prop?.source, + default: def, + }] + }) + ) +} + +const localeCache = new Map() +async function loadLocale (componentName: string, locale: string): Promise>> { + const cacheKey = `${locale}/${componentName}` + if (localeCache.has(cacheKey)) { + return localeCache.get(cacheKey) as any + } + try { + const data = await import(`../src/locale/${cacheKey}.json`, { + assert: { type: 'json' }, + }) + localeCache.set(cacheKey, data.default) + return data.default + } catch (err: any) { + if (err.code === 'ERR_MODULE_NOT_FOUND') { + console.error(`\x1b[35mMissing locale for ${cacheKey}\x1b[0m`) + localeCache.set(cacheKey, {}) + } else { + console.error('\x1b[31m', err.message, '\x1b[0m') + } + return {} + } +} + +const currentBranch = execSync('git branch --show-current', { encoding: 'utf-8' }).trim() + +async function getSources (name: string, locale: string, sources: string[]) { + const arr = await Promise.all([ + loadLocale(name, locale), + ...sources.map(source => loadLocale(source, locale)), + loadLocale('generic', locale), + ]) + const sourcesMap = [name, ...sources, 'generic'] + + return { + find (section: string, key?: string, ogSource = name) { + for (let i = 0; i < arr.length; i++) { + const source = arr[i] as any + const found: string | undefined = ['argument', 'value'].includes(section) + ? source?.[section] + : source?.[section]?.[key!] + if (found) { + return { text: found, source: sourcesMap[i] } + } + } + const githubUrl = `https://github.com/vuetifyjs/vuetify/tree/${currentBranch}/packages/api-generator/src/locale/${locale}/${ogSource}.json` + return { text: `MISSING DESCRIPTION ([edit in github](${githubUrl}))`, source: name } + }, + } +} + +export async function addDescriptions (name: string, componentData: ComponentData, locales: string[], sources: string[] = []) { + for (const locale of locales) { + const descriptions = await getSources(name, locale, sources) + + for (const section of ['props', 'slots', 'events', 'exposed'] as const) { + for (const [propName, propObj] of Object.entries(componentData[section] ?? {})) { + propObj.description = propObj.description ?? {} + propObj.descriptionSource = propObj.descriptionSource ?? {} + + const found = descriptions.find(section, propName, propObj.source) + propObj.description![locale] = found.text + propObj.descriptionSource![locale] = found.source + } + } + } +} + +export async function addDirectiveDescriptions ( + name: string, + componentData: DirectiveData, + locales: string[], + sources: string[] = [], +) { + for (const locale of locales) { + const descriptions = await getSources(name, locale, sources) + + if (componentData.value) { + componentData.value.description = componentData.value.description ?? {} + componentData.value.description[locale] = descriptions.find('value')?.text + } + + if (componentData.argument) { + componentData.argument.description = componentData.argument.description ?? {} + componentData.argument.description[locale] = descriptions.find('argument')?.text + } + + if (componentData.modifiers) { + for (const [name, modifier] of Object.entries(componentData.modifiers)) { + modifier.description = modifier.description ?? {} + modifier.description[locale] = descriptions.find('modifiers', name)?.text + } + } + } +} + +export function stripLinks (str: string): [string, Record] { + let out = str.slice() + const obj: Record = {} + const regexp = /(.*?)<\/a>/g + + let matches = regexp.exec(str) + + while (matches !== null) { + obj[matches[1]] = matches[0] + out = out.replace(matches[0], matches[1]) + + matches = regexp.exec(str) + } + + return [out, obj] +} + +export function insertLinks (str: string, stripped: Record) { + for (const [key, value] of Object.entries(stripped)) { + str = str.replaceAll(new RegExp(`(^|\\W)(${key})(\\W|$)`, 'g'), `$1${value}$3`) + } + return str +} + +export async function prettifyType (name: string, item: Definition) { + const prefix = 'type Type = ' + const [str, stripped] = stripLinks(item.formatted) + let formatted + try { + formatted = await prettier.format(prefix + str, { + parser: 'typescript', + plugins: [typescriptParser], + bracketSpacing: true, + semi: false, + singleQuote: true, + trailingComma: 'all', + }) + } catch (err: any) { + console.error('\x1b[31m', `${name}:`, err.message, '\x1b[0m') + return item + } + + return { + ...item, + formatted: insertLinks(formatted, stripped).replace(/type\sType\s=\s+?/m, ''), + } +} diff --git a/packages/api-generator/src/vetur.ts b/packages/api-generator/src/vetur.ts new file mode 100644 index 0000000..08b7714 --- /dev/null +++ b/packages/api-generator/src/vetur.ts @@ -0,0 +1,31 @@ +import fs from 'fs' +import { kebabCase } from './helpers/text' +import type { ComponentData } from './types' + +export function createVeturApi (componentData: ComponentData[]) { + const tags = componentData.reduce((obj, component) => { + return { + ...obj, + [component.fileName]: { + attributes: Object.keys(component.props ?? {}).map(name => kebabCase(name)).sort(), + description: '', + }, + } + }, {}) + + const attributes = componentData.reduce((obj, component) => { + const attrs = Object.entries(component.props ?? {}).reduce((curr, [name, prop]) => { + curr[`${component.fileName}/${kebabCase(name)}`] = { + type: prop.formatted, + description: prop.description!.en || '', + } + + return curr + }, {} as Record) + Object.assign(obj, attrs) + return obj + }, {}) + + fs.writeFileSync('dist/tags.json', JSON.stringify(tags, null, 2)) + fs.writeFileSync('dist/attributes.json', JSON.stringify(attributes, null, 2)) +} diff --git a/packages/api-generator/src/web-types.ts b/packages/api-generator/src/web-types.ts new file mode 100644 index 0000000..e2cc530 --- /dev/null +++ b/packages/api-generator/src/web-types.ts @@ -0,0 +1,139 @@ +import fs from 'fs' +import { capitalize } from './helpers/text' +import type { ComponentData, DirectiveData } from './types' +import pkg from '../package.json' assert { type: 'json' } + +export const createWebTypesApi = (componentData: ComponentData[], directiveData: DirectiveData[]) => { + const getDocUrl = (cmp: string, heading?: string) => + `https://vuetifyjs.com/api/${cmp}` + (heading ? `#${heading}` : '') + + const createTypedEntity = (name: string, type: string) => { + return { + name, + type, + } + } + + const createTag = (component: ComponentData) => { + const createTagSlot = ([name, slot]: [string, any]) => { + return { + name, + pattern: undefined, + description: slot.description.en || '', + 'doc-url': getDocUrl(component.pathName, 'slots'), + 'vue-properties': slot.properties && + Object.entries(slot.properties ?? {}).map(([name, prop]) => createTypedEntity(name, (prop as any).formatted)), + } + } + + const createTagEvent = ([name, event]: [string, any]) => { + return { + name, + description: event.description.en || '', + 'doc-url': getDocUrl(component.pathName, 'events'), + arguments: [createTypedEntity('argument', event.formatted)], + } + } + + const createTagValue = (type: string) => { + return { + kind: 'expression', + type: type?.trim(), + } + } + + const createTagAttribute = ([name, prop]: [string, any]) => { + return { + name, + description: prop.description.en || '', + 'doc-url': getDocUrl(component.fileName, 'props'), + default: typeof prop.default !== 'string' ? JSON.stringify(prop.default) : prop.default, + required: undefined, // TODO: implement this + value: createTagValue(prop.formatted), + type: prop.formatted === 'boolean' ? 'boolean' : undefined, // this is deprecated but should be const 'boolean' for compatibility with 2019.2 + } + } + + return { + name: component.displayName, + source: { + module: './src/components/index.ts', + symbol: component.displayName, + }, + aliases: undefined, // TODO: are we using this? deprecated name changes? + description: '', // TODO: we should probably include component description in locale files + 'doc-url': getDocUrl(component.pathName), + attributes: Object.entries(component.props ?? {}).map(createTagAttribute), + events: Object.entries(component.events ?? {}).map(createTagEvent), + slots: Object.entries(component.slots ?? {}).map(createTagSlot), + 'vue-model': { // TODO: we should expose this in api data if we can + prop: 'modelValue', + event: 'update:modelValue', + }, + } + } + + const createAttribute = (directive: DirectiveData) => { + const createAttributeVueArgument = (argument: any) => { + return { + pattern: undefined, + description: argument.description.en, + 'doc-url': getDocUrl(directive.pathName, 'argument'), + required: undefined, + } + } + + const createAttributeVueModifier = ([name, modifier]: [string, any]) => { + return { + name, + pattern: undefined, + description: modifier.description.en || '', + 'doc-url': getDocUrl(directive.pathName, 'modifiers'), + } + } + + const createAttributeValue = (argument: any) => { + return { + kind: 'expression', + type: argument.text, + } + } + + return { + name: directive.displayName, + aliases: undefined, + description: '', // TODO: we should probably include directive description in locale files + 'doc-url': getDocUrl(directive.pathName), + default: '', + required: false, + value: createAttributeValue(directive.value), + source: { + module: './src/directives/index.ts', + symbol: capitalize(directive.displayName.slice(2)), + }, + 'vue-argument': directive.argument && createAttributeVueArgument(directive.argument), + 'vue-modifiers': directive.modifiers && + Object.entries(directive.modifiers).map(createAttributeVueModifier), + } + } + + const tags = componentData.map(createTag) + const attributes = directiveData.map(createAttribute) + + const webTypes = { + $schema: 'http://json.schemastore.org/web-types', + framework: 'vue', + name: 'vuetify', + version: pkg.version, + contributions: { + html: { + 'types-syntax': 'typescript', + 'description-markup': 'markdown', + tags, + attributes, + }, + }, + } + + fs.writeFileSync('dist/web-types.json', JSON.stringify(webTypes, null, 2)) +} diff --git a/packages/api-generator/src/worker.ts b/packages/api-generator/src/worker.ts new file mode 100644 index 0000000..c0d474f --- /dev/null +++ b/packages/api-generator/src/worker.ts @@ -0,0 +1,16 @@ +import { generateComponentDataFromTypes } from './types' + +const reset = '\x1b[0m' +const red = '\x1b[31m' +const blue = '\x1b[34m' + +export default async (componentName: string) => { + console.log(blue, componentName, reset) + + try { + return await generateComponentDataFromTypes(componentName) + } catch (err: any) { + console.error(red, `${componentName}: ${err}`, err.stack, reset) + return null + } +} diff --git a/packages/api-generator/templates/component.d.ts b/packages/api-generator/templates/component.d.ts new file mode 100644 index 0000000..545f9de --- /dev/null +++ b/packages/api-generator/templates/component.d.ts @@ -0,0 +1,67 @@ +import type { AllowedComponentProps, ComponentPublicInstance, FunctionalComponent, RenderFunction, VNodeChild, VNodeProps } from 'vue' +import type { __component__ } from '@/__name__' + +type StripProps = keyof VNodeProps | keyof AllowedComponentProps | 'v-slots' | '$children' | `v-slot:${string}` +type Event = `on${string}` + +type Props = T extends { $props: infer P extends object } + ? { + [K in Exclude]: Exclude extends VNodeProps + ? unknown + : P[K] + } + : never + +type Events = T extends { $props: infer P extends object } + ? { + [K in Exclude as K extends `on${infer N}` + ? Uncapitalize + : never + ]: Exclude extends ((...args: any[]) => any) + ? Parameters> + : never + } + : never + +export type ComponentProps = Props<__component__> +export type ComponentEvents = Events<__component__> + +type RemoveIndex = { + [K in keyof T as string extends K + ? never + : number extends K + ? never + : symbol extends K + ? never + : K + ]: T[K] +} + +type Slot = (...args: T) => VNodeChild +type Slots< + T extends { $props: any }, + S = '$children' extends keyof T['$props'] ? Exclude : never +> = '$children' extends keyof T['$props'] + ? ExcludeEmpty<{ [K in keyof S]-?: Exclude extends Slot ? A[0] : never }> + : never + +type AtLeastOne }> = Partial & U[keyof U] +type ExcludeEmpty = T extends AtLeastOne ? T : never + +export type ComponentSlots = Slots<__component__> + +type ExtractExposed = T extends (...args: any[]) => infer R + ? R extends Promise + ? never + : R extends RenderFunction + ? never + : R extends void + ? never + : R extends HTMLElement + ? never + : R extends object + ? RemoveIndex + : never + : never + +export type ComponentExposed = ExtractExposed<__component__['$options']['setup']> diff --git a/packages/api-generator/templates/composables.d.ts b/packages/api-generator/templates/composables.d.ts new file mode 100644 index 0000000..dbc9033 --- /dev/null +++ b/packages/api-generator/templates/composables.d.ts @@ -0,0 +1,13 @@ +import type vuetify from '../../vuetify/lib/index.d.mts' + +type IsComposable = T extends `use${Capitalize}` ? T : never; + +type ExtractComposables = T extends object + ? { + [K in keyof T as K extends IsComposable ? K : never]: T[K] + } + : never + +export type Composables = Prettify> + +type Prettify = { [K in keyof T]: T[K] } & {} diff --git a/packages/api-generator/templates/directives.d.ts b/packages/api-generator/templates/directives.d.ts new file mode 100644 index 0000000..06211c1 --- /dev/null +++ b/packages/api-generator/templates/directives.d.ts @@ -0,0 +1,37 @@ +import type { DirectiveBinding, ObjectDirective } from 'vue' +import type { CustomDirective } from '../../vuetify/src/composables/directiveComponent' +import type * as directives from '../../vuetify/src/directives/index.ts' + +type ExtractDirectiveBindings = T extends object + ? { + [K in keyof T]: T[K] extends CustomDirective + ? { + [K in Exclude]: K extends 'modifiers' + ? Record extends M[K] ? never : M[K] + : K extends 'arg' + ? string extends M[K] ? never : M[K] + : M[K] + } & {} + : T[K] extends { mounted: infer M } + ? M extends (first: any, second: infer B) => any + ? B extends object + ? { + [KK in keyof B as KK extends keyof Omit ? never : KK]: B[KK] + } + : never + : never + : T[K] extends ObjectDirective + ? B extends object + ? { value: B, modifiers: {} } + : never + : never + } + : never + +type Plain = T extends object + ? { + [K in keyof T]: T[K] + } + : never + +export type Directives = Plain> diff --git a/packages/api-generator/tsconfig.json b/packages/api-generator/tsconfig.json new file mode 100644 index 0000000..2d95541 --- /dev/null +++ b/packages/api-generator/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "strict": true, + "noUnusedLocals": false, + "module": "ESNext", + "moduleResolution": "bundler", + "noEmitOnError": false, + "resolveJsonModule": true, + "paths": { + "@/*": [ + "../vuetify/src/*" + ] + }, + }, + "include": [ + "./src/locale/**/*.json", + ], +} diff --git a/packages/docs/.browserslistrc b/packages/docs/.browserslistrc new file mode 100644 index 0000000..a6b4e83 --- /dev/null +++ b/packages/docs/.browserslistrc @@ -0,0 +1,10 @@ +>0.5% +Chrome >0 and since 2021-05 +ChromeAndroid >0 and since 2021-05 +Firefox >0 and since 2021-05 +FirefoxAndroid >0 and since 2021-05 +Safari >0 and since 2021-05 +iOS >0 and since 2021-05 +not dead +not op_mini all +not and_uc 1 diff --git a/packages/docs/.env.example b/packages/docs/.env.example new file mode 100644 index 0000000..90c7331 --- /dev/null +++ b/packages/docs/.env.example @@ -0,0 +1,22 @@ +# Development +EN_LOCALE_ONLY=true +HOST=localhost +PORT=8095 + +# Private authentication API +VITE_API_SERVER_URL= + +# Cosmic.js +VITE_COSMIC_2_BUCKET_SLUG= +VITE_COSMIC_2_BUCKET_READ_KEY= + +VITE_COSMIC_BUCKET_SLUG= +VITE_COSMIC_BUCKET_READ_KEY= + +VITE_COSMIC_BUCKET_SLUG_STORE= +VITE_COSMIC_BUCKET_READ_KEY_STORE= + +# Emailjs +VITE_EMAILJS_SERVICE_ID= +VITE_EMAILJS_TEMPLATE_ID= +VITE_EMAILJS_PUBLIC_KEY= diff --git a/packages/docs/.eslintignore b/packages/docs/.eslintignore new file mode 100644 index 0000000..1e69887 --- /dev/null +++ b/packages/docs/.eslintignore @@ -0,0 +1 @@ +src/api/* diff --git a/packages/docs/.eslintrc.js b/packages/docs/.eslintrc.js new file mode 100644 index 0000000..80ac391 --- /dev/null +++ b/packages/docs/.eslintrc.js @@ -0,0 +1,59 @@ +module.exports = { + env: { + 'vue/setup-compiler-macros': true, + }, + rules: { + 'no-undef': 'off', + 'vue/multi-word-component-names': 'off', + }, + overrides: [ + { + files: [ + 'src/components/**/*.vue', + ], + rules: { + 'max-len': 'off', + }, + }, + { + files: [ + 'src/examples/**/*.vue', + ], + rules: { + 'max-len': 'off', // lorem ipsum is long + 'vue/html-self-closing': ['error', { + html: { + void: 'never', + normal: 'never', + component: 'never', + }, + svg: 'always', + math: 'always', + }], + 'vue/v-slot-style': ['warn', { + default: 'longform', + named: 'longform', + }], + // 'vuetify/no-deprecated-classes': 'error', + // 'vuetify/grid-unknown-attributes': 'error', + // 'vuetify/no-legacy-grid': 'error', + 'import/newline-after-import': ['error', { count: 1 }], + + // Script blocks normally both run and render, but in examples we + // remove the options block so it is safe to import things in both + 'import/first': 'off', + 'import/no-duplicates': 'off', + 'no-redeclare': 'off', + 'no-use-before-define': 'off', + }, + }, + { + files: [ + 'src/examples/**/usage.vue', + ], + rules: { + 'vue/html-self-closing': 'warn', + }, + }, + ], +} diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore new file mode 100644 index 0000000..39d13ae --- /dev/null +++ b/packages/docs/.gitignore @@ -0,0 +1,27 @@ +.DS_Store +node_modules +/dist +/src/api +/src/pages/* +!/src/pages/en +.vite-ssg-temp + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +.vercel diff --git a/packages/docs/.markdownlintrc b/packages/docs/.markdownlintrc new file mode 100644 index 0000000..c6e3011 --- /dev/null +++ b/packages/docs/.markdownlintrc @@ -0,0 +1,14 @@ +{ + "line-length": false, + "blanks-around-headings": true, + "single-title": { + "front_matter_title": "" + }, + "no-trailing-punctuation": false, + "ol-prefix": false, + "no-inline-html": false, + "no-emphasis-as-heading": false, + "no-bare-urls": false, + "emphasis-style": false, + "link-fragments": false +} diff --git a/packages/docs/auto-imports.d.ts b/packages/docs/auto-imports.d.ts new file mode 100644 index 0000000..15cb2c8 --- /dev/null +++ b/packages/docs/auto-imports.d.ts @@ -0,0 +1,281 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +export {} +declare global { + const ComponentPublicInstance: typeof import('vue')['ComponentPublicInstance'] + const IN_BROWSER: typeof import('./src/utils/globals')['IN_BROWSER'] + const IS_DEBUG: typeof import('./src/utils/globals')['IS_DEBUG'] + const IS_PROD: typeof import('./src/utils/globals')['IS_PROD'] + const IS_SERVER: typeof import('./src/utils/globals')['IS_SERVER'] + const PropType: typeof import('vue')['PropType'] + const anyLanguagePattern: typeof import('./src/utils/routes')['anyLanguagePattern'] + const camelCase: typeof import('lodash-es')['camelCase'] + const camelize: typeof import('vue')['camelize'] + const computed: typeof import('vue')['computed'] + const configureMarkdown: typeof import('./src/utils/markdown-it')['configureMarkdown'] + const copyElementContent: typeof import('./src/utils/helpers')['copyElementContent'] + const createAdProps: typeof import('./src/composables/ad')['createAdProps'] + const createOne: typeof import('@vuetify/one')['createOne'] + const defineStore: typeof import('pinia')['defineStore'] + const disabledLanguagePattern: typeof import('./src/utils/routes')['disabledLanguagePattern'] + const distance: typeof import('./src/utils/helpers')['distance'] + const eventName: typeof import('./src/utils/helpers')['eventName'] + const genAppMetaInfo: typeof import('./src/utils/metadata')['genAppMetaInfo'] + const genMetaInfo: typeof import('./src/utils/metadata')['genMetaInfo'] + const generatedRoutes: typeof import('./src/utils/routes')['generatedRoutes'] + const getBranch: typeof import('./src/utils/helpers')['getBranch'] + const getMatchMedia: typeof import('./src/utils/helpers')['getMatchMedia'] + const gtagClick: typeof import('./src/utils/analytics')['gtagClick'] + const h: typeof import('vue')['h'] + const insertLinks: typeof import('./src/utils/api')['insertLinks'] + const isOn: typeof import('./src/utils/helpers')['isOn'] + const kebabCase: typeof import('lodash-es')['kebabCase'] + const languagePattern: typeof import('./src/utils/routes')['languagePattern'] + const leadingSlash: typeof import('./src/utils/routes')['leadingSlash'] + const markdownItRules: typeof import('./src/utils/markdown-it-rules')['default'] + const mergeProps: typeof import('vue')['mergeProps'] + const nextTick: typeof import('vue')['nextTick'] + const onBeforeMount: typeof import('vue')['onBeforeMount'] + const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave'] + const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate'] + const onBeforeUnMount: typeof import('vue')['onBeforeUnMount'] + const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] + const onMounted: typeof import('vue')['onMounted'] + const onScopeDispose: typeof import('vue')['onScopeDispose'] + const onServerPrefetch: typeof import('vue')['onServerPrefetch'] + const preferredLocale: typeof import('./src/utils/routes')['preferredLocale'] + const propsToString: typeof import('./src/utils/helpers')['propsToString'] + const redirectRoutes: typeof import('./src/utils/routes')['redirectRoutes'] + const ref: typeof import('vue')['ref'] + const rpath: typeof import('./src/utils/routes')['rpath'] + const shallowRef: typeof import('vue')['shallowRef'] + const storeToRefs: typeof import('pinia')['storeToRefs'] + const stripLinks: typeof import('./src/utils/api')['stripLinks'] + const trailingSlash: typeof import('./src/utils/routes')['trailingSlash'] + const upperFirst: typeof import('lodash-es')['upperFirst'] + const useAd: typeof import('./src/composables/ad')['useAd'] + const useAdsStore: typeof import('./src/stores/ads')['useAdsStore'] + const useAppStore: typeof import('./src/stores/app')['useAppStore'] + const useAttrs: typeof import('vue')['useAttrs'] + const useAuthStore: typeof import('@vuetify/one')['useAuthStore'] + const useCommitsStore: typeof import('./src/stores/commits')['useCommitsStore'] + const useCosmic: typeof import('./src/composables/cosmic')['useCosmic'] + const useDate: typeof import('vuetify')['useDate'] + const useDisplay: typeof import('vuetify')['useDisplay'] + const useGoTo: typeof import('vuetify')['useGoTo'] + const useGtag: typeof import('vue-gtag-next')['useGtag'] + const useHttpStore: typeof import('@vuetify/one')['useHttpStore'] + const useI18n: typeof import('vue-i18n')['useI18n'] + const useJobsStore: typeof import('./src/stores/jobs')['useJobsStore'] + const useLocaleStore: typeof import('./src/stores/locale')['useLocaleStore'] + const useMadeWithVuetifyStore: typeof import('./src/stores/made-with-vuetify')['useMadeWithVuetifyStore'] + const useOneStore: typeof import('@vuetify/one')['useOneStore'] + const usePinsStore: typeof import('./src/stores/pins')['usePinsStore'] + const usePlayground: typeof import('./src/composables/playground')['usePlayground'] + const useProductsStore: typeof import('@vuetify/one')['useProductsStore'] + const usePromotionsStore: typeof import('./src/stores/promotions')['usePromotionsStore'] + const useQueueStore: typeof import('@vuetify/one')['useQueueStore'] + const useReleasesStore: typeof import('./src/stores/releases')['useReleasesStore'] + const useRoute: typeof import('vue-router')['useRoute'] + const useRouter: typeof import('vue-router')['useRouter'] + const useRtl: typeof import('vuetify')['useRtl'] + const useSettingsStore: typeof import('@vuetify/one')['useSettingsStore'] + const useShopifyStore: typeof import('./src/stores/shopify')['useShopifyStore'] + const useSponsorsStore: typeof import('./src/stores/sponsors')['useSponsorsStore'] + const useSpotStore: typeof import('./src/stores/spot')['useSpotStore'] + const useTeamStore: typeof import('./src/stores/team')['useTeamStore'] + const useTheme: typeof import('vuetify')['useTheme'] + const useUserStore: typeof import('@vuetify/one')['useUserStore'] + const wait: typeof import('./src/utils/helpers')['wait'] + const waitForReadystate: typeof import('./src/utils/helpers')['waitForReadystate'] + const watch: typeof import('vue')['watch'] + const watchEffect: typeof import('vue')['watchEffect'] + const wrapInArray: typeof import('./src/utils/helpers')['wrapInArray'] +} +// for vue template auto import +import { UnwrapRef } from 'vue' +declare module 'vue' { + interface GlobalComponents {} + interface ComponentCustomProperties { + readonly IN_BROWSER: UnwrapRef + readonly IS_DEBUG: UnwrapRef + readonly IS_PROD: UnwrapRef + readonly IS_SERVER: UnwrapRef + readonly anyLanguagePattern: UnwrapRef + readonly camelCase: UnwrapRef + readonly camelize: UnwrapRef + readonly computed: UnwrapRef + readonly configureMarkdown: UnwrapRef + readonly copyElementContent: UnwrapRef + readonly createAdProps: UnwrapRef + readonly createOne: UnwrapRef + readonly defineStore: UnwrapRef + readonly disabledLanguagePattern: UnwrapRef + readonly distance: UnwrapRef + readonly eventName: UnwrapRef + readonly genAppMetaInfo: UnwrapRef + readonly genMetaInfo: UnwrapRef + readonly generatedRoutes: UnwrapRef + readonly getBranch: UnwrapRef + readonly getMatchMedia: UnwrapRef + readonly gtagClick: UnwrapRef + readonly h: UnwrapRef + readonly insertLinks: UnwrapRef + readonly isOn: UnwrapRef + readonly kebabCase: UnwrapRef + readonly languagePattern: UnwrapRef + readonly leadingSlash: UnwrapRef + readonly markdownItRules: UnwrapRef + readonly mergeProps: UnwrapRef + readonly nextTick: UnwrapRef + readonly onBeforeMount: UnwrapRef + readonly onBeforeRouteLeave: UnwrapRef + readonly onBeforeRouteUpdate: UnwrapRef + readonly onBeforeUnmount: UnwrapRef + readonly onMounted: UnwrapRef + readonly onScopeDispose: UnwrapRef + readonly onServerPrefetch: UnwrapRef + readonly preferredLocale: UnwrapRef + readonly propsToString: UnwrapRef + readonly redirectRoutes: UnwrapRef + readonly ref: UnwrapRef + readonly rpath: UnwrapRef + readonly shallowRef: UnwrapRef + readonly storeToRefs: UnwrapRef + readonly stripLinks: UnwrapRef + readonly trailingSlash: UnwrapRef + readonly upperFirst: UnwrapRef + readonly useAd: UnwrapRef + readonly useAdsStore: UnwrapRef + readonly useAppStore: UnwrapRef + readonly useAttrs: UnwrapRef + readonly useAuthStore: UnwrapRef + readonly useCommitsStore: UnwrapRef + readonly useCosmic: UnwrapRef + readonly useDate: UnwrapRef + readonly useDisplay: UnwrapRef + readonly useGoTo: UnwrapRef + readonly useGtag: UnwrapRef + readonly useHttpStore: UnwrapRef + readonly useI18n: UnwrapRef + readonly useJobsStore: UnwrapRef + readonly useLocaleStore: UnwrapRef + readonly useMadeWithVuetifyStore: UnwrapRef + readonly useOneStore: UnwrapRef + readonly usePinsStore: UnwrapRef + readonly usePlayground: UnwrapRef + readonly useProductsStore: UnwrapRef + readonly usePromotionsStore: UnwrapRef + readonly useQueueStore: UnwrapRef + readonly useReleasesStore: UnwrapRef + readonly useRoute: UnwrapRef + readonly useRouter: UnwrapRef + readonly useRtl: UnwrapRef + readonly useSettingsStore: UnwrapRef + readonly useShopifyStore: UnwrapRef + readonly useSponsorsStore: UnwrapRef + readonly useSpotStore: UnwrapRef + readonly useTeamStore: UnwrapRef + readonly useTheme: UnwrapRef + readonly useUserStore: UnwrapRef + readonly wait: UnwrapRef + readonly waitForReadystate: UnwrapRef + readonly watch: UnwrapRef + readonly watchEffect: UnwrapRef + readonly wrapInArray: UnwrapRef + } +} +declare module '@vue/runtime-core' { + interface GlobalComponents {} + interface ComponentCustomProperties { + readonly IN_BROWSER: UnwrapRef + readonly IS_DEBUG: UnwrapRef + readonly IS_PROD: UnwrapRef + readonly IS_SERVER: UnwrapRef + readonly anyLanguagePattern: UnwrapRef + readonly camelCase: UnwrapRef + readonly camelize: UnwrapRef + readonly computed: UnwrapRef + readonly configureMarkdown: UnwrapRef + readonly copyElementContent: UnwrapRef + readonly createAdProps: UnwrapRef + readonly createOne: UnwrapRef + readonly defineStore: UnwrapRef + readonly disabledLanguagePattern: UnwrapRef + readonly distance: UnwrapRef + readonly eventName: UnwrapRef + readonly genAppMetaInfo: UnwrapRef + readonly genMetaInfo: UnwrapRef + readonly generatedRoutes: UnwrapRef + readonly getBranch: UnwrapRef + readonly getMatchMedia: UnwrapRef + readonly gtagClick: UnwrapRef + readonly h: UnwrapRef + readonly insertLinks: UnwrapRef + readonly isOn: UnwrapRef + readonly kebabCase: UnwrapRef + readonly languagePattern: UnwrapRef + readonly leadingSlash: UnwrapRef + readonly markdownItRules: UnwrapRef + readonly mergeProps: UnwrapRef + readonly nextTick: UnwrapRef + readonly onBeforeMount: UnwrapRef + readonly onBeforeRouteLeave: UnwrapRef + readonly onBeforeRouteUpdate: UnwrapRef + readonly onBeforeUnmount: UnwrapRef + readonly onMounted: UnwrapRef + readonly onScopeDispose: UnwrapRef + readonly onServerPrefetch: UnwrapRef + readonly preferredLocale: UnwrapRef + readonly propsToString: UnwrapRef + readonly redirectRoutes: UnwrapRef + readonly ref: UnwrapRef + readonly rpath: UnwrapRef + readonly shallowRef: UnwrapRef + readonly storeToRefs: UnwrapRef + readonly stripLinks: UnwrapRef + readonly trailingSlash: UnwrapRef + readonly upperFirst: UnwrapRef + readonly useAd: UnwrapRef + readonly useAdsStore: UnwrapRef + readonly useAppStore: UnwrapRef + readonly useAttrs: UnwrapRef + readonly useAuthStore: UnwrapRef + readonly useCommitsStore: UnwrapRef + readonly useCosmic: UnwrapRef + readonly useDate: UnwrapRef + readonly useDisplay: UnwrapRef + readonly useGoTo: UnwrapRef + readonly useGtag: UnwrapRef + readonly useHttpStore: UnwrapRef + readonly useI18n: UnwrapRef + readonly useJobsStore: UnwrapRef + readonly useLocaleStore: UnwrapRef + readonly useMadeWithVuetifyStore: UnwrapRef + readonly useOneStore: UnwrapRef + readonly usePinsStore: UnwrapRef + readonly usePlayground: UnwrapRef + readonly useProductsStore: UnwrapRef + readonly usePromotionsStore: UnwrapRef + readonly useQueueStore: UnwrapRef + readonly useReleasesStore: UnwrapRef + readonly useRoute: UnwrapRef + readonly useRouter: UnwrapRef + readonly useRtl: UnwrapRef + readonly useSettingsStore: UnwrapRef + readonly useShopifyStore: UnwrapRef + readonly useSponsorsStore: UnwrapRef + readonly useSpotStore: UnwrapRef + readonly useTeamStore: UnwrapRef + readonly useTheme: UnwrapRef + readonly useUserStore: UnwrapRef + readonly wait: UnwrapRef + readonly waitForReadystate: UnwrapRef + readonly watch: UnwrapRef + readonly watchEffect: UnwrapRef + readonly wrapInArray: UnwrapRef + } +} diff --git a/packages/docs/build/api-plugin.ts b/packages/docs/build/api-plugin.ts new file mode 100644 index 0000000..6043335 --- /dev/null +++ b/packages/docs/build/api-plugin.ts @@ -0,0 +1,163 @@ +// Imports +import fs from 'fs' +import path, { resolve } from 'path' +import { createRequire } from 'module' +import { startCase } from 'lodash-es' +import locales from '../src/i18n/locales.json' +import pageToApi from '../src/data/page-to-api.json' +import type { Plugin } from 'vite' +import { rimraf } from 'rimraf' +import { mkdirp } from 'mkdirp' + +const API_ROOT = resolve('../api-generator/dist/api') +const API_PAGES_ROOT = resolve('./node_modules/.cache/api-pages') + +const require = createRequire(import.meta.url) + +const sections = ['props', 'events', 'slots', 'exposed', 'sass', 'argument', 'modifiers', 'value'] as const +// This can't be imported from the api-generator because it mixes the type definitions up +type Data = { + displayName: string // user visible name used in page titles + fileName: string // file name for translation strings and generated types + pathName: string // kebab-case name for use in urls +} & Record> + +const localeList = locales + .filter(item => item.enabled) + .map(item => item.alternate || item.locale) + +function genApiLinks (componentName: string, header: string) { + const section = ['', ''] + const links = (Object.keys(pageToApi) as (keyof typeof pageToApi)[]) + .filter(page => pageToApi[page].includes(componentName)) + .reduce((acc, href) => { + const name = href.split('/')[1] + acc.push(`- [${startCase(name)}](/${href})`) + return acc + }, []) + + if (links.length && header) { + section.unshift(...[links.join('\n'), `## ${header} {#links}`]) + } + + return `${section.join('\n\n')}\n\n` +} + +function genFrontMatter (component: string) { + const fm = [ + `title: ${component} API`, + `description: API for the ${component} component.`, + `keywords: ${component}, api, vuetify`, + ] + + return `---\nmeta:\n${fm.map(s => ' ' + s).join('\n')}\n---` +} + +function genHeader (componentName: string) { + const header = [ + genFrontMatter(componentName), + `# ${componentName} API`, + '', + ] + + return `${header.join('\n\n')}\n\n` +} + +const sanitize = (str: string) => str.replace(/\$/g, '') + +async function loadMessages (locale: string) { + const prefix = path.resolve('./src/i18n/messages/') + const fallback = require(path.join(prefix, 'en.json')) + + try { + const messages = require(path.join(prefix, `${locale}.json`)) + + return { + ...fallback['api-headers'], + ...(messages['api-headers'] || {}), + } + } catch (err) { + return fallback['api-headers'] + } +} + +async function createMdFile (component: Data, locale: string) { + const messages = await loadMessages(locale) + let str = '' + + str += genHeader(component.displayName) + str += genApiLinks(component.displayName, messages.links) + + for (const section of sections) { + if (Object.keys(component[section] ?? {}).length) { + str += `## ${messages[section]} {#${section}}\n\n` + str += `\n\n` + } + } + + return str +} + +async function writeFile (componentApi: Data, locale: string) { + if (!componentApi?.fileName) return + + const folder = resolve(API_PAGES_ROOT, locale, 'api') + + if (!fs.existsSync(folder)) { + fs.mkdirSync(folder, { recursive: true }) + } + + fs.writeFileSync(resolve(folder, `${sanitize(componentApi.pathName)}.md`), await createMdFile(componentApi, locale)) +} + +function getApiData () { + const files = fs.readdirSync(API_ROOT) + const data: Data[] = [] + + for (const file of files) { + const obj = JSON.parse(fs.readFileSync(resolve(API_ROOT, file), 'utf-8')) + + data.push(obj) + } + + return data +} + +async function generateFiles () { + // const api: Record[] = getCompleteApi(localeList) + const api = getApiData() + + for (const locale of localeList) { + // const pages = {} as Record + + for (const item of api) { + await writeFile(item, locale) + + // pages[`/${locale}/api/${sanitize(kebabCase(item.name))}/`] = item.name + } + + // fs.writeFileSync(resolve(API_PAGES_ROOT, `${locale}/pages.json`), JSON.stringify(pages, null, 2)) + fs.writeFileSync(resolve(API_PAGES_ROOT, `${locale}.js`), `export default require.context('./${locale}/api', true, /\\.md$/)`) + } + + // for (const item of api) { + // writeData(item.name, item) + // } + + // fs.writeFileSync(resolve(API_PAGES_ROOT, 'sass.json'), JSON.stringify([ + // ...api.filter(item => item && item.sass && item.sass.length > 0).map(item => item.name), + // ])) +} + +export default function Api (): Plugin { + return { + name: 'vuetify:api', + enforce: 'pre', + async config () { + await rimraf(API_PAGES_ROOT) + await mkdirp(API_PAGES_ROOT) + + await generateFiles() + }, + } +} diff --git a/packages/docs/build/examples-plugin.ts b/packages/docs/build/examples-plugin.ts new file mode 100644 index 0000000..87c43ad --- /dev/null +++ b/packages/docs/build/examples-plugin.ts @@ -0,0 +1,64 @@ +import type { Plugin } from 'vite' +import path from 'path' +import fs from 'fs/promises' +import { fileURLToPath } from 'url' + +const ID = '@vuetify-examples' + +export function Examples (): Plugin { + return { + name: 'vuetify:examples', + resolveId (source) { + if (!source.startsWith('virtual:examples')) return + + const dir = source.split('/')[1] + + return dir ? `${ID}/${dir}` : ID + }, + async load (id) { + if (!id.startsWith(ID)) return + + const examplesDir = fileURLToPath(new URL('../src/examples', import.meta.url)) + + if (id === ID) { + const dirs = (await fs.readdir(examplesDir, { encoding: 'utf8' })) + .map(dir => { + return `'${dir}': () => import('virtual:examples/${dir}')` + }).join(',\n') + const code = ` +const dirs = { +${dirs} +} + +export async function getExample (name) { + const [dir, file] = name.split('/') + return (await dirs[dir]()).default[file] +} + ` + + return { code } + } else { + const dir = id.split('/')[1] + const { imports, files } = (await fs.readdir(path.join(examplesDir, dir), 'utf8')) + .reduce<{ imports: string[], files: string[] }>((acc, file, i) => { + acc.imports.push(`import __${i} from '/src/examples/${dir}/${file}'`) + acc.imports.push(`import __${i}_raw from '/src/examples/${dir}/${file}?raw'`) + acc.files.push(` '${file.split('.vue')[0]}': { + component: __${i}, + source: __${i}_raw, + }`) + return acc + }, { imports: [], files: [] }) + + const code = `${imports.join('\n')} + +export default { +${files.join(',\n')} +} +` + + return { code } + } + }, + } +} diff --git a/packages/docs/build/markdown-it.ts b/packages/docs/build/markdown-it.ts new file mode 100644 index 0000000..ddeee9b --- /dev/null +++ b/packages/docs/build/markdown-it.ts @@ -0,0 +1,123 @@ +import fs from 'fs' +import path from 'path' +import Ajv from 'ajv' +import fm from 'front-matter' +import MarkdownIt from 'markdown-it' +import { configureMarkdown } from '../src/utils/markdown-it' +export { configureMarkdown } from '../src/utils/markdown-it' + +export const md = configureMarkdown(new MarkdownIt()) + +const generateToc = (content: string) => { + const headings = [] + const tokens = md.parse(content, {}) + const length = tokens.length + + for (let i = 0; i < length; i++) { + const token = tokens[i] + + if (token.type === 'inline' && token.content.startsWith('')) { + do { + i++ + } while (i < length && !tokens[i].content.endsWith('-->')) + continue + } + + if (token.type !== 'heading_open') continue + + // heading level by hash length '###' === h3 + const level = token.markup.length + + if (level <= 1) continue + + const next = tokens[i + 1] + const link = next.children?.find(child => child.type === 'link_open') + const text = next.children?.filter(child => !!child.content).map(child => child.content).join('') + const anchor = link?.attrs?.find(([attr]) => attr === 'href') + const [, to] = anchor ?? [] + + headings.push({ + text, + to, + level, + }) + } + + return headings +} + +const ajv = new Ajv() +const validate = ajv.compile({ + type: 'object', + additionalProperties: false, + properties: { + meta: { + type: 'object', + additionalProperties: false, + properties: { + nav: { type: 'string' }, // Title used in navigation links + title: { type: 'string' }, // SEO title + description: { type: 'string' }, // SEO description + keywords: { type: 'string' }, // SEO keywords + }, + }, + layout: { type: 'string' }, + related: { + type: 'array', + maxItems: 3, + uniqueItems: true, + items: { type: 'string' }, // Absolute paths to related pages + }, + assets: { + type: 'array', + uniqueItems: true, + items: { type: 'string' }, // Additional stylesheets to load + }, + disabled: { type: 'boolean' }, // The page is not published + emphasized: { type: 'boolean' }, // The page is emphasized in the navigation + fluid: { type: 'boolean' }, // Hide the Toc + backmatter: { type: 'boolean' }, // Hide the backmatter + features: { + type: 'object', + additionalProperties: false, + properties: { + figma: { type: 'boolean' }, + label: { type: 'string' }, + report: { type: 'boolean' }, + github: { type: 'string' }, + spec: { type: 'string' }, + }, + }, + }, +}) + +export function parseMeta (componentPath: string, locale: string) { + const str = fs.readFileSync(path.resolve(componentPath.slice(1)), { encoding: 'utf-8' }) + const { attributes, body } = fm(str) + + const valid = validate(attributes) + if (!valid && locale !== 'eo-UY') { + throw new Error(`\nInvalid frontmatter: ${componentPath}` + validate.errors!.map(error => ( + `\n | Property ${error.instancePath} ${error.message}` + )).join()) + } + + const { meta, ...rest } = attributes as any + + if (locale !== 'en') { + const original = parseMeta(componentPath.replace(`/${locale}/`, '/en/'), 'en') + Object.assign(rest, { + layout: original.layout, + related: original.related, + assets: original.assets, + disabled: original.disabled, + emphasized: original.emphasized, + }) + } + + return { + ...rest, + ...meta, + toc: generateToc(body), + } +} diff --git a/packages/docs/build/sitemap.js b/packages/docs/build/sitemap.js new file mode 100644 index 0000000..29ff67d --- /dev/null +++ b/packages/docs/build/sitemap.js @@ -0,0 +1,33 @@ +const SitemapWebpackPlugin = require('sitemap-webpack-plugin').default +const { generateRoutes } = require('./generate-routes') + +class SitemapPlugin { + apply (compiler) { + const routes = generateRoutes() + + const paths = [] + for (const route of routes) { + let priority = 0.5 + + if (route.fullPath === '/') priority = 1.0 + else if (route.fullPath.includes('/components')) priority = 0.8 + else if (route.fullPath.includes('/api')) priority = 0.7 + + paths.push({ + path: route.fullPath, + lastmod: new Date().toISOString(), + priority, + changefreq: 'daily', + }) + } + + const plugin = new SitemapWebpackPlugin({ + base: 'https://vuetifyjs.com', + paths, + }) + + plugin.apply(compiler) + } +} + +module.exports = new SitemapPlugin() diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts new file mode 100644 index 0000000..0a814fa --- /dev/null +++ b/packages/docs/components.d.ts @@ -0,0 +1,160 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +declare module 'vue' { + export interface GlobalComponents { + AboutTeamMember: typeof import('./src/components/about/TeamMember.vue')['default'] + AboutTeamMembers: typeof import('./src/components/about/TeamMembers.vue')['default'] + Alert: typeof import('./src/components/Alert.vue')['default'] + ApiApiTable: typeof import('./src/components/api/ApiTable.vue')['default'] + ApiDirectiveTable: typeof import('./src/components/api/DirectiveTable.vue')['default'] + ApiEventsTable: typeof import('./src/components/api/EventsTable.vue')['default'] + ApiExposedTable: typeof import('./src/components/api/ExposedTable.vue')['default'] + ApiInline: typeof import('./src/components/api/Inline.vue')['default'] + ApiLinks: typeof import('./src/components/api/Links.vue')['default'] + ApiNameCell: typeof import('./src/components/api/NameCell.vue')['default'] + ApiPrismCell: typeof import('./src/components/api/PrismCell.vue')['default'] + ApiPropsTable: typeof import('./src/components/api/PropsTable.vue')['default'] + ApiSassTable: typeof import('./src/components/api/SassTable.vue')['default'] + ApiSearch: typeof import('./src/components/api/Search.vue')['default'] + ApiSection: typeof import('./src/components/api/Section.vue')['default'] + ApiSlotsTable: typeof import('./src/components/api/SlotsTable.vue')['default'] + AppBackToTop: typeof import('./src/components/app/BackToTop.vue')['default'] + AppBarBar: typeof import('./src/components/app/bar/Bar.vue')['default'] + AppBarEcosystemMenu: typeof import('./src/components/app/bar/EcosystemMenu.vue')['default'] + AppBarEnterpriseLink: typeof import('./src/components/app/bar/EnterpriseLink.vue')['default'] + AppBarJobsLink: typeof import('./src/components/app/bar/JobsLink.vue')['default'] + AppBarLanguageMenu: typeof import('./src/components/app/bar/LanguageMenu.vue')['default'] + AppBarLearnMenu: typeof import('./src/components/app/bar/LearnMenu.vue')['default'] + AppBarLogo: typeof import('./src/components/app/bar/Logo.vue')['default'] + AppBarNotificationsMenu: typeof import('./src/components/app/bar/NotificationsMenu.vue')['default'] + AppBarPlaygroundLink: typeof import('./src/components/app/bar/PlaygroundLink.vue')['default'] + AppBarSettingsToggle: typeof import('./src/components/app/bar/SettingsToggle.vue')['default'] + AppBarSponsorLink: typeof import('./src/components/app/bar/SponsorLink.vue')['default'] + AppBarStoreLink: typeof import('./src/components/app/bar/StoreLink.vue')['default'] + AppBarSupportMenu: typeof import('./src/components/app/bar/SupportMenu.vue')['default'] + AppBarTeamLink: typeof import('./src/components/app/bar/TeamLink.vue')['default'] + AppBarThemeToggle: typeof import('./src/components/app/bar/ThemeToggle.vue')['default'] + AppBtn: typeof import('./src/components/app/Btn.vue')['default'] + AppCaption: typeof import('./src/components/app/Caption.vue')['default'] + AppCommitBtn: typeof import('./src/components/app/CommitBtn.vue')['default'] + AppDivider: typeof import('./src/components/app/Divider.vue')['default'] + AppDrawerAppend: typeof import('./src/components/app/drawer/Append.vue')['default'] + AppDrawerDrawer: typeof import('./src/components/app/drawer/Drawer.vue')['default'] + AppDrawerDrawerToggleRail: typeof import('./src/components/app/drawer/DrawerToggleRail.vue')['default'] + AppDrawerPinnedItems: typeof import('./src/components/app/drawer/PinnedItems.vue')['default'] + AppFigure: typeof import('./src/components/app/Figure.vue')['default'] + AppHeading: typeof import('./src/components/app/Heading.vue')['default'] + AppHeadline: typeof import('./src/components/app/Headline.vue')['default'] + AppLink: typeof import('./src/components/app/Link.vue')['default'] + AppListLinkListItem: typeof import('./src/components/app/list/LinkListItem.vue')['default'] + AppListList: typeof import('./src/components/app/list/List.vue')['default'] + AppMarkdown: typeof import('./src/components/app/Markdown.vue')['default'] + AppMarkup: typeof import('./src/components/app/Markup.vue')['default'] + AppMenuMenu: typeof import('./src/components/app/menu/Menu.vue')['default'] + AppSearchSearch: typeof import('./src/components/app/search/Search.vue')['default'] + AppSearchSearchRecent: typeof import('./src/components/app/search/SearchRecent.vue')['default'] + AppSearchSearchResults: typeof import('./src/components/app/search/SearchResults.vue')['default'] + AppSettingsAdvancedOptions: typeof import('./src/components/app/settings/AdvancedOptions.vue')['default'] + AppSettingsAppend: typeof import('./src/components/app/settings/Append.vue')['default'] + AppSettingsDeveloperMode: typeof import('./src/components/app/settings/DeveloperMode.vue')['default'] + AppSettingsDocumentationBuild: typeof import('./src/components/app/settings/DocumentationBuild.vue')['default'] + AppSettingsDrawer: typeof import('./src/components/app/settings/Drawer.vue')['default'] + AppSettingsLatestCommit: typeof import('./src/components/app/settings/LatestCommit.vue')['default'] + AppSettingsLatestRelease: typeof import('./src/components/app/settings/LatestRelease.vue')['default'] + AppSettingsOptions: typeof import('./src/components/app/settings/Options.vue')['default'] + AppSettingsOptionsAdOption: typeof import('./src/components/app/settings/options/AdOption.vue')['default'] + AppSettingsOptionsApiOption: typeof import('./src/components/app/settings/options/ApiOption.vue')['default'] + AppSettingsOptionsAvatarOption: typeof import('./src/components/app/settings/options/AvatarOption.vue')['default'] + AppSettingsOptionsBannerOption: typeof import('./src/components/app/settings/options/BannerOption.vue')['default'] + AppSettingsOptionsCodeOption: typeof import('./src/components/app/settings/options/CodeOption.vue')['default'] + AppSettingsOptionsNotificationsOption: typeof import('./src/components/app/settings/options/NotificationsOption.vue')['default'] + AppSettingsOptionsPinOption: typeof import('./src/components/app/settings/options/PinOption.vue')['default'] + AppSettingsOptionsQuickbarOption: typeof import('./src/components/app/settings/options/QuickbarOption.vue')['default'] + AppSettingsOptionsRailDrawerOption: typeof import('./src/components/app/settings/options/RailDrawerOption.vue')['default'] + AppSettingsOptionsSlashSearchOption: typeof import('./src/components/app/settings/options/SlashSearchOption.vue')['default'] + AppSettingsOptionsThemeOption: typeof import('./src/components/app/settings/options/ThemeOption.vue')['default'] + AppSettingsPerksOptions: typeof import('./src/components/app/settings/PerksOptions.vue')['default'] + AppSettingsSettingsHeader: typeof import('./src/components/app/settings/SettingsHeader.vue')['default'] + AppSheet: typeof import('./src/components/app/Sheet.vue')['default'] + AppTable: typeof import('./src/components/app/Table.vue')['default'] + AppTextField: typeof import('./src/components/app/TextField.vue')['default'] + AppTitle: typeof import('./src/components/app/Title.vue')['default'] + AppToc: typeof import('./src/components/app/Toc.vue')['default'] + AppTooltipBtn: typeof import('./src/components/app/TooltipBtn.vue')['default'] + AppV2Banner: typeof import('./src/components/app/V2Banner.vue')['default'] + AppVersionBtn: typeof import('./src/components/app/VersionBtn.vue')['default'] + AppVerticalDivider: typeof import('./src/components/app/VerticalDivider.vue')['default'] + Backmatter: typeof import('./src/components/Backmatter.vue')['default'] + ComponentsListItem: typeof import('./src/components/components/ListItem.vue')['default'] + DashboardDashboardEmptyState: typeof import('./src/components/dashboard/DashboardEmptyState.vue')['default'] + DocContribute: typeof import('./src/components/doc/Contribute.vue')['default'] + DocExplorer: typeof import('./src/components/doc/Explorer.vue')['default'] + DocIconList: typeof import('./src/components/doc/IconList.vue')['default'] + DocIconTable: typeof import('./src/components/doc/IconTable.vue')['default'] + DocMadeWithVueAttribution: typeof import('./src/components/doc/MadeWithVueAttribution.vue')['default'] + DocMadeWithVuetifyGallery: typeof import('./src/components/doc/MadeWithVuetifyGallery.vue')['default'] + DocMadeWithVuetifyLink: typeof import('./src/components/doc/MadeWithVuetifyLink.vue')['default'] + DocPremiumThemesGallery: typeof import('./src/components/doc/PremiumThemesGallery.vue')['default'] + DocReadyForMore: typeof import('./src/components/doc/ReadyForMore.vue')['default'] + DocRelatedPage: typeof import('./src/components/doc/RelatedPage.vue')['default'] + DocRelatedPages: typeof import('./src/components/doc/RelatedPages.vue')['default'] + DocReleases: typeof import('./src/components/doc/Releases.vue')['default'] + DocTabs: typeof import('./src/components/doc/Tabs.vue')['default'] + DocThemeCard: typeof import('./src/components/doc/ThemeCard.vue')['default'] + DocThemeVendor: typeof import('./src/components/doc/ThemeVendor.vue')['default'] + DocUpNext: typeof import('./src/components/doc/UpNext.vue')['default'] + DocVueJobs: typeof import('./src/components/doc/VueJobs.vue')['default'] + ExamplesExample: typeof import('./src/components/examples/Example.vue')['default'] + ExamplesExampleMissing: typeof import('./src/components/examples/ExampleMissing.vue')['default'] + ExamplesUsage: typeof import('./src/components/examples/Usage.vue')['default'] + ExamplesUsageExample: typeof import('./src/components/examples/UsageExample.vue')['default'] + ExamplesVueFile: typeof import('./src/components/examples/VueFile.vue')['default'] + FeaturesBreakpointsTable: typeof import('./src/components/features/BreakpointsTable.vue')['default'] + FeaturesColorPalette: typeof import('./src/components/features/ColorPalette.vue')['default'] + FeaturesSassApi: typeof import('./src/components/features/SassApi.vue')['default'] + GettingStartedWireframeExamples: typeof import('./src/components/getting-started/WireframeExamples.vue')['default'] + HomeActionBtns: typeof import('./src/components/home/ActionBtns.vue')['default'] + HomeEntry: typeof import('./src/components/home/Entry.vue')['default'] + HomeFeatures: typeof import('./src/components/home/Features.vue')['default'] + HomeFooter: typeof import('./src/components/home/Footer.vue')['default'] + HomeLogo: typeof import('./src/components/home/Logo.vue')['default'] + HomeSpecialSponsor: typeof import('./src/components/home/SpecialSponsor.vue')['default'] + HomeSponsors: typeof import('./src/components/home/Sponsors.vue')['default'] + IconsChevronDown: typeof import('./src/components/icons/ChevronDown.vue')['default'] + IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default'] + IntroductionDirectSupport: typeof import('./src/components/introduction/DirectSupport.vue')['default'] + IntroductionDiscordDeck: typeof import('./src/components/introduction/DiscordDeck.vue')['default'] + 'IntroductionDiscordDeck.1': typeof import('./src/components/introduction/DiscordDeck.1.vue')['default'] + IntroductionEnterpriseDeck: typeof import('./src/components/introduction/EnterpriseDeck.vue')['default'] + IntroductionEnterpriseForm: typeof import('./src/components/introduction/EnterpriseForm.vue')['default'] + IntroductionSlaDeck: typeof import('./src/components/introduction/SlaDeck.vue')['default'] + PageFeatures: typeof import('./src/components/PageFeatures.vue')['default'] + PromotedBase: typeof import('./src/components/promoted/Base.vue')['default'] + PromotedCarbon: typeof import('./src/components/promoted/Carbon.vue')['default'] + PromotedDiscovery: typeof import('./src/components/promoted/Discovery.vue')['default'] + PromotedEntry: typeof import('./src/components/promoted/Entry.vue')['default'] + PromotedInline: typeof import('./src/components/promoted/Inline.vue')['default'] + PromotedPromoted: typeof import('./src/components/promoted/Promoted.vue')['default'] + PromotedRandom: typeof import('./src/components/promoted/Random.vue')['default'] + PromotedScript: typeof import('./src/components/promoted/Script.vue')['default'] + PromotedVuetify: typeof import('./src/components/promoted/Vuetify.vue')['default'] + PromotionsPromotionCard: typeof import('./src/components/promotions/PromotionCard.vue')['default'] + ResourcesColorPalette: typeof import('./src/components/resources/ColorPalette.vue')['default'] + ResourcesLogos: typeof import('./src/components/resources/Logos.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + SponsorCard: typeof import('./src/components/sponsor/Card.vue')['default'] + SponsorLink: typeof import('./src/components/sponsor/Link.vue')['default'] + SponsorSponsors: typeof import('./src/components/sponsor/Sponsors.vue')['default'] + UserBadgesUserAdminBadge: typeof import('./src/components/user/badges/UserAdminBadge.vue')['default'] + UserBadgesUserOneBadge: typeof import('./src/components/user/badges/UserOneBadge.vue')['default'] + UserBadgesUserSponsorBadge: typeof import('./src/components/user/badges/UserSponsorBadge.vue')['default'] + UserOneSubCard: typeof import('./src/components/user/OneSubCard.vue')['default'] + UserUserTabs: typeof import('./src/components/user/UserTabs.vue')['default'] + } +} diff --git a/packages/docs/index.html b/packages/docs/index.html new file mode 100644 index 0000000..f39eceb --- /dev/null +++ b/packages/docs/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + +

+ + + diff --git a/packages/docs/jest-runner-eslint.config.js b/packages/docs/jest-runner-eslint.config.js new file mode 100644 index 0000000..a9c0657 --- /dev/null +++ b/packages/docs/jest-runner-eslint.config.js @@ -0,0 +1,7 @@ +module.exports = { + cliOptions: { + ext: ['.js', '.ts', '.tsx', '.vue'], + maxWarnings: 0, + fix: process.env.JEST_FIX === 'true', + }, +} diff --git a/packages/docs/jest.config.js b/packages/docs/jest.config.js new file mode 100644 index 0000000..7d57ee7 --- /dev/null +++ b/packages/docs/jest.config.js @@ -0,0 +1,20 @@ +const os = require('os') + +const maxWorkers = Math.max(1, Math.floor(Math.min(os.cpus().length / 2, os.freemem() / 1024 / 1024 / 1024 / 2.5))) + +module.exports = { + maxWorkers, + runner: 'jest-runner-eslint', + displayName: 'lint', + testMatch: [ + '/src/**/*.js', + '/src/**/*.ts', + '/src/**/*.tsx', + '/src/**/*.vue', + ], + moduleFileExtensions: ['vue', 'ts', 'js', 'tsx'], + reporters: [['jest-silent-reporter', { + showWarnings: true, + useDots: true, + }]], +} diff --git a/packages/docs/package.json b/packages/docs/package.json new file mode 100644 index 0000000..e6d6510 --- /dev/null +++ b/packages/docs/package.json @@ -0,0 +1,86 @@ +{ + "name": "vuetifyjs.com", + "description": "A Vue.js project", + "private": true, + "author": "John Leider ", + "version": "3.6.12", + "repository": { + "type": "git", + "url": "git+https://github.com/vuetifyjs/vuetify.git", + "directory": "packages/docs" + }, + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "preview-https": "HTTPS=true vite preview", + "lint": "vue-tsc --noEmit --pretty && yarn lint:md && jest --no-cache", + "lint:fix": "yarn fix:md && JEST_FIX=true jest --no-cache", + "lint:md": "markdownlint --config .markdownlintrc src/pages/en", + "fix:md": "markdownlint --config .markdownlintrc src/pages/en --fix" + }, + "dependencies": { + "@cosmicjs/sdk": "^1.0.11", + "@vuelidate/core": "^2.0.3", + "@vuelidate/validators": "^2.0.4", + "@vuetify/one": "^1.9.1", + "algoliasearch": "^4.23.3", + "alpinejs": "^3.14.1", + "fflate": "^0.8.2", + "isomorphic-fetch": "^3.0.0", + "lodash-es": "^4.17.21", + "pinia": "^2.1.7", + "prism-theme-vars": "^0.2.4", + "prismjs": "^1.29.0", + "roboto-fontface": "^0.10.0", + "vee-validate": "^4.12.6", + "vue": "^3.4.27", + "vue-gtag-next": "^1.14.0", + "vue-i18n": "^9.11.0", + "vue-instantsearch": "^4.16.1", + "vue-prism-component": "^2.0.0", + "vuetify": "^3.6.12" + }, + "devDependencies": { + "@emailjs/browser": "^4.3.3", + "@intlify/unplugin-vue-i18n": "^4.0.0", + "@types/lodash-es": "^4.17.12", + "@types/markdown-it": "^14.0.0", + "@types/markdown-it-container": "^2.0.10", + "@types/prismjs": "^1.26.3", + "@vitejs/plugin-basic-ssl": "^1.1.0", + "@vitejs/plugin-vue": "^5.0.4", + "@vue/compiler-sfc": "^3.4.27", + "@vuetify/api-generator": "^3.6.12", + "ajv": "^8.12.0", + "async-es": "^3.2.5", + "date-fns": "^3.6.0", + "emailjs-com": "^3.2.0", + "front-matter": "^4.0.2", + "jest": "^28.1.3", + "jest-runner-eslint": "^2.2.0", + "jest-silent-reporter": "^0.5.0", + "markdown-it": "^14.1.0", + "markdown-it-anchor": "^8.6.7", + "markdown-it-attrs": "^4.1.6", + "markdown-it-container": "^4.0.0", + "markdown-it-emoji": "^2.0.2", + "markdown-it-header-sections": "^1.0.0", + "markdown-it-link-attributes": "^4.0.1", + "markdown-it-meta": "^0.0.1", + "markdown-it-prism": "^2.3.0", + "markdownlint-cli": "^0.39.0", + "unplugin-auto-import": "0.17.5", + "unplugin-fonts": "1.0.3", + "unplugin-vue-components": "^0.26.0", + "vite": "^5.2.8", + "vite-plugin-md": "^0.21.5", + "vite-plugin-pages": "^0.32.1", + "vite-plugin-pwa": "^0.17.4", + "vite-plugin-vue-layouts": "^0.11.0", + "vite-plugin-vuetify": "^2.0.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/docs/public/ads.txt b/packages/docs/public/ads.txt new file mode 100644 index 0000000..31b1940 --- /dev/null +++ b/packages/docs/public/ads.txt @@ -0,0 +1,279 @@ +#BuySellAds Inc +#https://optimizeads.net/ +buysellads.com, 8198, DIRECT +#AppNexus +appnexus.com, 8394, DIRECT, f5ab79cb980f11d1 +xandr.com, 8394, DIRECT, f5ab79cb980f11d1 +#Rubicon: +rubiconproject.com, 18812, DIRECT, 0bfd66d529a55807 +rubiconproject.com, 22884, DIRECT, 0bfd66d529a55807 +rubiconproject.com, 18814, DIRECT, 0bfd66d529a55807 +#Amazon +aps.amazon.com,747b8b51-ec47-4dee-9823-b2b73124b71f,DIRECT +smartadserver.com,3835,DIRECT,060d053dcf45cbf3 +sharethrough.com,81c1429f,DIRECT,d53b998a7bd4ecd2 +pubmatic.com,160006,RESELLER,5d62403b186f2ace +pubmatic.com,160096,RESELLER,5d62403b186f2ace +indexexchange.com,192410,RESELLER,50b1c356f2c5c8fc +pubmatic.com,161103,DIRECT,5d62403b186f2ace +openx.com,540191398,RESELLER,6a698e2ec38604c6 +appnexus.com,1908,RESELLER,f5ab79cb980f11d1 +ad-generation.jp,12474,RESELLER,7f4ea9029ac04e53 +districtm.io,100962,RESELLER,3fd707be9c4527c3 +yieldmo.com,2719019867620450718,RESELLER +rhythmone.com,1654642120,RESELLER,a670c89d4a324e47 +gumgum.com,14141,RESELLER,ffdef49475d318a9 +admanmedia.com,877,DIRECT +emxdgt.com,2009,RESELLER,1e1d41537f7cad7f +contextweb.com,562541,RESELLER,89ff185a4c4e857c +themediagrid.com,JTQKMP,RESELLER,35d5010d7789b49d +beachfront.com,14804,RESELLER,e2541279e8e2ca4d +improvedigital.com,2050,RESELLER +mintegral.com,10043,RESELLER,0aeed750c80d6423 +sonobi.com,7f5fa520f8,RESELLER,d1a215d9eb5aee9e +appnexus.com,3663,RESELLER,f5ab79cb980f11d1 +risecodes.com,63832beef8189a00015cb6d3,RESELLER +mediago.io,045ac24b888bcf59a09731e7f0f2084f,RESELLER +indexexchange.com,204998,DIRECT,50b1c356f2c5c8fc +#OpenX +openx.com, 541000958, RESELLER, 6a698e2ec38604c6 +openx.com, 545711449, DIRECT, 6a698e2ec38604c6 +openx.com, 545711449, RESELLER, 6a698e2ec38604c6 +openx.com, 559329982, DIRECT, 6a698e2ec38604c6 +#Pubmatic +pubmatic.com, 159855, DIRECT, 5d62403b186f2ace +pubmatic.com, 161102, RESELLER, 5d62403b186f2ace +pubmatic.com, 161103, RESELLER, 5d62403b186f2ace +pubmatic.com, 161104, RESELLER, 5d62403b186f2ace +#IE +indexexchange.com, 192533, DIRECT +indexexchange.com, 204998, RESELLER, 50b1c356f2c5c8fc +#TripleLift +triplelift.com, 7376, DIRECT, 6c33edb13117fd86 +triplelift.com, 7186, DIRECT, 6c33edb13117fd86 +triplelift.com, 7328, DIRECT, 6c33edb13117fd86 +triplelift.com, 7187, DIRECT, 6c33edb13117fd86 +triplelift.com, 7997, DIRECT, 6c33edb13117fd86 +triplelift.com, 7998, DIRECT, 6c33edb13117fd86 +triplelift.com, 8573, DIRECT, 6c33edb13117fd86 +triplelift.com, 8581, DIRECT, 6c33edb13117fd86 +triplelift.com, 8582, DIRECT, 6c33edb13117fd86 +triplelift.com, 8583, DIRECT, 6c33edb13117fd86 +triplelift.com, 8620, DIRECT, 6c33edb13117fd86 +triplelift.com, 8621, DIRECT, 6c33edb13117fd86 +triplelift.com, 8622, DIRECT, 6c33edb13117fd86 +triplelift.com, 8631, DIRECT, 6c33edb13117fd86 +triplelift.com, 8632, DIRECT, 6c33edb13117fd86 +triplelift.com, 8633, DIRECT, 6c33edb13117fd86 +triplelift.com, 8634, DIRECT, 6c33edb13117fd86 +triplelift.com, 8896, DIRECT, 6c33edb13117fd86 +triplelift.com, 8921, DIRECT, 6c33edb13117fd86 +triplelift.com, 8922, DIRECT, 6c33edb13117fd86 +triplelift.com, 9269, DIRECT, 6c33edb13117fd86 +triplelift.com, 9499, DIRECT, 6c33edb13117fd86 +triplelift.com, 9498, DIRECT, 6c33edb13117fd86 +triplelift.com, 10923, DIRECT, 6c33edb13117fd86 +triplelift.com, 11245, DIRECT, 6c33edb13117fd86 +triplelift.com, 11317, DIRECT, 6c33edb13117fd86 +triplelift.com, 11316, DIRECT, 6c33edb13117fd86 +triplelift.com, 11318, DIRECT, 6c33edb13117fd86 +triplelift.com, 11658, DIRECT, 6c33edb13117fd86 +triplelift.com, 11657, DIRECT, 6c33edb13117fd86 +triplelift.com, 11659, DIRECT, 6c33edb13117fd86 +appnexus.com, 1314, RESELLER +spotxchange.com, 228454, RESELLER, 7842df1d2fe2db34 +spotx.tv, 228454, RESELLER, 7842df1d2fe2db34 +#Google +google.com, pub-9961814823930967, RESELLER, f08c47fec0942fa0 +google.com, pub-9961814823930967, DIRECT, f08c47fec0942fa0 +google.com, pub-2049948180079264, DIRECT, f08c47fec0942fa0 +google.com, pub-9454946816537646, DIRECT, f08c47fec0942fa0 +google.com, pub-8400268452481648, DIRECT, f08c47fec0942fa0 +google.com, pub-4184422354282212, DIRECT, f08c47fec0942fa0 #16489 +google.com, pub-7998997772660809, DIRECT, f08c47fec0942fa0 #17203 +google.com, pub-3239114052422391, DIRECT, f08c47fec0942fa0 #11556 +google.com, pub-8880801249704748, DIRECT, f08c47fec0942fa0 #16495 +google.com, pub-5850466644901558, DIRECT, f08c47fec0942fa0 #6904 +google.com, pub-8744812757244383, DIRECT, f08c47fec0942fa0 #7674 +google.com, pub-9896872574268733, DIRECT, f08c47fec0942fa0 #7898 +google.com, pub-2860251217814013, DIRECT, f08c47fec0942fa0 #7898 +google.com, pub-8400268452481648, DIRECT, f08c47fec0942fa0 #7898 +google.com, pub-5309873657092359, DIRECT, f08c47fec0942fa0 #7898 +google.com, pub-4618644450685964, DIRECT, f08c47fec0942fa0 #117 +google.com, pub-2707866139552340, DIRECT, f08c47fec0942fa0 #17073 +#nobid +nobid.io, 21851990727, DIRECT +sonobi.com, 7ad1b9f952, RESELLER, d1a215d9eb5aee9e +amxrtb.com, 105199579, RESELLER +xandr.com, 11429, RESELLER, f5ab79cb980f11d1 +xandr.com, 12701, RESELLER, f5ab79cb980f11d1 +lijit.com, 273657, RESELLER, fafdf38b16bf6b2b +sovrn.com, 273657, RESELLER, fafdf38b16bf6b2b +appnexus.com, 12290, RESELLER, f5ab79cb980f11d1 +indexexchange.com, 191503, RESELLER, 50b1c356f2c5c8fc +pubmatic.com, 158355, RESELLER, 5d62403b186f2ace +pubmatic.com, 162412, RESELLER, 5d62403b186f2ace +onetag.com, 694e68b73971b58, RESELLER +durationmedia.net, 21851990727, DIRECT +smartadserver.com,3447,RESELLER +indexexchange.com,195491,RESELLER,50b1c356f2c5c8fc +video.unrulymedia.com, 3736557092, RESELLER +rhythmone.com, 3736557092, RESELLER, a670c89d4a324e47 +gumgum.com, 13926, RESELLER, ffdef49475d318a9 +inmobi.com,8f261ace12c3486ba2e0d2011cd97976,RESELLER,83e75a7ae333ca9d +rubiconproject.com, 24434, DIRECT, 0bfd66d529a55807 +minutemedia.com, 01gerz67grgj, RESELLER +pubmatic.com, 161683, RESELLER, 5d62403b186f2ace +appnexus.com, 8381, RESELLER, f5ab79cb980f11d1 +triplelift.com, 12507, RESELLER, 6c33edb13117fd86 +sharethrough.com, UvcAx8IL, RESELLER, d53b998a7bd4ecd2 +#Primis +primis.tech, 23983, DIRECT, b6b21d256ef43532 +pubmatic.com, 156595, RESELLER, 5d62403b186f2ace +google.com, pub-1320774679920841, RESELLER, f08c47fec0942fa0 +openx.com, 540258065, RESELLER, 6a698e2ec38604c6 +rubiconproject.com, 20130, RESELLER, 0bfd66d529a55807 +freewheel.tv, 19133, RESELLER, 74e8e47458f74754 +smartadserver.com, 3436, RESELLER, 060d053dcf45cbf3 +indexexchange.com, 191923, RESELLER, 50b1c356f2c5c8fc +adform.com, 2078, RESELLER +Media.net, 8CU695QH7, RESELLER +video.unrulymedia.com, 2338962694, RESELLER +sharethrough.com, flUyJowI, RESELLER, d53b998a7bd4ecd2 +triplelift.com, 8210, RESELLER, 6c33edb13117fd86 +yahoo.com, 59260, RESELLER +#Sovrn +sovrn.com, 54916, DIRECT, fafdf38b16bf6b2b +lijit.com, 54916, DIRECT, fafdf38b16bf6b2b +lijit.com, 54916-eb, DIRECT, fafdf38b16bf6b2b +lijit.com, 435797, DIRECT, fafdf38b16bf6b2b +lijit.com, 435797-eb, DIRECT, fafdf38b16bf6b2b# +appnexus.com, 1360, RESELLER, f5ab79cb980f11d1 +gumgum.com, 11645, RESELLER, ffdef49475d318a9 +openx.com, 538959099, RESELLER, 6a698e2ec38604c6 +openx.com, 539924617, RESELLER, 6a698e2ec38604c6 +pubmatic.com, 137711, RESELLER, 5d62403b186f2ace +pubmatic.com, 156212, RESELLER, 5d62403b186f2ace +pubmatic.com, 156700, RESELLER, 5d62403b186f2ace +rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807 +appnexus.com, 1019, RESELLER, f5ab79cb980f11d1 +video.unrulymedia.com, 12444764291, RESELLER +contextweb.com, 558511, RESELLER +#Smart +smartadserver.com, 3835, DIRECT +smartadserver.com, 3835-OB, RESELLER, 060d053dcf45cbf3 +smartadserver.com, 4194-OB, RESELLER, 060d053dcf45cbf3 +smartadserver.com, 4194, RESELLER, 060d053dcf45cbf3 +smartadserver.com, 3835, RESELLER +contextweb.com, 560288, RESELLER, 89ff185a4c4e857c +pubmatic.com, 156439, RESELLER, 5d62403b186f2ace +pubmatic.com, 154037, RESELLER, 5d62403b186f2ace +rubiconproject.com, 16114, RESELLER, 0bfd66d529a55807 +openx.com, 537149888, RESELLER, 6a698e2ec38604c6 +appnexus.com, 3703, RESELLER, f5ab79cb980f11d1 +districtm.io, 101760, RESELLER, 3fd707be9c4527c3 +loopme.com, 5679, RESELLER, 6c8d5f95897a5a3b +xad.com, 958, RESELLER, 81cbf0a75a5e0e9a +rhythmone.com, 2564526802, RESELLER, a670c89d4a324e47 +smaato.com, 1100044045, RESELLER, 07bcf65f187117b4 +pubnative.net, 1006576, RESELLER, d641df8625486a7b +adyoulike.com, b4bf4fdd9b0b915f746f6747ff432bde, RESELLER +axonix.com, 57264, RESELLER +sharethrough.com, OAW69Fon, RESELLER, d53b998a7bd4ecd2 +#Criteo +criteo.com, B-058814, DIRECT, 9fac4a4a87c2a44f +themediagrid.com, ZANK5X, DIRECT, 35d5010d7789b49d +#Adagio +adagio.io, 1116, DIRECT +rubiconproject.com, 19116, RESELLER, 0bfd66d529a55807 +pubmatic.com, 159110, RESELLER, 5d62403b186f2ace +improvedigital.com, 1790, RESELLER +onetag.com, 6b859b96c564fbe, RESELLER +indexexchange.com, 194558, RESELLER +pubwise.io, 68867843, RESELLER, c327c91a93a7cdd3 +33across.com, 0015a00002oUk4aAAC, RESELLER, bbea06d9c4d2853c +appnexus.com, 10239, RESELLER, f5ab79cb980f11d1 +rubiconproject.com, 16414, RESELLER, 0bfd66d529a55807 +lijit.com, 367236, RESELLER, fafdf38b16bf6b2b +openx.com, 558899373, RESELLER, 6a698e2ec38604c6 +triplelift.com, 13482, RESELLER, 6c33edb13117fd86 +#Adyoulike +adyoulike.com, c88421dae358597b6441f855c46bf1f7, DIRECT +appnexus.com, 9733, RESELLER +spotxchange.com, 230037, RESELLER, 7842df1d2fe2db34 +spotx.tv, 230037, RESELLER, 7842df1d2fe2db34 +smartadserver.com, 4016, RESELLER +smartadserver.com, 4012, RESELLER +smartadserver.com, 4071, RESELLER +smartadserver.com, 4073, RESELLER +smartadserver.com, 4074, RESELLER +rubiconproject.com, 20736, RESELLER, 0bfd66d529a55807 +smartadserver.com, 4144, RESELLER +pubmatic.com, 160925, RESELLER, 5d62403b186f2ace +themediagrid.com, RYIDPE, DIRECT, 35d5010d7789b49d +#OneTag +onetag.com, 73d67396a1b6e18, DIRECT +onetag.com, 73d67396a1b6e18-OB, DIRECT +appnexus.com, 13099, RESELLER +pubmatic.com, 161593, RESELLER, 5d62403b186f2ace +rubiconproject.com, 11006, RESELLER, 0bfd66d529a55807 +#media.net +Media.net, 8CU18831I, DIRECT +Media.net, 8CUMDNT02, DIRECT +Media.net, 8CU352B6K, DIRECT +Media.net, 8CUR8G327, DIRECT +Media.net, 8CUW70514, DIRECT +openx.com, 537100188, RESELLER, 6a698e2ec38604c6 +pubmatic.com, 159463, RESELLER, 5d62403b186f2ace +EMXDGT.com, 1759, Reseller, 1e1d41537f7cad7f +Appnexus.com, 1356, RESELLER, f5ab79cb980f11d1 +google.com, pub-7439041255533808, RESELLER, f08c47fec0942fa0 +rubiconproject.com, 19396, Reseller, 0bfd66d529a55807 +onetag.com, 5d49f482552c9b6, Reseller +sonobi.com, 83729e979b, RESELLER +33across.com, 0010b00002cGp2AAAS, Reseller, bbea06d9c4d2853c +rhythmone.com, 3611299104, RESELLER +#fluct +adingo.jp, 29875, RESELLER +#Outbrain +outbrain.com, 00ae023ac373956acf51a9b845069dca8a, DIRECT +appnexus.com, 7597, RESELLER, f5ab79cb980f11d1 +Freewheel.tv, 741650, RESELLER # Premium video demand +openx.com, 540393169, RESELLER, 6a698e2ec38604c6 # Premium video demand +rubiconproject.com, 19668, RESELLER, 0bfd66d529a55807 +indexexchange.com, 190856, RESELLER, 50b1c356f2c5c8fc # Premium Video Demand +pubmatic.com, 158615, RESELLER, 5d62403b186f2ace # Premium video & display demand +vidazoo.com, 1773068026, RESELLER, b6ada874b4d7d0b2 # Premium Video Demand +video.unrulymedia.com, 367782854, RESELLER # Premium video demand from Outbrain +indexexchange.com, 193091, RESELLER, 50b1c356f2c5c8fc # Premium video demand from Outbrain +pubmatic.com, 160065, RESELLER, 5d62403b186f2ace # Premium video demand from Outbrain +improvedigital.com, 1863, RESELLER # Premium video demand from Outbrain +freewheel.tv, 1220655, RESELLER # Premium video demand from Outbrain +risecodes.com,6022acddc8b2f90001767980, RESELLER +yahoo.com, 59040, RESELLER, e1a5b5b6e3255540 +emxdgt.com, 2014, RESELLER, 1e1d41537f7cad7f +vi.ai, g-004a0d4b5efc1727f1afd5a5b06f11a099, DIRECT #instream video by outbrain +google.com, pub-5617098146054077, RESELLER, f08c47fec0942fa0 #instream video by outbrain +pubmatic.com, 158055, RESELLER, 5d62403b186f2ace #instream video by outbrain +xandr.com, 10736, RESELLER #instream video by outbrain +rubiconproject.com, 21506, RESELLER, 0bfd66d529a55807 #instream video by outbrain +rhythmone.com, 1014191143, RESELLER, a670c89d4a324e47 #instream video by outbrain +video.unrulymedia.com, 1014191143, RESELLER #instream video by outbrain +Indexexchange.com, 190500, RESELLER #instream video by outbrain +smartadserver.com,2776,RESELLER #instream video by outbrain +openx.com, 540362347, RESELLER, 6a698e2ec38604c6 #instream video by outbrain +media.net, 8CUIH830U, RESELLER #instream video by outbrain +triplelift.com, 11547, RESELLER, 6c33edb13117fd86 #instream video by outbrain +improvedigital.com, 1552, Reseller #instream video by outbrain +contextweb.com, 562709, RESELLER, 89ff185a4c4e857c +aps.amazon.com, 3965, RESELLER #instream video by outbrain +freewheel.tv, 1220559, RESELLER # Premium video demand from Outbrain +freewheel.tv, 1133073, RESELLER #instream video by outbrain +sovrn.com, 267974, RESELLER, fafdf38b16bf6b2b #instream video by outbrain +adform.com, 2611, RESELLER #instream video by outbrain +sharethrough.com, c21oBkqP, RESELLER, d53b998a7bd4ecd2 +smaato.com, 1100054606, RESELLER, 07bcf65f187117b4 +#BuySellAds Inc +buysellads.com, 93, DIRECT +MANAGERDOMAIN=buysellads.com +OWNERDOMAIN=vuetifyjs.com diff --git a/packages/docs/public/favicon.ico b/packages/docs/public/favicon.ico new file mode 100644 index 0000000..8fb9f91 Binary files /dev/null and b/packages/docs/public/favicon.ico differ diff --git a/packages/docs/public/img/icons/android-chrome-192x192.png b/packages/docs/public/img/icons/android-chrome-192x192.png new file mode 100644 index 0000000..047e146 Binary files /dev/null and b/packages/docs/public/img/icons/android-chrome-192x192.png differ diff --git a/packages/docs/public/img/icons/android-chrome-512x512.png b/packages/docs/public/img/icons/android-chrome-512x512.png new file mode 100644 index 0000000..ce4a182 Binary files /dev/null and b/packages/docs/public/img/icons/android-chrome-512x512.png differ diff --git a/packages/docs/public/img/icons/apple-touch-icon.png b/packages/docs/public/img/icons/apple-touch-icon.png new file mode 100644 index 0000000..de5d02f Binary files /dev/null and b/packages/docs/public/img/icons/apple-touch-icon.png differ diff --git a/packages/docs/public/img/icons/favicon-16x16.png b/packages/docs/public/img/icons/favicon-16x16.png new file mode 100644 index 0000000..6ae40e6 Binary files /dev/null and b/packages/docs/public/img/icons/favicon-16x16.png differ diff --git a/packages/docs/public/img/icons/favicon-32x32.png b/packages/docs/public/img/icons/favicon-32x32.png new file mode 100644 index 0000000..a40d572 Binary files /dev/null and b/packages/docs/public/img/icons/favicon-32x32.png differ diff --git a/packages/docs/public/robots.txt b/packages/docs/public/robots.txt new file mode 100644 index 0000000..eb05362 --- /dev/null +++ b/packages/docs/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: diff --git a/packages/docs/public/search.xml b/packages/docs/public/search.xml new file mode 100644 index 0000000..95ec140 --- /dev/null +++ b/packages/docs/public/search.xml @@ -0,0 +1,8 @@ + + +Vuetify +Vuetify documentation +UTF-8 +https://vuetifyjs.com/favicon.ico + + diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue new file mode 100644 index 0000000..dc7b5ca --- /dev/null +++ b/packages/docs/src/App.vue @@ -0,0 +1,197 @@ + + + + + + + diff --git a/packages/docs/src/assets/logo.png b/packages/docs/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/packages/docs/src/assets/logo.png differ diff --git a/packages/docs/src/components/Alert.vue b/packages/docs/src/components/Alert.vue new file mode 100644 index 0000000..b47b245 --- /dev/null +++ b/packages/docs/src/components/Alert.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/components/Backmatter.vue b/packages/docs/src/components/Backmatter.vue new file mode 100644 index 0000000..d0dd79f --- /dev/null +++ b/packages/docs/src/components/Backmatter.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/components/PageFeatures.vue b/packages/docs/src/components/PageFeatures.vue new file mode 100644 index 0000000..66346b5 --- /dev/null +++ b/packages/docs/src/components/PageFeatures.vue @@ -0,0 +1,109 @@ + + + diff --git a/packages/docs/src/components/about/TeamMember.vue b/packages/docs/src/components/about/TeamMember.vue new file mode 100644 index 0000000..db96e03 --- /dev/null +++ b/packages/docs/src/components/about/TeamMember.vue @@ -0,0 +1,221 @@ + + + + + diff --git a/packages/docs/src/components/about/TeamMembers.vue b/packages/docs/src/components/about/TeamMembers.vue new file mode 100644 index 0000000..2bb7ef1 --- /dev/null +++ b/packages/docs/src/components/about/TeamMembers.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/docs/src/components/api/ApiTable.vue b/packages/docs/src/components/api/ApiTable.vue new file mode 100644 index 0000000..28149fd --- /dev/null +++ b/packages/docs/src/components/api/ApiTable.vue @@ -0,0 +1,95 @@ + + + diff --git a/packages/docs/src/components/api/DirectiveTable.vue b/packages/docs/src/components/api/DirectiveTable.vue new file mode 100644 index 0000000..e749fba --- /dev/null +++ b/packages/docs/src/components/api/DirectiveTable.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/docs/src/components/api/EventsTable.vue b/packages/docs/src/components/api/EventsTable.vue new file mode 100644 index 0000000..c16e0e8 --- /dev/null +++ b/packages/docs/src/components/api/EventsTable.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/docs/src/components/api/ExposedTable.vue b/packages/docs/src/components/api/ExposedTable.vue new file mode 100644 index 0000000..9329c02 --- /dev/null +++ b/packages/docs/src/components/api/ExposedTable.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/components/api/Inline.vue b/packages/docs/src/components/api/Inline.vue new file mode 100644 index 0000000..745aaf0 --- /dev/null +++ b/packages/docs/src/components/api/Inline.vue @@ -0,0 +1,70 @@ + + + diff --git a/packages/docs/src/components/api/Links.vue b/packages/docs/src/components/api/Links.vue new file mode 100644 index 0000000..40ed85f --- /dev/null +++ b/packages/docs/src/components/api/Links.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/docs/src/components/api/NameCell.vue b/packages/docs/src/components/api/NameCell.vue new file mode 100644 index 0000000..f74397d --- /dev/null +++ b/packages/docs/src/components/api/NameCell.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/components/api/PrismCell.vue b/packages/docs/src/components/api/PrismCell.vue new file mode 100644 index 0000000..f4c13d6 --- /dev/null +++ b/packages/docs/src/components/api/PrismCell.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/docs/src/components/api/PropsTable.vue b/packages/docs/src/components/api/PropsTable.vue new file mode 100644 index 0000000..a15cd5b --- /dev/null +++ b/packages/docs/src/components/api/PropsTable.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/docs/src/components/api/SassTable.vue b/packages/docs/src/components/api/SassTable.vue new file mode 100644 index 0000000..a47b4a1 --- /dev/null +++ b/packages/docs/src/components/api/SassTable.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/docs/src/components/api/Search.vue b/packages/docs/src/components/api/Search.vue new file mode 100644 index 0000000..525f4ef --- /dev/null +++ b/packages/docs/src/components/api/Search.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/docs/src/components/api/Section.vue b/packages/docs/src/components/api/Section.vue new file mode 100644 index 0000000..f586345 --- /dev/null +++ b/packages/docs/src/components/api/Section.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/packages/docs/src/components/api/SlotsTable.vue b/packages/docs/src/components/api/SlotsTable.vue new file mode 100644 index 0000000..db54f3c --- /dev/null +++ b/packages/docs/src/components/api/SlotsTable.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/components/api/utils.ts b/packages/docs/src/components/api/utils.ts new file mode 100644 index 0000000..a9fea0d --- /dev/null +++ b/packages/docs/src/components/api/utils.ts @@ -0,0 +1,23 @@ +export function stripLinks (str: string): [string, Record] { + let out = str.slice() + const obj: Record = {} + const regexp = /(.*?)<\/a>/g + + let matches = regexp.exec(str) + + while (matches !== null) { + obj[matches[1]] = matches[0] + out = out.replace(matches[0], matches[1]) + + matches = regexp.exec(str) + } + + return [out, obj] +} + +export function insertLinks (str: string, stripped: Record) { + for (const [key, value] of Object.entries(stripped)) { + str = str.replaceAll(new RegExp(`(^|\\W)(${key})(\\W|$)`, 'g'), `$1${value}$3`) + } + return str +} diff --git a/packages/docs/src/components/app/BackToTop.vue b/packages/docs/src/components/app/BackToTop.vue new file mode 100644 index 0000000..22a9f83 --- /dev/null +++ b/packages/docs/src/components/app/BackToTop.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/app/Btn.vue b/packages/docs/src/components/app/Btn.vue new file mode 100644 index 0000000..f368c82 --- /dev/null +++ b/packages/docs/src/components/app/Btn.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/docs/src/components/app/Caption.vue b/packages/docs/src/components/app/Caption.vue new file mode 100644 index 0000000..efe71c8 --- /dev/null +++ b/packages/docs/src/components/app/Caption.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/docs/src/components/app/CommitBtn.vue b/packages/docs/src/components/app/CommitBtn.vue new file mode 100644 index 0000000..86a8595 --- /dev/null +++ b/packages/docs/src/components/app/CommitBtn.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/docs/src/components/app/Divider.vue b/packages/docs/src/components/app/Divider.vue new file mode 100644 index 0000000..74860eb --- /dev/null +++ b/packages/docs/src/components/app/Divider.vue @@ -0,0 +1,7 @@ + + + diff --git a/packages/docs/src/components/app/Figure.vue b/packages/docs/src/components/app/Figure.vue new file mode 100644 index 0000000..56b13d6 --- /dev/null +++ b/packages/docs/src/components/app/Figure.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/components/app/Heading.vue b/packages/docs/src/components/app/Heading.vue new file mode 100644 index 0000000..040fc76 --- /dev/null +++ b/packages/docs/src/components/app/Heading.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/docs/src/components/app/Headline.vue b/packages/docs/src/components/app/Headline.vue new file mode 100644 index 0000000..a54ae4c --- /dev/null +++ b/packages/docs/src/components/app/Headline.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/docs/src/components/app/Link.vue b/packages/docs/src/components/app/Link.vue new file mode 100644 index 0000000..f27aebf --- /dev/null +++ b/packages/docs/src/components/app/Link.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/docs/src/components/app/Markdown.vue b/packages/docs/src/components/app/Markdown.vue new file mode 100644 index 0000000..0509870 --- /dev/null +++ b/packages/docs/src/components/app/Markdown.vue @@ -0,0 +1,113 @@ + + + diff --git a/packages/docs/src/components/app/Markup.vue b/packages/docs/src/components/app/Markup.vue new file mode 100644 index 0000000..fda0e56 --- /dev/null +++ b/packages/docs/src/components/app/Markup.vue @@ -0,0 +1,281 @@ + + + + + diff --git a/packages/docs/src/components/app/Sheet.vue b/packages/docs/src/components/app/Sheet.vue new file mode 100644 index 0000000..606cff1 --- /dev/null +++ b/packages/docs/src/components/app/Sheet.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/docs/src/components/app/Table.vue b/packages/docs/src/components/app/Table.vue new file mode 100644 index 0000000..0237afb --- /dev/null +++ b/packages/docs/src/components/app/Table.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/docs/src/components/app/TextField.vue b/packages/docs/src/components/app/TextField.vue new file mode 100644 index 0000000..1c1ae98 --- /dev/null +++ b/packages/docs/src/components/app/TextField.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/docs/src/components/app/Title.vue b/packages/docs/src/components/app/Title.vue new file mode 100644 index 0000000..b137919 --- /dev/null +++ b/packages/docs/src/components/app/Title.vue @@ -0,0 +1,7 @@ + + + diff --git a/packages/docs/src/components/app/Toc.vue b/packages/docs/src/components/app/Toc.vue new file mode 100644 index 0000000..2281419 --- /dev/null +++ b/packages/docs/src/components/app/Toc.vue @@ -0,0 +1,241 @@ + + + + + diff --git a/packages/docs/src/components/app/TooltipBtn.vue b/packages/docs/src/components/app/TooltipBtn.vue new file mode 100644 index 0000000..06393ea --- /dev/null +++ b/packages/docs/src/components/app/TooltipBtn.vue @@ -0,0 +1,60 @@ + + + + + + + diff --git a/packages/docs/src/components/app/V2Banner.vue b/packages/docs/src/components/app/V2Banner.vue new file mode 100644 index 0000000..4a133b1 --- /dev/null +++ b/packages/docs/src/components/app/V2Banner.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/docs/src/components/app/VersionBtn.vue b/packages/docs/src/components/app/VersionBtn.vue new file mode 100644 index 0000000..36ed352 --- /dev/null +++ b/packages/docs/src/components/app/VersionBtn.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/docs/src/components/app/VerticalDivider.vue b/packages/docs/src/components/app/VerticalDivider.vue new file mode 100644 index 0000000..8bcd6c4 --- /dev/null +++ b/packages/docs/src/components/app/VerticalDivider.vue @@ -0,0 +1,12 @@ + + + diff --git a/packages/docs/src/components/app/bar/Bar.vue b/packages/docs/src/components/app/bar/Bar.vue new file mode 100644 index 0000000..09084f4 --- /dev/null +++ b/packages/docs/src/components/app/bar/Bar.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/docs/src/components/app/bar/EcosystemMenu.vue b/packages/docs/src/components/app/bar/EcosystemMenu.vue new file mode 100644 index 0000000..5f46fd9 --- /dev/null +++ b/packages/docs/src/components/app/bar/EcosystemMenu.vue @@ -0,0 +1,92 @@ + + + diff --git a/packages/docs/src/components/app/bar/EnterpriseLink.vue b/packages/docs/src/components/app/bar/EnterpriseLink.vue new file mode 100644 index 0000000..31c5ca9 --- /dev/null +++ b/packages/docs/src/components/app/bar/EnterpriseLink.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/docs/src/components/app/bar/JobsLink.vue b/packages/docs/src/components/app/bar/JobsLink.vue new file mode 100644 index 0000000..a793854 --- /dev/null +++ b/packages/docs/src/components/app/bar/JobsLink.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/packages/docs/src/components/app/bar/LanguageMenu.vue b/packages/docs/src/components/app/bar/LanguageMenu.vue new file mode 100644 index 0000000..91e04c3 --- /dev/null +++ b/packages/docs/src/components/app/bar/LanguageMenu.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/docs/src/components/app/bar/LearnMenu.vue b/packages/docs/src/components/app/bar/LearnMenu.vue new file mode 100644 index 0000000..aa59d7c --- /dev/null +++ b/packages/docs/src/components/app/bar/LearnMenu.vue @@ -0,0 +1,88 @@ + + + diff --git a/packages/docs/src/components/app/bar/Logo.vue b/packages/docs/src/components/app/bar/Logo.vue new file mode 100644 index 0000000..eef4202 --- /dev/null +++ b/packages/docs/src/components/app/bar/Logo.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/docs/src/components/app/bar/NotificationsMenu.vue b/packages/docs/src/components/app/bar/NotificationsMenu.vue new file mode 100644 index 0000000..3cabc89 --- /dev/null +++ b/packages/docs/src/components/app/bar/NotificationsMenu.vue @@ -0,0 +1,190 @@ + + + diff --git a/packages/docs/src/components/app/bar/PlaygroundLink.vue b/packages/docs/src/components/app/bar/PlaygroundLink.vue new file mode 100644 index 0000000..9a79427 --- /dev/null +++ b/packages/docs/src/components/app/bar/PlaygroundLink.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/docs/src/components/app/bar/SettingsToggle.vue b/packages/docs/src/components/app/bar/SettingsToggle.vue new file mode 100644 index 0000000..77ff0c0 --- /dev/null +++ b/packages/docs/src/components/app/bar/SettingsToggle.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/docs/src/components/app/bar/SponsorLink.vue b/packages/docs/src/components/app/bar/SponsorLink.vue new file mode 100644 index 0000000..5769f63 --- /dev/null +++ b/packages/docs/src/components/app/bar/SponsorLink.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/docs/src/components/app/bar/StoreLink.vue b/packages/docs/src/components/app/bar/StoreLink.vue new file mode 100644 index 0000000..42b8216 --- /dev/null +++ b/packages/docs/src/components/app/bar/StoreLink.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/docs/src/components/app/bar/SupportMenu.vue b/packages/docs/src/components/app/bar/SupportMenu.vue new file mode 100644 index 0000000..a74e3ba --- /dev/null +++ b/packages/docs/src/components/app/bar/SupportMenu.vue @@ -0,0 +1,71 @@ + + + diff --git a/packages/docs/src/components/app/bar/TeamLink.vue b/packages/docs/src/components/app/bar/TeamLink.vue new file mode 100644 index 0000000..2f59c80 --- /dev/null +++ b/packages/docs/src/components/app/bar/TeamLink.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/docs/src/components/app/bar/ThemeToggle.vue b/packages/docs/src/components/app/bar/ThemeToggle.vue new file mode 100644 index 0000000..1786d87 --- /dev/null +++ b/packages/docs/src/components/app/bar/ThemeToggle.vue @@ -0,0 +1,26 @@ + + + diff --git a/packages/docs/src/components/app/drawer/Append.vue b/packages/docs/src/components/app/drawer/Append.vue new file mode 100644 index 0000000..1b527f2 --- /dev/null +++ b/packages/docs/src/components/app/drawer/Append.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/docs/src/components/app/drawer/Drawer.vue b/packages/docs/src/components/app/drawer/Drawer.vue new file mode 100644 index 0000000..c655455 --- /dev/null +++ b/packages/docs/src/components/app/drawer/Drawer.vue @@ -0,0 +1,96 @@ + + + diff --git a/packages/docs/src/components/app/drawer/DrawerToggleRail.vue b/packages/docs/src/components/app/drawer/DrawerToggleRail.vue new file mode 100644 index 0000000..9d5f3ac --- /dev/null +++ b/packages/docs/src/components/app/drawer/DrawerToggleRail.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/app/drawer/PinnedItems.vue b/packages/docs/src/components/app/drawer/PinnedItems.vue new file mode 100644 index 0000000..dfcee0e --- /dev/null +++ b/packages/docs/src/components/app/drawer/PinnedItems.vue @@ -0,0 +1,82 @@ + + + diff --git a/packages/docs/src/components/app/list/LinkListItem.vue b/packages/docs/src/components/app/list/LinkListItem.vue new file mode 100644 index 0000000..bf97522 --- /dev/null +++ b/packages/docs/src/components/app/list/LinkListItem.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/docs/src/components/app/list/List.vue b/packages/docs/src/components/app/list/List.vue new file mode 100644 index 0000000..7f4f8cf --- /dev/null +++ b/packages/docs/src/components/app/list/List.vue @@ -0,0 +1,180 @@ + + + diff --git a/packages/docs/src/components/app/menu/Menu.vue b/packages/docs/src/components/app/menu/Menu.vue new file mode 100644 index 0000000..488aca2 --- /dev/null +++ b/packages/docs/src/components/app/menu/Menu.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/docs/src/components/app/search/Search.vue b/packages/docs/src/components/app/search/Search.vue new file mode 100644 index 0000000..52e6f10 --- /dev/null +++ b/packages/docs/src/components/app/search/Search.vue @@ -0,0 +1,232 @@ + + + + + + diff --git a/packages/docs/src/components/app/search/SearchRecent.vue b/packages/docs/src/components/app/search/SearchRecent.vue new file mode 100644 index 0000000..d5c4f03 --- /dev/null +++ b/packages/docs/src/components/app/search/SearchRecent.vue @@ -0,0 +1,55 @@ + + + diff --git a/packages/docs/src/components/app/search/SearchResults.vue b/packages/docs/src/components/app/search/SearchResults.vue new file mode 100644 index 0000000..0e3bb02 --- /dev/null +++ b/packages/docs/src/components/app/search/SearchResults.vue @@ -0,0 +1,153 @@ + + + + + + + + diff --git a/packages/docs/src/components/app/settings/AdvancedOptions.vue b/packages/docs/src/components/app/settings/AdvancedOptions.vue new file mode 100644 index 0000000..b14db9e --- /dev/null +++ b/packages/docs/src/components/app/settings/AdvancedOptions.vue @@ -0,0 +1,66 @@ + + + diff --git a/packages/docs/src/components/app/settings/Append.vue b/packages/docs/src/components/app/settings/Append.vue new file mode 100644 index 0000000..57e64b3 --- /dev/null +++ b/packages/docs/src/components/app/settings/Append.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/components/app/settings/DeveloperMode.vue b/packages/docs/src/components/app/settings/DeveloperMode.vue new file mode 100644 index 0000000..31885ed --- /dev/null +++ b/packages/docs/src/components/app/settings/DeveloperMode.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/docs/src/components/app/settings/DocumentationBuild.vue b/packages/docs/src/components/app/settings/DocumentationBuild.vue new file mode 100644 index 0000000..cc347d2 --- /dev/null +++ b/packages/docs/src/components/app/settings/DocumentationBuild.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/docs/src/components/app/settings/Drawer.vue b/packages/docs/src/components/app/settings/Drawer.vue new file mode 100644 index 0000000..4f627dd --- /dev/null +++ b/packages/docs/src/components/app/settings/Drawer.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/docs/src/components/app/settings/LatestCommit.vue b/packages/docs/src/components/app/settings/LatestCommit.vue new file mode 100644 index 0000000..855b025 --- /dev/null +++ b/packages/docs/src/components/app/settings/LatestCommit.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/app/settings/LatestRelease.vue b/packages/docs/src/components/app/settings/LatestRelease.vue new file mode 100644 index 0000000..e9db419 --- /dev/null +++ b/packages/docs/src/components/app/settings/LatestRelease.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/app/settings/Options.vue b/packages/docs/src/components/app/settings/Options.vue new file mode 100644 index 0000000..f5e429c --- /dev/null +++ b/packages/docs/src/components/app/settings/Options.vue @@ -0,0 +1,24 @@ + diff --git a/packages/docs/src/components/app/settings/PerksOptions.vue b/packages/docs/src/components/app/settings/PerksOptions.vue new file mode 100644 index 0000000..11e02d3 --- /dev/null +++ b/packages/docs/src/components/app/settings/PerksOptions.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/docs/src/components/app/settings/SettingsHeader.vue b/packages/docs/src/components/app/settings/SettingsHeader.vue new file mode 100644 index 0000000..eea01e8 --- /dev/null +++ b/packages/docs/src/components/app/settings/SettingsHeader.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/AdOption.vue b/packages/docs/src/components/app/settings/options/AdOption.vue new file mode 100644 index 0000000..3fc7127 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/AdOption.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/ApiOption.vue b/packages/docs/src/components/app/settings/options/ApiOption.vue new file mode 100644 index 0000000..3a5e9f9 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/ApiOption.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/AvatarOption.vue b/packages/docs/src/components/app/settings/options/AvatarOption.vue new file mode 100644 index 0000000..4ddd63a --- /dev/null +++ b/packages/docs/src/components/app/settings/options/AvatarOption.vue @@ -0,0 +1,92 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/BannerOption.vue b/packages/docs/src/components/app/settings/options/BannerOption.vue new file mode 100644 index 0000000..2883fce --- /dev/null +++ b/packages/docs/src/components/app/settings/options/BannerOption.vue @@ -0,0 +1,39 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/CodeOption.vue b/packages/docs/src/components/app/settings/options/CodeOption.vue new file mode 100644 index 0000000..184ebb4 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/CodeOption.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/NotificationsOption.vue b/packages/docs/src/components/app/settings/options/NotificationsOption.vue new file mode 100644 index 0000000..142439d --- /dev/null +++ b/packages/docs/src/components/app/settings/options/NotificationsOption.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/PinOption.vue b/packages/docs/src/components/app/settings/options/PinOption.vue new file mode 100644 index 0000000..28f71b0 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/PinOption.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/QuickbarOption.vue b/packages/docs/src/components/app/settings/options/QuickbarOption.vue new file mode 100644 index 0000000..0dde7e9 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/QuickbarOption.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/RailDrawerOption.vue b/packages/docs/src/components/app/settings/options/RailDrawerOption.vue new file mode 100644 index 0000000..050e3d5 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/RailDrawerOption.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/SlashSearchOption.vue b/packages/docs/src/components/app/settings/options/SlashSearchOption.vue new file mode 100644 index 0000000..786c299 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/SlashSearchOption.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/docs/src/components/app/settings/options/ThemeOption.vue b/packages/docs/src/components/app/settings/options/ThemeOption.vue new file mode 100644 index 0000000..bb12535 --- /dev/null +++ b/packages/docs/src/components/app/settings/options/ThemeOption.vue @@ -0,0 +1,75 @@ + + + diff --git a/packages/docs/src/components/components/ListItem.vue b/packages/docs/src/components/components/ListItem.vue new file mode 100644 index 0000000..87290ca --- /dev/null +++ b/packages/docs/src/components/components/ListItem.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/docs/src/components/dashboard/DashboardEmptyState.vue b/packages/docs/src/components/dashboard/DashboardEmptyState.vue new file mode 100644 index 0000000..80b4d5c --- /dev/null +++ b/packages/docs/src/components/dashboard/DashboardEmptyState.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/docs/src/components/doc/Contribute.vue b/packages/docs/src/components/doc/Contribute.vue new file mode 100644 index 0000000..a49c665 --- /dev/null +++ b/packages/docs/src/components/doc/Contribute.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/doc/Explorer.vue b/packages/docs/src/components/doc/Explorer.vue new file mode 100644 index 0000000..639842a --- /dev/null +++ b/packages/docs/src/components/doc/Explorer.vue @@ -0,0 +1,108 @@ + + + diff --git a/packages/docs/src/components/doc/IconList.vue b/packages/docs/src/components/doc/IconList.vue new file mode 100644 index 0000000..10b1b22 --- /dev/null +++ b/packages/docs/src/components/doc/IconList.vue @@ -0,0 +1,93 @@ + + + diff --git a/packages/docs/src/components/doc/IconTable.vue b/packages/docs/src/components/doc/IconTable.vue new file mode 100644 index 0000000..0aa59c8 --- /dev/null +++ b/packages/docs/src/components/doc/IconTable.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/docs/src/components/doc/MadeWithVueAttribution.vue b/packages/docs/src/components/doc/MadeWithVueAttribution.vue new file mode 100644 index 0000000..3a0bbf4 --- /dev/null +++ b/packages/docs/src/components/doc/MadeWithVueAttribution.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue new file mode 100644 index 0000000..2d5ad15 --- /dev/null +++ b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue @@ -0,0 +1,102 @@ + + + diff --git a/packages/docs/src/components/doc/MadeWithVuetifyLink.vue b/packages/docs/src/components/doc/MadeWithVuetifyLink.vue new file mode 100644 index 0000000..111db0e --- /dev/null +++ b/packages/docs/src/components/doc/MadeWithVuetifyLink.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/docs/src/components/doc/PremiumThemesGallery.vue b/packages/docs/src/components/doc/PremiumThemesGallery.vue new file mode 100644 index 0000000..2964c12 --- /dev/null +++ b/packages/docs/src/components/doc/PremiumThemesGallery.vue @@ -0,0 +1,90 @@ + + + diff --git a/packages/docs/src/components/doc/ReadyForMore.vue b/packages/docs/src/components/doc/ReadyForMore.vue new file mode 100644 index 0000000..e1788c7 --- /dev/null +++ b/packages/docs/src/components/doc/ReadyForMore.vue @@ -0,0 +1,26 @@ + + + diff --git a/packages/docs/src/components/doc/RelatedPage.vue b/packages/docs/src/components/doc/RelatedPage.vue new file mode 100644 index 0000000..1e8a52d --- /dev/null +++ b/packages/docs/src/components/doc/RelatedPage.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/docs/src/components/doc/RelatedPages.vue b/packages/docs/src/components/doc/RelatedPages.vue new file mode 100644 index 0000000..f48ac71 --- /dev/null +++ b/packages/docs/src/components/doc/RelatedPages.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/docs/src/components/doc/Releases.vue b/packages/docs/src/components/doc/Releases.vue new file mode 100644 index 0000000..3709c08 --- /dev/null +++ b/packages/docs/src/components/doc/Releases.vue @@ -0,0 +1,309 @@ + + + + + diff --git a/packages/docs/src/components/doc/Tabs.vue b/packages/docs/src/components/doc/Tabs.vue new file mode 100644 index 0000000..6cab572 --- /dev/null +++ b/packages/docs/src/components/doc/Tabs.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/docs/src/components/doc/ThemeCard.vue b/packages/docs/src/components/doc/ThemeCard.vue new file mode 100644 index 0000000..fd91029 --- /dev/null +++ b/packages/docs/src/components/doc/ThemeCard.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/docs/src/components/doc/ThemeVendor.vue b/packages/docs/src/components/doc/ThemeVendor.vue new file mode 100644 index 0000000..983939b --- /dev/null +++ b/packages/docs/src/components/doc/ThemeVendor.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/docs/src/components/doc/UpNext.vue b/packages/docs/src/components/doc/UpNext.vue new file mode 100644 index 0000000..9df28a7 --- /dev/null +++ b/packages/docs/src/components/doc/UpNext.vue @@ -0,0 +1,72 @@ + + + diff --git a/packages/docs/src/components/doc/VueJobs.vue b/packages/docs/src/components/doc/VueJobs.vue new file mode 100644 index 0000000..bb4b9db --- /dev/null +++ b/packages/docs/src/components/doc/VueJobs.vue @@ -0,0 +1,108 @@ + + + diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue new file mode 100644 index 0000000..1872379 --- /dev/null +++ b/packages/docs/src/components/examples/Example.vue @@ -0,0 +1,266 @@ + + + diff --git a/packages/docs/src/components/examples/ExampleMissing.vue b/packages/docs/src/components/examples/ExampleMissing.vue new file mode 100644 index 0000000..3dd00e0 --- /dev/null +++ b/packages/docs/src/components/examples/ExampleMissing.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/docs/src/components/examples/Usage.vue b/packages/docs/src/components/examples/Usage.vue new file mode 100644 index 0000000..c5934b3 --- /dev/null +++ b/packages/docs/src/components/examples/Usage.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/docs/src/components/examples/UsageExample.vue b/packages/docs/src/components/examples/UsageExample.vue new file mode 100644 index 0000000..a81c1ab --- /dev/null +++ b/packages/docs/src/components/examples/UsageExample.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/packages/docs/src/components/examples/VueFile.vue b/packages/docs/src/components/examples/VueFile.vue new file mode 100644 index 0000000..a917aa5 --- /dev/null +++ b/packages/docs/src/components/examples/VueFile.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/docs/src/components/features/BreakpointsTable.vue b/packages/docs/src/components/features/BreakpointsTable.vue new file mode 100644 index 0000000..43dbc58 --- /dev/null +++ b/packages/docs/src/components/features/BreakpointsTable.vue @@ -0,0 +1,119 @@ + + + diff --git a/packages/docs/src/components/features/ColorPalette.vue b/packages/docs/src/components/features/ColorPalette.vue new file mode 100644 index 0000000..de0b9ca --- /dev/null +++ b/packages/docs/src/components/features/ColorPalette.vue @@ -0,0 +1,95 @@ + + + diff --git a/packages/docs/src/components/features/SassApi.vue b/packages/docs/src/components/features/SassApi.vue new file mode 100644 index 0000000..befc732 --- /dev/null +++ b/packages/docs/src/components/features/SassApi.vue @@ -0,0 +1,84 @@ + + + diff --git a/packages/docs/src/components/getting-started/WireframeExamples.vue b/packages/docs/src/components/getting-started/WireframeExamples.vue new file mode 100644 index 0000000..656c3e0 --- /dev/null +++ b/packages/docs/src/components/getting-started/WireframeExamples.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/docs/src/components/home/ActionBtns.vue b/packages/docs/src/components/home/ActionBtns.vue new file mode 100644 index 0000000..e379c7c --- /dev/null +++ b/packages/docs/src/components/home/ActionBtns.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/docs/src/components/home/Entry.vue b/packages/docs/src/components/home/Entry.vue new file mode 100644 index 0000000..80e5816 --- /dev/null +++ b/packages/docs/src/components/home/Entry.vue @@ -0,0 +1,113 @@ + + + diff --git a/packages/docs/src/components/home/Features.vue b/packages/docs/src/components/home/Features.vue new file mode 100644 index 0000000..dfda4d3 --- /dev/null +++ b/packages/docs/src/components/home/Features.vue @@ -0,0 +1,66 @@ + + + diff --git a/packages/docs/src/components/home/Footer.vue b/packages/docs/src/components/home/Footer.vue new file mode 100644 index 0000000..6701cce --- /dev/null +++ b/packages/docs/src/components/home/Footer.vue @@ -0,0 +1,123 @@ + + + diff --git a/packages/docs/src/components/home/Logo.vue b/packages/docs/src/components/home/Logo.vue new file mode 100644 index 0000000..d567d83 --- /dev/null +++ b/packages/docs/src/components/home/Logo.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/home/SpecialSponsor.vue b/packages/docs/src/components/home/SpecialSponsor.vue new file mode 100644 index 0000000..e991327 --- /dev/null +++ b/packages/docs/src/components/home/SpecialSponsor.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/docs/src/components/home/Sponsors.vue b/packages/docs/src/components/home/Sponsors.vue new file mode 100644 index 0000000..0b4c436 --- /dev/null +++ b/packages/docs/src/components/home/Sponsors.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/docs/src/components/icons/ChevronDown.vue b/packages/docs/src/components/icons/ChevronDown.vue new file mode 100644 index 0000000..a4d29b9 --- /dev/null +++ b/packages/docs/src/components/icons/ChevronDown.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/docs/src/components/introduction/Comparison.vue b/packages/docs/src/components/introduction/Comparison.vue new file mode 100644 index 0000000..4050d7b --- /dev/null +++ b/packages/docs/src/components/introduction/Comparison.vue @@ -0,0 +1,154 @@ + + + diff --git a/packages/docs/src/components/introduction/DirectSupport.vue b/packages/docs/src/components/introduction/DirectSupport.vue new file mode 100644 index 0000000..cc2c5f4 --- /dev/null +++ b/packages/docs/src/components/introduction/DirectSupport.vue @@ -0,0 +1,57 @@ + + + diff --git a/packages/docs/src/components/introduction/DiscordDeck.vue b/packages/docs/src/components/introduction/DiscordDeck.vue new file mode 100644 index 0000000..d6b60b5 --- /dev/null +++ b/packages/docs/src/components/introduction/DiscordDeck.vue @@ -0,0 +1,147 @@ + + + diff --git a/packages/docs/src/components/introduction/EnterpriseDeck.vue b/packages/docs/src/components/introduction/EnterpriseDeck.vue new file mode 100644 index 0000000..18874e2 --- /dev/null +++ b/packages/docs/src/components/introduction/EnterpriseDeck.vue @@ -0,0 +1,150 @@ + + + diff --git a/packages/docs/src/components/introduction/EnterpriseForm.vue b/packages/docs/src/components/introduction/EnterpriseForm.vue new file mode 100644 index 0000000..470ab87 --- /dev/null +++ b/packages/docs/src/components/introduction/EnterpriseForm.vue @@ -0,0 +1,204 @@ + + + diff --git a/packages/docs/src/components/introduction/SlaDeck.vue b/packages/docs/src/components/introduction/SlaDeck.vue new file mode 100644 index 0000000..7a29e8a --- /dev/null +++ b/packages/docs/src/components/introduction/SlaDeck.vue @@ -0,0 +1,143 @@ + + + diff --git a/packages/docs/src/components/promoted/Base.vue b/packages/docs/src/components/promoted/Base.vue new file mode 100644 index 0000000..17af46e --- /dev/null +++ b/packages/docs/src/components/promoted/Base.vue @@ -0,0 +1,50 @@ + + + + + + + diff --git a/packages/docs/src/components/promoted/Carbon.vue b/packages/docs/src/components/promoted/Carbon.vue new file mode 100644 index 0000000..6ecd972 --- /dev/null +++ b/packages/docs/src/components/promoted/Carbon.vue @@ -0,0 +1,142 @@ + + + + + diff --git a/packages/docs/src/components/promoted/Discovery.vue b/packages/docs/src/components/promoted/Discovery.vue new file mode 100644 index 0000000..fea9021 --- /dev/null +++ b/packages/docs/src/components/promoted/Discovery.vue @@ -0,0 +1,3 @@ + diff --git a/packages/docs/src/components/promoted/Entry.vue b/packages/docs/src/components/promoted/Entry.vue new file mode 100644 index 0000000..05e6166 --- /dev/null +++ b/packages/docs/src/components/promoted/Entry.vue @@ -0,0 +1,9 @@ + + + diff --git a/packages/docs/src/components/promoted/Inline.vue b/packages/docs/src/components/promoted/Inline.vue new file mode 100644 index 0000000..e8ef5f7 --- /dev/null +++ b/packages/docs/src/components/promoted/Inline.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/components/promoted/Promoted.vue b/packages/docs/src/components/promoted/Promoted.vue new file mode 100644 index 0000000..f2f1080 --- /dev/null +++ b/packages/docs/src/components/promoted/Promoted.vue @@ -0,0 +1,104 @@ + + + + + + + diff --git a/packages/docs/src/components/promoted/Random.vue b/packages/docs/src/components/promoted/Random.vue new file mode 100644 index 0000000..ee65bf7 --- /dev/null +++ b/packages/docs/src/components/promoted/Random.vue @@ -0,0 +1,3 @@ + diff --git a/packages/docs/src/components/promoted/Script.vue b/packages/docs/src/components/promoted/Script.vue new file mode 100644 index 0000000..1ae4425 --- /dev/null +++ b/packages/docs/src/components/promoted/Script.vue @@ -0,0 +1,48 @@ + + + diff --git a/packages/docs/src/components/promoted/Vuetify.vue b/packages/docs/src/components/promoted/Vuetify.vue new file mode 100644 index 0000000..f828a9a --- /dev/null +++ b/packages/docs/src/components/promoted/Vuetify.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/docs/src/components/promotions/PromotionCard.vue b/packages/docs/src/components/promotions/PromotionCard.vue new file mode 100644 index 0000000..c7ea81f --- /dev/null +++ b/packages/docs/src/components/promotions/PromotionCard.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/packages/docs/src/components/resources/ColorPalette.vue b/packages/docs/src/components/resources/ColorPalette.vue new file mode 100644 index 0000000..c54dadb --- /dev/null +++ b/packages/docs/src/components/resources/ColorPalette.vue @@ -0,0 +1,30 @@ + + + diff --git a/packages/docs/src/components/resources/Logos.vue b/packages/docs/src/components/resources/Logos.vue new file mode 100644 index 0000000..e1d737e --- /dev/null +++ b/packages/docs/src/components/resources/Logos.vue @@ -0,0 +1,161 @@ + + + diff --git a/packages/docs/src/components/sponsor/Card.vue b/packages/docs/src/components/sponsor/Card.vue new file mode 100644 index 0000000..4ab5291 --- /dev/null +++ b/packages/docs/src/components/sponsor/Card.vue @@ -0,0 +1,78 @@ + + + diff --git a/packages/docs/src/components/sponsor/Link.vue b/packages/docs/src/components/sponsor/Link.vue new file mode 100644 index 0000000..fb9cfa8 --- /dev/null +++ b/packages/docs/src/components/sponsor/Link.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/docs/src/components/sponsor/Sponsors.vue b/packages/docs/src/components/sponsor/Sponsors.vue new file mode 100644 index 0000000..5d272da --- /dev/null +++ b/packages/docs/src/components/sponsor/Sponsors.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/components/user/OneSubCard.vue b/packages/docs/src/components/user/OneSubCard.vue new file mode 100644 index 0000000..0a1bffe --- /dev/null +++ b/packages/docs/src/components/user/OneSubCard.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/docs/src/components/user/UserTabs.vue b/packages/docs/src/components/user/UserTabs.vue new file mode 100644 index 0000000..2c91e47 --- /dev/null +++ b/packages/docs/src/components/user/UserTabs.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/components/user/badges/UserAdminBadge.vue b/packages/docs/src/components/user/badges/UserAdminBadge.vue new file mode 100644 index 0000000..500c720 --- /dev/null +++ b/packages/docs/src/components/user/badges/UserAdminBadge.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/docs/src/components/user/badges/UserOneBadge.vue b/packages/docs/src/components/user/badges/UserOneBadge.vue new file mode 100644 index 0000000..3dce9e7 --- /dev/null +++ b/packages/docs/src/components/user/badges/UserOneBadge.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/docs/src/components/user/badges/UserSponsorBadge.vue b/packages/docs/src/components/user/badges/UserSponsorBadge.vue new file mode 100644 index 0000000..897e430 --- /dev/null +++ b/packages/docs/src/components/user/badges/UserSponsorBadge.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/docs/src/composables/ad.ts b/packages/docs/src/composables/ad.ts new file mode 100644 index 0000000..ec130a0 --- /dev/null +++ b/packages/docs/src/composables/ad.ts @@ -0,0 +1,81 @@ +interface AdProps { + medium: string + slug?: string + type?: string + compact?: boolean + permanent?: boolean +} + +export const createAdProps = () => ({ + medium: { + type: String, + default: 'docs', + }, + slug: String, + type: String, + compact: Boolean, + permanent: Boolean, +}) + +export const useAd = (props: AdProps) => { + const { locale } = useI18n() + const store = useAdsStore() + const user = useUserStore() + + const ads = computed(() => { + return store.ads.filter(ad => ad.metadata?.discoverable && (props.type ? props.type === kebabCase(ad.metadata.type) : true)) + }) + + const ad = computed(() => { + if (user.disableAds && !props.permanent) return undefined + if (props.slug) return store.ads?.find(ad => ad.slug === props.slug) + + return ads.value[Math.floor(Math.random() * ads.value.length)] + }) + + const href = computed(() => { + if (!ad.value) return undefined + + const [url, query] = ad.value.metadata!.url.split('?') + + if (!url.startsWith('http')) { + return leadingSlash(trailingSlash(`${locale.value}${url}`)) + } + + if (query && query.includes('utm_source')) { + return `${url}?${query}` + } + + return `${url}?utm_source=vuetifyads&utm_medium=${props.medium}` + (query ? `&${query}` : '') + }) + + const isSponsored = computed(() => { + return ad.value?.metadata?.sponsored + }) + + const attrs = computed(() => { + if (!ad.value) return undefined + + return { + class: 'text-decoration-none', + href: href.value, + rel: `noopener${isSponsored.value ? ' sponsored' : ''}`, + target: '_blank', + } + }) + + const description = computed(() => { + return ad.value?.metadata!.description + }) + + const src = computed(() => { + if (props.compact) return undefined + + return ( + ad.value?.metadata?.images?.logo?.url || + ad.value?.metadata?.src + ) + }) + + return { ad, attrs, description, src } +} diff --git a/packages/docs/src/composables/cosmic.ts b/packages/docs/src/composables/cosmic.ts new file mode 100644 index 0000000..01a2cb7 --- /dev/null +++ b/packages/docs/src/composables/cosmic.ts @@ -0,0 +1,13 @@ +// Imports +import { createBucketClient } from '@cosmicjs/sdk' + +export function useCosmic ( + bucketSlug = import.meta.env.VITE_COSMIC_2_BUCKET_SLUG as string | undefined, + readKey = import.meta.env.VITE_COSMIC_2_BUCKET_READ_KEY as string | undefined, +) { + return { + bucket: (readKey && bucketSlug) + ? createBucketClient({ bucketSlug, readKey }) + : undefined, + } +} diff --git a/packages/docs/src/composables/playground.ts b/packages/docs/src/composables/playground.ts new file mode 100644 index 0000000..1a35d39 --- /dev/null +++ b/packages/docs/src/composables/playground.ts @@ -0,0 +1,36 @@ +// Utilities +import { strFromU8, strToU8, zlibSync } from 'fflate' +import { version as vuetifyVersion } from 'vuetify' +import { version as vueVersion } from 'vue' + +// This is copied directly from playground +function utoa (data: string): string { + const buffer = strToU8(data) + const zipped = zlibSync(buffer, { level: 9 }) + const binary = strFromU8(zipped, true) + return btoa(binary) +} + +export function usePlayground ( + sections: ({ name: string, content: string, language: string})[] = [], + css: string[] = [], + imports: Record = {}, + setup?: string, +) { + const files: Record = { + 'App.vue': sections + .filter(section => ['script', 'template', 'style'].includes(section.name)) + .map(section => section.content) + .join('\n\n'), + 'links.json': JSON.stringify({ css }), + 'import-map.json': JSON.stringify({ imports }), + } + + if (setup) { + files['vuetify.js'] = setup + } + + const hash = utoa(JSON.stringify([files, vueVersion, vuetifyVersion, true])) + + return `https://play.vuetifyjs.com#${hash}` +} diff --git a/packages/docs/src/data/301.json b/packages/docs/src/data/301.json new file mode 100644 index 0000000..d87996b --- /dev/null +++ b/packages/docs/src/data/301.json @@ -0,0 +1,130 @@ +{ + "components/dropdowns": "/components/menus", + "quick-start": "/getting-started/installation", + "vuetify/quick-start": "/getting-started/installation", + "getting-started/quick-start/": "/getting-started/installation", + "motion": "/styles/transitions", + "components/sidebars": "/components/navigation-drawers", + "components/v-navigation-drawer": "/components/navigation-drawers", + "components/collapsible": "/components/expansion-panels", + "components/navbars": "/components/toolbars", + "components/toasts": "/components/snackbars", + "components/carousel": "/components/carousels", + "components/datatables": "/components/data-tables/basics", + "components/expansion-panel": "/components/expansion-panels", + "components/footer": "/components/footers", + "directives/badges": "/components/badges", + "vuetify/why-vuetify": "/getting-started/why-vuetify", + "vuetify/frequently-asked-questions": "/getting-started/frequently-asked-questions", + "vuetify/sponsors-and-backers": "/introduction/sponsors-and-backers", + "getting-started/releases-and-migrations/": "/getting-started/upgrade-guide", + "vuetify/releases-and-migrations": "/getting-started/upgrade-guide", + "vuetify/contributing": "/getting-started/contributing", + "vuetify/roadmap": "/getting-started/roadmap", + "vuetify/a-la-carte": "/features/treeshaking", + "getting-started/a-la-carte": "/features/treeshaking", + "guides/a-la-carte": "/features/treeshaking", + "customization/a-la-carte": "/features/treeshaking", + "pre-made-themes": "/resources/themes", + "layout/pre-made-themes": "/resources/themes", + "themes/premium": "/resources/themes", + "layout/grid": "/components/grids", + "layout/pre-defined": "/getting-started/wireframes", + "getting-started/pre-made-layouts": "/getting-started/wireframes", + "layout/breakpoints": "/features/display-and-platform", + "layout/aspect-ratios": "/components/aspect-ratios", + "layout/spacing": "/styles/spacing", + "layout/alignment": "/styles/alignment", + "layout/display": "/styles/display", + "layout/elevation": "/styles/elevation", + "style/colors": "/styles/colors", + "style/theme": "/customization/theme", + "style/typography": "/styles/text-and-typography", + "styles/typography": "/styles/text-and-typography", + "styles/text": "/styles/text-and-typography", + "style/content": "/styles/content", + "motion/scroll": "/customization/scrolling", + "styles/scroll": "/customization/scrolling", + "motion/transitions": "/styles/transitions", + "components/form": "/components/forms", + "components/selection-controls": "/components/checkboxes", + "components/slide-toggles": "/components/switches", + "components/buttons-and-indicators": "/components/buttons", + "framework/pre-defined": "/getting-started/pre-made-layouts", + "framework/pre-made": "/getting-started/pre-made-layouts", + "framework/pre-defined-layouts": "/getting-started/pre-made-layouts", + "components/data-iterator": "/components/data-iterators", + "framework/a-la-carte": "/customization/a-la-carte", + "framework/grid": "/components/grids", + "framework/application": "/components/application", + "framework/breakpoints": "/features/display-and-platform", + "framework/icons": "/customization/icons", + "framework/i18n": "/customization/internationalization", + "framework/theme": "/customization/theme", + "framework/scroll": "/customization/scrolling", + "framework/aspect-ratios": "/components/aspect-ratios", + "framework/pre-made-layouts": "/getting-started/pre-made-layouts", + "framework/colors": "/styles/colors", + "framework/content": "/styles/content", + "framework/typography": "/styles/typography", + "framework/display": "/styles/display", + "framework/elevation": "/styles/elevation", + "framework/spacing": "/styles/spacing", + "styles/alignment": "/styles/text", + "framework/text-alignment": "/styles/text-and-typography", + "styles/text-alignment": "/styles/text-and-typography", + "framework/transitions": "/styles/transitions", + "customizing/sandbox": "/customization/sandbox", + "customizing/a-la-carte": "/customization/a-la-carte", + "customizing/breakpoints": "/features/display-and-platform", + "customizing/theme": "/customization/theme", + "customizing/icons": "/customization/icons", + "customizing/i18n": "/customization/internationalization", + "getting-started/why-vuetify": "/introduction/why-vuetify", + "getting-started/meet-the-team": "/about/meet-the-team", + "getting-started/sponsors-and-backers": "/introduction/sponsors-and-backers", + "getting-started/roadmap": "/introduction/roadmap", + "getting-started/long-term-support": "/introduction/long-term-support", + "getting-started/consulting-and-support": "/introduction/enterprise-support", + "getting-started/support/enterprise": "/introduction/enterprise-support", + "components/textarea": "/components/textareas", + "components/virtual-scrollers": "/components/virtual-scroller", + "directives/resizing": "/directives/resize", + "directives/ripples": "/directives/ripple", + "directives/scrolling": "/directives/scroll", + "directives/touch-support": "/directives/touch", + "introduction/frequently-asked-questions": "/getting-started/frequently-asked-questions", + "professional-support/consulting": "/introduction/enterprise-support", + "professional-support/enterprise": "/introduction/enterprise-support", + "introduction/support": "/introduction/enterprise-support", + "introduction/enterprise": "/introduction/enterprise-support", + "introduction/consulting": "/introduction/enterprise-support", + "customization/accessibility": "/features/accessibility", + "customization/rtl": "/features/bidirectionality", + "features/rtl": "/features/bidirectionality", + "features/breakpoints": "/features/display-and-platform", + "features/bidirectionality": "/features/internationalization", + "customization/bidirectionality": "/features/bidirectionality", + "customization/breakpoints": "/features/display-and-platform", + "customization/global-config": "/features/global-config", + "customization/scrolling": "/features/scrolling", + "customization/icons": "/features/icon-fonts", + "customization/internationalization": "/features/internationalization", + "customization/presets": "/features/presets", + "customization/sass-variables": "/features/sass-variables", + "customization/theme": "/features/theme", + "about/sponsors-and-backers": "/introduction/sponsors-and-backers", + "components/simple-tables": "/components/tables", + "components/data-tables": "/components/data-tables/basics", + "components/date-pickers-month": "/introduction/roadmap", + "components/overflow-btns": "/introduction/roadmap", + "components/server-side-data-tables": "/components/data-tables/server-side-tables", + "components/virtual-data-tables": "/components/data-tables/virtual-tables", + "api/v-click-outside": "/api/v-click-outside-directive", + "api/v-intersect": "/api/v-intersect-directive", + "api/v-mutate": "/api/v-mutate-directive", + "api/v-resize": "/api/v-resize-directive", + "api/v-ripple": "/api/v-ripple-directive", + "api/v-scroll": "/api/v-scroll-directive", + "api/v-touch": "/api/v-touch-directive" +} diff --git a/packages/docs/src/data/metadata.json b/packages/docs/src/data/metadata.json new file mode 100644 index 0000000..71deb98 --- /dev/null +++ b/packages/docs/src/data/metadata.json @@ -0,0 +1,5 @@ +{ + "title": "Vuetify — A Vue Component Framework", + "description": "Vuetify is a no design skills required UI Component Framework for Vue. It provides you with all of the tools necessary to create beautiful content rich web applications.", + "keywords": "vue, material design components, vue components, material design components, vuetify, vuetify, component framework" +} diff --git a/packages/docs/src/data/modified.json b/packages/docs/src/data/modified.json new file mode 100644 index 0000000..7ef6a16 --- /dev/null +++ b/packages/docs/src/data/modified.json @@ -0,0 +1 @@ +{"/components/banners/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 9:14:03 AM","recent":false},"/components/bottom-navigation/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 9:14:03 AM","recent":false},"/components/bottom-sheets/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/03/2020, 6:03:47 PM","recent":false},"/components/breadcrumbs/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/button-groups/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 5:48:27 PM","recent":false},"/components/buttons/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/28/2020, 12:34:30 PM","recent":false},"/components/calendars/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 2:00:24 PM","recent":false},"/components/cards/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/08/2020, 7:55:58 AM","recent":false},"/components/carousels/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/chip-groups/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 5:30:58 PM","recent":false},"/components/chips/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/26/2020, 11:14:29 AM","recent":false},"/components/color-pickers/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/28/2020, 11:42:59 AM","recent":false},"/components/combobox/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/23/2020, 7:59:44 PM","recent":false},"/components/data-iterators/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 7:25:01 AM","recent":false},"/components/data-tables/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/date-pickers-month/":{"created":"07/03/2020, 5:51:52 PM","fresh":false,"modified":"07/03/2020, 5:51:52 PM","recent":false},"/components/date-pickers/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/03/2020, 5:51:52 PM","recent":false},"/components/dialogs/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/03/2020, 6:20:25 PM","recent":false},"/components/dividers/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 9:14:03 AM","recent":false},"/components/expansion-panels/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/file-inputs/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/02/2020, 10:09:10 AM","recent":false},"/components/floating-action-buttons/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/footer/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/25/2020, 11:18:16 AM","recent":false},"/components/forms/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 10:14:01 AM","recent":false},"/components/grids/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/20/2020, 11:16:20 AM","recent":false},"/components/hover/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 5:55:27 PM","recent":false},"/components/icons/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 7:04:52 PM","recent":false},"/components/images/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 9:53:41 AM","recent":false},"/components/inputs/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 1:57:37 PM","recent":false},"/components/item-groups/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/lazy/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 9:18:43 AM","recent":false},"/components/list-item-groups/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:10:21 PM","recent":false},"/components/lists/":{"created":"06/09/2020, 3:49:40 PM","fresh":true,"modified":"08/05/2020, 10:47:43 PM","recent":false},"/components/menus/":{"created":"06/27/2020, 9:28:48 AM","fresh":false,"modified":"07/05/2020, 7:18:50 PM","recent":false},"/components/navigation-drawers/":{"created":"06/09/2020, 3:49:40 PM","fresh":true,"modified":"08/13/2020, 9:48:57 PM","recent":false},"/components/overflow-btns/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 9:53:41 AM","recent":false},"/components/overlays/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 8:21:15 AM","recent":false},"/components/paginations/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 9:11:23 AM","recent":false},"/components/parallax/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 7:43:29 PM","recent":false},"/components/progress-circular/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 10:04:46 AM","recent":false},"/components/progress-linear/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 8:13:26 AM","recent":false},"/components/radio-buttons/":{"created":"07/07/2020, 7:00:15 PM","fresh":false,"modified":"07/07/2020, 7:00:15 PM","recent":false},"/components/range-sliders/":{"created":"07/06/2020, 3:27:38 PM","fresh":false,"modified":"07/06/2020, 3:27:38 PM","recent":false},"/components/ratings/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 9:53:41 AM","recent":false},"/components/selects/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 9:07:33 AM","recent":false},"/components/sheets/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/24/2020, 11:13:55 PM","recent":false},"/components/simple-tables/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 9:00:29 AM","recent":false},"/components/skeleton-loaders/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 8:42:11 AM","recent":false},"/components/slide-groups/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/sliders/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 3:27:38 PM","recent":false},"/components/snackbars/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 6:52:48 PM","recent":false},"/components/sparklines/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 12:03:58 PM","recent":false},"/components/steppers/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/subheaders/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 6:43:08 PM","recent":false},"/components/switches/":{"created":"07/07/2020, 7:00:15 PM","fresh":false,"modified":"07/07/2020, 7:00:15 PM","recent":false},"/components/system-bars/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 9:09:24 AM","recent":false},"/components/tabs/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/text-fields/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 6:36:35 PM","recent":false},"/components/textareas/":{"created":"07/07/2020, 6:57:49 PM","fresh":false,"modified":"07/07/2020, 6:57:49 PM","recent":false},"/components/time-pickers/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 9:53:41 AM","recent":false},"/components/timelines/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/toolbars/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/tooltips/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/02/2020, 10:01:05 AM","recent":false},"/components/treeview/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/05/2020, 5:21:43 PM","recent":false},"/components/virtual-scroller/":{"created":"06/23/2020, 12:41:10 PM","fresh":false,"modified":"07/01/2020, 9:26:45 AM","recent":false},"/components/windows/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/features/breakpoints/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 3:39:12 PM","recent":false},"/features/global-config/":{"created":"06/30/2020, 8:03:48 PM","fresh":false,"modified":"06/30/2020, 8:03:48 PM","recent":false},"/features/icon-fonts/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 6:05:38 PM","recent":false},"/features/internationalization/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 6:16:03 PM","recent":false},"/features/presets/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/21/2020, 9:14:22 PM","recent":false},"/features/rtl/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 7:46:20 AM","recent":false},"/features/sass-variables/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 9:46:14 PM","recent":false},"/features/scrolling/":{"created":"08/04/2020, 7:13:37 PM","fresh":true,"modified":"08/04/2020, 7:13:37 PM","recent":false},"/features/theme/":{"created":"06/09/2020, 3:49:40 PM","fresh":true,"modified":"08/13/2020, 9:48:57 PM","recent":false},"/directives/click-outside/":{"created":"06/23/2020, 10:14:48 AM","fresh":false,"modified":"06/23/2020, 7:59:44 PM","recent":false},"/directives/intersect/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/23/2020, 7:59:44 PM","recent":false},"/directives/mutate/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/23/2020, 7:59:44 PM","recent":false},"/directives/resize/":{"created":"06/23/2020, 11:44:30 AM","fresh":false,"modified":"06/23/2020, 7:59:44 PM","recent":false},"/directives/ripple/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 1:12:58 PM","recent":false},"/directives/scroll/":{"created":"06/23/2020, 12:17:47 PM","fresh":false,"modified":"06/29/2020, 9:53:41 AM","recent":false},"/directives/touch/":{"created":"06/23/2020, 12:23:59 PM","fresh":false,"modified":"06/23/2020, 7:59:44 PM","recent":false},"/getting-started/accessibility/":{"created":"08/04/2020, 7:13:37 PM","fresh":true,"modified":"08/04/2020, 7:13:37 PM","recent":false},"/getting-started/browser-support/":{"created":"05/27/2020, 5:48:18 PM","fresh":false,"modified":"07/08/2020, 2:47:50 PM","recent":false},"/getting-started/contributing/":{"created":"06/03/2020, 6:31:53 PM","fresh":false,"modified":"07/08/2020, 2:47:50 PM","recent":false},"/getting-started/installation/":{"created":"08/04/2020, 7:13:37 PM","fresh":true,"modified":"08/16/2020, 8:47:16 PM","recent":false},"/getting-started/release-notes/":{"created":"08/04/2020, 7:13:37 PM","fresh":true,"modified":"08/04/2020, 7:13:37 PM","recent":false},"/getting-started/treeshaking/":{"created":"08/04/2020, 7:13:37 PM","fresh":true,"modified":"08/04/2020, 7:13:37 PM","recent":false},"/getting-started/unit-testing/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 1:12:58 PM","recent":false},"/getting-started/upgrade-guide/":{"created":"08/04/2020, 7:13:37 PM","fresh":true,"modified":"08/04/2020, 7:13:37 PM","recent":false},"/getting-started/wireframes/":{"created":"08/14/2020, 8:56:05 AM","fresh":true,"modified":"08/14/2020, 8:56:05 AM","recent":true},"/home/":{"created":"06/20/2020, 9:56:07 AM","fresh":true,"modified":"08/17/2020, 4:56:23 PM","recent":false},"/overview/code-of-conduct/":{"created":"06/12/2020, 8:43:03 PM","fresh":false,"modified":"07/07/2020, 8:02:57 PM","recent":false},"/overview/frequently-asked-questions/":{"created":"06/10/2020, 3:27:56 PM","fresh":false,"modified":"08/03/2020, 11:21:41 PM","recent":false},"/overview/long-term-support/":{"created":"06/10/2020, 3:27:56 PM","fresh":false,"modified":"08/04/2020, 12:52:16 AM","recent":false},"/overview/meet-the-team/":{"created":"06/10/2020, 3:27:56 PM","fresh":true,"modified":"08/18/2020, 10:24:35 AM","recent":false},"/overview/roadmap/":{"created":"06/10/2020, 3:27:56 PM","fresh":true,"modified":"08/18/2020, 10:24:35 AM","recent":false},"/overview/security-disclosure/":{"created":"06/10/2020, 3:27:56 PM","fresh":false,"modified":"06/29/2020, 1:12:58 PM","recent":false},"/overview/sponsors-and-backers/":{"created":"06/10/2020, 3:27:56 PM","fresh":false,"modified":"08/03/2020, 2:43:47 PM","recent":false},"/overview/why-vuetify/":{"created":"06/10/2020, 3:27:56 PM","fresh":true,"modified":"08/05/2020, 1:29:51 PM","recent":false},"/professional-support/consulting/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"08/03/2020, 5:54:52 PM","recent":false},"/professional-support/enterprise/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"08/03/2020, 4:52:08 PM","recent":false},"/resources/made-with-vuetify/":{"created":"08/18/2020, 12:19:09 PM","fresh":true,"modified":"08/18/2020, 12:19:09 PM","recent":true},"/styles/border-radius/":{"created":"07/07/2020, 8:47:51 AM","fresh":true,"modified":"08/11/2020, 9:31:20 AM","recent":false},"/styles/colors/":{"created":"06/09/2020, 3:49:40 PM","fresh":true,"modified":"08/13/2020, 9:48:57 PM","recent":false},"/styles/content/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 1:12:58 PM","recent":false},"/styles/css-reset/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/29/2020, 1:12:58 PM","recent":false},"/beginners-guide/guide/":{"created":"07/14/2020, 8:20:22 PM","fresh":false,"modified":"08/03/2020, 1:02:52 PM","recent":false},"/components/api-explorer/":{"created":"07/08/2020, 11:06:11 PM","fresh":false,"modified":"07/08/2020, 11:06:11 PM","recent":false},"/company/advertising-with-us/":{"created":"06/21/2020, 2:22:14 PM","fresh":false,"modified":"07/11/2020, 1:47:31 PM","recent":false},"/components/alerts/":{"created":"05/27/2020, 5:48:18 PM","fresh":false,"modified":"06/30/2020, 9:14:03 AM","recent":false},"/components/app-bars/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/06/2020, 1:12:04 PM","recent":false},"/components/application/":{"created":"06/09/2020, 3:49:40 PM","fresh":true,"modified":"08/13/2020, 9:48:57 PM","recent":false},"/components/badges/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 9:14:03 AM","recent":false},"/components/aspect-ratios/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 3:11:35 PM","recent":false},"/components/autocompletes/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"06/30/2020, 6:35:19 PM","recent":false},"/components/avatars/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/02/2020, 9:14:54 AM","recent":false},"/components/checkboxes/":{"created":"07/07/2020, 7:00:15 PM","fresh":false,"modified":"07/07/2020, 7:00:15 PM","recent":false},"/resources/jobs-for-vue/":{"created":"08/19/2020, 12:23:24 PM","fresh":true,"modified":"08/19/2020, 12:23:27 PM","recent":true},"/resources/themes/":{"created":"08/19/2020, 12:27:49 PM","fresh":true,"modified":"08/19/2020, 12:27:58 PM","recent":true},"/styles/spacing/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 3:34:05 PM","recent":false},"/styles/transitions/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 8:19:45 AM","recent":false},"/styles/float/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 9:46:36 PM","recent":false},"/styles/text-and-typography/":{"created":"07/01/2020, 11:43:35 AM","fresh":false,"modified":"07/01/2020, 11:43:35 AM","recent":false},"/styles/flex/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 10:14:37 PM","recent":false},"/styles/elevation/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 8:28:48 AM","recent":false},"/styles/display/":{"created":"06/09/2020, 3:49:40 PM","fresh":false,"modified":"07/07/2020, 3:15:50 PM","recent":false}} diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json new file mode 100644 index 0000000..9d0a526 --- /dev/null +++ b/packages/docs/src/data/nav.json @@ -0,0 +1,292 @@ +[ + { + "title": "introduction", + "inactiveIcon": "mdi-script-text-outline", + "activeIcon": "mdi-script-text", + "items": [ + "why-vuetify", + "long-term-support", + "roadmap", + "sponsors-and-backers", + { "divider": true }, + { "subheader": "professional-support" }, + "enterprise-support" + ] + }, + { + "title": "getting-started", + "inactiveIcon": "mdi-speedometer-medium", + "activeIcon": "mdi-speedometer", + "items": [ + "installation", + "frequently-asked-questions", + "wireframes", + "unit-testing", + "browser-support", + "upgrade-guide", + "release-notes", + "contributing" + ] + }, + { + "title": "features", + "inactiveIcon": "mdi-image-edit-outline", + "activeIcon": "mdi-image-edit", + "items": [ + "accessibility", + "aliasing", + "application-layout", + "blueprints", + "dates", + "display-and-platform", + "global-configuration", + "icon-fonts", + "internationalization", + "scrolling", + "sass-variables", + "theme", + "treeshaking" + ] + }, + { + "title": "styles", + "inactiveIcon": "mdi-palette-outline", + "activeIcon": "mdi-palette", + "items": [ + "css-reset", + "transitions", + "colors", + { "divider": true }, + { + "subheader": "utility-classes" + }, + "borders", + "border-radius", + "content", + "cursor", + "display", + "elevation", + "flex", + "float", + "opacity", + "overflow", + "position", + "sizing", + "spacing", + "text-and-typography" + ] + }, + { + "title": "components", + "inactiveIcon": "mdi-view-dashboard-outline", + "activeIcon": "mdi-view-dashboard", + "items": [ + "all", + { + "title": "explorer", + "routeMatch": "explorer/:name(.*)", + "routePath": "explorer", + "subtitle": "browse-components" + }, + "application", + { "divider": true }, + { "subheader": "containment" }, + "bottom-sheets", + "buttons", + "cards", + "chips", + "dialogs", + "dividers", + "expansion-panels", + "lists", + "menus", + "overlays", + "sheets", + "toolbars", + "tooltips", + { "divider": true }, + { "subheader": "navigation" }, + "app-bars", + "bottom-navigation", + "breadcrumbs", + "floating-action-buttons", + "footers", + "navigation-drawers", + "paginations", + "speed-dials", + "system-bars", + "tabs", + { "divider": true }, + { "subheader": "form-inputs-and-controls" }, + "autocompletes", + "checkboxes", + "combobox", + "file-inputs", + "forms", + "inputs", + "otp-input", + "radio-buttons", + "range-sliders", + "selects", + "sliders", + "switches", + "text-fields", + "textareas", + { "divider": true }, + { "subheader": "data-and-display" }, + "confirm-edit", + "data-iterators", + { + "title": "data-tables", + "subfolder": "components", + "activeIcon": "", + "inactiveIcon": "", + "items": [ + "introduction", + { "subheader": "guide" }, + "basics", + "data-and-display", + { "subheader": "types" }, + "server-side-tables", + "virtual-tables" + ] + }, + "sparklines", + "infinite-scroller", + "tables", + "virtual-scroller", + { "divider": true }, + { "subheader": "grids" }, + "grids", + { "divider": true }, + { "subheader": "selection" }, + "button-groups", + "carousels", + "chip-groups", + "item-groups", + "slide-groups", + "steppers", + "windows", + { "divider": true }, + { "subheader": "feedback" }, + "alerts", + "badges", + "banners", + "empty-states", + "hover", + "progress-circular", + "progress-linear", + "ratings", + "skeleton-loaders", + "snackbars", + "timelines", + { "divider": true }, + { "subheader": "images-and-icons" }, + "aspect-ratios", + "avatars", + "icons", + "images", + "parallax", + { "divider": true }, + { "subheader": "pickers" }, + "color-pickers", + "date-pickers", + { "divider": true }, + { "subheader": "providers" }, + "defaults-providers", + "locale-providers", + "theme-providers", + { "divider": true }, + { "subheader": "miscellaneous" }, + "lazy", + "no-ssr" + ] + }, + { + "title": "api", + "inactiveIcon": "mdi-flask-empty-outline", + "activeIcon": "mdi-flask-outline", + "items": [] + }, + { + "title": "directives", + "inactiveIcon": "mdi-function", + "activeIcon": "mdi-function", + "items": [ + "click-outside", + "intersect", + "mutate", + "resize", + "ripple", + "scroll", + "tooltip", + "touch" + ] + }, + { + "title": "labs", + "inactiveIcon": "mdi-beaker-outline", + "activeIcon": "mdi-beaker", + "items": [ + "introduction", + { + "title": "calendars", + "subfolder": "components" + }, + { + "title": "date-inputs", + "subfolder": "components" + }, + { + "title": "number-inputs", + "subfolder": "components" + }, + { + "title": "pull-to-refresh", + "subfolder": "components" + }, + { + "title": "snackbar-queue", + "subfolder": "components" + }, + { + "title": "vertical-steppers", + "subfolder": "components" + }, + { + "title": "time-pickers", + "subfolder": "components" + }, + { + "title": "treeview", + "subfolder": "components" + } + ] + }, + { + "title": "resources", + "inactiveIcon": "mdi-human-male-board", + "activeIcon": "mdi-human-male-board", + "items": [ + "brand-kit", + "jobs-for-vue", + "made-with-vuetify", + "themes", + { "divider": true }, + { "subheader": "guides" }, + "search-engine", + "ui-kits" + ] + }, + { + "title": "about", + "inactiveIcon": "$vuetify-outline", + "activeIcon": "$vuetify", + "items": [ + "code-of-conduct", + "licensing", + "meet-the-team", + "security-disclosure" + ] + } +] diff --git a/packages/docs/src/data/new-in.json b/packages/docs/src/data/new-in.json new file mode 100644 index 0000000..a20f022 --- /dev/null +++ b/packages/docs/src/data/new-in.json @@ -0,0 +1,45 @@ +{ + "VAppBar": { + "props": { + "scrollBehavior": "3.2.0" + } + }, + "VAutocomplete": { + "props": { + "autoSelectFirst": "3.3.0" + } + }, + "VBtn": { + "props": { + "text": "3.2.0" + } + }, + "VListItem": { + "props": { + "baseColor": "3.3.0" + } + }, + "VSlider": { + "events": { + "start": "3.2.0", + "end": "3.2.0" + } + }, + "VSwitch": { + "slots": { + "thumb": "3.5.0", + "track-false": "3.5.0", + "track-true": "3.5.0" + } + }, + "VTab": { + "props": { + "text": "3.2.0" + } + }, + "VTooltip": { + "props": { + "eager": "3.2.0" + } + } +} diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json new file mode 100644 index 0000000..49014d5 --- /dev/null +++ b/packages/docs/src/data/page-to-api.json @@ -0,0 +1,189 @@ +{ + "components/alerts": ["VAlert", "VAlertTitle"], + "components/app-bars": [ + "VAppBar", + "VAppBarNavIcon", + "VAppBarTitle" + ], + "components/application": [ + "VApp", + "VLayout", + "VLayoutItem", + "VMain" + ], + "components/aspect-ratios": ["VResponsive"], + "components/autocompletes": ["VAutocomplete"], + "components/avatars": ["VAvatar"], + "components/badges": ["VBadge"], + "components/banners": [ + "VBanner", + "VBannerActions", + "VBannerText" + ], + "components/bottom-navigation": ["VBottomNavigation"], + "components/bottom-sheets": ["VBottomSheet"], + "components/breadcrumbs": [ + "VBreadcrumbs", + "VBreadcrumbsDivider", + "VBreadcrumbsItem" + ], + "components/button-groups": [ + "VBtn", + "VBtnGroup", + "VBtnToggle" + ], + "components/buttons": [ + "VBtn", + "VBtnGroup", + "VBtnToggle" + ], + "components/calendars": [ + "VCalendar", + "VCalendarDay", + "VCalendarHeader", + "VCalendarInterval", + "VCalendarIntervalEvent", + "VCalendarMonthDay" + ], + "components/cards": [ + "VCard", + "VCardActions", + "VCardItem", + "VCardSubtitle", + "VCardText", + "VCardTitle" + ], + "components/carousels": ["VCarousel", "VCarouselItem"], + "components/checkboxes": ["VCheckbox", "VCheckboxBtn"], + "components/chip-groups": ["VChip", "VChipGroup"], + "components/chips": ["VChip", "VChipGroup"], + "components/color-pickers": ["VColorPicker"], + "components/confirm-edit": ["VConfirmEdit"], + "components/combobox": ["VCombobox"], + "components/data-iterators": ["VDataIterator"], + "components/data-tables": [ + "VDataTable", + "VDataTableFooter", + "VDataTableRow", + "VDataTableRows", + "VDataTableServer", + "VDataTableVirtual" + ], + "components/date-inputs": ["VDateInput", "VDatePicker"], + "components/date-pickers-month": ["VDatePicker"], + "components/date-pickers": ["VDatePicker", "VDateInput"], + "components/defaults-providers": ["VDefaultsProvider"], + "components/dialogs": ["VDialog", "VOverlay"], + "components/dividers": ["VDivider"], + "components/empty-states": ["VEmptyState"], + "components/expansion-panels": [ + "VExpansionPanel", + "VExpansionPanels", + "VExpansionPanelText", + "VExpansionPanelTitle" + ], + "components/file-inputs": ["VFileInput"], + "components/floating-action-buttons": ["VFab"], + "components/footers": ["VFooter"], + "components/forms": ["VForm"], + "components/grids": ["VCol", "VContainer", "VRow", "VSpacer"], + "components/hover": ["VHover"], + "components/icons": ["VIcon"], + "components/images": ["VImg"], + "components/infinite-scroller": ["VInfiniteScroll"], + "components/inputs": ["VInput"], + "components/item-groups": ["VItem", "VItemGroup"], + "components/lazy": ["VLazy"], + "components/lists": [ + "VList", + "VListGroup", + "VListItem", + "VListItemAction", + "VListItemMedia", + "VListItemSubtitle", + "VListItemTitle", + "VListSubheader", + "VListImg" + ], + "components/locale-providers": ["VLocaleProvider"], + "components/menus": ["VMenu"], + "components/navigation-drawers": ["VNavigationDrawer"], + "components/no-ssr": ["VNoSsr"], + "components/otp-input": ["VOtpInput"], + "components/overflow-btns": ["VOverflowBtn"], + "components/overlays": ["VOverlay"], + "components/paginations": ["VPagination"], + "components/parallax": ["VParallax"], + "components/progress-circular": ["VProgressCircular"], + "components/progress-linear": ["VProgressLinear"], + "components/radio-buttons": ["VRadio", "VRadioGroup"], + "components/range-sliders": ["VRangeSlider", "VSlider"], + "components/ratings": ["VRating"], + "components/selects": ["VSelect"], + "components/sheets": ["VSheet"], + "components/simple-tables": ["VSimpleTable"], + "components/skeleton-loaders": ["VSkeletonLoader"], + "components/slide-groups": ["VSlideGroup", "VSlideGroupItem"], + "components/sliders": ["VRangeSlider", "VSlider"], + "components/snackbars": ["VSnackbar"], + "components/snackbar-queue": ["VSnackbarQueue", "VSnackbar"], + "components/sparklines": ["VSparkline"], + "components/steppers": [ + "VStepper", + "VStepperHeader", + "VStepperItem", + "VStepperWindow", + "VStepperWindowItem" + ], + "components/switches": ["VSwitch"], + "components/system-bars": ["VSystemBar"], + "components/tables": ["VTable"], + "components/tabs": ["VTabs", "VTab"], + "components/text-fields": ["VTextField"], + "components/textareas": ["VTextarea"], + "components/theme-providers": ["VThemeProvider"], + "components/time-pickers": ["VTimePicker"], + "components/timelines": ["VTimeline", "VTimelineItem"], + "components/toolbars": ["VToolbar", "VToolbarItems", "VToolbarTitle"], + "components/tooltips": ["VTooltip"], + "components/treeview": [ + "VTreeview", + "VTreeviewItem", + "VTreeviewChildren", + "VTreeviewGroup" + ], + "components/virtual-scroller": ["VVirtualScroll"], + "components/windows": ["VWindow", "VWindowItem"], + "directives/click-outside": ["v-click-outside"], + "directives/intersect": ["v-intersect"], + "directives/mutate": ["v-mutate"], + "directives/resize": ["v-resize"], + "directives/ripple": ["v-ripple"], + "directives/scroll": ["v-scroll"], + "directives/touch": ["v-touch"], + "directives/tooltip": ["v-tooltip"], + "features/dates": ["useDate"], + "features/display-and-platform": ["useDisplay"], + "features/scrolling": ["useGoTo"], + "features/global-configuration": ["VDefaultsProvider"], + "features/internationalization": ["useLocale", "VLocaleProvider"], + "features/theme": ["VThemeProvider"], + "styles/transitions": [ + "VDialogBottomTransition", + "VDialogTopTransition", + "VDialogTransition", + "VExpandTransition", + "VExpandXTransition", + "VFabTransition", + "VFadeTransition", + "VScaleTransition", + "VScrollXTransition", + "VScrollXReverseTransition", + "VScrollYTransition", + "VScrollYReverseTransition", + "VSlideXTransition", + "VSlideXReverseTransition", + "VSlideYTransition", + "VSlideYReverseTransition" + ] +} diff --git a/packages/docs/src/data/team.json b/packages/docs/src/data/team.json new file mode 100644 index 0000000..2c7625a --- /dev/null +++ b/packages/docs/src/data/team.json @@ -0,0 +1,255 @@ +{ + "johnleider": { + "discord": "johnleider", + "focus": [ + "[vuetifyjs/*](https://github.com/vuetifyjs)" + ], + "funding": [ + "[GitHub Sponsors](https://github.com/sponsors/johnleider)", + "[Patreon](https://patreon.com/vuetify)", + "[Paypal](https://paypal.me/vuetify)" + ], + "languages": [ + "English" + ], + "linkedin": "john-leider-626183a2", + "location": "Keller, TX, USA", + "name": "John Leider", + "team": "company", + "twitter": "zeroskillz", + "work": "Engineer @ Vuetify", + "joined": "Jun 2016" + }, + "heatherleider": { + "discord": "heatherleider", + "focus": [ + "[vuetifyjs/*](https://github.com/vuetifyjs)" + ], + "languages": [ + "English" + ], + "location": "Keller, TX, USA", + "name": "Heather Leider", + "team": "company", + "twitter": "grneyedgrl01", + "work": "COO @ Vuetify", + "joined": "Nov 2019" + }, + "KaelWD": { + "discord": "kaelwd", + "focus": [ + "[vuetifyjs/*](https://github.com/vuetifyjs)", + "[vuetify-loader](https://github.com/vuetifyjs/vuetify-loader)", + "[eslint-plugin-vuetify](https://github.com/vuetifyjs/eslint-plugin-vuetify)" + ], + "funding": [ + "[GitHub Sponsors](https://github.com/sponsors/kaelwd)", + "[Patreon](https://patreon.com/kaelwd)", + "[Open Collective](https://opencollective.com/vuetify)" + ], + "languages": [ + "English" + ], + "location": "Melbourne, Australia", + "name": "Kael Watts-Deuchar", + "team": "core", + "twitter": "kaelwd", + "joined": "Oct 2017" + }, + "nekosaur": { + "discord": ".nekosaur", + "languages": [ + "Swedish", + "English" + ], + "location": "Malmö, Sweden", + "name": "Albert Kaaman", + "team": "legends", + "joined": "Jun 2017" + }, + "MajesticPotatoe": { + "discord": "majesticpotatoe", + "focus": [ + "[vuetifyjs](https://github.com/vuetifyjs)", + "[vuetifyjs/docs](https://github.com/vuetifyjs/vuetify/tree/master/packages/docs)" + ], + "funding": [ + "[GitHub Sponsors](https://github.com/sponsors/majesticpotatoe)", + "[Open Collective](https://opencollective.com/vuetify)" + ], + "languages": [ + "English" + ], + "linkedin": "andrew-henry-01049830", + "location": "Rochester, NY, USA", + "name": "Andrew Henry", + "team": "core", + "twitter": "SeeMWhyK", + "joined": "Dec 2018" + }, + "blalan05": { + "discord": "blalan05", + "focus": [ + "[vuetifyjs](https://github.com/vuetifyjs)" + ], + "languages": [ + "English" + ], + "linkedin": "blalan05", + "location": "Wisconsin, USA", + "name": "Blaine Landowski", + "team": "core", + "work": "CEO at Foundational Technologies LLC", + "joined": "Feb 2021" + }, + "elvinagarcia": { + "avatar": "https://cdn.vuetifyjs.com/docs/images/team/elvinagarcia.png", + "discord": "elvinagarcia", + "focus": [ + "Design/Animations" + ], + "languages": [ + "English" + ], + "location": "Virginia, USA", + "name": "Elvina Garcia", + "team": "core", + "joined": "Feb 2023" + }, + "yuwu9145": { + "discord": "yuwu9145", + "focus": [ + "[vuetifyjs](https://github.com/vuetifyjs)" + ], + "languages": [ + "English", + "Chinese(Mandarin)" + ], + "location": "Melbourne, Australia", + "name": "Yuchao Wu", + "team": "core", + "joined": "Mar 2023" + }, + "userquin": { + "discord": "userquin", + "focus": [ + "[vuetifyjs/create](https://github.com/vuetifyjs/create)", + "[Nuxt](https://github.com/userquin/vuetify-nuxt-module)" + ], + "languages": [ + "Spanish", + "English" + ], + "location": "Madrid, Spain", + "name": "Joaquín Sánchez", + "twitter": "userquin", + "team": "core", + "joined": "Mar 2024" + }, + "kieuminhcanh": { + "discord": "kieuminhcanh", + "focus": [ + "[vuetifyjs/studio](https://github.com/vuetifyjs/studio)" + ], + "funding": [ + "[GitHub Sponsors](https://github.com/sponsors/kieuminhcanh)", + "[Patreon](https://patreon.com/kieuminhcanh)", + "[Open Collective](https://opencollective.com/vuetify)" + ], + "languages": [ + "English", + "Vietnamese" + ], + "location": "California, US", + "name": "Ken Kieu", + "team": "core", + "twitter": "kieuminhcanh", + "joined": "April 2024" + }, + "MatthewAry": { + "discord": "bitshift_", + "focus": [ + "[vuetifyjs/*](https://github.com/vuetifyjs)" + ], + "languages": [ + "English" + ], + "location": "Spokane, WA, USA", + "name": "Matthew Ary", + "twitter": "MatthewAry", + "linkedin": "matthewary", + "work": "Director of Product Development at Symplsoft Inc.", + "team": "core", + "joined": "May 2024" + }, + "jacekkarczmarczyk": { + "discord": "jacek#3542", + "languages": [ + "Polish", + "English" + ], + "location": "Warsaw, Poland", + "name": "Jacek Karczmarczyk", + "team": "legends" + }, + "chewy94": { + "avatar": "https://cdn.vuetifyjs.com/docs/images/team/chewy94.jpg", + "discord": "Sean Kimball#0001", + "languages": [ + "English" + ], + "linkedin": "sean-kimball-b50922126", + "location": "Goodyear, Arizona, USA", + "name": "Sean Kimball", + "team": "legends" + }, + "bdeo": { + "avatar": "https://cdn.vuetifyjs.com/docs/images/team/bdeo.jpg", + "discord": "brandondeo#0001", + "languages": [ + "English" + ], + "linkedin": "brandondeo", + "location": "Philadelphia, PA, USA", + "name": "Brandon Deo", + "team": "legends" + }, + "ElijahKotyluk": { + "avatar": "https://cdn.vuetifyjs.com/docs/images/team/ElijahKotyluk.jpg", + "discord": "edk#4363", + "languages": [ + "English" + ], + "location": "USA", + "name": "Elijah Kotyluk", + "team": "legends" + }, + "santiagoaloi": { + "avatar": "https://cdn.vuetifyjs.com/docs/images/team/santiagoaloi.jpg", + "discord": "lannnister", + "languages": [ + "Swedish", + "English", + "Spanish" + ], + "linkedin": "santiagoaloi", + "location": "Stockholm, Sweden", + "name": "Santiago Aloi", + "team": "legends", + "joined": "Feb 2023" + }, + "yooneskh": { + "avatar": "https://cdn.vuetifyjs.com/docs/images/team/yooneskh.png", + "discord": "YoonesKh#7826", + "languages": [ + "English", + "Persian" + ], + "twitter": "yooneskh", + "linkedin": "yooneskh ", + "location": "Iran", + "name": "Yoones Khoshghadam", + "team": "legends", + "joined": "January 2023" + } +} diff --git a/packages/docs/src/examples/accessibility/list-item-group.vue b/packages/docs/src/examples/accessibility/list-item-group.vue new file mode 100644 index 0000000..169f34f --- /dev/null +++ b/packages/docs/src/examples/accessibility/list-item-group.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/packages/docs/src/examples/accessibility/menu.vue b/packages/docs/src/examples/accessibility/menu.vue new file mode 100644 index 0000000..785a8b9 --- /dev/null +++ b/packages/docs/src/examples/accessibility/menu.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/docs/src/examples/accessibility/select-list-item.vue b/packages/docs/src/examples/accessibility/select-list-item.vue new file mode 100644 index 0000000..38830ee --- /dev/null +++ b/packages/docs/src/examples/accessibility/select-list-item.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/application-layout/app-bar-first.vue b/packages/docs/src/examples/application-layout/app-bar-first.vue new file mode 100644 index 0000000..33aad3e --- /dev/null +++ b/packages/docs/src/examples/application-layout/app-bar-first.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/application-layout/discord.vue b/packages/docs/src/examples/application-layout/discord.vue new file mode 100644 index 0000000..7bddc92 --- /dev/null +++ b/packages/docs/src/examples/application-layout/discord.vue @@ -0,0 +1,41 @@ + diff --git a/packages/docs/src/examples/application-layout/dynamic.vue b/packages/docs/src/examples/application-layout/dynamic.vue new file mode 100644 index 0000000..2d09e9c --- /dev/null +++ b/packages/docs/src/examples/application-layout/dynamic.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/packages/docs/src/examples/application-layout/layout-information-composable.vue b/packages/docs/src/examples/application-layout/layout-information-composable.vue new file mode 100644 index 0000000..0a521e7 --- /dev/null +++ b/packages/docs/src/examples/application-layout/layout-information-composable.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/packages/docs/src/examples/application-layout/layout-information-ref.vue b/packages/docs/src/examples/application-layout/layout-information-ref.vue new file mode 100644 index 0000000..78612ac --- /dev/null +++ b/packages/docs/src/examples/application-layout/layout-information-ref.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/docs/src/examples/application-layout/location.vue b/packages/docs/src/examples/application-layout/location.vue new file mode 100644 index 0000000..e5218c4 --- /dev/null +++ b/packages/docs/src/examples/application-layout/location.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/application-layout/nav-drawer-first.vue b/packages/docs/src/examples/application-layout/nav-drawer-first.vue new file mode 100644 index 0000000..ea25302 --- /dev/null +++ b/packages/docs/src/examples/application-layout/nav-drawer-first.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/application/app-bar-drawer.vue b/packages/docs/src/examples/application/app-bar-drawer.vue new file mode 100644 index 0000000..16d07d8 --- /dev/null +++ b/packages/docs/src/examples/application/app-bar-drawer.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/application/drawer-app-bar.vue b/packages/docs/src/examples/application/drawer-app-bar.vue new file mode 100644 index 0000000..5cd4b7f --- /dev/null +++ b/packages/docs/src/examples/application/drawer-app-bar.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/application/theme.vue b/packages/docs/src/examples/application/theme.vue new file mode 100644 index 0000000..fbbdba8 --- /dev/null +++ b/packages/docs/src/examples/application/theme.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/docs/src/examples/blueprints/md1.vue b/packages/docs/src/examples/blueprints/md1.vue new file mode 100644 index 0000000..c254860 --- /dev/null +++ b/packages/docs/src/examples/blueprints/md1.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/docs/src/examples/blueprints/md2.vue b/packages/docs/src/examples/blueprints/md2.vue new file mode 100644 index 0000000..5e3a0ba --- /dev/null +++ b/packages/docs/src/examples/blueprints/md2.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/docs/src/examples/blueprints/md3.vue b/packages/docs/src/examples/blueprints/md3.vue new file mode 100644 index 0000000..9ea0c8d --- /dev/null +++ b/packages/docs/src/examples/blueprints/md3.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/docs/src/examples/border-radius/misc-components.vue b/packages/docs/src/examples/border-radius/misc-components.vue new file mode 100644 index 0000000..6982676 --- /dev/null +++ b/packages/docs/src/examples/border-radius/misc-components.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/border-radius/misc-pill-and-circle.vue b/packages/docs/src/examples/border-radius/misc-pill-and-circle.vue new file mode 100644 index 0000000..a10d6c0 --- /dev/null +++ b/packages/docs/src/examples/border-radius/misc-pill-and-circle.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue b/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue new file mode 100644 index 0000000..15f2712 --- /dev/null +++ b/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/border-radius/misc-rounded-corners.vue b/packages/docs/src/examples/border-radius/misc-rounded-corners.vue new file mode 100644 index 0000000..6d3426e --- /dev/null +++ b/packages/docs/src/examples/border-radius/misc-rounded-corners.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue b/packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue new file mode 100644 index 0000000..64ef335 --- /dev/null +++ b/packages/docs/src/examples/border-radius/misc-rounding-by-corner.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/src/examples/border-radius/misc-rounding-by-side.vue b/packages/docs/src/examples/border-radius/misc-rounding-by-side.vue new file mode 100644 index 0000000..65b63b7 --- /dev/null +++ b/packages/docs/src/examples/border-radius/misc-rounding-by-side.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/src/examples/border/all.vue b/packages/docs/src/examples/border/all.vue new file mode 100644 index 0000000..747d43b --- /dev/null +++ b/packages/docs/src/examples/border/all.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/examples/border/card.vue b/packages/docs/src/examples/border/card.vue new file mode 100644 index 0000000..6fe5436 --- /dev/null +++ b/packages/docs/src/examples/border/card.vue @@ -0,0 +1,48 @@ + diff --git a/packages/docs/src/examples/border/colors.vue b/packages/docs/src/examples/border/colors.vue new file mode 100644 index 0000000..3d22020 --- /dev/null +++ b/packages/docs/src/examples/border/colors.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/examples/border/sides.vue b/packages/docs/src/examples/border/sides.vue new file mode 100644 index 0000000..a492a24 --- /dev/null +++ b/packages/docs/src/examples/border/sides.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/src/examples/border/styles.vue b/packages/docs/src/examples/border/styles.vue new file mode 100644 index 0000000..312141b --- /dev/null +++ b/packages/docs/src/examples/border/styles.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/src/examples/color/classes.vue b/packages/docs/src/examples/color/classes.vue new file mode 100644 index 0000000..6f30d9b --- /dev/null +++ b/packages/docs/src/examples/color/classes.vue @@ -0,0 +1,5 @@ + diff --git a/packages/docs/src/examples/color/text-classes.vue b/packages/docs/src/examples/color/text-classes.vue new file mode 100644 index 0000000..7933361 --- /dev/null +++ b/packages/docs/src/examples/color/text-classes.vue @@ -0,0 +1,5 @@ + diff --git a/packages/docs/src/examples/cursor/usage.vue b/packages/docs/src/examples/cursor/usage.vue new file mode 100644 index 0000000..22cb749 --- /dev/null +++ b/packages/docs/src/examples/cursor/usage.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/docs/src/examples/display/display-block.vue b/packages/docs/src/examples/display/display-block.vue new file mode 100644 index 0000000..fc9456f --- /dev/null +++ b/packages/docs/src/examples/display/display-block.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/display/display-inline.vue b/packages/docs/src/examples/display/display-inline.vue new file mode 100644 index 0000000..f8faf94 --- /dev/null +++ b/packages/docs/src/examples/display/display-inline.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/display/hidden-elements.vue b/packages/docs/src/examples/display/hidden-elements.vue new file mode 100644 index 0000000..ae004b3 --- /dev/null +++ b/packages/docs/src/examples/display/hidden-elements.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/display/print.vue b/packages/docs/src/examples/display/print.vue new file mode 100644 index 0000000..29aa363 --- /dev/null +++ b/packages/docs/src/examples/display/print.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/display/visibility.vue b/packages/docs/src/examples/display/visibility.vue new file mode 100644 index 0000000..c99043b --- /dev/null +++ b/packages/docs/src/examples/display/visibility.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/elevation/prop-dynamic.vue b/packages/docs/src/examples/elevation/prop-dynamic.vue new file mode 100644 index 0000000..aa253a4 --- /dev/null +++ b/packages/docs/src/examples/elevation/prop-dynamic.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/elevation/usage.vue b/packages/docs/src/examples/elevation/usage.vue new file mode 100644 index 0000000..4fa22b7 --- /dev/null +++ b/packages/docs/src/examples/elevation/usage.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/flex/flex-align-content-around.vue b/packages/docs/src/examples/flex/flex-align-content-around.vue new file mode 100644 index 0000000..7508907 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-align-content-around.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/flex/flex-align-content-between.vue b/packages/docs/src/examples/flex/flex-align-content-between.vue new file mode 100644 index 0000000..fa25b00 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-align-content-between.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/flex/flex-align-content-center.vue b/packages/docs/src/examples/flex/flex-align-content-center.vue new file mode 100644 index 0000000..3f1e47a --- /dev/null +++ b/packages/docs/src/examples/flex/flex-align-content-center.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/flex/flex-align-content-end.vue b/packages/docs/src/examples/flex/flex-align-content-end.vue new file mode 100644 index 0000000..e200fa0 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-align-content-end.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/flex/flex-align-content-start.vue b/packages/docs/src/examples/flex/flex-align-content-start.vue new file mode 100644 index 0000000..0accb5b --- /dev/null +++ b/packages/docs/src/examples/flex/flex-align-content-start.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/flex/flex-align-self.vue b/packages/docs/src/examples/flex/flex-align-self.vue new file mode 100644 index 0000000..760e69d --- /dev/null +++ b/packages/docs/src/examples/flex/flex-align-self.vue @@ -0,0 +1,57 @@ + diff --git a/packages/docs/src/examples/flex/flex-align.vue b/packages/docs/src/examples/flex/flex-align.vue new file mode 100644 index 0000000..a9be4a6 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-align.vue @@ -0,0 +1,68 @@ + diff --git a/packages/docs/src/examples/flex/flex-column.vue b/packages/docs/src/examples/flex/flex-column.vue new file mode 100644 index 0000000..62f9dc0 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-column.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/flex/flex-direction.vue b/packages/docs/src/examples/flex/flex-direction.vue new file mode 100644 index 0000000..14c326d --- /dev/null +++ b/packages/docs/src/examples/flex/flex-direction.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/flex/flex-flex.vue b/packages/docs/src/examples/flex/flex-flex.vue new file mode 100644 index 0000000..91d4e7e --- /dev/null +++ b/packages/docs/src/examples/flex/flex-flex.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/flex/flex-justify.vue b/packages/docs/src/examples/flex/flex-justify.vue new file mode 100644 index 0000000..bc66f5e --- /dev/null +++ b/packages/docs/src/examples/flex/flex-justify.vue @@ -0,0 +1,63 @@ + diff --git a/packages/docs/src/examples/flex/flex-nowrap.vue b/packages/docs/src/examples/flex/flex-nowrap.vue new file mode 100644 index 0000000..623ab93 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-nowrap.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/flex/flex-order.vue b/packages/docs/src/examples/flex/flex-order.vue new file mode 100644 index 0000000..6f2e66c --- /dev/null +++ b/packages/docs/src/examples/flex/flex-order.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/flex/flex-wrap-reverse.vue b/packages/docs/src/examples/flex/flex-wrap-reverse.vue new file mode 100644 index 0000000..531c115 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-wrap-reverse.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/flex/flex-wrap.vue b/packages/docs/src/examples/flex/flex-wrap.vue new file mode 100644 index 0000000..4b41ab1 --- /dev/null +++ b/packages/docs/src/examples/flex/flex-wrap.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/flex/flexbox-inline.vue b/packages/docs/src/examples/flex/flexbox-inline.vue new file mode 100644 index 0000000..04474a9 --- /dev/null +++ b/packages/docs/src/examples/flex/flexbox-inline.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/flex/flexbox.vue b/packages/docs/src/examples/flex/flexbox.vue new file mode 100644 index 0000000..c16949b --- /dev/null +++ b/packages/docs/src/examples/flex/flexbox.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/flex/grow-shrink.vue b/packages/docs/src/examples/flex/grow-shrink.vue new file mode 100644 index 0000000..cea44f5 --- /dev/null +++ b/packages/docs/src/examples/flex/grow-shrink.vue @@ -0,0 +1,37 @@ + diff --git a/packages/docs/src/examples/flex/margins-align-items.vue b/packages/docs/src/examples/flex/margins-align-items.vue new file mode 100644 index 0000000..8ba24b6 --- /dev/null +++ b/packages/docs/src/examples/flex/margins-align-items.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/flex/margins.vue b/packages/docs/src/examples/flex/margins.vue new file mode 100644 index 0000000..2cb095d --- /dev/null +++ b/packages/docs/src/examples/flex/margins.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/float/classes.vue b/packages/docs/src/examples/float/classes.vue new file mode 100644 index 0000000..ff09336 --- /dev/null +++ b/packages/docs/src/examples/float/classes.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/float/responsive.vue b/packages/docs/src/examples/float/responsive.vue new file mode 100644 index 0000000..2662410 --- /dev/null +++ b/packages/docs/src/examples/float/responsive.vue @@ -0,0 +1,20 @@ + diff --git a/packages/docs/src/examples/grid/misc-column-wrapping.vue b/packages/docs/src/examples/grid/misc-column-wrapping.vue new file mode 100644 index 0000000..26af644 --- /dev/null +++ b/packages/docs/src/examples/grid/misc-column-wrapping.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/grid/misc-equal-width-columns.vue b/packages/docs/src/examples/grid/misc-equal-width-columns.vue new file mode 100644 index 0000000..7f124bc --- /dev/null +++ b/packages/docs/src/examples/grid/misc-equal-width-columns.vue @@ -0,0 +1,30 @@ + diff --git a/packages/docs/src/examples/grid/misc-grow-and-shrink.vue b/packages/docs/src/examples/grid/misc-grow-and-shrink.vue new file mode 100644 index 0000000..49e4bfb --- /dev/null +++ b/packages/docs/src/examples/grid/misc-grow-and-shrink.vue @@ -0,0 +1,46 @@ + diff --git a/packages/docs/src/examples/grid/misc-margin-helpers.vue b/packages/docs/src/examples/grid/misc-margin-helpers.vue new file mode 100644 index 0000000..81a3d2f --- /dev/null +++ b/packages/docs/src/examples/grid/misc-margin-helpers.vue @@ -0,0 +1,54 @@ + diff --git a/packages/docs/src/examples/grid/misc-nested-grid.vue b/packages/docs/src/examples/grid/misc-nested-grid.vue new file mode 100644 index 0000000..e4ddb7e --- /dev/null +++ b/packages/docs/src/examples/grid/misc-nested-grid.vue @@ -0,0 +1,35 @@ + diff --git a/packages/docs/src/examples/grid/misc-one-column-width.vue b/packages/docs/src/examples/grid/misc-one-column-width.vue new file mode 100644 index 0000000..96de8b0 --- /dev/null +++ b/packages/docs/src/examples/grid/misc-one-column-width.vue @@ -0,0 +1,43 @@ + diff --git a/packages/docs/src/examples/grid/misc-row-and-column-breakpoints.vue b/packages/docs/src/examples/grid/misc-row-and-column-breakpoints.vue new file mode 100644 index 0000000..b2bc3e1 --- /dev/null +++ b/packages/docs/src/examples/grid/misc-row-and-column-breakpoints.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/docs/src/examples/grid/misc-spacer.vue b/packages/docs/src/examples/grid/misc-spacer.vue new file mode 100644 index 0000000..944be3f --- /dev/null +++ b/packages/docs/src/examples/grid/misc-spacer.vue @@ -0,0 +1,43 @@ + diff --git a/packages/docs/src/examples/grid/misc-unique-layouts.vue b/packages/docs/src/examples/grid/misc-unique-layouts.vue new file mode 100644 index 0000000..85ea116 --- /dev/null +++ b/packages/docs/src/examples/grid/misc-unique-layouts.vue @@ -0,0 +1,66 @@ + diff --git a/packages/docs/src/examples/grid/misc-variable-content.vue b/packages/docs/src/examples/grid/misc-variable-content.vue new file mode 100644 index 0000000..a169427 --- /dev/null +++ b/packages/docs/src/examples/grid/misc-variable-content.vue @@ -0,0 +1,66 @@ + diff --git a/packages/docs/src/examples/grid/prop-align.vue b/packages/docs/src/examples/grid/prop-align.vue new file mode 100644 index 0000000..04ebbb0 --- /dev/null +++ b/packages/docs/src/examples/grid/prop-align.vue @@ -0,0 +1,85 @@ + diff --git a/packages/docs/src/examples/grid/prop-breakpoint-sizing.vue b/packages/docs/src/examples/grid/prop-breakpoint-sizing.vue new file mode 100644 index 0000000..cb945da --- /dev/null +++ b/packages/docs/src/examples/grid/prop-breakpoint-sizing.vue @@ -0,0 +1,47 @@ + diff --git a/packages/docs/src/examples/grid/prop-justify.vue b/packages/docs/src/examples/grid/prop-justify.vue new file mode 100644 index 0000000..b6499f8 --- /dev/null +++ b/packages/docs/src/examples/grid/prop-justify.vue @@ -0,0 +1,63 @@ + diff --git a/packages/docs/src/examples/grid/prop-no-gutters.vue b/packages/docs/src/examples/grid/prop-no-gutters.vue new file mode 100644 index 0000000..0183fa8 --- /dev/null +++ b/packages/docs/src/examples/grid/prop-no-gutters.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/grid/prop-offset-breakpoint.vue b/packages/docs/src/examples/grid/prop-offset-breakpoint.vue new file mode 100644 index 0000000..2f6cce0 --- /dev/null +++ b/packages/docs/src/examples/grid/prop-offset-breakpoint.vue @@ -0,0 +1,49 @@ + diff --git a/packages/docs/src/examples/grid/prop-offset.vue b/packages/docs/src/examples/grid/prop-offset.vue new file mode 100644 index 0000000..5c1393d --- /dev/null +++ b/packages/docs/src/examples/grid/prop-offset.vue @@ -0,0 +1,53 @@ + diff --git a/packages/docs/src/examples/grid/prop-order-first-and-last.vue b/packages/docs/src/examples/grid/prop-order-first-and-last.vue new file mode 100644 index 0000000..9bb8947 --- /dev/null +++ b/packages/docs/src/examples/grid/prop-order-first-and-last.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/grid/prop-order.vue b/packages/docs/src/examples/grid/prop-order.vue new file mode 100644 index 0000000..0e60279 --- /dev/null +++ b/packages/docs/src/examples/grid/prop-order.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/grid/usage.vue b/packages/docs/src/examples/grid/usage.vue new file mode 100644 index 0000000..0da5e74 --- /dev/null +++ b/packages/docs/src/examples/grid/usage.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/opacity/misc-hover.vue b/packages/docs/src/examples/opacity/misc-hover.vue new file mode 100644 index 0000000..aa787db --- /dev/null +++ b/packages/docs/src/examples/opacity/misc-hover.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/opacity/misc-opacity.vue b/packages/docs/src/examples/opacity/misc-opacity.vue new file mode 100644 index 0000000..cc6e9b5 --- /dev/null +++ b/packages/docs/src/examples/opacity/misc-opacity.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/examples/overflow/overflow-x.vue b/packages/docs/src/examples/overflow/overflow-x.vue new file mode 100644 index 0000000..ff067df --- /dev/null +++ b/packages/docs/src/examples/overflow/overflow-x.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/overflow/overflow.vue b/packages/docs/src/examples/overflow/overflow.vue new file mode 100644 index 0000000..acedfc4 --- /dev/null +++ b/packages/docs/src/examples/overflow/overflow.vue @@ -0,0 +1,37 @@ + diff --git a/packages/docs/src/examples/position/absolute.vue b/packages/docs/src/examples/position/absolute.vue new file mode 100644 index 0000000..d2d036c --- /dev/null +++ b/packages/docs/src/examples/position/absolute.vue @@ -0,0 +1,37 @@ + diff --git a/packages/docs/src/examples/position/fixed.vue b/packages/docs/src/examples/position/fixed.vue new file mode 100644 index 0000000..aaba79e --- /dev/null +++ b/packages/docs/src/examples/position/fixed.vue @@ -0,0 +1,22 @@ + diff --git a/packages/docs/src/examples/position/relative.vue b/packages/docs/src/examples/position/relative.vue new file mode 100644 index 0000000..94bc8a7 --- /dev/null +++ b/packages/docs/src/examples/position/relative.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/position/static.vue b/packages/docs/src/examples/position/static.vue new file mode 100644 index 0000000..546c480 --- /dev/null +++ b/packages/docs/src/examples/position/static.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/position/sticky.vue b/packages/docs/src/examples/position/sticky.vue new file mode 100644 index 0000000..da76eea --- /dev/null +++ b/packages/docs/src/examples/position/sticky.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/scroll/usage.vue b/packages/docs/src/examples/scroll/usage.vue new file mode 100644 index 0000000..496fa9e --- /dev/null +++ b/packages/docs/src/examples/scroll/usage.vue @@ -0,0 +1,368 @@ + + + + + diff --git a/packages/docs/src/examples/sizing/height.vue b/packages/docs/src/examples/sizing/height.vue new file mode 100644 index 0000000..dd72cd3 --- /dev/null +++ b/packages/docs/src/examples/sizing/height.vue @@ -0,0 +1,5 @@ + diff --git a/packages/docs/src/examples/sizing/width.vue b/packages/docs/src/examples/sizing/width.vue new file mode 100644 index 0000000..eb3d006 --- /dev/null +++ b/packages/docs/src/examples/sizing/width.vue @@ -0,0 +1,5 @@ + diff --git a/packages/docs/src/examples/spacing/breakpoints.vue b/packages/docs/src/examples/spacing/breakpoints.vue new file mode 100644 index 0000000..bbc70a1 --- /dev/null +++ b/packages/docs/src/examples/spacing/breakpoints.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/spacing/gap.vue b/packages/docs/src/examples/spacing/gap.vue new file mode 100644 index 0000000..cdfa6ee --- /dev/null +++ b/packages/docs/src/examples/spacing/gap.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/spacing/horizontal.vue b/packages/docs/src/examples/spacing/horizontal.vue new file mode 100644 index 0000000..42ebe82 --- /dev/null +++ b/packages/docs/src/examples/spacing/horizontal.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/spacing/negative-margin.vue b/packages/docs/src/examples/spacing/negative-margin.vue new file mode 100644 index 0000000..ec42d51 --- /dev/null +++ b/packages/docs/src/examples/spacing/negative-margin.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/spacing/usage.vue b/packages/docs/src/examples/spacing/usage.vue new file mode 100644 index 0000000..d71cd72 --- /dev/null +++ b/packages/docs/src/examples/spacing/usage.vue @@ -0,0 +1,117 @@ + + + diff --git a/packages/docs/src/examples/text-and-typography/font-emphasis.vue b/packages/docs/src/examples/text-and-typography/font-emphasis.vue new file mode 100644 index 0000000..3a2783a --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/font-emphasis.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-alignment-responsive.vue b/packages/docs/src/examples/text-and-typography/text-alignment-responsive.vue new file mode 100644 index 0000000..f119599 --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-alignment-responsive.vue @@ -0,0 +1,26 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-alignment.vue b/packages/docs/src/examples/text-and-typography/text-alignment.vue new file mode 100644 index 0000000..fab7800 --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-alignment.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-break.vue b/packages/docs/src/examples/text-and-typography/text-break.vue new file mode 100644 index 0000000..59f1f3c --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-break.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/docs/src/examples/text-and-typography/text-decoration.vue b/packages/docs/src/examples/text-and-typography/text-decoration.vue new file mode 100644 index 0000000..774503c --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-decoration.vue @@ -0,0 +1,22 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-no-wrap.vue b/packages/docs/src/examples/text-and-typography/text-no-wrap.vue new file mode 100644 index 0000000..9bae47c --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-no-wrap.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-opacity.vue b/packages/docs/src/examples/text-and-typography/text-opacity.vue new file mode 100644 index 0000000..782e06a --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-opacity.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-rtl.vue b/packages/docs/src/examples/text-and-typography/text-rtl.vue new file mode 100644 index 0000000..efed0b2 --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-rtl.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-transform.vue b/packages/docs/src/examples/text-and-typography/text-transform.vue new file mode 100644 index 0000000..735c25a --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-transform.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/text-and-typography/text-truncate.vue b/packages/docs/src/examples/text-and-typography/text-truncate.vue new file mode 100644 index 0000000..bad5309 --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/text-truncate.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/text-and-typography/typography-breakpoints.vue b/packages/docs/src/examples/text-and-typography/typography-breakpoints.vue new file mode 100644 index 0000000..3968a24 --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/typography-breakpoints.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/text-and-typography/typography.vue b/packages/docs/src/examples/text-and-typography/typography.vue new file mode 100644 index 0000000..206c67a --- /dev/null +++ b/packages/docs/src/examples/text-and-typography/typography.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/docs/src/examples/transitions/misc-expand-x.vue b/packages/docs/src/examples/transitions/misc-expand-x.vue new file mode 100644 index 0000000..32c0cca --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-expand-x.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/packages/docs/src/examples/transitions/misc-fab.vue b/packages/docs/src/examples/transitions/misc-fab.vue new file mode 100644 index 0000000..40a8634 --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-fab.vue @@ -0,0 +1,23 @@ + diff --git a/packages/docs/src/examples/transitions/misc-fade.vue b/packages/docs/src/examples/transitions/misc-fade.vue new file mode 100644 index 0000000..9d5d76c --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-fade.vue @@ -0,0 +1,23 @@ + diff --git a/packages/docs/src/examples/transitions/misc-scale.vue b/packages/docs/src/examples/transitions/misc-scale.vue new file mode 100644 index 0000000..4e1f4b8 --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-scale.vue @@ -0,0 +1,23 @@ + diff --git a/packages/docs/src/examples/transitions/misc-scroll-x.vue b/packages/docs/src/examples/transitions/misc-scroll-x.vue new file mode 100644 index 0000000..4233446 --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-scroll-x.vue @@ -0,0 +1,49 @@ + diff --git a/packages/docs/src/examples/transitions/misc-scroll-y.vue b/packages/docs/src/examples/transitions/misc-scroll-y.vue new file mode 100644 index 0000000..950f1ab --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-scroll-y.vue @@ -0,0 +1,49 @@ + diff --git a/packages/docs/src/examples/transitions/misc-slide-x.vue b/packages/docs/src/examples/transitions/misc-slide-x.vue new file mode 100644 index 0000000..f61d69c --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-slide-x.vue @@ -0,0 +1,49 @@ + diff --git a/packages/docs/src/examples/transitions/misc-slide-y.vue b/packages/docs/src/examples/transitions/misc-slide-y.vue new file mode 100644 index 0000000..a57ee08 --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-slide-y.vue @@ -0,0 +1,49 @@ + diff --git a/packages/docs/src/examples/transitions/misc-todo.vue b/packages/docs/src/examples/transitions/misc-todo.vue new file mode 100644 index 0000000..10df5b7 --- /dev/null +++ b/packages/docs/src/examples/transitions/misc-todo.vue @@ -0,0 +1,163 @@ + + + + diff --git a/packages/docs/src/examples/transitions/prop-custom-origin.vue b/packages/docs/src/examples/transitions/prop-custom-origin.vue new file mode 100644 index 0000000..7c36696 --- /dev/null +++ b/packages/docs/src/examples/transitions/prop-custom-origin.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/transitions/usage.vue b/packages/docs/src/examples/transitions/usage.vue new file mode 100644 index 0000000..0e65a6d --- /dev/null +++ b/packages/docs/src/examples/transitions/usage.vue @@ -0,0 +1,47 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-border-color.vue b/packages/docs/src/examples/v-alert/prop-border-color.vue new file mode 100644 index 0000000..2d93f66 --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-border-color.vue @@ -0,0 +1,43 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-border.vue b/packages/docs/src/examples/v-alert/prop-border.vue new file mode 100644 index 0000000..a6955cc --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-border.vue @@ -0,0 +1,37 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-closable.vue b/packages/docs/src/examples/v-alert/prop-closable.vue new file mode 100644 index 0000000..31dba84 --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-closable.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/examples/v-alert/prop-content.vue b/packages/docs/src/examples/v-alert/prop-content.vue new file mode 100644 index 0000000..5b973bf --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-content.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-density.vue b/packages/docs/src/examples/v-alert/prop-density.vue new file mode 100644 index 0000000..beb0cf9 --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-density.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-icon.vue b/packages/docs/src/examples/v-alert/prop-icon.vue new file mode 100644 index 0000000..4486af3 --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-icon.vue @@ -0,0 +1,34 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-outlined.vue b/packages/docs/src/examples/v-alert/prop-outlined.vue new file mode 100644 index 0000000..a9c5d0c --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-outlined.vue @@ -0,0 +1,34 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-prominent.vue b/packages/docs/src/examples/v-alert/prop-prominent.vue new file mode 100644 index 0000000..d9c8cea --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-prominent.vue @@ -0,0 +1,37 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-rounded.vue b/packages/docs/src/examples/v-alert/prop-rounded.vue new file mode 100644 index 0000000..e845c6e --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-rounded.vue @@ -0,0 +1,44 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-type.vue b/packages/docs/src/examples/v-alert/prop-type.vue new file mode 100644 index 0000000..8faf84b --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-type.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-alert/prop-variant.vue b/packages/docs/src/examples/v-alert/prop-variant.vue new file mode 100644 index 0000000..96a900e --- /dev/null +++ b/packages/docs/src/examples/v-alert/prop-variant.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-alert/usage.vue b/packages/docs/src/examples/v-alert/usage.vue new file mode 100644 index 0000000..ed18581 --- /dev/null +++ b/packages/docs/src/examples/v-alert/usage.vue @@ -0,0 +1,75 @@ + + + diff --git a/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue b/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue new file mode 100644 index 0000000..60b756c --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-app-bar/misc-menu.vue b/packages/docs/src/examples/v-app-bar/misc-menu.vue new file mode 100644 index 0000000..0103f1e --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/misc-menu.vue @@ -0,0 +1,80 @@ + diff --git a/packages/docs/src/examples/v-app-bar/prop-dense.vue b/packages/docs/src/examples/v-app-bar/prop-dense.vue new file mode 100644 index 0000000..41a992c --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/prop-dense.vue @@ -0,0 +1,44 @@ + diff --git a/packages/docs/src/examples/v-app-bar/prop-density.vue b/packages/docs/src/examples/v-app-bar/prop-density.vue new file mode 100644 index 0000000..bef1377 --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/prop-density.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/examples/v-app-bar/prop-image.vue b/packages/docs/src/examples/v-app-bar/prop-image.vue new file mode 100644 index 0000000..4bed7ce --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/prop-image.vue @@ -0,0 +1,54 @@ + diff --git a/packages/docs/src/examples/v-app-bar/prop-prominent.vue b/packages/docs/src/examples/v-app-bar/prop-prominent.vue new file mode 100644 index 0000000..9bb5c72 --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/prop-prominent.vue @@ -0,0 +1,69 @@ + diff --git a/packages/docs/src/examples/v-app-bar/prop-scroll-behavior.vue b/packages/docs/src/examples/v-app-bar/prop-scroll-behavior.vue new file mode 100644 index 0000000..cd25b2b --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/prop-scroll-behavior.vue @@ -0,0 +1,90 @@ + + + diff --git a/packages/docs/src/examples/v-app-bar/usage.vue b/packages/docs/src/examples/v-app-bar/usage.vue new file mode 100644 index 0000000..90f6278 --- /dev/null +++ b/packages/docs/src/examples/v-app-bar/usage.vue @@ -0,0 +1,80 @@ + + + diff --git a/packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue b/packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue new file mode 100644 index 0000000..08626ca --- /dev/null +++ b/packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue @@ -0,0 +1,196 @@ + + + + + diff --git a/packages/docs/src/examples/v-autocomplete/misc-new-tab.vue b/packages/docs/src/examples/v-autocomplete/misc-new-tab.vue new file mode 100644 index 0000000..458135a --- /dev/null +++ b/packages/docs/src/examples/v-autocomplete/misc-new-tab.vue @@ -0,0 +1,200 @@ + + + + + diff --git a/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue b/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue new file mode 100644 index 0000000..ed8bf70 --- /dev/null +++ b/packages/docs/src/examples/v-autocomplete/misc-state-selector.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/packages/docs/src/examples/v-autocomplete/prop-density.vue b/packages/docs/src/examples/v-autocomplete/prop-density.vue new file mode 100644 index 0000000..1a4f9ee --- /dev/null +++ b/packages/docs/src/examples/v-autocomplete/prop-density.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/docs/src/examples/v-autocomplete/prop-filter.vue b/packages/docs/src/examples/v-autocomplete/prop-filter.vue new file mode 100644 index 0000000..3d8eac1 --- /dev/null +++ b/packages/docs/src/examples/v-autocomplete/prop-filter.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue b/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue new file mode 100644 index 0000000..3353467 --- /dev/null +++ b/packages/docs/src/examples/v-autocomplete/slot-item-and-selection.vue @@ -0,0 +1,230 @@ + + + + + diff --git a/packages/docs/src/examples/v-autocomplete/usage.vue b/packages/docs/src/examples/v-autocomplete/usage.vue new file mode 100644 index 0000000..f2ea41c --- /dev/null +++ b/packages/docs/src/examples/v-autocomplete/usage.vue @@ -0,0 +1,47 @@ + + + diff --git a/packages/docs/src/examples/v-avatar/misc-advanced.vue b/packages/docs/src/examples/v-avatar/misc-advanced.vue new file mode 100644 index 0000000..3756cce --- /dev/null +++ b/packages/docs/src/examples/v-avatar/misc-advanced.vue @@ -0,0 +1,143 @@ + + + + + diff --git a/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue b/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue new file mode 100644 index 0000000..fbcd51e --- /dev/null +++ b/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/packages/docs/src/examples/v-avatar/misc-profile-card.vue b/packages/docs/src/examples/v-avatar/misc-profile-card.vue new file mode 100644 index 0000000..76c90ad --- /dev/null +++ b/packages/docs/src/examples/v-avatar/misc-profile-card.vue @@ -0,0 +1,26 @@ + diff --git a/packages/docs/src/examples/v-avatar/prop-size.vue b/packages/docs/src/examples/v-avatar/prop-size.vue new file mode 100644 index 0000000..c7b56aa --- /dev/null +++ b/packages/docs/src/examples/v-avatar/prop-size.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/v-avatar/prop-tile.vue b/packages/docs/src/examples/v-avatar/prop-tile.vue new file mode 100644 index 0000000..ee9dc49 --- /dev/null +++ b/packages/docs/src/examples/v-avatar/prop-tile.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-avatar/slot-default.vue b/packages/docs/src/examples/v-avatar/slot-default.vue new file mode 100644 index 0000000..cd4270d --- /dev/null +++ b/packages/docs/src/examples/v-avatar/slot-default.vue @@ -0,0 +1,18 @@ + diff --git a/packages/docs/src/examples/v-avatar/usage.vue b/packages/docs/src/examples/v-avatar/usage.vue new file mode 100644 index 0000000..2e290fb --- /dev/null +++ b/packages/docs/src/examples/v-avatar/usage.vue @@ -0,0 +1,54 @@ + + + diff --git a/packages/docs/src/examples/v-badge/misc-customization.vue b/packages/docs/src/examples/v-badge/misc-customization.vue new file mode 100644 index 0000000..3c81f63 --- /dev/null +++ b/packages/docs/src/examples/v-badge/misc-customization.vue @@ -0,0 +1,45 @@ + diff --git a/packages/docs/src/examples/v-badge/misc-dynamic.vue b/packages/docs/src/examples/v-badge/misc-dynamic.vue new file mode 100644 index 0000000..352e184 --- /dev/null +++ b/packages/docs/src/examples/v-badge/misc-dynamic.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-badge/misc-hover.vue b/packages/docs/src/examples/v-badge/misc-hover.vue new file mode 100644 index 0000000..ab1e9ea --- /dev/null +++ b/packages/docs/src/examples/v-badge/misc-hover.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/docs/src/examples/v-badge/misc-tabs.vue b/packages/docs/src/examples/v-badge/misc-tabs.vue new file mode 100644 index 0000000..922e4c2 --- /dev/null +++ b/packages/docs/src/examples/v-badge/misc-tabs.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/src/examples/v-badge/prop-content.vue b/packages/docs/src/examples/v-badge/prop-content.vue new file mode 100644 index 0000000..e179869 --- /dev/null +++ b/packages/docs/src/examples/v-badge/prop-content.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/src/examples/v-badge/prop-dot.vue b/packages/docs/src/examples/v-badge/prop-dot.vue new file mode 100644 index 0000000..8b1c3a2 --- /dev/null +++ b/packages/docs/src/examples/v-badge/prop-dot.vue @@ -0,0 +1,34 @@ + diff --git a/packages/docs/src/examples/v-badge/prop-inline.vue b/packages/docs/src/examples/v-badge/prop-inline.vue new file mode 100644 index 0000000..e9dc2ad --- /dev/null +++ b/packages/docs/src/examples/v-badge/prop-inline.vue @@ -0,0 +1,47 @@ + diff --git a/packages/docs/src/examples/v-badge/usage.vue b/packages/docs/src/examples/v-badge/usage.vue new file mode 100644 index 0000000..5b4409e --- /dev/null +++ b/packages/docs/src/examples/v-badge/usage.vue @@ -0,0 +1,55 @@ + + + diff --git a/packages/docs/src/examples/v-banner/prop-lines.vue b/packages/docs/src/examples/v-banner/prop-lines.vue new file mode 100644 index 0000000..cc16f01 --- /dev/null +++ b/packages/docs/src/examples/v-banner/prop-lines.vue @@ -0,0 +1,48 @@ + diff --git a/packages/docs/src/examples/v-banner/prop-sticky.vue b/packages/docs/src/examples/v-banner/prop-sticky.vue new file mode 100644 index 0000000..7e4497e --- /dev/null +++ b/packages/docs/src/examples/v-banner/prop-sticky.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/packages/docs/src/examples/v-banner/slot-actions.vue b/packages/docs/src/examples/v-banner/slot-actions.vue new file mode 100644 index 0000000..71d80d1 --- /dev/null +++ b/packages/docs/src/examples/v-banner/slot-actions.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-banner/slot-icon.vue b/packages/docs/src/examples/v-banner/slot-icon.vue new file mode 100644 index 0000000..c6db735 --- /dev/null +++ b/packages/docs/src/examples/v-banner/slot-icon.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/v-banner/slot-prepend.vue b/packages/docs/src/examples/v-banner/slot-prepend.vue new file mode 100644 index 0000000..87d8e45 --- /dev/null +++ b/packages/docs/src/examples/v-banner/slot-prepend.vue @@ -0,0 +1,23 @@ + diff --git a/packages/docs/src/examples/v-banner/usage.vue b/packages/docs/src/examples/v-banner/usage.vue new file mode 100644 index 0000000..599823f --- /dev/null +++ b/packages/docs/src/examples/v-banner/usage.vue @@ -0,0 +1,79 @@ + + + diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-color.vue b/packages/docs/src/examples/v-bottom-navigation/prop-color.vue new file mode 100644 index 0000000..0565d67 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/prop-color.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-grow.vue b/packages/docs/src/examples/v-bottom-navigation/prop-grow.vue new file mode 100644 index 0000000..906c434 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/prop-grow.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-hide-on-scroll.vue b/packages/docs/src/examples/v-bottom-navigation/prop-hide-on-scroll.vue new file mode 100644 index 0000000..b419d8b --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/prop-hide-on-scroll.vue @@ -0,0 +1,49 @@ + diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-horizontal.vue b/packages/docs/src/examples/v-bottom-navigation/prop-horizontal.vue new file mode 100644 index 0000000..4c7b3c8 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/prop-horizontal.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-scroll-threshold.vue b/packages/docs/src/examples/v-bottom-navigation/prop-scroll-threshold.vue new file mode 100644 index 0000000..d3a1283 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/prop-scroll-threshold.vue @@ -0,0 +1,42 @@ + diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-shift.vue b/packages/docs/src/examples/v-bottom-navigation/prop-shift.vue new file mode 100644 index 0000000..9b6d75b --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/prop-shift.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-navigation/prop-toggle.vue b/packages/docs/src/examples/v-bottom-navigation/prop-toggle.vue new file mode 100644 index 0000000..fca86d2 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/prop-toggle.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-navigation/usage.vue b/packages/docs/src/examples/v-bottom-navigation/usage.vue new file mode 100644 index 0000000..7c3e9dd --- /dev/null +++ b/packages/docs/src/examples/v-bottom-navigation/usage.vue @@ -0,0 +1,79 @@ + + + diff --git a/packages/docs/src/examples/v-bottom-sheet/misc-open-in-list.vue b/packages/docs/src/examples/v-bottom-sheet/misc-open-in-list.vue new file mode 100644 index 0000000..4ea1c60 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-sheet/misc-open-in-list.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-sheet/misc-player.vue b/packages/docs/src/examples/v-bottom-sheet/misc-player.vue new file mode 100644 index 0000000..e436781 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-sheet/misc-player.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-sheet/prop-inset.vue b/packages/docs/src/examples/v-bottom-sheet/prop-inset.vue new file mode 100644 index 0000000..de6b578 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-sheet/prop-inset.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-sheet/prop-model.vue b/packages/docs/src/examples/v-bottom-sheet/prop-model.vue new file mode 100644 index 0000000..e114f56 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-sheet/prop-model.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/docs/src/examples/v-bottom-sheet/usage.vue b/packages/docs/src/examples/v-bottom-sheet/usage.vue new file mode 100644 index 0000000..4ce3de6 --- /dev/null +++ b/packages/docs/src/examples/v-bottom-sheet/usage.vue @@ -0,0 +1,56 @@ + + + diff --git a/packages/docs/src/examples/v-breadcrumbs/prop-divider.vue b/packages/docs/src/examples/v-breadcrumbs/prop-divider.vue new file mode 100644 index 0000000..f72f11c --- /dev/null +++ b/packages/docs/src/examples/v-breadcrumbs/prop-divider.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/docs/src/examples/v-breadcrumbs/prop-large.vue b/packages/docs/src/examples/v-breadcrumbs/prop-large.vue new file mode 100644 index 0000000..0591f0d --- /dev/null +++ b/packages/docs/src/examples/v-breadcrumbs/prop-large.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-breadcrumbs/slot-icon-dividers.vue b/packages/docs/src/examples/v-breadcrumbs/slot-icon-dividers.vue new file mode 100644 index 0000000..bfba345 --- /dev/null +++ b/packages/docs/src/examples/v-breadcrumbs/slot-icon-dividers.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/docs/src/examples/v-breadcrumbs/slot-prepend.vue b/packages/docs/src/examples/v-breadcrumbs/slot-prepend.vue new file mode 100644 index 0000000..9487738 --- /dev/null +++ b/packages/docs/src/examples/v-breadcrumbs/slot-prepend.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/docs/src/examples/v-breadcrumbs/slot-title.vue b/packages/docs/src/examples/v-breadcrumbs/slot-title.vue new file mode 100644 index 0000000..f355830 --- /dev/null +++ b/packages/docs/src/examples/v-breadcrumbs/slot-title.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/docs/src/examples/v-breadcrumbs/usage.vue b/packages/docs/src/examples/v-breadcrumbs/usage.vue new file mode 100644 index 0000000..099832a --- /dev/null +++ b/packages/docs/src/examples/v-breadcrumbs/usage.vue @@ -0,0 +1,47 @@ + + + diff --git a/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue b/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue new file mode 100644 index 0000000..7949548 --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue b/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue new file mode 100644 index 0000000..d8029f4 --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn-toggle/prop-divided.vue b/packages/docs/src/examples/v-btn-toggle/prop-divided.vue new file mode 100644 index 0000000..b70733c --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/prop-divided.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn-toggle/prop-mandatory.vue b/packages/docs/src/examples/v-btn-toggle/prop-mandatory.vue new file mode 100644 index 0000000..50da003 --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/prop-mandatory.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn-toggle/prop-multiple.vue b/packages/docs/src/examples/v-btn-toggle/prop-multiple.vue new file mode 100644 index 0000000..44ca6db --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/prop-multiple.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn-toggle/prop-rounded.vue b/packages/docs/src/examples/v-btn-toggle/prop-rounded.vue new file mode 100644 index 0000000..5665b1e --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/prop-rounded.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-btn-toggle/prop-variant.vue b/packages/docs/src/examples/v-btn-toggle/prop-variant.vue new file mode 100644 index 0000000..235bfb0 --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/prop-variant.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn-toggle/usage.vue b/packages/docs/src/examples/v-btn-toggle/usage.vue new file mode 100644 index 0000000..9f33d00 --- /dev/null +++ b/packages/docs/src/examples/v-btn-toggle/usage.vue @@ -0,0 +1,206 @@ + + + diff --git a/packages/docs/src/examples/v-btn/defaults-banner-actions.vue b/packages/docs/src/examples/v-btn/defaults-banner-actions.vue new file mode 100644 index 0000000..a08522c --- /dev/null +++ b/packages/docs/src/examples/v-btn/defaults-banner-actions.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/v-btn/defaults-bottom-navigation.vue b/packages/docs/src/examples/v-btn/defaults-bottom-navigation.vue new file mode 100644 index 0000000..832fba7 --- /dev/null +++ b/packages/docs/src/examples/v-btn/defaults-bottom-navigation.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/defaults-btn-group.vue b/packages/docs/src/examples/v-btn/defaults-btn-group.vue new file mode 100644 index 0000000..d6d632a --- /dev/null +++ b/packages/docs/src/examples/v-btn/defaults-btn-group.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/defaults-card-actions.vue b/packages/docs/src/examples/v-btn/defaults-card-actions.vue new file mode 100644 index 0000000..8197ee0 --- /dev/null +++ b/packages/docs/src/examples/v-btn/defaults-card-actions.vue @@ -0,0 +1,12 @@ + diff --git a/packages/docs/src/examples/v-btn/defaults-snackbar.vue b/packages/docs/src/examples/v-btn/defaults-snackbar.vue new file mode 100644 index 0000000..d605515 --- /dev/null +++ b/packages/docs/src/examples/v-btn/defaults-snackbar.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/defaults-toolbar.vue b/packages/docs/src/examples/v-btn/defaults-toolbar.vue new file mode 100644 index 0000000..e90ef7d --- /dev/null +++ b/packages/docs/src/examples/v-btn/defaults-toolbar.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/v-btn/misc-cookie-settings.vue b/packages/docs/src/examples/v-btn/misc-cookie-settings.vue new file mode 100644 index 0000000..0ec4605 --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-cookie-settings.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/misc-dialog-action.vue b/packages/docs/src/examples/v-btn/misc-dialog-action.vue new file mode 100644 index 0000000..22526c9 --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-dialog-action.vue @@ -0,0 +1,65 @@ + + + diff --git a/packages/docs/src/examples/v-btn/misc-discord-event.vue b/packages/docs/src/examples/v-btn/misc-discord-event.vue new file mode 100644 index 0000000..c0cf8e0 --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-discord-event.vue @@ -0,0 +1,132 @@ + diff --git a/packages/docs/src/examples/v-btn/misc-group-survey.vue b/packages/docs/src/examples/v-btn/misc-group-survey.vue new file mode 100644 index 0000000..974a954 --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-group-survey.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/misc-raised.vue b/packages/docs/src/examples/v-btn/misc-raised.vue new file mode 100644 index 0000000..50409fc --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-raised.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-btn/misc-readonly.vue b/packages/docs/src/examples/v-btn/misc-readonly.vue new file mode 100644 index 0000000..7b3b897 --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-readonly.vue @@ -0,0 +1,74 @@ + + + diff --git a/packages/docs/src/examples/v-btn/misc-tax-form.vue b/packages/docs/src/examples/v-btn/misc-tax-form.vue new file mode 100644 index 0000000..9553ff2 --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-tax-form.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/misc-toolbar.vue b/packages/docs/src/examples/v-btn/misc-toolbar.vue new file mode 100644 index 0000000..58077a5 --- /dev/null +++ b/packages/docs/src/examples/v-btn/misc-toolbar.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-block.vue b/packages/docs/src/examples/v-btn/prop-block.vue new file mode 100644 index 0000000..61374a9 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-block.vue @@ -0,0 +1,3 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-density.vue b/packages/docs/src/examples/v-btn/prop-density.vue new file mode 100644 index 0000000..d498294 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-density.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-elevation.vue b/packages/docs/src/examples/v-btn/prop-elevation.vue new file mode 100644 index 0000000..da0a6a0 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-elevation.vue @@ -0,0 +1,33 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-flat.vue b/packages/docs/src/examples/v-btn/prop-flat.vue new file mode 100644 index 0000000..fbc157e --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-flat.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-floating.vue b/packages/docs/src/examples/v-btn/prop-floating.vue new file mode 100644 index 0000000..74c3be8 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-floating.vue @@ -0,0 +1,73 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-icon.vue b/packages/docs/src/examples/v-btn/prop-icon.vue new file mode 100644 index 0000000..d929e0e --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-icon.vue @@ -0,0 +1,39 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-loaders.vue b/packages/docs/src/examples/v-btn/prop-loaders.vue new file mode 100644 index 0000000..18aa87e --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-loaders.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/prop-outlined.vue b/packages/docs/src/examples/v-btn/prop-outlined.vue new file mode 100644 index 0000000..083fac2 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-outlined.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-plain.vue b/packages/docs/src/examples/v-btn/prop-plain.vue new file mode 100644 index 0000000..a94539c --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-plain.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-ripple.vue b/packages/docs/src/examples/v-btn/prop-ripple.vue new file mode 100644 index 0000000..5ea840d --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-ripple.vue @@ -0,0 +1,24 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-rounded.vue b/packages/docs/src/examples/v-btn/prop-rounded.vue new file mode 100644 index 0000000..e96308e --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-rounded.vue @@ -0,0 +1,29 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-size.vue b/packages/docs/src/examples/v-btn/prop-size.vue new file mode 100644 index 0000000..b8770f1 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-size.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-tile.vue b/packages/docs/src/examples/v-btn/prop-tile.vue new file mode 100644 index 0000000..c66de49 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-tile.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/v-btn/prop-variant.vue b/packages/docs/src/examples/v-btn/prop-variant.vue new file mode 100644 index 0000000..24bd5f0 --- /dev/null +++ b/packages/docs/src/examples/v-btn/prop-variant.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-btn/slot-loader.vue b/packages/docs/src/examples/v-btn/slot-loader.vue new file mode 100644 index 0000000..b65840e --- /dev/null +++ b/packages/docs/src/examples/v-btn/slot-loader.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/examples/v-btn/slot-prepend-append.vue b/packages/docs/src/examples/v-btn/slot-prepend-append.vue new file mode 100644 index 0000000..4b24eed --- /dev/null +++ b/packages/docs/src/examples/v-btn/slot-prepend-append.vue @@ -0,0 +1,18 @@ + diff --git a/packages/docs/src/examples/v-btn/usage.vue b/packages/docs/src/examples/v-btn/usage.vue new file mode 100644 index 0000000..84fdcae --- /dev/null +++ b/packages/docs/src/examples/v-btn/usage.vue @@ -0,0 +1,78 @@ + + + diff --git a/packages/docs/src/examples/v-calendar/event-click.vue b/packages/docs/src/examples/v-calendar/event-click.vue new file mode 100644 index 0000000..89e4db2 --- /dev/null +++ b/packages/docs/src/examples/v-calendar/event-click.vue @@ -0,0 +1,299 @@ + + + + + diff --git a/packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue b/packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue new file mode 100644 index 0000000..8b5ab6e --- /dev/null +++ b/packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue @@ -0,0 +1,222 @@ + + + + + diff --git a/packages/docs/src/examples/v-calendar/prop-type-day.vue b/packages/docs/src/examples/v-calendar/prop-type-day.vue new file mode 100644 index 0000000..26f16f0 --- /dev/null +++ b/packages/docs/src/examples/v-calendar/prop-type-day.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-calendar/prop-type-month.vue b/packages/docs/src/examples/v-calendar/prop-type-month.vue new file mode 100644 index 0000000..a148de1 --- /dev/null +++ b/packages/docs/src/examples/v-calendar/prop-type-month.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/packages/docs/src/examples/v-calendar/prop-type-week.vue b/packages/docs/src/examples/v-calendar/prop-type-week.vue new file mode 100644 index 0000000..b207a04 --- /dev/null +++ b/packages/docs/src/examples/v-calendar/prop-type-week.vue @@ -0,0 +1,119 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-calendar/slot-day-body.vue b/packages/docs/src/examples/v-calendar/slot-day-body.vue new file mode 100644 index 0000000..8db68d7 --- /dev/null +++ b/packages/docs/src/examples/v-calendar/slot-day-body.vue @@ -0,0 +1,113 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-calendar/slot-day.vue b/packages/docs/src/examples/v-calendar/slot-day.vue new file mode 100644 index 0000000..bfccf99 --- /dev/null +++ b/packages/docs/src/examples/v-calendar/slot-day.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/packages/docs/src/examples/v-calendar/usage.vue b/packages/docs/src/examples/v-calendar/usage.vue new file mode 100644 index 0000000..65124fd --- /dev/null +++ b/packages/docs/src/examples/v-calendar/usage.vue @@ -0,0 +1,97 @@ + + + diff --git a/packages/docs/src/examples/v-card/basics-combine.vue b/packages/docs/src/examples/v-card/basics-combine.vue new file mode 100644 index 0000000..fe41cc0 --- /dev/null +++ b/packages/docs/src/examples/v-card/basics-combine.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/v-card/basics-content.vue b/packages/docs/src/examples/v-card/basics-content.vue new file mode 100644 index 0000000..43f48b8 --- /dev/null +++ b/packages/docs/src/examples/v-card/basics-content.vue @@ -0,0 +1,47 @@ + diff --git a/packages/docs/src/examples/v-card/misc-card-reveal.vue b/packages/docs/src/examples/v-card/misc-card-reveal.vue new file mode 100644 index 0000000..cd4651a --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-card-reveal.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/misc-content-wrapping.vue b/packages/docs/src/examples/v-card/misc-content-wrapping.vue new file mode 100644 index 0000000..1b37925 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-content-wrapping.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/misc-custom-actions.vue b/packages/docs/src/examples/v-card/misc-custom-actions.vue new file mode 100644 index 0000000..85d7c4f --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-custom-actions.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/misc-earnings-goal.vue b/packages/docs/src/examples/v-card/misc-earnings-goal.vue new file mode 100644 index 0000000..84297a0 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-earnings-goal.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/examples/v-card/misc-grids.vue b/packages/docs/src/examples/v-card/misc-grids.vue new file mode 100644 index 0000000..87b4c48 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-grids.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/misc-horizontal-cards.vue b/packages/docs/src/examples/v-card/misc-horizontal-cards.vue new file mode 100644 index 0000000..05826f1 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-horizontal-cards.vue @@ -0,0 +1,111 @@ + diff --git a/packages/docs/src/examples/v-card/misc-information-card.vue b/packages/docs/src/examples/v-card/misc-information-card.vue new file mode 100644 index 0000000..5938eee --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-information-card.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/v-card/misc-intermediate.vue b/packages/docs/src/examples/v-card/misc-intermediate.vue new file mode 100644 index 0000000..bedc618 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-intermediate.vue @@ -0,0 +1,43 @@ + diff --git a/packages/docs/src/examples/v-card/misc-media-with-text.vue b/packages/docs/src/examples/v-card/misc-media-with-text.vue new file mode 100644 index 0000000..a6cd70d --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-media-with-text.vue @@ -0,0 +1,31 @@ + diff --git a/packages/docs/src/examples/v-card/misc-shopify-funding.vue b/packages/docs/src/examples/v-card/misc-shopify-funding.vue new file mode 100644 index 0000000..0a4e999 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-shopify-funding.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/misc-twitter-card.vue b/packages/docs/src/examples/v-card/misc-twitter-card.vue new file mode 100644 index 0000000..c4c60f1 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-twitter-card.vue @@ -0,0 +1,42 @@ + diff --git a/packages/docs/src/examples/v-card/misc-weather-card.vue b/packages/docs/src/examples/v-card/misc-weather-card.vue new file mode 100644 index 0000000..6316063 --- /dev/null +++ b/packages/docs/src/examples/v-card/misc-weather-card.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/prop-color.vue b/packages/docs/src/examples/v-card/prop-color.vue new file mode 100644 index 0000000..eaf8f29 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-color.vue @@ -0,0 +1,73 @@ + + + diff --git a/packages/docs/src/examples/v-card/prop-disabled.vue b/packages/docs/src/examples/v-card/prop-disabled.vue new file mode 100644 index 0000000..dd9ea76 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-disabled.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-card/prop-elevated.vue b/packages/docs/src/examples/v-card/prop-elevated.vue new file mode 100644 index 0000000..692a5ff --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-elevated.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/v-card/prop-elevation.vue b/packages/docs/src/examples/v-card/prop-elevation.vue new file mode 100644 index 0000000..462c67f --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-elevation.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-card/prop-hover.vue b/packages/docs/src/examples/v-card/prop-hover.vue new file mode 100644 index 0000000..28df1a9 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-hover.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-card/prop-href.vue b/packages/docs/src/examples/v-card/prop-href.vue new file mode 100644 index 0000000..e2cf71d --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-href.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/v-card/prop-image.vue b/packages/docs/src/examples/v-card/prop-image.vue new file mode 100644 index 0000000..2c9b946 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-image.vue @@ -0,0 +1,20 @@ + diff --git a/packages/docs/src/examples/v-card/prop-link.vue b/packages/docs/src/examples/v-card/prop-link.vue new file mode 100644 index 0000000..47bc9ad --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-link.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-card/prop-loading.vue b/packages/docs/src/examples/v-card/prop-loading.vue new file mode 100644 index 0000000..d21fa03 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-loading.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/prop-outlined.vue b/packages/docs/src/examples/v-card/prop-outlined.vue new file mode 100644 index 0000000..11d113e --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-outlined.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/v-card/prop-variant.vue b/packages/docs/src/examples/v-card/prop-variant.vue new file mode 100644 index 0000000..d32f163 --- /dev/null +++ b/packages/docs/src/examples/v-card/prop-variant.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/docs/src/examples/v-card/slot-prepend-append.vue b/packages/docs/src/examples/v-card/slot-prepend-append.vue new file mode 100644 index 0000000..934dcce --- /dev/null +++ b/packages/docs/src/examples/v-card/slot-prepend-append.vue @@ -0,0 +1,66 @@ + diff --git a/packages/docs/src/examples/v-card/usage.vue b/packages/docs/src/examples/v-card/usage.vue new file mode 100644 index 0000000..c764ff7 --- /dev/null +++ b/packages/docs/src/examples/v-card/usage.vue @@ -0,0 +1,68 @@ + + + diff --git a/packages/docs/src/examples/v-carousel/prop-custom-icons.vue b/packages/docs/src/examples/v-carousel/prop-custom-icons.vue new file mode 100644 index 0000000..fde68e1 --- /dev/null +++ b/packages/docs/src/examples/v-carousel/prop-custom-icons.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/prop-custom-transition.vue b/packages/docs/src/examples/v-carousel/prop-custom-transition.vue new file mode 100644 index 0000000..cd600dc --- /dev/null +++ b/packages/docs/src/examples/v-carousel/prop-custom-transition.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/prop-cycle.vue b/packages/docs/src/examples/v-carousel/prop-cycle.vue new file mode 100644 index 0000000..fde566d --- /dev/null +++ b/packages/docs/src/examples/v-carousel/prop-cycle.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/prop-hide-controls.vue b/packages/docs/src/examples/v-carousel/prop-hide-controls.vue new file mode 100644 index 0000000..05fa7ab --- /dev/null +++ b/packages/docs/src/examples/v-carousel/prop-hide-controls.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/prop-hide-delimiters.vue b/packages/docs/src/examples/v-carousel/prop-hide-delimiters.vue new file mode 100644 index 0000000..34f69f4 --- /dev/null +++ b/packages/docs/src/examples/v-carousel/prop-hide-delimiters.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/prop-model.vue b/packages/docs/src/examples/v-carousel/prop-model.vue new file mode 100644 index 0000000..f1ce144 --- /dev/null +++ b/packages/docs/src/examples/v-carousel/prop-model.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/prop-progress.vue b/packages/docs/src/examples/v-carousel/prop-progress.vue new file mode 100644 index 0000000..563ed68 --- /dev/null +++ b/packages/docs/src/examples/v-carousel/prop-progress.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/slots-next-prev.vue b/packages/docs/src/examples/v-carousel/slots-next-prev.vue new file mode 100644 index 0000000..b8161d6 --- /dev/null +++ b/packages/docs/src/examples/v-carousel/slots-next-prev.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/packages/docs/src/examples/v-carousel/usage.vue b/packages/docs/src/examples/v-carousel/usage.vue new file mode 100644 index 0000000..a34810e --- /dev/null +++ b/packages/docs/src/examples/v-carousel/usage.vue @@ -0,0 +1,62 @@ + + + diff --git a/packages/docs/src/examples/v-checkbox/misc-inline-textfield.vue b/packages/docs/src/examples/v-checkbox/misc-inline-textfield.vue new file mode 100644 index 0000000..72ef2dc --- /dev/null +++ b/packages/docs/src/examples/v-checkbox/misc-inline-textfield.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-checkbox/prop-colors.vue b/packages/docs/src/examples/v-checkbox/prop-colors.vue new file mode 100644 index 0000000..18116a5 --- /dev/null +++ b/packages/docs/src/examples/v-checkbox/prop-colors.vue @@ -0,0 +1,145 @@ + + + + + diff --git a/packages/docs/src/examples/v-checkbox/prop-model-as-array.vue b/packages/docs/src/examples/v-checkbox/prop-model-as-array.vue new file mode 100644 index 0000000..23ac98a --- /dev/null +++ b/packages/docs/src/examples/v-checkbox/prop-model-as-array.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/docs/src/examples/v-checkbox/prop-model-as-boolean.vue b/packages/docs/src/examples/v-checkbox/prop-model-as-boolean.vue new file mode 100644 index 0000000..be2cf21 --- /dev/null +++ b/packages/docs/src/examples/v-checkbox/prop-model-as-boolean.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-checkbox/prop-states.vue b/packages/docs/src/examples/v-checkbox/prop-states.vue new file mode 100644 index 0000000..af33907 --- /dev/null +++ b/packages/docs/src/examples/v-checkbox/prop-states.vue @@ -0,0 +1,58 @@ + diff --git a/packages/docs/src/examples/v-checkbox/slot-label.vue b/packages/docs/src/examples/v-checkbox/slot-label.vue new file mode 100644 index 0000000..eb5096b --- /dev/null +++ b/packages/docs/src/examples/v-checkbox/slot-label.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/packages/docs/src/examples/v-checkbox/usage.vue b/packages/docs/src/examples/v-checkbox/usage.vue new file mode 100644 index 0000000..3f6eed5 --- /dev/null +++ b/packages/docs/src/examples/v-checkbox/usage.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/docs/src/examples/v-chip-group/misc-product-card.vue b/packages/docs/src/examples/v-chip-group/misc-product-card.vue new file mode 100644 index 0000000..55d8634 --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/misc-product-card.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip-group/misc-reddit-categories.vue b/packages/docs/src/examples/v-chip-group/misc-reddit-categories.vue new file mode 100644 index 0000000..ba84cbe --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/misc-reddit-categories.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue b/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue new file mode 100644 index 0000000..b86a45f --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/misc-toothbrush-card.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip-group/prop-column.vue b/packages/docs/src/examples/v-chip-group/prop-column.vue new file mode 100644 index 0000000..61b5d31 --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/prop-column.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip-group/prop-filter.vue b/packages/docs/src/examples/v-chip-group/prop-filter.vue new file mode 100644 index 0000000..1d2b668 --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/prop-filter.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip-group/prop-mandatory.vue b/packages/docs/src/examples/v-chip-group/prop-mandatory.vue new file mode 100644 index 0000000..5be56db --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/prop-mandatory.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip-group/prop-multiple.vue b/packages/docs/src/examples/v-chip-group/prop-multiple.vue new file mode 100644 index 0000000..4f4b4e7 --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/prop-multiple.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip-group/usage.vue b/packages/docs/src/examples/v-chip-group/usage.vue new file mode 100644 index 0000000..cdc9a63 --- /dev/null +++ b/packages/docs/src/examples/v-chip-group/usage.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/docs/src/examples/v-chip/event-action-chips.vue b/packages/docs/src/examples/v-chip/event-action-chips.vue new file mode 100644 index 0000000..6303aa9 --- /dev/null +++ b/packages/docs/src/examples/v-chip/event-action-chips.vue @@ -0,0 +1,73 @@ + + + diff --git a/packages/docs/src/examples/v-chip/misc-custom-list.vue b/packages/docs/src/examples/v-chip/misc-custom-list.vue new file mode 100644 index 0000000..8377112 --- /dev/null +++ b/packages/docs/src/examples/v-chip/misc-custom-list.vue @@ -0,0 +1,241 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip/misc-expandable.vue b/packages/docs/src/examples/v-chip/misc-expandable.vue new file mode 100644 index 0000000..389c5b5 --- /dev/null +++ b/packages/docs/src/examples/v-chip/misc-expandable.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip/misc-filtering.vue b/packages/docs/src/examples/v-chip/misc-filtering.vue new file mode 100644 index 0000000..2f2d73c --- /dev/null +++ b/packages/docs/src/examples/v-chip/misc-filtering.vue @@ -0,0 +1,194 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip/misc-in-selects.vue b/packages/docs/src/examples/v-chip/misc-in-selects.vue new file mode 100644 index 0000000..861c301 --- /dev/null +++ b/packages/docs/src/examples/v-chip/misc-in-selects.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip/prop-closable.vue b/packages/docs/src/examples/v-chip/prop-closable.vue new file mode 100644 index 0000000..2e9e793 --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-closable.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip/prop-colored.vue b/packages/docs/src/examples/v-chip/prop-colored.vue new file mode 100644 index 0000000..8069b9f --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-colored.vue @@ -0,0 +1,46 @@ + + diff --git a/packages/docs/src/examples/v-chip/prop-draggable.vue b/packages/docs/src/examples/v-chip/prop-draggable.vue new file mode 100644 index 0000000..c8c22ce --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-draggable.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-chip/prop-filter.vue b/packages/docs/src/examples/v-chip/prop-filter.vue new file mode 100644 index 0000000..5947372 --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-filter.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/docs/src/examples/v-chip/prop-label.vue b/packages/docs/src/examples/v-chip/prop-label.vue new file mode 100644 index 0000000..420ae6a --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-label.vue @@ -0,0 +1,38 @@ + diff --git a/packages/docs/src/examples/v-chip/prop-no-ripple.vue b/packages/docs/src/examples/v-chip/prop-no-ripple.vue new file mode 100644 index 0000000..633f37c --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-no-ripple.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-chip/prop-outlined.vue b/packages/docs/src/examples/v-chip/prop-outlined.vue new file mode 100644 index 0000000..ab0a951 --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-outlined.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-chip/prop-sizes.vue b/packages/docs/src/examples/v-chip/prop-sizes.vue new file mode 100644 index 0000000..005c1ac --- /dev/null +++ b/packages/docs/src/examples/v-chip/prop-sizes.vue @@ -0,0 +1,73 @@ + + diff --git a/packages/docs/src/examples/v-chip/slot-icon.vue b/packages/docs/src/examples/v-chip/slot-icon.vue new file mode 100644 index 0000000..073f471 --- /dev/null +++ b/packages/docs/src/examples/v-chip/slot-icon.vue @@ -0,0 +1,62 @@ + diff --git a/packages/docs/src/examples/v-chip/usage.vue b/packages/docs/src/examples/v-chip/usage.vue new file mode 100644 index 0000000..53eb037 --- /dev/null +++ b/packages/docs/src/examples/v-chip/usage.vue @@ -0,0 +1,62 @@ + + + diff --git a/packages/docs/src/examples/v-click-outside/option-close-on-outside-click.vue b/packages/docs/src/examples/v-click-outside/option-close-on-outside-click.vue new file mode 100644 index 0000000..bb6640a --- /dev/null +++ b/packages/docs/src/examples/v-click-outside/option-close-on-outside-click.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/packages/docs/src/examples/v-click-outside/option-include.vue b/packages/docs/src/examples/v-click-outside/option-include.vue new file mode 100644 index 0000000..53b5a37 --- /dev/null +++ b/packages/docs/src/examples/v-click-outside/option-include.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/packages/docs/src/examples/v-click-outside/usage.vue b/packages/docs/src/examples/v-click-outside/usage.vue new file mode 100644 index 0000000..b44b49d --- /dev/null +++ b/packages/docs/src/examples/v-click-outside/usage.vue @@ -0,0 +1,30 @@ + + + diff --git a/packages/docs/src/examples/v-color-picker/prop-canvas.vue b/packages/docs/src/examples/v-color-picker/prop-canvas.vue new file mode 100644 index 0000000..30128fd --- /dev/null +++ b/packages/docs/src/examples/v-color-picker/prop-canvas.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/examples/v-color-picker/prop-elevation.vue b/packages/docs/src/examples/v-color-picker/prop-elevation.vue new file mode 100644 index 0000000..6f9b876 --- /dev/null +++ b/packages/docs/src/examples/v-color-picker/prop-elevation.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/docs/src/examples/v-color-picker/prop-mode.vue b/packages/docs/src/examples/v-color-picker/prop-mode.vue new file mode 100644 index 0000000..4bf2485 --- /dev/null +++ b/packages/docs/src/examples/v-color-picker/prop-mode.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/docs/src/examples/v-color-picker/prop-model.vue b/packages/docs/src/examples/v-color-picker/prop-model.vue new file mode 100644 index 0000000..0202e18 --- /dev/null +++ b/packages/docs/src/examples/v-color-picker/prop-model.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/docs/src/examples/v-color-picker/prop-swatches.vue b/packages/docs/src/examples/v-color-picker/prop-swatches.vue new file mode 100644 index 0000000..9a7b6d6 --- /dev/null +++ b/packages/docs/src/examples/v-color-picker/prop-swatches.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/docs/src/examples/v-color-picker/usage.vue b/packages/docs/src/examples/v-color-picker/usage.vue new file mode 100644 index 0000000..cc53a2c --- /dev/null +++ b/packages/docs/src/examples/v-color-picker/usage.vue @@ -0,0 +1,42 @@ + + + diff --git a/packages/docs/src/examples/v-combobox/misc-advanced.vue b/packages/docs/src/examples/v-combobox/misc-advanced.vue new file mode 100644 index 0000000..0b945b7 --- /dev/null +++ b/packages/docs/src/examples/v-combobox/misc-advanced.vue @@ -0,0 +1,158 @@ + + + diff --git a/packages/docs/src/examples/v-combobox/prop-density.vue b/packages/docs/src/examples/v-combobox/prop-density.vue new file mode 100644 index 0000000..c391ef4 --- /dev/null +++ b/packages/docs/src/examples/v-combobox/prop-density.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/docs/src/examples/v-combobox/prop-multiple.vue b/packages/docs/src/examples/v-combobox/prop-multiple.vue new file mode 100644 index 0000000..d76923c --- /dev/null +++ b/packages/docs/src/examples/v-combobox/prop-multiple.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/packages/docs/src/examples/v-combobox/slot-no-data.vue b/packages/docs/src/examples/v-combobox/slot-no-data.vue new file mode 100644 index 0000000..4d0a881 --- /dev/null +++ b/packages/docs/src/examples/v-combobox/slot-no-data.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/docs/src/examples/v-combobox/usage.vue b/packages/docs/src/examples/v-combobox/usage.vue new file mode 100644 index 0000000..15d1f3e --- /dev/null +++ b/packages/docs/src/examples/v-combobox/usage.vue @@ -0,0 +1,47 @@ + + + diff --git a/packages/docs/src/examples/v-confirm-edit/misc-date-picker.vue b/packages/docs/src/examples/v-confirm-edit/misc-date-picker.vue new file mode 100644 index 0000000..5c818ed --- /dev/null +++ b/packages/docs/src/examples/v-confirm-edit/misc-date-picker.vue @@ -0,0 +1,24 @@ + + + diff --git a/packages/docs/src/examples/v-confirm-edit/usage.vue b/packages/docs/src/examples/v-confirm-edit/usage.vue new file mode 100644 index 0000000..e62a718 --- /dev/null +++ b/packages/docs/src/examples/v-confirm-edit/usage.vue @@ -0,0 +1,92 @@ + + + diff --git a/packages/docs/src/examples/v-data-iterator/misc-filter.vue b/packages/docs/src/examples/v-data-iterator/misc-filter.vue new file mode 100644 index 0000000..d671d17 --- /dev/null +++ b/packages/docs/src/examples/v-data-iterator/misc-filter.vue @@ -0,0 +1,220 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-iterator/slot-default.vue b/packages/docs/src/examples/v-data-iterator/slot-default.vue new file mode 100644 index 0000000..dfd76a7 --- /dev/null +++ b/packages/docs/src/examples/v-data-iterator/slot-default.vue @@ -0,0 +1,179 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue b/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue new file mode 100644 index 0000000..bc843ae --- /dev/null +++ b/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue @@ -0,0 +1,483 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-iterator/slot-loader.vue b/packages/docs/src/examples/v-data-iterator/slot-loader.vue new file mode 100644 index 0000000..f846676 --- /dev/null +++ b/packages/docs/src/examples/v-data-iterator/slot-loader.vue @@ -0,0 +1,443 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-iterator/usage.vue b/packages/docs/src/examples/v-data-iterator/usage.vue new file mode 100644 index 0000000..14f157e --- /dev/null +++ b/packages/docs/src/examples/v-data-iterator/usage.vue @@ -0,0 +1,84 @@ + + + diff --git a/packages/docs/src/examples/v-data-table/headers-multiple.vue b/packages/docs/src/examples/v-data-table/headers-multiple.vue new file mode 100644 index 0000000..e773cf9 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/headers-multiple.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/misc-crud.vue b/packages/docs/src/examples/v-data-table/misc-crud.vue new file mode 100644 index 0000000..a4c9378 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/misc-crud.vue @@ -0,0 +1,482 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue b/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue new file mode 100644 index 0000000..47f3e69 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue @@ -0,0 +1,323 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/misc-expand.vue b/packages/docs/src/examples/v-data-table/misc-expand.vue new file mode 100644 index 0000000..5d4a47d --- /dev/null +++ b/packages/docs/src/examples/v-data-table/misc-expand.vue @@ -0,0 +1,230 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/misc-external-paginate.vue b/packages/docs/src/examples/v-data-table/misc-external-paginate.vue new file mode 100644 index 0000000..892da54 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/misc-external-paginate.vue @@ -0,0 +1,246 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/misc-external-sort.vue b/packages/docs/src/examples/v-data-table/misc-external-sort.vue new file mode 100644 index 0000000..ee425a4 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/misc-external-sort.vue @@ -0,0 +1,247 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue new file mode 100644 index 0000000..d79ccfb --- /dev/null +++ b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue @@ -0,0 +1,291 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-custom-filter.vue b/packages/docs/src/examples/v-data-table/prop-custom-filter.vue new file mode 100644 index 0000000..019bcbb --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-custom-filter.vue @@ -0,0 +1,268 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-dense.vue b/packages/docs/src/examples/v-data-table/prop-dense.vue new file mode 100644 index 0000000..78f2000 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-dense.vue @@ -0,0 +1,177 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-filterable.vue b/packages/docs/src/examples/v-data-table/prop-filterable.vue new file mode 100644 index 0000000..8024b11 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-filterable.vue @@ -0,0 +1,150 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-footer-props.vue b/packages/docs/src/examples/v-data-table/prop-footer-props.vue new file mode 100644 index 0000000..63d36a0 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-footer-props.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-grouping.vue b/packages/docs/src/examples/v-data-table/prop-grouping.vue new file mode 100644 index 0000000..7ea7864 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-grouping.vue @@ -0,0 +1,149 @@ + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-headers-sort-raw.vue b/packages/docs/src/examples/v-data-table/prop-headers-sort-raw.vue new file mode 100644 index 0000000..11cb855 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-headers-sort-raw.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue b/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue new file mode 100644 index 0000000..f00803b --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue @@ -0,0 +1,206 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-item-selectable.vue b/packages/docs/src/examples/v-data-table/prop-item-selectable.vue new file mode 100644 index 0000000..54c47be --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-item-selectable.vue @@ -0,0 +1,230 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-item-value.vue b/packages/docs/src/examples/v-data-table/prop-item-value.vue new file mode 100644 index 0000000..19c6f3a --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-item-value.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-loading.vue b/packages/docs/src/examples/v-data-table/prop-loading.vue new file mode 100644 index 0000000..56fdb27 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-loading.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-data-table/prop-multi-sort.vue b/packages/docs/src/examples/v-data-table/prop-multi-sort.vue new file mode 100644 index 0000000..853509b --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-multi-sort.vue @@ -0,0 +1,210 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-return-object.vue b/packages/docs/src/examples/v-data-table/prop-return-object.vue new file mode 100644 index 0000000..24cd4b4 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-return-object.vue @@ -0,0 +1,218 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-row-selection.vue b/packages/docs/src/examples/v-data-table/prop-row-selection.vue new file mode 100644 index 0000000..d7c6370 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-row-selection.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-search.vue b/packages/docs/src/examples/v-data-table/prop-search.vue new file mode 100644 index 0000000..2014006 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-search.vue @@ -0,0 +1,229 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-select-strategy.vue b/packages/docs/src/examples/v-data-table/prop-select-strategy.vue new file mode 100644 index 0000000..2df39ac --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-select-strategy.vue @@ -0,0 +1,209 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/prop-sort-by.vue b/packages/docs/src/examples/v-data-table/prop-sort-by.vue new file mode 100644 index 0000000..c503368 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-sort-by.vue @@ -0,0 +1,216 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/server-search.vue b/packages/docs/src/examples/v-data-table/server-search.vue new file mode 100644 index 0000000..a91ed5b --- /dev/null +++ b/packages/docs/src/examples/v-data-table/server-search.vue @@ -0,0 +1,347 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/server.vue b/packages/docs/src/examples/v-data-table/server.vue new file mode 100644 index 0000000..cf3d037 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/server.vue @@ -0,0 +1,273 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-group-header.vue b/packages/docs/src/examples/v-data-table/slot-group-header.vue new file mode 100644 index 0000000..1d02cf3 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-group-header.vue @@ -0,0 +1,259 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-header.vue b/packages/docs/src/examples/v-data-table/slot-header.vue new file mode 100644 index 0000000..697cc5d --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-header.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-headers.vue b/packages/docs/src/examples/v-data-table/slot-headers.vue new file mode 100644 index 0000000..fbee93f --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-headers.vue @@ -0,0 +1,235 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue b/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue new file mode 100644 index 0000000..f4dd178 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue @@ -0,0 +1,200 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-item-key.vue b/packages/docs/src/examples/v-data-table/slot-item-key.vue new file mode 100644 index 0000000..0c286e1 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-item-key.vue @@ -0,0 +1,535 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-item.vue b/packages/docs/src/examples/v-data-table/slot-item.vue new file mode 100644 index 0000000..4d46dde --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-item.vue @@ -0,0 +1,220 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-loading.vue b/packages/docs/src/examples/v-data-table/slot-loading.vue new file mode 100644 index 0000000..0be77d8 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-loading.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/slot-main.vue b/packages/docs/src/examples/v-data-table/slot-main.vue new file mode 100644 index 0000000..091d4b4 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-main.vue @@ -0,0 +1,298 @@ + + + diff --git a/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue b/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue new file mode 100644 index 0000000..4bdcdb0 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/usage.vue b/packages/docs/src/examples/v-data-table/usage.vue new file mode 100644 index 0000000..3a67557 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/usage.vue @@ -0,0 +1,110 @@ + + + diff --git a/packages/docs/src/examples/v-data-table/virtual.vue b/packages/docs/src/examples/v-data-table/virtual.vue new file mode 100644 index 0000000..e2b1c2e --- /dev/null +++ b/packages/docs/src/examples/v-data-table/virtual.vue @@ -0,0 +1,199 @@ + + + + + diff --git a/packages/docs/src/examples/v-data-table/virtualized.vue b/packages/docs/src/examples/v-data-table/virtualized.vue new file mode 100644 index 0000000..134410b --- /dev/null +++ b/packages/docs/src/examples/v-data-table/virtualized.vue @@ -0,0 +1,228 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/misc-passenger.vue b/packages/docs/src/examples/v-date-input/misc-passenger.vue new file mode 100644 index 0000000..546a520 --- /dev/null +++ b/packages/docs/src/examples/v-date-input/misc-passenger.vue @@ -0,0 +1,53 @@ + diff --git a/packages/docs/src/examples/v-date-input/prop-model.vue b/packages/docs/src/examples/v-date-input/prop-model.vue new file mode 100644 index 0000000..5123cc8 --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-model.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/prop-multiple-range.vue b/packages/docs/src/examples/v-date-input/prop-multiple-range.vue new file mode 100644 index 0000000..db613aa --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-multiple-range.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/prop-multiple.vue b/packages/docs/src/examples/v-date-input/prop-multiple.vue new file mode 100644 index 0000000..15202ef --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-multiple.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue b/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue new file mode 100644 index 0000000..427c4be --- /dev/null +++ b/packages/docs/src/examples/v-date-input/prop-prepend-icon.vue @@ -0,0 +1,22 @@ + diff --git a/packages/docs/src/examples/v-date-input/usage.vue b/packages/docs/src/examples/v-date-input/usage.vue new file mode 100644 index 0000000..93e6dfd --- /dev/null +++ b/packages/docs/src/examples/v-date-input/usage.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue new file mode 100644 index 0000000..ea26f3d --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/misc-internationalization.vue b/packages/docs/src/examples/v-date-picker-month/misc-internationalization.vue new file mode 100644 index 0000000..6ccc243 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/misc-internationalization.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/misc-orientation.vue b/packages/docs/src/examples/v-date-picker-month/misc-orientation.vue new file mode 100644 index 0000000..e50d7e9 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/misc-orientation.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/prop-allowed-months.vue b/packages/docs/src/examples/v-date-picker-month/prop-allowed-months.vue new file mode 100644 index 0000000..3196b32 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/prop-allowed-months.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/prop-colors.vue b/packages/docs/src/examples/v-date-picker-month/prop-colors.vue new file mode 100644 index 0000000..7a513b7 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/prop-colors.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/prop-icons.vue b/packages/docs/src/examples/v-date-picker-month/prop-icons.vue new file mode 100644 index 0000000..fcfd8d2 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/prop-icons.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/prop-multiple.vue b/packages/docs/src/examples/v-date-picker-month/prop-multiple.vue new file mode 100644 index 0000000..fe6fb24 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/prop-multiple.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/prop-readonly.vue b/packages/docs/src/examples/v-date-picker-month/prop-readonly.vue new file mode 100644 index 0000000..0be98e0 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/prop-readonly.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/prop-show-current.vue b/packages/docs/src/examples/v-date-picker-month/prop-show-current.vue new file mode 100644 index 0000000..8db38cc --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/prop-show-current.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/prop-width.vue b/packages/docs/src/examples/v-date-picker-month/prop-width.vue new file mode 100644 index 0000000..283aeca --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/prop-width.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker-month/usage.vue b/packages/docs/src/examples/v-date-picker-month/usage.vue new file mode 100644 index 0000000..e037a50 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker-month/usage.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/docs/src/examples/v-date-picker/event-button-events.vue b/packages/docs/src/examples/v-date-picker/event-button-events.vue new file mode 100644 index 0000000..6030bd7 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/event-button-events.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/event-events.vue b/packages/docs/src/examples/v-date-picker/event-events.vue new file mode 100644 index 0000000..bc51ecb --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/event-events.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/guide-locale.vue b/packages/docs/src/examples/v-date-picker/guide-locale.vue new file mode 100644 index 0000000..9074cee --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/guide-locale.vue @@ -0,0 +1,39 @@ + + + +{ + "imports": { + "vuetify/locale": "https://cdn.jsdelivr.net/npm/vuetify/lib/locale/index.mjs/+esm", + "@date-io/date-fns": "https://cdn.jsdelivr.net/npm/@date-io/date-fns@2.17.0/build/index.esm.js/+esm", + "date-fns/locale/en-US": "https://cdn.jsdelivr.net/npm/date-fns@2.30.0/esm/locale/en-US/index.js/+esm", + "date-fns/locale/sv": "https://cdn.jsdelivr.net/npm/date-fns@2.30.0/esm/locale/sv/index.js/+esm" + } +} + + + +import { createVuetify } from 'vuetify' +import { sv } from 'vuetify/locale' +import DateFnsAdapter from '@date-io/date-fns' +import enUS from 'date-fns/locale/en-US' +import svSE from 'date-fns/locale/sv' + +export const vuetify = createVuetify({ + locale: { + messages: { sv }, + }, + date: { + adapter: DateFnsAdapter, + locale: { + en: enUS, + sv: svSE, + }, + }, +}) + diff --git a/packages/docs/src/examples/v-date-picker/misc-birthday.vue b/packages/docs/src/examples/v-date-picker/misc-birthday.vue new file mode 100644 index 0000000..6ff68bf --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/misc-birthday.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue new file mode 100644 index 0000000..591a77e --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue @@ -0,0 +1,148 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue b/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue new file mode 100644 index 0000000..184eef8 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue @@ -0,0 +1,108 @@ + + + + + + + + { + "imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js", + "date-fns": "https://cdn.jsdelivr.net/npm/date-fns@2.30.0/esm/index.js/+esm" + } + } + diff --git a/packages/docs/src/examples/v-date-picker/misc-formatting.vue b/packages/docs/src/examples/v-date-picker/misc-formatting.vue new file mode 100644 index 0000000..e799f45 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/misc-formatting.vue @@ -0,0 +1,140 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/misc-internationalization.vue b/packages/docs/src/examples/v-date-picker/misc-internationalization.vue new file mode 100644 index 0000000..010fc7c --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/misc-internationalization.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/misc-orientation.vue b/packages/docs/src/examples/v-date-picker/misc-orientation.vue new file mode 100644 index 0000000..ecf7cdb --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/misc-orientation.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-allowed-dates.vue b/packages/docs/src/examples/v-date-picker/prop-allowed-dates.vue new file mode 100644 index 0000000..5c40e7e --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-allowed-dates.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-colors.vue b/packages/docs/src/examples/v-date-picker/prop-colors.vue new file mode 100644 index 0000000..c8c0497 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-colors.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-date-picker/prop-elevation.vue b/packages/docs/src/examples/v-date-picker/prop-elevation.vue new file mode 100644 index 0000000..381ebdb --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-elevation.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-date-picker/prop-icons.vue b/packages/docs/src/examples/v-date-picker/prop-icons.vue new file mode 100644 index 0000000..a0e59e5 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-icons.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-multiple.vue b/packages/docs/src/examples/v-date-picker/prop-multiple.vue new file mode 100644 index 0000000..ed28f8c --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-multiple.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-picker-date.vue b/packages/docs/src/examples/v-date-picker/prop-picker-date.vue new file mode 100644 index 0000000..6e9f079 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-picker-date.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-range.vue b/packages/docs/src/examples/v-date-picker/prop-range.vue new file mode 100644 index 0000000..f328b45 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-range.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-readonly.vue b/packages/docs/src/examples/v-date-picker/prop-readonly.vue new file mode 100644 index 0000000..3addea3 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-readonly.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-show-adjacent-months.vue b/packages/docs/src/examples/v-date-picker/prop-show-adjacent-months.vue new file mode 100644 index 0000000..8a51440 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-show-adjacent-months.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-date-picker/prop-show-current.vue b/packages/docs/src/examples/v-date-picker/prop-show-current.vue new file mode 100644 index 0000000..c5cac95 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-show-current.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-date-picker/prop-width.vue b/packages/docs/src/examples/v-date-picker/prop-width.vue new file mode 100644 index 0000000..030e146 --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/prop-width.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-date-picker/usage.vue b/packages/docs/src/examples/v-date-picker/usage.vue new file mode 100644 index 0000000..ea12adc --- /dev/null +++ b/packages/docs/src/examples/v-date-picker/usage.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/docs/src/examples/v-defaults-provider/prop-defaults.vue b/packages/docs/src/examples/v-defaults-provider/prop-defaults.vue new file mode 100644 index 0000000..371cc86 --- /dev/null +++ b/packages/docs/src/examples/v-defaults-provider/prop-defaults.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/packages/docs/src/examples/v-defaults-provider/usage.vue b/packages/docs/src/examples/v-defaults-provider/usage.vue new file mode 100644 index 0000000..871b57f --- /dev/null +++ b/packages/docs/src/examples/v-defaults-provider/usage.vue @@ -0,0 +1,54 @@ + + + diff --git a/packages/docs/src/examples/v-dialog/misc-form.vue b/packages/docs/src/examples/v-dialog/misc-form.vue new file mode 100644 index 0000000..6a115ea --- /dev/null +++ b/packages/docs/src/examples/v-dialog/misc-form.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue b/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue new file mode 100644 index 0000000..4d53dd8 --- /dev/null +++ b/packages/docs/src/examples/v-dialog/misc-invite-dialog.vue @@ -0,0 +1,125 @@ + diff --git a/packages/docs/src/examples/v-dialog/misc-loader.vue b/packages/docs/src/examples/v-dialog/misc-loader.vue new file mode 100644 index 0000000..b977caf --- /dev/null +++ b/packages/docs/src/examples/v-dialog/misc-loader.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/misc-nesting.vue b/packages/docs/src/examples/v-dialog/misc-nesting.vue new file mode 100644 index 0000000..6dce1e8 --- /dev/null +++ b/packages/docs/src/examples/v-dialog/misc-nesting.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/misc-overflowed.vue b/packages/docs/src/examples/v-dialog/misc-overflowed.vue new file mode 100644 index 0000000..0616fc5 --- /dev/null +++ b/packages/docs/src/examples/v-dialog/misc-overflowed.vue @@ -0,0 +1,70 @@ + diff --git a/packages/docs/src/examples/v-dialog/misc-without-activator.vue b/packages/docs/src/examples/v-dialog/misc-without-activator.vue new file mode 100644 index 0000000..e796acd --- /dev/null +++ b/packages/docs/src/examples/v-dialog/misc-without-activator.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/prop-activator.vue b/packages/docs/src/examples/v-dialog/prop-activator.vue new file mode 100644 index 0000000..85bdb21 --- /dev/null +++ b/packages/docs/src/examples/v-dialog/prop-activator.vue @@ -0,0 +1,134 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/prop-fullscreen.vue b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue new file mode 100644 index 0000000..7e0e989 --- /dev/null +++ b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/prop-model.vue b/packages/docs/src/examples/v-dialog/prop-model.vue new file mode 100644 index 0000000..356d4ab --- /dev/null +++ b/packages/docs/src/examples/v-dialog/prop-model.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/prop-persistent.vue b/packages/docs/src/examples/v-dialog/prop-persistent.vue new file mode 100644 index 0000000..dae79ee --- /dev/null +++ b/packages/docs/src/examples/v-dialog/prop-persistent.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/prop-scrollable.vue b/packages/docs/src/examples/v-dialog/prop-scrollable.vue new file mode 100644 index 0000000..8d0bda4 --- /dev/null +++ b/packages/docs/src/examples/v-dialog/prop-scrollable.vue @@ -0,0 +1,159 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/prop-transitions.vue b/packages/docs/src/examples/v-dialog/prop-transitions.vue new file mode 100644 index 0000000..bf760a3 --- /dev/null +++ b/packages/docs/src/examples/v-dialog/prop-transitions.vue @@ -0,0 +1,68 @@ + diff --git a/packages/docs/src/examples/v-dialog/slot-default.vue b/packages/docs/src/examples/v-dialog/slot-default.vue new file mode 100644 index 0000000..356d4ab --- /dev/null +++ b/packages/docs/src/examples/v-dialog/slot-default.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-dialog/usage.vue b/packages/docs/src/examples/v-dialog/usage.vue new file mode 100644 index 0000000..ba6e24a --- /dev/null +++ b/packages/docs/src/examples/v-dialog/usage.vue @@ -0,0 +1,85 @@ + + + diff --git a/packages/docs/src/examples/v-divider/misc-portrait-view.vue b/packages/docs/src/examples/v-divider/misc-portrait-view.vue new file mode 100644 index 0000000..7920b75 --- /dev/null +++ b/packages/docs/src/examples/v-divider/misc-portrait-view.vue @@ -0,0 +1,65 @@ + diff --git a/packages/docs/src/examples/v-divider/misc-subheaders.vue b/packages/docs/src/examples/v-divider/misc-subheaders.vue new file mode 100644 index 0000000..ba36be4 --- /dev/null +++ b/packages/docs/src/examples/v-divider/misc-subheaders.vue @@ -0,0 +1,170 @@ + + + + + diff --git a/packages/docs/src/examples/v-divider/prop-inset.vue b/packages/docs/src/examples/v-divider/prop-inset.vue new file mode 100644 index 0000000..cf85576 --- /dev/null +++ b/packages/docs/src/examples/v-divider/prop-inset.vue @@ -0,0 +1,44 @@ + diff --git a/packages/docs/src/examples/v-divider/prop-vertical-inset.vue b/packages/docs/src/examples/v-divider/prop-vertical-inset.vue new file mode 100644 index 0000000..0fdbc63 --- /dev/null +++ b/packages/docs/src/examples/v-divider/prop-vertical-inset.vue @@ -0,0 +1,49 @@ + diff --git a/packages/docs/src/examples/v-divider/prop-vertical.vue b/packages/docs/src/examples/v-divider/prop-vertical.vue new file mode 100644 index 0000000..f734553 --- /dev/null +++ b/packages/docs/src/examples/v-divider/prop-vertical.vue @@ -0,0 +1,35 @@ + diff --git a/packages/docs/src/examples/v-divider/usage.vue b/packages/docs/src/examples/v-divider/usage.vue new file mode 100644 index 0000000..0b1291f --- /dev/null +++ b/packages/docs/src/examples/v-divider/usage.vue @@ -0,0 +1,58 @@ + + + diff --git a/packages/docs/src/examples/v-empty-state/misc-astro-cat.vue b/packages/docs/src/examples/v-empty-state/misc-astro-cat.vue new file mode 100644 index 0000000..e80e5d9 --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/misc-astro-cat.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/packages/docs/src/examples/v-empty-state/misc-astro-dog.vue b/packages/docs/src/examples/v-empty-state/misc-astro-dog.vue new file mode 100644 index 0000000..bb7268c --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/misc-astro-dog.vue @@ -0,0 +1,59 @@ + diff --git a/packages/docs/src/examples/v-empty-state/prop-actions.vue b/packages/docs/src/examples/v-empty-state/prop-actions.vue new file mode 100644 index 0000000..fbee31f --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/prop-actions.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-empty-state/prop-content.vue b/packages/docs/src/examples/v-empty-state/prop-content.vue new file mode 100644 index 0000000..0a1aa52 --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/prop-content.vue @@ -0,0 +1,14 @@ + + + diff --git a/packages/docs/src/examples/v-empty-state/prop-media.vue b/packages/docs/src/examples/v-empty-state/prop-media.vue new file mode 100644 index 0000000..acb1b54 --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/prop-media.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-empty-state/slot-actions.vue b/packages/docs/src/examples/v-empty-state/slot-actions.vue new file mode 100644 index 0000000..c2eff21 --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/slot-actions.vue @@ -0,0 +1,36 @@ + diff --git a/packages/docs/src/examples/v-empty-state/slot-default.vue b/packages/docs/src/examples/v-empty-state/slot-default.vue new file mode 100644 index 0000000..51cc9ac --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/slot-default.vue @@ -0,0 +1,51 @@ + diff --git a/packages/docs/src/examples/v-empty-state/slot-title.vue b/packages/docs/src/examples/v-empty-state/slot-title.vue new file mode 100644 index 0000000..ea50826 --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/slot-title.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/v-empty-state/usage.vue b/packages/docs/src/examples/v-empty-state/usage.vue new file mode 100644 index 0000000..521a36b --- /dev/null +++ b/packages/docs/src/examples/v-empty-state/usage.vue @@ -0,0 +1,35 @@ + + + diff --git a/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue b/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue new file mode 100644 index 0000000..a66ba6c --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue @@ -0,0 +1,190 @@ + + + + + diff --git a/packages/docs/src/examples/v-expansion-panels/misc-custom-icons.vue b/packages/docs/src/examples/v-expansion-panels/misc-custom-icons.vue new file mode 100644 index 0000000..3998a13 --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/misc-custom-icons.vue @@ -0,0 +1,51 @@ + diff --git a/packages/docs/src/examples/v-expansion-panels/prop-disabled.vue b/packages/docs/src/examples/v-expansion-panels/prop-disabled.vue new file mode 100644 index 0000000..ef11d6e --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/prop-disabled.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-expansion-panels/prop-focusable.vue b/packages/docs/src/examples/v-expansion-panels/prop-focusable.vue new file mode 100644 index 0000000..cff3d0e --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/prop-focusable.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/v-expansion-panels/prop-model.vue b/packages/docs/src/examples/v-expansion-panels/prop-model.vue new file mode 100644 index 0000000..1dc94e4 --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/prop-model.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/packages/docs/src/examples/v-expansion-panels/prop-readonly.vue b/packages/docs/src/examples/v-expansion-panels/prop-readonly.vue new file mode 100644 index 0000000..74683a3 --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/prop-readonly.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-expansion-panels/prop-variant.vue b/packages/docs/src/examples/v-expansion-panels/prop-variant.vue new file mode 100644 index 0000000..231cc47 --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/prop-variant.vue @@ -0,0 +1,46 @@ + diff --git a/packages/docs/src/examples/v-expansion-panels/usage.vue b/packages/docs/src/examples/v-expansion-panels/usage.vue new file mode 100644 index 0000000..20a2060 --- /dev/null +++ b/packages/docs/src/examples/v-expansion-panels/usage.vue @@ -0,0 +1,41 @@ + + + diff --git a/packages/docs/src/examples/v-fab/misc-display-animation.vue b/packages/docs/src/examples/v-fab/misc-display-animation.vue new file mode 100644 index 0000000..48ab3a2 --- /dev/null +++ b/packages/docs/src/examples/v-fab/misc-display-animation.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/packages/docs/src/examples/v-fab/misc-lateral-screens.vue b/packages/docs/src/examples/v-fab/misc-lateral-screens.vue new file mode 100644 index 0000000..a57d779 --- /dev/null +++ b/packages/docs/src/examples/v-fab/misc-lateral-screens.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/packages/docs/src/examples/v-fab/misc-small.vue b/packages/docs/src/examples/v-fab/misc-small.vue new file mode 100644 index 0000000..6d3e8cb --- /dev/null +++ b/packages/docs/src/examples/v-fab/misc-small.vue @@ -0,0 +1,123 @@ + + + diff --git a/packages/docs/src/examples/v-fab/misc-speed-dial.vue b/packages/docs/src/examples/v-fab/misc-speed-dial.vue new file mode 100644 index 0000000..a7acf08 --- /dev/null +++ b/packages/docs/src/examples/v-fab/misc-speed-dial.vue @@ -0,0 +1,223 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-fab/usage.vue b/packages/docs/src/examples/v-fab/usage.vue new file mode 100644 index 0000000..0c4715f --- /dev/null +++ b/packages/docs/src/examples/v-fab/usage.vue @@ -0,0 +1,51 @@ + + + diff --git a/packages/docs/src/examples/v-file-input/misc-complex-selection.vue b/packages/docs/src/examples/v-file-input/misc-complex-selection.vue new file mode 100644 index 0000000..57c873a --- /dev/null +++ b/packages/docs/src/examples/v-file-input/misc-complex-selection.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/docs/src/examples/v-file-input/prop-accept.vue b/packages/docs/src/examples/v-file-input/prop-accept.vue new file mode 100644 index 0000000..c639096 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-accept.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-file-input/prop-chips.vue b/packages/docs/src/examples/v-file-input/prop-chips.vue new file mode 100644 index 0000000..ea72e27 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-chips.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/v-file-input/prop-counter.vue b/packages/docs/src/examples/v-file-input/prop-counter.vue new file mode 100644 index 0000000..b2e8208 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-counter.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-file-input/prop-dense.vue b/packages/docs/src/examples/v-file-input/prop-dense.vue new file mode 100644 index 0000000..a0fdcd9 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-dense.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-file-input/prop-multiple.vue b/packages/docs/src/examples/v-file-input/prop-multiple.vue new file mode 100644 index 0000000..62a83ad --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-multiple.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-file-input/prop-prepend-icon.vue b/packages/docs/src/examples/v-file-input/prop-prepend-icon.vue new file mode 100644 index 0000000..fc72ae7 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-prepend-icon.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-file-input/prop-show-size.vue b/packages/docs/src/examples/v-file-input/prop-show-size.vue new file mode 100644 index 0000000..9150119 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-show-size.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-file-input/prop-validation.vue b/packages/docs/src/examples/v-file-input/prop-validation.vue new file mode 100644 index 0000000..9663496 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/prop-validation.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/docs/src/examples/v-file-input/slot-selection.vue b/packages/docs/src/examples/v-file-input/slot-selection.vue new file mode 100644 index 0000000..dd88ebe --- /dev/null +++ b/packages/docs/src/examples/v-file-input/slot-selection.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/packages/docs/src/examples/v-file-input/usage.vue b/packages/docs/src/examples/v-file-input/usage.vue new file mode 100644 index 0000000..0744a63 --- /dev/null +++ b/packages/docs/src/examples/v-file-input/usage.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/docs/src/examples/v-footer/misc-company-footer.vue b/packages/docs/src/examples/v-footer/misc-company-footer.vue new file mode 100644 index 0000000..3dda5d9 --- /dev/null +++ b/packages/docs/src/examples/v-footer/misc-company-footer.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-footer/misc-indigo-footer.vue b/packages/docs/src/examples/v-footer/misc-indigo-footer.vue new file mode 100644 index 0000000..be2edd4 --- /dev/null +++ b/packages/docs/src/examples/v-footer/misc-indigo-footer.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/docs/src/examples/v-footer/misc-teal-footer.vue b/packages/docs/src/examples/v-footer/misc-teal-footer.vue new file mode 100644 index 0000000..696e0b8 --- /dev/null +++ b/packages/docs/src/examples/v-footer/misc-teal-footer.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/docs/src/examples/v-footer/usage.vue b/packages/docs/src/examples/v-footer/usage.vue new file mode 100644 index 0000000..b0d4ba7 --- /dev/null +++ b/packages/docs/src/examples/v-footer/usage.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/docs/src/examples/v-form/misc-exposed.vue b/packages/docs/src/examples/v-form/misc-exposed.vue new file mode 100644 index 0000000..97d3eb8 --- /dev/null +++ b/packages/docs/src/examples/v-form/misc-exposed.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/packages/docs/src/examples/v-form/misc-vee-validate.vue b/packages/docs/src/examples/v-form/misc-vee-validate.vue new file mode 100644 index 0000000..8d1d387 --- /dev/null +++ b/packages/docs/src/examples/v-form/misc-vee-validate.vue @@ -0,0 +1,109 @@ + + + + + + { + "imports": { + "vee-validate": "https://cdn.jsdelivr.net/npm/vee-validate@4.8.4/dist/vee-validate.esm.js", + "@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api@6.5.0/lib/esm/index.js" + } + } + diff --git a/packages/docs/src/examples/v-form/misc-vuelidate.vue b/packages/docs/src/examples/v-form/misc-vuelidate.vue new file mode 100644 index 0000000..bbbfbc5 --- /dev/null +++ b/packages/docs/src/examples/v-form/misc-vuelidate.vue @@ -0,0 +1,103 @@ + + + + + + { + "imports": { + "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/index.mjs", + "@vuelidate/core": "https://cdn.jsdelivr.net/npm/@vuelidate/core/dist/index.esm.js", + "@vuelidate/validators": "https://cdn.jsdelivr.net/npm/@vuelidate/validators/dist/index.esm.js" + } + } + diff --git a/packages/docs/src/examples/v-form/prop-disabled.vue b/packages/docs/src/examples/v-form/prop-disabled.vue new file mode 100644 index 0000000..c3f10f1 --- /dev/null +++ b/packages/docs/src/examples/v-form/prop-disabled.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-form/prop-fast-fail.vue b/packages/docs/src/examples/v-form/prop-fast-fail.vue new file mode 100644 index 0000000..661af32 --- /dev/null +++ b/packages/docs/src/examples/v-form/prop-fast-fail.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/packages/docs/src/examples/v-form/rules-async.vue b/packages/docs/src/examples/v-form/rules-async.vue new file mode 100644 index 0000000..129a76f --- /dev/null +++ b/packages/docs/src/examples/v-form/rules-async.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/packages/docs/src/examples/v-form/rules-required.vue b/packages/docs/src/examples/v-form/rules-required.vue new file mode 100644 index 0000000..5461c7a --- /dev/null +++ b/packages/docs/src/examples/v-form/rules-required.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/examples/v-form/usage.vue b/packages/docs/src/examples/v-form/usage.vue new file mode 100644 index 0000000..9b8a371 --- /dev/null +++ b/packages/docs/src/examples/v-form/usage.vue @@ -0,0 +1,83 @@ + + + diff --git a/packages/docs/src/examples/v-hover/misc-hover-list.vue b/packages/docs/src/examples/v-hover/misc-hover-list.vue new file mode 100644 index 0000000..69660fd --- /dev/null +++ b/packages/docs/src/examples/v-hover/misc-hover-list.vue @@ -0,0 +1,123 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-hover/misc-transition.vue b/packages/docs/src/examples/v-hover/misc-transition.vue new file mode 100644 index 0000000..1f898d6 --- /dev/null +++ b/packages/docs/src/examples/v-hover/misc-transition.vue @@ -0,0 +1,54 @@ + + + diff --git a/packages/docs/src/examples/v-hover/prop-disabled.vue b/packages/docs/src/examples/v-hover/prop-disabled.vue new file mode 100644 index 0000000..652020f --- /dev/null +++ b/packages/docs/src/examples/v-hover/prop-disabled.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/v-hover/prop-open-and-close-delay.vue b/packages/docs/src/examples/v-hover/prop-open-and-close-delay.vue new file mode 100644 index 0000000..e6b3da8 --- /dev/null +++ b/packages/docs/src/examples/v-hover/prop-open-and-close-delay.vue @@ -0,0 +1,56 @@ + + + diff --git a/packages/docs/src/examples/v-hover/usage.vue b/packages/docs/src/examples/v-hover/usage.vue new file mode 100644 index 0000000..948a7b1 --- /dev/null +++ b/packages/docs/src/examples/v-hover/usage.vue @@ -0,0 +1,47 @@ + + + diff --git a/packages/docs/src/examples/v-icon/event-click.vue b/packages/docs/src/examples/v-icon/event-click.vue new file mode 100644 index 0000000..1d1d3d3 --- /dev/null +++ b/packages/docs/src/examples/v-icon/event-click.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-icon/misc-buttons.vue b/packages/docs/src/examples/v-icon/misc-buttons.vue new file mode 100644 index 0000000..f9779fd --- /dev/null +++ b/packages/docs/src/examples/v-icon/misc-buttons.vue @@ -0,0 +1,78 @@ + diff --git a/packages/docs/src/examples/v-icon/misc-font-awesome.vue b/packages/docs/src/examples/v-icon/misc-font-awesome.vue new file mode 100644 index 0000000..2c64b60 --- /dev/null +++ b/packages/docs/src/examples/v-icon/misc-font-awesome.vue @@ -0,0 +1,21 @@ + + + + { + "css": ["https://use.fontawesome.com/releases/v5.1.0/css/all.css"] + } + diff --git a/packages/docs/src/examples/v-icon/misc-md.vue b/packages/docs/src/examples/v-icon/misc-md.vue new file mode 100644 index 0000000..20a2233 --- /dev/null +++ b/packages/docs/src/examples/v-icon/misc-md.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-icon/misc-mdi-svg.vue b/packages/docs/src/examples/v-icon/misc-mdi-svg.vue new file mode 100644 index 0000000..7c916f9 --- /dev/null +++ b/packages/docs/src/examples/v-icon/misc-mdi-svg.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/docs/src/examples/v-icon/prop-color.vue b/packages/docs/src/examples/v-icon/prop-color.vue new file mode 100644 index 0000000..fb1f8f2 --- /dev/null +++ b/packages/docs/src/examples/v-icon/prop-color.vue @@ -0,0 +1,39 @@ + diff --git a/packages/docs/src/examples/v-icon/usage.vue b/packages/docs/src/examples/v-icon/usage.vue new file mode 100644 index 0000000..1c03cfa --- /dev/null +++ b/packages/docs/src/examples/v-icon/usage.vue @@ -0,0 +1,67 @@ + + + diff --git a/packages/docs/src/examples/v-img/complex-grid.vue b/packages/docs/src/examples/v-img/complex-grid.vue new file mode 100644 index 0000000..a0fe24f --- /dev/null +++ b/packages/docs/src/examples/v-img/complex-grid.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/docs/src/examples/v-img/misc-grid.vue b/packages/docs/src/examples/v-img/misc-grid.vue new file mode 100644 index 0000000..80ae190 --- /dev/null +++ b/packages/docs/src/examples/v-img/misc-grid.vue @@ -0,0 +1,31 @@ + diff --git a/packages/docs/src/examples/v-img/prop-contain.vue b/packages/docs/src/examples/v-img/prop-contain.vue new file mode 100644 index 0000000..7b6d818 --- /dev/null +++ b/packages/docs/src/examples/v-img/prop-contain.vue @@ -0,0 +1,62 @@ + diff --git a/packages/docs/src/examples/v-img/prop-cover.vue b/packages/docs/src/examples/v-img/prop-cover.vue new file mode 100644 index 0000000..0355fa2 --- /dev/null +++ b/packages/docs/src/examples/v-img/prop-cover.vue @@ -0,0 +1,24 @@ + diff --git a/packages/docs/src/examples/v-img/prop-gradient.vue b/packages/docs/src/examples/v-img/prop-gradient.vue new file mode 100644 index 0000000..c7b4868 --- /dev/null +++ b/packages/docs/src/examples/v-img/prop-gradient.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/docs/src/examples/v-img/prop-max-height.vue b/packages/docs/src/examples/v-img/prop-max-height.vue new file mode 100644 index 0000000..a635dab --- /dev/null +++ b/packages/docs/src/examples/v-img/prop-max-height.vue @@ -0,0 +1,65 @@ + diff --git a/packages/docs/src/examples/v-img/slot-error.vue b/packages/docs/src/examples/v-img/slot-error.vue new file mode 100644 index 0000000..fa001ec --- /dev/null +++ b/packages/docs/src/examples/v-img/slot-error.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-img/slot-placeholder.vue b/packages/docs/src/examples/v-img/slot-placeholder.vue new file mode 100644 index 0000000..ed52113 --- /dev/null +++ b/packages/docs/src/examples/v-img/slot-placeholder.vue @@ -0,0 +1,18 @@ + diff --git a/packages/docs/src/examples/v-img/usage.vue b/packages/docs/src/examples/v-img/usage.vue new file mode 100644 index 0000000..a519861 --- /dev/null +++ b/packages/docs/src/examples/v-img/usage.vue @@ -0,0 +1,63 @@ + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/misc-virtual.vue b/packages/docs/src/examples/v-infinite-scroll/misc-virtual.vue new file mode 100644 index 0000000..4e8d0a4 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/misc-virtual.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/prop-color.vue b/packages/docs/src/examples/v-infinite-scroll/prop-color.vue new file mode 100644 index 0000000..df48bca --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/prop-color.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/prop-direction.vue b/packages/docs/src/examples/v-infinite-scroll/prop-direction.vue new file mode 100644 index 0000000..2b2df6f --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/prop-direction.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/prop-mode.vue b/packages/docs/src/examples/v-infinite-scroll/prop-mode.vue new file mode 100644 index 0000000..725bde3 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/prop-mode.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/prop-side-both.vue b/packages/docs/src/examples/v-infinite-scroll/prop-side-both.vue new file mode 100644 index 0000000..cb57d03 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/prop-side-both.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/prop-side-start.vue b/packages/docs/src/examples/v-infinite-scroll/prop-side-start.vue new file mode 100644 index 0000000..fa14187 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/prop-side-start.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/slot-empty.vue b/packages/docs/src/examples/v-infinite-scroll/slot-empty.vue new file mode 100644 index 0000000..d8ea6bb --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/slot-empty.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/slot-error.vue b/packages/docs/src/examples/v-infinite-scroll/slot-error.vue new file mode 100644 index 0000000..9df2855 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/slot-error.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/slot-load-more.vue b/packages/docs/src/examples/v-infinite-scroll/slot-load-more.vue new file mode 100644 index 0000000..0b74341 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/slot-load-more.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/slot-loading.vue b/packages/docs/src/examples/v-infinite-scroll/slot-loading.vue new file mode 100644 index 0000000..9fe1a51 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/slot-loading.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-infinite-scroll/usage.vue b/packages/docs/src/examples/v-infinite-scroll/usage.vue new file mode 100644 index 0000000..9265fa9 --- /dev/null +++ b/packages/docs/src/examples/v-infinite-scroll/usage.vue @@ -0,0 +1,93 @@ + + + diff --git a/packages/docs/src/examples/v-input/event-slot-clicks.vue b/packages/docs/src/examples/v-input/event-slot-clicks.vue new file mode 100644 index 0000000..4e6221f --- /dev/null +++ b/packages/docs/src/examples/v-input/event-slot-clicks.vue @@ -0,0 +1,51 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-input/prop-error-count.vue b/packages/docs/src/examples/v-input/prop-error-count.vue new file mode 100644 index 0000000..e07dd2c --- /dev/null +++ b/packages/docs/src/examples/v-input/prop-error-count.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-input/prop-error.vue b/packages/docs/src/examples/v-input/prop-error.vue new file mode 100644 index 0000000..cffcbd8 --- /dev/null +++ b/packages/docs/src/examples/v-input/prop-error.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-input/prop-hide-details.vue b/packages/docs/src/examples/v-input/prop-hide-details.vue new file mode 100644 index 0000000..b72b0c1 --- /dev/null +++ b/packages/docs/src/examples/v-input/prop-hide-details.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/docs/src/examples/v-input/prop-hint.vue b/packages/docs/src/examples/v-input/prop-hint.vue new file mode 100644 index 0000000..e56ed42 --- /dev/null +++ b/packages/docs/src/examples/v-input/prop-hint.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/docs/src/examples/v-input/prop-loading.vue b/packages/docs/src/examples/v-input/prop-loading.vue new file mode 100644 index 0000000..5e83044 --- /dev/null +++ b/packages/docs/src/examples/v-input/prop-loading.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-input/prop-rules.vue b/packages/docs/src/examples/v-input/prop-rules.vue new file mode 100644 index 0000000..2e0d704 --- /dev/null +++ b/packages/docs/src/examples/v-input/prop-rules.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/docs/src/examples/v-input/prop-success.vue b/packages/docs/src/examples/v-input/prop-success.vue new file mode 100644 index 0000000..e878654 --- /dev/null +++ b/packages/docs/src/examples/v-input/prop-success.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-input/slot-append-and-prepend.vue b/packages/docs/src/examples/v-input/slot-append-and-prepend.vue new file mode 100644 index 0000000..1d16673 --- /dev/null +++ b/packages/docs/src/examples/v-input/slot-append-and-prepend.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/v-input/usage.vue b/packages/docs/src/examples/v-input/usage.vue new file mode 100644 index 0000000..84507f0 --- /dev/null +++ b/packages/docs/src/examples/v-input/usage.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/packages/docs/src/examples/v-intersect/prop-options.vue b/packages/docs/src/examples/v-intersect/prop-options.vue new file mode 100644 index 0000000..37da185 --- /dev/null +++ b/packages/docs/src/examples/v-intersect/prop-options.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/docs/src/examples/v-intersect/usage.vue b/packages/docs/src/examples/v-intersect/usage.vue new file mode 100644 index 0000000..690df1b --- /dev/null +++ b/packages/docs/src/examples/v-intersect/usage.vue @@ -0,0 +1,52 @@ + + + diff --git a/packages/docs/src/examples/v-item-group/misc-chips.vue b/packages/docs/src/examples/v-item-group/misc-chips.vue new file mode 100644 index 0000000..eb86f40 --- /dev/null +++ b/packages/docs/src/examples/v-item-group/misc-chips.vue @@ -0,0 +1,54 @@ + diff --git a/packages/docs/src/examples/v-item-group/misc-selection.vue b/packages/docs/src/examples/v-item-group/misc-selection.vue new file mode 100644 index 0000000..0714080 --- /dev/null +++ b/packages/docs/src/examples/v-item-group/misc-selection.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/packages/docs/src/examples/v-item-group/prop-mandatory.vue b/packages/docs/src/examples/v-item-group/prop-mandatory.vue new file mode 100644 index 0000000..aba2f64 --- /dev/null +++ b/packages/docs/src/examples/v-item-group/prop-mandatory.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/docs/src/examples/v-item-group/prop-multiple.vue b/packages/docs/src/examples/v-item-group/prop-multiple.vue new file mode 100644 index 0000000..87f3376 --- /dev/null +++ b/packages/docs/src/examples/v-item-group/prop-multiple.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/docs/src/examples/v-item-group/prop-selected-class.vue b/packages/docs/src/examples/v-item-group/prop-selected-class.vue new file mode 100644 index 0000000..21cdc85 --- /dev/null +++ b/packages/docs/src/examples/v-item-group/prop-selected-class.vue @@ -0,0 +1,31 @@ + + + diff --git a/packages/docs/src/examples/v-item-group/usage.vue b/packages/docs/src/examples/v-item-group/usage.vue new file mode 100644 index 0000000..52bbbdc --- /dev/null +++ b/packages/docs/src/examples/v-item-group/usage.vue @@ -0,0 +1,35 @@ + + + diff --git a/packages/docs/src/examples/v-lazy/usage.vue b/packages/docs/src/examples/v-lazy/usage.vue new file mode 100644 index 0000000..c483975 --- /dev/null +++ b/packages/docs/src/examples/v-lazy/usage.vue @@ -0,0 +1,98 @@ + + + diff --git a/packages/docs/src/examples/v-list/misc-action-and-item-groups.vue b/packages/docs/src/examples/v-list/misc-action-and-item-groups.vue new file mode 100644 index 0000000..b05c432 --- /dev/null +++ b/packages/docs/src/examples/v-list/misc-action-and-item-groups.vue @@ -0,0 +1,85 @@ + diff --git a/packages/docs/src/examples/v-list/misc-action-stack.vue b/packages/docs/src/examples/v-list/misc-action-stack.vue new file mode 100644 index 0000000..e05be54 --- /dev/null +++ b/packages/docs/src/examples/v-list/misc-action-stack.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/misc-card-list.vue b/packages/docs/src/examples/v-list/misc-card-list.vue new file mode 100644 index 0000000..21e2ee4 --- /dev/null +++ b/packages/docs/src/examples/v-list/misc-card-list.vue @@ -0,0 +1,105 @@ + diff --git a/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue b/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue new file mode 100644 index 0000000..0a1ba11 --- /dev/null +++ b/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/misc-single-line-list.vue b/packages/docs/src/examples/v-list/misc-single-line-list.vue new file mode 100644 index 0000000..78347cd --- /dev/null +++ b/packages/docs/src/examples/v-list/misc-single-line-list.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue b/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue new file mode 100644 index 0000000..76804bd --- /dev/null +++ b/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-density.vue b/packages/docs/src/examples/v-list/prop-density.vue new file mode 100644 index 0000000..319e063 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-density.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-disabled.vue b/packages/docs/src/examples/v-list/prop-disabled.vue new file mode 100644 index 0000000..f367a90 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-disabled.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-items-custom.vue b/packages/docs/src/examples/v-list/prop-items-custom.vue new file mode 100644 index 0000000..6cd3d80 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-items-custom.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-items-prop.vue b/packages/docs/src/examples/v-list/prop-items-prop.vue new file mode 100644 index 0000000..c0b28eb --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-items-prop.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-items-type.vue b/packages/docs/src/examples/v-list/prop-items-type.vue new file mode 100644 index 0000000..91592a5 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-items-type.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-items.vue b/packages/docs/src/examples/v-list/prop-items.vue new file mode 100644 index 0000000..24729b5 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-items.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-nav.vue b/packages/docs/src/examples/v-list/prop-nav.vue new file mode 100644 index 0000000..fe6edf0 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-nav.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-rounded.vue b/packages/docs/src/examples/v-list/prop-rounded.vue new file mode 100644 index 0000000..c930b24 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-rounded.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-shaped.vue b/packages/docs/src/examples/v-list/prop-shaped.vue new file mode 100644 index 0000000..8367e8a --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-shaped.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-sub-group.vue b/packages/docs/src/examples/v-list/prop-sub-group.vue new file mode 100644 index 0000000..eae3648 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-sub-group.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-three-line.vue b/packages/docs/src/examples/v-list/prop-three-line.vue new file mode 100644 index 0000000..3b34235 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-three-line.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-two-line-and-subheader.vue b/packages/docs/src/examples/v-list/prop-two-line-and-subheader.vue new file mode 100644 index 0000000..faaea2f --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-two-line-and-subheader.vue @@ -0,0 +1,134 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/prop-variant.vue b/packages/docs/src/examples/v-list/prop-variant.vue new file mode 100644 index 0000000..5ee66c9 --- /dev/null +++ b/packages/docs/src/examples/v-list/prop-variant.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/slot-expansion-lists.vue b/packages/docs/src/examples/v-list/slot-expansion-lists.vue new file mode 100644 index 0000000..66ab3a5 --- /dev/null +++ b/packages/docs/src/examples/v-list/slot-expansion-lists.vue @@ -0,0 +1,140 @@ + + + + + diff --git a/packages/docs/src/examples/v-list/usage.vue b/packages/docs/src/examples/v-list/usage.vue new file mode 100644 index 0000000..bd2b443 --- /dev/null +++ b/packages/docs/src/examples/v-list/usage.vue @@ -0,0 +1,60 @@ + + + diff --git a/packages/docs/src/examples/v-menu/misc-popover.vue b/packages/docs/src/examples/v-menu/misc-popover.vue new file mode 100644 index 0000000..e0ed3e1 --- /dev/null +++ b/packages/docs/src/examples/v-menu/misc-popover.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/misc-transition.vue b/packages/docs/src/examples/v-menu/misc-transition.vue new file mode 100644 index 0000000..126e4bd --- /dev/null +++ b/packages/docs/src/examples/v-menu/misc-transition.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/misc-use-in-components.vue b/packages/docs/src/examples/v-menu/misc-use-in-components.vue new file mode 100644 index 0000000..749b229 --- /dev/null +++ b/packages/docs/src/examples/v-menu/misc-use-in-components.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue b/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue new file mode 100644 index 0000000..4986b27 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue @@ -0,0 +1,94 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-absolute.vue b/packages/docs/src/examples/v-menu/prop-absolute.vue new file mode 100644 index 0000000..8bf4ba1 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-absolute.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-close-on-click.vue b/packages/docs/src/examples/v-menu/prop-close-on-click.vue new file mode 100644 index 0000000..b4788d0 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-close-on-click.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue b/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue new file mode 100644 index 0000000..7dfbfd0 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-disabled.vue b/packages/docs/src/examples/v-menu/prop-disabled.vue new file mode 100644 index 0000000..e21d676 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-disabled.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-location.vue b/packages/docs/src/examples/v-menu/prop-location.vue new file mode 100644 index 0000000..80614b2 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-location.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-open-on-hover.vue b/packages/docs/src/examples/v-menu/prop-open-on-hover.vue new file mode 100644 index 0000000..6431677 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-open-on-hover.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/prop-rounded.vue b/packages/docs/src/examples/v-menu/prop-rounded.vue new file mode 100644 index 0000000..efe0f13 --- /dev/null +++ b/packages/docs/src/examples/v-menu/prop-rounded.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/slot-activator-and-tooltip.vue b/packages/docs/src/examples/v-menu/slot-activator-and-tooltip.vue new file mode 100644 index 0000000..a5ac8a3 --- /dev/null +++ b/packages/docs/src/examples/v-menu/slot-activator-and-tooltip.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/docs/src/examples/v-menu/usage.vue b/packages/docs/src/examples/v-menu/usage.vue new file mode 100644 index 0000000..0bffe1f --- /dev/null +++ b/packages/docs/src/examples/v-menu/usage.vue @@ -0,0 +1,73 @@ + + + diff --git a/packages/docs/src/examples/v-mutate/option-modifiers.vue b/packages/docs/src/examples/v-mutate/option-modifiers.vue new file mode 100644 index 0000000..c3d4d5a --- /dev/null +++ b/packages/docs/src/examples/v-mutate/option-modifiers.vue @@ -0,0 +1,77 @@ + + + diff --git a/packages/docs/src/examples/v-mutate/usage.vue b/packages/docs/src/examples/v-mutate/usage.vue new file mode 100644 index 0000000..c71a1ac --- /dev/null +++ b/packages/docs/src/examples/v-mutate/usage.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/docs/src/examples/v-navigation-drawer/misc-colored.vue b/packages/docs/src/examples/v-navigation-drawer/misc-colored.vue new file mode 100644 index 0000000..b3a21ec --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/misc-colored.vue @@ -0,0 +1,26 @@ + diff --git a/packages/docs/src/examples/v-navigation-drawer/misc-combined.vue b/packages/docs/src/examples/v-navigation-drawer/misc-combined.vue new file mode 100644 index 0000000..7c6cfdc --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/misc-combined.vue @@ -0,0 +1,39 @@ + diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue new file mode 100644 index 0000000..6043ddc --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-expand-on-hover.vue b/packages/docs/src/examples/v-navigation-drawer/prop-expand-on-hover.vue new file mode 100644 index 0000000..bf5fbec --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/prop-expand-on-hover.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-images.vue b/packages/docs/src/examples/v-navigation-drawer/prop-images.vue new file mode 100644 index 0000000..fcb9472 --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/prop-images.vue @@ -0,0 +1,18 @@ + diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-mini-variant.vue b/packages/docs/src/examples/v-navigation-drawer/prop-mini-variant.vue new file mode 100644 index 0000000..735c65d --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/prop-mini-variant.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-permanent-and-floating.vue b/packages/docs/src/examples/v-navigation-drawer/prop-permanent-and-floating.vue new file mode 100644 index 0000000..2f2a94c --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/prop-permanent-and-floating.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-right.vue b/packages/docs/src/examples/v-navigation-drawer/prop-right.vue new file mode 100644 index 0000000..270ff7d --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/prop-right.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-temporary.vue b/packages/docs/src/examples/v-navigation-drawer/prop-temporary.vue new file mode 100644 index 0000000..290f4bb --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/prop-temporary.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/docs/src/examples/v-navigation-drawer/usage.vue b/packages/docs/src/examples/v-navigation-drawer/usage.vue new file mode 100644 index 0000000..c2204e6 --- /dev/null +++ b/packages/docs/src/examples/v-navigation-drawer/usage.vue @@ -0,0 +1,51 @@ + + + diff --git a/packages/docs/src/examples/v-number-input/prop-control-variant.vue b/packages/docs/src/examples/v-number-input/prop-control-variant.vue new file mode 100644 index 0000000..7f5c7d4 --- /dev/null +++ b/packages/docs/src/examples/v-number-input/prop-control-variant.vue @@ -0,0 +1,23 @@ + diff --git a/packages/docs/src/examples/v-number-input/prop-hide-input.vue b/packages/docs/src/examples/v-number-input/prop-hide-input.vue new file mode 100644 index 0000000..59b3fa2 --- /dev/null +++ b/packages/docs/src/examples/v-number-input/prop-hide-input.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-number-input/prop-inset.vue b/packages/docs/src/examples/v-number-input/prop-inset.vue new file mode 100644 index 0000000..d40c6ca --- /dev/null +++ b/packages/docs/src/examples/v-number-input/prop-inset.vue @@ -0,0 +1,41 @@ + diff --git a/packages/docs/src/examples/v-number-input/prop-min-max.vue b/packages/docs/src/examples/v-number-input/prop-min-max.vue new file mode 100644 index 0000000..3b9d367 --- /dev/null +++ b/packages/docs/src/examples/v-number-input/prop-min-max.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/v-number-input/prop-reverse.vue b/packages/docs/src/examples/v-number-input/prop-reverse.vue new file mode 100644 index 0000000..8319e2e --- /dev/null +++ b/packages/docs/src/examples/v-number-input/prop-reverse.vue @@ -0,0 +1,31 @@ + diff --git a/packages/docs/src/examples/v-number-input/prop-step.vue b/packages/docs/src/examples/v-number-input/prop-step.vue new file mode 100644 index 0000000..0c0ef3d --- /dev/null +++ b/packages/docs/src/examples/v-number-input/prop-step.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/v-number-input/usage.vue b/packages/docs/src/examples/v-number-input/usage.vue new file mode 100644 index 0000000..1294a9a --- /dev/null +++ b/packages/docs/src/examples/v-number-input/usage.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/docs/src/examples/v-otp-input/misc-card.vue b/packages/docs/src/examples/v-otp-input/misc-card.vue new file mode 100644 index 0000000..15ef389 --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/misc-card.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/packages/docs/src/examples/v-otp-input/misc-divider.vue b/packages/docs/src/examples/v-otp-input/misc-divider.vue new file mode 100644 index 0000000..81530b0 --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/misc-divider.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-otp-input/misc-mobile.vue b/packages/docs/src/examples/v-otp-input/misc-mobile.vue new file mode 100644 index 0000000..2a072b7 --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/misc-mobile.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/docs/src/examples/v-otp-input/misc-verify.vue b/packages/docs/src/examples/v-otp-input/misc-verify.vue new file mode 100644 index 0000000..1837330 --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/misc-verify.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/packages/docs/src/examples/v-otp-input/prop-error.vue b/packages/docs/src/examples/v-otp-input/prop-error.vue new file mode 100644 index 0000000..84326bc --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/prop-error.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-otp-input/prop-focus-all.vue b/packages/docs/src/examples/v-otp-input/prop-focus-all.vue new file mode 100644 index 0000000..b123a2c --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/prop-focus-all.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-otp-input/prop-length.vue b/packages/docs/src/examples/v-otp-input/prop-length.vue new file mode 100644 index 0000000..3d43a97 --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/prop-length.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-otp-input/prop-loader.vue b/packages/docs/src/examples/v-otp-input/prop-loader.vue new file mode 100644 index 0000000..185867b --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/prop-loader.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-otp-input/prop-variant.vue b/packages/docs/src/examples/v-otp-input/prop-variant.vue new file mode 100644 index 0000000..a1dce54 --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/prop-variant.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-otp-input/usage.vue b/packages/docs/src/examples/v-otp-input/usage.vue new file mode 100644 index 0000000..14f44b6 --- /dev/null +++ b/packages/docs/src/examples/v-otp-input/usage.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-counter.vue b/packages/docs/src/examples/v-overflow-btn/prop-counter.vue new file mode 100644 index 0000000..44bfb41 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-counter.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-dense.vue b/packages/docs/src/examples/v-overflow-btn/prop-dense.vue new file mode 100644 index 0000000..cf65e26 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-dense.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-disabled.vue b/packages/docs/src/examples/v-overflow-btn/prop-disabled.vue new file mode 100644 index 0000000..add4ea8 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-disabled.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-editable.vue b/packages/docs/src/examples/v-overflow-btn/prop-editable.vue new file mode 100644 index 0000000..1ec4b59 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-editable.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-filled.vue b/packages/docs/src/examples/v-overflow-btn/prop-filled.vue new file mode 100644 index 0000000..b3b4d26 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-filled.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-hint.vue b/packages/docs/src/examples/v-overflow-btn/prop-hint.vue new file mode 100644 index 0000000..b51b751 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-hint.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-loading.vue b/packages/docs/src/examples/v-overflow-btn/prop-loading.vue new file mode 100644 index 0000000..edb6c2a --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-loading.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-menu-props.vue b/packages/docs/src/examples/v-overflow-btn/prop-menu-props.vue new file mode 100644 index 0000000..119c0f6 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-menu-props.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-readonly.vue b/packages/docs/src/examples/v-overflow-btn/prop-readonly.vue new file mode 100644 index 0000000..7fd36d6 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-readonly.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/prop-segmented.vue b/packages/docs/src/examples/v-overflow-btn/prop-segmented.vue new file mode 100644 index 0000000..66b9f6e --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/prop-segmented.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/packages/docs/src/examples/v-overflow-btn/usage.vue b/packages/docs/src/examples/v-overflow-btn/usage.vue new file mode 100644 index 0000000..a0e40a5 --- /dev/null +++ b/packages/docs/src/examples/v-overflow-btn/usage.vue @@ -0,0 +1,52 @@ + + + diff --git a/packages/docs/src/examples/v-overlay/connected-playground.vue b/packages/docs/src/examples/v-overlay/connected-playground.vue new file mode 100644 index 0000000..05faedf --- /dev/null +++ b/packages/docs/src/examples/v-overlay/connected-playground.vue @@ -0,0 +1,102 @@ + + + diff --git a/packages/docs/src/examples/v-overlay/misc-advanced.vue b/packages/docs/src/examples/v-overlay/misc-advanced.vue new file mode 100644 index 0000000..0885b31 --- /dev/null +++ b/packages/docs/src/examples/v-overlay/misc-advanced.vue @@ -0,0 +1,41 @@ + diff --git a/packages/docs/src/examples/v-overlay/misc-loader.vue b/packages/docs/src/examples/v-overlay/misc-loader.vue new file mode 100644 index 0000000..ccd950e --- /dev/null +++ b/packages/docs/src/examples/v-overlay/misc-loader.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-overlay/prop-contained.vue b/packages/docs/src/examples/v-overlay/prop-contained.vue new file mode 100644 index 0000000..03a8267 --- /dev/null +++ b/packages/docs/src/examples/v-overlay/prop-contained.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-overlay/scroll-block.vue b/packages/docs/src/examples/v-overlay/scroll-block.vue new file mode 100644 index 0000000..7385910 --- /dev/null +++ b/packages/docs/src/examples/v-overlay/scroll-block.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-overlay/scroll-close.vue b/packages/docs/src/examples/v-overlay/scroll-close.vue new file mode 100644 index 0000000..9dc2130 --- /dev/null +++ b/packages/docs/src/examples/v-overlay/scroll-close.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-overlay/scroll-none.vue b/packages/docs/src/examples/v-overlay/scroll-none.vue new file mode 100644 index 0000000..656b26b --- /dev/null +++ b/packages/docs/src/examples/v-overlay/scroll-none.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-overlay/scroll-reposition.vue b/packages/docs/src/examples/v-overlay/scroll-reposition.vue new file mode 100644 index 0000000..92b7962 --- /dev/null +++ b/packages/docs/src/examples/v-overlay/scroll-reposition.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-overlay/usage.vue b/packages/docs/src/examples/v-overlay/usage.vue new file mode 100644 index 0000000..59c98ed --- /dev/null +++ b/packages/docs/src/examples/v-overlay/usage.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/docs/src/examples/v-pagination/prop-disabled.vue b/packages/docs/src/examples/v-pagination/prop-disabled.vue new file mode 100644 index 0000000..00d7bd6 --- /dev/null +++ b/packages/docs/src/examples/v-pagination/prop-disabled.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-pagination/prop-icons.vue b/packages/docs/src/examples/v-pagination/prop-icons.vue new file mode 100644 index 0000000..5eb8018 --- /dev/null +++ b/packages/docs/src/examples/v-pagination/prop-icons.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/docs/src/examples/v-pagination/prop-length.vue b/packages/docs/src/examples/v-pagination/prop-length.vue new file mode 100644 index 0000000..a57f427 --- /dev/null +++ b/packages/docs/src/examples/v-pagination/prop-length.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/packages/docs/src/examples/v-pagination/prop-rounded.vue b/packages/docs/src/examples/v-pagination/prop-rounded.vue new file mode 100644 index 0000000..567dc5a --- /dev/null +++ b/packages/docs/src/examples/v-pagination/prop-rounded.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/docs/src/examples/v-pagination/prop-total-visible.vue b/packages/docs/src/examples/v-pagination/prop-total-visible.vue new file mode 100644 index 0000000..33f6117 --- /dev/null +++ b/packages/docs/src/examples/v-pagination/prop-total-visible.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-pagination/usage.vue b/packages/docs/src/examples/v-pagination/usage.vue new file mode 100644 index 0000000..1f5bdc8 --- /dev/null +++ b/packages/docs/src/examples/v-pagination/usage.vue @@ -0,0 +1,39 @@ + + + diff --git a/packages/docs/src/examples/v-parallax/misc-content.vue b/packages/docs/src/examples/v-parallax/misc-content.vue new file mode 100644 index 0000000..ad55f3f --- /dev/null +++ b/packages/docs/src/examples/v-parallax/misc-content.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/v-parallax/misc-custom-height.vue b/packages/docs/src/examples/v-parallax/misc-custom-height.vue new file mode 100644 index 0000000..7d3b53b --- /dev/null +++ b/packages/docs/src/examples/v-parallax/misc-custom-height.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-parallax/usage.vue b/packages/docs/src/examples/v-parallax/usage.vue new file mode 100644 index 0000000..ae68c72 --- /dev/null +++ b/packages/docs/src/examples/v-parallax/usage.vue @@ -0,0 +1,3 @@ + diff --git a/packages/docs/src/examples/v-progress-circular/prop-color.vue b/packages/docs/src/examples/v-progress-circular/prop-color.vue new file mode 100644 index 0000000..db226f9 --- /dev/null +++ b/packages/docs/src/examples/v-progress-circular/prop-color.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/docs/src/examples/v-progress-circular/prop-indeterminate.vue b/packages/docs/src/examples/v-progress-circular/prop-indeterminate.vue new file mode 100644 index 0000000..6167786 --- /dev/null +++ b/packages/docs/src/examples/v-progress-circular/prop-indeterminate.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/docs/src/examples/v-progress-circular/prop-rotate.vue b/packages/docs/src/examples/v-progress-circular/prop-rotate.vue new file mode 100644 index 0000000..102bd4f --- /dev/null +++ b/packages/docs/src/examples/v-progress-circular/prop-rotate.vue @@ -0,0 +1,90 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-progress-circular/prop-size-and-width.vue b/packages/docs/src/examples/v-progress-circular/prop-size-and-width.vue new file mode 100644 index 0000000..5d37e4e --- /dev/null +++ b/packages/docs/src/examples/v-progress-circular/prop-size-and-width.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/docs/src/examples/v-progress-circular/prop-slot-default.vue b/packages/docs/src/examples/v-progress-circular/prop-slot-default.vue new file mode 100644 index 0000000..e52bb8c --- /dev/null +++ b/packages/docs/src/examples/v-progress-circular/prop-slot-default.vue @@ -0,0 +1,54 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-progress-circular/usage.vue b/packages/docs/src/examples/v-progress-circular/usage.vue new file mode 100644 index 0000000..b466ee0 --- /dev/null +++ b/packages/docs/src/examples/v-progress-circular/usage.vue @@ -0,0 +1,66 @@ + + + diff --git a/packages/docs/src/examples/v-progress-linear/misc-buffer-color.vue b/packages/docs/src/examples/v-progress-linear/misc-buffer-color.vue new file mode 100644 index 0000000..f270e6f --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/misc-buffer-color.vue @@ -0,0 +1,24 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/misc-determinate.vue b/packages/docs/src/examples/v-progress-linear/misc-determinate.vue new file mode 100644 index 0000000..b565630 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/misc-determinate.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue b/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue new file mode 100644 index 0000000..2cbf82d --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue @@ -0,0 +1,61 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue b/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue new file mode 100644 index 0000000..afa9357 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/packages/docs/src/examples/v-progress-linear/prop-buffer-value.vue b/packages/docs/src/examples/v-progress-linear/prop-buffer-value.vue new file mode 100644 index 0000000..82bf0be --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-buffer-value.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/packages/docs/src/examples/v-progress-linear/prop-colors.vue b/packages/docs/src/examples/v-progress-linear/prop-colors.vue new file mode 100644 index 0000000..ac06101 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-colors.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/prop-indeterminate.vue b/packages/docs/src/examples/v-progress-linear/prop-indeterminate.vue new file mode 100644 index 0000000..787c967 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-indeterminate.vue @@ -0,0 +1,23 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/prop-query.vue b/packages/docs/src/examples/v-progress-linear/prop-query.vue new file mode 100644 index 0000000..48b648a --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-query.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/packages/docs/src/examples/v-progress-linear/prop-reverse.vue b/packages/docs/src/examples/v-progress-linear/prop-reverse.vue new file mode 100644 index 0000000..9cf1757 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-reverse.vue @@ -0,0 +1,36 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/prop-rounded.vue b/packages/docs/src/examples/v-progress-linear/prop-rounded.vue new file mode 100644 index 0000000..6f0184d --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-rounded.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/prop-stream.vue b/packages/docs/src/examples/v-progress-linear/prop-stream.vue new file mode 100644 index 0000000..4c2815f --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-stream.vue @@ -0,0 +1,29 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/prop-striped.vue b/packages/docs/src/examples/v-progress-linear/prop-striped.vue new file mode 100644 index 0000000..8af9730 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/prop-striped.vue @@ -0,0 +1,31 @@ + diff --git a/packages/docs/src/examples/v-progress-linear/slot-default.vue b/packages/docs/src/examples/v-progress-linear/slot-default.vue new file mode 100644 index 0000000..88abc21 --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/slot-default.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/packages/docs/src/examples/v-progress-linear/usage.vue b/packages/docs/src/examples/v-progress-linear/usage.vue new file mode 100644 index 0000000..9b374fc --- /dev/null +++ b/packages/docs/src/examples/v-progress-linear/usage.vue @@ -0,0 +1,56 @@ + + + diff --git a/packages/docs/src/examples/v-pull-to-refresh/usage.vue b/packages/docs/src/examples/v-pull-to-refresh/usage.vue new file mode 100644 index 0000000..9ac2ee2 --- /dev/null +++ b/packages/docs/src/examples/v-pull-to-refresh/usage.vue @@ -0,0 +1,92 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-radio-group/prop-colors.vue b/packages/docs/src/examples/v-radio-group/prop-colors.vue new file mode 100644 index 0000000..a3c96ed --- /dev/null +++ b/packages/docs/src/examples/v-radio-group/prop-colors.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/packages/docs/src/examples/v-radio-group/prop-direction.vue b/packages/docs/src/examples/v-radio-group/prop-direction.vue new file mode 100644 index 0000000..e243b33 --- /dev/null +++ b/packages/docs/src/examples/v-radio-group/prop-direction.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-radio-group/prop-model-group.vue b/packages/docs/src/examples/v-radio-group/prop-model-group.vue new file mode 100644 index 0000000..0374329 --- /dev/null +++ b/packages/docs/src/examples/v-radio-group/prop-model-group.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/docs/src/examples/v-radio-group/prop-model-radio.vue b/packages/docs/src/examples/v-radio-group/prop-model-radio.vue new file mode 100644 index 0000000..d81bd2d --- /dev/null +++ b/packages/docs/src/examples/v-radio-group/prop-model-radio.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/docs/src/examples/v-radio-group/slot-label.vue b/packages/docs/src/examples/v-radio-group/slot-label.vue new file mode 100644 index 0000000..825d031 --- /dev/null +++ b/packages/docs/src/examples/v-radio-group/slot-label.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/docs/src/examples/v-radio-group/usage.vue b/packages/docs/src/examples/v-radio-group/usage.vue new file mode 100644 index 0000000..f1de24d --- /dev/null +++ b/packages/docs/src/examples/v-radio-group/usage.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/docs/src/examples/v-range-slider/prop-disabled.vue b/packages/docs/src/examples/v-range-slider/prop-disabled.vue new file mode 100644 index 0000000..0bb219c --- /dev/null +++ b/packages/docs/src/examples/v-range-slider/prop-disabled.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/docs/src/examples/v-range-slider/prop-min-and-max.vue b/packages/docs/src/examples/v-range-slider/prop-min-and-max.vue new file mode 100644 index 0000000..7fdbc3a --- /dev/null +++ b/packages/docs/src/examples/v-range-slider/prop-min-and-max.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-range-slider/prop-step.vue b/packages/docs/src/examples/v-range-slider/prop-step.vue new file mode 100644 index 0000000..a8e6707 --- /dev/null +++ b/packages/docs/src/examples/v-range-slider/prop-step.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/docs/src/examples/v-range-slider/prop-strict.vue b/packages/docs/src/examples/v-range-slider/prop-strict.vue new file mode 100644 index 0000000..78217b6 --- /dev/null +++ b/packages/docs/src/examples/v-range-slider/prop-strict.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/docs/src/examples/v-range-slider/prop-vertical.vue b/packages/docs/src/examples/v-range-slider/prop-vertical.vue new file mode 100644 index 0000000..62ce86d --- /dev/null +++ b/packages/docs/src/examples/v-range-slider/prop-vertical.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/docs/src/examples/v-range-slider/slot-thumb-label.vue b/packages/docs/src/examples/v-range-slider/slot-thumb-label.vue new file mode 100644 index 0000000..0be2942 --- /dev/null +++ b/packages/docs/src/examples/v-range-slider/slot-thumb-label.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/packages/docs/src/examples/v-range-slider/usage.vue b/packages/docs/src/examples/v-range-slider/usage.vue new file mode 100644 index 0000000..e32aabe --- /dev/null +++ b/packages/docs/src/examples/v-range-slider/usage.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/docs/src/examples/v-rating/misc-advanced.vue b/packages/docs/src/examples/v-rating/misc-advanced.vue new file mode 100644 index 0000000..03373da --- /dev/null +++ b/packages/docs/src/examples/v-rating/misc-advanced.vue @@ -0,0 +1,174 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/misc-card-overview.vue b/packages/docs/src/examples/v-rating/misc-card-overview.vue new file mode 100644 index 0000000..2951c20 --- /dev/null +++ b/packages/docs/src/examples/v-rating/misc-card-overview.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/docs/src/examples/v-rating/misc-card.vue b/packages/docs/src/examples/v-rating/misc-card.vue new file mode 100644 index 0000000..4b302ed --- /dev/null +++ b/packages/docs/src/examples/v-rating/misc-card.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-clearable.vue b/packages/docs/src/examples/v-rating/prop-clearable.vue new file mode 100644 index 0000000..a12e779 --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-clearable.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-color.vue b/packages/docs/src/examples/v-rating/prop-color.vue new file mode 100644 index 0000000..ee6d87b --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-color.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-density.vue b/packages/docs/src/examples/v-rating/prop-density.vue new file mode 100644 index 0000000..6757c37 --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-density.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-half-increments.vue b/packages/docs/src/examples/v-rating/prop-half-increments.vue new file mode 100644 index 0000000..f2b6e32 --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-half-increments.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-hover.vue b/packages/docs/src/examples/v-rating/prop-hover.vue new file mode 100644 index 0000000..e40ef5f --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-hover.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-icon-label.vue b/packages/docs/src/examples/v-rating/prop-icon-label.vue new file mode 100644 index 0000000..9963f50 --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-icon-label.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-icons.vue b/packages/docs/src/examples/v-rating/prop-icons.vue new file mode 100644 index 0000000..e9a88dd --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-icons.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-item-labels.vue b/packages/docs/src/examples/v-rating/prop-item-labels.vue new file mode 100644 index 0000000..3e42bcb --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-item-labels.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-length.vue b/packages/docs/src/examples/v-rating/prop-length.vue new file mode 100644 index 0000000..b79082e --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-length.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-readonly.vue b/packages/docs/src/examples/v-rating/prop-readonly.vue new file mode 100644 index 0000000..c7e1e12 --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-readonly.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/prop-size.vue b/packages/docs/src/examples/v-rating/prop-size.vue new file mode 100644 index 0000000..17ffdd0 --- /dev/null +++ b/packages/docs/src/examples/v-rating/prop-size.vue @@ -0,0 +1,32 @@ + diff --git a/packages/docs/src/examples/v-rating/slot-item-label.vue b/packages/docs/src/examples/v-rating/slot-item-label.vue new file mode 100644 index 0000000..26cb072 --- /dev/null +++ b/packages/docs/src/examples/v-rating/slot-item-label.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/slot-item.vue b/packages/docs/src/examples/v-rating/slot-item.vue new file mode 100644 index 0000000..5f18e05 --- /dev/null +++ b/packages/docs/src/examples/v-rating/slot-item.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/examples/v-rating/usage.vue b/packages/docs/src/examples/v-rating/usage.vue new file mode 100644 index 0000000..00165ce --- /dev/null +++ b/packages/docs/src/examples/v-rating/usage.vue @@ -0,0 +1,75 @@ + + + diff --git a/packages/docs/src/examples/v-resize/usage.vue b/packages/docs/src/examples/v-resize/usage.vue new file mode 100644 index 0000000..7bffcb1 --- /dev/null +++ b/packages/docs/src/examples/v-resize/usage.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/docs/src/examples/v-responsive/usage.vue b/packages/docs/src/examples/v-responsive/usage.vue new file mode 100644 index 0000000..c377ad3 --- /dev/null +++ b/packages/docs/src/examples/v-responsive/usage.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/docs/src/examples/v-ripple/misc-custom-color.vue b/packages/docs/src/examples/v-ripple/misc-custom-color.vue new file mode 100644 index 0000000..6de75a0 --- /dev/null +++ b/packages/docs/src/examples/v-ripple/misc-custom-color.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/v-ripple/misc-ripple-in-components.vue b/packages/docs/src/examples/v-ripple/misc-ripple-in-components.vue new file mode 100644 index 0000000..f47d700 --- /dev/null +++ b/packages/docs/src/examples/v-ripple/misc-ripple-in-components.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/docs/src/examples/v-ripple/option-center.vue b/packages/docs/src/examples/v-ripple/option-center.vue new file mode 100644 index 0000000..bc00f14 --- /dev/null +++ b/packages/docs/src/examples/v-ripple/option-center.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-ripple/stop.vue b/packages/docs/src/examples/v-ripple/stop.vue new file mode 100644 index 0000000..2c547a0 --- /dev/null +++ b/packages/docs/src/examples/v-ripple/stop.vue @@ -0,0 +1,26 @@ + diff --git a/packages/docs/src/examples/v-ripple/usage.vue b/packages/docs/src/examples/v-ripple/usage.vue new file mode 100644 index 0000000..fd34042 --- /dev/null +++ b/packages/docs/src/examples/v-ripple/usage.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-scroll/option-self.vue b/packages/docs/src/examples/v-scroll/option-self.vue new file mode 100644 index 0000000..bc19d1c --- /dev/null +++ b/packages/docs/src/examples/v-scroll/option-self.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-scroll/option-target.vue b/packages/docs/src/examples/v-scroll/option-target.vue new file mode 100644 index 0000000..488aaef --- /dev/null +++ b/packages/docs/src/examples/v-scroll/option-target.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-scroll/usage.vue b/packages/docs/src/examples/v-scroll/usage.vue new file mode 100644 index 0000000..4604295 --- /dev/null +++ b/packages/docs/src/examples/v-scroll/usage.vue @@ -0,0 +1,132 @@ + + + diff --git a/packages/docs/src/examples/v-select/prop-chips.vue b/packages/docs/src/examples/v-select/prop-chips.vue new file mode 100644 index 0000000..f9372c6 --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-chips.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/prop-custom-title-and-value.vue b/packages/docs/src/examples/v-select/prop-custom-title-and-value.vue new file mode 100644 index 0000000..d992e3f --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-custom-title-and-value.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/prop-dense.vue b/packages/docs/src/examples/v-select/prop-dense.vue new file mode 100644 index 0000000..1d1d003 --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-dense.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/prop-disabled.vue b/packages/docs/src/examples/v-select/prop-disabled.vue new file mode 100644 index 0000000..c222923 --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-disabled.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/prop-item-props.vue b/packages/docs/src/examples/v-select/prop-item-props.vue new file mode 100644 index 0000000..495df5f --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-item-props.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/prop-menu-props.vue b/packages/docs/src/examples/v-select/prop-menu-props.vue new file mode 100644 index 0000000..7e07c87 --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-menu-props.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/prop-multiple.vue b/packages/docs/src/examples/v-select/prop-multiple.vue new file mode 100644 index 0000000..81f9ca7 --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-multiple.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/prop-readonly.vue b/packages/docs/src/examples/v-select/prop-readonly.vue new file mode 100644 index 0000000..48b3dce --- /dev/null +++ b/packages/docs/src/examples/v-select/prop-readonly.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue b/packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue new file mode 100644 index 0000000..e76eaff --- /dev/null +++ b/packages/docs/src/examples/v-select/slot-append-and-prepend-item.vue @@ -0,0 +1,208 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/slot-item.vue b/packages/docs/src/examples/v-select/slot-item.vue new file mode 100644 index 0000000..83ac775 --- /dev/null +++ b/packages/docs/src/examples/v-select/slot-item.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/slot-selection.vue b/packages/docs/src/examples/v-select/slot-selection.vue new file mode 100644 index 0000000..7ab5e84 --- /dev/null +++ b/packages/docs/src/examples/v-select/slot-selection.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/docs/src/examples/v-select/usage.vue b/packages/docs/src/examples/v-select/usage.vue new file mode 100644 index 0000000..d1937fc --- /dev/null +++ b/packages/docs/src/examples/v-select/usage.vue @@ -0,0 +1,47 @@ + + + diff --git a/packages/docs/src/examples/v-sheet/misc-congratulations.vue b/packages/docs/src/examples/v-sheet/misc-congratulations.vue new file mode 100644 index 0000000..806fbac --- /dev/null +++ b/packages/docs/src/examples/v-sheet/misc-congratulations.vue @@ -0,0 +1,24 @@ + diff --git a/packages/docs/src/examples/v-sheet/misc-privacy-policy.vue b/packages/docs/src/examples/v-sheet/misc-privacy-policy.vue new file mode 100644 index 0000000..fd730b1 --- /dev/null +++ b/packages/docs/src/examples/v-sheet/misc-privacy-policy.vue @@ -0,0 +1,39 @@ + diff --git a/packages/docs/src/examples/v-sheet/misc-reconcile.vue b/packages/docs/src/examples/v-sheet/misc-reconcile.vue new file mode 100644 index 0000000..ba7856e --- /dev/null +++ b/packages/docs/src/examples/v-sheet/misc-reconcile.vue @@ -0,0 +1,40 @@ + diff --git a/packages/docs/src/examples/v-sheet/misc-referral-program.vue b/packages/docs/src/examples/v-sheet/misc-referral-program.vue new file mode 100644 index 0000000..95d9229 --- /dev/null +++ b/packages/docs/src/examples/v-sheet/misc-referral-program.vue @@ -0,0 +1,52 @@ + diff --git a/packages/docs/src/examples/v-sheet/prop-color.vue b/packages/docs/src/examples/v-sheet/prop-color.vue new file mode 100644 index 0000000..cfd7f7d --- /dev/null +++ b/packages/docs/src/examples/v-sheet/prop-color.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/packages/docs/src/examples/v-sheet/prop-elevation.vue b/packages/docs/src/examples/v-sheet/prop-elevation.vue new file mode 100644 index 0000000..9782201 --- /dev/null +++ b/packages/docs/src/examples/v-sheet/prop-elevation.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/packages/docs/src/examples/v-sheet/prop-rounded.vue b/packages/docs/src/examples/v-sheet/prop-rounded.vue new file mode 100644 index 0000000..3b9f194 --- /dev/null +++ b/packages/docs/src/examples/v-sheet/prop-rounded.vue @@ -0,0 +1,26 @@ + diff --git a/packages/docs/src/examples/v-sheet/usage.vue b/packages/docs/src/examples/v-sheet/usage.vue new file mode 100644 index 0000000..395da98 --- /dev/null +++ b/packages/docs/src/examples/v-sheet/usage.vue @@ -0,0 +1,81 @@ + + + diff --git a/packages/docs/src/examples/v-skeleton-loader/misc-ice-cream.vue b/packages/docs/src/examples/v-skeleton-loader/misc-ice-cream.vue new file mode 100644 index 0000000..65a5778 --- /dev/null +++ b/packages/docs/src/examples/v-skeleton-loader/misc-ice-cream.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/packages/docs/src/examples/v-skeleton-loader/prop-boilerplate.vue b/packages/docs/src/examples/v-skeleton-loader/prop-boilerplate.vue new file mode 100644 index 0000000..cc9ae93 --- /dev/null +++ b/packages/docs/src/examples/v-skeleton-loader/prop-boilerplate.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-skeleton-loader/prop-elevation.vue b/packages/docs/src/examples/v-skeleton-loader/prop-elevation.vue new file mode 100644 index 0000000..96d8fac --- /dev/null +++ b/packages/docs/src/examples/v-skeleton-loader/prop-elevation.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-skeleton-loader/prop-loading.vue b/packages/docs/src/examples/v-skeleton-loader/prop-loading.vue new file mode 100644 index 0000000..55c7d5b --- /dev/null +++ b/packages/docs/src/examples/v-skeleton-loader/prop-loading.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/docs/src/examples/v-skeleton-loader/prop-type.vue b/packages/docs/src/examples/v-skeleton-loader/prop-type.vue new file mode 100644 index 0000000..a998222 --- /dev/null +++ b/packages/docs/src/examples/v-skeleton-loader/prop-type.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-skeleton-loader/usage.vue b/packages/docs/src/examples/v-skeleton-loader/usage.vue new file mode 100644 index 0000000..2b86817 --- /dev/null +++ b/packages/docs/src/examples/v-skeleton-loader/usage.vue @@ -0,0 +1,67 @@ + + + diff --git a/packages/docs/src/examples/v-slide-group/misc-pseudo-carousel.vue b/packages/docs/src/examples/v-slide-group/misc-pseudo-carousel.vue new file mode 100644 index 0000000..50251a6 --- /dev/null +++ b/packages/docs/src/examples/v-slide-group/misc-pseudo-carousel.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/packages/docs/src/examples/v-slide-group/prop-active-class.vue b/packages/docs/src/examples/v-slide-group/prop-active-class.vue new file mode 100644 index 0000000..268e070 --- /dev/null +++ b/packages/docs/src/examples/v-slide-group/prop-active-class.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-slide-group/prop-center-active.vue b/packages/docs/src/examples/v-slide-group/prop-center-active.vue new file mode 100644 index 0000000..de0d852 --- /dev/null +++ b/packages/docs/src/examples/v-slide-group/prop-center-active.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-slide-group/prop-custom-icons.vue b/packages/docs/src/examples/v-slide-group/prop-custom-icons.vue new file mode 100644 index 0000000..165748c --- /dev/null +++ b/packages/docs/src/examples/v-slide-group/prop-custom-icons.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/docs/src/examples/v-slide-group/prop-mandatory.vue b/packages/docs/src/examples/v-slide-group/prop-mandatory.vue new file mode 100644 index 0000000..75ac4ed --- /dev/null +++ b/packages/docs/src/examples/v-slide-group/prop-mandatory.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-slide-group/prop-multiple.vue b/packages/docs/src/examples/v-slide-group/prop-multiple.vue new file mode 100644 index 0000000..750ce6a --- /dev/null +++ b/packages/docs/src/examples/v-slide-group/prop-multiple.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/packages/docs/src/examples/v-slide-group/usage.vue b/packages/docs/src/examples/v-slide-group/usage.vue new file mode 100644 index 0000000..c54c1fd --- /dev/null +++ b/packages/docs/src/examples/v-slide-group/usage.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/v-slider/prop-colors.vue b/packages/docs/src/examples/v-slider/prop-colors.vue new file mode 100644 index 0000000..0a6fe67 --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-colors.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/prop-disabled.vue b/packages/docs/src/examples/v-slider/prop-disabled.vue new file mode 100644 index 0000000..65d063f --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-disabled.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/v-slider/prop-icons.vue b/packages/docs/src/examples/v-slider/prop-icons.vue new file mode 100644 index 0000000..57110a1 --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-icons.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/prop-inverse-label.vue b/packages/docs/src/examples/v-slider/prop-inverse-label.vue new file mode 100644 index 0000000..bcfbd2a --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-inverse-label.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/v-slider/prop-min-and-max.vue b/packages/docs/src/examples/v-slider/prop-min-and-max.vue new file mode 100644 index 0000000..9cabd18 --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-min-and-max.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/prop-readonly.vue b/packages/docs/src/examples/v-slider/prop-readonly.vue new file mode 100644 index 0000000..19a5e47 --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-readonly.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-slider/prop-step.vue b/packages/docs/src/examples/v-slider/prop-step.vue new file mode 100644 index 0000000..99e4bc8 --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-step.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/prop-thumb.vue b/packages/docs/src/examples/v-slider/prop-thumb.vue new file mode 100644 index 0000000..f70c0a4 --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-thumb.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/prop-ticks.vue b/packages/docs/src/examples/v-slider/prop-ticks.vue new file mode 100644 index 0000000..7fb7e4c --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-ticks.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/prop-validation.vue b/packages/docs/src/examples/v-slider/prop-validation.vue new file mode 100644 index 0000000..35604de --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-validation.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/prop-vertical.vue b/packages/docs/src/examples/v-slider/prop-vertical.vue new file mode 100644 index 0000000..e167521 --- /dev/null +++ b/packages/docs/src/examples/v-slider/prop-vertical.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/slot-append-and-prepend.vue b/packages/docs/src/examples/v-slider/slot-append-and-prepend.vue new file mode 100644 index 0000000..6823f06 --- /dev/null +++ b/packages/docs/src/examples/v-slider/slot-append-and-prepend.vue @@ -0,0 +1,163 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-slider/slot-append-text-field.vue b/packages/docs/src/examples/v-slider/slot-append-text-field.vue new file mode 100644 index 0000000..0b11b59 --- /dev/null +++ b/packages/docs/src/examples/v-slider/slot-append-text-field.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/packages/docs/src/examples/v-slider/usage.vue b/packages/docs/src/examples/v-slider/usage.vue new file mode 100644 index 0000000..b6ff283 --- /dev/null +++ b/packages/docs/src/examples/v-slider/usage.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/docs/src/examples/v-snackbar-queue/usage.vue b/packages/docs/src/examples/v-snackbar-queue/usage.vue new file mode 100644 index 0000000..0f911b1 --- /dev/null +++ b/packages/docs/src/examples/v-snackbar-queue/usage.vue @@ -0,0 +1,74 @@ + + + diff --git a/packages/docs/src/examples/v-snackbar/prop-multi-line.vue b/packages/docs/src/examples/v-snackbar/prop-multi-line.vue new file mode 100644 index 0000000..a8ac024 --- /dev/null +++ b/packages/docs/src/examples/v-snackbar/prop-multi-line.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/docs/src/examples/v-snackbar/prop-timeout.vue b/packages/docs/src/examples/v-snackbar/prop-timeout.vue new file mode 100644 index 0000000..2bb1add --- /dev/null +++ b/packages/docs/src/examples/v-snackbar/prop-timeout.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-snackbar/prop-variants.vue b/packages/docs/src/examples/v-snackbar/prop-variants.vue new file mode 100644 index 0000000..4a92340 --- /dev/null +++ b/packages/docs/src/examples/v-snackbar/prop-variants.vue @@ -0,0 +1,63 @@ + diff --git a/packages/docs/src/examples/v-snackbar/prop-vertical.vue b/packages/docs/src/examples/v-snackbar/prop-vertical.vue new file mode 100644 index 0000000..7da65b9 --- /dev/null +++ b/packages/docs/src/examples/v-snackbar/prop-vertical.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/docs/src/examples/v-snackbar/usage.vue b/packages/docs/src/examples/v-snackbar/usage.vue new file mode 100644 index 0000000..3858406 --- /dev/null +++ b/packages/docs/src/examples/v-snackbar/usage.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue b/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue new file mode 100644 index 0000000..131894c --- /dev/null +++ b/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue b/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue new file mode 100644 index 0000000..78de2f7 --- /dev/null +++ b/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue @@ -0,0 +1,98 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue b/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue new file mode 100644 index 0000000..a050e7f --- /dev/null +++ b/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/packages/docs/src/examples/v-sparkline/prop-fill.vue b/packages/docs/src/examples/v-sparkline/prop-fill.vue new file mode 100644 index 0000000..3cf1076 --- /dev/null +++ b/packages/docs/src/examples/v-sparkline/prop-fill.vue @@ -0,0 +1,172 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-sparkline/usage.vue b/packages/docs/src/examples/v-sparkline/usage.vue new file mode 100644 index 0000000..187ede3 --- /dev/null +++ b/packages/docs/src/examples/v-sparkline/usage.vue @@ -0,0 +1,42 @@ + + + diff --git a/packages/docs/src/examples/v-speed-dial/usage.vue b/packages/docs/src/examples/v-speed-dial/usage.vue new file mode 100644 index 0000000..6958d41 --- /dev/null +++ b/packages/docs/src/examples/v-speed-dial/usage.vue @@ -0,0 +1,70 @@ + + + diff --git a/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue new file mode 100644 index 0000000..8b9b45c --- /dev/null +++ b/packages/docs/src/examples/v-stepper-vertical/slot-actions.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/packages/docs/src/examples/v-stepper-vertical/usage.vue b/packages/docs/src/examples/v-stepper-vertical/usage.vue new file mode 100644 index 0000000..141dc55 --- /dev/null +++ b/packages/docs/src/examples/v-stepper-vertical/usage.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/docs/src/examples/v-stepper/misc-alternate-error.vue b/packages/docs/src/examples/v-stepper/misc-alternate-error.vue new file mode 100644 index 0000000..592a000 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-alternate-error.vue @@ -0,0 +1,48 @@ + diff --git a/packages/docs/src/examples/v-stepper/misc-dynamic.vue b/packages/docs/src/examples/v-stepper/misc-dynamic.vue new file mode 100644 index 0000000..c08de1a --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-dynamic.vue @@ -0,0 +1,80 @@ + + + + + diff --git a/packages/docs/src/examples/v-stepper/misc-editable.vue b/packages/docs/src/examples/v-stepper/misc-editable.vue new file mode 100644 index 0000000..e4e56c4 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-editable.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/v-stepper/misc-error.vue b/packages/docs/src/examples/v-stepper/misc-error.vue new file mode 100644 index 0000000..ebd96d7 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-error.vue @@ -0,0 +1,34 @@ + diff --git a/packages/docs/src/examples/v-stepper/misc-horizontal.vue b/packages/docs/src/examples/v-stepper/misc-horizontal.vue new file mode 100644 index 0000000..89299f0 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-horizontal.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/packages/docs/src/examples/v-stepper/misc-linear.vue b/packages/docs/src/examples/v-stepper/misc-linear.vue new file mode 100644 index 0000000..8074e3f --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-linear.vue @@ -0,0 +1,77 @@ + diff --git a/packages/docs/src/examples/v-stepper/misc-non-editable.vue b/packages/docs/src/examples/v-stepper/misc-non-editable.vue new file mode 100644 index 0000000..84035d2 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-non-editable.vue @@ -0,0 +1,25 @@ + diff --git a/packages/docs/src/examples/v-stepper/misc-optional.vue b/packages/docs/src/examples/v-stepper/misc-optional.vue new file mode 100644 index 0000000..5f359e9 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-optional.vue @@ -0,0 +1,52 @@ + diff --git a/packages/docs/src/examples/v-stepper/misc-vertical-error.vue b/packages/docs/src/examples/v-stepper/misc-vertical-error.vue new file mode 100644 index 0000000..138ac73 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/misc-vertical-error.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/packages/docs/src/examples/v-stepper/prop-alternate-label.vue b/packages/docs/src/examples/v-stepper/prop-alternate-label.vue new file mode 100644 index 0000000..52fae0b --- /dev/null +++ b/packages/docs/src/examples/v-stepper/prop-alternate-label.vue @@ -0,0 +1,15 @@ + diff --git a/packages/docs/src/examples/v-stepper/prop-mobile.vue b/packages/docs/src/examples/v-stepper/prop-mobile.vue new file mode 100644 index 0000000..60e1712 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/prop-mobile.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/docs/src/examples/v-stepper/prop-non-linear.vue b/packages/docs/src/examples/v-stepper/prop-non-linear.vue new file mode 100644 index 0000000..2c9eec3 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/prop-non-linear.vue @@ -0,0 +1,102 @@ + diff --git a/packages/docs/src/examples/v-stepper/prop-vertical.vue b/packages/docs/src/examples/v-stepper/prop-vertical.vue new file mode 100644 index 0000000..76cc8b9 --- /dev/null +++ b/packages/docs/src/examples/v-stepper/prop-vertical.vue @@ -0,0 +1,115 @@ + + + + + diff --git a/packages/docs/src/examples/v-stepper/usage.vue b/packages/docs/src/examples/v-stepper/usage.vue new file mode 100644 index 0000000..b1d3e0f --- /dev/null +++ b/packages/docs/src/examples/v-stepper/usage.vue @@ -0,0 +1,109 @@ + + + diff --git a/packages/docs/src/examples/v-switch/prop-colors.vue b/packages/docs/src/examples/v-switch/prop-colors.vue new file mode 100644 index 0000000..cb2dfe5 --- /dev/null +++ b/packages/docs/src/examples/v-switch/prop-colors.vue @@ -0,0 +1,147 @@ + + + + + diff --git a/packages/docs/src/examples/v-switch/prop-custom-values.vue b/packages/docs/src/examples/v-switch/prop-custom-values.vue new file mode 100644 index 0000000..76fbb10 --- /dev/null +++ b/packages/docs/src/examples/v-switch/prop-custom-values.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/docs/src/examples/v-switch/prop-flat.vue b/packages/docs/src/examples/v-switch/prop-flat.vue new file mode 100644 index 0000000..661d91a --- /dev/null +++ b/packages/docs/src/examples/v-switch/prop-flat.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-switch/prop-inset.vue b/packages/docs/src/examples/v-switch/prop-inset.vue new file mode 100644 index 0000000..6bd4563 --- /dev/null +++ b/packages/docs/src/examples/v-switch/prop-inset.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-switch/prop-model-as-array.vue b/packages/docs/src/examples/v-switch/prop-model-as-array.vue new file mode 100644 index 0000000..648e8bd --- /dev/null +++ b/packages/docs/src/examples/v-switch/prop-model-as-array.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/docs/src/examples/v-switch/prop-states.vue b/packages/docs/src/examples/v-switch/prop-states.vue new file mode 100644 index 0000000..0e75326 --- /dev/null +++ b/packages/docs/src/examples/v-switch/prop-states.vue @@ -0,0 +1,56 @@ + diff --git a/packages/docs/src/examples/v-switch/slot-label.vue b/packages/docs/src/examples/v-switch/slot-label.vue new file mode 100644 index 0000000..02ba4ee --- /dev/null +++ b/packages/docs/src/examples/v-switch/slot-label.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/docs/src/examples/v-switch/usage.vue b/packages/docs/src/examples/v-switch/usage.vue new file mode 100644 index 0000000..9f99a87 --- /dev/null +++ b/packages/docs/src/examples/v-switch/usage.vue @@ -0,0 +1,40 @@ + + + diff --git a/packages/docs/src/examples/v-system-bar/prop-color.vue b/packages/docs/src/examples/v-system-bar/prop-color.vue new file mode 100644 index 0000000..fb3b368 --- /dev/null +++ b/packages/docs/src/examples/v-system-bar/prop-color.vue @@ -0,0 +1,39 @@ + diff --git a/packages/docs/src/examples/v-system-bar/prop-window.vue b/packages/docs/src/examples/v-system-bar/prop-window.vue new file mode 100644 index 0000000..30156df --- /dev/null +++ b/packages/docs/src/examples/v-system-bar/prop-window.vue @@ -0,0 +1,17 @@ + diff --git a/packages/docs/src/examples/v-system-bar/usage.vue b/packages/docs/src/examples/v-system-bar/usage.vue new file mode 100644 index 0000000..2fae588 --- /dev/null +++ b/packages/docs/src/examples/v-system-bar/usage.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/docs/src/examples/v-table/prop-dark.vue b/packages/docs/src/examples/v-table/prop-dark.vue new file mode 100644 index 0000000..41ba0a0 --- /dev/null +++ b/packages/docs/src/examples/v-table/prop-dark.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/packages/docs/src/examples/v-table/prop-dense.vue b/packages/docs/src/examples/v-table/prop-dense.vue new file mode 100644 index 0000000..f59f755 --- /dev/null +++ b/packages/docs/src/examples/v-table/prop-dense.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/packages/docs/src/examples/v-table/prop-fixed-header.vue b/packages/docs/src/examples/v-table/prop-fixed-header.vue new file mode 100644 index 0000000..06829a9 --- /dev/null +++ b/packages/docs/src/examples/v-table/prop-fixed-header.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/packages/docs/src/examples/v-table/prop-height.vue b/packages/docs/src/examples/v-table/prop-height.vue new file mode 100644 index 0000000..638e4a9 --- /dev/null +++ b/packages/docs/src/examples/v-table/prop-height.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/packages/docs/src/examples/v-table/usage.vue b/packages/docs/src/examples/v-table/usage.vue new file mode 100644 index 0000000..e101853 --- /dev/null +++ b/packages/docs/src/examples/v-table/usage.vue @@ -0,0 +1,74 @@ + + + diff --git a/packages/docs/src/examples/v-tabs/misc-content.vue b/packages/docs/src/examples/v-tabs/misc-content.vue new file mode 100644 index 0000000..98cab17 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/misc-content.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue new file mode 100644 index 0000000..a2e0619 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic.vue b/packages/docs/src/examples/v-tabs/misc-dynamic.vue new file mode 100644 index 0000000..fe290dc --- /dev/null +++ b/packages/docs/src/examples/v-tabs/misc-dynamic.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/misc-mobile.vue b/packages/docs/src/examples/v-tabs/misc-mobile.vue new file mode 100644 index 0000000..3d9835c --- /dev/null +++ b/packages/docs/src/examples/v-tabs/misc-mobile.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue b/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue new file mode 100644 index 0000000..93b537b --- /dev/null +++ b/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/misc-pagination.vue b/packages/docs/src/examples/v-tabs/misc-pagination.vue new file mode 100644 index 0000000..54311a3 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/misc-pagination.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/v-tabs/misc-tab-items.vue b/packages/docs/src/examples/v-tabs/misc-tab-items.vue new file mode 100644 index 0000000..3208dbf --- /dev/null +++ b/packages/docs/src/examples/v-tabs/misc-tab-items.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue new file mode 100644 index 0000000..f6c7b87 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue new file mode 100644 index 0000000..cdb081c --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue new file mode 100644 index 0000000..80a979e --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-align-tabs-title.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/prop-center-active.vue b/packages/docs/src/examples/v-tabs/prop-center-active.vue new file mode 100644 index 0000000..3629690 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-center-active.vue @@ -0,0 +1,29 @@ + diff --git a/packages/docs/src/examples/v-tabs/prop-direction.vue b/packages/docs/src/examples/v-tabs/prop-direction.vue new file mode 100644 index 0000000..4b4c8dc --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-direction.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue b/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue new file mode 100644 index 0000000..40c5363 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-fixed-tabs.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-tabs/prop-grow.vue b/packages/docs/src/examples/v-tabs/prop-grow.vue new file mode 100644 index 0000000..eec8625 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-grow.vue @@ -0,0 +1,76 @@ + + + + + + + diff --git a/packages/docs/src/examples/v-tabs/prop-icons.vue b/packages/docs/src/examples/v-tabs/prop-icons.vue new file mode 100644 index 0000000..3c5d10c --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-icons.vue @@ -0,0 +1,16 @@ + diff --git a/packages/docs/src/examples/v-tabs/prop-stacked.vue b/packages/docs/src/examples/v-tabs/prop-stacked.vue new file mode 100644 index 0000000..db0ba0e --- /dev/null +++ b/packages/docs/src/examples/v-tabs/prop-stacked.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/slot-tabs.vue b/packages/docs/src/examples/v-tabs/slot-tabs.vue new file mode 100644 index 0000000..5888db5 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/slot-tabs.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/packages/docs/src/examples/v-tabs/usage.vue b/packages/docs/src/examples/v-tabs/usage.vue new file mode 100644 index 0000000..d3e8bf8 --- /dev/null +++ b/packages/docs/src/examples/v-tabs/usage.vue @@ -0,0 +1,36 @@ + + + diff --git a/packages/docs/src/examples/v-text-field/event-icons.vue b/packages/docs/src/examples/v-text-field/event-icons.vue new file mode 100644 index 0000000..06a15a9 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/event-icons.vue @@ -0,0 +1,114 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/misc-custom-validation.vue b/packages/docs/src/examples/v-text-field/misc-custom-validation.vue new file mode 100644 index 0000000..a12ddab --- /dev/null +++ b/packages/docs/src/examples/v-text-field/misc-custom-validation.vue @@ -0,0 +1,165 @@ + + + diff --git a/packages/docs/src/examples/v-text-field/misc-full-width-with-counter.vue b/packages/docs/src/examples/v-text-field/misc-full-width-with-counter.vue new file mode 100644 index 0000000..0a1914c --- /dev/null +++ b/packages/docs/src/examples/v-text-field/misc-full-width-with-counter.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/misc-guide.vue b/packages/docs/src/examples/v-text-field/misc-guide.vue new file mode 100644 index 0000000..d4cbecb --- /dev/null +++ b/packages/docs/src/examples/v-text-field/misc-guide.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/misc-login-form.vue b/packages/docs/src/examples/v-text-field/misc-login-form.vue new file mode 100644 index 0000000..c630fd8 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/misc-login-form.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/misc-password.vue b/packages/docs/src/examples/v-text-field/misc-password.vue new file mode 100644 index 0000000..1c665eb --- /dev/null +++ b/packages/docs/src/examples/v-text-field/misc-password.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-clearable.vue b/packages/docs/src/examples/v-text-field/prop-clearable.vue new file mode 100644 index 0000000..7857b0f --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-clearable.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-contained.vue b/packages/docs/src/examples/v-text-field/prop-contained.vue new file mode 100644 index 0000000..b96ecdd --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-contained.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-counter.vue b/packages/docs/src/examples/v-text-field/prop-counter.vue new file mode 100644 index 0000000..c8ebe3b --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-counter.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-custom-colors.vue b/packages/docs/src/examples/v-text-field/prop-custom-colors.vue new file mode 100644 index 0000000..ddf77e3 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-custom-colors.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-dense.vue b/packages/docs/src/examples/v-text-field/prop-dense.vue new file mode 100644 index 0000000..6948d66 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-dense.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-disabled-and-readonly.vue b/packages/docs/src/examples/v-text-field/prop-disabled-and-readonly.vue new file mode 100644 index 0000000..e7dd756 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-disabled-and-readonly.vue @@ -0,0 +1,101 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-filled.vue b/packages/docs/src/examples/v-text-field/prop-filled.vue new file mode 100644 index 0000000..16356ed --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-filled.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-hide-details.vue b/packages/docs/src/examples/v-text-field/prop-hide-details.vue new file mode 100644 index 0000000..b72b0c1 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-hide-details.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-hint.vue b/packages/docs/src/examples/v-text-field/prop-hint.vue new file mode 100644 index 0000000..bc6f3d2 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-hint.vue @@ -0,0 +1,77 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-icon.vue b/packages/docs/src/examples/v-text-field/prop-icon.vue new file mode 100644 index 0000000..ebc4ab4 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-icon.vue @@ -0,0 +1,119 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-label.vue b/packages/docs/src/examples/v-text-field/prop-label.vue new file mode 100644 index 0000000..8f420bc --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-label.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-messages.vue b/packages/docs/src/examples/v-text-field/prop-messages.vue new file mode 100644 index 0000000..af45af6 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-messages.vue @@ -0,0 +1,12 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-outlined.vue b/packages/docs/src/examples/v-text-field/prop-outlined.vue new file mode 100644 index 0000000..cb22582 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-outlined.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-placeholder.vue b/packages/docs/src/examples/v-text-field/prop-placeholder.vue new file mode 100644 index 0000000..f85f1df --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-placeholder.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-prefixes-and-suffixes.vue b/packages/docs/src/examples/v-text-field/prop-prefixes-and-suffixes.vue new file mode 100644 index 0000000..a3ff1ee --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-prefixes-and-suffixes.vue @@ -0,0 +1,60 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-rules.vue b/packages/docs/src/examples/v-text-field/prop-rules.vue new file mode 100644 index 0000000..0bfd961 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-rules.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-single-line.vue b/packages/docs/src/examples/v-text-field/prop-single-line.vue new file mode 100644 index 0000000..51f72b7 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-single-line.vue @@ -0,0 +1,50 @@ + diff --git a/packages/docs/src/examples/v-text-field/prop-validation.vue b/packages/docs/src/examples/v-text-field/prop-validation.vue new file mode 100644 index 0000000..8e62120 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-validation.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/prop-variant.vue b/packages/docs/src/examples/v-text-field/prop-variant.vue new file mode 100644 index 0000000..9677d78 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/prop-variant.vue @@ -0,0 +1,78 @@ + diff --git a/packages/docs/src/examples/v-text-field/slot-icons.vue b/packages/docs/src/examples/v-text-field/slot-icons.vue new file mode 100644 index 0000000..3ee21e7 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/slot-icons.vue @@ -0,0 +1,109 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/slot-label.vue b/packages/docs/src/examples/v-text-field/slot-label.vue new file mode 100644 index 0000000..d09c2a4 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/slot-label.vue @@ -0,0 +1,13 @@ + diff --git a/packages/docs/src/examples/v-text-field/slot-progress.vue b/packages/docs/src/examples/v-text-field/slot-progress.vue new file mode 100644 index 0000000..d73ad12 --- /dev/null +++ b/packages/docs/src/examples/v-text-field/slot-progress.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/docs/src/examples/v-text-field/usage.vue b/packages/docs/src/examples/v-text-field/usage.vue new file mode 100644 index 0000000..d54385d --- /dev/null +++ b/packages/docs/src/examples/v-text-field/usage.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/docs/src/examples/v-textarea/misc-signup-form.vue b/packages/docs/src/examples/v-textarea/misc-signup-form.vue new file mode 100644 index 0000000..ea0c10b --- /dev/null +++ b/packages/docs/src/examples/v-textarea/misc-signup-form.vue @@ -0,0 +1,175 @@ + + + + + diff --git a/packages/docs/src/examples/v-textarea/prop-auto-grow.vue b/packages/docs/src/examples/v-textarea/prop-auto-grow.vue new file mode 100644 index 0000000..70eb3e8 --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-auto-grow.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/v-textarea/prop-background-color.vue b/packages/docs/src/examples/v-textarea/prop-background-color.vue new file mode 100644 index 0000000..07b2df8 --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-background-color.vue @@ -0,0 +1,21 @@ + diff --git a/packages/docs/src/examples/v-textarea/prop-browser-autocomplete.vue b/packages/docs/src/examples/v-textarea/prop-browser-autocomplete.vue new file mode 100644 index 0000000..dc43bcc --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-browser-autocomplete.vue @@ -0,0 +1,8 @@ + diff --git a/packages/docs/src/examples/v-textarea/prop-clearable.vue b/packages/docs/src/examples/v-textarea/prop-clearable.vue new file mode 100644 index 0000000..a6032cf --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-clearable.vue @@ -0,0 +1,10 @@ + diff --git a/packages/docs/src/examples/v-textarea/prop-counter.vue b/packages/docs/src/examples/v-textarea/prop-counter.vue new file mode 100644 index 0000000..63ae162 --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-counter.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/docs/src/examples/v-textarea/prop-icons.vue b/packages/docs/src/examples/v-textarea/prop-icons.vue new file mode 100644 index 0000000..f33b1b3 --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-icons.vue @@ -0,0 +1,50 @@ + diff --git a/packages/docs/src/examples/v-textarea/prop-no-resize.vue b/packages/docs/src/examples/v-textarea/prop-no-resize.vue new file mode 100644 index 0000000..fb44dec --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-no-resize.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/docs/src/examples/v-textarea/prop-rows.vue b/packages/docs/src/examples/v-textarea/prop-rows.vue new file mode 100644 index 0000000..a7c9cf6 --- /dev/null +++ b/packages/docs/src/examples/v-textarea/prop-rows.vue @@ -0,0 +1,56 @@ + diff --git a/packages/docs/src/examples/v-textarea/usage.vue b/packages/docs/src/examples/v-textarea/usage.vue new file mode 100644 index 0000000..564ed9d --- /dev/null +++ b/packages/docs/src/examples/v-textarea/usage.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/docs/src/examples/v-theme-provider/prop-with-background.vue b/packages/docs/src/examples/v-theme-provider/prop-with-background.vue new file mode 100644 index 0000000..dd08b7b --- /dev/null +++ b/packages/docs/src/examples/v-theme-provider/prop-with-background.vue @@ -0,0 +1,5 @@ + diff --git a/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue new file mode 100644 index 0000000..6711247 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue b/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue new file mode 100644 index 0000000..54baf57 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue new file mode 100644 index 0000000..0cdf903 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-ampm-in-title.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/packages/docs/src/examples/v-time-picker/prop-color.vue b/packages/docs/src/examples/v-time-picker/prop-color.vue new file mode 100644 index 0000000..1409a47 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-color.vue @@ -0,0 +1,14 @@ + diff --git a/packages/docs/src/examples/v-time-picker/prop-disabled.vue b/packages/docs/src/examples/v-time-picker/prop-disabled.vue new file mode 100644 index 0000000..471529f --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-disabled.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/examples/v-time-picker/prop-elevation.vue b/packages/docs/src/examples/v-time-picker/prop-elevation.vue new file mode 100644 index 0000000..aa3b562 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-elevation.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-time-picker/prop-format.vue b/packages/docs/src/examples/v-time-picker/prop-format.vue new file mode 100644 index 0000000..02d798b --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-format.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-time-picker/prop-hide-header.vue b/packages/docs/src/examples/v-time-picker/prop-hide-header.vue new file mode 100644 index 0000000..976558e --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-hide-header.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-time-picker/prop-range.vue b/packages/docs/src/examples/v-time-picker/prop-range.vue new file mode 100644 index 0000000..cb21e35 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-range.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/packages/docs/src/examples/v-time-picker/prop-readonly.vue b/packages/docs/src/examples/v-time-picker/prop-readonly.vue new file mode 100644 index 0000000..d040d33 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-readonly.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-time-picker/prop-scrollable.vue b/packages/docs/src/examples/v-time-picker/prop-scrollable.vue new file mode 100644 index 0000000..a3e281e --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-scrollable.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/docs/src/examples/v-time-picker/prop-use-seconds.vue b/packages/docs/src/examples/v-time-picker/prop-use-seconds.vue new file mode 100644 index 0000000..a74d785 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/prop-use-seconds.vue @@ -0,0 +1,7 @@ + diff --git a/packages/docs/src/examples/v-time-picker/usage.vue b/packages/docs/src/examples/v-time-picker/usage.vue new file mode 100644 index 0000000..da38232 --- /dev/null +++ b/packages/docs/src/examples/v-time-picker/usage.vue @@ -0,0 +1,32 @@ + + + diff --git a/packages/docs/src/examples/v-timeline/misc-advanced.vue b/packages/docs/src/examples/v-timeline/misc-advanced.vue new file mode 100644 index 0000000..3e673d6 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/misc-advanced.vue @@ -0,0 +1,206 @@ + + + + + diff --git a/packages/docs/src/examples/v-timeline/prop-align.vue b/packages/docs/src/examples/v-timeline/prop-align.vue new file mode 100644 index 0000000..368a741 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-align.vue @@ -0,0 +1,39 @@ + diff --git a/packages/docs/src/examples/v-timeline/prop-color.vue b/packages/docs/src/examples/v-timeline/prop-color.vue new file mode 100644 index 0000000..2813de2 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-color.vue @@ -0,0 +1,60 @@ + diff --git a/packages/docs/src/examples/v-timeline/prop-direction.vue b/packages/docs/src/examples/v-timeline/prop-direction.vue new file mode 100644 index 0000000..1285561 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-direction.vue @@ -0,0 +1,39 @@ + diff --git a/packages/docs/src/examples/v-timeline/prop-icon-dots.vue b/packages/docs/src/examples/v-timeline/prop-icon-dots.vue new file mode 100644 index 0000000..4a85932 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-icon-dots.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/packages/docs/src/examples/v-timeline/prop-line-inset.vue b/packages/docs/src/examples/v-timeline/prop-line-inset.vue new file mode 100644 index 0000000..5b43268 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-line-inset.vue @@ -0,0 +1,24 @@ + diff --git a/packages/docs/src/examples/v-timeline/prop-mirror.vue b/packages/docs/src/examples/v-timeline/prop-mirror.vue new file mode 100644 index 0000000..92ebedb --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-mirror.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/packages/docs/src/examples/v-timeline/prop-single-side.vue b/packages/docs/src/examples/v-timeline/prop-single-side.vue new file mode 100644 index 0000000..0b53c44 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-single-side.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/packages/docs/src/examples/v-timeline/prop-size.vue b/packages/docs/src/examples/v-timeline/prop-size.vue new file mode 100644 index 0000000..5e91638 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-size.vue @@ -0,0 +1,108 @@ + diff --git a/packages/docs/src/examples/v-timeline/prop-truncate-line.vue b/packages/docs/src/examples/v-timeline/prop-truncate-line.vue new file mode 100644 index 0000000..e15c266 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/prop-truncate-line.vue @@ -0,0 +1,72 @@ + diff --git a/packages/docs/src/examples/v-timeline/slot-icon.vue b/packages/docs/src/examples/v-timeline/slot-icon.vue new file mode 100644 index 0000000..c92ee00 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/slot-icon.vue @@ -0,0 +1,18 @@ + diff --git a/packages/docs/src/examples/v-timeline/slot-opposite.vue b/packages/docs/src/examples/v-timeline/slot-opposite.vue new file mode 100644 index 0000000..fe8edc0 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/slot-opposite.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/packages/docs/src/examples/v-timeline/usage.vue b/packages/docs/src/examples/v-timeline/usage.vue new file mode 100644 index 0000000..1d11fb4 --- /dev/null +++ b/packages/docs/src/examples/v-timeline/usage.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/v-toolbar/misc-contextual-action-bar.vue b/packages/docs/src/examples/v-toolbar/misc-contextual-action-bar.vue new file mode 100644 index 0000000..eeab0de --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/misc-contextual-action-bar.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/packages/docs/src/examples/v-toolbar/misc-flexible-and-card.vue b/packages/docs/src/examples/v-toolbar/misc-flexible-and-card.vue new file mode 100644 index 0000000..824eee3 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/misc-flexible-and-card.vue @@ -0,0 +1,42 @@ + diff --git a/packages/docs/src/examples/v-toolbar/misc-variations.vue b/packages/docs/src/examples/v-toolbar/misc-variations.vue new file mode 100644 index 0000000..adfe426 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/misc-variations.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/packages/docs/src/examples/v-toolbar/prop-background.vue b/packages/docs/src/examples/v-toolbar/prop-background.vue new file mode 100644 index 0000000..6d88928 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-background.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/v-toolbar/prop-collapse.vue b/packages/docs/src/examples/v-toolbar/prop-collapse.vue new file mode 100644 index 0000000..f424c15 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-collapse.vue @@ -0,0 +1,18 @@ + diff --git a/packages/docs/src/examples/v-toolbar/prop-dense.vue b/packages/docs/src/examples/v-toolbar/prop-dense.vue new file mode 100644 index 0000000..4e860f1 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-dense.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/v-toolbar/prop-extended.vue b/packages/docs/src/examples/v-toolbar/prop-extended.vue new file mode 100644 index 0000000..1a1b006 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-extended.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/v-toolbar/prop-extension-height.vue b/packages/docs/src/examples/v-toolbar/prop-extension-height.vue new file mode 100644 index 0000000..ba80866 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-extension-height.vue @@ -0,0 +1,31 @@ + diff --git a/packages/docs/src/examples/v-toolbar/prop-floating-with-search.vue b/packages/docs/src/examples/v-toolbar/prop-floating-with-search.vue new file mode 100644 index 0000000..65299f8 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-floating-with-search.vue @@ -0,0 +1,27 @@ + diff --git a/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue b/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue new file mode 100644 index 0000000..9448d03 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue @@ -0,0 +1,43 @@ + diff --git a/packages/docs/src/examples/v-toolbar/prop-prominent.vue b/packages/docs/src/examples/v-toolbar/prop-prominent.vue new file mode 100644 index 0000000..652aee2 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/prop-prominent.vue @@ -0,0 +1,31 @@ + diff --git a/packages/docs/src/examples/v-toolbar/usage.vue b/packages/docs/src/examples/v-toolbar/usage.vue new file mode 100644 index 0000000..e7a63e2 --- /dev/null +++ b/packages/docs/src/examples/v-toolbar/usage.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/docs/src/examples/v-tooltip-directive/args.vue b/packages/docs/src/examples/v-tooltip-directive/args.vue new file mode 100644 index 0000000..0144dfa --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/args.vue @@ -0,0 +1,19 @@ + diff --git a/packages/docs/src/examples/v-tooltip-directive/modifiers.vue b/packages/docs/src/examples/v-tooltip-directive/modifiers.vue new file mode 100644 index 0000000..7150bc7 --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/modifiers.vue @@ -0,0 +1,5 @@ + diff --git a/packages/docs/src/examples/v-tooltip-directive/object-literals.vue b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue new file mode 100644 index 0000000..d990da4 --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/object-literals.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/docs/src/examples/v-tooltip-directive/usage.vue b/packages/docs/src/examples/v-tooltip-directive/usage.vue new file mode 100644 index 0000000..0177d21 --- /dev/null +++ b/packages/docs/src/examples/v-tooltip-directive/usage.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/docs/src/examples/v-tooltip/prop-color.vue b/packages/docs/src/examples/v-tooltip/prop-color.vue new file mode 100644 index 0000000..02382bb --- /dev/null +++ b/packages/docs/src/examples/v-tooltip/prop-color.vue @@ -0,0 +1,55 @@ + diff --git a/packages/docs/src/examples/v-tooltip/prop-location.vue b/packages/docs/src/examples/v-tooltip/prop-location.vue new file mode 100644 index 0000000..cfa584e --- /dev/null +++ b/packages/docs/src/examples/v-tooltip/prop-location.vue @@ -0,0 +1,35 @@ + diff --git a/packages/docs/src/examples/v-tooltip/prop-visibility.vue b/packages/docs/src/examples/v-tooltip/prop-visibility.vue new file mode 100644 index 0000000..548c0a8 --- /dev/null +++ b/packages/docs/src/examples/v-tooltip/prop-visibility.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/packages/docs/src/examples/v-tooltip/usage.vue b/packages/docs/src/examples/v-tooltip/usage.vue new file mode 100644 index 0000000..ae2032e --- /dev/null +++ b/packages/docs/src/examples/v-tooltip/usage.vue @@ -0,0 +1,56 @@ + + + diff --git a/packages/docs/src/examples/v-touch/usage.vue b/packages/docs/src/examples/v-touch/usage.vue new file mode 100644 index 0000000..18b2f7f --- /dev/null +++ b/packages/docs/src/examples/v-touch/usage.vue @@ -0,0 +1,33 @@ + + + diff --git a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue new file mode 100644 index 0000000..7333aef --- /dev/null +++ b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue @@ -0,0 +1,200 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue new file mode 100644 index 0000000..0cf3925 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue @@ -0,0 +1,203 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/playground.vue b/packages/docs/src/examples/v-treeview/playground.vue new file mode 100644 index 0000000..b595e7a --- /dev/null +++ b/packages/docs/src/examples/v-treeview/playground.vue @@ -0,0 +1,251 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-activatable.vue b/packages/docs/src/examples/v-treeview/prop-activatable.vue new file mode 100644 index 0000000..3d6a9fd --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-activatable.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-color.vue b/packages/docs/src/examples/v-treeview/prop-color.vue new file mode 100644 index 0000000..a3b8173 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-color.vue @@ -0,0 +1,163 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-dense.vue b/packages/docs/src/examples/v-treeview/prop-dense.vue new file mode 100644 index 0000000..eaeb25f --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-dense.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-hoverable.vue b/packages/docs/src/examples/v-treeview/prop-hoverable.vue new file mode 100644 index 0000000..040197f --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-hoverable.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-item-props.vue b/packages/docs/src/examples/v-treeview/prop-item-props.vue new file mode 100644 index 0000000..a79c0c5 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-item-props.vue @@ -0,0 +1,86 @@ + + + diff --git a/packages/docs/src/examples/v-treeview/prop-load-children.vue b/packages/docs/src/examples/v-treeview/prop-load-children.vue new file mode 100644 index 0000000..0b9fb17 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-load-children.vue @@ -0,0 +1,215 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-open-all.vue b/packages/docs/src/examples/v-treeview/prop-open-all.vue new file mode 100644 index 0000000..9bd8454 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-open-all.vue @@ -0,0 +1,163 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-rounded.vue b/packages/docs/src/examples/v-treeview/prop-rounded.vue new file mode 100644 index 0000000..5792347 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-rounded.vue @@ -0,0 +1,163 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-selectable.vue b/packages/docs/src/examples/v-treeview/prop-selectable.vue new file mode 100644 index 0000000..2bbb66a --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-selectable.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-selected-color.vue b/packages/docs/src/examples/v-treeview/prop-selected-color.vue new file mode 100644 index 0000000..8e14dbf --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-selected-color.vue @@ -0,0 +1,163 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-selection-type.vue b/packages/docs/src/examples/v-treeview/prop-selection-type.vue new file mode 100644 index 0000000..c4d3f43 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-selection-type.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/prop-shaped.vue b/packages/docs/src/examples/v-treeview/prop-shaped.vue new file mode 100644 index 0000000..38bff57 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/prop-shaped.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue new file mode 100644 index 0000000..e52f278 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue @@ -0,0 +1,159 @@ + + + + + diff --git a/packages/docs/src/examples/v-treeview/usage.vue b/packages/docs/src/examples/v-treeview/usage.vue new file mode 100644 index 0000000..af771c0 --- /dev/null +++ b/packages/docs/src/examples/v-treeview/usage.vue @@ -0,0 +1,82 @@ + + + diff --git a/packages/docs/src/examples/v-virtual-scroll/misc-user-directory.vue b/packages/docs/src/examples/v-virtual-scroll/misc-user-directory.vue new file mode 100644 index 0000000..78caac0 --- /dev/null +++ b/packages/docs/src/examples/v-virtual-scroll/misc-user-directory.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/packages/docs/src/examples/v-virtual-scroll/prop-dynamic-item-height.vue b/packages/docs/src/examples/v-virtual-scroll/prop-dynamic-item-height.vue new file mode 100644 index 0000000..1114185 --- /dev/null +++ b/packages/docs/src/examples/v-virtual-scroll/prop-dynamic-item-height.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/docs/src/examples/v-virtual-scroll/prop-height-parent.vue b/packages/docs/src/examples/v-virtual-scroll/prop-height-parent.vue new file mode 100644 index 0000000..94e53e7 --- /dev/null +++ b/packages/docs/src/examples/v-virtual-scroll/prop-height-parent.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/docs/src/examples/v-virtual-scroll/prop-height.vue b/packages/docs/src/examples/v-virtual-scroll/prop-height.vue new file mode 100644 index 0000000..1c04509 --- /dev/null +++ b/packages/docs/src/examples/v-virtual-scroll/prop-height.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/docs/src/examples/v-virtual-scroll/prop-item-height.vue b/packages/docs/src/examples/v-virtual-scroll/prop-item-height.vue new file mode 100644 index 0000000..5302b74 --- /dev/null +++ b/packages/docs/src/examples/v-virtual-scroll/prop-item-height.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/docs/src/examples/v-virtual-scroll/usage.vue b/packages/docs/src/examples/v-virtual-scroll/usage.vue new file mode 100644 index 0000000..5e00620 --- /dev/null +++ b/packages/docs/src/examples/v-virtual-scroll/usage.vue @@ -0,0 +1,44 @@ + + + diff --git a/packages/docs/src/examples/v-window/misc-account-creation.vue b/packages/docs/src/examples/v-window/misc-account-creation.vue new file mode 100644 index 0000000..97d49cd --- /dev/null +++ b/packages/docs/src/examples/v-window/misc-account-creation.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/packages/docs/src/examples/v-window/misc-onboarding.vue b/packages/docs/src/examples/v-window/misc-onboarding.vue new file mode 100644 index 0000000..69c656e --- /dev/null +++ b/packages/docs/src/examples/v-window/misc-onboarding.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/packages/docs/src/examples/v-window/prop-direction.vue b/packages/docs/src/examples/v-window/prop-direction.vue new file mode 100644 index 0000000..8e3666e --- /dev/null +++ b/packages/docs/src/examples/v-window/prop-direction.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/examples/v-window/prop-reverse.vue b/packages/docs/src/examples/v-window/prop-reverse.vue new file mode 100644 index 0000000..6d900d9 --- /dev/null +++ b/packages/docs/src/examples/v-window/prop-reverse.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/packages/docs/src/examples/v-window/prop-show-arrows.vue b/packages/docs/src/examples/v-window/prop-show-arrows.vue new file mode 100644 index 0000000..83f3350 --- /dev/null +++ b/packages/docs/src/examples/v-window/prop-show-arrows.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/docs/src/examples/v-window/slots-next-prev.vue b/packages/docs/src/examples/v-window/slots-next-prev.vue new file mode 100644 index 0000000..076a449 --- /dev/null +++ b/packages/docs/src/examples/v-window/slots-next-prev.vue @@ -0,0 +1,36 @@ + diff --git a/packages/docs/src/examples/v-window/usage.vue b/packages/docs/src/examples/v-window/usage.vue new file mode 100644 index 0000000..646251b --- /dev/null +++ b/packages/docs/src/examples/v-window/usage.vue @@ -0,0 +1,24 @@ + + + diff --git a/packages/docs/src/examples/why-vuetify/card-components.vue b/packages/docs/src/examples/why-vuetify/card-components.vue new file mode 100644 index 0000000..c4e5873 --- /dev/null +++ b/packages/docs/src/examples/why-vuetify/card-components.vue @@ -0,0 +1,9 @@ + diff --git a/packages/docs/src/examples/why-vuetify/card-props.vue b/packages/docs/src/examples/why-vuetify/card-props.vue new file mode 100644 index 0000000..3d03763 --- /dev/null +++ b/packages/docs/src/examples/why-vuetify/card-props.vue @@ -0,0 +1,6 @@ + diff --git a/packages/docs/src/examples/why-vuetify/card-slots.vue b/packages/docs/src/examples/why-vuetify/card-slots.vue new file mode 100644 index 0000000..f0f42c4 --- /dev/null +++ b/packages/docs/src/examples/why-vuetify/card-slots.vue @@ -0,0 +1,11 @@ + diff --git a/packages/docs/src/examples/wireframes/baseline.vue b/packages/docs/src/examples/wireframes/baseline.vue new file mode 100644 index 0000000..f9d21b9 --- /dev/null +++ b/packages/docs/src/examples/wireframes/baseline.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/docs/src/examples/wireframes/constrained.vue b/packages/docs/src/examples/wireframes/constrained.vue new file mode 100644 index 0000000..07c47ee --- /dev/null +++ b/packages/docs/src/examples/wireframes/constrained.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/packages/docs/src/examples/wireframes/discord.vue b/packages/docs/src/examples/wireframes/discord.vue new file mode 100644 index 0000000..9a9717d --- /dev/null +++ b/packages/docs/src/examples/wireframes/discord.vue @@ -0,0 +1,99 @@ + diff --git a/packages/docs/src/examples/wireframes/extended-toolbar.vue b/packages/docs/src/examples/wireframes/extended-toolbar.vue new file mode 100644 index 0000000..f54725a --- /dev/null +++ b/packages/docs/src/examples/wireframes/extended-toolbar.vue @@ -0,0 +1,28 @@ + diff --git a/packages/docs/src/examples/wireframes/inbox.vue b/packages/docs/src/examples/wireframes/inbox.vue new file mode 100644 index 0000000..00ecdd7 --- /dev/null +++ b/packages/docs/src/examples/wireframes/inbox.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/packages/docs/src/examples/wireframes/side-navigation.vue b/packages/docs/src/examples/wireframes/side-navigation.vue new file mode 100644 index 0000000..04097b6 --- /dev/null +++ b/packages/docs/src/examples/wireframes/side-navigation.vue @@ -0,0 +1,22 @@ + diff --git a/packages/docs/src/examples/wireframes/steam.vue b/packages/docs/src/examples/wireframes/steam.vue new file mode 100644 index 0000000..d0d6b71 --- /dev/null +++ b/packages/docs/src/examples/wireframes/steam.vue @@ -0,0 +1,279 @@ + + + diff --git a/packages/docs/src/examples/wireframes/system-bar.vue b/packages/docs/src/examples/wireframes/system-bar.vue new file mode 100644 index 0000000..a4b6bf9 --- /dev/null +++ b/packages/docs/src/examples/wireframes/system-bar.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/packages/docs/src/examples/wireframes/three-column.vue b/packages/docs/src/examples/wireframes/three-column.vue new file mode 100644 index 0000000..ea3b0a1 --- /dev/null +++ b/packages/docs/src/examples/wireframes/three-column.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/packages/docs/src/i18n/locales.json b/packages/docs/src/i18n/locales.json new file mode 100644 index 0000000..cc734f0 --- /dev/null +++ b/packages/docs/src/i18n/locales.json @@ -0,0 +1,48 @@ +[ + { + "title": "English", + "locale": "en", + "enabled": true + }, + { + "title": "日本語", + "locale": "ja-JP", + "alternate": "ja", + "enabled": true + }, + { + "title": "简体中文", + "locale": "zh-CN", + "alternate": "zh-Hans", + "enabled": true + }, + { + "title": "Deutsch", + "locale": "de-DE", + "alternate": "de", + "enabled": false + }, + { + "title": "Français", + "locale": "fr-FR", + "alternate": "fr", + "enabled": false + }, + { + "title": "Русский", + "locale": "ru-RU", + "alternate": "ru", + "enabled": false + }, + { + "title": "한국어", + "locale": "ko-KR", + "alternate": "ko", + "enabled": false + }, + { + "title": "Help translate", + "locale": "eo-UY", + "enabled": true + } +] diff --git a/packages/docs/src/i18n/messages/.gitignore b/packages/docs/src/i18n/messages/.gitignore new file mode 100644 index 0000000..4feda81 --- /dev/null +++ b/packages/docs/src/i18n/messages/.gitignore @@ -0,0 +1,3 @@ +* +!.gitignore +!en.json \ No newline at end of file diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json new file mode 100644 index 0000000..f5de14a --- /dev/null +++ b/packages/docs/src/i18n/messages/en.json @@ -0,0 +1,349 @@ +{ + "home": { + "get-started": "Get Started", + "why-vuetify": "Why Vuetify?" + }, + "about": "About", + "accessibility": "Accessibility (a11y)", + "ads": "Ads", + "ads-via-vuetify": "ads via Vuetify", + "all-components": "All Components", + "alpha": "Alpha", + "api": "API", + "api-headers": { + "links": "Component Pages", + "argument": "Argument", + "events": "Events", + "functions": "Functions", + "modifiers": "Modifiers", + "props": "Props", + "sass": "SASS Variables", + "slots": "Slots", + "exposed": "Exposed", + "value": "Value" + }, + "api-explorer": "API Explorer", + "application": "Application", + "apply": "Apply", + "awesome": "Awesome", + "bars": "Bars", + "become-a-sponsor": "Become a sponsor", + "blackguard": "Blackguard", + "brand-kit": "Brand Kit", + "breakpoints-table": { + "caption": "Material Design Breakpoints", + "small-to-large-handset": "Small to large phone", + "small-to-medium-tablet": "Small to medium tablet", + "large-tablet-to-laptop": "Large tablet to laptop", + "desktop": "Laptop to desktop", + "large-to-extra-large": "1080p to 1440p desktop", + "extra-large-to-extra-extra-large": "4k and ultra-wide", + "spec": "Specification" + }, + "breakpoints": "Breakpoints", + "browse-components": "Browse Components", + "dark-code": "Dark code blocks", + "dark-code-message": "Change all code blocks to use a dark theme.", + "documentation-build": "Documentation Build", + "business": "Business", + "cancel": "Cancel", + "close": "Close", + "code": "Code", + "colors": "Colors", + "composition": "Composition", + "copied": "Copied!", + "copy-link": "Copy link", + "company": "Company", + "comparison": { + "average": "**Based on average of all Major/Minor/Patch releases over the last 12 months.", + "a11y": "Accessibility and section 508 support", + "caption": "Vue Framework Comparison {year}", + "enterprise": "Business and enterprise support", + "lts": "18 months LTS (Long-term support)", + "release": "Release cadence**", + "rtl": "RTL support", + "themes": "Premium themes", + "tree": "Treeshaking" + }, + "component": "Component", + "components": "Components", + "contents": "Contents", + "containment": "Containment", + "contribute": { + "edit-page": "Edit this page on {url}", + "last-updated": "Last updated:" + }, + "communication": "Communication", + "communication-message": "Vuetify will communicate with you through banners and notifications. You can disable these features here or reset your local notification cache.", + "community": "Community", + "community-support": "Community support", + "contact-us": "Contact Us", + "cookie-policy": "Cookie Policy", + "copy-example-source": "Copy example source", + "copy-source": "Copy source", + "copyright": "Copyright {0}", + "create": "Create", + "customization": "Customization", + "dark": "Dark", + "dashboard": { + "connected-accounts": "Connected accounts", + "advanced-options": { + "danger-zone": "Danger zone", + "danger-zone-message": "The following settings are for development purposes." + }, + "perks": { + "alert": "Support Vuetify and gain access to exclusive documentation perks and features for only", + "avatar": "Avatar", + "avatar-message": "Add a custom avatar image displayed on the user profile and user bar.", + "disable-ads": "Disable Ads", + "disable-ads-message": "Disable advertisements on all documentation pages.", + "enable-ads": "Enable Ads", + "experience": "Experience", + "experience-message": "These options change your browsing experience within the documentation.", + "layout": "Layout", + "layout-message": "Modify various the visiblity and behavior of various elements of the documentation.", + "rail-drawer": "Rail drawer", + "rail-drawer-message": "Show the navigation drawer as a rail that expands on hover", + "disable-quickbar": "Disable Quickbar", + "disable-quickbar-message": "Hide the Quickbar actions located on the top right of the documentation", + "enable-pins": "Enable pins", + "enable-pins-message": "Bookmark and access vital documentation pages for a more efficient workflow." + } + }, + "data-tables": "Data tables", + "data-and-display": "Data & display", + "grids": "Grids", + "details": "Details", + "developer-mode": "Developer mode", + "developer-mode-message": "Developer mode enables new features and functionality within the documentation that are still in development.", + "device": "Device", + "design-spec": "Design Specification", + "direction": "Direction", + "directive": "Directive", + "directives": "Directives", + "discuss-on-discord": "Discuss on Discord", + "discuss-on-github": "Discuss on GitHub", + "discussions": "Discussions", + "display": "Display", + "display-message": "Toggle various elements of the documentation experience.", + "documentation": "Documentation", + "documentation-status": "Documentation status", + "download-brand-kit": "Download Brand Kit", + "drawer-navigation-grouping": "Drawer navigation grouping", + "direct-support": "Direct support", + "discord": "Discord", + "done": "All done", + "edit-in-playground": "Edit in Vuetify Playground", + "edit-this-page": "Edit this page on", + "edit": "Edit", + "enable-banners": "Enable banners", + "enable-banners-message": "Banners are located at the top of the screen and usually provide general information about Vuetify.", + "enable-composition": "Enable Composition API", + "enable-composition-message": "Determines the script shown in code examples for components.", + "enable-inline-api": "Enable Inline API", + "enable-inline-api-message": "Display API tables inline on documentation pages.", + "enable-notifications": "Enable notifications", + "enable-notifications-message": "Notifications are located at the top right of the screen in the actions bar and provide information about new releases, updates, and other important information.", + "enable-pwa-refresh": "Enable Refresh Prompt", + "enable-pwa-refresh-message": "Display the refresh prompt when new documentation updates have been downloaded.", + "enterprise": "Enterprise", + "email-address": "Email address", + "esc": "Esc", + "extra-extra-large": "Extra extra large", + "extra-large": "Extra large", + "extra-small": "Extra small", + "faq": "FAQs", + "feature-guides": "Feature guides", + "features": "Features", + "feedback": "Feedback", + "figma-design": "Figma Design", + "file-a-bug-report": "File a bug report", + "focus": "Focus", + "for-enterprise": "For Enterprise", + "form-inputs-and-controls": "Form inputs & controls", + "framework-services": "Framework services", + "functional": "Functional", + "funding": "Funding", + "general": "General", + "general-message": "Enable composition API for examples, show component API inline, and more.", + "getting-started": "Getting started", + "get-help": "Get help", + "github": "GitHub", + "github-discussions": "GitHub discussions", + "github-issues": "GitHub issues", + "github-releases": "GitHub releases", + "grid": "Grid", + "groups": "Groups", + "guide": "Guide", + "guides": "Guides", + "help-and-support": "Help and support", + "hide-source": "Hide source", + "homepage": "Vuetify Home Page", + "icon": "Icon", + "icons": "Icons", + "images-and-icons": "Images & icons", + "inline": "Inline", + "introduction": "Introduction", + "invert-example-colors": "Invert example colors", + "jobs": "Jobs", + "jobs-for-vue": "Jobs for Vue", + "joined": "Joined {date}", + "labs": "Labs", + "laptop": "Laptop", + "languages": "Languages", + "large": "Large", + "latest-commit": "Latest commit", + "latest-release": "Latest release", + "latest-releases": "Latest releases", + "layout": "Layout", + "layout-link": "Link to layout for {name}", + "learn": "Learn", + "licensing": "Licensing", + "light": "Light", + "link-only": "Link Only", + "load-more": "Load more...", + "login": { + "login": "Log in", + "logout": "Log out", + "to-vuetify": "Log in to Vuetify", + "welcome-back": "Welcome back!", + "tagline": "Sign in with GitHub or Discord to save your settings and unlock exclusive subscriber perks.", + "last-used": "Last used", + "with-github": "Continue with GitHub", + "with-discord": "Continue with Discord", + "connect-github": "Connect GitHub", + "connect-discord": "Connect Discord" + }, + "logo": "Logo", + "ltr": "LTR", + "marked-read": "Mark all read", + "marked-unread": "Mark all unread", + "md": "Material Design", + "medium": "Medium", + "miscellaneous": "Miscellaneous", + "missing": "Could not load example `{file}`", + "mit-license": "MIT License", + "mixed": "Mixed", + "more-coming-soon": "More coming soon...", + "my-dashboard": "My Dashboard", + "name": "Name", + "navigation": "Navigation", + "new": "New", + "new-in": "New in v{version}", + "newsletter": "Newsletter", + "notifications": "Notifications", + "not-found": "Not Found", + "open-github-release": "Open GitHub release", + "open-issues": "Open issues", + "options": "Options", + "overlays": "Overlays", + "overview": "Overview", + "output": "Output", + "pastebin": "Pastebin", + "page": "Page", + "phone": "Phone", + "pickers": "Pickers", + "platinum-sponsors": "Platinum Sponsors", + "playground": "Playground", + "policy": "Policy", + "premiere-sponsors": "Premiere Sponsors", + "premium": "Premium", + "privacy-policy": "Privacy Policy", + "professional-support": "Professional support", + "progress": "Progress", + "providers": "Providers", + "published": "Published: {date}", + "range": "Range", + "read": "View Read ({number})", + "ready-text": "Continue your learning with related content selected by the {team} or move between pages by using the navigation links below.", + "ready": "Ready for more?", + "reddit": "Reddit", + "release-notes": "Release notes", + "released-by": "Released by: {author}", + "release": "Release", + "releases": "Releases", + "released-under-the": "Released under the {0}", + "report-a-bug": "Report a Bug", + "reset": "Reset", + "reset-all": "Reset All", + "reset-all-settings": "Reset All Settings", + "resources-and-tools": "Resources and tools", + "resources": "Resources", + "roadmap": "Roadmap", + "rtl": "RTL", + "scroll-to-top": "Scroll to top", + "sass-variables": "SASS Variables", + "search": { + "icons": "Search for icons (e.g. account, close)", + "label": "Search", + "looking": "Looking for", + "key-hint": "Ctrl+K", + "key-hint-mac": "Cmd+K", + "key-hint-slash": "Press /", + "results": "Your search results will appear here", + "no-results": "No results found", + "recent": "Recent" + }, + "search-api": "Search API", + "search-jobs": "Search Jobs", + "search-sass-api": "Search SASS Variables", + "section": "Section", + "see-more-projects": "See More Projects", + "see-more-themes-from": "See More Themes From {vendor}", + "selection": "Selection", + "services": "Services", + "settings": "Documentation settings", + "slash-search": "Use / for Search hotkey", + "slash-search-message": "This option sets the bound search key to '/' from Cmd/Ctrl+K.", + "small": "Small", + "snips": "Snips", + "social": "Social", + "sponsor": "Sponsor", + "sponsors": "Sponsors", + "stack-overflow": "Stack overflow", + "standard": "Standard", + "store": "Store", + "styles": "Styles and animations", + "subscribe": "Subscribe", + "subscribe-to-our": "Subscribe to our {0}", + "subscribe-to-unlock": "Subscribe to Unlock", + "sync-settings": "Sync settings", + "sync-settings-message": "When logged in w/ GitHub, sync settings across devices.", + "support": "Support", + "system": "System", + "tables": "Tables", + "tablet": "Tablet", + "team": "Team", + "template": "Template", + "text": "Text", + "theme": "Theme", + "theme-message": "Customize your documentation experience with light and dark themes, as well as a combination of both named.", + "themes": "Themes", + "tidelift": { + "demo": "Request a demo", + "more": "Learn more" + }, + "toggle": "Toggle {0}", + "tools": "Tools", + "transition": "Transition", + "translations": "Translations", + "type": "Type | Types", + "types": "Types", + "twitter": "Twitter", + "ui-components": "UI Components", + "ui-kits": "UI Kits", + "ui": "UI", + "ultra-wide": "Ultra-wide", + "upgrade-guide": "Upgrade guide", + "unit-testing": "Unit testing", + "unread": "View Unread ({number})", + "unlock-with-github": "Unlock with GitHub", + "updated": "Updated", + "utility-classes": "Utility classes", + "video-courses": "Video courses", + "view-in-github": "View on GitHub", + "view-source": "View source", + "viewport": "Viewport", + "vuetify": "Vuetify", + "x": "X" +} diff --git a/packages/docs/src/layouts/404.vue b/packages/docs/src/layouts/404.vue new file mode 100644 index 0000000..da34843 --- /dev/null +++ b/packages/docs/src/layouts/404.vue @@ -0,0 +1,42 @@ + + + diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue new file mode 100644 index 0000000..20cd94f --- /dev/null +++ b/packages/docs/src/layouts/default.vue @@ -0,0 +1,45 @@ + + + diff --git a/packages/docs/src/layouts/home.vue b/packages/docs/src/layouts/home.vue new file mode 100644 index 0000000..9eaa631 --- /dev/null +++ b/packages/docs/src/layouts/home.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/docs/src/layouts/user.vue b/packages/docs/src/layouts/user.vue new file mode 100644 index 0000000..d4034c8 --- /dev/null +++ b/packages/docs/src/layouts/user.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/docs/src/layouts/wireframe.vue b/packages/docs/src/layouts/wireframe.vue new file mode 100644 index 0000000..a7b32cd --- /dev/null +++ b/packages/docs/src/layouts/wireframe.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/docs/src/main.ts b/packages/docs/src/main.ts new file mode 100644 index 0000000..f328c80 --- /dev/null +++ b/packages/docs/src/main.ts @@ -0,0 +1,159 @@ +// Styles +import 'prism-theme-vars/base.css' + +// Plugins +import { createApp } from 'vue' +import { createRouter, createWebHistory } from 'vue-router' +import { createHead } from '@unhead/vue' +import { installVuetify } from '@/plugins/vuetify' +import { installPinia, pinia } from '@/plugins/pinia' +import { installGlobalComponents } from '@/plugins/global-components' +import { installGtag } from '@/plugins/gtag' +import { installOne } from '@/plugins/one' +import { installI18n } from '@/plugins/i18n' +import { useAppStore } from '@/stores/app' +import { useLocaleStore } from '@/stores/locale' +import { installPwa } from '@/plugins/pwa' +import { useUserStore } from '@vuetify/one' + +// App +import App from './App.vue' + +// Virtual +// import 'virtual:api' +import { setupLayouts } from 'virtual:generated-layouts' + +// Utilities +import { + disabledLanguagePattern, + generatedRoutes, + languagePattern, + redirectRoutes, + rpath, + trailingSlash, +} from '@/utils/routes' +import { wrapInArray } from '@/utils/helpers' + +// Globals +import { IN_BROWSER } from '@/utils/globals' + +const routes = setupLayouts(generatedRoutes) + +const appStore = useAppStore(pinia) +const localeStore = useLocaleStore(pinia) +const userStore = useUserStore(pinia) + +if (IN_BROWSER) { + localeStore.$subscribe((_, state) => { + window.localStorage.setItem('currentLocale', state.locale) + }) + userStore.$subscribe(() => { + userStore.save() + }) +} + +const app = createApp(App) +const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + redirect: () => { + return { path: `/${localeStore.locale}/` } + }, + }, + ...routes, + ...redirectRoutes, + { + path: `/:locale(${disabledLanguagePattern})/:pathMatch(.*)*`, + redirect: to => { + return rpath(wrapInArray(to.params.pathMatch).join('/')) + }, + }, + { + path: `/:locale(${languagePattern})/:pathMatch(.*)*`, + component: () => import('@/layouts/404.vue'), + }, + { + path: '/:pathMatch(.*)*', + redirect: to => { + return rpath(to.fullPath) + }, + }, + ], + async scrollBehavior (to, from, savedPosition) { + if (appStore.scrolling) return + + let main = IN_BROWSER && document.querySelector('main') + // For default & hash navigation + let wait = 0 + + if (!main) { + // For initial page load + wait = 1500 + main = document.querySelector('main') + } else if (to.path !== from.path && to.hash) { + // For cross page navigation + wait = 500 + } + + await (new Promise(resolve => setTimeout(resolve, wait))) + + if (to.hash) { + return { + el: to.hash, + behavior: main ? 'smooth' : undefined, + top: main ? parseInt(getComputedStyle(main).getPropertyValue('--v-layout-top')) : 0, + } + } else if (savedPosition) return savedPosition + else return { top: 0 } + }, +}) + +app.use(createHead()) +app.use(router) + +app.config.errorHandler = (err, vm, info) => { + console.error(err, vm, info) +} +app.config.warnHandler = (err, vm, info) => { + console.warn(err, vm, info) +} + +router.beforeEach((to, from, next) => { + if (to.meta.locale !== from.meta.locale) { + localeStore.locale = to.meta.locale as string + } + return to.path.endsWith('/') ? next() : next(`${trailingSlash(to.path)}` + to.hash) +}) +router.afterEach((to, from) => { + if (to.meta.locale !== from.meta.locale && from.meta.locale === 'eo-UY') { + setTimeout(() => window.location.reload(), 100) + } +}) +router.onError((err, to) => { + if (err?.message?.includes?.('Failed to fetch dynamically imported module')) { + if (!localStorage.getItem('vuetify:dynamic-reload')) { + console.log('Reloading page to fix dynamic import error') + localStorage.setItem('vuetify:dynamic-reload', 'true') + location.assign(to.fullPath) + } else { + console.error('Dynamic import error, reloading page did not fix it', err) + } + } else { + console.error(err) + } +}) + +installGlobalComponents(app) +installGtag(app, router) +installI18n(app) +installPwa(router) +installPinia(app, router) +installVuetify(app) +installOne(app) + +router.isReady().then(() => { + localStorage.removeItem('vuetify:dynamic-reload') + app.mount('#app') +}) diff --git a/packages/docs/src/pages/en/about/code-of-conduct.md b/packages/docs/src/pages/en/about/code-of-conduct.md new file mode 100644 index 0000000..d30fb48 --- /dev/null +++ b/packages/docs/src/pages/en/about/code-of-conduct.md @@ -0,0 +1,56 @@ +--- +meta: + title: Code of conduct + description: Vuetify provides a safe, inclusive, and judgement free community for developers from all walks of life! + keywords: vuetify code of conduct, vuetify coc, community conduct +--- + +# Code of conduct + +For questions or concerns regarding our *Code of Conduct*, please reach out to us at [support@vuetifyjs.com](mailto:support@vuetifyjs.com). + + + + + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers 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, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@vuetifyjs.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. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org), version 1.4, available at [https://contributor-covenant.org/version/1/4](https://contributor-covenant.org/version/1/4/) diff --git a/packages/docs/src/pages/en/about/licensing.md b/packages/docs/src/pages/en/about/licensing.md new file mode 100644 index 0000000..13566ab --- /dev/null +++ b/packages/docs/src/pages/en/about/licensing.md @@ -0,0 +1,62 @@ +--- +meta: + nav: Licensing + title: Licensing + description: Explore the MIT License under which Vuetify is available, understand your freedoms for using, modifying, and distributing Vuetify, and learn about community contributions. + keywords: MIT License, open source, Vuetify license, free software +related: + - /introduction/why-vuetify/ + - /getting-started/contributing/ + - /introduction/enterprise-support/ +--- + +# Licensing + +This document provides comprehensive details about the licensing of the Vuetify framework. + + + + + +## Overview + +Vuetify is an open-source project that is free to use. It is licensed under the [MIT License](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md), one of the most permissive and flexible open source licenses available. + +## What is the MIT License? + +The MIT License is one of the most widely used licenses in the open-source community, known for its simplicity and permissiveness. This license grants users significant freedom in how they use, modify, and distribute software. Here are its key features and what they mean for Vuetify users: + +- **Freedom to Use**: The MIT License allows you to use Vuetify for any purpose - whether it's a private hobby project, a high-scale commercial application, or a public service. This level of freedom ensures that Vuetify is accessible to everyone, regardless of their project's nature or scale. +- **Freedom to Modify**: Flexibility is at the core of Vuetify, and the MIT License extends this principle. You have the freedom to tweak, customize, and modify Vuetify to suit your project's unique requirements. This feature is particularly beneficial for developers looking to tailor their UI/UX without constraints. +- **Freedom to Distribute**: The license not only allows you to use and modify Vuetify but also to distribute your version of it. Whether you're distributing your Vuetify-based project openly or commercially, the MIT License supports your endeavors. This aspect is crucial for fostering a culture of sharing and innovation in the developer community. +- **No Warranty**: Please note that Vuetify is provided "as is", without any warranty of any kind. This is a standard clause in open-source licenses, emphasizing that users should test and evaluate the software in their specific contexts. While there's no formal warranty, the Vuetify team is committed to delivering a high-quality, robust framework, continuously working to improve its reliability and functionality. + +The MIT License's simplicity and breadth make it an ideal choice for Vuetify, aligning with our commitment to open-source values and community-driven development. + +## Why MIT License for Vuetify? + +Choosing the MIT License for Vuetify was a deliberate decision to align with our core values of openness, simplicity, and community collaboration. Here’s why this license is the perfect fit for Vuetify: + +- **Simplicity and Permissiveness**: The MIT License is renowned for its simplicity and clarity. It doesn't impose complex restrictions, making it straightforward for developers to use Vuetify in various projects. Whether you're building a small personal project or a large-scale commercial application, the MIT License keeps things simple and unrestricted. +- **Broad Compatibility**: One of Vuetify's strengths is its compatibility with a wide range of other tools and libraries. The MIT License is known for its broad compatibility with other open-source licenses. This compatibility makes it easier for developers to integrate Vuetify with other software, fostering a more vibrant and versatile ecosystem. +- **Encourages Open Source Contribution**: Vuetify thrives on community contributions. The permissive nature of the MIT License encourages developers from around the world to contribute to Vuetify, enhancing its features and functionality. This collaborative spirit has been pivotal in shaping Vuetify into the robust and versatile framework it is today. + +By adopting the MIT License, Vuetify remains committed to promoting innovation, collaboration, and freedom in software development. We believe this approach not only benefits Vuetify but also the broader open-source community. + +## Using Vuetify in Your Projects + +You are free to use Vuetify in your projects, be it personal, commercial, or for educational purposes. The flexibility of the MIT License allows for a wide range of applications. When redistributing Vuetify or derivative works, the only requirement is to include the original copyright and license notice in any copy of the software/source code. + +To get inspired or see what's possible with Vuetify, check out [Awesome Vuetify](https://github.com/vuetifyjs/awesome-vuetify), a curated list of awesome Vuetify resources, libraries, and tools. Additionally, explore the [Made With Vuetify](/resources/made-with-vuetify/) page to see a showcase of applications and projects built using Vuetify. These resources can provide you with ideas and examples of how Vuetify can enhance your projects. + +## Contributions to Vuetify + +Contributions to Vuetify are also subject to the MIT License. By contributing to the Vuetify project, you agree that your contributions will be licensed under the MIT License. See our [Contributing](/getting-started/contributing/) page for more details. + +## Questions and Comments + +If you have any questions or comments about our licensing policy, or if you need clarification on legal aspects of using Vuetify in your projects, please [contact us](mailto:hello@vuetifyjs.com). + +## Legal Disclaimer + +The information provided on this page is for general informational purposes only and is not intended as legal advice. For specific legal questions regarding the use of Vuetify, please consult with a qualified attorney. diff --git a/packages/docs/src/pages/en/about/meet-the-team.md b/packages/docs/src/pages/en/about/meet-the-team.md new file mode 100644 index 0000000..7eb01e0 --- /dev/null +++ b/packages/docs/src/pages/en/about/meet-the-team.md @@ -0,0 +1,40 @@ +--- +meta: + title: Meet the team + description: Meet the team responsible for building Vuetify. These are the core individuals who drive the vision of the framework. + keywords: vuetify dev team, vuetify core team +related: + - /introduction/enterprise-support/ + - /introduction/long-term-support/ + - /introduction/roadmap/ +--- + +# Meet the team + +Vuetify is _not_ a one person show. We have a very active and engaged team that is **constantly striving** to bring developers a better experience. Keep in mind the below is not an exhaustive list of all the individuals that help make Vuetify great. + + + + + +## Company + +While Vuetify (the framework) is [MIT Licensed](https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md) and [Open Source](https://opensource.com/resources/what-open-source), Vuetify (the company) is owned and operated by John and Heather Leider as a full-time Open Source business. You can support them by sponsoring Vuetify on **GitHub**. + + + + + +## Core Team + +The core development team are Open Source developers that help guide the direction of Vuetify and its ecosystem. + + + + + +## Legends + +Legends are inactive members of the core team. They have contributed a significant amount of time and effort to the project and are recognized for their contributions. + + diff --git a/packages/docs/src/pages/en/about/security-disclosure.md b/packages/docs/src/pages/en/about/security-disclosure.md new file mode 100644 index 0000000..74be709 --- /dev/null +++ b/packages/docs/src/pages/en/about/security-disclosure.md @@ -0,0 +1,41 @@ +--- +meta: + nav: Security disclosure + title: Security disclosure procedures + description: This document outlines security procedures and general policies for the Vuetify project. + keywords: security, security vulnerability, disclosure policy, security disclosure +related: + - /introduction/enterprise-support/ + - /getting-started/contributing/ + - /introduction/long-term-support/ +--- + +# Security disclosure procedures + +This document outlines security procedures and general policies for the Vuetify project. + + + + + +## Reporting a Bug + +The Vuetify team and community take all security bugs in Vuetify seriously. We appreciate your efforts and responsible disclosure and will make every effort to acknowledge your contributions. + +To report a security issue, email [security@vuetifyjs.com](mailto:security@vuetifyjs.com?subject=SECURITY) and include the word **\"SECURITY\"** in the subject line. + +The Vuetify team will send a response indicating the next steps in handling your report. After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance. + +Report security bugs in third-party modules to the person or team maintaining the module. + +## Disclosure Policy + +When the security team receives a security bug report, they will assign it to a primary handler. This person will coordinate the fix and release process, involving the following steps: + +- Confirm the problem and determine the affected versions. +- Audit code to find any potential similar problems. +- Prepare fixes for all releases still under maintenance.These fixes will be released as fast as possible to npm. + +## Comments on this Policy + +If you have suggestions on how this process could be improved please submit a pull request using the [issue creator](https://issues.vuetifyjs.com). diff --git a/packages/docs/src/pages/en/components/alerts.md b/packages/docs/src/pages/en/components/alerts.md new file mode 100644 index 0000000..8dce087 --- /dev/null +++ b/packages/docs/src/pages/en/components/alerts.md @@ -0,0 +1,166 @@ +--- +meta: + nav: Alerts + title: Alert component + description: The v-alert component is used to convey information to the user. Designed to stand out, the alerts come in four contextual styles. + keywords: v-alert, alerts, vue alert component, vuetify alert component +related: + - /components/buttons/ + - /components/icons/ + - /components/snackbars/ +features: + figma: true + github: /components/VAlert/ + label: 'C: VAlert' + report: true +--- + +# Alerts + +The `v-alert` component is used to convey important information to the user through the use of contextual types, icons, and colors. + +![Alert Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-alert/v-alert-entry.png) + + + +## Usage + +An alert is a [v-sheet](/components/sheets/) that specializes in getting the user's attention. While similar to [v-banner](/components/banners/) in functionality, `v-alert` is typically inline with content and used multiple times throughout an application. + + + + + +## API + +| Component | Description | +| - | - | +| [v-alert](/api/v-alert/) | Primary Component | +| [v-alert-title](/api/v-alert-title/) | Sub-component used to display the `v-alert` title. Wraps the `#title` slot | + +## Anatomy + +The recommended placement of elements inside of `v-alert` is: + +* Place a `v-icon` on the far left +* Place `v-alert-title` to the right of the contextual icon +* Place textual content below the title +* Place closing actions to the far right + +![Alert Anatomy](https://cdn.vuetifyjs.com/docs/images/components-temp/v-alert/v-alert-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The Alert container holds all `v-alert` components | +| 2. Icon | An icon that correlates to the contextual state of the alert; **success, info, warning, error** | +| 3. Title | A heading with increased font-size | +| 4. Text | A content area for displaying text and other inline elements | +| 5. Close Icon (optional) | Used to hide the `v-alert` component | + + + +## Guide + +The `v-alert` component is a callout element designed to attract the attention of a user. Unlike [v-banner](/components/banners/), the `v-alert` component is intended to be used and re-used throughout your application. An alert's color is derived from its **type** property which corresponds to your application's contextual [theme colors](/features/theme/#custom-theme-colors) and [iconfont aliases](/features/icon-fonts/#creating-a-custom-icon-set). + +### Props + +In addition to the standard [v-sheet](/components/sheets/) properties such as elevation, dimension, and border-radius, the `v-alert` component supports **v-model**, **variants**, and **density**. + +#### Content + +The `v-alert` component supports simple content using the **title** and **text** props. This approach is best for strings that do not need custom styling. + +The following code snippet is an example of a basic `v-alert` component only containing text: + +```html + +``` + +Adding a title is as easy as defining its value. The next example adds a string title to accompany the content text: + + + +Notice how the alert does not have a color or icon. This is defined using the **type** property. + +#### Type + +Alerts have 4 contextual states: **success**, **info**, **warning**, and **error**. Each state has a default _color_ and _icon_ associated with it. When a **type** is not provided, the `v-alert` component defaults to a greyish background. + +With a basic alert rendered, add your choice of contextual type. The following example puts the `v-alert` component in a success state: + + + +##### Type reference + +| Type | Color | Icon alias | Icon | +| - | - | - | :---: | +| Success | **success** { .text-success } | $success | | +| Info | **info** { .text-info } | $info | | +| Warning | **warning** { .text-warning } | $warning | | +| Error | **error** { .text-error } | $error | | + +#### Color and icon + +The **type** property acts as a shorthand for a **color** and **icon** combination, you can use both props individually to achieve the same effect. The following example produces the same result as using **type="success"** by defining a custom color and using the icon lookup table to get the globally defined success icon: + +```html + +``` + +#### Density + +The `v-alert` component has the ability to reduce its height in intervals using the density prop. This is useful when you need to reduce the vertical space a component needs. The following example reduces the vertical space by using **density="compact"**: + + + +The **density** prop supports 3 levels of component height; **default**, **comfortable**, and **compact**. + +#### Variants + +The `v-alert` has 6 style variants, **elevated**, **flat**, **tonal**, **outlined**, **text**, and **plain**. By default, the `v-alert` component is **flat**; which means that it has a solid background and no box-shadow (elevation). The following example modifies the overall styling of the alert with a custom variant: + + + +#### Closable + +The **closable** prop adds a [v-icon](/components/icons) on the far right, after the main content. This control hides the `v-alert` when clicked, setting it's internal model to **false**. Manually control the visibility of the alert by binding **v-model** or using **model-value**. The following example uses a dynamic model that shows and hides the `v-alert` component: + + + +The close icon automatically applies a default `aria-label` and is configurable by using the **close-label** prop or changing **close** value in your locale. + +::: info + For more information on how to global modify your locale settings, navigate to the [Internationalization page](/features/internationalization). +::: + +## Additional Examples + +The following is a collection of `v-alert` examples that demonstrate how different the properties work in an application. + +### Border color + +The **border-color** prop removes the alert background in order to accent the **border** prop. If a **type** is set, it will use the type's default color. If no **color** or **type** is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark). + + + +### Icon + +The **icon** prop allows you to add an icon to the beginning of the alert component. If a **type** is provided, this will override the default type icon. Additionally, setting the **icon** prop to _false_ will remove the icon altogether. + + + +### Outlined + +The **outlined** prop inverts the style of an alert, inheriting the currently applied **color**, applying it to the text and border, and making its background transparent. + + + +## Accessibility + +By default, `v-alert` components are assigned the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) role of [**alert**](https://www.w3.org/TR/wai-aria/#alert) which denotes that the alert \"is a live region with important and usually time-sensitive information.\" When using the **closable** prop, the close icon will receive a corresponding `aria-label`. This value can be modified by changing either the **close-label** prop or globally through customizing the [Internationalization](/features/internationalization)'s default value for the _close_ property. diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md new file mode 100644 index 0000000..9b2efd4 --- /dev/null +++ b/packages/docs/src/pages/en/components/all.md @@ -0,0 +1,581 @@ +--- +meta: + nav: All Components + title: All Vuetify Components + description: Browse all of the available Vuetify components or group by category. + keywords: components, all components, all Vuetify components +--- + +# Components + +Vuetify Components are interactive building blocks for creating user interfaces. + + + + + +## Containment + +Containment components wrap other components and provide additional functionality. They are typically used to provide a consistent layout or styling. + + + + + + The button component allows users to take actions or make choices with a single tap + + + + + + The card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions + + + + + + The list component is a display interface for items + + + + + + Chips are useful for displaying small pieces of information + + + + + + Dividers are used to separate content into distinct sections or groups + + + + + + Expansion panels are used to reveal additional content in a compact manner + + + + + + The menu component is used to display a list of actions that the user can make + + + + + + The dialog component informs a user about a specific task and may contain critical information + + + + + + The bottom sheet component elevates content from the bottom of the screen + + + + + + The overlay component is used to display a custom scrim that sits on top of the application + + + + + + Toolbars are used to label a content area and / or display a list of actions that the user can make + + + + + + Tooltips provide additional information about an element when the user hovers over it + + + + + + The sheet component is a simple piece of paper that can be used to style and customize a block of content + + + + + +---- + +## Navigation + +Navigation components are used to navigate between different views or pages. + + + + + + The app bar is used for top level navigation items and current page actions + + + + + + The floating action button is used for a promoted actions within an application + + + + + + Navigation drawers contain primary application navigation links + + + + + + The Pagination component is used to separate long sets of data + + + + + + The bottom navigation component is used for displaying navigation links on mobile + + + + + + Breadcrumbs are navigational helpers for router pages + + + + + + The footer component is a simple navigation area with inner site links + + + + + + The speed dial component is a floating action button that can reveal additional actions when clicked + + + + + + The system bar component shows application information with iconography, time, and more + + + + + + Tabs are used to organize content into different sections that can be viewed independently + + + + + +---- + +## Form inputs and controls + +Form components are used to collect user input in a variety of ways. + + + + + + Autocompletes are used to provide suggestions to the user as they type into a field + + + + + + The combobox component is used to select a value from a list of options with the ability to enter a custom value + + + + + + The text field component accepts textual input from users and is a replacement for the native text input element + + + + + + The checkbox component is a replacement for the native input checkbox + + + + + + The switch component is an alternately styled checkbox + + + + + + The radio component is a replacement for its native counterpart + + + + + + The file input component is used to select files from the user's device and is a replacement for the native file input element + + + + + + The form component is used to wrap form elements and provide a consistent styling and a single source for validation + + + + + + Create custom inputs that can be used with the v-model directive + + + + + + The number input component is used for collecting numerical data from the user + + + + + + The OTP input component is used for MFA authentication via input field + + + + + + The select component is used to select a value from a list of options and is a replacement for the native select element + + + + + + Sliders are used to select a value from a range of values by moving a slider thumb and are a replacement for the native input range element + + + + + + Range sliders are regular sliders with the ability to select in a range + + + + + + The textarea component is a replacement for the native textarea element + + + + + +---- + +## Layouts + +Layout components are used to create responsive layouts. + + + + + + The grid component is used to create responsive layouts + + + + + +---- + +## Selection + +These components allow a user to select one or multiple items from a list of options. + + + + + + Carousels are used to display multiple forms of visual content + + + + + + Button groups are used to select between multiple options using the button component + + + + + + Chip group is a wrapper component that makes chips interactive and allows them to be selected + + + + + + The window component is used to display a block of content based upon a model + + + + + + The stepper component is a linear progress control used to break lengthy forms into smaller logical sections + + + + + +---- + +## Data and display + +These components are used to display data and information in a variety of ways. + + + + + + The confirm edit component is used to confirm changes to data + + + + + + The data iterator component provides an easy interface for paginating and sorting data + + + + + + Data tables are used to display large amounts of data in a small amount of space + + + + + + The Infinite scroll component is a container that loads more items when scrolling + + + + + + Server side data tables are intended to be used with a server side data source + + + + + + The sparkline component creates beautiful and expressive simple graphs for displaying numerical data + + + + + + The virtual data table component is used to display very large subsets of data + + + + + + The table component is a barebones table for manually displaying data and is a replacement for the native table element + + + + + + The virtual scroller component makes it possible to render large amounts of data without sacrificing performance + + + + + +---- + +## Feedback + +These components are used to provide feedback to the user within content, over content, or in response to user actions. + + + + + + Alerts convey important information to the user + + + + + + Badges superscript or subscript an avatar-like icon or text onto content. + + + + + + Banners are used to communicate important information to the user + + + + + + The empty state component is used to indicate that a page or area on a page has no content. + + + + + + Displays a content, enhancing perceived performance during data-fetching & rendering + + + + + + The snackbar component is used to display a message to the user that hovers over existing content + + + + + + Ratings are useful for collecting user feedback + + + + + + Timeline components are used to display a list of events in chronological order + + + + + + The hover component is a wrapper component that allows you to react to hover events + + + + + + Circular progress's are a visual indicator of numerical data in a circle + + + + + + The linear progress component is used to display numerical data in a horizontal line + + + + + +---- + +## Images and icons + +This subset of components are used to display media in a variety of ways. + + + + + + The aspect ratio component enforces a defined ratio + + + + + + Avatars are used in numerous components to display avatars and profile pictures + + + + + + The icon component is an reusable component that can be used to display icons + + + + + + The image component provides a flexible interface for displaying images + + + + + + Creates a 3d effect that makes an image appear to move slower than the foreground + + + + + +---- + +## Pickers + +These components are used to select a value from a specifically styled set of options. + + + + + + The color picker component is used to select a color from a palette + + + + + + The date picker component is used to select a single date from a calendar month / year. + + + + + +---- + +## Providers + + + + + + The defaults provider component is used to set default values for all components within a template + + + + + + The locale provider component allows you to change the language of all components within its slot + + + + + + The theme provider component allows you to change the theme of all children components + + + + + +---- + +## Miscellaneous + +These components don't fit into a traditional category and are used for a variety of purposes. + + + + + + The lazy component is a wrapper component that prevents the rendering of its child components until it is visible in the viewport + + + + + + This component is used to prevent the rendering of its child components on the server + + + + + +::: info + This page is under **design** construction and will be updated with the missing images over time. +::: diff --git a/packages/docs/src/pages/en/components/app-bars.md b/packages/docs/src/pages/en/components/app-bars.md new file mode 100644 index 0000000..f7e37a9 --- /dev/null +++ b/packages/docs/src/pages/en/components/app-bars.md @@ -0,0 +1,120 @@ +--- +meta: + nav: App bars + title: App-bar component + description: The app bar component is a supercharged toolbar with advanced scrolling techniques and application layout support. + keywords: app bars, vuetify app bar component, vue app bar component +related: + - /components/buttons/ + - /components/icons/ + - /components/toolbars/ +features: + figma: true + label: 'C: VAppBar' + report: true + github: /components/VAppBar/ + spec: https://m2.material.io/components/app-bars-top +--- + + + +# App bars + +The `v-app-bar` component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. + +![App Bar Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-app-bar/v-app-bar-entry.png) + + + +## Usage + +The `v-app-bar` component is used for application-wide actions and information. + + + + + +## API + +| Component | Description | +| - | - | +| [v-app-bar](/api/v-app-bar/) | Primary Component | +| [v-app-bar-nav-icon](/api/v-app-bar-nav-icon/) | A customized [v-btn](/components/buttons/) component that uses a default *icon* value of **$menu** | +| [v-app-bar-title](/api/v-app-bar-title/) | An extension of `v-toolbar-title` that is used for scrolling techniques | + + + +::: tip + +The app-bar component works great in conjunction with a [v-navigation-drawer](/components/navigation-drawers) for providing site navigation in your application. + +::: + +## Anatomy + +The recommended placement of elements inside of `v-app-bar` is: + +- Place `v-app-bar-nav-icon` or other navigation items on the far left +- Place `v-app-bar-title` to the right of navigation +- Place contextual actions to the right of navigation +- Place overflow actions to the far right + +![App Bar Anatomy](https://cdn.vuetifyjs.com/docs/images/components-temp/v-app-bar/v-app-bar-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The App Bar container holds all `v-app-bar` components | +| 2. App Bar Icon (optional) | A styled icon button component created that is often used to control the state of a `v-navigation drawer` | +| 3. Title (optional) | A heading with increased **font-size** | +| 4. Action items (optional) | Used to highlight certain actions not in the overflow menu | +| 5. Overflow menu (optional) | Place less often used action items into a hidden menu | + +::: warning + +When a `v-btn` with the `icon` prop is used inside of `v-toolbar` and `v-app-bar` they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a `div`, you will need to apply negative margin to that container in order to properly align them. + +::: + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-app-bar` component. + +### Props + +The `v-app-bar` component has a variety of props that allow you to customize its look and feel, density, scroll behavior, and more. + +#### Scroll behavior + +Available values: + +- **hide**: The default slot area will shift up and hide as the user scrolls down. The extension slot remains visible. +- **collapse**: Shrink horizontally to a small bar in one corner. +- **elevate**: Add a drop shadow to the app bar when scrolling. Ignores `scroll-threshold`, will always be applied with any amount of scrolling. +- **fade-image**: Fade out the image as the user scrolls down. +- **inverted**: Has no effect on its own, but will reverse the behavior when combined with any other option. + +The `scroll-threshold` prop is used to determine how far the user must scroll down (in pixels) before the behavior is applied. + +A scroll listener is added to `window` by default, but can be changed to a custom element using the `scroll-target` prop. + + + +#### Density + +You can make **app-bar** dense. A dense app bar has lower height than regular one. + + + +#### Images + +`v-app-bar` can contain background images. You can set source via the `image` prop. If you need to customize the `v-img` properties, the app-bar provides you with an **image** slot. + + + +#### Prominent + +An `v-app-bar` with the `density="prominent"` prop can opt to have its height shrunk as the user scrolls down. This provides a smooth transition to taking up less visual space when the user is scrolling through content. Shrink height has 2 possible options, **compact** (48px) and **comfortable** (56px) sizes. + + diff --git a/packages/docs/src/pages/en/components/application.md b/packages/docs/src/pages/en/components/application.md new file mode 100644 index 0000000..95dd3a1 --- /dev/null +++ b/packages/docs/src/pages/en/components/application.md @@ -0,0 +1,56 @@ +--- +emphasized: true +meta: + title: Application + description: Vuetify comes equipped with a default markup that makes it easy to create layouts (boilerplate) for any Vue application. + keywords: default layout, vuetify default markup, vuetify default layout +related: + - /features/theme/ + - /components/app-bars/ + - /components/navigation-drawers/ +features: + report: true +--- + +# Application + +The `v-app` component is an optional feature that serves as the root layout component as well as providing an easy way to control the theme used at the root level. + + + + + +## API + +| Component | Description | +| - | - | +| [v-app](/api/v-app/) | Primary Component | +| [v-main](/api/v-main/) | Content area | + + + +## Guide + +In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window. + +::: info + More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page. +::: + +When placing your application level components, the order matters. Elements are stacked based on when they register and are rendered in the DOM after the first **nextTick** (to account for suspense). Layouts utilize [suspense](https://vuejs.org/guide/built-ins/suspense) to allow all layout components to register before rendering the initial layout. + +The following example demonstrates how the `v-app-bar` component takes priority over `v-navigation-drawer` because of its rendering order: + + + +If we swap `v-app-bar` and `v-navigation-drawer`, the registration order changes and the layout system layers the two components differently. + + + +## Theme + +The `v-app` component makes it easy to enable one of your application defined themes. By default, Vuetify comes with 2 themes, **light** and **dark**. Each one is a collection of various colors used to style each individual component. Because `v-app` acts as an interface for [theme](/features/theme/) functionality, you have the ability to change it dynamically within your template. + +The following example demonstrates how to use the **theme** prop to toggle the theme from dark to light. + + diff --git a/packages/docs/src/pages/en/components/aspect-ratios.md b/packages/docs/src/pages/en/components/aspect-ratios.md new file mode 100644 index 0000000..3b7fb44 --- /dev/null +++ b/packages/docs/src/pages/en/components/aspect-ratios.md @@ -0,0 +1,36 @@ +--- +meta: + title: Aspect ratios + description: The responsive component is used as a wrapper component to force custom aspect ratios for its children. + keywords: ratio, responsive, aspect ratios +related: + - /components/cards/ + - /components/sheets/ + - /components/images/ +features: + github: /components/VAspectRatio/ + label: 'C: VAspectRatio' + report: true +--- + +# Aspect ratios + +The `v-responsive` component can be used to fix any section to a specific aspect ratio + + + +## Usage + +Specify a custom aspect-ratio + + + + + +## API + +| Component | Description | +| - | - | +| [v-responsive](/api/v-responsive/) | Primary component | + + diff --git a/packages/docs/src/pages/en/components/autocompletes.md b/packages/docs/src/pages/en/components/autocompletes.md new file mode 100644 index 0000000..f095bbe --- /dev/null +++ b/packages/docs/src/pages/en/components/autocompletes.md @@ -0,0 +1,109 @@ +--- +meta: + nav: Autocompletes + title: Autocomplete component + description: The autocomplete component provides type-ahead autocomplete functionality and provides a list of available options. + keywords: autocomplete, vuetify autocomplete component, vue autocomplete component +related: + - /components/combobox/ + - /components/forms/ + - /components/selects/ +features: + figma: true + label: 'C: VAutocomplete' + report: true + github: /components/VAutocomplete/ + spec: https://m2.material.io/components/text-fields +--- + +# Autocompletes + +The `v-autocomplete` component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API. + + + +## Usage + +The autocomplete component extends `v-select` and adds the ability to filter items. + + + + + +## API + +| Component | Description | +| - | - | +| [v-autocomplete](/api/v-autocomplete/) | Primary Component | +| [v-combobox](/api/v-combobox/) | A select component that allows for filtering and custom values | +| [v-select](/api/v-select/) | A replacement for the HTML | + + + +## Caveats + +::: error + +When using objects for the **items** prop, you must associate **item-title** and **item-value** with existing properties on your objects. These values are defaulted to **title** and **value** and can be changed. + +::: + +## Examples + +Below is a collection of simple to complex examples. + +### Props + +#### Density + +You can use `density` prop to adjust vertical spacing within the component. + + + +#### Filter + +The `custom-filter` prop can be used to filter each individual item with custom logic. In this example we filter items by name. + + + +::: tip + +The **v-autocomplete** component updates the search model on focus/blur events. Focus sets search to the current model (if available), and blur clears it. + +Unlike **v-combobox**, it doesn't keep unlisted values. To prevent unnecessary API requests when querying, ensure that search is not empty and/or doesn't match the current model. + +::: + +### Slots + +#### Item and selection + +With the power of slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items. + + + +### Misc + + + +#### State selector + +Using a combination of `v-autocomplete` slots and transitions, you can create a stylish toggleable autocomplete field such as this state selector. + + + +#### New tab + +::: success +This feature was introduced in [v3.3.0 (Icarus)](/getting-started/release-notes/?version=v3.3.0) +::: + +The **auto-select-first** property highlights the first result when searching, allowing you to press tab or enter to quickly select it. + + diff --git a/packages/docs/src/pages/en/components/avatars.md b/packages/docs/src/pages/en/components/avatars.md new file mode 100644 index 0000000..60a4160 --- /dev/null +++ b/packages/docs/src/pages/en/components/avatars.md @@ -0,0 +1,97 @@ +--- +meta: + nav: Avatars + title: Avatar component + description: The avatar component is used to control the size and border radius of an image. It can be used with numerous components to provide better visual context. + keywords: avatars, vuetify avatar component, vue avatar component +related: + - /components/badges/ + - /components/icons/ + - /components/lists/ +features: + figma: true + github: /components/VAvatar/ + label: 'C: VAvatar' + report: true +--- + +# Avatars + +The `v-avatar` component is typically used to display circular user profile pictures. This component will allow you to dynamically size and add a border radius of responsive images, icons, and text. When **rounded** prop set to `0` will display an avatar without border radius. + +![Avatar Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-avatar/v-avatar-entry.png) + + + +## Usage + +Avatars in their simplest form display content within a circular container. + + + + + +## API + +| Component | Description | +| - | - | +| [v-avatar](/api/v-avatar/) | Primary Component | + +## Anatomy + +The recommended placement of elements inside of `v-avatar` is: + +* Place a [v-img](/components/images/) or [v-icon](/components/icons/) component within the default *slot* +* Place textual content within the default *slot* + +![Avatar Anatomy](https://cdn.vuetifyjs.com/docs/images/components-temp/v-avatar/v-avatar-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The Avatar container that typically holds a [v-icon](/components/icons/) or [v-img](/components/images/) component | + + + +## Examples + +### Props + +#### Size + +The `size` prop allows you to change the height and width of the avatar. + + + +#### Tile + +The `rounded` prop can be used to remove the border radius from v-avatar leaving you with a simple square avatar. + + + +### Slots + +#### Default + +The `v-avatar` default slot allows you to render content such as `v-icon` components, images, or text. Mix and match these with other props to create something unique. + + + + + +### Misc + +#### Advanced usage + +Combining an avatar with other components allows you to build beautiful user interfaces right out of the box. + + + +Another example combining avatar with menu. + + + +#### Profile Card + +Using the **rounded** prop value `0`, we can create a sleek hard-lined profile card. + + diff --git a/packages/docs/src/pages/en/components/badges.md b/packages/docs/src/pages/en/components/badges.md new file mode 100644 index 0000000..8f473c0 --- /dev/null +++ b/packages/docs/src/pages/en/components/badges.md @@ -0,0 +1,61 @@ +--- +meta: + nav: Badges + title: Badge component + description: The badge component is a small status descriptor for elements. This typically contains a small number or short set of characters. + keywords: badges, vuetify badge component, vue badge component +related: + - /components/avatars/ + - /components/icons/ + - /components/toolbars/ +features: + github: /components/VBadge/ + label: 'C: VBadge' + report: true +--- + +# Badges + +The `v-badge` component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Content within the badge usually contains numbers or icons. + + + + + +## Usage + +Badges in their simplest form display to the upper right of the content that it wraps and requires the badge slot. + + + + + +## API + +| Component | Description | +| - | - | +| [v-badge](/api/v-badge/) | Primary Component | + + + +## Examples + +### Props + +#### Dot + +The **dot** property removes badge's content and reduces its overall size. This is useful when you need to draw a user's attention subtly. + + + +#### Inline + +Inline badges can be placed anywhere with content and can render without a *default* slot. + + + +#### Content + +For simple text, use the **content** property to display a *value* on the badge. + + diff --git a/packages/docs/src/pages/en/components/banners.md b/packages/docs/src/pages/en/components/banners.md new file mode 100644 index 0000000..083307c --- /dev/null +++ b/packages/docs/src/pages/en/components/banners.md @@ -0,0 +1,96 @@ +--- +meta: + nav: Banners + title: Banner component + description: The banner component displays an important and concise message for a user to address. It can also indicate actions that the user can take. + keywords: banners, vuetify banner component, vue banner component +related: + - /components/alerts/ + - /components/icons/ + - /components/snackbars/ +features: + figma: true + github: /components/VBanner/ + label: 'C: VBanner' + report: true + spec: https://m2.material.io/components/banners +--- + +# Banners + +The `v-banner` component is used as a middle-interrupting message to the user with one to two actions. + +![Banner Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-banner/v-banner-entry.png) + + + +## Usage + +Banners come in two variations **single-line** and **multi-line** (implicit). These can have icons and actions that you can use with your message. + + + + + +## API + +| Component | Description | +| - | - | +| [v-banner](/api/v-banner/) | Primary Component | +| [v-banner-text](/api/v-banner-text/) | Sub-component used to display the `v-banner` subtitle. Wraps the `#text` slot | +| [v-banner-actions](/api/v-banner-actions/) | Sub-component that modifies the default styling of [v-btn](/components/buttons/). Wraps the `#actions` slot | + + + +## Anatomy + +The recommended placement of elements inside of `v-banner` is: + +* Place a `v-banner-avatar` or `v-banner-icon` on the far left +* Place `v-banner-text` to the right of any visual content +* Place `v-banner-actions` to the far right of textual content, offset bottom + +![Banner Anatomy](https://cdn.vuetifyjs.com/docs/images/components-temp/v-banner/v-banner-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The Banner container holds all `v-banner` components | +| 2. Avatar / Icon (optional) | Leading media content intended to improve visual context | +| 3. Text | A content area for displaying text and other inline elements | +| 4. Actions (optional) | A content area that typically contains one or more [v-btn](/components/buttons) components | + +## Examples + +### Props + +#### Lines + +The prop **lines** can be used to specify how the displayed text should be handled based on its length. + + + +#### Sticky + +You can optionally turn on the **sticky** prop to ensure that the content is pinned to the top of the screen. + + + +### Slots + +#### Actions + +Banners may have one or two text buttons that don't stand out that much. + + + +#### Icon + +The icon slot allows you to to explicitly control the content and functionality within it. + + + +#### Prepend + +The prepend slot allows you to to explicitly control the content and functionality within it. Icons also help to emphasize a banner's message. + + diff --git a/packages/docs/src/pages/en/components/bottom-navigation.md b/packages/docs/src/pages/en/components/bottom-navigation.md new file mode 100644 index 0000000..4269fa1 --- /dev/null +++ b/packages/docs/src/pages/en/components/bottom-navigation.md @@ -0,0 +1,100 @@ +--- +meta: + nav: Bottom navigation + title: Bottom navigation component + description: The bottom navigation component is used for mobile devices and acts as the primary navigation for your application. + keywords: bottom navigation, vuetify bottom navigation component, vue bottom navigation component +related: + - /components/buttons/ + - /components/icons/ + - /components/tabs/ +features: + figma: true + label: 'C: VBottomNavigation' + report: true + github: /components/VBottomNavigation/ + spec: https://m2.material.io/components/bottom-navigation +--- + +# Bottom navigation + +The `v-bottom-navigation` component is an alternative to the sidebar. It is primarily used for mobile applications and comes in three variants, **icons** and **text**, and **shift**. + + + +## Usage + +While `v-bottom navigation` is meant to be used with [vue-router](https://router.vuejs.org/), you can also programmatically control the active state of the buttons by using the **value** property. A button is given a default value of its _index_ with `v-bottom-navigation`. + + + + + +## API + +| Component | Description | +| - | - | +| [v-bottom-navigation](/api/v-bottom-navigation/) | Primary Component | +| [v-btn](/api/v-btn/) | Sub-component used for modifying the `v-bottom-navigation` state | + + + +::: info + +For styles to apply properly when using the **shift** prop, `v-btn` text is **required** to be wrapped in a `span` tag. + +::: + +## Examples + +### Props + +#### Color + +The **color** prop applies a color to the background of the bottom navigation. We recommend using the **light** and **dark** props to properly contrast text color. + + + +#### Grow + +Using the **grow** property forces [v-btn](/components/buttons/) components to _fill_ all available space. Buttons have a maximum width of **168px** per the [Bottom Navigation MD specification](https://material.io/components/bottom-navigation#specs). + + + + + +#### Horizontal + +Adjust the style of buttons and icons by using the **horizontal** prop. This positions button text *inline* with the provided [v-icon](/components/icons/). + + + + + +#### Shift + +The **shift** prop hides button text when not active. This provides an alternative visual style to the `v-bottom-navigation` component. + +::: info + For this to work, `v-btn` text is **required** to be wrapped in a `span` tag. +::: + + + +#### Toggle + +Since `v-bottom-navigation` supports v-model, use the **active** prop to control the display state. + + diff --git a/packages/docs/src/pages/en/components/bottom-sheets.md b/packages/docs/src/pages/en/components/bottom-sheets.md new file mode 100644 index 0000000..2a5a52e --- /dev/null +++ b/packages/docs/src/pages/en/components/bottom-sheets.md @@ -0,0 +1,124 @@ +--- +meta: + nav: Bottom sheets + title: Bottom sheet component + description: The bottom sheet component is used for elevating content above other elements in a dialog style fashion. + keywords: bottom sheets, vuetify bottom sheet component, vue bottom sheet component +related: + - /components/dialogs/ + - /components/lists/ + - /components/menus/ +features: + label: 'C: VBottomSheet' + github: /components/VBottomSheet/ + report: true + spec: https://m2.material.io/components/sheets-bottom +--- + +# Bottom sheets + +The bottom sheet is a modified `v-dialog` that slides from the bottom of the screen, similar to a `v-bottom-navigation`. + +![Bottom Sheet Entry](https://cdn.vuetifyjs.com/docs/images/components/v-bottom-sheet/v-bottom-sheet-entry.png) + + + + + +::: success + +This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0) + +::: + +## Usage + +Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet is meant to contain anything. + + + +## API + +| Component | Description | +|--------------------------------------------------|-------------------| +| [v-bottom-sheet](/api/v-bottom-sheet/) | Primary Component | + + + +## Anatomy + +The recommended components to use inside of a `v-bottom-sheet` are: + +* [v-card](/components/cards/) +* [v-list](/components/lists/) +* [v-sheet](/components/sheets/) + +![Bottom Sheet Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-bottom-sheet/v-bottom-sheet-anatomy.png) + +| Element / Area | Description | +|----------------|--------------------------------------------------------------------------| +| 1. Container | The bottom sheet is a dialog that animates from the bottom of the screen | + +## Guide + +The `v-bottom-sheet` component is a modified [v-dialog](/components/dialogs/) that slides from the bottom of the screen. It is used for elevating content above other elements in a dialog style fashion. The bottom sheet can be controlled using the `v-model` prop or through the `activator` slot. + +The following code snippet is an example of a basic `v-bottom-sheet` component: + +```html + + + +``` + +### Props + +The `v-bottom-sheet` component has access to all of the props available in [v-dialog](/api/v-dialog/). + +#### Model + +The **v-model** (or **model-value**) controls the visibility of the bottom sheet: + + + +This also works in tandem with the [activator](/api/v-bottom-sheet/#slots-activator) slot. + +#### Inset + +With the **inset** prop, reduce the maximum width of the content area on desktop to 70%. This can be further reduced manually using the **width** prop. + + + +### Slots + +The `v-bottom-sheet` component has access to all of the slots available in [v-dialog](/api/v-dialog#slots). + +![Bottom Sheet Slots](https://cdn.vuetifyjs.com/docs/images/components/v-bottom-sheet/v-bottom-sheet-slots.png) + +| Slot | Description | +|--------------|-----------------------------------------------------| +| 1. Default | The default slot | +| 2. Activator | The activator slot is used to open the bottom sheet | + +::: info +The **activator** slot is not required when using the **v-model** prop. +::: + +### Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-bottom-sheet` component. + +#### Music Player + +Using a inset bottom sheet, you can make practical components such as this simple music player. + + + +#### Open In List + +By combining a functional list into a bottom sheet, you can create a simple 'open in' component. + + diff --git a/packages/docs/src/pages/en/components/breadcrumbs.md b/packages/docs/src/pages/en/components/breadcrumbs.md new file mode 100644 index 0000000..797700b --- /dev/null +++ b/packages/docs/src/pages/en/components/breadcrumbs.md @@ -0,0 +1,82 @@ +--- +meta: + nav: Breadcrumbs + title: Breadcrumbs component + description: The breadcrumbs component is a navigational helper for pages. It can accept a Material Icons icon or characters as a divider. + keywords: breadcrumbs, vuetify breadcrumbs component, vue breadcrumbs component, v-breadcrumbs component +related: + - /components/buttons/ + - /components/navigation-drawers/ + - /components/icons/ +features: + figma: true + label: 'C: VBreadcrumbs' + report: true + github: /components/VBreadcrumbs/ +--- + +# Breadcrumbs + +The `v-breadcrumbs` component is used as a navigational helper and hierarchy for pages. + + + + + +## Usage + +By default, breadcrumbs use a text divider. This can be any string. + + + + + +::: tip + +Use [slots](/api/v-breadcrumbs/#slots) for more control of the breadcrumbs, either utilizing `v-breadcrumbs-item` or other custom markup. + +::: + +## API + +| Component | Description | +| - | - | +| [v-breadcrumbs](/api/v-breadcrumbs/) | Primary Component | +| [v-breadcrumbs-item](/api/v-breadcrumbs-item/) | Sub-component used for each breadcrumb | +| [v-breadcrumbs-divider](/api/v-breadcrumbs-divider/) | Sub-component used for dividing breadcrumbs | + + + +::: info + By default `v-breadcrumbs` will disable all crumbs up to the current page in a nested paths. You can prevent this behavior by using `exact: true` on each applicable breadcrumb in the `items` array. +::: + +## Examples + +### Props + +#### Divider + +Breadcrumbs separator can be set using `divider` property. + + + +### Slots + +#### Prepend + +Prepend content with the `prepend` slot. + + + +#### Dividers + +To customize the divider, use the `divider` slot. + + + +#### Title + +You can use the `title` slot to customize each breadcrumb title. + + diff --git a/packages/docs/src/pages/en/components/button-groups.md b/packages/docs/src/pages/en/components/button-groups.md new file mode 100644 index 0000000..e91c173 --- /dev/null +++ b/packages/docs/src/pages/en/components/button-groups.md @@ -0,0 +1,90 @@ +--- +meta: + nav: Button toggles + title: Button toggle component + description: The button toggle component allows you to combine a series of selectable buttons together in a single element. + keywords: button groups, vuetify button group component, vue button group component +related: + - /components/buttons/ + - /components/icons/ + - /components/toolbars/ +features: + github: /components/VBtnToggle/ + label: 'C: VBtnToggle' + report: true + spec: https://m2.material.io/components/buttons#toggle-button +--- + +# Button toggles + +The `v-btn-toggle` component is a simple wrapper for `v-item-group` built specifically to work with `v-btn`. + + + + + +## Usage + +Toggle buttons allow you to create a styled group of buttons that can be selected or toggled under a single **v-model**. + + + + + +## API + +| Component | Description | +|------------------------------------| - | +| [v-btn-toggle](/api/v-btn-toggle/) | Primary component | +| [v-btn](/api/v-btn/) | Sub-component used for modifying the `v-btn-toggle` state | +| [v-btn-group](/api/v-btn-group/) | A stateless version of `v-btn-toggle` | + + + +## Examples + +### Props + +#### Divided + +You can add a visual divider between buttons with the **divided** prop. + + + +#### Variant + +You can switch the button variant by using **variant** prop on `v-btn-toggle`. + + + +#### Mandatory + +A `v-btn-toggle` with the **mandatory** prop will always have a value. + + + +#### Multiple + +A `v-btn-toggle` with the **multiple** prop will allow a user to select multiple return values as an array. + + + +#### Rounded + +You can control the border radius with the **rounded** prop. + + + +### Misc + + + +#### WYSIWYG + +Group similar actions and design your own WYSIWYG component. + + diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md new file mode 100644 index 0000000..2391dc6 --- /dev/null +++ b/packages/docs/src/pages/en/components/buttons.md @@ -0,0 +1,444 @@ +--- +meta: + nav: Buttons + title: Button component + description: The button component communicates actions that a user can take and are typically placed in dialogs, forms, cards and toolbars. + keywords: buttons, vuetify button component, vue button component +related: + - /components/button-groups/ + - /components/icons/ + - /components/cards/ +features: + figma: true + github: /components/VBtn/ + label: 'C: VBtn' + report: true + spec: https://m2.material.io/components/buttons +--- + +# Buttons + +The `v-btn` component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color. + +![Button Entry](https://cdn.vuetifyjs.com/docs/images/components/v-btn/v-btn-entry.png) + + + + + +## Usage + +Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click. + + + +## API + +| Component | Description | +| - | - | +| [v-btn](/api/v-btn/) | Primary Component | + + + +## Anatomy + +The recommended placement of elements inside of `v-btn` is: + +* Place text in the center +* Place visual content around container text + +![Button Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-btn/v-btn-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | In addition to text, the Button container typically holds a [v-icon](/components/icons/) component | +| 2. Icon (optional) | Leading media content intended to improve visual context | +| 3. Text | A content area for displaying text and other inline elements | + +## Guide + +The `v-btn` component is commonly used throughout Vuetify and is a staple for any application. It is used for everything from navigation to form submission; and can be styled in a multitude of ways. + +The following code snippet is an example of a basic `v-btn` component only containing text: + +```html +Button +``` + +### Props + +A wide array of props can be employed to modify the `v-btn` component's look and functionality. Props like **prepend-icon** and **append-icon** offer a straightforward approach to incorporate positioned icons, whereas **block** and **stacked** props are utilized to manage the component's form. + +#### Density + +The **density** prop is used to control the vertical space that the button takes up. + + + +#### Size + +The **size** property is used to control the size of the button and scales with density. The default size is **undefined** which essentially translates to **medium**. + + + +#### Block + +Block buttons extend the full available width of their container. This is useful for creating buttons that span the full width of a card or dialog. + + + +::: info +Block applies **width: 100%** which can cause overflow issues inside a flex container. +::: + +#### Rounded + +Use the **rounded** prop to control the border radius of a button. + + + +#### Elevation + +The **elevation** property provides up to 24 levels of shadow depth. By default, buttons rest at 2dp. + + + +#### Ripple + +The **ripple** property determines whether the [v-ripple](/directives/ripple/) directive is used. + + + +#### Variants + +The **variant** prop gives you easy access to several different button styles. Available variants are: **elevated**(default), **flat**, **tonal**, **outlined**, **text**, and **plain**. + +| Value | Example | Description | +|--------------|----------------------------------------------------------|-----------------------------------------------------------------| +| **elevated** | Button | Elevates the button with a shadow | +| **flat** | Button | Removes button shadow | +| **tonal** | Button | Background color is a lowered opacity of the current text color | +| **outlined** | Button | Applies a thin border with the current text color | +| **text** | Button | Removes the background and removes shadow | +| **plain** | Button | Removes the background and lowers the opacity until hovered | + +#### Icon + +Icons can be used for the primary content of a button. They are commonly used in the [v-toolbar](/components/toolbars/) and [v-app-bar](/components/app-bars/) components. + + + +#### Loaders + +Using the loading prop, you can notify a user that there is processing taking place. The default behavior is to use a `v-progress-circular` component but this can be customized with the **loader** slot. + + + +#### Inside of bars + +A common use-case is to use the `v-btn` with the **icon** property within a [v-toolbar](/components/toolbars/) or [v-app-bar](/components/app-bars/) component. + + + +### Slots + +The `v-btn` component provides slots that enable you to customize content created by its props or to add additional content. + +![Button Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-btn/v-btn-slots.png) + +| Slot | Description | +| - | - | +| 1. Default | The default slot | +| 2. Prepend | Content area before the default slot | +| 3. Append | Content area after the default slot | +| 4. Loader | Content area shown when **loading** is set to `true` | + +Slots give you greater control to customize the content of the `v-btn` component while still taking advantage of the easy-to-use props. + +#### Icon color + +When you use the **prepend-icon** and **append-icon** props in conjunction with the corresponding slot, **prepend** or **append**, you are able to place a [v-icon](/components/icons/) that automatically injects the designated icon. + + + +#### Custom loader + +The **loader** slot allows you to customize the loading indicator. In this example we use a [v-progress-linear](/components/progress-linear/) component to create a loading bar that spans the full width of the button. + + + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-btn` component. + +### Discord event + +In this example we utilize multiple different button variants and styles to create a copy of the Discord event card. + + + +### Survey group + +In addition to [Button groups](/components/button-groups/), the `v-btn` component cant hook into a [v-item-group](/components/item-groups/) using a special symbol. In the next example we create a group of buttons that are used to select a survey answer and add custom **active** state styling. + + + +### Tax form confirmation + +This example utilizes the [v-text-field](/components/text-fields/) component to collect data from the user and the **loading** prop of `v-btn` when submitting the form. + + + +### Dialog action + +Buttons are often used to trigger actions within a [v-dialog](/components/dialogs/). In this example we use the **outlined** variant and the **color** prop to create a button that is visually distinct from the other buttons. + + + +### Cookie settings + +In this example we use a [v-banner](/components/banners/) component to display a custom cookie consent banner. Clicking the "Manage Cookies" button will prompt a [v-dialog](/components/dialogs/) component. + + + +### Readonly buttons + +In this example, we change the properties of the `v-btn` based upon a "subscription" state. When the user is subscribed, we want to disable interaction with the button, but not change its appearance; which is what occurs when using the **disabled** property. + + + +## Global Configuration + +Modify the default values and set a default style for all `v-btn` components using the [Global configuration](/features/global-configuration/). This helps keep your application consistent and allows you to change it in the future with minimal effort. + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetifyjs' + +export default createVuetify({ + defaults: { + VBtn: { + color: 'primary', + variant: 'outlined', + rounded: true, + }, + }, +}) +``` + +## Aliasing + +Utilize the [component aliasing](/features/aliasing/) feature to generate virtual components derived from the v-btn component. This proves valuable when dealing with numerous button variations within design specifications or when developing a custom library based on Vuetify. + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetifyjs' +import { VBtn } from 'vuetifyjs/components' + +export createVuetify({ + aliases: { + VBtnSecondary: VBtn, + VBtnTertiary: VBtn, + }, + defaults: { + VBtn: { + color: 'primary', + variant: 'text', + }, + VBtnSecondary: { + color: 'secondary', + variant: 'flat', + }, + VBtnTertiary: { + rounded: true, + variant: 'plain', + }, + }, +}) +``` + +## SASS Variables + +Make fine tuned changes by modifying the `v-btn` [SASS variables](/features/sass-variables). This is useful when you want to change the default button height or padding. + +```scss { resource="src/settings.scss" } +@use 'vuetify/settings' with ( + $button-banner-actions-padding: 16px, + $button-height: 32px, +); +``` + +Some of these values can be modified using the [Global configuration](/features/global-configuration/) as well and will take precedence over the SASS variables. For example, the **height** prop can be used to change the default button height without modifying the SASS variables. + +## Defaults Side Effects + +There are instances where a set of default properties are injected or custom styling is applied to the `v-btn`. This can be for a variety of reasons, but the most common are: + +* to match a design specification +* to provide a better visual appearance based upon context +* to avoid creating proprietary components; e.g. `v-bottom-navigation-btn` and `v-card-btn` + +### Banners + +The `v-banner-actions` component applies the **text** variant and **slim** prop, reducing button x-axis padding to **8px**. + +| Documentation | API | +| - | - | +| [Banners](/components/banners/) | [v-banner-actions](/api/v-banner-actions/) | + + + +The following properties are modified when used within a `v-banner-actions` component: + +| Property | Value | +| - | - | +| **color** | provided by `v-banner-actions` | +| **density** | provided by `v-banner-actions` | +| **slim** | `true` | +| **variant** | `text` | + +### Bottom navigation + +The `v-bottom-navigation` component **scopes** out all previously provided defaults and applies its own. This is to avoid changes made to `v-btn` in the [Global configuration](/features/global-configuration/). Buttons automatically register with `v-bottom-navigation`'s' group and will update the **model** when clicked. + +| Documentation | API | +| - | - | +| [Bottom navigation](/components/bottom-navigation/) | [v-bottom-navigation](/api/v-bottom-navigation/) | + + + +The following properties are modified when used within a `v-bottom-navigation` component: + +| Property | Value | +| - | - | +| **color** | provided by `v-bottom-navigation` | +| **density** | provided by `v-bottom-navigation` | +| **stacked** | `true` when **mode** is `shift` | +| **variant** | `text` | + +### Button groups + +The `v-btn-group` component makes multiple changes to the `v-btn` component. + +| Documentation | API | +| - | - | +| [Button groups](/components/button-groups/) | [v-btn-group](/api/v-btn-group/) | + + + +The following properties are modified when used within a `v-btn-group` component: + +| Property | Value | +| - | - | +| **color** | provided by `v-btn-group` | +| **height** | `auto` | +| **density** | provided by `v-btn-group` | +| **flat** | `true` | +| **variant** | provided by `v-btn-group` | + +### Cards + +The `v-card-actions` component applies the **text** variant and **slim** prop, reducing button x-axis padding to **8px**, and applies a start margin for all siblings. This is to ensure the text from the button lines up with the text and title of the card and that there is space between its actions. + +| Documentation | API | +| - | - | +| [Cards](/components/cards/) | [v-card-actions](/api/v-card-actions/) | + + + +The following properties are modified when used within a `v-card-actions` component: + +| Property | Value | +| - | - | +| **slim** | `true` | +| **variant** | `text` | + +### Snackbars + +The `v-snackbar` component applies the **text** variant, **slim** prop, and removes ripples from all `v-btn` components. + +| Documentation | API | +| - | - | +| [Snackbars](/components/snackbars/) | [v-snackbar](/api/v-snackbar/) | + + + +The following properties are modified when used within the **actions** slot of the `v-snackbar` component: + +| Property | Value | +| - | - | +| **slim** | `true` | +| **ripple** | `false` | +| **variant** | `text` | + +### Toolbars and AppBars + +The `v-toolbar` component applies the **text** variant to all `v-btn` components. In addition, the [v-toolbar-items](/api/v-toolbar-items/) component is used to create a grouping of buttons that fill the height of the toolbar. + +| Documentation | API | +| - | - | +| [Toolbars](/components/toolbars/) | [v-toolbar](/api/v-toolbar/) | + + + +::: info + +The [v-app-bar](/components/app-bars/) component uses [v-toolbar](/components/toolbars/) internally. When applying global defaults, you must target the `v-toolbar` component. + +::: + +```js { resource="src/plugins/vuetify.js" } +export default createVuetify({ + defaults: { + VToolbar: { + VBtn: { variant: 'flat' }, + }, + }, +}) +``` + +The following properties are modified when used within a `v-toolbar` or `v-toolbar-items` component: + +| Property | Value | +| - | - | +| **height** | provided by `v-toolbar-items` | +| **variant** | `text` | + + + +## Accessibility + +The `v-btn` component is an extension of the native `button` element and supports all of the same accessibility features. + +### ARIA Attributes + +By default, the `v-btn` component includes relevant [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) attributes to enhance accessibility. The component is automatically assigned the `type="button"` attribute, which indicates its purpose as a button to assistive technologies. + +### Keyboard Navigation + +The `v-btn` component is natively focusable and responds to keyboard events, such as pressing the Enter or Space key to trigger the button's action. This ensures that users can navigate and interact with your application using just the keyboard. + +### Accessible Labels + +When using a [v-icon](/components/icons/) within the `v-btn` component (e.g., with the **icon** prop), it is essential to provide a text alternative for screen reader users. You can add an `aria-label` attribute with a descriptive label to ensure that the button's purpose is clear to all users. + +```html + +``` + +### Touch Target Size + +Make sure your buttons have an adequate touch target size, especially on touch devices. A larger touch target can improve the usability of your buttons for users with motor impairments or those using small screens. You can use **large** or **x-large** values for the size prop to increase the button size: + +```html + + Large Button + + + + Extra Large Button + +``` diff --git a/packages/docs/src/pages/en/components/calendars.md b/packages/docs/src/pages/en/components/calendars.md new file mode 100644 index 0000000..b402895 --- /dev/null +++ b/packages/docs/src/pages/en/components/calendars.md @@ -0,0 +1,82 @@ +--- +emphasized: true +meta: + nav: Calendars + title: Calendar component + description: The calendar component is a clean and simple adaptation to the popular Google Calendar application. + keywords: calendars, vuetify calendar component, vue calendar component +related: + - /components/date-pickers/ + - /features/dates/ + - /components/cards/ +features: + github: /labs/VCalendar/ + label: 'C: VCalendar' + report: true +--- + +# Calendars + +The `v-calendar` component is used to display information in a daily, weekly, monthly. The daily view has slots for all day or timed elements, and the weekly and monthly view has a slot for each day. + + + +::: warning +This feature requires [v3.4.9](/getting-started/release-notes/?version=v3.4.9) +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VCalendar } from 'vuetify/labs/VCalendar' + +export default createVuetify({ + components: { + VCalendar, + }, +}) +``` + +## Usage + +A calendar has a type and a value which determines what type of calendar is shown over what span of time. This shows the bare minimum configuration, an array of events with **title**, **start** and **end** properties. **end** is optional, it defaults to the **start**. If the **start** has a time it's considered a timed event and will be shown accordingly in the day views. An event can span multiple days and will be rendered accordingly. + + + + + +## API + +| Component | Description | +| - | - | +| [v-calendar](/api/v-calendar/) | Primary Component | + + + +## Guide + +The `v-calendar` component in Vuetify offers a versatile solution for building various calendar interfaces. It's designed to be highly customizable, catering to a wide range of applications from simple date pickers to complex event calendars. + +### Props + +The `v-calendar` component is equipped with a range of props that allow you to tailor its functionality and appearance to your specific requirements. This section will provide an overview of the available properties, offering insights into their usage and impact on the calendar's behavior and presentation. + +#### Type month + +This is a calendar with the type of `month` + + + +#### Type week + +This is a calendar with the type of `week` + + + +#### Type day + +This is a calendar with the type of `day` + + diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md new file mode 100644 index 0000000..ed260d8 --- /dev/null +++ b/packages/docs/src/pages/en/components/cards.md @@ -0,0 +1,247 @@ +--- +meta: + nav: Cards + title: Card component + description: The v-card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions. + keywords: cards, vuetify card component, vue card component, v-card +related: + - /components/buttons + - /components/images + - /styles/text-and-typography +features: + figma: true + label: 'C: VCard' + github: /components/VCard/ + report: true + spec: https://m2.material.io/components/cards +--- + +# Cards + + The `v-card` component is a versatile and enhanced version of [v-sheet](/components/sheets/) that provides a simple interface for headings, text, images, icons, and more. + +![Card Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-card/v-card-entry.png) + + + + + +## Usage + +The `v-card` component is a stylish way to wrap different types of content; such as tables, images, or user actions. + + + +## API + +| Component | Description | +| - | - | +| [v-card](/api/v-card/) | Primary Component | +| [v-card-item](/api/v-card-item/) | Sub-component used to wrap the Card's `v-card-title` and `v-card-subtitle` components. | +| [v-card-title](/api/v-card-title/) | Sub-component used to display the Card's title. Wraps the `#title` slot | +| [v-card-subtitle](/api/v-card-subtitle/) | Sub-component used to display the Card's subtitle. Wraps the `#subtitle` slot. | +| [v-card-text](/api/v-card-text/) | Sub-component used to display the Card's text. Wraps the `#text` slot. | +| [v-card-actions](/api/v-card-actions/) | Sub-component that modifies the default styling of [v-btn](/components/buttons/). Wraps the `#actions` slot | + + + +## Anatomy + +The recommended placement of elements inside of `v-card` is: + +* Place `v-card-title`, `v-card-subtitle` or other title text on top +* Place `v-card-text` and other forms of media below the card header +* Place `v-card-actions` after card content + +![Card Anatomy](https://cdn.vuetifyjs.com/docs/images/components-temp/v-card/v-card-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The Card container holds all `v-card` components. Composed of 3 major parts: `v-card-item`, `v-card-text`, and `v-card-actions` | +| 2. Title (optional) | A heading with increased **font-size** | +| 3. Subtitle (optional) | A subheading with a lower emphasis text color | +| 4. Text (optional) | A content area with a lower emphasis text color | +| 5. Actions (optional) | A content area that typically contains one or more [v-btn](/components/buttons) components | + +## Guide + +The `v-card` component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions. It is a content container that is the most common way to present information. + +### Basics + +There are three ways you can populate a `v-card` with content. The first one is by using props, the second one is by slots, and the third one is by manually using the `v-card-*` components. + + + +Props give you an easy interface to display text-only content. They can also be used to easily render images and icons. Use slots if you need to render more complex content. If you need full control over the content, use markup. + +### Combined + +In some cases it is possible to combine the different options, like the example below where props, slots and markup have all been used. + + + +::: info + +In general slots take precedence over props. So if you provide both **text** prop and use **text** slot, then only the slot content will be rendered. + +::: + +### Props + +The `v-card` component has a variety of props that allow you to customize its appearance and behavior. + +#### Variants + +The **variant** prop gives you easy access to several different card styles. Available variants are: **elevated**(default), **flat**, **tonal**, **outlined**, **text**, and **plain**. + +| Value | Description | +|--------------|-------------------------------------------------------------| +| **elevated** | Elevates the card with a shadow | +| **flat** | Removes card shadow and border | +| **tonal** | Background color is a lowered opacity of the color | +| **outlined** | Applies a thin border and card has zero elevation | +| **text** | Removes the background and removes shadow | +| **plain** | Removes the background and lowers the opacity until hovered | + + + + + +#### Color + +Cards can be colored by using any of the builtin colors and contextual names using the **color** prop. + + + +#### Elevation + +The **elevation** property provides up to 24 levels of shadow depth. By default, cards rest at 2dp. + + + +#### Hover + +When using the **hover** prop, the cards will increase its elevation when the mouse is hovered over them. + + + +#### Href + +The card becomes an anchor with the **href** prop. + + + +#### Link + +Add the **link** prop for the same style without adding an anchor. + + + +#### Disabled + +The **disabled** prop can be added in order to prevent a user from interacting with the card. + + + +#### Image + +Apply a specific background image to the Card. + + + +::: tip + +`v-card` does not allow its content to overflow outside the card by default. It also establishes a z-index stacking context, which prevents its content from displaying on top of elements outside the `v-card`, even when it sets a higher z-index value. To override this default behavior, apply the following usage: ``. + +::: + +### Slots + +The `v-card` component provides slots that enable you to customize content created by its props or to add additional content. + +Slots give you greater control to customize the content of the `v-card` component while still taking advantage of the easy-to-use props. + +#### Avatar and icon + +You can use the **prepend-avatar**, **append-avatar**, **prepend-icon** and **append-icon** props or the **prepend** and **append** slots to place a [v-icon](/components/icons/) that automatically injects the designated icon. + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-card` component. + +### Card Reveal + +Using [v-expand-transition](/api/v-expand-transition/) and a `@click` event you can have a card that reveals more information once the button is clicked, activating the hidden card to be revealed. + + + +### Content wrapping + +The `v-card` component is useful for wrapping content. + + + +### Custom actions + +With a simple conditional, you can easily add supplementary text that is hidden until opened. + + + + + +### Grids + +Using [grids](/components/grids/), you can create beautiful layouts. + + + +### Horizontal cards + +You can also play with the card layout using [layout flex](/styles/flex/). + + + +### Information card + +Cards are entry points to more detailed information. To keep things concise, ensure to limit the number of actions the user can take. + + + +### Media with text + +Using the layout system, we can add custom text anywhere within the background. + + + +### Twitter card + +The `v-card` component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the `v-card-title`, `v-card-text` and `v-card-actions` components. + + + +### Weather card + +Using [v-list-items](/components/lists) and a [v-slider](/components/sliders), we are able to create a unique weather card. The list components ensure that we have consistent spacing and functionality while the slider component allows us to provide a useful interface of selection to the user. + + + +### Loading + +Use an indeterminate [v-progress-linear](/components/progress-linear) to indicate a loading state. + + + +### Earnings goal + +This example utilizes slots to customize the appearance of the different content areas. + + + +### Funding card + +Utilize a combination of Card properties and utility classes to create a unique funding card. + + diff --git a/packages/docs/src/pages/en/components/carousels.md b/packages/docs/src/pages/en/components/carousels.md new file mode 100644 index 0000000..5af9d54 --- /dev/null +++ b/packages/docs/src/pages/en/components/carousels.md @@ -0,0 +1,92 @@ +--- +meta: + nav: Carousels + title: Carousel component + description: The carousel component is used to cycle through visual content such as images or slides of text. + keywords: carousels, vuetify carousel component, vue carousel component +related: + - /components/parallax/ + - /components/images/ + - /components/windows/ +features: + github: /components/VCarousel/ + label: 'C: VCarousel' + report: true +--- + +# Carousels + +The `v-carousel` component is used to display large numbers of visual content on a rotating timer. + + + + + +## Usage + +The `v-carousel` component expands upon `v-window` by providing additional features targeted at displaying images. + + + + + +## API + +| Component | Description | +| - | - | +| [v-carousel](/api/v-carousel/) | Primary component | +| [v-carousel-item](/api/v-carousel-item/) | Sub-component used for displaying the `v-carousel` state | + + + +## Examples + +### Props + +#### Custom delimiters + +Use any available icon as your carousel's slide delimiter. + + + + + +#### Cycle + +With the **cycle** prop you can have your slides automatically transition to the next available every 6s (default). + + + +#### Hide controls + +You can hide the carousel navigation controls with `:show-arrows="false"`. Or you can make them only appear on hover with `show-arrows="hover"`. + + + +#### Customized arrows + +Arrows can be customized by using **prev** and **next** slots. + + + +#### Hide delimiters + +You can hide the bottom controls with **hide-delimiters** prop. + + + +#### Progress + +You can show a linear progress bar with the **progress** prop. It will indicate how far into the cycle the carousel currently is. + + + +#### Model + +You can control carousel with **v-model**. + + diff --git a/packages/docs/src/pages/en/components/checkboxes.md b/packages/docs/src/pages/en/components/checkboxes.md new file mode 100644 index 0000000..0f7a304 --- /dev/null +++ b/packages/docs/src/pages/en/components/checkboxes.md @@ -0,0 +1,90 @@ +--- +meta: + nav: Checkboxes + title: Checkbox component + description: The checkbox component permits users to select between two values. + keywords: checkbox, checkbox component, vuetify checkbox component, vue checkbox component +related: + - /components/switches + - /components/forms + - /components/text-fields +features: + label: 'C: VCheckbox' + report: true + github: /components/VCheckbox/ + spec: https://m2.material.io/components/checkboxes +--- + +# Checkboxes + +The `v-checkbox` component provides users the ability to choose between two distinct values. These are very similar to a switch and can be used in complex forms and checklists. + + + +## Usage + +A `v-checkbox` in its simplest form provides a toggle between 2 values. + + + + + +::: tip + +A simpler version, [`v-checkbox-btn`](/components/data-tables/basics/#simple-checkbox) is used primarily as a lightweight alternative in data-table components to select rows or display inline boolean data. + +::: + +## API + +| Component | Description | +| - | - | +| [v-checkbox](/api/v-checkbox/) | Primary component | + + + +## Examples + +### Props + +#### Colors + +Checkboxes can be colored by using any of the builtin colors and contextual names using the **color** prop. + + + +#### Model as array + +Multiple `v-checkbox`'s can share the same **v-model** by using an array. + + + +#### Model as boolean + +A single `v-checkbox` will have a boolean value as its **value**. + + + +#### States + +`v-checkbox` can have different states such as **default**, **disabled**, and **indeterminate**. + + + +### Slots + +#### Label slot + +Checkbox labels can be defined in `label` slot - that will allow to use HTML content. + + + +### Misc + +#### Inline text-field + +If you need to place checkboxes in line with other components, you can use the `v-checkbox-btn` component. + +This component renders just checkbox, without the trapping of a form input such as validation, a label, and messages. + + diff --git a/packages/docs/src/pages/en/components/chip-groups.md b/packages/docs/src/pages/en/components/chip-groups.md new file mode 100644 index 0000000..73056f7 --- /dev/null +++ b/packages/docs/src/pages/en/components/chip-groups.md @@ -0,0 +1,88 @@ +--- +meta: + nav: Chip groups + title: Chip group component + description: The chip group component combines numerous selectable chips into single or multiple lines. + keywords: chip groups, vuetify chip group component, vue chip group component +related: + - /components/chips/ + - /components/slide-groups/ + - /components/item-groups/ +features: + github: /components/VChipGroup/ + label: 'C: VChipGroup' + report: true + spec: https://m2.material.io/components/chips#choice-chips +--- + +# Chip groups + +The `v-chip-group` supercharges the `v-chip` component by providing groupable functionality. It is used for creating groups of selections using chips. + + + + + +## Usage + +Chip groups make it easy for users to select filtering options for more complex implementations. By default `v-chip-group` will overflow to the right but can be changed to a **column** only mode. + + + + + +## API + +| Component | Description | +| - | - | +| [v-chip-group](/api/v-chip-group/) | Primary component | + + + +## Examples + +### Props + +#### Column + +Chip groups with **column** prop can wrap their chips. + + + +#### Filter results + +Easily create chip groups that provide additional feedback with the **filter** prop. This creates an alternative visual style that communicates to the user that the chip is selected. + + + +#### Mandatory + +Chip groups with **mandatory** prop must always have a value selected. + + + +#### Multiple + +Chip groups with **multiple** prop can have many values selected. + + + +### Misc + +#### Product card + +The `v-chip` component can have an explicit value used for its model. This gets passed to the `v-chip-group` component and is useful for when you don't want to use the chips index as their values. + + + +#### Toothbrush card + +Chip groups allow the creation of custom interfaces that perform the same actions as an item group or radio controls, but are stylistically different. + + + +#### Reddit style categories + +Use a combination of utility classes and emojis to create a Reddit-style category selection. + + diff --git a/packages/docs/src/pages/en/components/chips.md b/packages/docs/src/pages/en/components/chips.md new file mode 100644 index 0000000..1ee5cf8 --- /dev/null +++ b/packages/docs/src/pages/en/components/chips.md @@ -0,0 +1,144 @@ +--- +meta: + nav: Chips + title: Chip component + description: The chip component allows a user to enter information, make selections, filter content or trigger actions. + keywords: chips, vuetify chip component, vue chip component +related: + - /components/avatars + - /components/icons + - /components/selects +features: + figma: true + github: /components/VChip/ + label: 'C: VChip' + report: true + spec: https://m2.material.io/components/chips +--- + +# Chips + +The `v-chip` component is used to convey small pieces of information. Using the `close` property, the chip becomes interactive, allowing user interaction. This component is used by the [v-chip-group](/components/chip-groups) for advanced selection options. + +![Chips Entry](https://cdn.vuetifyjs.com/docs/images/components/v-chip/v-chip-entry.png) + + + +## Usage + +Chips come in the following variations: closeable, filter, outlined, pill. The default slot of `v-chip` will also accept avatars and icons alongside text. + + + + + +## API + +| Component | Description | +| - | - | +| [v-chip](/api/v-chip/) | Primary component | + + + +## Guide + +The `v-chip` component is used to convey small pieces of information. Using the `close` property, the chip becomes interactive, allowing user interaction. This component is used by the [v-chip-group](/components/chip-groups) for advanced selection options. + +### Props + +Similar to other components such as [v-btn](/components/buttons/) and [v-list](/components/lists/), the `v-chip` component has a large selection of props for customizing the appearance. + +#### Closable + +Closable chips can be controlled with a v-model. You can also listen to the `click:close` event if you want to know when a chip has been closed. + + + +#### Color and variants + +Any color from the Material Design palette can be used to change a chips color. + + + +The **variant** prop gives you easy access to several different button styles. Available variants are: **elevated**, **flat**, **tonal** (default), **outlined**, **text**, and **plain**. + +| Value | Example | Description | +|--------------|----------------------------------------------------------|-----------------------------------------------------------------| +| **elevated** | Chip | Elevates the chip with a shadow | +| **flat** | Chip | Removes chip shadow | +| **tonal** | Chip | Background color is a lowered opacity of the current text color | +| **outlined** | Chip | Applies a thin border with the current text color | +| **text** | Chip | Removes the background and removes shadow | +| **plain** | Chip | Removes the background and lowers the opacity until hovered | + +#### Size and density + +Chips can have various sizes from `x-small` to `x-large`. `density` is used to adjust the vertical spacing without affecting width or font size. + + + +#### Draggable + +`draggable` `v-chip` component can be dragged by mouse. + + + +#### Label + +Label chips use the `v-card` border-radius. + + + +#### No ripple + +`v-chip` can be rendered without ripple if `ripple` prop is set to `false`. + + + +#### Outlined + +Outlined chips inherit their border color from the current text color. + + + +### Slots + +#### Icon + +Chips can use text or any icon available in the Material Icons font library. + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-chip` component. + +### Action chips + +Chips can be used as actionable items. Provided with a _click_ event, the chip becomes interactive and can invoke methods. + + + +#### Custom list + +In this example we opt to use a customized list instead of [v-autocomplete](/components/autocompletes). This allows us to always display the options available while still providing the same functionality of search and selection. + + + +#### Expandable + +Chips can be combined with `v-menu` to enable a specific set of actions for a chip. + + + +#### Filtering + +Chips are great for providing supplementary actions to a particular task. In this instance, we are searching a list of items and collecting a subset of information to display available keywords. + + + +#### In selects + +Selects can use chips to display the selected data. Try adding your own tags below. + + diff --git a/packages/docs/src/pages/en/components/color-pickers.md b/packages/docs/src/pages/en/components/color-pickers.md new file mode 100644 index 0000000..da101de --- /dev/null +++ b/packages/docs/src/pages/en/components/color-pickers.md @@ -0,0 +1,69 @@ +--- +meta: + nav: Color pickers + title: Color picker component + description: The color picker component allows users to select a from pre-defined or custom colors using a variety of different inputs and formats. + keywords: color pickers, vuetify color picker component, vue color picker component +related: + - /components/menus/ + - /styles/colors/ + - /features/theme/ +features: + github: /components/VColorPicker/ + label: 'C: VColorPicker' + report: true +--- + +# Color pickers + +The `v-color-picker` allows you to select a color using a variety of input methods. + + + +## Usage + + + + + +## API + +| Component | Description | +| - | - | +| [v-color-picker](/api/v-color-picker/) | Primary component | + + + +## Examples + +### Props + +#### Customizing the look of the picker + +There are a number of props available to help you customize the component by hiding or showing the various parts of the picker. You can independently hide the canvas, the sliders, and the inputs. You can also show a collection of swatches. + + + +#### Elevation + +Adjust the elevation of the `v-color-picker` component using the **elevation** or **flat** prop. The **flat** is equivalent to setting **elevation** to 0. + + + +#### Mode + +You can specify which input modes are available to your users with the `modes` prop. If you only set a single mode, then the mode toggle will automatically be hidden. You can also control the current mode with the `mode` v-model. + + + +#### Model + +The `v-color-picker` uses the `v-model` prop to control the color displayed. It supports hex strings such as **#FF00FF** and **#FF00FF00**, and objects representing **RGBA**, **HSLA** and **HSVA** values. The component will try to emit the color in the same format that was provided. If the value is null, then the `v-color-picker` will default to emitting hex colors. + + + +#### Swatches + +Using the `show-swatches` prop you can display an array of color swatches that users can pick from. It is also possible to customize what colors are shown using the `swatches` prop. This prop accepts a two-dimensional array, where the first dimension defines a column, and second dimension defines the swatches from top to bottom by providing rgba hex strings. You can also set the max height of the swatches section with the `swatches-max-height` prop. + + diff --git a/packages/docs/src/pages/en/components/combobox.md b/packages/docs/src/pages/en/components/combobox.md new file mode 100644 index 0000000..2e60804 --- /dev/null +++ b/packages/docs/src/pages/en/components/combobox.md @@ -0,0 +1,73 @@ +--- +meta: + nav: Combobox + title: Combobox component + description: The combobox component provides type-ahead autocomplete functionality and allows users to provide a custom values beyond the provided list of options. + keywords: combobox, vuetify combobox component, vue combobox component +related: + - /components/autocompletes/ + - /components/forms/ + - /components/selects/ +features: + figma: true + label: 'C: VCombobox' + report: true + github: /components/VCombobox/ + spec: https://m2.material.io/components/text-fields +--- + +# Combobox + +The `v-combobox` component is a [v-text-field](/components/text-fields) that allows the user to select values from a provided **items** array, or to enter their own value. Created items will be returned as strings. + + + +## Usage + +With Combobox, you can allow a user to create new values that may not be present in a provided items list. + + + + + +## API + +| Component | Description | +| - | - | +| [v-combobox](/api/v-combobox/) | Primary component | +| [v-autocomplete](/api/v-autocomplete/) | A select component that allows for advanced filtering | +| [v-select](/api/v-select/) | A replacement for the HTML | + + + +## Caveats + +::: error + As the Combobox allows user input, it **always** returns the full value provided to it (for example a list of Objects will always return an Object when selected). This is because there's no way to tell if a value is supposed to be user input or an object lookup [GitHub Issue](https://github.com/vuetifyjs/vuetify/issues/5479) + + This also means that a typed string will not select an item the same way clicking on it would, you may want to set `auto-select-first="exact"` when using object items. +::: + +## Examples + +### Props + +#### Density + +You can use `density` prop to adjust vertical spacing within the component. + + + +#### Multiple combobox + +Previously known as **tags** - user is allowed to enter more than one value. + + + +### Slots + +#### No data with chips + +In this example we utilize a custom **no-data** slot to provide context to the user when searching / creating items. + + diff --git a/packages/docs/src/pages/en/components/confirm-edit.md b/packages/docs/src/pages/en/components/confirm-edit.md new file mode 100644 index 0000000..3facd46 --- /dev/null +++ b/packages/docs/src/pages/en/components/confirm-edit.md @@ -0,0 +1,52 @@ +--- +emphasized: true +meta: + nav: Confirm Edit + title: Confirm Edit + description: The confirm edit component is used to allow the user to verify their changes before they are committed. This is useful when you want to prevent accidental changes or to allow the user to cancel their changes. + keywords: v-confirm-edit, confirm edit, vuetify confirm edit, vuetify confirm edit component, vuetify confirm edit examples +related: + - /components/avatars/ + - /components/icons/ + - /components/toolbars/ +features: + github: /components/VConfirmEdit/ + label: 'C: VConfirmEdit' + report: true +--- + +# Confirm edit + +The `v-confirm-edit` component is used to allow the user to verify their changes before they are committed. + + + +::: success + +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) + +::: + +## Usage + + + + + +## API + +| Component | Description | +| - | - | +| [v-confirm-edit](/api/v-confirm-edit/) | Primary Component | + + + +## Guide + +The `v-confirm-edit` component is an intuitive way to capture a model's changes before they are committed. This is useful when you want to prevent accidental changes or to allow the user to cancel their changes. + +### Pickers + +It's easy to integrate pickers into the `v-confirm-edit` component. This allows you to provide a more user-friendly experience when selecting dates, times, or colors. + + diff --git a/packages/docs/src/pages/en/components/data-iterators.md b/packages/docs/src/pages/en/components/data-iterators.md new file mode 100644 index 0000000..39d985a --- /dev/null +++ b/packages/docs/src/pages/en/components/data-iterators.md @@ -0,0 +1,109 @@ +--- +meta: + nav: Data iterators + title: Data iterator component + description: The data iterator component is used for filter and displaying data including sorting, searching, pagination, and selection. + keywords: data iterators, vuetify data iterator component, vue data iterator component +related: + - /components/data-tables/basics/ + - /components/simple-tables/ + - /components/toolbars/ +features: + github: /components/VDataIterator/ + label: 'C: VDataIterator' + report: true +--- + +# Data iterators + +The `v-data-iterator` component is used for displaying arbitrary data, and shares a majority of its functionality with the `v-data-table` component. Features include sorting, searching, pagination, and selection. + + + + + +::: success +This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0) +::: + +## Usage + +The `v-data-iterator` allows you to customize exactly how to display your data. In this example we are using a grid with cards. + + + + + +## API + +| Component | Description | +|------------------------------------------|-------------------| +| [v-data-iterator](/api/v-data-iterator/) | Primary Component | + + + +## Anatomy + +The recommended placement of elements inside of a `v-data-iterator` are: + +* Place a [v-toolbar](/components/toolbars/) or similar component above the main content +* Place content after the header +* Place a [v-pagination](/components/paginations/) below the main content + +![Data iterator Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-data-iterator/v-data-iterator-anatomy.png){ height=392 } + +| Element / Area | Description | +| - | - | +| 1. Header (optional) | The header is used to display a title and actions | +| 2. Container | The container is the root element of the component | +| 3. Footer (optional) | The footer is used to display pagination | + +## Guide + +The `v-data-iterator` component is used for displaying data, and shares a majority of its functionality with the `v-data-table` component. Features include sorting, searching, pagination, and selection. + +The following code snippet is an example of a basic `v-data-iterator` component: + +```html + + + +``` + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-data-iterator` component. + +### Slots + +The `v-data-iterator` component has 4 main slots + +#### Default + +The `v-data-iterator` has internal state for both selection and expansion, just like `v-data-table`. In this example we use the methods `isExpanded` and `toggleExpand` available on the default slot. + + + +#### Header and footer + +The `v-data-iterator` has both a **header** and **footer** slot for adding extra content. + + + +#### Controllable props + +Sorting, filters and pagination can be controlled externally by using the individual props + + + +#### Loader props + +Loader can be used to change loader on "loading" prop + + diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md new file mode 100644 index 0000000..b7d4cc1 --- /dev/null +++ b/packages/docs/src/pages/en/components/data-tables/basics.md @@ -0,0 +1,222 @@ +--- +meta: + nav: Basics + title: Data table component + description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection. + keywords: data tables, vuetify data table component, vue data table component +related: + - /components/paginations/ + - /components/tables/ + - /components/lists/ +features: + github: /components/VDataTable/ + label: 'C: VDataTable' + report: true + spec: https://m2.material.io/components/data-tables +--- + +# Data tables + +The `v-data-table` component is used for displaying tabular data. Features include sorting, searching, pagination, grouping, and row selection. + + + +## Usage + +The standard data table presumes that the entire data set is available locally. Sorting, pagination, and filtering is supported and done internally by the component itself. + + + + + +## API + +| Component | Description | +| - | - | +| [v-data-table](/api/v-data-table/) | Primary Component | +| [v-data-table-headers](/api/v-data-table-headers/) | Functional Component used to display Data-table headers | +| [v-data-table-footer](/api/v-data-table-footer/) | Functional Component used to display Data-table footers | +| [v-checkbox-btn](/api/v-checkbox-btn/) | Reusable lightweight [v-checkbox](/components/checkboxes) | + + + +### Server side tables + +This variant of the data table is meant to be used for very large datasets, where it would be inefficient to load all the data into the client. It supports sorting, filtering, pagination, and selection like a standard data table, but all the logic must be handled externally by your backend or database. + +Find more information and examples on the [Server side tables](/components/data-tables/server-side-tables) page. + + + +### Virtual tables + +The virtual variant of the data table relies, like the standard variant, on all data being available locally. But unlike the standard variant it uses virtualization to only render a small portion of the rows. This makes it well suited for displaying large data sets. It supports client-side sorting and filtering, but not pagination. + +Find more information and examples on the [Virtual tables](/components/data-tables/virtual-tables) page. + + + +## Guide + +The `v-data-table` component is a simple and powerful table manipulation component. It is perfect for showing large amounts of tabular data. + +### Items + +Table items can be objects with almost any shape or number of properties. The only requirement is some form of unique identifier if row selection is being utilized. + +### Headers + +The headers array is the core of the table. It defines which properties to display, their associated labels, how they should be sorted, and what they should look like. +
+All properties are optional, but at least one of **title**, **value**, or **key** should be present to display more than just an empty column: + +```js +headers = [ + { title: 'No data, just a label' }, + { key: 'quantity' }, + { value: 'price' }, +] +``` + +Without any headers defined, the table will use all the keys of the first item as headers. + +Headers can also be a tree structure with a **children** property to create multi-row header labels with rowspan and colspan calculated automatically. +
+Leaf nodes (objects without **children**) will be used as columns for each item. +
+Branch nodes (objects with **children**) support all the same sorting and filtering options as leaf nodes, but cannot be used as columns. + + + +#### Keys and values + +The **key** property is used to identify the column in slots, events, filters, and sort functions. It will default to the **value** property if **value** is a string. +
+**value** maps the column to a property in the items array. If **value** is not defined it will default to **key**, so key and value are interchangeable in most cases. The exception to this is reserved keys like `data-table-select` and `data-table-expand` which must be defined as **key** to work properly. +
+**key** and **value** both support dot notation to access properties of nested objects, and **value** can also be a function to combine multiple properties or do other custom formatting. If **value** is not a string then **key** must be defined. + +```js +items = [ + { + id: 1, + name: { + first: 'John', + last: 'Doe', + }, + } +] +headers = [ + { title: 'First Name', value: 'name.first' }, + { title: 'Last Name', key: 'name.last' }, + { + title: 'Full Name', + key: 'fullName', + value: item => `${item.name.first} ${item.name.last}`, + }, +] +``` + +#### Sorting, filtering, pagination + +See [Data and display](/components/data-tables/data-and-display). + +#### Customization + +Other options are available for setting **width**, **align**, **fixed**, or pass custom props to the header element with **headerProps** and row cells with **cellProps**. + +### Props + +There are no shortable of properties available for customizing various aspects of the Data table components. + +#### Density + +Using the **density** prop you are able to give your data tables an alternate style. + + + + + +#### Hide default header and footer + +You can apply the **hide-default-header** and **hide-default-footer** props to remove the default header and footer respectively. + + + +#### Selection + +The **show-select** prop will render a checkbox in the default header to toggle all rows, and a checkbox for each row. + +For more information and examples, see the [selection examples](/components/data-tables/data-and-display/#selection-examples) page. + + + +#### Simple checkbox + +When wanting to use a checkbox component inside of a slot template in your data tables, use the `v-checkbox-btn` component rather than the `v-checkbox` component. The `v-checkbox-btn` component is used internally and will respect header alignment. + + + +### Slots + +#### Header slot + +You can use the dynamic slots `header.` to customize only certain columns. `` corresponds to the **key** property in the items found in the **headers** prop. + +::: info +There are two built-in slots for customizing both the select (`header.data-table-select`) and expand (`header.data-table-expand`) columns when using **show-select** and **show-expand** props respectively. +::: + + + +#### Headers slot + +You can also override all the internal headers by using the `headers` slot. Remember that you will have to re-implement any internal functionality like sorting. + + + +#### Item slot + +Normally you would use the `item.` slots to render custom markup in specific columns. If you instead need more control over the entire row, you can use the `item` slot. + + + +#### Item key slot + +You can use the dynamic slots `item.` to customize only certain columns. `` is the name of the **key** property in header items sent to **headers**. So to customize the calories column we're using the `item.calories` slot. + + + +#### Group header slot + +When using the **group-by** prop, you can customize the group header with the `group-header` slot. + + + +#### Loading slot + +The `loading` slot allows you to customize your table's display state when fetching data. In this example we utilize the [v-skeleton-loader](/components/skeleton-loaders) component to display a loading animation. + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-data-table` component. + +### CRUD Actions + +`v-data-table` with CRUD actions using a `v-dialog` component for editing each row + + + +### Expandable rows + +The **show-expand** prop will render an expand icon on each row. You can customize this with the `item.data-table-expand` slot. The position of this slot can be changed by adding a column with `key: 'data-table-expand'` to the headers array. + +Just like selection, row items require a unique property on each item for expansion to work. The default is `id`, but you can use the **item-value** prop to specify a different item property. + + diff --git a/packages/docs/src/pages/en/components/data-tables/data-and-display.md b/packages/docs/src/pages/en/components/data-tables/data-and-display.md new file mode 100644 index 0000000..4f02494 --- /dev/null +++ b/packages/docs/src/pages/en/components/data-tables/data-and-display.md @@ -0,0 +1,133 @@ +--- +meta: + nav: Data and Display + title: Data table - Data and Display + description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection. + keywords: data tables, vuetify data table component, vue data table component +related: + - /components/data-tables/basics/ + - /components/paginations/ + - /components/tables/ +--- + +# Data and Display + +Data table filtering is key feature that allows users to quickly find the data they are looking for. + + + +## Filtering examples + +These examples demonstrate various ways that you can utilize the **search** prop to filter results. + +### Search + +The data table exposes a **search** prop that allows you to filter your data. + + + +### Filterable + +You can easily disable specific columns from being included when searching through table rows by setting the property **filterable** to false on the header item(s). In the example below the dessert name column is no longer searchable. + + + +### Custom filter + +You can override the default filtering used with the **search** prop by supplying a function to the **custom-filter** prop. You can see the signature of the function below. + +```ts +(value: string, query: string, item?: any) => boolean | number | [number, number] | [number, number][] +``` + +In the example below, the custom filter will only match inputs that are in completely in upper case. + + + +## Pagination examples + +Pagination is used to split up large amounts of data into smaller chunks. + +### External pagination + +Pagination can be controlled externally by using the individual props, or by using the **options** prop. Remember that you must apply the **.sync** modifier. + + + +## Selection examples + +Selection allows you to select/deselect rows and retrieve information about which rows have been selected. + +### Item value + +For the selection feature to work, the data table must be able to differentiate each row in the data set. This is done using the **item-value** prop. It designates a property on the item that should contain a unique value. By default the property it looks for is `id`. + +You can also supply a function, if for example the unique value needs to be a composite of several properties. The function receives each item as its first argument. + + + +### Selected values + +The current selection of the data-table can be accessed through the **v-model** prop. The array will consist of the unique values found in the property you set using the **item-value** prop (or the value returned by the function you passed). You can use **return-object** prop if you want the array to consist of the actual objects instead. + + + + + +### Selectable rows + +Use the **item-selectable** prop to designate a property on your items that controls if the item should be selectable or not. + + + +### Custom select column + +Use the **item.data-table-select** slot alongside `v-checkbox-btn` to customize the checkbox used for row selection. You can also use the **header.data-table-select** slot to customize the select-all checkbox in the header of the column. + + + +### Select strategies + +Data-tables support three different select strategies. + +|Strategy|Description| +|-|-| +|`'single'`|Only a single row can be selected. The select all checkbox in the header is not shown| +|`'page'`|Multiple rows can be selected. Clicking on the select all checkbox in the header selects all (selectable) rows on the current page| +|`'all'`|Multiple rows can be selected. Clicking on the select all checkbox in the header selects all (selectable) rows in the entire data set| + + + +## Sorting examples + +Data tables can sort rows by a column value. + + + +### Basic sorting + +The sorting of your table can be controlled by the **sort-by** prop. This prop takes an array of objects, where each object has a **key** and **order** property, describing how the table is to be sorted. + +The **key** corresponds to a column defined in the **headers** array, and **order** is either the string `'asc'` or `'desc'` indicating the order in which the items are sorted. + +Unless you are using the **multi-sort** prop seen below, this array will almost always just have a single object in it. + + + +### Multi sort + +Using the **multi-sort** prop will enable you to sort on multiple columns at the same time. + + + +### Sort by raw + +::: success + +This feature was introduced in [v3.5.0 (Polaris)](/getting-started/release-notes/?version=v3.5.0) + +::: + +Using a *sortRaw* key in your headers object gives you access to all values on the item. This is useful if you want to sort by a value that is not displayed in the table or a combination of multiple values. + + diff --git a/packages/docs/src/pages/en/components/data-tables/introduction.md b/packages/docs/src/pages/en/components/data-tables/introduction.md new file mode 100644 index 0000000..7fec440 --- /dev/null +++ b/packages/docs/src/pages/en/components/data-tables/introduction.md @@ -0,0 +1,52 @@ +--- +meta: + nav: Introduction + title: Data table - Introduction + description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection. + keywords: data tables, vuetify data table component, vue data table component +related: + - /components/paginations/ + - /components/selects/ + - /components/data-tables/basics/ +--- + +# Data table - Introduction + +The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection. + + + +::: success +This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0) +::: + +## Components + +Before diving into the guides and examples, let's take a moment to understand the core components available for data tables. These are variations optimized for different scenarios. + +| Component | Use-case | +|--------------------------------------------------------------|-------------------------------------------------------------------------------------| +| [Data tables](/components/data-tables/basics/) | The base functionality data table, used for paginating, filtering and sorting data. | +| [Server tables](/components/data-tables/server-side-tables/) | Adds new events and properties used for displaying data from a server | +| [Virtual tables](/components/data-tables/virtual-tables/) | A version of the data table that has built in row virtualization features | + +## API + +| Component | Description | +|----------------------------------------------------|-------------------------------------------------------------| +| [v-data-table](/api/v-data-table/) | Primary Component | +| [v-data-table-server](/api/v-data-table-server/) | Specialized Data-table for displaying results from a server | +| [v-data-table-virtual](/api/v-data-table-virtual/) | Data-table with built in row virtualization | +| [v-data-table-footer](/api/v-data-table-footer/) | Functional Component used to display Data-table footer | +| [v-checkbox-btn](/api/v-checkbox-btn/) | Reusable lightweight [v-checkbox](/components/checkboxes) | + + + +## Guides + +Explore data table pages that provide detailed explanations and code samples for various functionalities and use cases. + +| Guide | Description | +|---------------------------------------------------------------|------------------------------------------------------------| +| [Basics](/components/data-tables/basics/) | Understand the fundamental building blocks of Data Tables. | +| [Data and Display](/components/data-tables/data-and-display/) | Learn how to manipulate and display data effectively. | diff --git a/packages/docs/src/pages/en/components/data-tables/server-side-tables.md b/packages/docs/src/pages/en/components/data-tables/server-side-tables.md new file mode 100644 index 0000000..0e93bb7 --- /dev/null +++ b/packages/docs/src/pages/en/components/data-tables/server-side-tables.md @@ -0,0 +1,37 @@ +--- +meta: + nav: Server side tables + title: Data table - Server side tables + description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection. + keywords: data tables, vuetify data table component, vue data table component +related: + - /components/data-tables/basics/ + - /components/data-tables/virtual-tables/ + - /components/tables/ +--- + +# Data table - Server side tables + +Server-side Data tables are used for showing data coming from an API. + + + +## Examples + +### Server-side paginate and sort + +To use data from an API, listen to the **@update:options** event to know when to fetch new data. Use the **loading** prop to display a progress bar while fetching the data. + + + +### Server-side search + +If you need to support search functionality, use the **search** prop to let the table know when new search input is available. Since the table does not actually do any filtering on its own, the **search** input does not need to be the actual value being searched for. In this example we have multiple values searchable, so we just make sure to set **search** to _anything_ when we need to fetch new data. + + + +### Loading + +You can use the **loading** prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the **loading-text** prop or the `loading` slot. + + diff --git a/packages/docs/src/pages/en/components/data-tables/virtual-tables.md b/packages/docs/src/pages/en/components/data-tables/virtual-tables.md new file mode 100644 index 0000000..e52d9ee --- /dev/null +++ b/packages/docs/src/pages/en/components/data-tables/virtual-tables.md @@ -0,0 +1,23 @@ +--- +meta: + nav: Virtual tables + title: Data table - Virtual tables + description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection. + keywords: data tables, vuetify data table component, vue data table component +related: + - /components/data-tables/basics/ + - /components/data-tables/server-side-tables/ + - /components/tables/ +--- + +# Data table - Virtual tables + +The v-data-table-virtual component relies on all data being available locally. But unlike the standard data-table it uses virtualization to only render a small portion of the rows. This makes it well suited for displaying large data sets. It supports sorting and filtering, but not pagination. + + + +## Examples + +### Basic example + + diff --git a/packages/docs/src/pages/en/components/date-inputs.md b/packages/docs/src/pages/en/components/date-inputs.md new file mode 100644 index 0000000..0bf278b --- /dev/null +++ b/packages/docs/src/pages/en/components/date-inputs.md @@ -0,0 +1,102 @@ +--- +emphasized: true +meta: + nav: Date inputs + title: Date input component + description: The date input is a specialized input that provides a clean interface for selecting dates, showing detailed selection information. + keywords: date input, date picker, date field +related: + - /components/date-pickers/ + - /components/text-fields/ + - /components/menus/ +features: + label: 'C: VDateInput' + report: true + github: /labs/VDateInput/ +--- + +# Date inputs + +The `v-date-input` component combines a text field with a date picker. It is meant to be a direct replacement for a standard date input. + + + +::: warning + +This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VDateInput } from 'vuetify/labs/VDateInput' + +export default createVuetify({ + components: { + VDateInput, + }, +}) +``` + +## Usage + +At its core, the `v-date-input` component is a basic container that extends [v-text-field](/components/text-fields). + + + + + +## API + +| Component | Description | +| - | - | +| [v-date-input](/api/v-date-input/) | Primary component | +| [v-date-picker](/api/v-date-picker/) | Date picker component | +| [v-text-field](/api/v-text-field/) | Text field component | + + + +## Guide + +The `v-date-input` component is a replacement for the standard date input. It provides a clean interface for selecting dates and shows detailed selection information. + +### Props + +The `v-date-input` component extends the [v-text-field](/components/text-fields/) and [v-date-picker](/components/date-pickers/) component; and supports all of their props. + +#### Model + +The default model value is a Date object, but is displayed as formatted text in the input.. + + + +#### Multiple + +Using the **multiple** prop, the default model value is an empty array. + + + +#### Range + +Using the multiple prop with a value of **range**, select 2 dates to select them and all the dates between them. + + + +#### Calendar icon + +You can move the calendar icon within the input or entirely by utilizing the **prepend-icon** and **prepend-inner-icon** properties. + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-date-input` component. + +### Passenger + +In this example, the `v-date-input` component is used to select a date of birth. + + diff --git a/packages/docs/src/pages/en/components/date-pickers-month.md b/packages/docs/src/pages/en/components/date-pickers-month.md new file mode 100644 index 0000000..20d9394 --- /dev/null +++ b/packages/docs/src/pages/en/components/date-pickers-month.md @@ -0,0 +1,101 @@ +--- +disabled: true +meta: + title: Month picker component + description: The month picker component is a stand-alone interface that allows the selection of month or both month and year. + keywords: month pickers, vuetify month picker component, vue month picker component +related: + - /components/date-pickers/ + - /components/menus/ + - /components/time-pickers/ +--- + +# Date pickers - month + +`v-date-picker` can be used as a standalone month picker component. + + + +## Usage + +Month pickers come in two orientation variations, portrait **(default)** and landscape. + + + +## API + + + +## Caveats + +::: warning + `v-date-picker` accepts ISO 8601 **date** strings (*YYYY-MM-DD*). For more information regarding ISO 8601 and other standards, visit the official ISO (International Organization for Standardization) [International Standards](https://www.iso.org/standards.html) page. +::: + +## Examples + +### Props + +#### Allowed months + +You can specify allowed months using arrays, objects or functions. + + + +#### Colors + +Month picker colors can be set using the **color** and **header-color** props. If **header-color** prop is not provided header will use the `color` prop value. + + + +#### Icons + +You can override the default icons used in the picker. + + + +#### Multiple + +Month pickers can now select multiple months with the **multiple** prop. If using **multiple** then the month picker expects its model to be an array. + + + +#### Readonly + +Selecting new date could be disabled by adding **readonly** prop. + + + +#### Show current + +By default the current month is displayed using outlined button - **show-current** prop allows you to remove the border or select different month to be displayed as the current one. + + + +#### Width + +You can specify allowed the picker's width or make it full width. + + + +### Misc + +#### Dialog and menu + +When integrating a picker into a `v-text-field`, it is recommended to use the **readonly** prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title. + +Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels. + + + +#### Internationalization + +The month picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the **locale** prop. + + + +#### Orientation + +Month pickers come in two orientation variations, portrait **(default)** and landscape. + + diff --git a/packages/docs/src/pages/en/components/date-pickers.md b/packages/docs/src/pages/en/components/date-pickers.md new file mode 100644 index 0000000..115d740 --- /dev/null +++ b/packages/docs/src/pages/en/components/date-pickers.md @@ -0,0 +1,133 @@ +--- +meta: + title: Date pickers + description: The date picker component is a stand-alone interface that allows the selection of a date, month and year. + keywords: date pickers, vuetify date picker component, vue date picker component +related: + - /components/buttons/ + - /features/dates/ + - /components/text-fields/ +features: + github: /components/VDatePicker/ + label: 'C: VDatePicker' + report: true + spec: https://m2.material.io/components/date-pickers +--- + +# Date pickers + +`v-date-picker` is a fully featured date selection component that lets users select a date. + +![Date picker Entry](https://cdn.vuetifyjs.com/docs/images/components/v-date-picker/v-date-picker-entry.png) + + + +::: success + +This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0) + +::: + +## Usage + +Date pickers come in two orientation variations, portrait **(default)** and landscape. By default they are emitting `input` event when the day (for date picker) or month (for month picker), but with **reactive** prop they can update the model even after clicking year/month. + + + + + +## API + +| Component | Description | +| - | - | +| [v-date-picker](/api/v-date-picker/) | Primary Component | + + + +## Guide + +The `v-date-picker` component is a stand-alone interface that allows the selection of a date, month and year. This component is built using the [Date composable](/features/dates/). + +All date components support the [date-io](https://github.com/dmtrKovalenko/date-io) abstraction layer for date management. By default they will use a built-in adapter that uses the native Date object, but it is possible to use any of the date-io adapters. See the [dates](/features/dates/) page for more information. + +```js +import DayJsAdapter from '@date-io/dayjs' + +createVuetify({ + date: { + adapter: DayJsAdapter, + }, +}) +``` + +### Props + +The `v-date-picker` component supports multiple props for configuring dates that can be selected, date formats, translations and more. + +#### Elevation + +The `v-date-picker` component supports elevation up to a maximum value of 24. For more information on elevations, visit the official [Material Design elevations](https://material.io/design/environment/elevation.html) page. + + + +#### Width + +You can specify the picker's width or make it full width. + + + +#### Show sibling months + +By default days from previous and next months are not visible. They can be displayed using the **show-adjacent-months** prop. + + + +#### Colors + +Date picker colors can be set using the **color** props. + + + +#### Allowed dates + +Specify allowed dates using objects or functions. When using objects, accepts a date string in the format of YYYY-MM-DD. When using functions, accepts a date object as a parameter and should return a boolean. + + + +### Internationalization + +Vuetify components can localize date formats by utilizing the [i18n](/features/internationalization) feature. This determines the appropriate locale for date display. When the default date adapter is in use, localization is managed automatically. + +For those not using the default date adapter, you need to create a mapping between the i18n locale string and your chosen date library's locale. This can be done in the Vuetify options as shown below: + +```js +import DateFnsAdapter from '@date-io/date-fns' +import enUS from 'date-fns/locale/en-US' +import svSE from 'date-fns/locale/sv' + +createVuetify({ + date: { + adapter: DateFnsAdapter, + locale: { + en: enUS, + sv: svSE, + }, + }, +}) +``` + +### Parsing dates + +It's recommended that you use the [Date composable](/features/dates/) for parsing and formatting when working with string dates. The following example uses the parseISO function to convert a string date to a Date object. + +```js +import { useDate } from 'vuetify' + +const adapter = useDate() +const date = '2023-11-30' + +console.log(new Date(date)) // Wed Nov 29 2023 18:00:00 GMT-0600 +console.log(adapter.parseISO(date)) // Thu Nov 30 2023 00:00:00 GMT-0600 +``` + +Using this function ensures that the date is parsed correctly regardless of the user's timezone. diff --git a/packages/docs/src/pages/en/components/defaults-providers.md b/packages/docs/src/pages/en/components/defaults-providers.md new file mode 100644 index 0000000..7047361 --- /dev/null +++ b/packages/docs/src/pages/en/components/defaults-providers.md @@ -0,0 +1,45 @@ +--- +meta: + nav: Defaults providers + title: Defaults provider component + description: The defaults provider allows you to provide specific default prop values to components in a section of your application + keywords: defaults provider, vuetify defaults provider component, vue defaults provider component +related: + - /features/aliasing/ + - /features/blueprints/ + - /features/global-configuration/ +features: + github: /components/VDefaultsProvider/ + label: 'C: VDefaultsProvider' + report: true +--- + +# Defaults providers + +The defaults provider allows you to provide specific default prop values to components in a section of your application + + + +## Usage + +The `v-defaults-provider` component is used to provide default props to components within its scope. It hooks into the [Global configuration](/features/global-configuration/) feature and makes it easy to assign multiple properties at once or scope out all incoming changes to any children. + + + + + +## API + +| Component | Description | +| - | - | +| [v-defaults-provider](/api/v-defaults-provider/) | Primary Component | + + + +## Examples + +### Defaults + +The `v-defaults-provider` expects a prop **defaults** which looks the same as the **defaults** object that you can pass to `createVuetify` when creating your application. + + diff --git a/packages/docs/src/pages/en/components/dialogs.md b/packages/docs/src/pages/en/components/dialogs.md new file mode 100644 index 0000000..2ef512c --- /dev/null +++ b/packages/docs/src/pages/en/components/dialogs.md @@ -0,0 +1,142 @@ +--- +meta: + nav: Dialogs + title: Dialog component + description: The dialog component informs a user about a specific task and may contain critical information or require the user to take a specific action. + keywords: dialogs, vuetify dialog component, vue dialog component +related: + - /components/buttons + - /components/cards + - /components/menus +features: + github: /components/VDialog/ + label: 'C: VDialog' + report: true + spec: https://m2.material.io/components/dialogs +--- + +# Dialogs + +The `v-dialog` component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive. + +![Dialog Entry](https://cdn.vuetifyjs.com/docs/images/components/v-dialog/v-dialog-entry.png) + + + +## Usage + +In this basic example we use the **activator** slot to render a button that is used to open the dialog. When using the **activator** slot it is important that you bind the **props** object from the slot (using `v-bind`) to the element that will activate the dialog. See the examples below for more ways of activating a dialog. + + + + + +## API + +| Component | Description | +| - | - | +| [v-dialog](/api/v-dialog/) | Primary component | +| [v-overlay](/api/v-overlay/) | Extended component | + + + +## Anatomy + +The recommended components to use inside of a `v-dialog` are: + +* [v-card](/components/cards/) +* [v-list](/components/lists/) +* [v-sheet](/components/sheets/) + +![Dialog Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-dialog/v-dialog-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The dialog's content that animates from the activator | +| 2. Activator | The element that activates the dialog | + +## Guide + +The `v-dialog` component is used to inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. They are controlled by a **v-model** and/or an activator. + +### Props + +The `v-dialog` component extends [v-overlay](/components/overlays/) and has access to all of its props. + +#### v-model + +You can also trigger a dialog by simply updating the v-model, without using either **activator** slot or prop. In this case, the dialog will not appear to be activated by any specific element, and will simply appear in the middle of the screen. + + + +#### Persistent + +Persistent dialogs are not dismissed when touching outside or pressing the **esc** key. + + + +#### Transitions + +You can make the dialog appear from the top or the bottom. + + + +#### Nesting + +Dialogs can be nested: you can open one dialog from another. + + + +#### Overflowed + +Modals that do not fit within the available window space will scroll the container. + + + +### Slots + +The `v-dialog` component has 2 slots, **activator** and **default**. The **activator** slot is used to designate an element that will activate the dialog. The **default** slot provides an **isActive** ref which is tied to the current state of the dialog. + +#### Activator + +In addition using the **activator** slot, we can instead use the **activator** prop to activate a dialog. By placing the dialog component inside the button, and setting the **activator** prop value to **"parent"** we can designate the parent (button) as the activator. + + + +#### Default + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-dialog` component. + +### Scrollable + +Example of a dialog with scrollable content. + + + +### Form + +A simple example of a form in a dialog. + + + +### Loader + +The `v-dialog` component makes it easy to create a customized loading experience for your application. + + + +### Fullscreen + +Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens. + + + +### Invite dialog + +This example demonstrates a dialog that is used to invite users to a group. + + diff --git a/packages/docs/src/pages/en/components/dividers.md b/packages/docs/src/pages/en/components/dividers.md new file mode 100644 index 0000000..3412450 --- /dev/null +++ b/packages/docs/src/pages/en/components/dividers.md @@ -0,0 +1,84 @@ +--- +meta: + nav: Dividers + title: Divider component + description: The divider component is a thin line commonly used to separate groups of content in lists or layouts. + keywords: dividers, vuetify divider component, vue divider component +related: + - /components/lists + - /components/navigation-drawers + - /components/toolbars +features: + github: /components/VDivider/ + label: 'C: VDivider' + report: true + spec: https://m2.material.io/components/dividers +--- + +# Dividers + +The `v-divider` component is used to separate sections of lists or layouts. + + + + + +## Usage + +Dividers in their simplest form display a horizontal line. + + + +::: info + +This example uses the **border-opacity** utility class and is not available when **$utilities** is set to **false**. More information regarding utility classes is located on the [SASS variables page](features/sass-variables/#basic-usage). + +::: + + + +## API + +| Component | Description | +| - | - | +| [v-divider](/api/v-divider/) | The divider component. | + + + +## Examples + +### Props + +#### Inset + +Inset dividers are moved 72px to the right. This will cause them to line up with list items. + + + +#### Vertical + +Vertical dividers give you more tools for unique layouts. + + + +#### Thickness + +By using the **thickness** prop, the thickness of the divider can be adjusted to the desired value. + +### Misc + +#### Portrait View + +Create custom cards to fit any use-case. + + + +#### Subheaders + +Dividers and subheaders can help break up content and can optionally line up with one another by using the same `inset` prop. + + + +## Accessibility + +By default, `v-divider` components are assigned the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) role of [**separator**](https://www.w3.org/TR/wai-aria/#separator) which denotes that the divider "separates and distinguishes sections of content or groups of menu items." However, sometimes a divider is just a way to make an interface look nice. In those cases, the role of [**presentation**](https://www.w3.org/TR/wai-aria/#presentation) should be used which denotes "an element whose implicit native role semantics will not be mapped to the accessibility API." To override the default **separator** role in a `v-divider`, simply add a `role="presentation"` prop to your component. In addition, `v-divider` components have an `aria-orientation="horizontal"`. If `vertical="true"`, then `aria-orientation="vertical"` will be set automatically as well. If `role="presentation"`, `aria-orientation="undefined"`, its default value. diff --git a/packages/docs/src/pages/en/components/empty-states.md b/packages/docs/src/pages/en/components/empty-states.md new file mode 100644 index 0000000..ed47f90 --- /dev/null +++ b/packages/docs/src/pages/en/components/empty-states.md @@ -0,0 +1,117 @@ +--- +emphasized: true +meta: + title: Empty states + description: The empty state component is used to indicate that a list is empty or that no search results were found. + keywords: empty state, no results, no data, no items, no content, no records, no information, no search results +related: + - /components/buttons/ + - /components/icons/ + - /components/avatars/ +features: + report: true + spec: https://m2.material.io/design/communication/empty-states.html + label: 'C: VEmptyState' + github: '/components/VEmptyState/' +--- + +# Empty states + +The `v-empty-state` component is used to indicate that a list is empty or that no search results were found. + + + +::: success + +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) + +::: + +## Usage + +A basic empty state is composed of a title and a description. It can also include an icon and a button. + + + + + +## API + +| Component | Description | +| - | - | +| [v-empty-state](/api/v-empty-state/) | Primary Component | + + + +## Guide + +The `v-empty-state` component is used to indicate that a page or list is empty or that no search results were found. It can be used in a variety of contexts, such as a list of items, a search results page, or a page with no content. + +### Props + +The `v-empty-state` component has a multitude of props that allow you to customize its appearance and behavior. + +#### Content + +There are three main properties for configuring text content, **title**, **subtitle**, and **text**. + + + +#### Media + +Add an icon or image to the empty state to help convey its purpose. + + + +#### Actions + +Add a button to the empty state to help users take action. + + + +### Slots + +The `v-empty-state` component has numerous slots that make it easy to customize the default behavior. + +| Slot | Description | +| - | - | +| 1. Default | The default slot | +| 2. Media | The media slot is for images or icons | +| 3. Title | The main title slot | +| 4. Subtitle | The subtitle slot | +| 5. Text | The text slot | +| 6. Actions | The actions slot | + +#### Default + +The default slot is positioned between **text** and **actions**. + + + +#### Title + +It's simple to customize the font-sizing of the title using utility classes. + + + +#### Custom Actions + +By default, only 1 action is displayed through configuration. To add more options, utilize the **actions** slot. + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-empty-state` component. + +### Astro dog + +This example demonstrates how to use the `v-empty-state` component to create a fun and engaging empty state. + + + +### Astro cat + +This example utilizes components such as [v-tabs](/components/tabs/) and [v-window](/components/windows/) to create a more complex empty state. + + diff --git a/packages/docs/src/pages/en/components/expansion-panels.md b/packages/docs/src/pages/en/components/expansion-panels.md new file mode 100644 index 0000000..11a581c --- /dev/null +++ b/packages/docs/src/pages/en/components/expansion-panels.md @@ -0,0 +1,91 @@ +--- +meta: + nav: Expansion panels + title: Expansion panel component + description: The expansion panel component is a lightweight container that hides information behind expandable and contractable containers. + keywords: expansion panels, vuetify expansion panel component, vue expansion panel component +related: + - /components/cards/ + - /components/data-tables/basics/ + - /components/lists/ +features: + github: /components/VExpansionPanel/ + label: 'C: VExpansionPanels' + report: true + spec: https://m1.material.io/components/expansion-panels.html +--- + +# Expansion panels + +The `v-expansion-panel` component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the `multiple` property, the expansion-panel can remain open until explicitly closed. + + + + + +## Usage + +Expansion panels in their simplest form display a list of expandable items. You can either declare the markup explicitly, or use the **title** and **text** props. + + + + + +## API + +| Component | Description | +| - | - | +| [v-expansion-panels](/api/v-expansion-panels/) | Primary component | +| [v-expansion-panel](/api/v-expansion-panel/) | Sub-component that wraps `v-expansion-panel-text` and `v-expansion-panel-title` | +| [v-expansion-panel-title](/api/v-expansion-panel-title/) | Sub-component used to display the Expansion Panel's title. Wraps the `#title` slot | +| [v-expansion-panel-text](/api/v-expansion-panel-text/) | Sub-component used to display the Expanion Panel's text. Wraps the `#text` slot | + + + +## Examples + +### Props + +#### Variant + +There are four different variants of the expansion-panel. Accordion expansion-panels have no margins around the currently active panel. Inset expansion-panels become smaller when activated, while poput expansion-panels become larger. + + + +#### Disabled + +Both the expansion-panel and its content can be disabled using the **disabled** prop. + + + + + +#### Model + +Expansion panels can be controlled externally by using the **v-model**. You will need to set a **value** on each panel, so that you can refer to them outside the component. If the **multiple** prop is set, then the **v-model** value will be an array. + + + +#### Readonly + +**readonly** prop does the same thing as **disabled**, but it doesn't touch styles. + + + +### Misc + +#### Advanced + +The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the `v-expansion-panel-header` component to react to the state of being open or closed by fading content in and out. + + + +#### Custom icon + +Expand action icon can be customized with **expand-icon** prop or the `actions` slot. + + diff --git a/packages/docs/src/pages/en/components/explorer/[...name].md b/packages/docs/src/pages/en/components/explorer/[...name].md new file mode 100644 index 0000000..a3c938f --- /dev/null +++ b/packages/docs/src/pages/en/components/explorer/[...name].md @@ -0,0 +1,19 @@ +--- +backmatter: false +fluid: true +meta: + nav: API Explorer + title: API Explorer + description: Explore the Vuetify API + keywords: vuetify api explorer +--- + +# API Explorer + +Quickly search the Vuetify API for components, directives, and composables + +---- + + + + diff --git a/packages/docs/src/pages/en/components/file-inputs.md b/packages/docs/src/pages/en/components/file-inputs.md new file mode 100644 index 0000000..8fdab68 --- /dev/null +++ b/packages/docs/src/pages/en/components/file-inputs.md @@ -0,0 +1,105 @@ +--- +meta: + nav: File inputs + title: File input component + description: The file input component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress. + keywords: file input, file upload, file field +related: + - /components/text-fields/ + - /components/forms/ + - /components/icons/ +features: + label: 'C: VFileInput' + report: true + github: /components/VFileInput/ +--- + +# File inputs + +The `v-file-input` component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress. It is meant to be a direct replacement for a standard file input. + + + +## Usage + +At its core, the `v-file-input` component is a basic container that extends [v-text-field](/components/text-fields). + + + + + +## API + +| Component | Description | +| - | - | +| [v-file-input](/api/v-file-input/) | Primary component | + + + +## Examples + +### Props + +#### Accept + +`v-file-input` component can accept only specific media formats/file types if you want. For more information, checkout the documentation on the [accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). + + + +#### Chips + +A selected file can be displayed as a [chip](/components/chips). When using the **chips** and **multiple** props, each chip will be displayed (as opposed to the file count). + + + +#### Counter + +When using the **show-size** property along with **counter**, the total number of files and size will be displayed under the input. + + + +#### Density + +You can reduces the file input height with the **density** prop. + + + +#### Multiple + +The `v-file-input` can contain multiple files at the same time when using the **multiple** prop. + + + +#### Prepend icon + +The `v-file-input` has a default **prepend-icon** that can be set on the component or adjusted globally. More information on changing global components can be found on the [customizing icons page](/features/icon-fonts). + + + +#### Show size + +The displayed size of the selected file(s) can be configured with the **show-size** property. Display sizes can be either _1024_ (the default used when providing **true**) or _1000_. + + + +#### Validation + +Similar to other inputs, you can use the **rules** prop to create your own custom validation parameters. + + + +### Slots + +#### Selection + +Using the `selection` slot, you can customize the appearance of your input selections. This is typically done with [chips](/components/chips), however any component or markup can be used. + + + +### Misc + +#### Complex selection slot + +The flexibility of the selection slot allows you accommodate complex use-cases. In this example we show the first 2 selections as chips while adding a number indicator for the remaining amount. + + diff --git a/packages/docs/src/pages/en/components/floating-action-buttons.md b/packages/docs/src/pages/en/components/floating-action-buttons.md new file mode 100644 index 0000000..5cc714b --- /dev/null +++ b/packages/docs/src/pages/en/components/floating-action-buttons.md @@ -0,0 +1,75 @@ +--- +emphasized: true +meta: + nav: Floating Action Buttons + title: FAB component + description: The floating action button (or FAB) component is a promoted action that is elevated above the UI or attached to an element such as a card. + keywords: floating action button, fab, vuetify fab component, vue fab component +related: + - /components/buttons/ + - /components/icons/ + - /styles/transitions/ +features: + report: true + label: 'C: VFab' + github: /components/VFab/ + spec: https://m2.material.io/components/buttons-floating-action-button +--- + +# Floating Action Buttons + +The `v-fab` component can be used as a floating action button. This provides an application with a main point of action. + + + +::: success + +This feature was introduced in [v3.6.0](/getting-started/release-notes/?version=v3.6.0) + +::: + +## Usage + +Floating action buttons can be attached to material to signify a promoted action in your application. The default size will be used in most cases, whereas the `small` variant can be used to maintain continuity with similar sized elements. + + + + + +## API + +| Component | Description | +| - | - | +| [v-fab](/api/v-fab/) | Primary Component | + + + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-fab` component. + +### Display animation + +When displaying for the first time, a floating action button should animate onto the screen. Here we use the `v-fab-transition` with v-show. You can also use any custom transition provided by Vuetify or your own. + + + +### Lateral screens + +When changing the default action of your button, it is recommended that you display a transition to signify a change. We do this by binding the `key` prop to a piece of data that can properly signal a change in action to the Vue transition system. + + + +### Small variant + +For better visual appeal, we use a small button to match our list avatars. + + diff --git a/packages/docs/src/pages/en/components/footers.md b/packages/docs/src/pages/en/components/footers.md new file mode 100644 index 0000000..cfd530d --- /dev/null +++ b/packages/docs/src/pages/en/components/footers.md @@ -0,0 +1,60 @@ +--- +meta: + nav: Footers + title: Footer component + description: The footer component provides a container for displaying additional navigation information about a site. + keywords: footers, vuetify footer component, vue footer component +related: + - /components/grids + - /components/buttons + - /components/toolbars +features: + figma: true + label: 'C: VFooter' + report: true + github: /components/VFooter/ +--- + +# Footers + +The `v-footer` component is used for displaying general information that a user might want to access from any page within your site. + + + +## Usage + +The `v-footer` component in its simplest form is a container. + + + + + +## API + +| Component | Description | +| - | - | +| [v-footer](/api/v-footer/) | The footer component. | + + + +## Examples + +### Misc + +#### Company Footer + +The footer component as a basic company footer with links. + + + +#### Indigo Footer + +The footer component with Indigo background color and social media icons and button. + + + +#### Teal Footer + +The footer component with a Teal color header and columns and rows of links. + + diff --git a/packages/docs/src/pages/en/components/forms.md b/packages/docs/src/pages/en/components/forms.md new file mode 100644 index 0000000..01861e0 --- /dev/null +++ b/packages/docs/src/pages/en/components/forms.md @@ -0,0 +1,125 @@ +--- +meta: + nav: Forms + title: Form component + description: The form component provides a wrapper that makes it easy to process and control validation states of input components. + keywords: forms, vuetify form component, vue form component, form validation +related: + - /components/selects/ + - /components/switches/ + - /components/text-fields/ +features: + label: 'C: VForm' + report: true + github: /components/VForm/ +--- + +# Forms + +Vuetify offers a simple built-in form validation system based on functions as rules, making it easy for developers to get set up quickly. + + + +## Usage + +The `v-form` component makes it easy to add validation to form inputs. All input components have a **rules** prop that can be used to specify conditions in which the input is either *valid* or *invalid*. + +::: tip + +If you prefer using a 3rd party validation plugin, we provide [examples](#vee-validate) further down the page for integrating both [Vee-validate](https://github.com/baianat/Vee-validate) and [vuelidate](https://github.com/vuelidate/vuelidate) validation libraries. + +::: + +Whenever the value of an input is changed, each rule receives a new value and is re-evaluated. If a rule returns `false` or a `string`, validation has failed and the `string` value is presented as an error message. + + + + + +## API + +| Component | Description | +| - | - | +| [v-form](/api/v-form/) | Primary Component | + + + +## Rules + +Rules allow you to apply custom validation on all form components. These are validated sequentially, and components display a *maximum* of 1 error at a time; so make sure you order your rules accordingly. + +The most basic of rules is a simple function that checks if an input has a value or not; i.e. it makes it a required input. + + + +However, you can make rules as complicated as needed, even allowing for asynchronous input validation. In the example below, the input is checked against a fake API service that takes some time to respond. Wait for the `submit` event promise to resolve and see the validation in action. + + + +The submit event is a combination of a native `SubmitEvent` with a promise, so it can be `await`ed or used with `.then()` to get the result of the validation. +
+This also demonstrates the **validate-on** prop, which tells the `v-form` component when validation should happen. Here we set it to `'submit lazy'` so that we only call the API service when the button is clicked. + +## Validation state + +By default, all inputs run their validation rules when mounted but do not display errors to the user. +
+When rules run is controlled with the **validate-on** prop which accepts a string containing `input`, `blur`, `submit`, or `lazy`. +
+`input`, `blur`, and `submit` set when a validation error can first be displayed to the user, while `lazy` disables validation on mount (useful for async rules). +
+`lazy` can be combined with other options, and implies `input` on its own. + +| `validate-on=` | `"input"` | `"blur"` | `"submit"` | `"lazy"` | +|----------------|:---------:|:--------:|:----------:|:--------:| +| On mount | ✅ | ✅ | ✅ | ❌ | +| On input | ✅ | ❌ | ❌ | * | +| On blur | ✅ | ✅ | ❌ | * | +| On submit | ✅ | ✅ | ✅ | * | +

* Uses the behavior of whatever it's combined with.

+ +The form's current validation status is accessed using `v-model` or the submit event. It can be in one of three states: + +- `true`: All inputs with validation rules have been successfully validated. +- `false`: At least one input has failed validation either by interaction or manual validation. +- `null`: At least one input has failed validation without interaction or has not been validated yet due to `lazy` validation. + +This allows you to either check for any validation failure with `!valid`, or only errors that are displayed to the user with `valid === false`{.text-no-wrap}. + +## Examples + +### Props + +#### Disabled + +You can easily disable all input components in a `v-form` by setting the **disabled** prop. + + + +#### Fast fail + +When the **fast-fail** prop is set, validation will short-circuit after the first invalid input is found. This can be useful if some of your rules are computationally heavy and can take a long time. In this example, notice how when the submit button is clicked, the second input does not show validation errors even though it does not satisfy the rules. + + + +### Misc + +#### Exposed properties + +The `v-form` component has a number of exposed properties that can be accessed by setting a **ref** on the component. A ref allows us to access internal methods on a component. You can find all of them on the API page, but some of the more commonly used ones are `validate()`, `reset()`, and `resetValidation()`. + +The difference between `reset()` and `resetValidation()` is that the former resets both input values and validation state, while the latter only resets validation state. + + + +#### Vee-validate + +**vee-validate** documentation can be found [here](https://vee-validate.logaretm.com/v4/). + + + +#### Vuelidate + +**vuelidate** documentation can be found [here](https://vuelidate-next.netlify.app/). + + diff --git a/packages/docs/src/pages/en/components/grids.md b/packages/docs/src/pages/en/components/grids.md new file mode 100644 index 0000000..14e3e27 --- /dev/null +++ b/packages/docs/src/pages/en/components/grids.md @@ -0,0 +1,192 @@ +--- +meta: + nav: Grids + title: Grid system + description: Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application. + keywords: grids, vuetify grid component, layout component, flex component +related: + - /styles/flex + - /features/display-and-platform/ + - /styles/display +features: + github: /components/VGrid/ + label: 'C: VGrid' + report: true + spec: https://m2.material.io/design/layout/responsive-layout-grid +--- + +# Grid system + +Vuetify comes with a 12 point grid system built using flexbox. + +The grid is used to create specific layouts within an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations: **xs**, **sm**, **md**, **lg** and **xl**. These breakpoints are defined below in the Viewport Breakpoints table and can be modified by customizing the [Breakpoint service](/features/display-and-platform). + + + +## Usage + +The Vuetify grid is heavily inspired by the [Bootstrap grid](https://getbootstrap.com/docs/4.0/layout/grid/). It is implemented by using a series of containers, rows, and columns to layout and align content. If you are new to flexbox, read the [CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets. + + + + + + + +## API + +| Component | Description | +| - | - | +| [v-container](/api/v-container/) | The container component. | +| [v-row](/api/v-row/) | Sub-component used to create rows. | +| [v-col](/api/v-col/) | Sub-component used to create columns. | +| [v-spacer](/api/v-spacer/) | A component often used in grid scenarios. | + + + +## Sub-components + +### v-container + +`v-container` provides the ability to center and horizontally pad your site's contents. You can also use the **fluid** prop to fully extend the container across all viewport and device sizes. Maintains previous 1.x functionality in which props are passed through as classes on `v-container` allowing for the application of helper classes (such as `ma-#`/`pa-#`/`fill-height`) to easily be applied. + +### v-col + +`v-col` is a content holder that must be a direct child of `v-row`. This is the 2.x replacement for `v-flex` in 1.x. + +### v-row + +`v-row` is a wrapper component for `v-col`. It utilizes flex properties to control the layout and flow of its inner columns. It uses a standard gutter of **24px**. This can be reduced with the **dense** prop or removed completely with **no-gutters**. This is the 2.x replacement for `v-layout` in 1.x. + +### v-spacer + +`v-spacer` is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components. When placing a single `v-spacer` before or after the child components, the components will push to the right and left of its container. When more than one `v-spacer`'s are used between multiple components, the remaining width is evenly distributed between each spacer. + +## Helper Classes + +The class `fill-height` applies `height: 100%` to an element. When applied to `v-container` it will also set `align-items: center`. + +## Caveats + +::: info + Breakpoints based props on grid components work in an `andUp` fashion. With this in mind the **xs** breakpoint is assumed and has been removed from the props context. This applies to **offset**, **justify**, **align**, and single breakpoint props on `v-col` + +- Props like **justify-sm** and **justify-md** exist, but **justify-xs** does not, it is simply **justify** +- The **xs** prop does not exist on `v-col`. The equivalent to this is the **cols** prop +::: + +## Examples + +### Props + +#### Align + +Change the vertical alignment of flex items and their parents using the **align** and **align-self** properties. + + + +#### Breakpoint sizing + +Columns will automatically take up an equal amount of space within their parent container. This can be modified using the **cols** prop. You can also utilize the **sm**, **md**, **lg**, and **xl** props to further define how the column will be sized in different viewport sizes. + + + +#### Justify + +Change the horizontal alignment of flex items using the **justify** property. + + + +#### No gutters + +You can remove the negative margins from `v-row` and the padding from its direct `v-col` children using the **no-gutters** property. + + + +#### Offset + +Offsets are useful for compensating for elements that may not be visible yet, or to control the position of content. Just as with breakpoints, you can set an offset for any available sizes. This allows you to fine tune your application layout precisely to your needs. + + + +#### Offset breakpoint + +Offset can also be applied on a per breakpoint basis. + + + +#### Order + +You can control the ordering of grid items. As with offsets, you can set different orders for different sizes. Design specialized screen layouts that accommodate to any application. + + + +#### Order first and last + +You can also designate explicitly **first** or **last** which will assign **-1** or **13** values respectively to the `order` CSS property. + + + +### Misc + +#### Column wrapping + +When more than 12 columns are placed within a given row (that is not using the `.flex-nowrap` utility class), each group of extra columns will wrap onto a new line. + +In the example below, the first and second **v-col** components are a total of 13 columns wide, which means the second **v-col** gets wrapped to a new line. + + + +#### Equal width columns + +You can break equal width columns into multiple lines using **v-responsive**. + + + +#### Grow and Shrink + +By default, flex components will automatically fill the available space in a row or column. They will also shrink relative to the rest of the flex items in the flex container when a specific size is not designated. You can define the column width of the `v-col` by using the **cols** prop and providing a value from **1 to 12**. + + + +#### Margin helpers + +Using the [auto margin helper utilities](/styles/flex#auto-margins) you can force sibling columns away from each other. + + + +#### Nested grid + +Grids can be nested, similar to other frameworks, in order to achieve very custom layouts. + + + +#### One column width + +When using the auto-layout, you can define the width of only one column and still have its siblings to automatically resize around it. + + + +#### Row and column breakpoints + +Dynamically change your layout based upon resolution. Resize your screen and watch the row layout change on sm, md, and lg breakpoints. + + + +#### Spacers + +The `v-spacer` component is useful when you want to fill available space or make space between two components. + + + + + + diff --git a/packages/docs/src/pages/en/components/hover.md b/packages/docs/src/pages/en/components/hover.md new file mode 100644 index 0000000..89172d9 --- /dev/null +++ b/packages/docs/src/pages/en/components/hover.md @@ -0,0 +1,67 @@ +--- +meta: + nav: Hover + title: Hover component + description: The hover component makes it easy respond when the user hover events by wrapping selectable content. + keywords: hover, vuetify hover component, vue hover component +related: + - /components/cards/ + - /components/images/ + - /components/tooltips/ +features: + github: /components/VHover/ + label: 'C: VHover' + report: true +--- + +# Hover + +The `v-hover` component provides a simple interface for handling hover states for any component. + + + +## Usage + + `v-hover` is a renderless component that uses the default slot to provide scoped access to its internal model; as well as mouse event listeners to modify it. To explicitly control the internal state, use the **model-value** property. + + + + + +## API + +| Component | Description | +| - | - | +| [v-hover](/api/v-hover/) | Primary Component | + + + +## Examples + +### Props + +#### Disabled + +The **disabled** prop disables the hover functionality. + + + +#### Open and close delay + +Delay `v-hover` events by using **open-delay** and **close-delay** props in combination or separately. + + + +### Misc + +#### Hover list + +`v-hover` can be used in combination with `v-for` to make a single item stand out when the user interacts with the list. + + + +#### Transition + +Create highly customized components that respond to user interaction. + + diff --git a/packages/docs/src/pages/en/components/icons.md b/packages/docs/src/pages/en/components/icons.md new file mode 100644 index 0000000..9373a57 --- /dev/null +++ b/packages/docs/src/pages/en/components/icons.md @@ -0,0 +1,148 @@ +--- +meta: + nav: Icons + title: Icon component + description: The icon component is compatible with multiple common icon fonts such as Material Design Icons, Font Awesome and more. + keywords: icons, vuetify icon component, vue icon component +related: + - /features/icon-fonts/ + - /components/buttons/ + - /components/cards/ +assets: + - https://use.fontawesome.com/releases/v5.0.13/css/all.css + - https://fonts.googleapis.com/icon?family=Material+Icons +features: + figma: true + github: /components/VIcon/ + label: 'C: VIcon' + report: true + spec: https://m2.material.io/design/iconography/system-icons.html +--- + +# Icons + +The `v-icon` component provides a large set of glyphs to provide context to various aspects of your application. For a list of all available icons, visit the official [Material Design Icons](https://materialdesignicons.com/) page. To use any of these icons simply use the `mdi-` prefix followed by the icon name. + + + +## Usage + +Icons come in two themes (light and dark), and five different sizes (x-small, small, medium (default), large, and x-large). + + + + + +## API + +| Component | Description | +| - | - | +| [v-icon](/api/v-icon/) | Primary Component | + + + +## Examples + +### Props + +#### Color + +Using color helpers you can change the color of an icon from the standard dark and light themes. + + + + + +### Misc + +#### Buttons + +Icons can be used inside of buttons to add emphasis to the action. + + + +#### Font Awesome + +[Font Awesome](https://fontawesome.com/icons/) is also supported. Simply use the `fa-` prefixed icon name. Please note that you still need to include the Font Awesome icons in your project. For more information on how to install it, please navigate to the [installation page](/features/icon-fonts#install-font-awesome-5-icons) + +::: info + Note that this example is using an icon set prefix, because the default icon set in the documentation is `mdi`. You can read more about using multiple icon sets [here](/features/icon-fonts/#multiple-icon-sets) +::: + + + +#### Material Design + +[Material Design](https://fonts.google.com/icons) is also supported. For more information on how to install it please [navigate here](/features/icon-fonts#install-material-icons) + +::: info + Note that this example is using an icon set prefix, because the default icon set in the documentation is `mdi`. You can read more about using multiple icon sets [here](/features/icon-fonts/#multiple-icon-sets) +::: + + + +#### MDI SVG + +You can manually import only the icons you use when using the [@mdi/js](https://www.npmjs.com/package/@mdi/js) package. Read more about using them [here](/features/icon-fonts#material-design-icons-js-svg). + +::: info + Note that this example is using an icon set prefix, because the default icon set in the documentation is `mdi`. You can read more about using multiple icon sets [here](/features/icon-fonts/#multiple-icon-sets) +::: + + + +## Accessibility + +Icons can convey all sorts of meaningful information, so it’s important that they reach the largest amount of people possible. There are two use cases you’ll want to consider: + +- **Decorative Icons** are only being used for visual or branding reinforcement. If they were removed from the page, users would still understand and be able to use your page. + +- **Semantic Icons** are ones that you’re using to convey meaning, rather than just pure decoration. This includes icons without text next to them used as interactive controls — buttons, form elements, toggles, etc. + +::: error + WAI-ARIA Authoring Practices 1.1 notes that `aria-hidden="false"` currently [behaves inconsistently across browsers](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden). +::: + +::: info + WIP: Our team will change to the component to not render `aria-hidden="false"` when you pass a label prop. +::: + +### Decorative Font Icons + +If your icons are purely decorative, you’ll need to manually add an attribute to each of your icons so they’re accessible.`aria-hidden`(automatically by vuetify) + +### Semantic Font Icons + +If your icons have semantic meaning, you need to provide a text alternative inside a (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. + +```html + + mdi-account + +``` + +### Decorative SVG Icons + +If your icons are purely decorative, you’ll need to manually add an attribute to each of your icons so they’re accessible.`aria-hidden`(automatically by vuetify) + +### Semantic SVG Icons + +Apply accessibility attributes to the [v-icon](/components/icons/) component, such as `role="img"`, to give it a semantic meaning. + +```html { resource="Component.vue" } + + mdiAccount + + + +``` diff --git a/packages/docs/src/pages/en/components/images.md b/packages/docs/src/pages/en/components/images.md new file mode 100644 index 0000000..5f7c695 --- /dev/null +++ b/packages/docs/src/pages/en/components/images.md @@ -0,0 +1,117 @@ +--- +meta: + nav: Images + title: Image component + description: The image component provides a flexible interface for displaying different types of images. + keywords: images, vuetify image component, vue image component +related: + - /components/grids + - /components/aspect-ratios + - /components/parallax +features: + github: /components/VImg/ + label: 'C: VImg' + report: true +--- + +# Images + +The `v-img` component is packed with features to support rich media. Combined with the [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader), you can add dynamic progressive images to provide a better user experience. + + + +## Usage + +`v-img` component is used to display a responsive image with lazy-load and placeholder. + + + + + +## API + +| Component | Description | +| - | - | +| [v-img](/api/v-img/) | Primary Component | + + + +## Caveats + +::: warning + The **lazy-src** property has no effect unless either **height** or **aspect-ratio** are provided. This is because + the image container needs a non-zero height in order for the temporary image to be shown. +::: + +## Examples + +### Props + +#### Cover + +If the provided aspect ratio doesn't match that of the actual image, the default behavior is to fill as much space as possible without cropping. To fill the entire available space use the `cover` prop. + + + +#### Height + +`v-img` will automatically grow to the size of its `src`, preserving the correct aspect ratio. You can limit this with the `height` and `max-height` props. + + + +#### Gradient + +The `gradient` prop can be used to apply a simple gradient overlay to the image. More complex gradients should be written as a class on the content slot instead. + + + +### Slots + +#### Placeholder + +`v-img` has a special `placeholder` slot for placeholder to display while image's loading. Note: the example below has bad src which won't load for you to see placeholder. + + + +#### Error + +`v-img` has an `error` slot that can be used to display alternative content if an error occurs while loading your source image. A common use for this slot is to load a fallback image if your original image is not available. + + + +### Misc + +#### Future image formats + +By default `v-img` will render a basic `` element. If you want to use `.webp` images with a fallback for older browsers, you can pass a list of `` elements to the `sources` slot: + +```html + + + +``` + +This will behave similarly to: + +```html + + + + +``` + +`srcset` and `media` attributes can also be used for art direction or alternate sizes, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) for more. + +#### Grid + +You can use `v-img` to make, for example, a picture gallery. + + + +#### Complex Grid Layout + +Build a more complex picture gallery layout using `flex-box` classes. + + diff --git a/packages/docs/src/pages/en/components/infinite-scroller.md b/packages/docs/src/pages/en/components/infinite-scroller.md new file mode 100644 index 0000000..42ce7cd --- /dev/null +++ b/packages/docs/src/pages/en/components/infinite-scroller.md @@ -0,0 +1,152 @@ +--- +meta: + nav: Infinite scrollers + title: Infinite scroller component + description: The Infinite scroll component is a container that loads more items when scrolling. It is useful when you need to display an unknown but large number of items. + keywords: infinite scroll, vuetify infinite scroll component, vue infinite scroll component, v-infinite-scroll component +related: + - /components/lists/ + - /components/data-tables/basics/ + - /components/data-iterators/ +features: + github: /components/VInfiniteScroll/ + label: 'C: VInfiniteScroll' + report: true +--- + +# Infinite scrollers + +The `v-infinite-scroll` component displays a potentially infinite list, by loading more items of the list when scrolling. It supports either vertical or horizontal scrolling. + +![Infinite scroll Entry](https://cdn.vuetifyjs.com/docs/images/components/v-infinite-scroll/v-infinite-scroll-entry.png) + + + +::: success +This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0) +::: + +## Usage + +When scrolling towards the bottom, new items will be rendered either automatically, or manually with the click of a button. + + + +A **load** event will be emitted when the component needs to load more content. The argument passed is an object with two properties. + +- `side` tells you on which side new content should be added, either at the `'start'` or `'end'`. The return value of the function is a string that describes if the new content was loaded successfully or not. +- `done` is a callback function that should be called when the loading of new content is done. It takes a single parameter `status` that describes if the load was successful or not. See the table below for the possible values. + +|Status|Description| +|------|-----------| +|`'ok'`|Content was added succesfully| +|`'error'`|Something went wrong when adding content. This will display the `error` slot| +|`'empty'`|There is no more content to fetch. This will display the `empty` slot| +|`'loading'`|Content is currently loading. This will display a message that the content is loading. This status is only set internally by the component and should not be used with the **done** function| + + + +## API + +| Component | Description | +| - | - | +| [v-infinite-scroll](/api/v-infinite-scroll/) | Primary Component | + + + +## Anatomy + +The `v-infinite-scroll` works with any content in its default slot. + +![Infinite scroll Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-infinite-scroll/v-infinite-scroll-anatomy.png) + +| Element / Area | Description | +|----------------|-----------------------------------------| +| 1. Container | The infinite scroller content container | +| 2. Loader | The loader content area | + +## Guide + +The `v-infinite-scroll` component is a container that allows you to react to a user reaching the end of the content area. It is useful when you need to display an unknown but large number of items, and you don't want to load them all at once. + +### Props + +The `v-infinite-scroll` component has several props that can be used to customize its behavior. + +#### Mode + +The default behavior of the component is to try to load more content automatically when the scrollbar gets close to the end. However, a manual mode is also supported, where the user needs to do some interaction to load the content. By default this is a button, but it can be customized with a [slot](#load-more) + + + +#### Direction + +The `v-infinite-scroll` component can be used with either vertical or horizontal scrolling. + + + +#### Side + +By default, the `v-infinite-scroll` component assumes that new content will appear at the end of existing content. But it also supports content being added to the start and appearing both at the beginning and the end. + +When using the **start** side for content, the scrollbar will start at the bottom of the content. + + + +When using **both** sides for content, the scrollbar will start in the middle of the content. + + + +#### Color + +The default load more button and loading spinner can be colored with the **color** prop. + + + +### Slots + +The `v-infinite-scroll` component exposes several slots that allow you to further customize its behaviour. + +![Infinite scroll Slots](https://cdn.vuetifyjs.com/docs/images/components/v-infinite-scroll/v-infinite-scroll-slots.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The default slot | +| 2. Load-more | The slot shown when the mode is set to `manual` and the status is not `loading` | +| 3. Loading | The slot is shown when the mode is set to `manual` and status is `loading` | +| 4. Empty | The slot shown when the status is `empty` | +| 5. Error | The slot is shown when the status is `error` | + +#### Loading + +You can customize the loading message with the **loading** slot. + + + +#### Load more + +When using **manual** mode you can customize the action required to load more content with the **load-more** slot. + + + +#### Empty + +You can customize the empty message with the **empty** slot. + + + +#### Error + +The **error** slot is shown if the status `'error'` is returned from the `done` callback. + + + +### Examples + +The following is a collection of examples that demonstrate more advanced and real-world use of the `v-infinite-scroll` component. + +#### Virtualized infinite scroller + +If the items in your infinite list are of a uniform size, you can quite easily virtualize the list to only render a small number of items regardless of how far you scroll in either direction. + + diff --git a/packages/docs/src/pages/en/components/inputs.md b/packages/docs/src/pages/en/components/inputs.md new file mode 100644 index 0000000..06e57aa --- /dev/null +++ b/packages/docs/src/pages/en/components/inputs.md @@ -0,0 +1,107 @@ +--- +meta: + nav: Custom inputs + title: Input component + description: The input component is the baseline functionality for all of Vuetify's form components and provides a baseline for custom implementations. + keywords: inputs, vuetify input component, vue input component +related: + - /components/forms/ + - /components/selects/ + - /components/text-fields/ +features: + label: 'C: VInput' + report: true + github: /components/VInput/ +--- + +# Inputs + +The `v-input` component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. + + + +## Usage + +`v-input` has 4 main areas. The prepended slot, the appended slot, the default slot, and messages. These make up the core logic shared between all form components. + + + + + +## API + +| Component | Description | +| - | - | +| [v-input](/api/v-input/) | Primary Component | + + + +## Caveats + +::: warning + +The `v-input` component is used as a wrapper for all of the Vuetify form controls. It does **NOT** inherit attributes as they are expected to be passed down to inner inputs. + +::: + +## Examples + +### Props + +#### Error + +As any validatable Vuetify component, `v-input` can be set to error state using **error** prop, messages can be added using **error-messages** prop. You can determine error messages count to show using **error-count** property. + +#### Error count + +You can add multiple errors to `v-input` using **error-count** property. + + + + + +#### Hide details + +When the **hide-details** prop is set to `auto` messages will be rendered only if there's a message (hint, error message etc) to display. + + + +#### Hint + +`v-input` can have **hint** which can tell user how to use the input. **persistent-hint** prop makes the hint visible always if no messages are displayed. + + + +#### Loading + +`v-input` has **loading** state which can be used, e.g. for data loading indication. Note: `v-text-field` is used just for example. + + + +#### Rules + +You can add custom validation rules to `v-input`, add them as functions returning `true`/error message. Note: `v-text-field` is used just for example. + + + +#### Success + +As any validatable Vuetify component, `v-input` can be set to success state using **success** prop, you can add message to it using **success-messages** prop. + + + +### Events + +#### Slot clicks + +`v-input` can have `click:append` and `click:prepend` events for its slots. Note: `v-text-field` is used just for example. + + + +### Slots + +#### Append and prepend + +`v-input` has `append` and `prepend` slots. You can place custom icons in them. + + diff --git a/packages/docs/src/pages/en/components/item-groups.md b/packages/docs/src/pages/en/components/item-groups.md new file mode 100644 index 0000000..c73e0f5 --- /dev/null +++ b/packages/docs/src/pages/en/components/item-groups.md @@ -0,0 +1,74 @@ +--- +meta: + nav: Item groups + title: Item group component + description: The item group components provides the ability to create a group of selectable items out of any component. + keywords: item groups, vuetify item group component, vue item group component +related: + - /components/button-groups + - /components/carousels + - /components/tabs +features: + github: /components/VItemGroup/ + label: 'C: VItemGroup' + report: true +--- + +# Item groups + +The `v-item-group` provides the ability to create a group of selectable items out of any component. This is the baseline functionality for components such as `v-tabs` and `v-carousel`. + + + +## Usage + +The core usage of the `v-item-group` is to create groups of anything that should be controlled by a **model**. + + + + + +## API + +| Component | Description | +| - | - | +| [v-item-group](/api/v-item-group/) | The item group component. | +| [v-item](/api/v-item/) | Sub-component used for modifying the `v-item-group` state | + + + +## Examples + +### Props + +#### Selected class + +The **selected-class** prop allows you to designate a CSS class applied to _selected_ items. + + + +#### Mandatory + +**mandatory** item groups must have at least 1 item selected. + + + +#### Multiple + +Item groups can have **multiple** items selected. + + + +### Misc + +#### Chips + +Easily hook up a custom chip group. + + + +#### Selection + +Icons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite. + + diff --git a/packages/docs/src/pages/en/components/lazy.md b/packages/docs/src/pages/en/components/lazy.md new file mode 100644 index 0000000..dddc825 --- /dev/null +++ b/packages/docs/src/pages/en/components/lazy.md @@ -0,0 +1,37 @@ +--- +meta: + nav: Lazy + title: Lazy component + description: The lazy component allows you to dynamically render content based upon the user's viewport. + keywords: lazy loading +related: + - /components/badges/ + - /components/icons/ + - /components/lists/ +features: + github: /components/VLazy/ + label: 'C: VLazy' + report: true +--- + +# Lazy + +The `v-lazy` component is used to dynamically load components based upon an elements visibility. + + + +## Usage + +The `v-lazy` component by default will not render its contents until it has been intersected. Scroll down and watch the element render as you go past it. + + + + + +## API + +| Component | Description | +| - | - | +| [v-lazy](/api/v-lazy/) | Primary Component | + + diff --git a/packages/docs/src/pages/en/components/lists.md b/packages/docs/src/pages/en/components/lists.md new file mode 100644 index 0000000..acd19ee --- /dev/null +++ b/packages/docs/src/pages/en/components/lists.md @@ -0,0 +1,135 @@ +--- +meta: + nav: Lists + title: List component + description: The list component is a continuous group of text, images and icons that may contain primary or supplemental actions. + keywords: lists, vuetify list component, vue list component +related: + - /components/item-groups/ + - /components/avatars/ + - /components/sheets/ +features: + figma: true + github: /components/VList/ + label: 'C: VList' + report: true + spec: https://m2.material.io/components/lists +--- + +# Lists + +The `v-list` component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images. + + + +## Usage + +Lists come in three main variations. **single-line** (default), **two-line** and **three-line**. The line declaration specifies the minimum height of the item and can also be controlled from `v-list` with the same prop. + + + + + +## API + +| Component | Description | +| - | - | +| [v-list](/api/v-list/) | Primary Component | +| [v-list-group](/api/v-list-group/) | Sub-component used to display or hide groups of items | +| [v-list-subheader](/api/v-list-subheader/) | Sub-component used to separate groups of items | +| [v-list-item](/api/v-list-item/) | Sub-component used to display a single item or modify the `v-list` state | +| [v-list-item-title](/api/v-list-item-title/) | Sub-component used to display the title of a list item. Wraps the `#title` slot | +| [v-list-item-subtitle](/api/v-list-item-subtitle/) | Sub-component used to display the subtitle of a list item. Wraps the `#subtitle` slot | +| [v-list-item-action](/api/v-list-item-action/) | Sub-component used to display [v-checkbox](/components/checkboxes/) or [v-switch](/components/switches/) | +| [v-list-img](/api/v-list-img/) | Sub-component that is used to wrap a the [v-img](/components/images/) component | +| [v-list-item-media](/api/v-list-item-media/) | Sub-component that is used to wrap a the [v-img](/components/images/) component | + + + +## Examples + +### Props + +#### Items + +Lists can either be created by markup using the many sub-components that are available, or by using the **items** prop. + + + +To customize which properties will be used for the title and value of each item, use the **item-title** and **item-value** props. + + + +If you need to render subheaders or dividers, add an item with a **type** property. Which property to use can be customized using the **item-type** prop. + + + +To customize individual items, you can use the **item-props** prop. It defaults to looking for a **props** property on the items. The value should be an object, and if found it will be spread on the **v-list-item** component. + +If **item-props** is set to **true** then the whole item will be spread. + + + +#### Density + +`v-list` supports the **density** property. + + + + + +#### Disabled + +You cannot interact with disabled `v-list`. + + + +#### Variant + +`v-list` supports the **variant** prop. + + + +#### Nav + +Lists can receive an alternative **nav** styling that reduces the width `v-list-item` takes up as well as adding a border radius. + + + +#### Rounded + +You can make `v-list` items rounded. + + + +#### Shaped + +Shaped lists have rounded borders on one side of the `v-list-item`. + + + +#### Sub group + +Using the `v-list-group` component you can create sub-groups of items. + + + +#### Three line + +For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers. + + + +#### Two lines and subheader + +Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line. + + + +### Misc + +#### Action and item groups + +A **three-line** list with actions. Utilizing **v-list-group**, easily connect actions to your tiles. + + diff --git a/packages/docs/src/pages/en/components/locale-providers.md b/packages/docs/src/pages/en/components/locale-providers.md new file mode 100644 index 0000000..70a0074 --- /dev/null +++ b/packages/docs/src/pages/en/components/locale-providers.md @@ -0,0 +1,37 @@ +--- +meta: + nav: Locale providers + title: Locale provider component + description: The locale provider allows you to modify the application's current language scoped within a template + keywords: locale provider, vuetify locale provider component, vue locale provider component +related: + - /features/internationalization/ + - /features/global-configuration/ + - /getting-started/browser-support/ +features: + github: /components/VLocaleProvider/ + label: 'C: VLocaleProvider' + report: true +--- + +# Locale providers + +The locale provider allows you to provide specific default prop values to components in a section of your application + + + + + +## API + +| Component | Description | +| - | - | +| [v-locale-provider](/api/v-locale-provider/) | Primary Component | + + + +## Examples + +### Locale + +The `v-locale-provider` expects a prop **locale** which looks the same as the **locale** object that you can pass to `createVuetify` when creating your application. diff --git a/packages/docs/src/pages/en/components/menus.md b/packages/docs/src/pages/en/components/menus.md new file mode 100644 index 0000000..0450f24 --- /dev/null +++ b/packages/docs/src/pages/en/components/menus.md @@ -0,0 +1,124 @@ +--- +meta: + nav: Menus + title: Menu component + description: The menu component exposes a dropdown of potential selections or actions that the user can make. + keywords: menus, vuetify menu component, vue menu component +related: + - /components/dialogs/ + - /components/tooltips/ + - /styles/transitions/ +features: + github: /components/VMenu/ + label: 'C: VMenu' + report: true + spec: https://m2.material.io/components/menus +--- + +# Menus + +The `v-menu` component shows a menu at the position of the element used to activate it. + + + +## Usage + +There are three main ways that menus can be defined in markup. + +The first one is by using the **activator** slot. Don't forget to bind the slot **props** to the activating element. + +The second one is by using the **activator** prop with value `parent`. This will turn the parent element of the menu into the activator. + +The third one is to supply a CSS selector string to **activator** prop. This allows you to place the menu and its activator in separate parts of the markup. + + + + + +## API + +| Component | Description | +| - | - | +| [v-menu](/api/v-menu/) | Primary Component | +| [v-btn](/api/v-btn/) | Sub-component often used for the `v-menu` activator | +| [v-list-item](/api/v-list-item/) | Sub-component often used for the `v-menu` content | + + + +## Examples + +### Props + + + + + + + +#### Location + +Menu can be offset relative to the activator by using the **location** prop. Read more about **location** [here](/components/overlays/#location). + + + +#### Open on hover + +Menus can be accessed using hover instead of clicking with the **open-on-hover** prop. + + + +### Slots + +#### Activator and tooltip + +With the new `v-slot` syntax, nested activators such as those seen with a `v-menu` and `v-tooltip` attached to the same activator button, need a particular setup in order to function correctly. + +::: info + This same syntax is used for other nested activators such as `v-dialog` with `v-tooltip` +::: + + + +### Misc + +#### Transitions + +Vuetify comes with [several standard transitions](/styles/transitions#api) that you can use. You can also create your own and pass it as the transition argument. For an example of how the stock transitions are constructed, visit [here](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts). + + + +#### Popover menu + +A menu can be configured to be static when opened, allowing it to function as a popover. This can be useful when there are multiple interactive items within the menu contents. + + + +#### Use In components + +Menus can be placed within almost any component. + + diff --git a/packages/docs/src/pages/en/components/navigation-drawers.md b/packages/docs/src/pages/en/components/navigation-drawers.md new file mode 100644 index 0000000..96d50c2 --- /dev/null +++ b/packages/docs/src/pages/en/components/navigation-drawers.md @@ -0,0 +1,120 @@ +--- +meta: + nav: Navigation drawers + title: Navigation drawer component + description: The navigation drawer component contains internal navigation links for an application and can be permanently on-screen or controlled programmatically. + keywords: navigation drawer, vuetify navigation drawer component, vue navigation drawer component +related: + - /components/lists/ + - /components/icons/ + - /getting-started/wireframes/ +features: + label: 'C: VNavigationDrawer' + report: true + github: /components/VNavigationDrawer/ + spec: https://m2.material.io/components/navigation-drawer +--- + +# Navigation drawers + +The `v-navigation-drawer` component is what your users will utilize to navigate through the application. + + + +## Usage + +The navigation drawer is primarily used to house links to the pages in your application and is pre-configured to work with or without **vue-router** right out the box. Using `null` as the starting value for its **v-model** will initialize the drawer as closed on mobile and as open on desktop. It is common to pair drawers with the [v-list](/components/lists) component using the **nav** property. + + + + + +::: tip + +For the purpose of display, some examples are wrapped in a `v-card` element. Within your application you will generally place the `v-navigation-drawer` as a direct child of + `v-app`. + +::: + +```html { resource="src/App.vue" } + +``` + +## API + +| Component | Description | +| - | - | +| [v-navigation-drawer](/api/v-navigation-drawer/) | Primary Component | +| [v-list-item](/api/v-list-item/) | Component used to create navigation links | + + + +## Caveats + +::: info + The **expand-on-hover** prop does not alter the content area of **v-main**. To have content area respond to **expand-on-hover**, bind **v-model:rail** to a data prop. +::: + +## Examples + +### Props + +#### Bottom drawer + +Using the **bottom** prop, we are able to relocate our drawer on mobile devices to come from the bottom of the screen. This is an alternative style and only activates once the **mobile-breakpoint** is met. + + + +#### Expand on hover + +Places the component in **rail** mode and expands once hovered. This **does not** alter the content area of **v-main**. The width can be controlled with the **rail-width** property. + + + +#### Background images + +Apply a custom background to your drawer via the **image** prop. If you need to customize it further, you can use the `image` slot and render your own `v-img`. + + + +#### Rail variant + +When using the **rail** prop, the drawer will shrink (default 56px) and hide everything inside of `v-list` except the first element. + + + +#### Floating + +By default, a navigation drawer has a 1px right border that separates it from content. In this example we want to detach the drawer from the left side and let it float on its own. The **floating** property removes the right border (or left if using **position** prop). + + + +#### Location + +Navigation drawers can also be positioned on the opposite side of your application (or an element) using the **location** prop. This is useful for creating a side-sheet with auxiliary information that may not have any navigation links. + + + +#### Temporary + +A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile. Clicking outside of the drawer will cause it to close. + + + +### Misc + +#### Colored drawer + +Navigation drawers can be customized to fit any application's design. Here we apply a custom background color and an appended content area using the **append** slot. + + + +#### Multiple drawers + +In this example we define two navigation-drawers, one using **rail** and one without. + + diff --git a/packages/docs/src/pages/en/components/no-ssr.md b/packages/docs/src/pages/en/components/no-ssr.md new file mode 100644 index 0000000..5f7ae7f --- /dev/null +++ b/packages/docs/src/pages/en/components/no-ssr.md @@ -0,0 +1,43 @@ +--- +meta: + title: No SSR + description: The No SSR component is a simple component that doesn't get rendered on the server, but only on the client. + keywords: nossr, vuetify no ssr component, vue no ssr component +features: + github: /components/VNoSsr/ + label: 'C: VNoSsr' + report: true +--- + +# No SSR + +The `v-no-ssr` component is a simple wrapper that allows a developer to designate what a server-side renderer should not render, but leave to the client. + + + + + +## Usage + +The `v-no-ssr` component prevents its content from rendering on the server side. + +```html + +``` + +## API + +| Component | Description | +| - | - | +| [v-no-ssr](/api/v-no-ssr/) | Primary Component | + + + + diff --git a/packages/docs/src/pages/en/components/number-inputs.md b/packages/docs/src/pages/en/components/number-inputs.md new file mode 100644 index 0000000..74e0ea7 --- /dev/null +++ b/packages/docs/src/pages/en/components/number-inputs.md @@ -0,0 +1,101 @@ +--- +emphasized: true +meta: + title: Number inputs + description: The Number input component is used for ... + keywords: Number, vuetify number input component, vue number component +related: + - /components/inputs/ + - /components/text-fields/ + - /components/forms/ +features: + label: 'C: VNumberInput' + github: /components/VNumberInput/ + report: true +--- + +# Number inputs + +The VNumberInput extends the standard HTML number-type input, ensuring style consistency across browsers as a replacement for `` + + + +::: warning + +This feature requires [v3.5.10](/getting-started/release-notes/?version=v3.5.10) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VNumberInput } from 'vuetify/labs/VNumberInput' + +export default createVuetify({ + components: { + VNumberInput, + }, +}) +``` + +## Usage + +Here we display a list of settings that could be applied within an application. + + + + + +## API + +| Component | Description | +| - | - | +| [v-number-input](/api/v-number-input/) | Primary Component | + + + +## Guide + +The `v-number-input` component is built upon the `v-field` and `v-input` components. It is used as a replacement for ``, accepting numeric values from the user. + +### Props + +The `v-number-input` component has support for most of `v-field`'s props and is follows the same design patterns as other inputs. + +#### Control-variant + +The `control-variant` prop offers an easy way to customize steppers button layout. The following values are valid options: **default**, **stacked** and **split**. + + + +#### Reverse + +The `reverse` prop automatically changes the stepper buttons' position to the opposite side for both the default and stacked control variants. + + + +#### Hide-input + +The `hide-input` prop hides the input field, allowing only the stepper buttons to be visible. These stepper buttons follow a stacked control-variant layout. + + + +#### Inset + +The `inset` prop adjusts the style of the stepper buttons by reducing the size of the button dividers. + + + +#### Min/Max + +The `min` and `max` props specify the minimum and maximum values accepted by v-number-input, behaving identically to the native min and max attributes for ``. + + + +#### Step + +The `step` prop behaves the same as the `step` attribute in the ``, it defines the incremental steps for adjusting the numeric value. + + diff --git a/packages/docs/src/pages/en/components/otp-input.md b/packages/docs/src/pages/en/components/otp-input.md new file mode 100644 index 0000000..1fa347b --- /dev/null +++ b/packages/docs/src/pages/en/components/otp-input.md @@ -0,0 +1,125 @@ +--- +meta: + title: OTP Input + description: The OTP input component is used for MFA authentication via input field. + keywords: OTP, MFA, vuetify OTP input component, vue OTP component +related: + - /components/inputs/ + - /components/text-fields/ + - /components/forms/ +features: + label: 'C: VOtpInput' + github: /components/VOtpInput/ + report: true +--- + +# OTP Input + +The OTP input is used for MFA procedure of authenticating users by a one-time password. + +![Otp input Entry](https://cdn.vuetifyjs.com/docs/images/components/v-otp-input/v-otp-input-entry.png) + + + +::: success +This feature was introduced in [v3.4.0 (Blackguard)](/introduction/roadmap/#v3-4-blackguard) +::: + +## Usage + +Here we display a list of settings that could be applied within an application. + + + + + +## API + +| Component | Description | +| - | - | +| [v-otp-input](/api/v-otp-input/) | Primary Component | + + + +## Anatomy + +The `v-otp-input` component is a collection of [v-field](/api/v-field/) components that combine to create a single input. + +![Otp input Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-otp-input/v-otp-input-anatomy.png "OTP input Anatomy") + +| Element / Area | Description | +| - | - | +| 1. Container | The OTP input container holds a number of `v-field` components | +| 2. Field | The `v-field` component is used to create a single input field | + +## Guide + +The `v-otp-input` component is a collection of `v-field` components that combine to create a single input. It is used to validate a one-time password (OTP) that is sent to the user via email or SMS. + +The following code snippet is an example of a basic `v-otp-input` component. + +```html + +``` + +### Props + +The `v-otp-input` component has support for most of `v-field`'s props and is follows the same design patterns as other inputs. + +#### Length + +The `length` prop determines the number of `v-field` components that are rendered. The default value is `6`. + + + +#### Focus-all + +The `autofocus` prop automatically focuses the first element in the `v-otp-input` component. + + + +#### Error + +The `error` prop puts the `v-otp-input` into an error state. This is useful for displaying validation errors. + + + +#### Variants + +The `v-otp-input` component supports the same variants as `v-field`, `v-text-field` and other inputs. + + + +#### Loader + +The `loader` prop displays a loader when the `v-otp-input` component is in a loading state. When complete, emits a `finish` event. + + + +## Examples + +The following are a collection of examples that demonstrate more advanced and real world use of the `v-otp-input` component. + +### Card variants + +The following example is a detailed example of a `v-otp-input` component used within a card. + + + +### Mobile text + +The following example is a detailed example of a `v-otp-input` component used with mobile text. + + + +### Verify account + +The following example is a detailed example of a `v-otp-input` component used to verify a user's account. + + + +### Divider + +The following example is a detailed example of a `v-otp-input` component used with a divider. + + diff --git a/packages/docs/src/pages/en/components/overflow-btns.md b/packages/docs/src/pages/en/components/overflow-btns.md new file mode 100644 index 0000000..27f55c4 --- /dev/null +++ b/packages/docs/src/pages/en/components/overflow-btns.md @@ -0,0 +1,91 @@ +--- +disabled: true +meta: + title: Overflow button component + description: The overflow button component creates an interface for a select that contains additional features and functionality. + keywords: overflow buttons, vuetify overflow button component, vue overflow button component +related: + - /components/forms/ + - /components/selection-controls/ + - /components/selects/ +--- + +# Overflow buttons + +`v-overflow-btn` is used to give the user the ability to select items from the list. It has 3 variations: `editable`, `overflow` and `segmented` + + + +## Usage + +`v-overflow-btn` is used for creating selection lists + + + +## API + + + +## Examples + +### Props + +#### Counter + +You can add a counter to `v-overflow-btn` to control the max char count + + + +#### Dense + +You can use `dense` prop to reduce overflow button height and lower max height of list items. + + + +#### Disabled + +`v-overflow-btn` can be disabled in order to prevent a user from interacting with it + + + +#### Editable + +`editable` `v-overflow-btn` can be directly edited, just as `v-text-field` + + + +#### Filled + +Text fields can be used with an alternative box design. + + + +#### Hint + +You can add a hint for the user using the `hint` property + + + +#### Loading + +`v-overflow-btn` can have `loading` state with a linear progress bar under them + + + +#### Menu props + +You can set underlying `v-menu` props using `menu-props` property + + + +#### Readonly + +`v-overflow-btn` can be put into `readonly` mode, it'll become inactive but won't change the color + + + +#### Segmented + +`segmented` `v-overflow-btn` has and additional divider between the content and the icon + + diff --git a/packages/docs/src/pages/en/components/overlays.md b/packages/docs/src/pages/en/components/overlays.md new file mode 100644 index 0000000..d22e2d7 --- /dev/null +++ b/packages/docs/src/pages/en/components/overlays.md @@ -0,0 +1,156 @@ +--- +meta: + nav: Overlays + title: Overlay component + description: The overlay component makes it easy to create a scrim over components or your entire application. + keywords: overlays, vuetify overlay component, vue overlay component +related: + - /components/dialogs/ + - /components/menus/ + - /components/tooltips/ +features: + github: /components/VOverlay/ + label: 'C: VOverlay' + report: true +--- + +# Overlays + +`v-overlay` is the base for components that float over the rest of the page, such as `v-menu` and `v-dialog`. It can also be used on its own and comes with everything you need to create a custom popover component. + + + +## Usage + +In its simplest form, the `v-overlay` component will add a dimmed layer over your application. + + + + + +## API + +| Component | Description | +| - | - | +| [v-overlay](/api/v-overlay/) | Primary Component | + + + +## Activator + +Overlays can be opened with v-model, or by clicking or hovering on an activator element. An activator is mandatory for the connected locationLocation strategy. The activator element (if present) will also be used by some transitions to slide or scale from the activator's location instead of the middle of the screen. + +Related props: + +- `activator` +- `activatorProps` +- `openOnClick` +- `openOnHover` +- `openOnFocus` +- `closeDelay` +- `openDelay` + +### Activator prop + +The simplest way of providing an activator. Can be a CSS selector to pass to `document.querySelector()`, a component instance, or a HTMLElement. The string `"parent"` is also accepted to automatically bind to the parent element. + +```html + + + + + + +``` + +### Activator slot + +For more manual control, the slot can be used instead. `props` is an object containing all the relevant ARIA attributes and event handlers, and must be applied to the target element with `v-bind` for the component to work correctly. + +```html + + + +``` + +## Location Strategies + +### Static (default) + +`location-strategy="static"` + +Overlay content is absolutely positioned to the center of its container by default. + +### Connected + +`location-strategy="connected"` + +The connected strategy is used by [v-menu](/components/menus) and [v-tooltip](/components/tooltips) to attach the overlay content to an activator element. + +`location` selects a point on the activator, and `origin` a point on the overlay content. The content element will be positioned so the two points overlap. + + + +## Scroll Strategies + +### Block (default) + +`scroll-strategy="block"` + +Scrolling is blocked while the overlay is active, and the scrollbar is hidden. If `contained` is also set, scrolling will only be blocked up to the overlay's [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent). + + + +### Close + +`scroll-strategy="close"` + +Scrolling when the overlay is active will de-activate it. + + + +### Reposition + +`scroll-strategy="reposition"` + +When using the `connected` location strategy, this scroll strategy will reposition the overlay element to always respect the activator location. + + + +### None + +`scroll-strategy="none"` + +No scroll strategy is used. + + + +## Examples + +### Props + +#### Contained + +A **contained** overlay is positioned absolutely and contained inside its parent element. + +::: info + Note: The parent element must have position: relative. +::: + + + +### Misc + +#### Advanced + +Using the [v-hover](/components/hover), we are able to add a nice scrim over the information card with additional actions the user can take. + + + +#### Loader + +Using the `v-overlay` as a background, add a progress component to easily create a custom loader. + + diff --git a/packages/docs/src/pages/en/components/paginations.md b/packages/docs/src/pages/en/components/paginations.md new file mode 100644 index 0000000..8f91156 --- /dev/null +++ b/packages/docs/src/pages/en/components/paginations.md @@ -0,0 +1,72 @@ +--- +meta: + nav: Pagination + title: Pagination component + description: The pagination component is used to separate long sets of data so that it is easier for a user to consume information. + keywords: pagination, vuetify pagination component, vue pagination component +related: + - /components/data-tables/basics/ + - /components/data-tables/pagination/ + - /components/tables/ +features: + figma: true + label: 'C: VPagination' + report: true + github: /components/VPagination/ +--- + +# Pagination + +The `v-pagination` component is used to separate long sets of data so that it is easier for a user to consume information. + + + +## Usage + +Pagination by default displays the number of pages based on the set **length** prop, with **prev** and **next** buttons surrounding to help you navigate. Depending on the length provided, the pagination component will automatically scale. To maintain the current page, simply supply a **v-model** attribute. + + + + + +## API + +| Component | Description | +| - | - | +| [v-pagination](/api/v-pagination/) | Primary Component | + + + +## Examples + +### Props + +#### Rounded + +The **rounded** prop allows you to render pagination buttons with alternative styles. + + + +#### Disabled + +Pagination items can be manually deactivated using the **disabled** prop. + + + +#### Icons + +Previous and next page icons can be customized with the **prev-icon** and **next-icon** props. + + + +#### Length + +Using the **length** prop you can set the length of `v-pagination`, if the number of page buttons exceeds the parent container, it will truncate the list. + + + +#### Total visible + +You can also manually set the maximum number of visible page buttons with the **total-visible** prop. + + diff --git a/packages/docs/src/pages/en/components/parallax.md b/packages/docs/src/pages/en/components/parallax.md new file mode 100644 index 0000000..ffa3837 --- /dev/null +++ b/packages/docs/src/pages/en/components/parallax.md @@ -0,0 +1,53 @@ +--- +meta: + nav: Parallax + title: Parallax component + description: The parallax component creates a 3d effect that makes an image appear to scroll slower than the window. + keywords: parallax, vuetify parallax component, vue parallax component +related: + - /components/aspect-ratios/ + - /components/cards/ + - /components/images/ +features: + github: /components/VParallax/ + label: 'C: VParallax' + report: true +--- + +# Parallax + +The `v-parallax` component creates a 3d effect that makes an image appear to scroll slower than the window. + + + +## Usage + +A parallax causes a shift in a background image when the user scrolls the page. + + + + + +## API + +| Component | Description | +| - | - | +| [v-parallax](/api/v-parallax/) | Primary Component | + + + +## Examples + +### Misc + +#### Content + +You can also place any content inside of the parallax. This allows you to use the parallax as a hero image. + + + +#### Custom height + +You can specify a custom height on a parallax. Keep in mind this can break the parallax if your image is not sized properly + + diff --git a/packages/docs/src/pages/en/components/progress-circular.md b/packages/docs/src/pages/en/components/progress-circular.md new file mode 100644 index 0000000..9677a83 --- /dev/null +++ b/packages/docs/src/pages/en/components/progress-circular.md @@ -0,0 +1,74 @@ +--- +meta: + nav: Progress circular + title: Progress circular component + description: The progress circular component is useful for displaying a visual indicator of numerical data in a circle. + keywords: progress circular, vuetify progress circular component, vue progress circular component, circular progress +related: + - /components/cards/ + - /components/progress-linear/ + - /components/lists/ +features: + github: /components/VProgressCircular/ + label: 'C: VProgressCircular' + report: true + spec: https://m2.material.io/components/progress-indicators +--- + +# Progress circular + +The `v-progress-circular` component is used to convey data circularly to users. It also can be put into an indeterminate state to portray loading. + + + +## Usage + +In its simplest form, v-progress-circular displays a circular progress bar. Use the value prop to control the progress. + + + + + +## API + +| Component | Description | +| - | - | +| [v-progress-circular](/api/v-progress-circular/) | Primary Component | + + + +## Examples + +### Props + +#### Color + +Alternate colors can be applied to `v-progress-circular` using the `color` prop. + + + +#### Indeterminate + +Using the `indeterminate` prop, a `v-progress-circular` continues to animate indefinitely. + + + +#### Rotate + +The `rotate` prop gives you the ability to customize the `v-progress-circular`'s origin. + + + +#### Size and Width + +The `size` and `width` props allow you to easily alter the size and width of the `v-progress-circular` component. + + + +### Slots + +#### Default + +`default` slot can be used to replace the text inside the loader. + + diff --git a/packages/docs/src/pages/en/components/progress-linear.md b/packages/docs/src/pages/en/components/progress-linear.md new file mode 100644 index 0000000..c2e4047 --- /dev/null +++ b/packages/docs/src/pages/en/components/progress-linear.md @@ -0,0 +1,129 @@ +--- +meta: + nav: Progress linear + title: Progress linear component + description: The progress-linear component is useful for displaying a visual indicator of numerical data in a straight line. + keywords: progress linear, vuetify progress linear component, vue progress linear component, linear progress +related: + - /components/cards/ + - /components/progress-circular/ + - /components/lists/ +features: + figma: true + github: /components/VProgressLinear/ + label: 'C: VProgressLinear' + report: true + spec: https://m2.material.io/components/progress-indicators +--- + +# Progress linear + +The `v-progress-linear` component is used to convey data visually to users. It supports both indeterminate amounts, such as loading or processing, and finite amounts of progress (including separate buffer values). + + + +## Usage + +In its simplest form, `v-progress-linear` displays a horizontal progress bar. Use the **value** prop to control the progress. + + + + + +## API + +| Component | Description | +| - | - | +| [v-progress-linear](/api/v-progress-linear/) | Primary Component | + + + +## Examples + +### Props + +#### Buffering + +The primary value is controlled by **v-model**, whereas the buffer is controlled by the **buffer-value** prop. + + + +#### Colors + +You can set the colors of the progress bar using the props **color** and **bg-color**. + + + +#### Indeterminate + +Using the **indeterminate** prop, `v-progress-linear` continuously animates. + + + +#### Reversed + +Displays reversed progress. The component also has RTL support, such that a progress bar in right-to-left mode with **reverse** prop enabled will display left-to-right. + + + +#### Rounded + +The **rounded** prop is used to apply a border radius to the `v-progress-linear` component. + + + +::: info + Use the **rounded-bar** property to add a border-radius to the inner edges of value bar. By default, the value bar's border-radius is equal to the default _border-radius_ of your application unless a different value is provided by the **rounded** prop or SASS variable. +::: + +#### Stream + +The **stream** property works with **buffer-value** to convey to the user that there is some action taking place. + + + +#### Striped + +This applies a striped background over the value portion of the `v-progress-linear`. This prop has no effect when using **indeterminate**. + + + +### Slots + +#### Default + +The `v-progress-linear` component will be responsive to user input when using **v-model**. You can use the default slot or bind a local model to display inside of the progress. If you are looking for advanced features on a linear type component, check out [v-slider](/components/sliders). + + + +### Misc + +#### Determinate + +The progress linear component can have a determinate state modified by **v-model**. + + + +#### File loader + +The `v-progress-linear` component is good for communicating to the user that they are waiting for a response. + + + +#### Toolbar loader + +Using the **absolute** prop we are able to position the `v-progress-linear` component at the bottom of the `v-toolbar`. We also use the **active** prop which allows us to control the visibility of the progress. + + + +#### Buffer color and opacity + +::: success + +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) + +::: + +The buffer color and opacity can be controlled using the **buffer-color** and **buffer-opacity** props. This enables you to make multi colored progress bars. + + diff --git a/packages/docs/src/pages/en/components/pull-to-refresh.md b/packages/docs/src/pages/en/components/pull-to-refresh.md new file mode 100644 index 0000000..1b76252 --- /dev/null +++ b/packages/docs/src/pages/en/components/pull-to-refresh.md @@ -0,0 +1,59 @@ +--- +emphasized: true +meta: + title: Pull To Refresh + description: The PullToRefresh allows users to update content with a simple downward swipe on their screen. + keywords: Pull to refresh, vuetify Pull to refresh component, vue pull to refresh component +features: + label: 'C: VPullToRefresh' + github: /components/VPullToRefresh/ + report: true +--- + +# Pull To Refresh + +The PullToRefresh allows users to update content with a simple downward swipe on their screen. Works for Mobile and Desktop. + + + +::: warning + +This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VPullToRefresh } from 'vuetify/labs/VPullToRefresh' + +export default createVuetify({ + components: { + VPullToRefresh, + }, +}) +``` + +## Usage + +Drag the list downward to activate the pull-to-refresh feature. + + + +::: tip + +Pull down functionality is available as soon as its immediate scrollable parent has scrolled to the top. + +::: + + + +## API + +| Component | Description | +| - | - | +| [v-pull-to-refresh](/api/v-pull-to-refresh/) | Primary Component | + + diff --git a/packages/docs/src/pages/en/components/radio-buttons.md b/packages/docs/src/pages/en/components/radio-buttons.md new file mode 100644 index 0000000..507d031 --- /dev/null +++ b/packages/docs/src/pages/en/components/radio-buttons.md @@ -0,0 +1,79 @@ +--- +meta: + nav: Radio buttons + title: Radio button component + description: A radio button allows the user to choose only one of a set of options using a radio group. + keywords: radio groups, radio buttons, vuetify radio group component, vuetify radio component, vue radio component, vue radio group component +related: + - /components/button-groups/ + - /components/forms/ + - /components/checkboxes/ +features: + label: 'C: VRadio' + report: true + github: /components/VRadio/ + spec: https://m2.material.io/components/radio-buttons +--- + +# Radio buttons + +The `v-radio` component is a simple radio button. When combined with the `v-radio-group` component you can provide grouping functionality to allow users to select from a predefined set of options. + + + +## Usage + +Although `v-radio` can be used on its own, it is best used in conjunction with `v-radio-group`. + + + + + +## API + +| Component | Description | +| - | - | +| [v-radio-group](/api/v-radio-group/) | Primary Component | +| [v-radio](/api/v-radio/) | Sub-component used for modifying the `v-radio-group` state | + + + +## Examples + +### Props + +#### Model (group) + +Using the **v-model** (or **model-value**) you can access and control the selected radio button defined by the set **value** on the child `v-radio` components. + + + +::: info + If you are using integer values with **model-value**, you will need to use `:value` to set the value of the child `v-radio` otherwise it will be evaluated as a string. +::: + +#### Model (radio) + +The **v-model** (or **model-value**) you can access and control the value of a single radio button. The `true`/`false` values can be independently defined using the **true-value** and **false-value** props. + + + +#### Colors + +Radios can be colored by using any of the builtin colors and contextual names using the **color** prop. + + + +#### Direction + +Radio-groups can be presented either as a row or a column, using their respective props. The default is as a column. + + + +### Slots + +#### Label + +Radio Group labels can be defined in `label` slot - that will allow to use HTML content. + + diff --git a/packages/docs/src/pages/en/components/range-sliders.md b/packages/docs/src/pages/en/components/range-sliders.md new file mode 100644 index 0000000..8d22050 --- /dev/null +++ b/packages/docs/src/pages/en/components/range-sliders.md @@ -0,0 +1,80 @@ +--- +meta: + nav: Range sliders + title: Range Slider component + description: The range slider component is a better visualization of the number input. It is used for gathering a range of numerical user data. + keywords: sliders, range, vuetify slider component, vuetify range slider component, vue slider component +related: + - /components/forms/ + - /components/selects/ + - /components/sliders/ +features: + label: 'C: VRangeSlider' + report: true + github: /components/VRangeSlider/ + spec: https://m2.material.io/components/sliders +--- + +# Range Sliders + +The `v-range-slider` component complements the `v-slider` component nicely when you are in need of representing a range of values. + + + +## Usage + +Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. + + + + + +## API + +| Component | Description | +| - | - | +| [v-range-slider](/api/v-range-slider/) | Primary Component | + + + +## Examples + +### Props + +#### Strict + +With the **strict** prop applied, the thumbs of the range slider are not allowed to cross over each other. + + + +#### Disabled + +You cannot interact with **disabled** sliders. + + + +#### Min and max + +You can set **min** and **max** values of sliders. + + + +#### Step + +`v-range-slider` can have steps other than 1. This can be helpful for some applications where you need to adjust values with more or less accuracy. + + + +#### Vertical sliders + +You can use the **vertical** prop to switch sliders to a vertical orientation. If you need to change the height of the slider, use css. + + + +### Slots + +#### Thumb label + +Using the **tick-labels** prop along with the `thumb-label` slot, you can create a very customized solution. + + diff --git a/packages/docs/src/pages/en/components/ratings.md b/packages/docs/src/pages/en/components/ratings.md new file mode 100644 index 0000000..2a78c3d --- /dev/null +++ b/packages/docs/src/pages/en/components/ratings.md @@ -0,0 +1,137 @@ +--- +meta: + nav: Ratings + title: Rating component + description: The star rating component is a specialized widget for collecting user feedback via ratings. + keywords: star ratings, vuetify star rating component, vue star rating component, rating component +related: + - /components/cards + - /components/icons + - /components/lists +features: + github: /components/VRating/ + label: 'C: VRating' + report: true +--- + +# Ratings + +The `v-rating` component is a specialized but important piece in building user widgets. Collecting user feedback via ratings is a simple analytic that can provide a lot of feedback to your product or application. + + + +## Usage + +The `v-rating` component provides a simple interface for gathering user feedback. + + + + + +## API + +| Component | Description | +| - | - | +| [v-rating](/api/v-rating/) | Primary Component | + + + +## Examples + +### Props + +#### Color + +The `v-rating` component can be colored as you want, you can set both selected and not selected colors. + + + +#### Density + +Control the space occupied by `v-rating` items using the **density** prop. + + + +#### Clearable + +Clicking on a current rating value can reset the rating by using **clearable** prop. + + + +#### Readonly + +For ratings that are not meant to be changed you can use **readonly** prop. + + + +#### Hover effect + +When using the **hover** prop, the rating icons will become a solid color and slightly increase its scale when the mouse is hovered over them. + + + +#### Labels + +The `v-rating` component can display labels above or below each item. + + + +#### Icons + +You can use custom icons. + + + +#### Length + +Change the number of items by modifying the the **length** prop. + + + +#### Half increments + +The **half-increments** prop increases the granularity of the ratings, allow for `.5` values as well. + + + +#### Size + +Utilize the same sizing classes available in `v-icon` or provide your own with the **size** prop. + + + +#### Aria Label + +Provide a label to assistive technologies for each item. + + + +### Slots + +#### Item slot + +Slots enable advanced customization possibilities and provide you with more freedom in how you display the rating. + + + +#### Custom labels slot + +Any arbitrary content could be displayed for labels in **item-label** slot. + + + +### Misc + + + +#### Card ratings + +The rating component pairs well with products allowing you to gather and display customer feedback. + + + + diff --git a/packages/docs/src/pages/en/components/selects.md b/packages/docs/src/pages/en/components/selects.md new file mode 100644 index 0000000..9e50cca --- /dev/null +++ b/packages/docs/src/pages/en/components/selects.md @@ -0,0 +1,149 @@ +--- +meta: + nav: Selects + title: Select component + description: The select component provides a list of options that a user can make selections from. + keywords: selects, vuetify select component, vue select component +related: + - /components/autocompletes/ + - /components/combobox/ + - /components/forms/ +features: + label: 'C: VSelect' + report: true + github: /components/VSelect/ + spec: https://m2.material.io/components/text-fields +--- + +# Selects + +Select fields components are used for collecting user provided information from a list of options. + + + +## Usage + + + + + +## API + +| Component | Description | +| - | - | +| [v-select](/api/v-select/) | Primary Component | +| [v-autocomplete](/api/v-autocomplete/) | A select component that allows for advanced filtering | +| [v-combobox](/api/v-combobox/) | A select component that allows for filtering and custom values | + + + +## Caveats + +::: error + +When using objects for the **items** prop, you must associate **item-title** and **item-value** with existing properties on your objects. These values are defaulted to **title** and **value** and can be changed. + +::: + +## Guide + +The `v-select` component is meant to be a direct replacement for a standard `` field which combines both the `v-input` and `v-field` components into a single offering. It is a commonly used element that provides the baseline for other form inputs; such as [v-select](/components/selects/), [v-autocomplete](/components/autocompletes/), [v-combobox](/components/combobox/). In this guide you learn the basic fundamentals of `v-text-field` and how its various properties interact with each other. + +### Props + +The `v-text-field` component has an massive API with numerous options to modify the display, functionality, or style of your inputs. Many of the configurable options are also available through [slots](#slots). + +#### Labeling + +The **label** prop displays custom text for identifying an input's purpose. The following code snippet is an example of a basic `v-text-field` component: + +```html + +``` + +Using this baseline makes it easy to put together quick mock implementations of your interface without needing to hook up any functional logic. + +The following code snippet is an example of a simple form for for collecting a user's **First** name: + + + +#### Placeholders + +Sometimes a label alone doesn't convey enough information and you need to expose more. For those use-cases, use the **placeholder** property with or without the [label](#labeling) or [hint](#hint) properties. + +In the following snippet, we improve the user experience of a `v-text-field` that is capturing an email address: + +```html + +``` + +When the user focuses the input, the placeholder fades in as the label translates up. The added visual element improves the user experience when using multiple field inputs. + + + +::: info + Use the **persistent-placeholder** prop to force the **placeholder** to be visible, even when the input is not focused. +::: + +#### Hints & messages + +The **label** and **placeholder** props are useful for providing context to the input but are typically concise. For longer textual information, all Vuetify inputs contain a **details** section that is used to provide **hints**, regular **messages**, and **error-messages**. In the following example watch the custom hint message display when you focus the input: + + + +If you want to make the hint visible at all times, use the **persistent-hint** property. The following example demonstrates how to force a **hint** to show in the input's details: + +```html + +``` + +In addition to **persistent-hint**, there are 3 other properties that support a persistent state: + +* **persistent-clear** - always show the input clear icon when a **value** is present +* **persistent-counter** - always show input character length element +* **persistent-placeholder** - always show placeholder, causes label to automatically elevate + +#### Clearable + +The **clearable** prop appends an inner [v-icon](/components/icons/) that clears the `v-text-field` when clicked. When an input is cleared, it resets the current `v-text-field` value. The following example displays an interactive icon when the mouse hovers over the input: + + + +Note that **readonly** will not remove the clear icon, to prevent readonly inputs from being cleared you should also disable **clearable**. + +Sometimes you may need to perform an action when the user clears an input. By using a custom [Vue Event Handler](https://vuejs.org/guide/essentials/event-handling.html), you can bind a custom function that is invoked whenever the `v-text-field` is cleared by the user. The following example demonstrates how to use a a custom event handler to invoke the **onClear** method: + +```html { resource="Component.vue" } + + + +``` + +You can see more supported events on the `v-text-field` [API page](/api/v-text-field/#events). + +#### Validation & rules + +When working with inputs you often need to validate the user's input in some manner; i.e. Email, Password. Use the **rules** property to invoke custom functions based upon the `v-text-field`'s state. It accepts an array of **functions** that return either `true` or a `string`. In the following example, enter a value into the field and then clear it: + + + +#### Forms + +Group multiple `v-text-field` components and other functionality within a `v-form` component; for a more detailed look at forms, please visit the [v-form](/components/forms/) page. Forms are useful for validating more than 1 input and make it easy to interact with the state of many fields at once. The following example combines multiple `v-text-field` components to create a login form: + + + +### Examples + +The following is a collection of `v-text-field` examples that demonstrate how different the properties work in an application. + +#### Custom colors + +The **color** prop provides an easy way to change the color of textual content; label, prefix, suffix, etc. This color is applied as long as `v-text-field` is focused. + + + +#### Density + +The **density** prop decreases the height of the text field based upon 1 of 3 levels of density; **default**, **comfortable**, and **compact**. + + + +#### Disabled and readonly + +The state of a text field can be changed by providing the **disabled** or **readonly** props. + + + +#### Hide details + +When **hide-details** is set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display. + + + +#### Hint + +The **hint** property on text fields adds the provided string beneath the text field. Using **persistent-hint** keeps the hint visible when the text field is not focused. + + + +#### Icons + +You can add icons to the text field with **prepend-icon**, **append-icon** and **append-inner-icon** props. + + + +#### Prefixes and suffixes + +The **prefix** and **suffix** properties allows you to prepend and append inline non-modifiable text next to the text field. + + + +#### Validation + +Vuetify includes simple validation through the **rules** prop. The prop accepts a mixed array of types `function`, `boolean` and `string`. When the input value changes, each element in the array will be validated. Functions pass the current v-model as an argument and must return either `true` / `false` or a `string` containing an error message. + + + +#### Variant + +The **variant** prop provides an easy way to customize the style of your text field. The following values are valid options: **solo**, **filled**, **outlined**, **plain**, and **underlined**. + + + +### Events + +#### Icon events + +`click:prepend`, `click:append`, `click:append-inner`, and `click:clear` are emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead. + + + +### Slots + +Slots allow you to customize the display of many `v-text-field` properties to modify what Vuetify does by default. The following slots are available on the `v-text-field` component: + +| Slot name | Description | +| - | - | +| 1. prepend | Provided by `v-input`, positioned before the input field | +| 2. prepend-inner | Provided by `v-field`, positioned at the start of the input field | +| 3. label | The form input label | +| 4. append-inner | Provided by `v-field`, positioned at the end of the input field | +| 5. append | Provided by `v-input`, positioned after the input field | +| 6. details | Used for displaying **messages**, **hint**, **error-messages**, and more | + +The following example uses the **label**, **prepend**, and **prepend-inner** slots and adds custom elements to the `v-text-field` + +```html { resource="Component.vue" } + + + +``` + + + +#### Icon slots + +Instead of using `prepend`/`append`/`append-inner` icons you can use slots to extend input's functionality. + + + +#### Label + +Text field label can be defined in `label` slot - that will allow to use HTML content + + + +#### Progress + +You can display a progress bar instead of the bottom line. You can use the default indeterminate progress having same color as the text field or designate a custom one using the `progress` slot + + + +### Misc + +#### Custom validation + +While the built in `v-form` or 3rd party plugin such as [vuelidate](https://github.com/monterail/vuelidate) or [vee-validation](https://github.com/logaretm/vee-validate) can help streamline your validation process, you can choose to simply control it yourself. + + + +#### Full width with counter + +Full width text fields allow you to create boundless inputs. In this example, we use a `v-divider` to separate the fields. + + + +#### Password input + +Using the HTML input **type** [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) can be used with an appended icon and callback to control the visibility. + + + +#### Login Form + +In this example we use a combination of prepend and append icon to create a custom login form. + + diff --git a/packages/docs/src/pages/en/components/textareas.md b/packages/docs/src/pages/en/components/textareas.md new file mode 100644 index 0000000..6bb77df --- /dev/null +++ b/packages/docs/src/pages/en/components/textareas.md @@ -0,0 +1,98 @@ +--- +meta: + nav: Textareas + title: Textarea component + description: The textarea component is a text field that accepts lengthy textual input from users. + keywords: textareas, vuetify textarea component, vue textarea component +related: + - /components/forms/ + - /components/selects/ + - /components/text-fields/ +features: + label: 'C: VTextarea' + report: true + github: /components/VTextarea/ + spec: https://m2.material.io/components/text-fields#input-types +--- + +# Textareas + +Textarea components are used for collecting large amounts of textual data. + + + +## Usage + +`v-textarea` in its simplest form is a multi-line text-field, useful for larger amounts of text. + + + + + +## API + +| Component | Description | +| - | - | +| [v-textarea](/api/v-textarea/) | Primary Component | + + + +## Examples + +### Props + +#### Auto grow + +When using the `auto-grow` prop, textarea's will automatically increase in size when the contained text exceeds its size. + + + +#### Background color + +The `background-color` and `color` props give you more control over styling `v-textarea`'s. + + + +#### Browser autocomplete + +The `autocomplete` prop gives you the option to enable the browser to predict user input. + + + +#### Clearable + +You can clear the text from a `v-textarea` by using the `clearable` prop, and customize the icon used with the `clearable-icon` prop. + + + +#### Counter + +The `counter` prop informs the user of a character limit for the `v-textarea`. + + + +#### Icons + +The `append-icon` and `prepend-icon` props help add context to `v-textarea`. + + + +#### No resize + +`v-textarea`'s have the option to remain the same size regardless of their content's size, using the `no-resize` prop. + + + +#### Rows + +The `rows` prop allows you to define how many rows the textarea has, when combined with the `row-height` prop you can further customize your rows by defining their height. + + + +### Misc + +#### Signup form + +Utilizing alternative input styles, you can create amazing interfaces that are easy to build and easy to use. + + diff --git a/packages/docs/src/pages/en/components/theme-providers.md b/packages/docs/src/pages/en/components/theme-providers.md new file mode 100644 index 0000000..5d8f588 --- /dev/null +++ b/packages/docs/src/pages/en/components/theme-providers.md @@ -0,0 +1,39 @@ +--- +meta: + nav: Theme providers + title: Theme provider component + description: The theme provider allows you to style a section of your application in a different theme from the default + keywords: theme provider, vuetify theme provider component, vue theme provider component +related: + - /features/theme/ + - /styles/colors/ + - /features/application-layout/ +features: + github: /components/VThemeProvider/ + label: 'C: VThemeProvider' + report: true +--- + +# Theme providers + +The theme provider allows you to style a section of your application in a different theme from the default + + + + + +## API + +| Component | Description | +| - | - | +| [v-theme-provider](/api/v-theme-provider/) | Primary Component | + + + +## Examples + +### Background + +By default, `v-theme-provider` is a renderless component that allows you to change the applied theme for all of its children. When using the **with-background** prop, the `v-theme-provider` wraps its children in an element and applies the selected theme's background color to it. + + diff --git a/packages/docs/src/pages/en/components/time-pickers.md b/packages/docs/src/pages/en/components/time-pickers.md new file mode 100644 index 0000000..2897689 --- /dev/null +++ b/packages/docs/src/pages/en/components/time-pickers.md @@ -0,0 +1,126 @@ +--- +emphasized: true +meta: + nav: Time pickers + title: Time picker component + description: The time picker component is a stand-alone interface that allows the selection of hours and minutes in AM/PM and 24hr formats. + keywords: time pickers, vuetify time picker component, vue time picker component +related: + - /components/buttons/ + - /components/date-pickers/ + - /components/text-fields/ +--- + +# Time pickers + +The `v-time-picker` is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting the time. + + + +::: warning + +This feature requires [v3.5.12](/getting-started/release-notes/?version=v3.5.12) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VTimePicker } from 'vuetify/labs/VTimePicker' + +export default createVuetify({ + components: { + VTimePicker, + }, +}) +``` + +## Usage + +Time pickers have the light theme enabled by default. + + + + + +## API + +| Component | Description | +| - | - | +| [v-time-picker](/api/v-time-picker/) | Primary Component | + + + +## Examples + +### Props + +#### Allowed times + +You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes. + + + +#### Colors + +Time picker colors can be set using the `color` and `header-color` props. If `header-color` prop is not provided header will use the `color` prop value." + + + +#### Disabled + +You can't interact with disabled picker. + + + +#### Elevation + +Emphasize the `v-time-picker` component by providing an **elevation** from 0 to 24. Elevation modifies the `box-shadow` css property. + + + +#### Format + +A time picker can be switched to 24hr format. Note that the `format` prop defines only the way the picker is displayed, picker's value (model) is always in 24hr format. + + + +#### No header + +You can remove picker's header. + + + +#### Range + +This is an example of joining pickers together using `min` and `max` prop. + + + +#### Read-only + +Read-only picker behaves same as disabled one, but looks like default one. + + + +#### Scrollable + +You can edit time picker's value using mouse wheel. + + + +#### Use seconds + +Time picker can have seconds input. + + + +### Misc + +#### Dialog and menu + +Due to the flexibility of pickers, you can really dial in the experience exactly how you want it. + + diff --git a/packages/docs/src/pages/en/components/timelines.md b/packages/docs/src/pages/en/components/timelines.md new file mode 100644 index 0000000..0950fca --- /dev/null +++ b/packages/docs/src/pages/en/components/timelines.md @@ -0,0 +1,132 @@ +--- +meta: + nav: Timelines + title: Timeline component + description: The timeline component is used to display chronological information either vertically or horizontally. + keywords: timelines, vuetify timeline component, vue timeline component +related: + - /components/cards/ + - /components/icons/ + - /components/grids/ +features: + github: /components/VTimeline/ + label: 'C: VTimeline' + report: true +--- + +# Timelines + +The `v-timeline` is useful for stylistically displaying chronological information. + + + + + + + +## API + +| Component | Description | +| - | - | +| [v-timeline](/api/v-timeline/) | Primary Component | +| [v-timeline-item](/api/v-timeline-item/) | Sub-component used to display a single timeline item | + + + + + +## Examples + +### Props + +#### Direction + +Switch between a horizontal and vertical timeline in real-time using the **direction** prop. + + + +#### Side + +Use the **side** property to force all items to one side of the timeline. + + + +#### Alignment + +By default, `v-timeline-item` content is vertically aligned `center`. The **align** prop also supports `top` alignment. + + + +#### Dot color + +Colored dots create visual breakpoints that make your timelines easier for users to read. + + + +#### Icon dots + +Use icons within the `v-timeline-item` dot to provide additional context. + + + + + +#### Size + +The **size** prop allows you to customize the size of each dot. + + + +#### Truncated line + +Truncate the start, end or both ends of the timeline center line by using the **truncate-line** prop. + + + +#### Line inset + +Modify the inset of dividing lines by specifying a custom amount using the **line-inset** prop. + + + +### Slots + +#### Icon + +Insert avatars into dots with use of the `icon` slot and `v-avatar`. + + + +#### Opposite + +The **opposite** slot provides an additional layer of customization within your timelines. + + + + + +### Misc + +#### Advanced + + diff --git a/packages/docs/src/pages/en/components/toolbars.md b/packages/docs/src/pages/en/components/toolbars.md new file mode 100644 index 0000000..f46bc45 --- /dev/null +++ b/packages/docs/src/pages/en/components/toolbars.md @@ -0,0 +1,121 @@ +--- +meta: + nav: Toolbars + title: Toolbar component + description: The toolbar component sits above the content that it affects and provides an area for labeling and additional actions. + keywords: toolbars, vuetify toolbar component, vue toolbar component +related: + - /components/buttons/ + - /components/footers/ + - /components/tabs/ +features: + github: /components/VToolbar/ + label: 'C: VToolbar' + report: true + spec: https://m1.material.io/components/toolbars.html +--- + +# Toolbars + +The `v-toolbar` component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. The toolbar component works great in conjunction with [v-navigation-drawer](/components/navigation-drawers) and [v-card](/components/cards). + + + + + +## Usage + +A toolbar is a flexible container that can be used in a number of ways. By default, the toolbar is 64px high on desktop and 56px high on mobile. There are a number of helper components available to use with the toolbar. The `v-toolbar-title` is used for displaying a title and `v-toolbar-items` allow [v-btn](/components/buttons) to extend full height. + + + + + +## API + +| Component | Description | +| - | - | +| [v-toolbar](/api/v-toolbar/) | Primary Component | +| [v-toolbar-items](/api/v-toolbar-items/) | Sub-component used to modify the styling of [v-btn](/components/buttons) | +| [v-toolbar-title](/api/v-toolbar-title/) | Sub-component used to display the title of the toolbar | +| [v-btn](/api/v-btn/) | Sub-component commonly used in `v-toolbar` | + + + +## Caveats + +::: warning + When `v-btn`s with the **icon** prop are used inside of `v-toolbar` and `v-app-bar` they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a `div`, you will need to apply negative margin to that container in order to properly align them. +::: + +## Examples + +### Props + +#### Background + +Toolbars can display a background as opposed to a solid color using the **src** prop. This can be modified further by using the **img** slot and providing your own [v-img](/components/images) component. Backgrounds can be faded using a [v-app-bar](/components/app-bars#prominent-w-scroll-shrink-and-image) + + + +#### Collapse + +Toolbars can be collapsed to save screen space. + + + +#### Dense toolbars + +Dense toolbars reduce their height to _48px_. When using in conjunction with the **prominent** prop, will reduce height to _96px_. + + + +#### Extended + +Toolbars can be extended without using the `extension` slot. + + + +### Extension height + +The extension's height can be customized. + + + +#### Floating with search + +A floating toolbar is turned into an inline element that only takes up as much space as needed. This is particularly useful when placing toolbars over content. + + + +#### Light and Dark + +Toolbars come in **2** variants, light and dark. Light toolbars have dark tinted buttons and dark text whereas dark toolbars have white tinted buttons and white text. + + + +#### Prominent toolbars + +Prominent toolbars increase the `v-toolbar`'s height to _128px_ and positions the `v-toolbar-title` towards the bottom of the container. This is expanded upon in [v-app-bar](/components/app-bars#prominent-w-scroll-shrink) with the ability to shrink a **prominent** toolbar to a **dense** or **short** one. + + + +### Misc + +#### Contextual action bar + +It is possible to update the appearance of a toolbar in response to changes in app state. In this example, the color and content of the toolbar changes in response to user selections in the `v-select`. + + + +#### Flexible and card toolbar + +In this example we offset our card onto the extended content area of a toolbar using the **extended** prop. + + + +#### Variations + +A `v-toolbar` has multiple variations that can be applied with themes and helper classes. These range from light and dark themes, colored and transparent. + + diff --git a/packages/docs/src/pages/en/components/tooltips.md b/packages/docs/src/pages/en/components/tooltips.md new file mode 100644 index 0000000..c14c74c --- /dev/null +++ b/packages/docs/src/pages/en/components/tooltips.md @@ -0,0 +1,62 @@ +--- +meta: + nav: Tooltips + title: Tooltip component + description: The tooltip component displays textual information regarding the element it is attached to. + keywords: tooltips, vuetify tooltip component, vue tooltip component +related: + - /components/overlays/ + - /components/icons/ + - /components/menus/ +features: + github: /components/VTooltip/ + label: 'C: VTooltip' + report: true + spec: https://m2.material.io/components/tooltips +--- + +# Tooltips + +The `v-tooltip` component is useful for conveying information when a user hovers over an element. You can also programmatically control the display of tooltips through a `v-model`. When activated, tooltips display a text label identifying an element, such as a description of its function. + + + +## Usage + +Tooltips can wrap any element. + + + + + +## API + +| Component | Description | +| - | - | +| [v-tooltip](/api/v-tooltip/) | Primary Component | + + + +## Examples + +### Props + +#### Location + +Use the **location** prop to specify on which side of the element the tooltip should show. Read more about **location** [here](/components/overlays/#location). + + + + + +#### Visibility + +Tooltip visibility can be programmatically changed using `v-model`. + + diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md new file mode 100644 index 0000000..664e700 --- /dev/null +++ b/packages/docs/src/pages/en/components/treeview.md @@ -0,0 +1,157 @@ +--- +emphasized: true +meta: + nav: Treeview + title: Treeview component + description: The treeview component is a user interface that is used to represent hierarchical data in a tree structure. + keywords: treeview, vuetify treeview component, vue treeview component +related: + - /components/lists/ + - /components/timelines/ +features: + label: 'C: VTreeview' + report: true +--- + +# Treeview + +The `v-treeview` component is useful for displaying large amounts of nested data. + + + +::: warning + +This feature requires [v3.5.9](/getting-started/release-notes/?version=v3.5.9) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VTreeview } from 'vuetify/labs/VTreeview' + +export default createVuetify({ + components: { + VTreeview, + }, +}) +``` + +## Usage + +A basic example of the treeview component. + + + + + +## API + +| Component | Description | +| - | - | +| [v-treeview](/api/v-treeview/) | Primary Component | +| [v-treeview-item](/api/v-treeview-item/) | Sub-component used to display a single treeview node | +| [v-treeview-children](/api/v-treeview-children/) | Sub-component used to display a single treeview node's children | +| [v-treeview-group](/api/v-treeview-group/) | Sub-component used to display a single treeview node's children | + + + +## Examples + +### Props + +#### Activatable + +Treeview nodes can be activated by clicking on them. + + + +#### Color + +You can control the text and background color of the active treeview node. + + + +#### Dense mode + +Dense mode provides more compact layout with decreased heights of the items. + + + + + +#### Item props + +If **item-props** is set to `true` then the whole item will be spread. In the following example, the disabled prop defined in each item will disable the item accordingly. + + + +#### Load children + +You can dynamically load child data by supplying a _Promise_ callback to the **load-children** prop. This callback will be executed the first time a user tries to expand an item that has a children property that is an empty array. + + + +#### Open all + +Treeview nodes can be pre-opened on page load. + + + + + + + +#### Selected color + +You can control the color of the selected node checkbox. + + + +#### Selection type + +Treeview now supports two different selection types. The default type is **'leaf'**, which will only include leaf nodes in the v-model array, but will render parent nodes as either partially or fully selected. The alternative mode is **'independent'**, which allows one to select parent nodes, but each node is independent of its parent and children. + + + + + +### Slots + +#### Append and label + +Using the the **label**, and an **append** slots we are able to create an intuitive file explorer. + + + +### Misc + +#### Search and filter + +Easily filter your treeview by using the **search** prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the **filter** prop. This works similar to the [v-autocomplete](/components/autocompletes) component. + + + +#### Selectable icons + +Customize the **on**, **off** and **indeterminate** icons for your selectable tree. Combine with other advanced functionality like API loaded items. + + diff --git a/packages/docs/src/pages/en/components/vertical-steppers.md b/packages/docs/src/pages/en/components/vertical-steppers.md new file mode 100644 index 0000000..39d5aa4 --- /dev/null +++ b/packages/docs/src/pages/en/components/vertical-steppers.md @@ -0,0 +1,70 @@ +--- +emphasized: true +meta: + nav: Steppers Vertical + title: Vertical Stepper component + description: The vertical stepper component is a navigation element that guides users through a sequence of steps. + keywords: vertical stepper, vuetify vertical stepper component, vue vertical stepper component +related: + - /components/buttons/ + - /components/icons/ + - /styles/transitions/ +features: + report: true +--- + +# Vertical Steppers + +The `v-stepper-vertical` component can be used as a navigation element that guides users through a sequence of steps. + + + +::: warning + +This feature requires [v3.6.5](/getting-started/release-notes/?version=v3.6.5) + +::: + +## Installation + +Labs components require a manual import and installation of the component. + +```js { resource="src/plugins/vuetify.js" } +import { VStepperVertical } from 'vuetify/labs/VStepperVertical' + +export default createVuetify({ + components: { + VStepperVertical, + }, +}) +``` + +## Usage + +Vertical steppers allow users to complete a series of actions in step order. + + + + + +## API + +| Component | Description | +| - | - | +| [v-stepper-vertical](/api/v-stepper-vertical/) | Primary Component | + + + +### Guide + +The `v-stepper-vertical` is the vertical variant of the [v-stepper](/components/steppers/) component. It also extends functionality of [v-expansion-panels](/components/expansion-panels/). + +#### Slots + +The `v-stepper-vertical` component has several slots for customization. + +##### Actions + +Customize the flow of your stepper by hooking into the available **prev** and **next** slots. + + diff --git a/packages/docs/src/pages/en/components/virtual-scroller.md b/packages/docs/src/pages/en/components/virtual-scroller.md new file mode 100644 index 0000000..6f8cf90 --- /dev/null +++ b/packages/docs/src/pages/en/components/virtual-scroller.md @@ -0,0 +1,93 @@ +--- +meta: + nav: Virtual scrollers + title: Virtual scroll component + description: The Virtual scroll component is a container that renders only visible elements. It is useful when you need to display large amounts of uniform data. + keywords: virtual scroll, vuetify virtual scroll component, vue virtual scroll component, v-virtual-scroll component +related: + - /components/lists/ + - /components/data-tables/virtual-tables/ + - /components/combobox/ +features: + github: /components/VVirtualScroller/ + label: 'C: VVirtualScroller' + report: true +--- + +# Virtual scrollers + +The `v-virtual-scroll` component displays a virtual, _infinite_ list. It supports dynamic height and scrolling vertically and is a good alternative to pagination. + +![Virtual scroll Entry](https://cdn.vuetifyjs.com/docs/images/components/v-virtual-scroll/v-virtual-scroll-entry.png) + + + +::: success +This feature was introduced in [v3.2.0 (Orion)](/getting-started/release-notes/?version=v3.2.0) +::: + +## Usage + +The virtual scroller displays just enough records to fill the viewport and uses the existing component, rehydrating it with new data. + + + + + +## API + +| Component | Description | +| - | - | +| [v-virtual-scroll](/api/v-virtual-scroll/) | Primary Component | + + + +## Anatomy + +The `v-virtual-scroll` component contains only a default slot with no styling options. It is typically used with large collections of [v-list-item](/components/lists/)s. + +![Virtual scroll Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-virtual-scroll/v-virtual-scroll-anatomy.png) + +| Element / Area | Description | +| - | - | +| 1. Container | The rendered content area from the provided **items** prop | + +## Guide + +The `v-virtual-scroll` allows you to display thousands of records on a single page without the performance hit of actually showing all of them at once. `v-virtual-scroll` is devoid of styling and pairs well with components such as [v-card](/components/cards/) to provide a better visual experience. + +### Props + +The `v-virtual-scroll` component has a small API mainly used to configure the root and item height. + +#### Height + +The `v-virtual-scroll` component does not have any initial height set on itself. + +The following code snippet uses the **height** prop: + + + +Another way of making sure that the component has height is to place it inside an element with `display: flex`. + + + +#### Item Height + +For lists where the item height is static and uniform for all items, it's recommended that you define a specific **item-height**. This value is used for `v-virtual-scroll`'s calculations. + + + +If your items are not of a uniform size, omit the **item-height** prop to have `v-virtual-scroll` dynamically calculate each item. + + + +### Examples + +The following is a collection of `v-virtual-scroll` examples that demonstrate how different the properties work in an application. + +#### User Directory + +The v-virtual-scroll component can render an large amount of items by rendering only what it needs to fill the scroller’s viewport. + + diff --git a/packages/docs/src/pages/en/components/windows.md b/packages/docs/src/pages/en/components/windows.md new file mode 100644 index 0000000..09fee86 --- /dev/null +++ b/packages/docs/src/pages/en/components/windows.md @@ -0,0 +1,80 @@ +--- +meta: + nav: Windows + title: Window component + description: The window component is a wrapper container that allows transitioning between content. It serves as the baseline for tabs and carousels. + keywords: windows, vuetify window component, vue window component +related: + - /components/carousels/ + - /components/sheets/ + - /components/tabs/ +features: + github: /components/VWindow/ + label: 'C: VWindow' + report: true +--- + +# Windows + +The `v-window` component provides the baseline functionality for transitioning content from one pane to another. Other components such as `v-tabs`, `v-carousel` and `v-stepper` utilize this component at their core. + + + +## Usage + +Designed to easily cycle through content, `v-window` provides a simple interface to create custom implementations. + + + + + +## API + +| Component | Description | +| - | - | +| [v-window](/api/v-window/) | Primary Component | +| [v-window-item](/api/v-window-item/) | Sub-component used to display a single window item | + + + +## Examples + +### Props + +#### Show arrows + +By default no arrows are displayed. You can change this by adding the **show-arrows** prop. If you set the prop value to `"hover"`, they will only show when you mouse over the window. + + + +#### Reverse + +The **reverse** prop will reverse the transitions + + + +#### Direction + +You can change the transition to vertical using the **direction** prop + + + +#### Customized arrows + +Arrows can be customized by using **prev** and **next** slots. + + + +### Misc + +#### Account creation + +Create rich forms with smooth animations. `v-window` automatically tracks the current selection index to change the transition direction. + + + +#### Onboarding + +`v-window` makes it easy to create custom components such as a differently styled stepper. + + diff --git a/packages/docs/src/pages/en/directives/click-outside.md b/packages/docs/src/pages/en/directives/click-outside.md new file mode 100644 index 0000000..f425ae5 --- /dev/null +++ b/packages/docs/src/pages/en/directives/click-outside.md @@ -0,0 +1,45 @@ +--- +meta: + nav: Click outside + title: Click outside directive + description: The v-click-outside directive calls a function when something outside of the target element is clicked on., + keywords: click outside, click directive, vue click directive, vuetify click directives +related: + - /components/dialogs/ + - /components/navigation-drawers/ + - /directives/intersect/ +--- + +# Click outside + +The `v-click-outside` directive calls a function when something outside of the target element is clicked on. This is used internally by components like `v-menu` and `v-dialog`. + + + + + +## Usage + +The `v-click-outside` directive allows you to provide a handler to be invoked when the user clicks outside of the target element. + + + +## API + + + +## Examples + +### Options + +#### Close conditional + +Optionally provide a `closeConditional` handler that returns `true` or `false`. This function determines whether the outside click function is invoked or not. + + + +#### Include + +Optionally provide an `include` function in the `options` object that returns an array of `HTMLElement`s. This function determines which additional elements that the click must be outside of, for the handler to be called. + + diff --git a/packages/docs/src/pages/en/directives/intersect.md b/packages/docs/src/pages/en/directives/intersect.md new file mode 100644 index 0000000..6139d0d --- /dev/null +++ b/packages/docs/src/pages/en/directives/intersect.md @@ -0,0 +1,43 @@ +--- +meta: + nav: Intersection observer + title: Intersection observer directive + description: The intersection observer directive utilizes the Intersection observer API. It allows you to determine when elements are visible on the screen. + keywords: intersect, vuetify intersect directive, intersection observer directive +related: + - /components/cards/ + - /components/images/ + - /components/text-fields/ +--- + +# Intersection observer + +The `v-intersect` directive utilizes the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). It provides an easy-to-use interface for detecting when elements are visible within the user's viewport. This is also used for the [v-lazy](/components/lazy) component. + + + + + +## Usage + +Scroll the window and watch the colored dot. Notice as the [v-card](/components/cards) comes into view that it changes from error to success. + + + +## API + +| Directive | Description | +|--------------------------------------------|-------------------------------------| +| [v-intersect](/api/v-intersect-directive/) | The intersection observer directive | + + + +## Examples + +### Props + +#### Options + +The `v-intersect` directive accepts options. Available options can be found in the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Below is an example using the `threshold` option. + + diff --git a/packages/docs/src/pages/en/directives/mutate.md b/packages/docs/src/pages/en/directives/mutate.md new file mode 100644 index 0000000..a0bc5e3 --- /dev/null +++ b/packages/docs/src/pages/en/directives/mutate.md @@ -0,0 +1,160 @@ +--- +meta: + nav: Mutation observer + title: Mutation observer directive + description: The mutation observer directive utilizes the Mutation observer API. It allows you to invoke a callback when targeted elements are updated. + keywords: mutate, vuetify mutate directive, mutation observer directive, mutation observer +related: + - /components/sheets/ + - /components/images/ + - /directives/intersect/ +--- + +# Mutation observer + +The `v-mutate` directive utilizes the [Mutation Observer API](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). It provides an easy to use interface for detecting when elements are updated. + + + + + +## Usage + +`v-mutate` is a simple interface for the [Mutation Observer API](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) that is implemented with [Vue directives](https://v3.vuejs.org/api/directives.html). There are two main ways to alter `v-mutate`'s options; with directive modifiers using period notation, or with a custom options object. The following table contains information on the available directive modifiers: + +| Modifier | Default | Description | +| ------------ | ----------- | ----------- | +| `.attr` | `true` | The [attr](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes) modifier monitors target node's attribute changes | +| `.char` | `true` | The [char](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData) modifier monitors changes to target node's character data (and, its descendants if `.sub` is `true`) | +| `.child` | `true` | The [child](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList) modifier monitors for the addition or removal of child nodes (and, its descendants if `.sub` is `true`) | +| `.sub` | `true` | The [sub](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/subtree) modifier extends all monitoring to the entire subtree of target node | +| `.once` | `undefined` | The [once](#once) modifier invokes the user provided callback one time and disconnects the observer | +| `.immediate` | `undefined` | The [immediate](#immediate) modifier invokes the user provided callback on _mounted_ and does not effect `.once` | + +By default, `v-mutate` enables `.attr`, `.char`, `.child`, and `.sub` unless you manually apply one; in which case the undefined options are set to false: + +```html { resource="Component.vue" } + +``` + +In addition to the _modifier_ syntax, the `v-mutate` directive is configurable via a custom object containing a **handler** and **options** key. The following example demonstrates how both processes achieve the same result: + +```html { resource="Component.vue" } + + + +``` + +::: warning + When using custom options, it's recommended to use the `.sub` modifier. This extends mutation monitoring to all descendants of the target element. +::: + +### Once + +There may be times where your callback should only fire once. In these scenarios, use the **once** option to disconnect the observer after the first detected mutation. In the next example, we bind data value _content_ to 2 separate [v-card](/components/cards/) components and an `input`; then track the number of mutations that occur as we type: + +```html { resource="Component.vue" } + + + +``` + +When the value of content changes, both cards immediately call _onMutate_ and iterate the value of the _mutations_ data value. Because the second card is using the **once** modifier, it automatically unbinds its observer after the first change to _content_. + +### Immediate + +Unlike the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver), the provided callback is **not** immediately invoked when a Mutation Observer is created. Vuetify normalizes this behavior with the **immediate** option. In the following example, the `v-mutate` directive invokes the _onMutate_ method when the element is initially mounted in the DOM **and** with every mutation; based upon the provided options. + +```html { resource="Component.vue" } + + + +``` + +::: info + The **immediate** callback is not counted as a mutation and does not trigger the observer to disconnect when using **once**. +::: + +## API + +| Directive | Description | +|--------------------------------------|---------------------------------| +| [v-mutate](/api/v-mutate-directive/) | The mutation observer directive | + + + +## Examples + + + + diff --git a/packages/docs/src/pages/en/directives/resize.md b/packages/docs/src/pages/en/directives/resize.md new file mode 100644 index 0000000..dd98fc3 --- /dev/null +++ b/packages/docs/src/pages/en/directives/resize.md @@ -0,0 +1,33 @@ +--- +meta: + nav: Resize + title: Resize directive + description: The resize directive provides the ability to conditionally invoke functions when the screen is resized. + keywords: resize, vuetify resize directive, vue resize directive, window resize directive +related: + - /features/display-and-platform/ + - /components/grids/ + - /styles/flex/ +--- + +# Resize directive + +The `v-resize` directive can be used for calling specific functions when the window resizes. + + + + + +## Usage + +Resize your window and observe the values change.. + + + +## API + +| Directive | Description | +|--------------------------------------|----------------------| +| [v-resize](/api/v-resize-directive/) | The resize directive | + + diff --git a/packages/docs/src/pages/en/directives/ripple.md b/packages/docs/src/pages/en/directives/ripple.md new file mode 100644 index 0000000..702a1f1 --- /dev/null +++ b/packages/docs/src/pages/en/directives/ripple.md @@ -0,0 +1,63 @@ +--- +meta: + nav: Ripple + title: Ripple directive + description: The ripple directive adds touch and click feedback to any element in the form of a water ripple. + keywords: ripples, ink, vuetify ripple directive, vue ripple directive +related: + - /components/buttons/ + - /components/expansion-panels/ + - /styles/transitions/ +--- + +# Ripple directive + +The `v-ripple` directive is used to show action from a user. It can be applied to any block level element. Numerous components come with the ripple directive built in, such as the `v-btn`, `v-tabs-item` and many more. + + + + + +## Usage + +Basic ripple functionality can be enabled just by using `v-ripple` directive on a component or an HTML element + + + +## API + +| Directive | Description | +|--------------------------------------|----------------------| +| [v-ripple](/api/v-ripple-directive/) | The ripple directive | + + + +## Examples + +### Propagation + +If multiple elements have the ripple directive applied, only the inner one will show the effect. This can also be done without having a visible ripple by using `v-ripple.stop` to prevent ripples in the outer element if the inner element is clicked on. `v-ripple.stop` will not actually stop propagation of the mousedown/touchstart events unlike other workarounds. + + + +### Options + +#### Center + +When a `center` option is used ripple will always originate from the center of the target. + + + +### Misc + +#### Custom color + +Using a helper class, you can change the color of the ripple. + + + +#### Ripple in components + +Some components provide the `ripple` prop that allows you to control the ripple effect. You can turn it off or customize the behavior by using `class` or `center` options. + + diff --git a/packages/docs/src/pages/en/directives/scroll.md b/packages/docs/src/pages/en/directives/scroll.md new file mode 100644 index 0000000..6e30fb6 --- /dev/null +++ b/packages/docs/src/pages/en/directives/scroll.md @@ -0,0 +1,49 @@ +--- +meta: + nav: Scroll + title: Scroll directive + description: The scroll directive gives you the ability to conditionally invoke methods when the screen or an element are scrolled. + keywords: scroll, vuetify scroll directive, vue scroll directive, window scroll directive +related: + - /components/app-bars/ + - /components/bottom-navigation/ + - /directives/touch/ +--- + +# Scroll directive + +The `v-scroll` directive allows you to provide callbacks when the window, specified target or element itself (with `.self` modifier) is scrolled. + + + + + + + +## API + +| Directive | Description | +|--------------------------------------|----------------------| +| [v-scroll](/api/v-scroll-directive/) | The scroll directive | + + + +## Examples + +### Options + +#### Self + +`v-scroll` targets the `window` by default but can also watch the element it's being bound to. In the following example we use the **self** modifier, `v-scroll.self`, to watch the [`v-card`](/components/cards) element specifically. This causes the method `onScroll` to invoke as you scroll the card contents; incrementing the counter. + + + +#### Target + +For a more fine tuned approach, you can designate the target to bind the scroll event listener. + + diff --git a/packages/docs/src/pages/en/directives/tooltip.md b/packages/docs/src/pages/en/directives/tooltip.md new file mode 100644 index 0000000..312dd5e --- /dev/null +++ b/packages/docs/src/pages/en/directives/tooltip.md @@ -0,0 +1,56 @@ +--- +emphasized: true +meta: + nav: Tooltip + title: Tooltip directive + description: The Tooltip directive is an easy to use implementation of VTooltip. + keywords: Tooltip, vuetify Tooltip directive, vue Tooltip directive, mobile Tooltip directive +related: + - /components/navigation-drawers/ + - /components/slide-groups/ + - /components/windows/ +features: + report: true +--- + +# Tooltip directive + +The `v-tooltip` directive is a shorthand way of adding tooltips to elements in your application. + + + + + +## Usage + +The `v-tooltip` directive makes it easy to add a tooltip to any element in your application. It is a wrapper around the `v-tooltip` component. + + + +## API + +| Directive | Description | +|------------------------------------|---------------------| +| [v-tooltip](/api/v-tooltip-directive/) | The Tooltip directive | + +## Guide + +The `v-tooltip` directive is a simple way to add a tooltip to any element in your application. It is a wrapper around the `v-tooltip`. + +### Args + +The `v-tooltip` directive has a number of args that can be used to customize the behavior of the tooltip. + + + +### Modifiers + +Modifiers are values that are passed to the `v-tooltip` component. This is an easy way to make small modifications to boolean [v-tooltip](/api/v-tooltip/) props. + + + +### Object literals + +The `v-tooltip` directive can also accept an object literal as a value. This is useful when you need to pass multiple props to the `v-tooltip` component. + + diff --git a/packages/docs/src/pages/en/directives/touch.md b/packages/docs/src/pages/en/directives/touch.md new file mode 100644 index 0000000..018dc96 --- /dev/null +++ b/packages/docs/src/pages/en/directives/touch.md @@ -0,0 +1,33 @@ +--- +meta: + nav: Touch + title: Touch directive + description: The touch directive provides an interface for responding to various user touch actions. + keywords: touch, vuetify touch directive, vue touch directive, mobile touch directive +related: + - /components/navigation-drawers/ + - /components/slide-groups/ + - /components/windows/ +--- + +# Touch directive + +The `v-touch` directive allows you to capture swipe gestures and apply directional callbacks. + + + + + +## Usage + +On a mobile device, try swiping in various directions. + + + +## API + +| Directive | Description | +|------------------------------------|---------------------| +| [v-touch](/api/v-touch-directive/) | The touch directive | + + diff --git a/packages/docs/src/pages/en/features/accessibility.md b/packages/docs/src/pages/en/features/accessibility.md new file mode 100644 index 0000000..c16ffa8 --- /dev/null +++ b/packages/docs/src/pages/en/features/accessibility.md @@ -0,0 +1,86 @@ +--- +meta: + title: Accessibility (a11y) + description: See examples and the advantages of having accessibility (a11y) support in Vuetify components. + keywords: a11y, accessibility, usability +related: + - /features/internationalization/ + - /components/menus/ + - /components/lists/ +features: + report: true +--- + +# Accessibility (a11y) + +Web accessibility **(a11y for short)**, is the inclusive practice of ensuring there are no barriers that prevent the interaction with, or access to, websites on the World Wide Web by people with disabilities. Vuetify components are built to provide keyboard interactions for all mouse-based actions and utilize HTML5 semantic elements where applicable. + + + + + +## Activator slots + +Vuetify uses activator slots for many components such as `v-menu`, `v-dialog` and more. In some instances these activator elements should have specific a11y attributes that associate them with their corresponding content. In order to achieve this, we pass down the necessary a11y options through the slots scope. + +```html + + + +``` + +When the activator element is rendered, it will now contain the bound a11y attributes: + +```html + + + +``` + +## Focus management and keyboard interactions + +Beyond attributes, components such as `v-menu` also support interaction by pressing ↑ and ↓ for navigating between options. + +### v-menu + +When inside of a `v-menu`, `v-list-item` will be automatically configured to have a role of **menuitem**. Navigate to the [Menu](/components/menus) for more information on the components features. + + + +## Additional Resources + +While Vuetify attempts to make a11y as easy as possible in your application, there are times where additional information is needed. Below you can find a list of helpful resources. + +- [W3C Web Accessibility Initiative](https://www.w3.org/WAI/) +- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) +- [The A11Y Project](https://a11yproject.com/)" diff --git a/packages/docs/src/pages/en/features/aliasing.md b/packages/docs/src/pages/en/features/aliasing.md new file mode 100644 index 0000000..f072e21 --- /dev/null +++ b/packages/docs/src/pages/en/features/aliasing.md @@ -0,0 +1,88 @@ +--- +meta: + title: Aliasing + description: Description + keywords: keywords +related: +- /features/blueprints/ +- /features/global-configuration/ +- /features/treeshaking/ +features: + report: true +--- + +# Aliasing & virtual components + +Create virtual components that extend built-in Vuetify components using custom aliases. + + + + + +## Usage + +Aliasing allows you to use built-in Vuetify components as a baseline for your custom implementations. To get started, import the component that you want to extend. Provide it as the value of a unique key that is used for the virtual component's name: + +```js { resource="src/plugins/vuetify.js"} +import { createVuetify } from 'vuetify' +import { VBtn } from 'vuetify/components/VBtn' + +export default createVuetify({ + aliases: { + MyButton: VBtn, + MyButtonAlt: VBtn, + }, +}) +``` + +::: info +Although treeshaking is automatically applied during production builds, it is advantageous to import components by specifying their full path in development mode. For instance, using `vuetify/components/VBtn` instead of `vuetify/components` ensures that the compiler loads fewer components, thus optimizing performance. +::: + +## Virtual component defaults + +Virtual components have access to the Vuetify [Global configuration](/features/global-configuration/). Default settings for aliases are defined the same as built-in components with no extra steps required by you. In the following example, **MyButton** uses [v-btn props](/api/v-btn/#props) to change it's default **variant**: + +```js { resource="src/plugins/vuetify.js"} +import { createVuetify } from 'vuetify' +import { VBtn } from 'vuetify/components/VBtn' + +export default createVuetify({ + aliases: { + MyButton: VBtn, + }, + defaults: { + VBtn: { variant: 'flat' }, + MyButton: { variant: 'tonal' }, + }, +}) +``` + +## Nested defaults + +Prop defaults accept component key references to apply style changes based upon component hierarchy. In the following example, [v-btn](/components/buttons/) and **MyButton** swap colors when nested within a [v-card](/components/cards/) component. + +```js { resource="src/plugins/vuetify.js"} +import { createVuetify } from 'vuetify' +import { VBtn } from 'vuetify/components/VBtn' + +export default createVuetify({ + aliases: { + MyButton: VBtn, + }, + defaults: { + MyButton: { + color: 'primary', + variant: 'tonal', + }, + VBtn: { + color: 'secondary', + variant: 'flat', + }, + VCard: { + MyButton: { color: 'secondary' }, + VBtn: { color: 'primary' }, + }, + }, +}) +``` diff --git a/packages/docs/src/pages/en/features/application-layout.md b/packages/docs/src/pages/en/features/application-layout.md new file mode 100644 index 0000000..0cd6236 --- /dev/null +++ b/packages/docs/src/pages/en/features/application-layout.md @@ -0,0 +1,82 @@ +--- +meta: + title: Application layout + description: Vuetify provides functionality to create complex layouts using components such as app bars and navigation drawers + keywords: application, layout, default layout +related: + - /components/app-bars/ + - /components/navigation-drawers/ + - /components/footers/ +features: + report: true +--- + +# Application layout + +Vuetify features an application layout system that allows you to easily create complex website designs. + + + + + +The system is built around an outside-in principle, where each application layout component reserves space for itself in one of four directions (left, right, up, down), leaving the available free space for any subsequent layout component(s) to occupy. + +The following components are compatible with the layout system: + +| Component | Description | +| - | - | +| [v-app-bar](/components/app-bars/) | A container that is used navigation, branding, search, and actions | +| [v-system-bar](/components/system-bars/) | A system bar replaces the native phone system bar | +| [v-navigation-drawer](/components/navigation-drawers/) | A persistent or temporary container that holds site navigation links | +| [v-footer](/components/footers/) | A generic component used to replace the default html footer | +| [v-bottom-navigation](/components/bottom-navigation/) | A persistent or temporary container that holds navigation links and is typically used for smaller devices | + +The final part of the layout system is the **v-main** component. Inside this is where you place your page content. It will use the remaining free space on the page after all layout components have reserved their space. + +::: info + In the following examples, **v-app** has been replaced by **v-layout**. This is because **v-app** defaults to a minimum height of `100dvh`. In your own application you would always use **v-app** for the root layout. +::: + +## Placing components + +By default, the order in which layout components will attempt to reserve space is simply the order that they appear in your markup. To illustrate this concept, see the following two examples where a single **v-app-bar** and **v-navigation-drawer** have changed places in the markup. + + + + + +As you can see, placing the **v-app-bar** before the **v-navigation-drawer** means that it will use the full width of the screen. When it it placed after the **v-navigation-drawer**, it will only use the free space left over. + +Some layout components accept a **location** prop with which you can place the component in the layout. In the example below, we use two **v-navigation-drawer** components, one on each side of the application. + + + +## Complex layouts + +Let's create a more complex layout to show the flexibility of the system. In the following example we have re-created the general layout of the Discord application. This example also demonstrates that layout components accept either a **width** or **height** prop, and that multiple components of the same type can be stacked in the same position. + + + +## Dynamic layouts and order + +In most cases, it should be enough to simply place your layout components in the correct order in your markup to achieve the layout you want. There are however a couple of scenarios where this might not be possible. One of these is if you want to change the order of your layout components dynamically. + +To solve this you can explicitly set the layout order by using the **order** prop. Explore the example below to see what happens when using the prop. By toggling the switch, you change the order of the app-bar to `-1`, thus putting it above the navigation-drawer in the layout ordering. + +All layout components have a default order of `0`. Layout components with the same order will be ordered as they appear in the markup. + + + +## Accessing layout information + +The layout system exposes a function `getLayoutItem` that allows you to get size and position information about a specific layout component in your markup. To use it, you will need to add a **name** prop to the layout component, and give it a unique value. You can either access the method by using a ref on **v-app**, or by using the **useLayout** composable. + + + +::: warning + You will not be able to directly use the composable in the same component where you are rendering the **v-app** component. The call to **useLayout** must happen in a child component, so that the layout can be properly injected. +::: + + + +The combined size of all layout components is also available under `layout.mainRect`. This is used internally by the **v-main** component to determine the size of the main content area. diff --git a/packages/docs/src/pages/en/features/blueprints.md b/packages/docs/src/pages/en/features/blueprints.md new file mode 100644 index 0000000..b21f855 --- /dev/null +++ b/packages/docs/src/pages/en/features/blueprints.md @@ -0,0 +1,87 @@ +--- +meta: + title: Blueprints + description: Setup your entire application with pre-made or custom styling and designs + keywords: vuetify blueprints, vuetify presets, vuetify schemas +related: + - /features/global-configuration/ + - /features/theme/ + - /features/display-and-platform/ +features: + report: true +--- + +# Blueprints + +Vuetify blueprints are a new way to pre-configure your entire application with a completely unique design system. + + + + + +## Usage + +Blueprints are a collection of Vuetify configuration options that assign default values for components, colors, language, and more. Open your project's `vuetify.js` file and import the desired blueprint. The follow example demonstrates how to apply the [Material Design 1](#material-design-1) preset: + +```js { resource=plugins/vuetify.js } +import { createVuetify } from 'vuetify' +import { md1 } from 'vuetify/blueprints' + +export default createVuetify({ + blueprint: md1, +}) +``` + +### White-label concept + +While Vuetify is built under the guise of Google's [Material Design](https://material.io) specification, it is still flexible enough to be used as the foundation for any design system. By default, Vuetify components have no color and are **white-label** in nature. A white-label product is a product or service produced by one company that other companies rebrand to make it appear as if they had made it. + +## Available blueprints + +| Name | Release date | Status | Resource | +| - | - | - | - | +| [Material Design 1](#material-design-1) | 2014 | ✅ Available | [Specification](https://m1.material.io) | +| [Material Design 2](#material-design-2) | 2017 | ✅ Available | [Specification](https://m2.material.io) | +| [Material Design 3](#material-design-3) | 2022 | ✅ Available | [Specification](https://m3.material.io) | + +::: error + +Blueprints require the use of utility classes to properly function. + +::: + +### Material Design 1 + +Released in 2014, the original Material Design specification aimed to create a visual language that combined principles and good design with technical and scientific innovation. + +```javascript { resource=plugins/vuetify.js } +import { md1 } from 'vuetify/blueprints' +``` + +**Preview:** + + + +### Material Design 2 + +Released in 2017, version 2 of Google's design specification received a massive upgrade with new components, guidelines, and improved on the principles that made the first system so successful. + +```javascript { resource=plugins/vuetify.js } +import { md2 } from 'vuetify/blueprints' +``` + +**Preview:** + + + +### Material Design 3 + +Material Design 3 is currently in active development and represents the next chapter of Google's design system. + +```javascript { resource=plugins/vuetify.js } +import { md3 } from 'vuetify/blueprints' +``` + +**Preview:** + + diff --git a/packages/docs/src/pages/en/features/dates.md b/packages/docs/src/pages/en/features/dates.md new file mode 100644 index 0000000..41e9585 --- /dev/null +++ b/packages/docs/src/pages/en/features/dates.md @@ -0,0 +1,193 @@ +--- +meta: + title: Dates + description: Vuetify has first party date support that can easily be swapped for another date library + keywords: date, datepicker, datetime, time, calendar, picker, date library +related: +- /features/blueprints/ +- /features/global-configuration/ +- /features/treeshaking/ +features: + github: /composables/date/ + label: 'E: date' + report: true +--- + +# Dates + +Easily hook up date libraries that are used for components such as Date Picker and Calendar that require date functionality. + + + + + +::: success +This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0) +::: + +## Usage + +The date composable provides a shared architecture that is used by components such as date picker and calendar. The default implementation is built using the native Date object, but can be swapped out for another date library. If no other date adapter is given, the default Vuetify one is used. + +Within your application, import the **useDate** function and use it to access the date composable. + +```html { resource="src/views/Date.vue" } + +``` + +::: info + +For a list of all supported date adapters, visit the [date-io](https://github.com/dmtrKovalenko/date-io#projects) project repository. + +::: + +### Format options + +The date composable supports the following date formatting options: + +| Format Name | Format Output | +| - | - | +| fullDate | "Jan 1, 2024" | +| fullDateWithWeekday | "Tuesday, January 1, 2024" | +| normalDate | "1 January" | +| normalDateWithWeekday | "Wed, Jan 1" | +| shortDate | "Jan 1" | +| year | "2024" | +| month | "January" | +| monthShort | "Jan" | +| monthAndYear | "January 2024" | +| monthAndDate | "January 1" | +| weekday | "Wednesday" | +| weekdayShort | "Wed" | +| dayOfMonth | "1" | +| hours12h | "11" | +| hours24h | "23" | +| minutes | "44" | +| seconds | "00" | +| fullTime | "11:44 PM" for US, "23:44" for Europe | +| fullTime12h | "11:44 PM" | +| fullTime24h | "23:44" | +| fullDateTime | "Jan 1, 2024 11:44 PM" | +| fullDateTime12h | "Jan 1, 2024 11:44 PM" | +| fullDateTime24h | "Jan 1, 2024 23:44" | +| keyboardDate | "02/13/2024" | +| keyboardDateTime | "02/13/2024 23:44" | +| keyboardDateTime12h | "02/13/2024 11:44 PM" | +| keyboardDateTime24h | "02/13/2024 23:44" | + +The following example shows how to use the date composable to format a date string: + +```html { resource="src/views/Date.vue" } + +``` + +## API + +| Feature | Description | +| - | - | +| [useDate](/api/use-date/) | The date composable is used by components that require date functionality | + + + +### Adapter + +The built-in date adapter implements a subset of functionality from the [DateIOFormats](https://github.com/dmtrKovalenko/date-io/blob/master/packages/core/IUtils.d.ts) interface. Because of this, it's easy to swap in any date library supported by [date-io](https://github.com/dmtrKovalenko/date-io). + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import LuxonAdapter from "@date-io/luxon" + +export default createVuetify({ + date: { + adapter: LuxonAdapter, + }, +}) +``` + +For TypeScript users, an interface is also exposed for [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation): + +```ts { resource="src/plugins/vuetify.js" } +export default createVuetify({ + ... +}) + +declare module 'vuetify' { + namespace DateModule { + interface Adapter extends LuxonAdapter {} + } +} +``` + +### Localization + +The date composable will use the current vuetify [locale](/features/internationalization/) for formatting and getting the first day of the week. These do not always line up perfectly, so a list of aliases can be provided to map language codes to locales. The following configuration will look up `en` keys for translations, but use `en-GB` for date formatting: + +```js { resource="src/plugins/vuetify.js" } +export default createVuetify({ + locale: { + locale: 'en', + }, + date: { + locale: { + en: 'en-GB', + }, + }, +}) +``` + +#### Create your own + +To create your own date adapter, implement the **DateAdapter** interface: + +```ts +import type { DateAdapter } from 'vuetify/labs' + +export interface DateAdapter { + date (value?: any): TDate | null + format (date: TDate, formatString: string): string + toJsTDate (value: TDate): TDate + parseISO (date: string): TDate + toISO (date: TDate): string + + startOfDay (date: TDate): TDate + endOfDay (date: TDate): TDate + startOfMonth (date: TDate): TDate + endOfMonth (date: TDate): TDate + startOfYear (date: TDate): TDate + endOfYear (date: TDate): TDate + + isBefore (date: TDate, comparing: TDate): boolean + isAfter (date: TDate, comparing: TDate): boolean + isEqual (date: TDate, comparing: TDate): boolean + isSameDay (date: TDate, comparing: TDate): boolean + isSameMonth (date: TDate, comparing: TDate): boolean + isValid (date: any): boolean + isWithinRange (date: TDate, range: [TDate, TDate]): boolean + + addDays (date: TDate, amount: number): TDate + addMonths (date: TDate, amount: number): TDate + + getYear (date: TDate): number + setYear (date: TDate, year: number): TDate + getDiff (date: TDate, comparing: TDate | string, unit?: string): number + getWeekArray (date: TDate): TDate[][] + getWeekdays (): string[] + getMonth (date: TDate): number + setMonth (date: TDate, month: number): TDate + getNextMonth (date: TDate): TDate +} +``` diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md new file mode 100644 index 0000000..ac24714 --- /dev/null +++ b/packages/docs/src/pages/en/features/display-and-platform.md @@ -0,0 +1,351 @@ +--- +meta: + title: Display & Platform + description: Access display viewport information using the Vuetify Breakpoint composable. + keywords: breakpoints, grid breakpoints, platform details, screen size, display size +related: + - /directives/resize/ + - /styles/display/ + - /styles/text-and-typography/ +features: + report: true +--- + +# Display & Platform + +The display composable provides a multitude of information about the current device + + + + + +## Usage + +The **useDisplay** composable provides information on multiple aspects of the current device. + +This enables you to control various aspects of your application based upon the window size, device type, and SSR state. This composable works in conjunction with [grids](/components/grids/) and other responsive utility classes (e.g. [display](/styles/display/)). + +The following shows how to access the application's display information: + +```html { resource="Composition.vue" } + +``` + +If you are still using the Options API, you can access the display information on the global **$vuetify** variable. Note that refs are unwrapped here, so you don't need `.value`. + +```html { resource="Options.vue" } + +``` + +## API + +| Component | Description | +| - | - | +| [useDisplay](/api/use-display/) | Composable | + +## Breakpoints and Thresholds + +Threshold values generate the ranges used for various breakpoints seen throughout vuetify and the `useDisplay` composable. The system uses an "and up" mentality starting from `xs` at 0px. The default threshold values are displayed below. + + + +These ranges power the various additional `AndUp` / `AndDown` properties accessible in `useDisplay` + +```ts +{ + smAndDown: boolean // < 960px + smAndUp: boolean // > 600px + mdAndDown: boolean // < 1280px + mdAndUp: boolean // > 960px + lgAndDown: boolean // < 1919px + lgAndUp: boolean // > 1280px + xlAndDown: boolean // < 2559px + xlAndUp: boolean // > 1920px +} +``` + +## Options + +The **useDisplay** composable has several configuration options, such as the ability to define custom values for breakpoints. + +For example, the **thresholds** option modifies the values used for viewport calculations. The following snippet overrides **thresholds** values *xs* through *lg* and sets **mobileBreakpoint** to `sm`. + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify} from 'vuetify' + +export default createVuetify({ + display: { + mobileBreakpoint: 'sm', + thresholds: { + xs: 0, + sm: 340, + md: 540, + lg: 800, + xl: 1280, + }, + }, +}) +``` + +::: info + The **mobileBreakpoint** option accepts numbers and breakpoint keys. +::: + +## Examples + +In the following example, we use a switch statement and the current breakpoint name to modify the **height** property of the [v-card](/components/cards/) component: + +```html { resource="Component.vue" } + + + +``` + +### Interface + +```ts +{ + // Breakpoints + xs: boolean // 0 - 595 + sm: boolean // 600 - 959 + md: boolean // 960 - 1279 + lg: boolean // 1280 - 1919 + xl: boolean // > 1920 + xxl: boolean + smAndDown: boolean // < 960 + smAndUp: boolean // > 600 + mdAndDown: boolean // < 1280 + mdAndUp: boolean // > 960 + lgAndDown: boolean // < 1919 + lgAndUp: boolean // > 1280 + xlAndDown: boolean + xlAndUp: boolean // < 1920 + + // true if screen width < mobileBreakpoint + mobile: boolean + mobileBreakpoint: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' + + // Current breakpoint name (e.g. 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl') + name: string + + // The current value of window.innerHeight and window.innerWidth + height: number + width: number + + // Device userAgent information + platform: { + android: boolean + ios: boolean + cordova: boolean + electron: boolean + chrome: boolean + edge: boolean + firefox: boolean + opera: boolean + win: boolean + mac: boolean + linux: boolean + touch: boolean + ssr: boolean + } + + // The values used to make Breakpoint calculations + thresholds: { + xs: number + sm: number + md: number + lg: number + xl: number + xxl: number + } +} +``` + +## Using Setup + +Use the **useDisplay** composable alongside Vue 3's `setup` function to harness the power of the [Composition API](https://v3.vuejs.org/guide/composition-api-setup.html). In this example we show how to toggle the **fullscreen** property of `v-dialog` when the mobile breakpoint is active. + +```html { resource="Component.vue" } + + + +``` + +### Breakpoint conditionals + +Breakpoint and conditional values return a `boolean` that is derived from the current viewport size. Additionally, the **breakpoint** composable follows the [Vuetify Grid](/components/grids) naming conventions and has access to properties such as **xlOnly**, **xsOnly**, **mdAndDown**, and many others. In the following example we use the `setup` function to pass the _xs_ and _mdAndUp_ values to our template: + +```html { resource="Component.vue" } + + + +``` + +Using the _dynamic_ display values, we are able to adjust the minimum height of [v-sheet](/components/sheets/) to `300` when on the _medium_ breakpoint or greater and only show rounded corners on _extra small_ screens: + +## Component Mobile Breakpoints + +::: success +This feature was introduced in [v3.4.0 (Blackguard)](/getting-started/release-notes/?version=v3.4.0) +::: + +Some components within Vuetify have a **mobile-breakpoint** property which allows you to override the default value. These components reference the global mobileBreakpoint value that is generated at runtime using the provided options in the `vuetify.js` file. + +The following components have built in support for the **mobile-breakpoint** property: + +| Component | +| - | +| [v-banner](/components/banners/) | +| [v-navigation-drawer](/components/navigation-drawers/) | +| [v-slide-group](/components/slide-groups/) | + +By default, **mobileBreakpoint** is set to **lg**, which means that if the window is less than _1280_ pixels in width (which is the default value for the **lg** threshold), then the **useDisplay** composable will update its **mobile** value to `true`. + +For example, the [v-banner](/components/banners/) component implements different styling when its mobile versus desktop. In the following example, The first banner uses the global **mobile-breakpoint** value of **lg** while the second overrides this default with **580**: + +```html { resource="Component.vue" } + + + +``` + +If the screen width is 1024 pixels, the second banner would not convert into its mobile state. + +### useDisplay overrides + +Specify a custom **mobileBreakpoint** value directly to the [useDisplay](/api/use-display/) composable and override the global value. In the following example we use a custom mobileBreakpoint value of **580**: + +```html { resource="Component.vue" } + +``` + +If you supply a value for the **name** argument, utilize the **displayClasses** property to apply the appropriate classes to your component. In the next example, the following classes would be applied to the root element of the component: + +```html { resource="Component.vue" } + + + +``` + +If you leave out the name argument, displayClasses will use the default name set by Vue. The following example uses the default name of the local component: + +```html { resource="AppDrawer.vue" } + + + +``` diff --git a/packages/docs/src/pages/en/features/global-configuration.md b/packages/docs/src/pages/en/features/global-configuration.md new file mode 100644 index 0000000..2a8c3c4 --- /dev/null +++ b/packages/docs/src/pages/en/features/global-configuration.md @@ -0,0 +1,359 @@ +--- +meta: + title: Global configuration + description: Vuetify.config is an object containing global configuration options that modify the bootstrapping of your project. + keywords: vuetify config, global config, global vuetify config, configure vuetify options +related: + - /features/accessibility/ + - /features/treeshaking/ + - /features/blueprints/ +features: + report: true +--- + +# Global configuration + +Vuetify allows you to set default prop values globally or per component when setting up your application. Using this functionality you can for example disable **ripple** on all components, or set the default **elevation** for all sheets or buttons. + + + + + +## Setup + +Use the **defaults** property of the Vuetify configuration object to set default prop values. Here we have disabled **ripple** for all components that support it, and set the default **elevation** to `4` for all `` components. + +```js { resource="src/plugins/vuetify.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +export default createVuetify({ + defaults: { + global: { + ripple: false, + }, + VSheet: { + elevation: 4, + }, + }, +}) +``` + +## Contextual defaults + +Defaults can also be configured for components nested within other components, for example if you want to set the default **variant** for all `` components nested within a `` component: + +```js { resource="src/plugins/vuetify.js" } +createVuetify({ + defaults: { + VCard: { + VBtn: { variant: 'outlined' }, + }, + }, +}) +``` + +This is used internally by some components already: + +- `` has `variant="text"` when nested within a `` or `` +- `` has `bg-color="transparent"` when nested within a `` +- Lists, chip groups, expansion panels, tabs, and forms all use this system to propagate certain props to their children, for example `` will set the default value of `disabled` to `true` for all `` components inside it. + +[v-defaults-provider](/components/defaults-providers/) can be used to set defaults for components within a specific scope. + +## Global class and styles + +::: success +This feature was introduced in [v3.2.0 (Orion)](/getting-started/release-notes/?version=v3.2.0) +::: + +Define global classes and styles for all [built-in](/components/all/) components; including [virtual](/features/aliasing/#virtual-component-defaults) ones. This provides an immense amount of utility when building your application's design system and it reduces the amount of duplicated code in your templates. + +Let's say that you want to set the **text-transform** of all [v-btn](/components/buttons/) components to `none`, but are not interested in using [SASS variables](/features/sass-variables/). By simply adding the **style** property to a component's default values, you are able to apply custom values to all instances of said component. + +The following code example modifies the **text-transform** CSS property of all `` components: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { VBtn } from 'vuetify/components/VBtn' + +export default createVuetify({ + defaults: { + VBtn: { + style: 'text-transform: none;', + }, + }, +}) +``` + +As an alternative, apply utility classes instead to achieve the same effect: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { VBtn } from 'vuetify/components/VBtn' + +export default createVuetify({ + defaults: { + VBtn: { + class: 'text-none', + }, + }, +}) +``` + +Additionally, it works with any valid Vue value type such as objects and arrays: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { VBtn } from 'vuetify/components/VBtn' + +export default createVuetify({ + defaults: { + VBtn: { + style: [{ textTransform: 'none' }], + }, + }, +}) +``` + +::: warning + `class` and `style` cannot be used in the `global` object, only in specific components. +::: + +## Using with virtual components + +Whether you are developing a wrapper framework or just a design system for your application, [virtual components](/features/aliasing/#virtual-component-defaults) are a powerful ally. Within the Vuetify defaults system, classes and styles are treated just like regular props but instead of being overwritten at the template level, they are merged. + +For example, lets create an alias of the [v-btn](/components/buttons/) component and modify some of its default values: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { VBtn } from 'vuetify/components/VBtn' + +export default createVuetify({ + aliases: { + VBtnPrimary: VBtn, + }, + + defaults: { + VBtnPrimary: { + class: ['v-btn--primary', 'text-none'], + }, + }, +}) +``` + +Now, use `` in a template and apply a custom class: + +```html + +``` + +When compiled, the resulting HTML will contain both the globally defined classes and the custom one: + +```html + + +``` + +This is particularly useful when you have multiple variants of a component that need individual classes to target: + +```html { resource="src/components/HelloWorld.vue" } + + + +``` + +Keep in mind that virtual components do not inherit global class or styles from their extension. For example, the following Vuetify configuration uses a [v-chip](/components/chips/) as the alias for the virtual `` component. + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { VChip } from 'vuetify/components/VChip' + +export default createVuetify({ + aliases: { + VChipPrimary: VChip, + }, + + defaults: { + VChipPrimary: { + class: 'v-chip--primary', + }, + VChip: { + class: 'v-chip--custom', + }, + }, +}) +``` + +When `` is used in a template, it will **not** have the `v-chip--custom` class. + +::: warning +There are some cases where a default class or style could be unintentionally passed down to an inner component. This mostly concerns [form inputs and controls](/components/all/#form-inputs-and-controls). +::: + +## Using in custom components + +::: success +This feature was introduced in [v3.2.0 (Orion)](/getting-started/release-notes/?version=v3.2.0) +::: + +Hook into the Vuetify defaults engine and configure your custom components the same way that we do. This feature makes it super easy to homogenize functionality across your application and reduce the amount of duplicated code. + +Let's start with an example by creating a basic component that accepts a single prop: + +```html { resource="src/components/MyComponent.vue" } + + + +``` + +Now, let's add our new component to the Vuetify defaults configuration object and assign a default value to its `foo` prop: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' + +export default createVuetify({ + defaults: { + MyComponent1: { + foo: 'bar', + }, + }, +}) +``` + +Next, import the `useDefaults` composable into `MyComponent1.vue`. This function has two optional arguments: + +- `props` - The props object used to generate the component's default values +- `name` - The name of the component. This is used to reference the defaults key defined in your Vuetify configuration + +In your template, assign the return value of `defineProps` to a variable and pass it to `useDefaults`: + +```html { resource="src/components/MyComponent1.vue" } + + + +``` + +Notice that we have to explicitly use the `props` object in the template. This is because Vue automatically unwraps the values in `defineProps`. + +```diff +-
I am {{ foo }}
++
I am {{ props.foo }}
+``` + +::: info +The **name** argument is optional and is inferred from the component's name if not provided. +::: + +When `` is used in a template, it uses the default value assigned in the Vuetify config: + +```html + +``` + +### Nested defaults + +It is possible to assign nested defaults within your component chain. This provides you with countless ways to configure your application and its components. + +Let's expand on the previous [example](#using-in-custom-components) by creating a new component, `` that uses ``: + +```html { resource="src/components/MyComponent2.vue" } + + + +``` + +Now, let's add `` to the Vuetify defaults configuration object and assign a default value to `foo` prop of all nested `` components: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' + +export default createVuetify({ + defaults: { + MyComponent: { foo: 'bar' }, + + MyComponent2: { + MyComponent: { foo: 'baz' }, + } + } +}) +``` + +Head back to the `MyComponent2.vue` file and import & invoke the `useDefaults` composable: + +```html { resource="src/components/MyComponent2.vue" } + + + +``` + +Finally, add both new components to a template and inspect the output: + +```html + + + +``` + +Now, whenever `` is used within the `` component, it has a different assigned default value. diff --git a/packages/docs/src/pages/en/features/icon-fonts.md b/packages/docs/src/pages/en/features/icon-fonts.md new file mode 100644 index 0000000..c1cf2fd --- /dev/null +++ b/packages/docs/src/pages/en/features/icon-fonts.md @@ -0,0 +1,573 @@ +--- +meta: + title: Icon Fonts + description: Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options. + keywords: vue icon component, iconfont, icon libraries, vuetify icons +related: + - /components/icons + - /components/buttons + - /components/avatars +features: + report: true +--- + +# Icon Fonts + +Out of the box, Vuetify supports 4 popular icon font libraries—[Material Design Icons](https://materialdesignicons.com/), [Material Icons](https://fonts.google.com/icons), [Font Awesome 4](https://fontawesome.com/v4.7.0/) and [Font Awesome 5](https://fontawesome.com/). + + + + + +## Usage + +To change your font library, import one of the pre-defined icon sets or provide your own. + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { aliases, mdi } from 'vuetify/iconsets/mdi' + +export default createVuetify({ + icons: { + defaultSet: 'mdi', + aliases, + sets: { + mdi, + }, + }, +}) +``` + +```html + +``` + +In the above examples we import the default `mdi` icon set and its corresponding aliases. These aliases reference commonly used types of icons that are utilized by Vuetify components. + +::: info + +While it is still possible to supply the icon value through the default slot in Vuetify 3.0 (`mdi-home`), we recommend using the `icon` prop instead. + +::: + +## Installing icon fonts + +You are required to include the specified icon library (even when using the default icons from [Material Design Icons](https://materialdesignicons.com/)). This can be done by including a CDN link or importing the icon library into your application. + +::: info + +In this page "Material Icons" is used to refer to the [official google icons](https://fonts.google.com/icons) and "Material Design Icons" refers to the [extended third-party library](https://materialdesignicons.com/) + +::: + +### Material Design Icons + +This is the default icon set used by Vuetify. It supports local installation with a build process or a CDN link. The following shows how to add the CDN link to your `index.html`: + +#### MDI - CSS + +```html + +``` + +Or as a local dependency: + +::: tabs + +```bash [yarn] +yarn add @mdi/font -D +``` + +``` bash [npm] +npm install @mdi/font -D +``` + +```bash [pnpm] +pnpm add @mdi/font -D +``` + +```bash [bun] +bun add @mdi/font -D +``` + +::: + +```js { resource="src/plugins/vuetify.js" } +import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader +import { createVuetify } from 'vuetify' + +export default createVuetify({ + icons: { + defaultSet: 'mdi', // This is already the default value - only for display purposes + }, +}) +``` + +::: error + +**DO NOT** use a CDN link without specifying a package *version*. Failure to do so can result in unexpected changes to your application with new releases. + +::: + +#### MDI - JS SVG + +This is the recommended installation when optimizing your application for production, as only icons used for Vuetify components internally will be imported into your application bundle. You will need to provide your own icons for the rest of the app. + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { aliases, mdi } from 'vuetify/iconsets/mdi-svg' + +export default createVuetify({ + icons: { + defaultSet: 'mdi', + aliases, + sets: { + mdi, + }, + }, +}) +``` + +`@mdi/js` or [unplugin-icons](https://github.com/antfu/unplugin-icons) are two alternatives to get the rest of the icons that you will need in your application. + +If you want to stick with `@mdi/js`, use the SVG paths as designated in [@mdi/js](https://www.npmjs.com/package/@mdi/js) and +only import the icons that you need. + +The following example shows how to use an imported icon within a `.vue` SFC template: + +::: tabs + +```bash [yarn] +yarn add @mdi/js -D +``` + +```bash [npm] +npm install @mdi/js -D +``` + +```bash [pnpm] +pnpm add @mdi/js -D +``` + +```bash [bun] +bun add @mdi/js -D +``` + +::: + +```html + + + +``` + +Or the icons you want to use can be added as aliases to simplify reuse: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { aliases, mdi } from 'vuetify/iconsets/mdi-svg' +import { mdiAccount } from '@mdi/js' + +export default createVuetify({ + icons: { + defaultSet: 'mdi', + aliases: { + ...aliases, + account: mdiAccount, + }, + sets: { + mdi, + }, + }, +}) +``` + +```html + +``` + +#### MDI - Icon search + +Use this tool to search for any Material Design Icons and copy them to your clipboard by clicking the item. + + + +### Material Icons + +For projects without a build process, it is recommended to import the icons from CDN. + +#### Material Icons - CSS + +```html + +``` + +Some Material Icons are missing by default. For example, `person` and `person_outline` are available, but `visibility_outline` isn't, while `visibility` is. To use the missing icons, replace the existing `` with the following: + +```html + +``` + +Alternatively, it is possible to install locally using yarn or npm. Keep in mind that this is not an official google repository and may not contain all icons. + +::: tabs + +```bash [yarn] +yarn add material-design-icons-iconfont -D +``` + +```bash [npm] +npm install material-design-icons-iconfont -D +``` + +```bash [pnpm] +pnpm add material-design-icons-iconfont -D +``` + +```bash [bun] +bun add material-design-icons-iconfont -D +``` + +::: + +```js { resource="src/plugins/vuetify.js" } +import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure your project is capable of handling css files +import { createVuetify } from 'vuetify' +import { aliases, md } from 'vuetify/iconsets/md' + +export default createVuetify({ + icons: { + defaultSet: 'md', + aliases, + sets: { + md, + }, + }, +}) +``` + +```html + +``` + +### Font Awesome + +The easiest way to get started with **FontAwesome** is to use a CDN. + +#### FA 5 - CSS + +```html + +``` + +To install locally you can pull in the [free](https://fontawesome.com/) version of **FontAwesome** using your preferred package manager: + +::: tabs + +```bash [yarn] +yarn add @fortawesome/fontawesome-free -D +``` + +```bash [npm] +npm install @fortawesome/fontawesome-free -D +``` + +```bash [pnpm] +pnpm add @fortawesome/fontawesome-free -D +``` + +```bash [bun] +bun add @fortawesome/fontawesome-free -D +``` + +::: + +```js { resource="src/plugins/vuetify.js" } +import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files +import { createVuetify } from 'vuetify' +import { aliases, fa } from 'vuetify/iconsets/fa' + +export default createVuetify({ + icons: { + defaultSet: 'fa', + aliases, + sets: { + fa, + }, + }, +}) +``` + +```html + +``` + +::: error + +The JavaScript version (`all.js`) of the FontAwesome icons will **NOT** work with Vue + +::: + +#### FA 4 - CSS + +The easiest way to get started with **FontAwesome** is to use a CDN. + +```html + +``` + +To install FontAwesome **4** locally is the same as its newer version, just from a different package. You will be using the `font-awesome` package as opposed to `@fortawesome`. + +::: tabs + +```bash [yarn] +yarn add font-awesome@4.7.0 -D +``` + +```bash [npm] +npm install font-awesome@4.7.0 -D +``` + +```bash [pnpm] +pnpm add font-awesome@4.7.0 -D +``` + +```bash [bun] +bun add font-awesome@4.7.0 -D +``` + +::: + +```js { resource="src/plugins/vuetify.js" } +import 'font-awesome/css/font-awesome.min.css' // Ensure your project is capable of handling css files +import { createVuetify } from 'vuetify' +import { aliases, fa } from 'vuetify/iconsets/fa4' + +export default createVuetify({ + icons: { + defaultSet: 'fa', + aliases, + sets: { + fa, + }, + }, +}) +``` + +```html + +``` + +#### FA 5 - SVG + +Install the following packages. + +::: tabs + +```bash [yarn] +yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D +``` + +```bash [npm] +npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D +``` + +```bash [pnpm] +pnpm add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D +``` + +```bash [bun] +bun add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons -D +``` + +::: + +Then register the global `font-awesome-icon` component and use the pre-defined `fa-svg` icon set. If you have access to Font Awesome Pro icons they can be added to the library in the same way. + +```js { resource="src/main.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' +import { aliases, fa } from 'vuetify/iconsets/fa-svg' +import { library } from '@fortawesome/fontawesome-svg-core' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import { fas } from '@fortawesome/free-solid-svg-icons' +import { far } from '@fortawesome/free-regular-svg-icons' + +const app = createApp() + +app.component('font-awesome-icon', FontAwesomeIcon) // Register component globally +library.add(fas) // Include needed solid icons +library.add(far) // Include needed regular icons + +const vuetify = createVuetify({ + icons: { + defaultSet: 'fa', + aliases, + sets: { + fa, + }, + }, +}) + +app.use(vuetify) + +app.mount('#app') +``` + +```html + +``` + +## Built-in aliases + +The following icons are available as aliases for use in Vuetify components: + + + +## Multiple icon sets + +Out of the box, Vuetify supports the use of multiple *different* icon sets at the same time. The following example demonstrates how to change the default icon font to Font Awesome (`fa`) while still maintaining access to the original Material Design Icons (`mdi`) through the use of a prefix: + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { aliases, fa } from 'vuetify/iconsets/fa' +import { mdi } from 'vuetify/iconsets/mdi' + +export default createVuetify({ + icons: { + defaultSet: 'fa', + aliases, + sets: { + fa, + mdi, + }, + }, +}) +``` + +```html + +``` + +::: info + +It is not necessary to provide a prefix (such as `mdi:`) for icons from the default icon set + +::: + +## Creating a custom icon set + +An icon set consists of an object with one property `component` which should be a functional component that receives props of type `IconsProps`, and renders an icon. + +In order to use a custom set as the default icon set, you must also add the necessary *aliases* that correspond to values used by Vuetify components. + +```ts { resource="src/iconsets/custom.ts" } +import { h } from 'vue' +import type { IconSet, IconAliases, IconProps } from 'vuetify' + +const aliases: IconAliases = { + collapse: '...', + complete: '...', + cancel: '...', + close: '...', + delete: '...', + clear: '...', + success: '...', + info: '...', + warning: '...', + error: '...', + prev: '...', + next: '...', + checkboxOn: '...', + checkboxOff: '...', + checkboxIndeterminate: '...', + delimiter: '...', + sort: '...', + expand: '...', + menu: '...', + subgroup: '...', + dropdown: '...', + radioOn: '...', + radioOff: '...', + edit: '...', + ratingEmpty: '...', + ratingFull: '...', + ratingHalf: '...', + loading: '...', + first: '...', + last: '...', + unfold: '...', + file: '...', + plus: '...', + minus: '...', +} + +const custom: IconSet = { + component: (props: IconProps) => h(...), +} + +export { aliases, custom } +``` + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { aliases, custom } from '../iconsets/custom' + +export default createVuetify({ + icons: { + defaultSet: 'custom', + aliases, + sets: { + custom, + }, + }, +}) +``` + +## Extending available aliases + +If you are developing custom Vuetify components, you can extend the `aliases` object to utilize the same functionality that internal Vuetify components use. Icon aliases are referenced with an initial `$` followed by the name of the alias, e.g. `$product`. + +```js { resource="src/plugins/vuetify.js" } +import { createVuetify } from 'vuetify' +import { aliases, mdi } from 'vuetify/iconsets/mdi' + +export default createVuetify({ + icons: { + aliases: { + ...aliases, + product: 'mdi-dropbox', + support: 'mdi-lifebuoy', + }, + }, +}) +``` + +```html + +``` diff --git a/packages/docs/src/pages/en/features/internationalization.md b/packages/docs/src/pages/en/features/internationalization.md new file mode 100644 index 0000000..37e4ff2 --- /dev/null +++ b/packages/docs/src/pages/en/features/internationalization.md @@ -0,0 +1,271 @@ +--- +meta: + title: Internationalization (i18n) + description: Vuetify supports language Internationalization (i18n) from a wide range of locales and easily integrates vue-i18n. + keywords: i18n, language, internationalization +related: + - /features/accessibility/ + - /components/locale-providers/ + - /getting-started/browser-support/ +features: + report: true +--- + +# Internationalization (i18n) + +Vuetify supports language Internationalization (i18n) of its components. + + + + + +When bootstrapping your application you can specify available locales and the default locale with the **defaultLocale** option. The **locale** service also supports easy integration with [vue-i18n](https://vue-i18n.intlify.dev/). Using a locale that has an RTL (right-to-left) language also affects the directionality of the Vuetify components. + +## Getting started + +To set the available locale messages or the default locale, supply the **locale** option when installing Vuetify. + +```js { resource="main.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +// Translations provided by Vuetify +import { pl, zhHans } from 'vuetify/locale' + +// Your own translation file +import sv from './i18n/vuetify/sv' + +const app = createApp() + +const vuetify = createVuetify({ + locale: { + locale: 'zhHans', + fallback: 'sv', + messages: { zhHans, pl, sv }, + }, +}) + +app.use(vuetify) + +app.mount('#app') +``` + +You can change the locale during runtime by using the `useLocale` composable. + +```html { resource="Composition.vue" } + +``` + +If you are still using the Options API, you can access the locale settings on `this.$vuetify.locale`. + +```html { resource="Options.vue" } + +``` + +## API + +| Feature | Description | +| - | - | +| [useLocale](/api/use-locale/) | The locale composable is used | +| [v-locale-provider](/api/v-locale-provider/) | The locale provider component is used to scope a portion of your application to a different locale than the default one | + + + +## Scoped languages + +Using the `v-locale-provider` component it is possible to scope a portion of your application to a different locale than the default one. + +```html { resource="src/App.vue" } + +``` + +## RTL + +RTL (Right To Left) support is built in for all localizations that ship with Vuetify. If a [supported language](#supported-languages) is flagged as RTL, all content directions are automatically switched. See the [next section](#creating-a-custom-locale) for information on how to add RTL support to a custom locale. + +The following example demonstrates how to force RTL for a specific section of your content, without switching the current language, by using the `v-locale-provider` component: + +```html { resource="src/App.vue" } + + ... + + + ... + + +``` + +## Creating a custom locale + +To create your own locale messages, copy and paste the content of `vuetify/src/locale/en.ts` to a new file, and change the localized strings. You can also specify if they should be displayed RTL or not by using the `rtl` property of the locale options. + +```js { resource="src/locales/customLocale.js" } +export default { + badge: '...', + close: '...', + ... +} +``` + +```js { resource="src/main.js" } +import { createVuetify } from 'vuetify' +import customLocale from './locales/customLocale' + +const vuetify = createVuetify({ + locale: { + locale: 'customLocale', + messages: { customLocale }, + rtl: { + customLocale: true, + }, + }, +}) +``` + +## Custom Vuetify components + +If you are building custom Vuetify components that need to hook into the locale service, you can use the `t` function from the **useLocale** composable, or the `$vuetify.locale` property when using Options API. + +```html { resource="Component.vue" } + + + +``` + +::: warning + The Vuetify locale service only provides a basic translation function `t`, and should really only be used for internal or custom Vuetify components. It is recommended that you use a proper i18n library such as [vue-i18n](https://vue-i18n.intlify.dev/) in your own application. Vuetify does provide support for integrating with other libraries. +::: + +## vue-i18n + +If you are using the vue-i18n library, you can very easily integrate it with Vuetify. This allows you to keep all of your translations in one place. Simply create an entry for $vuetify within your messages and add the corresponding language changes. Then hook up vue-i18n to Vuetify by using the provided adapter function (as seen in the example below). + +```js { resource="src/main.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' +import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n' +import { createI18n, useI18n } from 'vue-i18n' +import { en, sv } from 'vuetify/locale' + +const messages = { + en: { + $vuetify: { + ...en, + dataIterator: { + rowsPerPageText: 'Items per page:', + pageText: '{0}-{1} of {2}', + }, + }, + }, + sv: { + $vuetify: { + ...sv, + dataIterator: { + rowsPerPageText: 'Element per sida:', + pageText: '{0}-{1} av {2}', + }, + }, + }, +} + +const i18n = createI18n({ + legacy: false, // Vuetify does not support the legacy mode of vue-i18n + locale: 'sv', + fallbackLocale: 'en', + messages, +}) + +const vuetify = createVuetify({ + locale: { + adapter: createVueI18nAdapter({ i18n, useI18n }), + }, +}) + +const app = createApp() + +app.use(i18n) +app.use(vuetify) + +app.mount('#app') +``` + +## Supported languages + +Currently Vuetify provides translations in the following languages: + +- **af** - Afrikaans (Afrikaans) +- **ar** - Arabic (العربية) +- **az** - Azerbaijani (Azərbaycan) +- **bg** - Bulgarian (български) +- **ca** - Catalan (català) +- **ckb** - Central Kurdish (کوردی) +- **cs** - Czech (čeština) +- **da** - Danish (Dansk) +- **de** - German (Deutsch) +- **el** - Greek (Ελληνικά) +- **en** - English +- **es** - Spanish (Español) +- **et** - Estonian (eesti) +- **fa** - Persian (فارسی) +- **fi** - Finnish (suomi) +- **fr** - French (Français) +- **he** - Hebrew (עברית) +- **hr** - Croatian (hrvatski jezik) +- **hu** - Hungarian (magyar) +- **id** - Indonesian (Indonesian) +- **it** - Italian (Italiano) +- **ja** - Japanese (日本語) +- **km** - Khmer (ខ្មែរ) +- **ko** - Korean (한국어) +- **lt** - Lithuanian (lietuvių kalba) +- **lv** - Latvian (latviešu valoda) +- **nl** - Dutch (Nederlands) +- **no** - Norwegian (Norsk) +- **pl** - Polish (język polski) +- **pt** - Portuguese (Português) +- **ro** - Romanian (Română) +- **ru** - Russian (Русский) +- **sk** - Slovak (slovenčina) +- **sl** - Slovene (slovenski jezik) +- **srCyrl** - Serbian (српски језик) +- **srLatn** - Serbian (srpski jezik) +- **sv** - Swedish (svenska) +- **th** - Thai (ไทย) +- **tr** - Turkish (Türkçe) +- **uk** - Ukrainian (Українська) +- **vi** - Vietnamese (Tiếng Việt) +- **zhHans** - Chinese (中文) +- **zhHant** - Chinese (正體中文) diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md new file mode 100644 index 0000000..bc68b50 --- /dev/null +++ b/packages/docs/src/pages/en/features/sass-variables.md @@ -0,0 +1,282 @@ +--- +meta: + title: SASS variables + description: Customize Vuetify's internal styles by modifying SASS variables. + keywords: sass variables, scss variables, modifying Vuetify styles +related: + - /styles/colors/ + - /features/theme/ + - /features/treeshaking/ +features: + report: true +--- + +# SASS variables + +Vuetify uses **SASS/SCSS** to craft the style and appearance of all aspects of the framework. + + + + + +::: info + +It is recommended to familiarize yourself with the [Treeshaking](/features/treeshaking/) guide before continuing. + +::: + +## Installation + +Vuetify works out of the box without any additional compilers needing to be installed but does support advanced use-cases such as modifying the underlying variables of the framework. Vite provides built-in support for sass, less and stylus files without the need to install Vite-specific plugins for them; just the corresponding pre-processor itself. + +To begin modifying Vuetify's internal variables, install the [sass](https://sass-lang.com/) pre-processor: + +::: tabs + +```bash [yarn] + yarn add -D sass +``` + +```bash [npm] + npm install -D sass-loader sass +``` + +```bash [pnpm] + pnpm install -D sass-loader sass +``` + +```bash [bun] + bun add -D sass-loader sass +``` + +::: + +For additional details about css-pre-processors, please refer to the official vite page at: https://vitejs.dev/guide/features.html#css-pre-processors or official vue-cli-page at: https://cli.vuejs.org/guide/css.html#pre-processors + +## Basic usage + +Create a **main.scss** file in your **src/styles** directory and update the style import within your **vuetify.js** file: + +```scss { resource="src/styles/main.scss" } +@use 'vuetify' with ( + // variables go here +); +``` + +```diff { resource="src/plugins/vuetify.js" } +- import 'vuetify/styles' ++ import '@/styles/main.scss' +``` + +Within your style file, import the Vuetify styles and specify the variables you want to override, that's it. + +::: warning + +`'vuetify/styles'` should not be used in sass files as it resolves to precompiled css ([vitejs/vite#7809](https://github.com/vitejs/vite/issues/7809)). `'vuetify'` and `'vuetify/settings'` are valid and safe to use + +::: + +## Component specific variables + +Customizing variables used in components is a bit more complex and requires the use of a special build plugin. + +Follow the plugin setup guide from [treeshaking](/features/treeshaking/) then add `styles.configFile` to the plugin options: + +```js { resource="vite.config.js" } +vuetify({ + styles: { + configFile: 'src/styles/settings.scss', + }, +}) +``` + +```scss { resource="src/styles/settings.scss" } +@use 'vuetify/settings' with ( + $button-height: 40px, +); +``` + +`configFile` will be resolved relative to the project root, and loaded before each of vuetify's stylesheets. +If you were using the basic technique from above, make sure to either: + +- Remove it and switch back to `import 'vuetify/styles'`, or +- Add `@use './settings'` before `@use 'vuetify'` in `main.scss` and remove the `with` block from `@use 'vuetify'`. + +You can keep `main.scss` for other style overrides but don't do both `@use 'vuetify'` and `import 'vuetify/styles'` or you'll end up with duplicated styles. + +## Variable API + +There are many SASS/SCSS variables that can be customized across the entire Vuetify framework. You can browse all the variables using the tool below: + + + +Available SASS variables are located on each component's API page. + +![image](https://github.com/vuetifyjs/vuetify/assets/9064066/967da002-5a9e-4bce-8285-1fa9b849e36d "VBtn SASS Variables") + +## Usage in templates + +You can access [global](/api/vuetify/) and per-component variables in Vue templates simply by importing the settings file: + +```html { resource="Comp1.vue" } + +``` + +Keep in mind that to obtain settings from Vuetify, you must forward its variables from within your local stylesheet. In the following example we modify `settings.scss` to **forward** instead of **use**: + +```diff { resource="src/styles/settings.scss" } +- @use 'vuetify/settings' with ( ++ @forward 'vuetify/settings' with ( +``` + +## Disabling utility classes + +Utility classes are a powerful feature of Vuetify, but they can also be unnecessary for some projects. Each utility class is generated with a set of options that are defined [here](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_utilities.scss). Disable individual classes by setting their corresponding variable to `false`: + +```scss { resource="src/styles/settings.scss" } +@forward 'vuetify/settings' with ( + $utilities: ( + "align-content": false, + "align-items": false, + "align-self": false, + "border-bottom": false, + "border-end": false, + "border-opacity": false, + "border-start": false, + "border-style": false, + "border-top": false, + "border": false, + "display": false, + "flex-direction": false, + "flex-grow": false, + "flex-shrink": false, + "flex-wrap": false, + "flex": false, + "float-ltr": false, + "float-rtl": false, + "float": false, + "font-italic": false, + "font-weight": false, + "justify-content": false, + "margin-bottom": false, + "margin-end": false, + "margin-left": false, + "margin-right": false, + "margin-start": false, + "margin-top": false, + "margin-x": false, + "margin-y": false, + "margin": false, + "negative-margin-bottom": false, + "negative-margin-end": false, + "negative-margin-left": false, + "negative-margin-right": false, + "negative-margin-start": false, + "negative-margin-top": false, + "negative-margin-x": false, + "negative-margin-y": false, + "negative-margin": false, + "order": false, + "overflow-wrap": false, + "overflow-x": false, + "overflow-y": false, + "overflow": false, + "padding-bottom": false, + "padding-end": false, + "padding-left": false, + "padding-right": false, + "padding-start": false, + "padding-top": false, + "padding-x": false, + "padding-y": false, + "padding": false, + "rounded-bottom-end": false, + "rounded-bottom-start": false, + "rounded-bottom": false, + "rounded-end": false, + "rounded-start": false, + "rounded-top-end": false, + "rounded-top-start": false, + "rounded-top": false, + "rounded": false, + "text-align": false, + "text-decoration": false, + "text-mono": false, + "text-opacity": false, + "text-overflow": false, + "text-transform": false, + "typography": false, + "white-space": false, + ), +); +``` + +To disable all utility classes, set the entire `$utilities` variable to `false`: + +```scss { resource="src/styles/settings.scss" } +@forward 'vuetify/settings' with ( + $utilities: false, +); +``` + +## Disabling color packs + +Color packs are handy for quickly applying a color to a component but mostly unused in production. To disable them, set the `$color-pack` variable to `false`: + +```scss { resource="src/styles/settings.scss" } +@forward 'vuetify/settings' with ( + $color-pack: false, +); +``` + +## Enabling CSS cascade layers + +::: success +This feature was introduced in [v3.6.0 (Nebula)](/getting-started/release-notes/?version=v3.6.0) +::: + +[Cascade layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are a modern CSS feature that makes it easier to write custom styles without having to deal with specificity issues and `!important`. This will be included by default in Vuetify 4 but can optionally be used now: + +```scss { resource="src/styles/settings.scss" } +@forward 'vuetify/settings' with ( + $layers: true, +); +``` + +Import order of stylesheets becomes much more important with layers enabled, `import 'vuetify/styles'` or a file containing `@use 'vuetify'` **must** be loaded *before* any components or the CSS reset will take precedence over component styles and break everything. If you have separate plugin files make sure to import vuetify's before `App.vue`. + +Your own styles will always* override vuetify's if you don't use `@layer` yourself, or you can specify an order for custom layers in a stylesheet loaded before vuetify. + +```css { resource="src/styles/layers.css" } +@layer base, vuetify, overrides; +``` + +\* Layers invert `!important`, so anything trying to override an important vuetify style must also be in a layer. { class="text-caption" } + +## Caveats + +When using sass variables, there are a few considerations to be aware of. + +### Duplicated CSS + +Placing actual styles or importing a regular stylesheet into the settings file will cause them to be duplicated everywhere the file is imported. +Only put variables, mixins, and functions in the settings file, styles should be placed in the main stylesheet or loaded another way. + +### Build performance + +Vuetify loads precompiled CSS by default, enabling variable customization will switch to the base SASS files instead which must be recompiled with your project. +This can be a performance hit if you're using more than a few vuetify components, and also forces you to use the same SASS compiler version as us. + +### Symlinks + +PNPM and Yarn 2+ create symlinks to library files instead of copying them to node_modules, sass doesn't seem to like this and sometimes doesn't apply the configuration. + +### sass-loader with `api: 'modern'` + +You might have to write a custom importer plugin to load the settings file. diff --git a/packages/docs/src/pages/en/features/scrolling.md b/packages/docs/src/pages/en/features/scrolling.md new file mode 100644 index 0000000..94debb8 --- /dev/null +++ b/packages/docs/src/pages/en/features/scrolling.md @@ -0,0 +1,70 @@ +--- +emphasized: true +meta: + title: Programmatic scrolling + description: Handle scrolling within your application by using the goTo function + keywords: programmatic scrolling, vuetify goto, goto +related: + - /directives/scroll/ + - /features/application-layout/ + - /components/slide-groups/ +features: + github: /composables/goto.ts + label: 'E: goto' + report: true +--- + +# Programmatic scrolling + +Handle scrolling within your application by using the **goTo** function. + + + + + +::: success + +This feature was introduced in [v3.5.0 (Polaris)](/getting-started/release-notes/?version=v3.5.0) + +::: + +## Usage + +The **goTo** method takes two parameters **target** and **options**. **target** can be either a pixel offset from the top of the page, a valid css selector, or an element reference. **options** is an object that includes **duration**, **easing**, **container**, and **offset**. + + + +## API + +| Directive | Description | +| - | - | +| [useGoTo](/api/use-go-to/) | The useGoTo composable | + + + + diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md new file mode 100644 index 0000000..79c5169 --- /dev/null +++ b/packages/docs/src/pages/en/features/theme.md @@ -0,0 +1,353 @@ +--- +meta: + title: Theme + description: Setup your application's theme and supplemental colors in a flash. + keywords: theme, themes, theming, color, colors +related: + - /styles/colors/ + - /styles/transitions/ + - /getting-started/wireframes/ +features: + report: true +--- + +# Theme configuration + +Customize your application's default text colors, surfaces, and more. Easily modify your theme programmatically in real time. Vuetify comes with standard support for light and dark variants. + + + + + +## API + +| Feature | Description | +| - | - | +| [useTheme](/api/use-theme/) | The theme composable allows you to get information about, and modify the current theme | +| [v-theme-provider](/api/v-theme-provider/) | The theme provider component modifies the theme of all its children | + + + +## Setup + +Vuetify comes with two themes pre-installed, `light` and `dark`. To set the default theme of your application, use the **defaultTheme** option. + +### Javascript + +Example with only the **defaultTheme** value + +```js { resource="src/plugins/vuetify.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +export default createVuetify({ + theme: { + defaultTheme: 'dark' + } +}) +``` + +Adding new themes is as easy as defining a new property in the **theme.themes** object. A theme is a collection of colors and options that change the overall look and feel of your application. One of these options designates the theme as being either a **light** or **dark** variation. +This makes it possible for Vuetify to implement Material Design concepts such as elevated surfaces having a lighter overlay color the higher up they are. Find out more about dark themes on the official [Material Design](https://material.io/design/color/dark-theme.html) page. + +```js { resource="src/plugins/vuetify.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +const myCustomLightTheme = { + dark: false, + colors: { + background: '#FFFFFF', + surface: '#FFFFFF', + 'surface-bright': '#FFFFFF', + 'surface-light': '#EEEEEE', + 'surface-variant': '#424242', + 'on-surface-variant': '#EEEEEE', + primary: '#1867C0', + 'primary-darken-1': '#1F5592', + secondary: '#48A9A6', + 'secondary-darken-1': '#018786', + error: '#B00020', + info: '#2196F3', + success: '#4CAF50', + warning: '#FB8C00', + }, + variables: { + 'border-color': '#000000', + 'border-opacity': 0.12, + 'high-emphasis-opacity': 0.87, + 'medium-emphasis-opacity': 0.60, + 'disabled-opacity': 0.38, + 'idle-opacity': 0.04, + 'hover-opacity': 0.04, + 'focus-opacity': 0.12, + 'selected-opacity': 0.08, + 'activated-opacity': 0.12, + 'pressed-opacity': 0.12, + 'dragged-opacity': 0.08, + 'theme-kbd': '#212529', + 'theme-on-kbd': '#FFFFFF', + 'theme-code': '#F5F5F5', + 'theme-on-code': '#000000', + } +} + +export default createVuetify({ + theme: { + defaultTheme: 'myCustomLightTheme', + themes: { + myCustomLightTheme, + }, + }, +}) +``` + +### Typescript + +Example with only the **defaultTheme** value + +```ts { resource="src/plugins/vuetify.ts" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +export default createVuetify({ + theme: { + defaultTheme: 'dark', + }, +}) +``` + +When using Typescript you may use the `ThemeDefinition` type to get type hints for the structure of the theme object. + +```ts { resource="src/plugins/vuetify.ts" } +import { createApp } from 'vue' +import { createVuetify, type ThemeDefinition } from 'vuetify' + +const myCustomLightTheme: ThemeDefinition = { + dark: false, + colors: { + background: '#FFFFFF', + surface: '#FFFFFF', + primary: '#6200EE', + 'primary-darken-1': '#3700B3', + secondary: '#03DAC6', + 'secondary-darken-1': '#018786', + error: '#B00020', + info: '#2196F3', + success: '#4CAF50', + warning: '#FB8C00', + }, +} + +export default createVuetify({ + theme: { + defaultTheme: 'myCustomLightTheme', + themes: { + myCustomLightTheme, + }, + }, +}) +``` + +## Changing theme + +This is used when you need to change the theme during runtime + +```html { resource="src/App.vue" } + + + +``` + +You should keep in mind that most of the Vuetify components support the **theme** prop. When used a new context is created for _that_ specific component and **all** of its children. In the following example, the [v-btn](/components/buttons/) uses the **dark** theme because it is applied to its parent [v-card](/components/cards/). + +```html + +``` + +You can use the `` component to dynamically apply different themes to larger sections of your application, without having to set the **theme** prop on each individual component. In the following example, we apply a custom theme named `high-contrast`. + +```html + +``` + +## Custom theme colors + +The Vuetify theme system supports adding custom colors. When configuring the Vuetify theme settings, add your custom colors to the **colors** object and Vuetify will generate a number of CSS classes and variables for you to use in your application. + +```js { resource="src/plugins/vuetify.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +export default createVuetify({ + theme: { + defaultTheme: 'myCustomTheme', + themes: { + myCustomTheme: { + dark: false, + colors: { + ..., // We have omitted the standard color properties here to emphasize the custom one that we've added + something: '#00ff00', + }, + }, + }, + }, +}) +``` + +Custom properties for colors are a list of `red, green, blue`, so the `rgb()` or `rgba()` function has to be used: + +```html + + + +``` + +## Color variations + +The Vuetify theme system can help you generate any number of **variations** for the colors in your theme. The following example shows how to generate 1 lighten and 2 darken variants for the `primary` and `secondary` colors. + +```js { resource="src/plugins/vuetify.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +export default createVuetify({ + theme: { + defaultTheme: 'myCustomTheme', + variations: { + colors: ['primary', 'secondary'], + lighten: 1, + darken: 2, + }, + themes: { + // + }, + }, +}) +``` + +```html + +``` + +## Disable theme + +The theme functionality can be disabled by setting the **theme** configuration property to `false`. This prevents the creation of the Vuetify stylesheet, and theme classes will not be applied to components. + +```js { resource="src/plugins/vuetify.js" } +import { createApp } from 'vue' +import { createVuetify } from 'vuetify' + +export default createVuetify({ + theme: false, +}) +``` + +## Theme object structure + +```ts +interface ThemeInstance { + /** + * Raw theme objects + * Can be mutated to add new themes or update existing colors + */ + themes: Ref<{ [name: string]: ThemeDefinition }> + + /** + * Name of the current theme + * Inherited from parent components + */ + readonly name: Ref + + /** Processed theme object, includes automatically generated colors */ + readonly current: Ref + readonly computedThemes: Ref<{ [name: string]: ThemeDefinition }> + + readonly global: { + /** Name of the current global theme */ + name: Ref + + /** + * Processed theme object of the current global theme + * Equivalent to `theme.computedThemes.value[theme.global.name.value]` + */ + readonly current: Ref + } +} +``` + +## CSP Nonce + +Pages with the `script-src` or `style-src` CSP rules enabled may require a **nonce** to be specified for embedded style tags. + +```html + +Content-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ' + + +Content-Security-Policy: style-src 'self' 'nonce-dQw4w9WgXcQ' +``` + +```ts +// src/plugins/vuetify.js + +import {createVuetify} from 'vuetify' + +export const vuetify = createVuetify({ + theme: { + cspNonce: 'dQw4w9WgXcQ', + }, +}) +``` + +## Implementation + +Vuetify generates theme styles at runtime according to the given configuration. The generated styles are injected into the `` section of the DOM in a ` diff --git a/packages/vuetify/dev/Playground.template.vue b/packages/vuetify/dev/Playground.template.vue new file mode 100644 index 0000000..6c604f3 --- /dev/null +++ b/packages/vuetify/dev/Playground.template.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/vuetify/dev/favicon.png b/packages/vuetify/dev/favicon.png new file mode 100644 index 0000000..d66b3d0 Binary files /dev/null and b/packages/vuetify/dev/favicon.png differ diff --git a/packages/vuetify/dev/index.html b/packages/vuetify/dev/index.html new file mode 100644 index 0000000..5ffb74f --- /dev/null +++ b/packages/vuetify/dev/index.html @@ -0,0 +1,18 @@ + + + + Vuetify Dev Playground + + + + + + + + +
+ + + + + diff --git a/packages/vuetify/dev/index.js b/packages/vuetify/dev/index.js new file mode 100644 index 0000000..12cb8b0 --- /dev/null +++ b/packages/vuetify/dev/index.js @@ -0,0 +1,16 @@ +import vuetify from './vuetify' +import App from './App.vue' + +import { routes } from './router' +import viteSSR from 'vite-ssr/vue' + +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import { library } from '@fortawesome/fontawesome-svg-core' +import { fas } from '@fortawesome/free-solid-svg-icons' + +library.add(fas) + +export default viteSSR(App, { routes }, ({ app }) => { + app.use(vuetify) + app.component('FontAwesomeIcon', FontAwesomeIcon) +}) diff --git a/packages/vuetify/dev/router.js b/packages/vuetify/dev/router.js new file mode 100644 index 0000000..85a3dad --- /dev/null +++ b/packages/vuetify/dev/router.js @@ -0,0 +1,46 @@ +import { h } from 'vue' + +const home = { + setup: () => () => h('div', 'hello'), +} +const page1 = { + setup: () => () => h('div', 'page1'), +} +const page2 = { + setup: () => () => h('div', 'page2'), +} +const nested1 = { + setup: () => () => h('div', 'nested1'), +} +const nested2 = { + setup: () => () => h('div', 'nested2'), +} + +export const routes = [ + { + path: '/', + name: 'home', + component: home, + }, + { + path: '/page1', + name: 'page1', + component: page1, + }, + { + path: '/page2', + name: 'page2', + component: page2, + }, + { + path: '/nested/page1', + name: 'Nested 1', + component: nested1, + }, + { + path: '/nested/page2', + name: 'Nested 2', + component: nested2, + }, + { path: '/:pathMatch(.*)*', redirect: '/' }, +] diff --git a/packages/vuetify/dev/vuetify.js b/packages/vuetify/dev/vuetify.js new file mode 100644 index 0000000..acb3f99 --- /dev/null +++ b/packages/vuetify/dev/vuetify.js @@ -0,0 +1,20 @@ +import '@mdi/font/css/materialdesignicons.css' +import 'vuetify/src/styles/main.sass' + +import { createVuetify } from 'vuetify/src/framework' +import * as directives from 'vuetify/src/directives' + +import date from './vuetify/date' +import defaults from './vuetify/defaults' +import icons from './vuetify/icons' +import locale from './vuetify/locale' + +export default createVuetify({ + directives, + ssr: !!process.env.VITE_SSR, + date, + defaults, + icons, + locale, + theme: { defaultTheme: 'light' }, +}) diff --git a/packages/vuetify/dev/vuetify/date.js b/packages/vuetify/dev/vuetify/date.js new file mode 100644 index 0000000..7f9c816 --- /dev/null +++ b/packages/vuetify/dev/vuetify/date.js @@ -0,0 +1,19 @@ +// import DateFnsAdapter from '@date-io/date-fns' +// import { enAU, enUS, ja, sv } from 'date-fns/locale' + +// import DayJsAdapter from '@date-io/dayjs' + +export default { + // adapter: DateFnsAdapter, + formats: { + // dayOfMonth: date => date.getDate(), + }, + locale: { + en: 'en-US', + // en: 'en-AU', + // en: enAU, + // en: enUS, + // ja, + // sv, + }, +} diff --git a/packages/vuetify/dev/vuetify/defaults.js b/packages/vuetify/dev/vuetify/defaults.js new file mode 100644 index 0000000..40b8bc3 --- /dev/null +++ b/packages/vuetify/dev/vuetify/defaults.js @@ -0,0 +1,3 @@ +export default { + // +} diff --git a/packages/vuetify/dev/vuetify/icons.js b/packages/vuetify/dev/vuetify/icons.js new file mode 100644 index 0000000..e4f6862 --- /dev/null +++ b/packages/vuetify/dev/vuetify/icons.js @@ -0,0 +1,12 @@ +import { aliases } from 'vuetify/src/iconsets/mdi-svg' +import { mdi } from 'vuetify/src/iconsets/mdi' +import { fa } from 'vuetify/src/iconsets/fa-svg' + +export default { + defaultSet: 'mdi', + aliases, + sets: { + mdi, + fa, + }, +} diff --git a/packages/vuetify/dev/vuetify/locale.js b/packages/vuetify/dev/vuetify/locale.js new file mode 100644 index 0000000..c3d3e5d --- /dev/null +++ b/packages/vuetify/dev/vuetify/locale.js @@ -0,0 +1,10 @@ +import { ar, en, ja, sv } from 'vuetify/src/locale' + +export default { + messages: { + en, + ar, + sv, + ja, + }, +} diff --git a/packages/vuetify/jest.config.js b/packages/vuetify/jest.config.js new file mode 100644 index 0000000..1b42612 --- /dev/null +++ b/packages/vuetify/jest.config.js @@ -0,0 +1,10 @@ +const base = require('../../jest.config') + +module.exports = { + ...base, + id: 'Vuetify', + displayName: 'Vuetify', + setupFiles: [ + 'jest-canvas-mock', + ], +} diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json new file mode 100755 index 0000000..6d592ff --- /dev/null +++ b/packages/vuetify/package.json @@ -0,0 +1,203 @@ +{ + "name": "vuetify", + "description": "Vue Material Component Framework", + "version": "3.6.12", + "author": { + "name": "John Leider", + "email": "john@vuetifyjs.com" + }, + "license": "MIT", + "homepage": "https://vuetifyjs.com", + "repository": { + "type": "git", + "url": "git+https://github.com/vuetifyjs/vuetify.git", + "directory": "packages/vuetify" + }, + "keywords": [ + "vuetify", + "ui framework", + "component framework", + "ui library", + "component library", + "material components", + "vue framework" + ], + "bugs": { + "url": "https://issues.vuetifyjs.com" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/johnleider" + }, + "main": "lib/framework.mjs", + "module": "lib/framework.mjs", + "jsdelivr": "dist/vuetify.js", + "unpkg": "dist/vuetify.js", + "types": "lib/index.d.mts", + "sass": "lib/styles/main.sass", + "styles": "lib/styles/main.css", + "sideEffects": [ + "*.sass", + "*.scss", + "*.css", + "*.vue" + ], + "files": [ + "dist/", + "lib/", + "_settings.scss", + "_styles.scss", + "_tools.scss", + "CHANGELOG.md" + ], + "exports": { + ".": { + "sass": "./lib/styles/main.sass", + "style": "./lib/styles/main.css", + "types": "./lib/index.d.mts", + "default": "./lib/framework.mjs" + }, + "./styles": { + "sass": "./lib/styles/main.sass", + "default": "./lib/styles/main.css" + }, + "./styles/*": "./lib/styles/*", + "./framework": "./lib/framework.mjs", + "./blueprints": "./lib/blueprints/index.mjs", + "./blueprints/*": "./lib/blueprints/*.mjs", + "./components": "./lib/components/index.mjs", + "./components/*": "./lib/components/*/index.mjs", + "./directives": "./lib/directives/index.mjs", + "./directives/*": "./lib/directives/*/index.mjs", + "./locale": "./lib/locale/index.mjs", + "./locale/adapters/*": "./lib/locale/adapters/*.mjs", + "./iconsets/*": "./lib/iconsets/*.mjs", + "./labs/components": "./lib/labs/components.mjs", + "./labs/*": "./lib/labs/*/index.mjs", + "./util/colors": "./lib/util/colors.mjs", + "./*": "./*" + }, + "typesVersions": { + "*": { + "lib/framework.mjs": [ + "lib/index.d.mts" + ], + "framework": [ + "lib/index.d.mts" + ], + "*": [ + "*", + "dist/*", + "lib/*", + "lib/*.d.mts", + "lib/*/index.d.mts" + ] + } + }, + "engines": { + "node": "^12.20 || >=14.13" + }, + "scripts": { + "watch": "yarn build:lib --watch", + "dev": "cross-env NODE_ENV=development vite", + "dev:ssr": "cross-env NODE_ENV=development VITE_SSR=true vite-ssr", + "dev:prod": "concurrently \"cross-env NODE_ENV=production vite build -w\" \"vite preview\"", + "dev:typecheck": "vue-tsc --noEmit --skipLibCheck --project ./tsconfig.dev.json", + "build": "rimraf lib dist && concurrently \"yarn build:dist\" \"yarn build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && yarn build:types", + "build:dist": "rollup --config build/rollup.config.mjs", + "build:lib": "cross-env NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .mjs", + "build:types": "rimraf types-temp && tsc --pretty --emitDeclarationOnly -p tsconfig.dist.json && rollup --config build/rollup.types.config.mjs && rimraf types-temp", + "tsc": "tsc", + "debug:test": "cross-env NODE_ENV=test node --inspect --inspect-brk ../../node_modules/jest/bin/jest.js --no-cache -i --verbose", + "test": "node build/run-tests.js", + "test:unix": "cross-env NODE_ENV=test jest", + "test:win32": "cross-env NODE_ENV=test jest -i", + "test:coverage": "yarn test --coverage", + "lint": "concurrently -n \"tsc,eslint\" --kill-others-on-fail \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint src -f codeframe --max-warnings 0\"", + "lint:fix": "concurrently -n \"tsc,eslint\" \"tsc -p tsconfig.checks.json --noEmit --pretty\" \"eslint --fix src\"", + "cy:open": "cypress open --component -b electron", + "cy:run": "percy exec -- cypress run --component" + }, + "devDependencies": { + "@date-io/core": "3.0.0", + "@date-io/date-fns": "3.0.0", + "@date-io/dayjs": "^3.0.0", + "@formatjs/intl": "^2.10.1", + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/vue-fontawesome": "^3.0.6", + "@percy/cli": "^1.28.2", + "@percy/cypress": "^3.1.2", + "@rollup/plugin-alias": "^5.1.0", + "@rollup/plugin-babel": "^6.0.4", + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-typescript": "^11.1.6", + "@types/jest": "^28.1.8", + "@types/node": "^20.12.7", + "@types/resize-observer-browser": "^0.1.11", + "@vitejs/plugin-vue": "^5.0.4", + "@vitejs/plugin-vue-jsx": "^3.1.0", + "@vue/babel-plugin-jsx": "^1.2.2", + "@vue/test-utils": "2.4.6", + "acorn-walk": "^8.3.2", + "autoprefixer": "^10.4.19", + "babel-plugin-add-import-extension": "1.5.1", + "babel-plugin-module-resolver": "^5.0.0", + "babel-plugin-transform-define": "^2.1.4", + "babel-polyfill": "^6.26.0", + "concurrently": "^8.2.2", + "cssnano": "^6.1.2", + "cy-mobile-commands": "^0.3.0", + "cypress": "^13.7.2", + "cypress-file-upload": "^5.0.8", + "cypress-real-events": "^1.12.0", + "date-fns": "^3.6.0", + "dotenv": "^16.4.5", + "eslint-plugin-cypress": "^2.15.1", + "eslint-plugin-jest": "^28.2.0", + "fast-glob": "^3.3.2", + "identity-obj-proxy": "^3.0.0", + "jest-canvas-mock": "^2.5.2", + "micromatch": "^4.0.5", + "postcss": "^8.4.38", + "rollup": "^3.20.7", + "rollup-plugin-dts": "^6.1.0", + "rollup-plugin-sass": "^1.12.21", + "rollup-plugin-sourcemaps": "^0.6.3", + "rollup-plugin-terser": "^7.0.2", + "timezone-mock": "^1.3.6", + "vite": "^5.2.8", + "vite-ssr": "^0.17.1", + "vue-i18n": "^9.7.1", + "vue-router": "^4.3.0" + }, + "peerDependencies": { + "typescript": ">=4.7", + "vite-plugin-vuetify": ">=1.0.0", + "vue": "^3.3.0", + "vue-i18n": "^9.0.0", + "webpack-plugin-vuetify": ">=2.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + }, + "vue-i18n": { + "optional": true + }, + "webpack-plugin-vuetify": { + "optional": true + }, + "vite-plugin-vuetify": { + "optional": true + } + }, + "publishConfig": { + "access": "public" + }, + "vetur": { + "tags": "dist/json/tags.json", + "attributes": "dist/json/attributes.json" + }, + "web-types": "dist/json/web-types.json" +} diff --git a/packages/vuetify/playgrounds/Playground.datatable.vue b/packages/vuetify/playgrounds/Playground.datatable.vue new file mode 100644 index 0000000..b5cff0d --- /dev/null +++ b/packages/vuetify/playgrounds/Playground.datatable.vue @@ -0,0 +1,303 @@ + + + diff --git a/packages/vuetify/playgrounds/Playground.infinite.vue b/packages/vuetify/playgrounds/Playground.infinite.vue new file mode 100644 index 0000000..b83f684 --- /dev/null +++ b/packages/vuetify/playgrounds/Playground.infinite.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/vuetify/playgrounds/Playground.items.vue b/packages/vuetify/playgrounds/Playground.items.vue new file mode 100644 index 0000000..dd8e484 --- /dev/null +++ b/packages/vuetify/playgrounds/Playground.items.vue @@ -0,0 +1,189 @@ + + + diff --git a/packages/vuetify/playgrounds/Playground.list.vue b/packages/vuetify/playgrounds/Playground.list.vue new file mode 100644 index 0000000..2609a37 --- /dev/null +++ b/packages/vuetify/playgrounds/Playground.list.vue @@ -0,0 +1,210 @@ + + + diff --git a/packages/vuetify/playgrounds/Playground.nested.vue b/packages/vuetify/playgrounds/Playground.nested.vue new file mode 100644 index 0000000..784a6c8 --- /dev/null +++ b/packages/vuetify/playgrounds/Playground.nested.vue @@ -0,0 +1,330 @@ + + + + + diff --git a/packages/vuetify/playgrounds/Playground.slider.vue b/packages/vuetify/playgrounds/Playground.slider.vue new file mode 100644 index 0000000..c161a42 --- /dev/null +++ b/packages/vuetify/playgrounds/Playground.slider.vue @@ -0,0 +1,301 @@ + + + diff --git a/packages/vuetify/postcss.config.js b/packages/vuetify/postcss.config.js new file mode 100644 index 0000000..7fb2bf8 --- /dev/null +++ b/packages/vuetify/postcss.config.js @@ -0,0 +1,9 @@ +const autoprefixer = require('autoprefixer') + +module.exports = ctx => ({ + plugins: [ + autoprefixer({ + remove: false + }) + ] +}) diff --git a/packages/vuetify/src/__tests__/framework.spec.ts b/packages/vuetify/src/__tests__/framework.spec.ts new file mode 100644 index 0000000..13a40d5 --- /dev/null +++ b/packages/vuetify/src/__tests__/framework.spec.ts @@ -0,0 +1,60 @@ +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { createVuetify } from '@/framework' + +describe('Alpinui', () => { + describe('install', () => { + it('should return install function', () => { + const vuetify = createVuetify() + + expect('install' in vuetify).toBe(true) + }) + + it('should install provided components', () => { + const Foo = { name: 'Foo', template: '
' } + const vuetify = createVuetify({ + components: { + Foo, + }, + }) + + const TestComponent = { + name: 'TestComponent', + props: {}, + template: '', + } + + mount(TestComponent, { + global: { + plugins: [vuetify], + }, + }) + + expect('[Vue warn]: Failed to resolve component: foo').not.toHaveBeenTipped() + }) + + it('should install provided directives', () => { + const Foo = { mounted: () => null } + const vuetify = createVuetify({ + directives: { + Foo, + }, + }) + + const TestComponent = { + name: 'TestComponent', + props: {}, + template: '
', + } + + mount(TestComponent, { + global: { + plugins: [vuetify], + }, + }) + + expect('[Vue warn]: Failed to resolve directive: foo').not.toHaveBeenTipped() + }) + }) +}) diff --git a/packages/vuetify/src/blueprints/index.ts b/packages/vuetify/src/blueprints/index.ts new file mode 100644 index 0000000..ed31850 --- /dev/null +++ b/packages/vuetify/src/blueprints/index.ts @@ -0,0 +1,3 @@ +export { md1 } from './md1' +export { md2 } from './md2' +export { md3 } from './md3' diff --git a/packages/vuetify/src/blueprints/md1.ts b/packages/vuetify/src/blueprints/md1.ts new file mode 100644 index 0000000..1a9a01b --- /dev/null +++ b/packages/vuetify/src/blueprints/md1.ts @@ -0,0 +1,73 @@ +// Icons +import { mdi } from '@/iconsets/mdi' + +// Types +import type { Blueprint } from '@/framework' + +export const md1: Blueprint = { + defaults: { + global: { + rounded: 'sm', + }, + VAvatar: { + rounded: 'circle', + }, + VAutocomplete: { + variant: 'underlined', + }, + VBanner: { + color: 'primary', + }, + VBtn: { + color: 'primary', + rounded: 0, + }, + VCheckbox: { + color: 'secondary', + }, + VCombobox: { + variant: 'underlined', + }, + VSelect: { + variant: 'underlined', + }, + VSlider: { + color: 'primary', + }, + VTabs: { + color: 'primary', + }, + VTextarea: { + variant: 'underlined', + }, + VTextField: { + variant: 'underlined', + }, + VToolbar: { + VBtn: { + color: null, + }, + }, + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi, + }, + }, + theme: { + themes: { + light: { + colors: { + primary: '#3F51B5', + 'primary-darken-1': '#303F9F', + 'primary-lighten-1': '#C5CAE9', + secondary: '#FF4081', + 'secondary-darken-1': '#F50057', + 'secondary-lighten-1': '#FF80AB', + accent: '#009688', + }, + }, + }, + }, +} diff --git a/packages/vuetify/src/blueprints/md2.ts b/packages/vuetify/src/blueprints/md2.ts new file mode 100644 index 0000000..5a37219 --- /dev/null +++ b/packages/vuetify/src/blueprints/md2.ts @@ -0,0 +1,70 @@ +// Icons +import { mdi } from '@/iconsets/mdi' + +// Types +import type { Blueprint } from '@/framework' + +export const md2: Blueprint = { + defaults: { + global: { + rounded: 'md', + }, + VAvatar: { + rounded: 'circle', + }, + VAutocomplete: { + variant: 'filled', + }, + VBanner: { + color: 'primary', + }, + VBtn: { + color: 'primary', + }, + VCheckbox: { + color: 'secondary', + }, + VCombobox: { + variant: 'filled', + }, + VSelect: { + variant: 'filled', + }, + VSlider: { + color: 'primary', + }, + VTabs: { + color: 'primary', + }, + VTextarea: { + variant: 'filled', + }, + VTextField: { + variant: 'filled', + }, + VToolbar: { + VBtn: { + color: null, + }, + }, + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi, + }, + }, + theme: { + themes: { + light: { + colors: { + primary: '#6200EE', + 'primary-darken-1': '#3700B3', + secondary: '#03DAC6', + 'secondary-darken-1': '#018786', + error: '#B00020', + }, + }, + }, + }, +} diff --git a/packages/vuetify/src/blueprints/md3.ts b/packages/vuetify/src/blueprints/md3.ts new file mode 100644 index 0000000..dca10fc --- /dev/null +++ b/packages/vuetify/src/blueprints/md3.ts @@ -0,0 +1,90 @@ +// Icons +import { mdi } from '@/iconsets/mdi' + +// Types +import type { Blueprint } from '@/framework' + +export const md3: Blueprint = { + defaults: { + VAppBar: { + flat: true, + }, + VAutocomplete: { + variant: 'filled', + }, + VBanner: { + color: 'primary', + }, + VBottomSheet: { + contentClass: 'rounded-t-xl overflow-hidden', + }, + VBtn: { + color: 'primary', + rounded: 'xl', + }, + VBtnGroup: { + rounded: 'xl', + VBtn: { rounded: null }, + }, + VCard: { + rounded: 'lg', + }, + VCheckbox: { + color: 'secondary', + inset: true, + }, + VChip: { + rounded: 'sm', + }, + VCombobox: { + variant: 'filled', + }, + VNavigationDrawer: { + // VList: { + // nav: true, + // VListItem: { + // rounded: 'xl', + // }, + // }, + }, + VSelect: { + variant: 'filled', + }, + VSlider: { + color: 'primary', + }, + VTabs: { + color: 'primary', + }, + VTextarea: { + variant: 'filled', + }, + VTextField: { + variant: 'filled', + }, + VToolbar: { + VBtn: { + color: null, + }, + }, + }, + icons: { + defaultSet: 'mdi', + sets: { + mdi, + }, + }, + theme: { + themes: { + light: { + colors: { + primary: '#6750a4', + secondary: '#b4b0bb', + tertiary: '#7d5260', + error: '#b3261e', + surface: '#fffbfe', + }, + }, + }, + }, +} diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass new file mode 100644 index 0000000..4111eec --- /dev/null +++ b/packages/vuetify/src/components/VAlert/VAlert.sass @@ -0,0 +1,133 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-alert + display: grid + flex: 1 1 + grid-template-areas: "prepend content append close" ". content . ." + grid-template-columns: max-content auto max-content max-content + position: relative + padding: $alert-padding + overflow: hidden + --v-border-color: #{$alert-border-color} + + @include tools.position($alert-positions) + @include tools.rounded($alert-border-radius) + @include tools.variant($alert-variants...) + + &--prominent + grid-template-areas: "prepend content append close" "prepend content . ." + + &.v-alert--border + --v-border-opacity: #{$alert-border-opacity} + + &.v-alert--border-start + padding-inline-start: $alert-padding + $alert-border-thin-width + + &.v-alert--border-end + padding-inline-end: $alert-padding + $alert-border-thin-width + + &--variant-plain + transition: $alert-plain-transition + + @at-root + @include tools.density('v-alert', $alert-density) using ($modifier) + padding-bottom: $alert-padding + $modifier + padding-top: $alert-padding + $modifier + + &.v-alert--border-top + padding-top: $alert-padding + $alert-border-thin-width + $modifier + + &.v-alert--border-bottom + padding-bottom: $alert-padding + $alert-border-thin-width + $modifier + + .v-alert__border + border-radius: inherit + bottom: 0 + left: 0 + opacity: var(--v-border-opacity) + position: absolute + pointer-events: none + right: 0 + top: 0 + width: 100% + + @include tools.border($alert-border...) + + .v-alert--border-start & + border-inline-start-width: $alert-border-thin-width + + .v-alert--border-end & + border-inline-end-width: $alert-border-thin-width + + .v-alert--border-top & + border-top-width: $alert-border-thin-width + + .v-alert--border-bottom & + border-bottom-width: $alert-border-thin-width + + .v-alert__close + flex: 0 1 auto + grid-area: close + + .v-alert__content + align-self: center + grid-area: content + overflow: hidden + + .v-alert__append, + .v-alert__close + align-self: flex-start + margin-inline-start: $alert-append-margin-inline-start + + .v-alert__append + align-self: flex-start + grid-area: append + + + .v-alert__close + margin-inline-start: $alert-append-close-margin-inline-start + + .v-alert__prepend + align-self: flex-start + display: flex + align-items: center + grid-area: prepend + margin-inline-end: $alert-prepend-margin-inline-end + + .v-alert--prominent & + align-self: center + + .v-alert__underlay + grid-area: none + position: absolute + + .v-alert--border-start & + border-top-left-radius: 0 + border-bottom-left-radius: 0 + + .v-alert--border-end & + border-top-right-radius: 0 + border-bottom-right-radius: 0 + + .v-alert--border-top & + border-top-left-radius: 0 + border-top-right-radius: 0 + + .v-alert--border-bottom & + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 + + .v-alert-title + align-items: center + align-self: center + display: flex + font-size: $alert-title-font-size + font-weight: $alert-title-font-weight + hyphens: $alert-title-hyphens + letter-spacing: $alert-title-letter-spacing + line-height: $alert-title-line-height + overflow-wrap: $alert-title-overflow-wrap + text-transform: $alert-title-text-transform + word-break: $alert-title-word-break + word-wrap: $alert-title-word-wrap diff --git a/packages/vuetify/src/components/VAlert/VAlert.tsx b/packages/vuetify/src/components/VAlert/VAlert.tsx new file mode 100644 index 0000000..d2733a1 --- /dev/null +++ b/packages/vuetify/src/components/VAlert/VAlert.tsx @@ -0,0 +1,261 @@ +// Styles +import './VAlert.sass' + +// Components +import { VAlertTitle } from './VAlertTitle' +import { VBtn } from '@/components/VBtn' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' + +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { IconValue } from '@/composables/icons' +import { useLocale } from '@/composables/locale' +import { makeLocationProps, useLocation } from '@/composables/location' +import { makePositionProps, usePosition } from '@/composables/position' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' + +// Utilities +import { computed, toRef } from 'vue' +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' + +const allowedTypes = ['success', 'info', 'warning', 'error'] as const + +type ContextualType = typeof allowedTypes[number] + +export const makeVAlertProps = propsFactory({ + border: { + type: [Boolean, String] as PropType, + validator: (val: boolean | string) => { + return typeof val === 'boolean' || [ + 'top', + 'end', + 'bottom', + 'start', + ].includes(val) + }, + }, + borderColor: String, + closable: Boolean, + closeIcon: { + type: IconValue, + default: '$close', + }, + closeLabel: { + type: String, + default: '$vuetify.close', + }, + icon: { + type: [Boolean, String, Function, Object] as PropType, + default: null, + }, + modelValue: { + type: Boolean, + default: true, + }, + prominent: Boolean, + title: String, + text: String, + type: { + type: String as PropType, + validator: (val: ContextualType) => allowedTypes.includes(val), + }, + + ...makeComponentProps(), + ...makeDensityProps(), + ...makeDimensionProps(), + ...makeElevationProps(), + ...makeLocationProps(), + ...makePositionProps(), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'flat' } as const), +}, 'VAlert') + +export type VAlertSlots = { + default: never + prepend: never + title: never + text: never + append: never + close: { props: Record } +} + +export const VAlert = genericComponent()({ + name: 'VAlert', + + props: makeVAlertProps(), + + emits: { + 'click:close': (e: MouseEvent) => true, + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { emit, slots }) { + const isActive = useProxiedModel(props, 'modelValue') + const icon = computed(() => { + if (props.icon === false) return undefined + if (!props.type) return props.icon + + return props.icon ?? `$${props.type}` + }) + const variantProps = computed(() => ({ + color: props.color ?? props.type, + variant: props.variant, + })) + + const { themeClasses } = provideTheme(props) + const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps) + const { densityClasses } = useDensity(props) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { locationStyles } = useLocation(props) + const { positionClasses } = usePosition(props) + const { roundedClasses } = useRounded(props) + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'borderColor')) + const { t } = useLocale() + + const closeProps = computed(() => ({ + 'aria-label': t(props.closeLabel), + onClick (e: MouseEvent) { + isActive.value = false + + emit('click:close', e) + }, + })) + + return () => { + const hasPrepend = !!(slots.prepend || icon.value) + const hasTitle = !!(slots.title || props.title) + const hasClose = !!(slots.close || props.closable) + + return isActive.value && ( + + { genOverlays(false, 'v-alert') } + + { props.border && ( +
+ )} + + { hasPrepend && ( +
+ { !slots.prepend ? ( + + ) : ( + + )} +
+ )} + +
+ { hasTitle && ( + + { slots.title?.() ?? props.title } + + )} + + { slots.text?.() ?? props.text } + + { slots.default?.() } +
+ + { slots.append && ( +
+ { slots.append() } +
+ )} + + { hasClose && ( +
+ { !slots.close ? ( + + ) : ( + + { slots.close?.({ props: closeProps.value }) } + + )} +
+ )} + + ) + } + }, +}) + +export type VAlert = InstanceType diff --git a/packages/vuetify/src/components/VAlert/VAlertTitle.ts b/packages/vuetify/src/components/VAlert/VAlertTitle.ts new file mode 100644 index 0000000..042f02a --- /dev/null +++ b/packages/vuetify/src/components/VAlert/VAlertTitle.ts @@ -0,0 +1,6 @@ +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VAlertTitle = createSimpleFunctional('v-alert-title') + +export type VAlertTitle = InstanceType diff --git a/packages/vuetify/src/components/VAlert/__tests__/VAlert.spec.cy.tsx b/packages/vuetify/src/components/VAlert/__tests__/VAlert.spec.cy.tsx new file mode 100644 index 0000000..9288987 --- /dev/null +++ b/packages/vuetify/src/components/VAlert/__tests__/VAlert.spec.cy.tsx @@ -0,0 +1,45 @@ +/// + +import { VAlert } from '..' +import { generate } from '@/../cypress/templates' + +const defaultColors = ['success', 'info', 'warning', 'error', 'invalid'] + +const props = { + color: defaultColors, + icon: ['$vuetify'], + modelValue: true, +} + +const stories = { + 'Default alert': , + 'Icon alert': , +} + +// Tests +describe('VAlert', () => { + describe('color', () => { + it('supports default color props', () => { + cy.mount(() => ( + <> + { defaultColors.map((color, idx) => ( + + { color } alert + + ))} + + )) + .get('.v-alert') + .should('have.length', defaultColors.length) + .then(subjects => { + Array.from(subjects).forEach((subject, idx) => { + expect(subject).to.contain(defaultColors[idx]) + }) + }) + }) + }) + + describe('Showcase', () => { + generate({ stories, props, component: VAlert }) + }) +}) diff --git a/packages/vuetify/src/components/VAlert/_variables.scss b/packages/vuetify/src/components/VAlert/_variables.scss new file mode 100644 index 0000000..dbbe207 --- /dev/null +++ b/packages/vuetify/src/components/VAlert/_variables.scss @@ -0,0 +1,52 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VAlert +$alert-background: rgb(var(--v-theme-surface-light)) !default; +$alert-border-color: currentColor !default; +$alert-border-opacity: .38 !default; +$alert-border-radius: settings.$border-radius-root !default; +$alert-border-style: settings.$border-style-root !default; +$alert-border-thin-width: 8px !default; +$alert-border-width: 0 !default; +$alert-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default; +$alert-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; +$alert-elevation: 1 !default; +$alert-padding: 16px !default; +$alert-plain-opacity: .62 !default; +$alert-plain-transition: .2s opacity settings.$standard-easing !default; +$alert-positions: absolute fixed sticky !default; +$alert-prepend-margin-inline-end: 16px !default; +$alert-append-margin-inline-start: 16px !default; +$alert-append-close-margin-inline-start: 16px !default; + +// VAlertTitle +$alert-title-font-size: tools.map-deep-get(settings.$typography, 'h6', 'size') !default; +$alert-title-font-weight: tools.map-deep-get(settings.$typography, 'h6', 'weight') !default; +$alert-title-hyphens: auto !default; +$alert-title-letter-spacing: tools.map-deep-get(settings.$typography, 'h6', 'letter-spacing') !default; +// $alert-title-line-height: tools.map-deep-get(settings.$typography, 'h6', 'line-height') !default; +$alert-title-line-height: 1.75rem !default; +$alert-title-overflow-wrap: normal !default; +$alert-title-text-transform: none !default; +$alert-title-word-break: normal !default; +$alert-title-word-wrap: break-word !default; + +// VAlertText +$alert-text-line-height: 1.35 !default; + +// Lists +$alert-border: ( + $alert-border-color, + $alert-border-style, + $alert-border-width, + $alert-border-thin-width +) !default; + +$alert-variants: ( + $alert-background, + $alert-color, + $alert-elevation, + $alert-plain-opacity, + 'v-alert' +) !default; diff --git a/packages/vuetify/src/components/VAlert/index.ts b/packages/vuetify/src/components/VAlert/index.ts new file mode 100644 index 0000000..713221d --- /dev/null +++ b/packages/vuetify/src/components/VAlert/index.ts @@ -0,0 +1,2 @@ +export { VAlert } from './VAlert' +export { VAlertTitle } from './VAlertTitle' diff --git a/packages/vuetify/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass new file mode 100644 index 0000000..5a57a27 --- /dev/null +++ b/packages/vuetify/src/components/VApp/VApp.sass @@ -0,0 +1,18 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-application + display: flex + background: $application-background + color: $application-color + + .v-application__wrap + backface-visibility: hidden + display: flex + flex-direction: column + flex: 1 1 auto + max-width: 100% + min-height: 100vh + min-height: 100dvh + position: relative diff --git a/packages/vuetify/src/components/VApp/VApp.tsx b/packages/vuetify/src/components/VApp/VApp.tsx new file mode 100644 index 0000000..063152f --- /dev/null +++ b/packages/vuetify/src/components/VApp/VApp.tsx @@ -0,0 +1,62 @@ +// Styles +import './VApp.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { createLayout, makeLayoutProps } from '@/composables/layout' +import { useRtl } from '@/composables/locale' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { Suspense } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVAppProps = propsFactory({ + ...makeComponentProps(), + ...makeLayoutProps({ fullHeight: true }), + ...makeThemeProps(), +}, 'VApp') + +export const VApp = genericComponent()({ + name: 'VApp', + + props: makeVAppProps(), + + setup (props, { slots }) { + const theme = provideTheme(props) + const { layoutClasses, getLayoutItem, items, layoutRef } = createLayout(props) + const { rtlClasses } = useRtl() + + useRender(() => ( +
+
+ + <> + { slots.default?.() } + + +
+
+ )) + + return { + getLayoutItem, + items, + theme, + } + }, +}) + +export type VApp = InstanceType diff --git a/packages/vuetify/src/components/VApp/_variables.scss b/packages/vuetify/src/components/VApp/_variables.scss new file mode 100644 index 0000000..fd2c8ec --- /dev/null +++ b/packages/vuetify/src/components/VApp/_variables.scss @@ -0,0 +1,6 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VApp +$application-background: rgb(var(--v-theme-background)) !default; +$application-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default; diff --git a/packages/vuetify/src/components/VApp/index.ts b/packages/vuetify/src/components/VApp/index.ts new file mode 100644 index 0000000..99fe338 --- /dev/null +++ b/packages/vuetify/src/components/VApp/index.ts @@ -0,0 +1 @@ +export { VApp } from './VApp' diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass new file mode 100644 index 0000000..44d695d --- /dev/null +++ b/packages/vuetify/src/components/VAppBar/VAppBar.sass @@ -0,0 +1,15 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-app-bar + display: flex + + &.v-toolbar + @include tools.theme($app-bar-theme...) + + &:not(.v-toolbar--flat) + @include tools.elevation($app-bar-elevation) + + &:not(.v-toolbar--absolute) + padding-inline-end: var(--v-scrollbar-offset) diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx new file mode 100644 index 0000000..ec2b9b3 --- /dev/null +++ b/packages/vuetify/src/components/VAppBar/VAppBar.tsx @@ -0,0 +1,178 @@ +// Styles +import './VAppBar.sass' + +// Components +import { makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar' + +// Composables +import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeScrollProps, useScroll } from '@/composables/scroll' +import { useSsrBoot } from '@/composables/ssrBoot' +import { useToggleScope } from '@/composables/toggleScope' + +// Utilities +import { computed, ref, shallowRef, toRef, watchEffect } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VToolbarSlots } from '@/components/VToolbar/VToolbar' + +export const makeVAppBarProps = propsFactory({ + scrollBehavior: String as PropType<'hide' | 'inverted' | 'collapse' | 'elevate' | 'fade-image' | (string & {})>, + modelValue: { + type: Boolean, + default: true, + }, + location: { + type: String as PropType<'top' | 'bottom'>, + default: 'top', + validator: (value: any) => ['top', 'bottom'].includes(value), + }, + + ...makeVToolbarProps(), + ...makeLayoutItemProps(), + ...makeScrollProps(), + + height: { + type: [Number, String], + default: 64, + }, +}, 'VAppBar') + +export const VAppBar = genericComponent()({ + name: 'VAppBar', + + props: makeVAppBarProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { slots }) { + const vToolbarRef = ref() + const isActive = useProxiedModel(props, 'modelValue') + const scrollBehavior = computed(() => { + const behavior = new Set(props.scrollBehavior?.split(' ') ?? []) + return { + hide: behavior.has('hide'), + fullyHide: behavior.has('fully-hide'), + inverted: behavior.has('inverted'), + collapse: behavior.has('collapse'), + elevate: behavior.has('elevate'), + fadeImage: behavior.has('fade-image'), + // shrink: behavior.has('shrink'), + } + }) + const canScroll = computed(() => { + const behavior = scrollBehavior.value + return ( + behavior.hide || + behavior.fullyHide || + behavior.inverted || + behavior.collapse || + behavior.elevate || + behavior.fadeImage || + // behavior.shrink || + !isActive.value + ) + }) + const { + currentScroll, + scrollThreshold, + isScrollingUp, + scrollRatio, + } = useScroll(props, { canScroll }) + + const canHide = computed(() => ( + scrollBehavior.value.hide || + scrollBehavior.value.fullyHide + )) + const isCollapsed = computed(() => props.collapse || ( + scrollBehavior.value.collapse && + (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0) + )) + const isFlat = computed(() => props.flat || ( + scrollBehavior.value.fullyHide && + !isActive.value + ) || ( + scrollBehavior.value.elevate && + (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0) + )) + const opacity = computed(() => ( + scrollBehavior.value.fadeImage + ? (scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value) + : undefined + )) + const height = computed(() => { + const height = Number(vToolbarRef.value?.contentHeight ?? props.height) + const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0) + + if (!canHide.value) return (height + extensionHeight) + + return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide + ? (height + extensionHeight) + : height + }) + + useToggleScope(computed(() => !!props.scrollBehavior), () => { + watchEffect(() => { + if (canHide.value) { + if (scrollBehavior.value.inverted) { + isActive.value = currentScroll.value > scrollThreshold.value + } else { + isActive.value = isScrollingUp.value || (currentScroll.value < scrollThreshold.value) + } + } else { + isActive.value = true + } + }) + }) + + const { ssrBootStyles } = useSsrBoot() + const { layoutItemStyles, layoutIsReady } = useLayoutItem({ + id: props.name, + order: computed(() => parseInt(props.order, 10)), + position: toRef(props, 'location'), + layoutSize: height, + elementSize: shallowRef(undefined), + active: isActive, + absolute: toRef(props, 'absolute'), + }) + + useRender(() => { + const toolbarProps = VToolbar.filterProps(props) + + return ( + + ) + }) + + return layoutIsReady + }, +}) + +export type VAppBar = InstanceType diff --git a/packages/vuetify/src/components/VAppBar/VAppBarNavIcon.tsx b/packages/vuetify/src/components/VAppBar/VAppBarNavIcon.tsx new file mode 100644 index 0000000..c067cad --- /dev/null +++ b/packages/vuetify/src/components/VAppBar/VAppBarNavIcon.tsx @@ -0,0 +1,37 @@ +// Components +import { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { VBtnSlots } from '@/components/VBtn/VBtn' + +export const makeVAppBarNavIconProps = propsFactory({ + ...makeVBtnProps({ + icon: '$menu', + variant: 'text' as const, + }), +}, 'VAppBarNavIcon') + +export const VAppBarNavIcon = genericComponent()({ + name: 'VAppBarNavIcon', + + props: makeVAppBarNavIconProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VAppBarNavIcon = InstanceType diff --git a/packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx b/packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx new file mode 100644 index 0000000..d839096 --- /dev/null +++ b/packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx @@ -0,0 +1,28 @@ +// Components +import { makeVToolbarTitleProps, VToolbarTitle } from '@/components/VToolbar/VToolbarTitle' + +// Utilities +import { genericComponent, useRender } from '@/util' + +// Types +import type { VToolbarTitleSlots } from '@/components/VToolbar/VToolbarTitle' + +export const VAppBarTitle = genericComponent()({ + name: 'VAppBarTitle', + + props: makeVToolbarTitleProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VAppBarTitle = InstanceType diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx new file mode 100644 index 0000000..a9efd0b --- /dev/null +++ b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx @@ -0,0 +1,190 @@ +/// + +// Components +import { VAppBar } from '..' +import { VLayout } from '@/components/VLayout' +import { VMain } from '@/components/VMain' + +// Utilities +import { ref } from 'vue' + +// Constants +const SCROLL_OPTIONS = { ensureScrollable: true, duration: 50 } + +describe('VAppBar', () => { + it('allows custom height', () => { + cy + .mount(({ height }: any) => ( + + + + )) + .get('.v-app-bar').should('have.css', 'height', '64px') + .setProps({ height: 128 }) + .get('.v-app-bar').should('have.css', 'height', '128px') + }) + + it('supports density', () => { + cy + .mount(({ density = 'default' }: any) => ( + + + + )) + .get('.v-app-bar').should('have.css', 'height', '64px') + .setProps({ density: 'prominent' }) + .get('.v-app-bar').should('have.css', 'height', '128px') + .setProps({ density: 'comfortable' }) + .get('.v-app-bar').should('have.css', 'height', '56px') + .setProps({ density: 'compact' }) + .get('.v-app-bar').should('have.css', 'height', '48px') + }) + + it('is hidden on mount', () => { + const model = ref(false) + + cy + .mount(() => ( + + + + )) + .get('.v-app-bar') + .should('not.be.visible') + .then(() => (model.value = true)) + .get('.v-app-bar') + .should('be.visible') + }) + + describe('scroll behavior', () => { + it('hides', () => { + cy.mount(({ scrollBehavior }: any) => ( + + + + + + )) + .setProps({ scrollBehavior: 'hide' }) + .get('.v-app-bar').should('be.visible') + .window().scrollTo(0, 500, SCROLL_OPTIONS) + .get('.v-app-bar').should('not.be.visible') + .window().scrollTo(0, 250, SCROLL_OPTIONS) + .get('.v-app-bar').should('be.visible') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + .get('.v-app-bar').should('be.visible') + + .setProps({ scrollBehavior: 'hide inverted' }) + .get('.v-app-bar').should('not.be.visible') + .window().scrollTo(0, 500, SCROLL_OPTIONS) + .get('.v-app-bar').should('be.visible') + .window().scrollTo(0, 250, SCROLL_OPTIONS) + .get('.v-app-bar').should('not.be.visible') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + .get('.v-app-bar').should('not.be.visible') + }) + + it('should hide correctly when scroll to the bottom', () => { + cy.mount(({ scrollBehavior }: any) => ( + + + + + { + Array.from({ length: 7 }, () => ( +
+ box +
+ )) + } + + + )) + .setProps({ scrollBehavior: 'hide' }) + .get('.v-app-bar').should('be.visible') + .window().scrollTo('bottom') + .get('.v-app-bar').should('not.be.visible') + }) + + it('collapses', () => { + cy.mount(({ scrollBehavior }: any) => ( + + + + + + )) + .setProps({ scrollBehavior: 'collapse' }) + .get('.v-app-bar').should('be.visible') + .get('.v-app-bar').should('have.not.class', 'v-toolbar--collapse') + .window().scrollTo(0, 500, SCROLL_OPTIONS) + .get('.v-app-bar').should('have.class', 'v-toolbar--collapse') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + + .setProps({ scrollBehavior: 'collapse inverted' }) + .get('.v-app-bar').should('be.visible') + .get('.v-app-bar').should('have.class', 'v-toolbar--collapse') + .window().scrollTo(0, 500, SCROLL_OPTIONS) + .get('.v-app-bar').should('not.have.class', 'v-toolbar--collapse') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + }) + + it('elevates', () => { + cy.mount(({ scrollBehavior }: any) => ( + + + + + + )) + .setProps({ scrollBehavior: 'elevate' }) + .get('.v-app-bar').should('have.class', 'v-toolbar--flat') + .window().scrollTo(0, 500, SCROLL_OPTIONS) + .get('.v-app-bar').should('not.have.class', 'v-toolbar--flat') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + + .setProps({ scrollBehavior: 'elevate inverted' }) + .get('.v-app-bar').should('not.have.class', 'v-toolbar--flat') + .window().scrollTo(0, 500, SCROLL_OPTIONS) + .get('.v-app-bar').should('have.class', 'v-toolbar--flat') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + }) + + it('fades image', () => { + cy.mount(({ scrollBehavior, image }: any) => ( + + + + + + )) + .setProps({ + image: 'https://picsum.photos/1920/1080?random', + scrollBehavior: 'fade-image', + }) + .get('.v-toolbar__image').should('have.css', 'opacity', '1') + .window().scrollTo(0, 150, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '0.5') + .window().scrollTo(0, 300, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '0') + .window().scrollTo(0, 60, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '0.8') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '1') + + .setProps({ scrollBehavior: 'fade-image inverted' }) + .get('.v-toolbar__image').should('have.css', 'opacity', '0') + .window().scrollTo(0, 150, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '0.5') + .window().scrollTo(0, 300, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '1') + .window().scrollTo(0, 60, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '0.2') + .window().scrollTo(0, 0, SCROLL_OPTIONS) + .get('.v-toolbar__image').should('have.css', 'opacity', '0') + }) + }) +}) diff --git a/packages/vuetify/src/components/VAppBar/_variables.scss b/packages/vuetify/src/components/VAppBar/_variables.scss new file mode 100644 index 0000000..4a94b62 --- /dev/null +++ b/packages/vuetify/src/components/VAppBar/_variables.scss @@ -0,0 +1,44 @@ +@use "sass:map"; +@use "../../styles/settings/variables"; +@use "../../styles/tools/functions"; + +// VAppBar +$app-bar-background: rgb(var(--v-theme-surface)) !default; +$app-bar-border-color: variables.$border-color-root !default; +$app-bar-border-radius: map.get(variables.$rounded, '0') !default; +$app-bar-border-style: variables.$border-style-root !default; +$app-bar-border-thin-width: 0 0 thin !default; +$app-bar-border-width: 0 !default; +$app-bar-collapsed-border-radius: 24px !default; +$app-bar-collapsed-max-width: 112px !default; +$app-bar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$app-bar-density-comfortable-padding: 4px !default; +$app-bar-density-compact-padding: 0 !default; +$app-bar-density-default-padding: 8px !default; +$app-bar-elevation: 4 !default; +$app-bar-flat-elevation: 0 !default; +$app-bar-image-height: inherit !default; +$app-bar-image-object-fit: cover !default; +$app-bar-image-width: inherit !default; +$app-bar-padding-end: 4px !default; +$app-bar-padding-start: 4px !default; +$app-bar-prominent-height: 128px !default; +$app-bar-rounded-border-radius: variables.$border-radius-root !default; +$app-bar-scrolled-title-padding-bottom: 9px !default; +$app-bar-shaped-border-radius: map.get(variables.$rounded, 'xl') $app-bar-border-radius !default; +$app-bar-title-font-size: functions.map-deep-get(variables.$typography, 'h5', 'size') !default; +$app-bar-title-padding: 6px 20px !default; +$app-bar-transition: .2s variables.$standard-easing !default; + +// Lists +$app-bar-border: ( + $app-bar-border-color, + $app-bar-border-style, + $app-bar-border-width, + $app-bar-border-thin-width +) !default; + +$app-bar-theme: ( + $app-bar-background, + $app-bar-color +) !default; diff --git a/packages/vuetify/src/components/VAppBar/index.ts b/packages/vuetify/src/components/VAppBar/index.ts new file mode 100644 index 0000000..6cae47b --- /dev/null +++ b/packages/vuetify/src/components/VAppBar/index.ts @@ -0,0 +1,3 @@ +export { VAppBar } from './VAppBar' +export { VAppBarNavIcon } from './VAppBarNavIcon' +export { VAppBarTitle } from './VAppBarTitle' diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass new file mode 100644 index 0000000..b34cf13 --- /dev/null +++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.sass @@ -0,0 +1,106 @@ +@use 'sass:selector' +@use 'sass:math' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-autocomplete + .v-field + .v-text-field__prefix, + .v-text-field__suffix, + .v-field__input, + &.v-field + cursor: text + + .v-field + .v-field__input + > input + flex: 1 1 + + .v-field + input + min-width: $autocomplete-focused-input + + &:not(.v-field--focused) + input + min-width: 0 + + .v-field--dirty + .v-autocomplete__selection + margin-inline-end: $autocomplete-selection-gap + + .v-autocomplete__selection-text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .v-autocomplete + &__content + overflow: hidden + + @include tools.elevation($autocomplete-content-elevation) + @include tools.rounded($autocomplete-content-border-radius) + + &__mask + background: rgb(var(--v-theme-surface-light)) + + &__selection + display: inline-flex + align-items: center + height: calc($input-font-size * $input-line-height) + letter-spacing: inherit + line-height: inherit + max-width: calc(100% - $autocomplete-selection-gap - $autocomplete-input-buffer) + + &__selection + &:first-child + margin-inline-start: 0 + + &--chips.v-input--density-compact + .v-field--variant-solo, + .v-field--variant-solo-inverted, + .v-field--variant-filled, + .v-field--variant-solo-filled + .v-label.v-field-label + &--floating + top: 0px + + &--selecting-index + .v-autocomplete__selection + opacity: var(--v-medium-emphasis-opacity) + + &--selected + opacity: 1 + + .v-field__input > input + caret-color: transparent + + &--single:not(.v-autocomplete--selection-slot) + &.v-text-field input + flex: 1 1 + position: absolute + left: 0 + right: 0 + width: 100% + padding-inline: inherit + + .v-field--active + input + transition: none + + .v-field--dirty:not(.v-field--focused) + input + opacity: 0 + + .v-field--focused + .v-autocomplete__selection + opacity: 0 + + &__menu-icon + margin-inline-start: 4px + transition: $autocomplete-transition + + .v-autocomplete--active-menu & + opacity: var(--v-high-emphasis-opacity) + transform: rotate(180deg) diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx new file mode 100644 index 0000000..59eeccb --- /dev/null +++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx @@ -0,0 +1,659 @@ +// Styles +import './VAutocomplete.sass' + +// Components +import { VAvatar } from '@/components/VAvatar' +import { VCheckboxBtn } from '@/components/VCheckbox' +import { VChip } from '@/components/VChip' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' +import { VList, VListItem } from '@/components/VList' +import { VMenu } from '@/components/VMenu' +import { makeSelectProps } from '@/components/VSelect/VSelect' +import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField' +import { VVirtualScroll } from '@/components/VVirtualScroll' + +// Composables +import { useScrolling } from '../VSelect/useScrolling' +import { useTextColor } from '@/composables/color' +import { makeFilterProps, useFilter } from '@/composables/filter' +import { useForm } from '@/composables/form' +import { forwardRefs } from '@/composables/forwardRefs' +import { useItems } from '@/composables/list-items' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeTransitionProps } from '@/composables/transition' + +// Utilities +import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue' +import { + ensureValidVNode, + genericComponent, + IN_BROWSER, + matchesSelector, + noop, + omit, + propsFactory, + useRender, + wrapInArray, +} from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VFieldSlots } from '@/components/VField/VField' +import type { VInputSlots } from '@/components/VInput/VInput' +import type { FilterMatch } from '@/composables/filter' +import type { ListItem } from '@/composables/list-items' +import type { GenericProps, SelectItemKey } from '@/util' + +function highlightResult (text: string, matches: FilterMatch | undefined, length: number) { + if (matches == null) return text + + if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented') + + return typeof matches === 'number' && ~matches + ? ( + <> + { text.substr(0, matches) } + { text.substr(matches, length) } + { text.substr(matches + length) } + + ) + : text +} + +type Primitive = string | number | boolean | symbol + +type Val = [T] extends [Primitive] + ? T + : (ReturnObject extends true ? T : any) + +type Value = + Multiple extends true + ? readonly Val[] + : Val | null + +export const makeVAutocompleteProps = propsFactory({ + autoSelectFirst: { + type: [Boolean, String] as PropType, + }, + clearOnSelect: Boolean, + search: String, + + ...makeFilterProps({ filterKeys: ['title'] }), + ...makeSelectProps(), + ...omit(makeVTextFieldProps({ + modelValue: null, + role: 'combobox', + }), ['validationValue', 'dirty', 'appendInnerIcon']), + ...makeTransitionProps({ transition: false }), +}, 'VAutocomplete') + +type ItemType = T extends readonly (infer U)[] ? U : never + +export const VAutocomplete = genericComponent, + ReturnObject extends boolean = false, + Multiple extends boolean = false, + V extends Value = Value +>( + props: { + items?: T + itemTitle?: SelectItemKey> + itemValue?: SelectItemKey> + itemProps?: SelectItemKey> + returnObject?: ReturnObject + multiple?: Multiple + modelValue?: V | null + 'onUpdate:modelValue'?: (value: V) => void + }, + slots: Omit & { + item: { item: ListItem, index: number, props: Record } + chip: { item: ListItem, index: number, props: Record } + selection: { item: ListItem, index: number } + 'prepend-item': never + 'append-item': never + 'no-data': never + } +) => GenericProps>()({ + name: 'VAutocomplete', + + props: makeVAutocompleteProps(), + + emits: { + 'update:focused': (focused: boolean) => true, + 'update:search': (value: any) => true, + 'update:modelValue': (value: any) => true, + 'update:menu': (value: boolean) => true, + }, + + setup (props, { slots }) { + const { t } = useLocale() + const vTextFieldRef = ref() + const isFocused = shallowRef(false) + const isPristine = shallowRef(true) + const listHasFocus = shallowRef(false) + const vMenuRef = ref() + const vVirtualScrollRef = ref() + const _menu = useProxiedModel(props, 'menu') + const menu = computed({ + get: () => _menu.value, + set: v => { + if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return + _menu.value = v + }, + }) + const selectionIndex = shallowRef(-1) + const color = computed(() => vTextFieldRef.value?.color) + const label = computed(() => menu.value ? props.closeText : props.openText) + const { items, transformIn, transformOut } = useItems(props) + const { textColorClasses, textColorStyles } = useTextColor(color) + const search = useProxiedModel(props, 'search', '') + const model = useProxiedModel( + props, + 'modelValue', + [], + v => transformIn(v === null ? [null] : wrapInArray(v)), + v => { + const transformed = transformOut(v) + return props.multiple ? transformed : (transformed[0] ?? null) + } + ) + const counterValue = computed(() => { + return typeof props.counterValue === 'function' ? props.counterValue(model.value) + : typeof props.counterValue === 'number' ? props.counterValue + : model.value.length + }) + const form = useForm() + const { filteredItems, getMatches } = useFilter(props, items, () => isPristine.value ? '' : search.value) + + const displayItems = computed(() => { + if (props.hideSelected) { + return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value)) + } + return filteredItems.value + }) + + const hasChips = computed(() => !!(props.chips || slots.chip)) + const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection) + + const selectedValues = computed(() => model.value.map(selection => selection.props.value)) + + const highlightFirst = computed(() => { + const selectFirst = props.autoSelectFirst === true || + (props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title) + return selectFirst && + displayItems.value.length > 0 && + !isPristine.value && + !listHasFocus.value + }) + + const menuDisabled = computed(() => ( + (props.hideNoData && !displayItems.value.length) || + props.readonly || form?.isReadonly.value + )) + + const listRef = ref() + const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef) + function onClear (e: MouseEvent) { + if (props.openOnClear) { + menu.value = true + } + + search.value = '' + } + function onMousedownControl () { + if (menuDisabled.value) return + + menu.value = true + } + function onMousedownMenuIcon (e: MouseEvent) { + if (menuDisabled.value) return + + if (isFocused.value) { + e.preventDefault() + e.stopPropagation() + } + menu.value = !menu.value + } + function onKeydown (e: KeyboardEvent) { + if (props.readonly || form?.isReadonly.value) return + + const selectionStart = vTextFieldRef.value.selectionStart + const length = model.value.length + + if ( + selectionIndex.value > -1 || + ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key) + ) { + e.preventDefault() + } + + if (['Enter', 'ArrowDown'].includes(e.key)) { + menu.value = true + } + + if (['Escape'].includes(e.key)) { + menu.value = false + } + + if ( + highlightFirst.value && + ['Enter', 'Tab'].includes(e.key) && + !model.value.some(({ value }) => value === displayItems.value[0].value) + ) { + select(displayItems.value[0]) + } + + if (e.key === 'ArrowDown' && highlightFirst.value) { + listRef.value?.focus('next') + } + + if (['Backspace', 'Delete'].includes(e.key)) { + if ( + !props.multiple && + hasSelectionSlot.value && + model.value.length > 0 && + !search.value + ) return select(model.value[0], false) + + if (~selectionIndex.value) { + const originalSelectionIndex = selectionIndex.value + select(model.value[selectionIndex.value], false) + + selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex + } else if (e.key === 'Backspace' && !search.value) { + selectionIndex.value = length - 1 + } + } + + if (!props.multiple) return + + if (e.key === 'ArrowLeft') { + if (selectionIndex.value < 0 && selectionStart > 0) return + + const prev = selectionIndex.value > -1 + ? selectionIndex.value - 1 + : length - 1 + + if (model.value[prev]) { + selectionIndex.value = prev + } else { + selectionIndex.value = -1 + vTextFieldRef.value.setSelectionRange(search.value?.length, search.value?.length) + } + } + + if (e.key === 'ArrowRight') { + if (selectionIndex.value < 0) return + + const next = selectionIndex.value + 1 + + if (model.value[next]) { + selectionIndex.value = next + } else { + selectionIndex.value = -1 + vTextFieldRef.value.setSelectionRange(0, 0) + } + } + } + + function onChange (e: Event) { + if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) { + const item = items.value.find(item => item.title === (e.target as HTMLInputElement).value) + if (item) { + select(item) + } + } + } + + function onAfterLeave () { + if (isFocused.value) { + isPristine.value = true + vTextFieldRef.value?.focus() + } + } + + function onFocusin (e: FocusEvent) { + isFocused.value = true + setTimeout(() => { + listHasFocus.value = true + }) + } + function onFocusout (e: FocusEvent) { + listHasFocus.value = false + } + function onUpdateModelValue (v: any) { + if (v == null || (v === '' && !props.multiple && !hasSelectionSlot.value)) model.value = [] + } + + const isSelecting = shallowRef(false) + + /** @param set - null means toggle */ + function select (item: ListItem | undefined, set: boolean | null = true) { + if (!item || item.props.disabled) return + + if (props.multiple) { + const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value)) + const add = set == null ? !~index : set + + if (~index) { + const value = add ? [...model.value, item] : [...model.value] + value.splice(index, 1) + model.value = value + } else if (add) { + model.value = [...model.value, item] + } + + if (props.clearOnSelect) { + search.value = '' + } + } else { + const add = set !== false + model.value = add ? [item] : [] + search.value = add && !hasSelectionSlot.value ? item.title : '' + + // watch for search watcher to trigger + nextTick(() => { + menu.value = false + isPristine.value = true + }) + } + } + + watch(isFocused, (val, oldVal) => { + if (val === oldVal) return + + if (val) { + isSelecting.value = true + search.value = (props.multiple || hasSelectionSlot.value) ? '' : String(model.value.at(-1)?.props.title ?? '') + isPristine.value = true + + nextTick(() => isSelecting.value = false) + } else { + if (!props.multiple && search.value == null) model.value = [] + menu.value = false + if (!model.value.some(({ title }) => title === search.value)) search.value = '' + selectionIndex.value = -1 + } + }) + + watch(search, val => { + if (!isFocused.value || isSelecting.value) return + + if (val) menu.value = true + + isPristine.value = !val + }) + + watch(menu, () => { + if (!props.hideSelected && menu.value && model.value.length) { + const index = displayItems.value.findIndex( + item => model.value.some(s => item.value === s.value) + ) + IN_BROWSER && window.requestAnimationFrame(() => { + index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index) + }) + } + }) + + watch(() => props.items, (newVal, oldVal) => { + if (menu.value) return + + if (isFocused.value && !oldVal.length && newVal.length) { + menu.value = true + } + }) + + useRender(() => { + const hasList = !!( + (!props.hideNoData || displayItems.value.length) || + slots['prepend-item'] || + slots['append-item'] || + slots['no-data'] + ) + const isDirty = model.value.length > 0 + const textFieldProps = VTextField.filterProps(props) + + return ( + -1, + }, + props.class, + ]} + style={ props.style } + readonly={ props.readonly } + placeholder={ isDirty ? undefined : props.placeholder } + onClick:clear={ onClear } + onMousedown:control={ onMousedownControl } + onKeydown={ onKeydown } + > + {{ + ...slots, + default: () => ( + <> + + { hasList && ( + e.preventDefault() } + onKeydown={ onListKeydown } + onFocusin={ onFocusin } + onFocusout={ onFocusout } + onScrollPassive={ onListScroll } + tabindex="-1" + aria-live="polite" + color={ props.itemColor ?? props.color } + { ...props.listProps } + > + { slots['prepend-item']?.() } + + { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? ( + + ))} + + + { ({ item, index, itemRef }) => { + const itemProps = mergeProps(item.props, { + ref: itemRef, + key: index, + active: (highlightFirst.value && index === 0) ? true : undefined, + onClick: () => select(item, null), + }) + + return slots.item?.({ + item, + index, + props: itemProps, + }) ?? ( + + {{ + prepend: ({ isSelected }) => ( + <> + { props.multiple && !props.hideSelected ? ( + + ) : undefined } + + { item.props.prependAvatar && ( + + )} + + { item.props.prependIcon && ( + + )} + + ), + title: () => { + return isPristine.value + ? item.title + : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0) + }, + }} + + ) + }} + + + { slots['append-item']?.() } + + )} + + + { model.value.map((item, index) => { + function onChipClose (e: Event) { + e.stopPropagation() + e.preventDefault() + + select(item, false) + } + + const slotProps = { + 'onClick:close': onChipClose, + onKeydown (e: KeyboardEvent) { + if (e.key !== 'Enter' && e.key !== ' ') return + + e.preventDefault() + e.stopPropagation() + + onChipClose(e) + }, + onMousedown (e: MouseEvent) { + e.preventDefault() + e.stopPropagation() + }, + modelValue: true, + 'onUpdate:modelValue': undefined, + } + + const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection + const slotContent = hasSlot + ? ensureValidVNode( + hasChips.value + ? slots.chip!({ item, index, props: slotProps }) + : slots.selection!({ item, index }) + ) + : undefined + + if (hasSlot && !slotContent) return undefined + + return ( +
+ { hasChips.value ? ( + !slots.chip ? ( + + ) : ( + + { slotContent } + + ) + ) : ( + slotContent ?? ( + + { item.title } + { props.multiple && (index < model.value.length - 1) && ( + , + )} + + ) + )} +
+ ) + })} + + ), + 'append-inner': (...args) => ( + <> + { slots['append-inner']?.(...args) } + { props.menuIcon ? ( + + ) : undefined } + + ), + }} + + ) + }) + + return forwardRefs({ + isFocused, + isPristine, + menu, + search, + filteredItems, + select, + }, vTextFieldRef) + }, +}) + +export type VAutocomplete = InstanceType diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx new file mode 100644 index 0000000..bfc87cf --- /dev/null +++ b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx @@ -0,0 +1,658 @@ +/// + +// Components +import { VAutocomplete } from '../VAutocomplete' +import { VForm } from '@/components/VForm' + +// Utilities +import { cloneVNode, ref } from 'vue' +import { generate } from '../../../../cypress/templates' +import { keyValues } from '@/util' + +const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const +const densities = ['default', 'comfortable', 'compact'] as const +const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const + +const stories = Object.fromEntries(Object.entries({ + 'Default input': , + Disabled: , + Affixes: , + 'Prepend/append': , + 'Prepend/append inner': , + Placeholder: , +}).map(([k, v]) => [k, ( +
+ { variants.map(variant => ( + densities.map(density => ( +
+ { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) } + { cloneVNode(v, { variant, density, label: `with value`, modelValue: ['California'] }) } + { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: ['California'] }) } + {{ + selection: ({ item }) => { + return item.title + }, + }} + +
+ )) + )).flat()} +
+)])) + +describe('VAutocomplete', () => { + it('should close only first chip', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = ['Item 1', 'Item 2', 'Item 3'] + + cy.mount(() => ( + + )) + + cy.get('.v-chip__close').eq(0).click() + cy.get('input').should('exist') + cy.get('.v-chip').should('have.length', 2) + }) + + it('should have selected chip with array of strings', () => { + const items = ref(['California', 'Colorado', 'Florida']) + + const selectedItems = ref(['California', 'Colorado']) + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete__menu-icon').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('.v-list-item--active input').eq(0).click() + cy.then(() => { + expect(selectedItems.value).to.deep.equal(['Colorado']) + }) + + cy.get('.v-list-item--active').should('have.length', 1) + + cy.get('.v-chip__close').eq(0).click() + cy.get('.v-chip') + .should('have.length', 0) + .should(() => expect(selectedItems.value).to.be.empty) + }) + + it('should have selected chip with return-object', () => { + const items = ref([ + { + title: 'Item 1', + value: 'item1', + }, + { + title: 'Item 2', + value: 'item2', + }, + ]) + + const selectedItems = ref([ + { + title: 'Item 1', + value: 'item1', + }, + ]) + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete__menu-icon').click() + + cy.get('.v-list-item--active').should('have.length', 1) + cy.get('.v-list-item--active input').click() + cy.then(() => { + expect(selectedItems.value).to.be.empty + }) + cy.get('.v-list-item--active').should('have.length', 0) + }) + + it('should work with objects when using multiple and item-value', () => { + const items = ref([ + { + text: 'Item 1', + id: 'item1', + }, + { + text: 'Item 2', + id: 'item2', + }, + { + text: 'Item 3', + id: 'item3', + }, + ]) + + const selectedItems = ref([ + { + text: 'Item 1', + id: 'item1', + }, + { + text: 'Item 2', + id: 'item2', + }, + ]) + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('.v-field__input').should('include.text', 'Item 1') + cy.get('.v-field__input').should('include.text', 'Item 2') + + cy.get('.v-list-item--active input') + .eq(0) + .click() + .get('.v-field__input') + .should(() => expect(selectedItems.value).to.deep.equal([{ + text: 'Item 2', + id: 'item2', + }])) + }) + + it('should not be clickable when in readonly', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = 'Item 1' + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete').click() + cy.get('.v-list-item').should('have.length', 0) + cy.get('.v-select--active-menu').should('have.length', 0) + + cy.get('.v-autocomplete input').as('input') + .focus() + cy.get('@input').type('{downarrow}', { force: true }) + cy.get('.v-list-item').should('have.length', 0) + cy.get('.v-select--active-menu').should('have.length', 0) + }) + + it('should not be clickable when in readonly form', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = 'Item 1' + + cy.mount(() => ( + + + + )) + + cy.get('.v-autocomplete').click() + cy.get('.v-list-item').should('have.length', 0) + cy.get('.v-select--active-menu').should('have.length', 0) + + cy.get('.v-autocomplete input').as('input') + .focus() + cy.get('@input').type('{downarrow}', { force: true }) + cy.get('.v-list-item').should('have.length', 0) + cy.get('.v-select--active-menu').should('have.length', 0) + }) + + it('should be empty when delete the selected option', () => { + const items = ref([ + { title: 'Item 1', value: 'Item 1' }, + { title: 'Item 2', value: 'Item 2' }, + ]) + + const selectedItems = ref(null) + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete').click() + cy.get('.v-list-item').should('have.length', 2) + cy.get('.v-list-item').contains('Item 1').click() + + cy.get('.v-field__input').clear() + cy.get('body').click('bottomLeft') + cy.get('.v-field__input').should('not.include.text', 'Item 1') + }) + + // https://github.com/vuetifyjs/vuetify/issues/16210 + it('should return item object as the argument of item-title function', () => { + const items = [ + { id: 1, name: 'a' }, + { id: 2, name: 'b' }, + ] + + const selectedItems = ref(null) + + function itemTitleFunc (item: any) { + return 'Item: ' + JSON.stringify(item) + } + + const itemTitleFuncSpy = cy.spy(itemTitleFunc).as('itemTitleFunc') + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete').click() + + cy.get('.v-list-item').eq(0).click({ waitForAnimations: false }).should(() => { + expect(selectedItems.value).to.deep.equal(1) + }) + + cy.get('@itemTitleFunc') + .should('have.been.calledWith', { id: 1, name: 'a' }) + + cy.get('.v-autocomplete__selection-text').should('have.text', `Item: {"id":1,"name":"a"}`) + }) + + // https://github.com/vuetifyjs/vuetify/issues/16442 + describe('null value', () => { + it('should allow null as legit itemValue', () => { + const items = [ + { name: 'Default Language', code: null }, + { code: 'en-US', name: 'English' }, + { code: 'de-DE', name: 'German' }, + ] + + const selectedItems = null + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete__selection').eq(0).invoke('text').should('equal', 'Default Language') + }) + it('should mark input as "not dirty" when the v-model is null, but null is not present in the items', () => { + const items = [ + { code: 'en-US', name: 'English' }, + { code: 'de-DE', name: 'German' }, + ] + + cy.mount(() => ( + + )) + + cy.get('.v-field').should('not.have.class', 'v-field--dirty') + }) + }) + + describe('hide-selected', () => { + it('should hide selected item(s)', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = ['Item 1', 'Item 2'] + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete__menu-icon').click() + + cy.get('.v-overlay__content .v-list-item').should('have.length', 2) + cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 3') + cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(1).should('have.text', 'Item 4') + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/16055 + it('should not replicate html select hotkeys in v-autocomplete', () => { + const items = ref(['aaa', 'foo', 'faa']) + + const selectedItems = ref(undefined) + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete') + .click() + .get('.v-autocomplete input') + .focus() + .type('f', { force: true }) + .get('.v-list-item').should('have.length', 2) + .then(_ => { + expect(selectedItems.value).equal(undefined) + }) + }) + + it('should conditionally show placeholder', () => { + cy.mount(props => ( + + )) + .get('.v-autocomplete input') + .should('have.attr', 'placeholder', 'Placeholder') + .setProps({ label: 'Label' }) + .get('.v-autocomplete input') + .should('not.be.visible') + .get('.v-autocomplete input') + .focus() + .should('have.attr', 'placeholder', 'Placeholder') + .should('be.visible') + .blur() + .setProps({ persistentPlaceholder: true }) + .get('.v-autocomplete input') + .should('have.attr', 'placeholder', 'Placeholder') + .should('be.visible') + .setProps({ modelValue: 'Foobar' }) + .get('.v-autocomplete input') + .should('not.have.attr', 'placeholder') + .setProps({ multiple: true, modelValue: ['Foobar'] }) + .get('.v-autocomplete input') + .should('not.have.attr', 'placeholder') + }) + + it('should keep TextField focused while selecting items from open menu', () => { + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete') + .click() + + cy.get('.v-list') + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + + cy.get('.v-field').should('have.class', 'v-field--focused') + }) + + it('should not open menu when closing a chip', () => { + cy + .mount(() => ( + + )) + .get('.v-autocomplete') + .should('not.have.class', 'v-autocomplete--active-menu') + .get('.v-chip__close').eq(1) + .click() + .get('.v-autocomplete') + .should('not.have.class', 'v-autocomplete--active-menu') + .get('.v-chip__close') + .click() + .get('.v-autocomplete') + .should('not.have.class', 'v-autocomplete--active-menu') + .click() + .should('have.class', 'v-autocomplete--active-menu') + .trigger('keydown', { key: keyValues.esc }) + .should('not.have.class', 'v-autocomplete--active-menu') + }) + + describe('auto-select-first', () => { + it('should auto-select-first item when pressing enter', () => { + const selectedItems = ref(undefined) + + cy + .mount(() => ( + + )) + .get('.v-autocomplete') + .click() + .get('.v-list-item') + .should('have.length', 6) + .get('.v-autocomplete input') + .type('Cal') + .get('.v-list-item').eq(0) + .should('have.class', 'v-list-item--active') + .get('.v-autocomplete input') + .trigger('keydown', { key: keyValues.enter, waitForAnimations: false }) + .get('.v-list-item') + .should('have.length', 1) + .then(_ => { + expect(selectedItems.value).to.deep.equal(['California']) + }) + }) + + it('should auto-select-first item when pressing tab', () => { + const selectedItems = ref([]) + + cy + .mount(() => ( + + )) + .get('.v-autocomplete') + .click() + .get('.v-list-item') + .should('have.length', 6) + .get('.v-autocomplete input') + .type('Cal') + .get('.v-list-item').eq(0) + .should('have.class', 'v-list-item--active') + .realPress('Tab') + .get('.v-list-item') + .should('have.length', 0) + .then(_ => { + expect(selectedItems.value).to.deep.equal(['California']) + }) + }) + + it('should not auto-select-first item when blur', () => { + const selectedItems = ref(undefined) + + cy + .mount(() => ( + + )) + .get('.v-autocomplete') + .click() + .get('.v-list-item') + .should('have.length', 6) + .get('.v-autocomplete input') + .type('Cal') + .get('.v-list-item').eq(0) + .should('have.class', 'v-list-item--active') + .get('.v-autocomplete input') + .blur() + .get('.v-list-item') + .should('have.length', 0) + .should(_ => { + expect(selectedItems.value).to.deep.equal(undefined) + }) + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/18796 + // https://github.com/vuetifyjs/vuetify/issues/19235 + it('should allow deleting selection via closable-chips', () => { + const selectedItem = ref('California') + + cy.mount(() => ( + + )) + .get('.v-chip__close') + .click() + .then(_ => { + expect(selectedItem.value).to.equal(null) + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/19261 + it('should not toggle v-model to null when clicking already selected item in single selection mode', () => { + const selectedItem = ref('abc') + + cy.mount(() => ( + + )) + + cy.get('.v-autocomplete').click() + + cy.get('.v-list-item').should('have.length', 2) + cy.get('.v-list-item').eq(0).click({ waitForAnimations: false }).should(() => { + expect(selectedItem.value).equal('abc') + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/18556 + it('should show menu if focused and items are added', () => { + cy + .mount(props => ()) + .get('.v-autocomplete input') + .focus() + .get('.v-overlay') + .should('not.exist') + .setProps({ items: ['Foo', 'Bar'] }) + .get('.v-overlay') + .should('exist') + }) + + // https://github.com/vuetifyjs/vuetify/issues/19346 + it('should not show menu when focused and existing non-empty items are changed', () => { + cy + .mount((props: any) => ()) + .setProps({ items: ['Foo', 'Bar'] }) + .get('.v-autocomplete') + .click() + .get('.v-overlay') + .should('exist') + .get('.v-list-item').eq(1).click({ waitForAnimations: false }) + .setProps({ items: ['Foo', 'Bar', 'test', 'test 2'] }) + .get('.v-overlay') + .should('not.exist') + }) + + // https://github.com/vuetifyjs/vuetify/issues/17573 + // When using selection slot or chips, input displayed next to chip/selection slot should be always empty + it('should always have empty input value when it is unfocused and when using selection slot or chips', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + const selectedItem = ref('Item 1') + + cy + .mount(() => ( + + )) + .get('.v-autocomplete').click() + .get('.v-autocomplete input').should('have.value', '') + // Blur input with a custom search input value + .type('test') + .blur() + .should('have.value', '') + .should(() => { + expect(selectedItem.value).to.equal('Item 1') + }) + // Search existing item and click to select + .get('.v-autocomplete').click() + .get('.v-autocomplete input').should('have.value', '') + .type('Item 1') + .get('.v-list-item').eq(0).click({ waitForAnimations: false }) + .should(() => { + expect(selectedItem.value).to.equal('Item 1') + }) + }) + + describe('Showcase', () => { + generate({ stories }) + }) +}) diff --git a/packages/vuetify/src/components/VAutocomplete/_variables.scss b/packages/vuetify/src/components/VAutocomplete/_variables.scss new file mode 100644 index 0000000..a03cce6 --- /dev/null +++ b/packages/vuetify/src/components/VAutocomplete/_variables.scss @@ -0,0 +1,14 @@ +@forward '../VInput/variables'; +@use '../../styles/settings'; + +// Defaults +$autocomplete-content-border-radius: 4px !default; +$autocomplete-content-elevation: 4 !default; +$autocomplete-focused-input: 64px !default; +$autocomplete-input-buffer: 2px !default; +$autocomplete-line-height: 1.75 !default; +$autocomplete-selection-gap: 2px !default; +$autocomplete-transition: .2s settings.$standard-easing !default; +$autocomplete-chips-control-min-height: 64px !default; +$autocomplete-chips-margin-top: null !default; +$autocomplete-chips-margin-bottom: null !default; diff --git a/packages/vuetify/src/components/VAutocomplete/index.ts b/packages/vuetify/src/components/VAutocomplete/index.ts new file mode 100644 index 0000000..97b5166 --- /dev/null +++ b/packages/vuetify/src/components/VAutocomplete/index.ts @@ -0,0 +1 @@ +export { VAutocomplete } from './VAutocomplete' diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.sass b/packages/vuetify/src/components/VAvatar/VAvatar.sass new file mode 100644 index 0000000..2ed652a --- /dev/null +++ b/packages/vuetify/src/components/VAvatar/VAvatar.sass @@ -0,0 +1,36 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './mixins' as * +@use './variables' as * + +@include tools.layer('components') + .v-avatar + flex: none + align-items: center + display: inline-flex + justify-content: center + line-height: $avatar-line-height + overflow: hidden + position: relative + text-align: center + transition: 0.2s settings.$standard-easing + transition-property: width, height + vertical-align: $avatar-vertical-align + + @include avatar-sizes($avatar-sizes) + @include avatar-density(('height', 'width'), $avatar-density) + @include tools.rounded($avatar-border-radius) + @include tools.variant($avatar-variants...) + + &--rounded + @include tools.rounded($avatar-rounded-border-radius) + + &--start + margin-inline-end: $avatar-margin-start + + &--end + margin-inline-start: $avatar-margin-end + + .v-img + height: 100% + width: 100% diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.tsx b/packages/vuetify/src/components/VAvatar/VAvatar.tsx new file mode 100644 index 0000000..7c0a0eb --- /dev/null +++ b/packages/vuetify/src/components/VAvatar/VAvatar.tsx @@ -0,0 +1,103 @@ +// Styles +import './VAvatar.sass' + +// Components +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' +import { VImg } from '@/components/VImg' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { IconValue } from '@/composables/icons' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeSizeProps, useSize } from '@/composables/size' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVAvatarProps = propsFactory({ + start: Boolean, + end: Boolean, + icon: IconValue, + image: String, + text: String, + + ...makeComponentProps(), + ...makeDensityProps(), + ...makeRoundedProps(), + ...makeSizeProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'flat' } as const), +}, 'VAvatar') + +export const VAvatar = genericComponent()({ + name: 'VAvatar', + + props: makeVAvatarProps(), + + setup (props, { slots }) { + const { themeClasses } = provideTheme(props) + const { colorClasses, colorStyles, variantClasses } = useVariant(props) + const { densityClasses } = useDensity(props) + const { roundedClasses } = useRounded(props) + const { sizeClasses, sizeStyles } = useSize(props) + + useRender(() => ( + + { !slots.default ? ( + props.image + ? () + : props.icon + ? () + : props.text + ) : ( + + { slots.default() } + + )} + + { genOverlays(false, 'v-avatar') } + + )) + + return {} + }, +}) + +export type VAvatar = InstanceType diff --git a/packages/vuetify/src/components/VAvatar/_mixins.scss b/packages/vuetify/src/components/VAvatar/_mixins.scss new file mode 100644 index 0000000..f38bd56 --- /dev/null +++ b/packages/vuetify/src/components/VAvatar/_mixins.scss @@ -0,0 +1,31 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use '../../styles/settings'; +@use './variables' as *; + +@mixin avatar-sizes ($map: $avatar-sizes) { + @each $sizeName, $multiplier in settings.$size-scales { + $size: map.get($map, 'height') + (8 * $multiplier); + + &.v-avatar--size-#{$sizeName} { + --v-avatar-height: #{$size}; + } + } +} + +@mixin avatar-density ($properties, $densities) { + @each $density, $multiplier in $densities { + $value: calc(var(--v-avatar-height) + #{$multiplier * settings.$spacer}); + + &.v-avatar--density-#{$density} { + @if meta.type-of($properties) == "list" { + @each $property in $properties { + #{$property}: $value; + } + } + @else { + #{$properties}: $value; + } + } + } +} diff --git a/packages/vuetify/src/components/VAvatar/_variables.scss b/packages/vuetify/src/components/VAvatar/_variables.scss new file mode 100644 index 0000000..e3c5924 --- /dev/null +++ b/packages/vuetify/src/components/VAvatar/_variables.scss @@ -0,0 +1,35 @@ +@use "sass:map"; +@use "../../styles/settings/variables"; +@use "../../styles/tools/functions"; + +// Defaults +$avatar-background: var(--v-theme-surface) !default; +$avatar-border-radius: map.get(variables.$rounded, 'circle') !default; +$avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; +$avatar-elevation: 1 !default; +$avatar-height: 40px !default; +$avatar-line-height: normal !default; +$avatar-plain-opacity: .62 !default; +$avatar-rounded-border-radius: variables.$border-radius-root !default; +$avatar-vertical-align: middle !default; +$avatar-width: 40px !default; +$avatar-margin-end: map.get(variables.$grid-gutters, 'md') !default; +$avatar-margin-start: map.get(variables.$grid-gutters, 'md') !default; + +$avatar-sizes: () !default; +$avatar-sizes: functions.map-deep-merge( + ( + 'height': $avatar-height, + 'width': $avatar-width + ), + $avatar-sizes +); + +$avatar-variants: ( + $avatar-background, + $avatar-color, + $avatar-elevation, + $avatar-plain-opacity, + 'v-avatar' +) !default; diff --git a/packages/vuetify/src/components/VAvatar/index.ts b/packages/vuetify/src/components/VAvatar/index.ts new file mode 100644 index 0000000..2d25f1d --- /dev/null +++ b/packages/vuetify/src/components/VAvatar/index.ts @@ -0,0 +1 @@ +export { VAvatar } from './VAvatar' diff --git a/packages/vuetify/src/components/VBadge/VBadge.sass b/packages/vuetify/src/components/VBadge/VBadge.sass new file mode 100644 index 0000000..0c81588 --- /dev/null +++ b/packages/vuetify/src/components/VBadge/VBadge.sass @@ -0,0 +1,74 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-badge + display: inline-block + line-height: $badge-line-height + + .v-badge__badge + align-items: center + display: inline-flex + border-radius: $badge-border-radius + font-size: $badge-font-size + font-weight: $badge-font-weight + height: $badge-height + justify-content: center + min-width: $badge-min-width + padding: $badge-padding + pointer-events: auto + position: absolute + text-align: center + text-indent: 0 + transition: $badge-transition + white-space: nowrap + + @include tools.theme($badge-theme...) + + .v-badge--bordered & + &::after + border-radius: inherit + border-style: $badge-border-style + border-width: $badge-border-width + bottom: 0 + color: $badge-border-color + content: '' + left: 0 + position: absolute + right: 0 + top: 0 + transform: $badge-border-transform + + .v-badge--dot & + border-radius: $badge-dot-border-radius + height: $badge-dot-height + min-width: 0 + padding: 0 + width: $badge-dot-width + + &::after + border-width: $badge-dot-border-width + + .v-badge--inline & + position: relative + vertical-align: $badge-inline-vertical-align + + .v-icon + color: inherit + font-size: $badge-font-size + margin: $badge-icon-margin + + img, + .v-img + height: 100% + width: 100% + + .v-badge__wrapper + display: flex + position: relative + + .v-badge--inline & + align-items: center + display: inline-flex + justify-content: center + margin: $badge-wrapper-margin diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx new file mode 100644 index 0000000..9761bff --- /dev/null +++ b/packages/vuetify/src/components/VBadge/VBadge.tsx @@ -0,0 +1,152 @@ +// Styles +import './VBadge.sass' + +// Components +import { VIcon } from '@/components/VIcon' + +// Composables +import { useBackgroundColor, useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { IconValue } from '@/composables/icons' +import { useLocale } from '@/composables/locale' +import { makeLocationProps, useLocation } from '@/composables/location' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, useTheme } from '@/composables/theme' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Utilities +import { toRef } from 'vue' +import { genericComponent, pickWithRest, propsFactory, useRender } from '@/util' + +export type VBadgeSlots = { + default: never + badge: never +} + +export const makeVBadgeProps = propsFactory({ + bordered: Boolean, + color: String, + content: [Number, String], + dot: Boolean, + floating: Boolean, + icon: IconValue, + inline: Boolean, + label: { + type: String, + default: '$vuetify.badge', + }, + max: [Number, String], + modelValue: { + type: Boolean, + default: true, + }, + offsetX: [Number, String], + offsetY: [Number, String], + textColor: String, + + ...makeComponentProps(), + ...makeLocationProps({ location: 'top end' } as const), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeTransitionProps({ transition: 'scale-rotate-transition' }), +}, 'VBadge') + +export const VBadge = genericComponent()({ + name: 'VBadge', + + inheritAttrs: false, + + props: makeVBadgeProps(), + + setup (props, ctx) { + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')) + const { roundedClasses } = useRounded(props) + const { t } = useLocale() + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'textColor')) + const { themeClasses } = useTheme() + + const { locationStyles } = useLocation(props, true, side => { + const base = props.floating + ? (props.dot ? 2 : 4) + : (props.dot ? 8 : 12) + + return base + ( + ['top', 'bottom'].includes(side) ? +(props.offsetY ?? 0) + : ['left', 'right'].includes(side) ? +(props.offsetX ?? 0) + : 0 + ) + }) + + useRender(() => { + const value = Number(props.content) + const content = (!props.max || isNaN(value)) ? props.content + : value <= +props.max ? value + : `${props.max}+` + + const [badgeAttrs, attrs] = pickWithRest(ctx.attrs as Record, [ + 'aria-atomic', + 'aria-label', + 'aria-live', + 'role', + 'title', + ]) + + return ( + +
+ { ctx.slots.default?.() } + + + + { + props.dot ? undefined + : ctx.slots.badge ? ctx.slots.badge?.() + : props.icon ? + : content + } + + +
+ + ) + }) + + return {} + }, +}) + +export type VBadge = InstanceType diff --git a/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx new file mode 100644 index 0000000..2d70fe1 --- /dev/null +++ b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx @@ -0,0 +1,122 @@ +/// + +// Components +import { VBadge } from '..' +import { VBtn } from '@/components/VBtn' + +// Utilities +import { generate, gridOn } from '@/../cypress/templates' + +const defaultColors = ['success', 'info', 'warning', 'error', 'invalid'] +const location = ['bottom start', 'bottom end', 'top start', 'top end'] +const rounded = ['circle', 'pill', 'shaped', 'tr-xl', 'br-lg', 0] // TODO: fix pill +const offset = [8, -8, '4', '-4', undefined] + +const props = { + bordered: true, + color: defaultColors, + content: ['content'], + dot: true, + icon: ['$vuetify'], + floating: true, + inline: true, + location, + modelValue: true, + rounded, +} + +const stories = { + 'Default badge': , + 'Icon badge': , + 'Offset badge': gridOn(['offsetX', 'offsetY'], offset, (xy, offset) => ( + + + { xy } + + + )), + 'Text color': gridOn(defaultColors, [null], color => ( + + + { color } + + + )), +} + +// Tests +describe('VBadge', () => { + describe('color', () => { + it('supports default color props', () => { + cy.mount(() => ( + <> + { defaultColors.map((color, idx) => ( + + { color } badge + + ))} + + )) + .get('.v-badge') + .should('have.length', defaultColors.length) + .then(subjects => { + Array.from(subjects).forEach((subject, idx) => { + // TODO: refactor + expect(subject.querySelector(`.bg-${defaultColors[idx]}`)).to.be.instanceOf(HTMLSpanElement) + expect(subject).to.contain(defaultColors[idx]) + }) + }) + }) + }) + + describe('label', () => { + it('should have the designated aria label', () => { + cy.mount(label) + .get('.v-badge__badge') + .should('have.attr', 'aria-label', 'label-badge') + }) + }) + + describe('max', () => { + it('should add a suffix if the content value is greater than the max value', () => { + cy.mount() + .get('.v-badge') + .should('contain.text', '+') + }) + }) + + describe('tag', () => { + it('renders the proper tag instead of a div', () => { + cy.mount(tag) + .get('custom-tag') + .should('have.text', 'tag') + }) + }) + + describe('textColor', () => { + it('supports default text color props', () => { + cy.mount(() => ( + <> + { defaultColors.map((color, idx) => ( + + { color } text badge + + ))} + + )) + .get('.v-badge') + .should('have.length', defaultColors.length) + .then(subjects => { + Array.from(subjects).forEach((subject, idx) => { + // TODO: refactor + expect(subject.querySelector(`.text-${defaultColors[idx]}`)).to.be.instanceOf(HTMLSpanElement) + expect(subject).to.contain(defaultColors[idx]) + }) + }) + }) + }) + + describe('Showcase', () => { + generate({ stories, props, component: VBadge }) + }) +}) diff --git a/packages/vuetify/src/components/VBadge/_variables.scss b/packages/vuetify/src/components/VBadge/_variables.scss new file mode 100644 index 0000000..e7c636a --- /dev/null +++ b/packages/vuetify/src/components/VBadge/_variables.scss @@ -0,0 +1,32 @@ +@use '../../styles/settings'; + +// VBadge +$badge-background: rgb(var(--v-theme-surface-variant)) !default; +$badge-color: rgba(var(--v-theme-on-surface-variant), var(--v-high-emphasis-opacity)) !default; +$badge-border-color: rgb(var(--v-theme-background)) !default; +$badge-border-radius: 10px !default; +$badge-border-style: solid !default; +$badge-border-transform: scale(1.05) !default; +$badge-border-width: 2px !default; +$badge-dot-border-radius: 4.5px !default; +$badge-dot-border-width: 1.5px !default; +$badge-dot-height: 9px !default; +$badge-dot-width: 9px !default; +$badge-font-family: settings.$body-font-family !default; +$badge-font-size: .75rem !default; +$badge-font-weight: 500 !default; +$badge-height: 1.25rem !default; +$badge-icon-margin: 0 -2px !default; +$badge-icon-padding: 4px 6px !default; +$badge-inline-vertical-align: middle !default; +$badge-line-height: 1 !default; +$badge-min-width: 20px !default; +$badge-padding: 4px 6px !default; +$badge-transition: .225s settings.$standard-easing !default; +$badge-wrapper-margin: 0 4px !default; + +// Lists +$badge-theme: ( + $badge-background, + $badge-color +) !default; diff --git a/packages/vuetify/src/components/VBadge/index.ts b/packages/vuetify/src/components/VBadge/index.ts new file mode 100644 index 0000000..774f875 --- /dev/null +++ b/packages/vuetify/src/components/VBadge/index.ts @@ -0,0 +1 @@ +export { VBadge } from './VBadge' diff --git a/packages/vuetify/src/components/VBanner/VBanner.sass b/packages/vuetify/src/components/VBanner/VBanner.sass new file mode 100644 index 0000000..aecc5b6 --- /dev/null +++ b/packages/vuetify/src/components/VBanner/VBanner.sass @@ -0,0 +1,109 @@ +@use 'sass:math' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-banner + display: grid + flex: 1 1 + font-size: $banner-font-size + grid-template-areas: "prepend content actions" + grid-template-columns: max-content auto max-content + grid-template-rows: max-content max-content + line-height: $banner-line-height + overflow: hidden + padding-inline: $banner-padding-inline-start $banner-padding-inline-end + padding-top: $banner-padding * 2 + padding-bottom: $banner-padding * 2 + position: relative + width: $banner-width + + @include tools.border($banner-border...) + @include tools.elevation($banner-elevation) + @include tools.position($banner-positions) + @include tools.rounded($banner-border-radius) + @include tools.theme($banner-theme...) + + &--rounded + @include tools.rounded($banner-rounded-border-radius) + + &--stacked + &:not(.v-banner--one-line) + grid-template-areas: "prepend content" ". actions" + + .v-banner-text + padding-inline-end: $banner-stacked-padding-inline-end + + @at-root + @include tools.density('v-banner', $banner-density) using ($modifier) + .v-banner-actions + margin-bottom: -($banner-padding + $modifier) + + &.v-banner--one-line + padding-top: $banner-padding + $modifier + padding-bottom: $banner-padding + $modifier + + .v-banner-actions + margin-bottom: 0 + + @if ($modifier == 0px) + &.v-banner--one-line + padding-top: $banner-padding + $modifier + 2 + + &.v-banner--two-line + padding-top: $banner-padding * 2 + $modifier + padding-bottom: $banner-padding * 2 + $modifier + + &.v-banner--three-line + padding-top: $banner-padding * 3 + $modifier + padding-bottom: $banner-padding * 2 + $modifier + + &:not(.v-banner--one-line), + &.v-banner--two-line, + &.v-banner--three-line + .v-banner-actions + margin-top: $banner-action-margin + $modifier + + &--sticky + top: $banner-sticky-top + z-index: $banner-sticky-z-index + + .v-banner__content + align-items: center + display: flex + grid-area: content + + .v-banner__prepend + align-self: flex-start + grid-area: prepend + margin-inline-end: $banner-prepend-margin-end + + .v-banner-actions + align-self: flex-end + display: flex + flex: 0 1 + grid-area: actions + justify-content: flex-end + + .v-banner--two-line &, + .v-banner--three-line & + margin-top: $banner-actions-line-margin-top + + .v-banner-text + -webkit-box-orient: vertical + display: -webkit-box + padding-inline-end: $banner-text-padding-end + overflow: hidden + + .v-banner--one-line & + -webkit-line-clamp: 1 + + .v-banner--two-line & + -webkit-line-clamp: 2 + + .v-banner--three-line & + -webkit-line-clamp: 3 + + .v-banner--two-line &, + .v-banner--three-line & + align-self: flex-start diff --git a/packages/vuetify/src/components/VBanner/VBanner.tsx b/packages/vuetify/src/components/VBanner/VBanner.tsx new file mode 100644 index 0000000..6f0404e --- /dev/null +++ b/packages/vuetify/src/components/VBanner/VBanner.tsx @@ -0,0 +1,165 @@ +// Styles +import './VBanner.sass' + +// Components +import { VBannerActions } from './VBannerActions' +import { VBannerText } from './VBannerText' +import { VAvatar } from '@/components/VAvatar' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeDisplayProps, useDisplay } from '@/composables/display' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { IconValue } from '@/composables/icons' +import { makeLocationProps, useLocation } from '@/composables/location' +import { makePositionProps, usePosition } from '@/composables/position' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export type VBannerSlots = { + default: never + prepend: never + text: never + actions: never +} + +export const makeVBannerProps = propsFactory({ + avatar: String, + bgColor: String, + color: String, + icon: IconValue, + lines: String as PropType<'one' | 'two' | 'three'>, + stacked: Boolean, + sticky: Boolean, + text: String, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeDimensionProps(), + ...makeDisplayProps({ mobile: null }), + ...makeElevationProps(), + ...makeLocationProps(), + ...makePositionProps(), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), +}, 'VBanner') + +export const VBanner = genericComponent()({ + name: 'VBanner', + + props: makeVBannerProps(), + + setup (props, { slots }) { + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'bgColor') + const { borderClasses } = useBorder(props) + const { densityClasses } = useDensity(props) + const { displayClasses, mobile } = useDisplay(props) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { locationStyles } = useLocation(props) + const { positionClasses } = usePosition(props) + const { roundedClasses } = useRounded(props) + + const { themeClasses } = provideTheme(props) + + const color = toRef(props, 'color') + const density = toRef(props, 'density') + + provideDefaults({ VBannerActions: { color, density } }) + + useRender(() => { + const hasText = !!(props.text || slots.text) + const hasPrependMedia = !!(props.avatar || props.icon) + const hasPrepend = !!(hasPrependMedia || slots.prepend) + + return ( + + { hasPrepend && ( +
+ { !slots.prepend ? ( + + ) : ( + + )} +
+ )} + +
+ { hasText && ( + + { slots.text?.() ?? props.text } + + )} + + { slots.default?.() } +
+ + { slots.actions && ( + + )} + + ) + }) + }, +}) + +export type VBanner = InstanceType diff --git a/packages/vuetify/src/components/VBanner/VBannerActions.tsx b/packages/vuetify/src/components/VBanner/VBannerActions.tsx new file mode 100644 index 0000000..9cdb6a7 --- /dev/null +++ b/packages/vuetify/src/components/VBanner/VBannerActions.tsx @@ -0,0 +1,46 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVBannerActionsProps = propsFactory({ + color: String, + density: String, + + ...makeComponentProps(), +}, 'VBannerActions') + +export const VBannerActions = genericComponent()({ + name: 'VBannerActions', + + props: makeVBannerActionsProps(), + + setup (props, { slots }) { + provideDefaults({ + VBtn: { + color: props.color, + density: props.density, + slim: true, + variant: 'text', + }, + }) + + useRender(() => ( +
+ { slots.default?.() } +
+ )) + + return {} + }, +}) + +export type VBannerActions = InstanceType diff --git a/packages/vuetify/src/components/VBanner/VBannerText.ts b/packages/vuetify/src/components/VBanner/VBannerText.ts new file mode 100644 index 0000000..15483cc --- /dev/null +++ b/packages/vuetify/src/components/VBanner/VBannerText.ts @@ -0,0 +1,6 @@ +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VBannerText = createSimpleFunctional('v-banner-text') + +export type VBannerText = InstanceType diff --git a/packages/vuetify/src/components/VBanner/_variables.scss b/packages/vuetify/src/components/VBanner/_variables.scss new file mode 100644 index 0000000..8aba976 --- /dev/null +++ b/packages/vuetify/src/components/VBanner/_variables.scss @@ -0,0 +1,47 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// Defaults +$banner-action-margin: 20px !default; +$banner-actions-line-margin-top: 20px !default; +$banner-background: rgb(var(--v-theme-surface)) !default; +$banner-border-color: settings.$border-color-root !default; +$banner-border-radius: map.get(settings.$rounded, 0) !default; +$banner-border-style: settings.$border-style-root !default; +$banner-border-thin-width: thin !default; +$banner-border-width: 0 0 thin 0 !default; +$banner-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$banner-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; +$banner-elevation: 0 !default; +$banner-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default; +$banner-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default; +$banner-padding-inline-start: 16px !default; +$banner-padding-inline-end: 8px !default; +$banner-padding: 8px !default; +$banner-positions: absolute fixed sticky !default; +$banner-prepend-margin-end: 24px !default; +$banner-rounded-border-radius: settings.$border-radius-root !default; +$banner-stacked-padding-inline-end: 36px !default; +$banner-sticky-top: 0 !default; +$banner-sticky-z-index: 1 !default; +$banner-text-padding-end: 90px !default; +$banner-width: 100% !default; + +// Mobile +$banner-mobile-avatar-margin-end: 16px !default; +$banner-mobile-content-padding-end: 8px !default; +$banner-mobile-padding-end: 8px !default; +$banner-mobile-padding-start: 16px !default; + +$banner-border: ( + $banner-border-color, + $banner-border-style, + $banner-border-width, + $banner-border-thin-width +) !default; + +$banner-theme: ( + $banner-background, + $banner-color +) !default; diff --git a/packages/vuetify/src/components/VBanner/index.ts b/packages/vuetify/src/components/VBanner/index.ts new file mode 100644 index 0000000..3d8ed34 --- /dev/null +++ b/packages/vuetify/src/components/VBanner/index.ts @@ -0,0 +1,3 @@ +export { VBanner } from './VBanner' +export { VBannerActions } from './VBannerActions' +export { VBannerText } from './VBannerText' diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass new file mode 100644 index 0000000..5a3db5f --- /dev/null +++ b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass @@ -0,0 +1,58 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-bottom-navigation + display: flex + max-width: 100% + overflow: hidden + position: absolute + transition: $bottom-navigation-transition + + @include tools.border($bottom-navigation-border...) + @include tools.rounded($bottom-navigation-border-radius) + @include tools.theme($bottom-navigation-theme...) + + &--active + @include tools.elevation($bottom-navigation-elevation) + + .v-bottom-navigation__content + display: flex + flex: none + font-size: $bottom-navigation-content-font-size + justify-content: center + transition: inherit + width: 100% + + .v-bottom-navigation & + > .v-btn + font-size: inherit + height: $bottom-navigation-height + max-width: $bottom-navigation-max-width + min-width: $bottom-navigation-min-width + text-transform: $bottom-navigation-text-transform + transition: inherit + width: auto + + @include tools.rounded(0) + + .v-btn__content, + .v-btn__icon + transition: inherit + + .v-btn__icon + font-size: $bottom-navigation-icon-font-size + + .v-bottom-navigation--grow & + > .v-btn + flex-grow: 1 + + .v-bottom-navigation--shift & + .v-btn + &:not(.v-btn--selected) + .v-btn__content > span + transition: inherit + opacity: 0 + + .v-btn__content + transform: $bottom-navigation-shift-icon-transform diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx new file mode 100644 index 0000000..bb05f00 --- /dev/null +++ b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx @@ -0,0 +1,151 @@ +// Styles +import './VBottomNavigation.sass' + +// Components +import { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeGroupProps, useGroup } from '@/composables/group' +import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { useSsrBoot } from '@/composables/ssrBoot' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, useTheme } from '@/composables/theme' + +// Utilities +import { computed, toRef } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { GenericProps } from '@/util' + +export const makeVBottomNavigationProps = propsFactory({ + baseColor: String, + bgColor: String, + color: String, + grow: Boolean, + mode: { + type: String, + validator: (v: any) => !v || ['horizontal', 'shift'].includes(v), + }, + height: { + type: [Number, String], + default: 56, + }, + active: { + type: Boolean, + default: true, + }, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeElevationProps(), + ...makeRoundedProps(), + ...makeLayoutItemProps({ name: 'bottom-navigation' }), + ...makeTagProps({ tag: 'header' }), + ...makeGroupProps({ selectedClass: 'v-btn--selected' }), + ...makeThemeProps(), +}, 'VBottomNavigation') + +export const VBottomNavigation = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: { default: never }, +) => GenericProps>()({ + name: 'VBottomNavigation', + + props: makeVBottomNavigationProps(), + + emits: { + 'update:active': (value: any) => true, + 'update:modelValue': (value: any) => true, + }, + + setup (props, { slots }) { + const { themeClasses } = useTheme() + const { borderClasses } = useBorder(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor')) + const { densityClasses } = useDensity(props) + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(props) + const { ssrBootStyles } = useSsrBoot() + const height = computed(() => ( + Number(props.height) - + (props.density === 'comfortable' ? 8 : 0) - + (props.density === 'compact' ? 16 : 0) + )) + const isActive = useProxiedModel(props, 'active', props.active) + const { layoutItemStyles, layoutIsReady } = useLayoutItem({ + id: props.name, + order: computed(() => parseInt(props.order, 10)), + position: computed(() => 'bottom'), + layoutSize: computed(() => isActive.value ? height.value : 0), + elementSize: height, + active: isActive, + absolute: toRef(props, 'absolute'), + }) + + useGroup(props, VBtnToggleSymbol) + + provideDefaults({ + VBtn: { + baseColor: toRef(props, 'baseColor'), + color: toRef(props, 'color'), + density: toRef(props, 'density'), + stacked: computed(() => props.mode !== 'horizontal'), + variant: 'text', + }, + }, { scoped: true }) + + useRender(() => { + return ( + + { slots.default && ( +
+ { slots.default() } +
+ )} + + ) + }) + + return layoutIsReady + }, +}) + +export type VBottomNavigation = InstanceType diff --git a/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx new file mode 100644 index 0000000..dde80eb --- /dev/null +++ b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx @@ -0,0 +1,41 @@ +/// + +// Components +import { VBottomNavigation } from '..' +import { VLayout } from '@/components/VLayout' + +describe('VBottomNavigation', () => { + it('should allow custom height', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-bottom-navigation').should('have.css', 'height', '200px') + }) + + it('should support density', () => { + cy.mount(({ density }: any) => ( + + + + )) + + cy.get('.v-bottom-navigation').should('have.css', 'height', '56px') + .setProps({ density: 'comfortable' }) + .get('.v-bottom-navigation').should('have.css', 'height', '48px') + .setProps({ density: 'compact' }) + .get('.v-bottom-navigation').should('have.css', 'height', '40px') + }) + + it('should not be visible if active is false', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-bottom-navigation').should('not.be.visible') + }) +}) diff --git a/packages/vuetify/src/components/VBottomNavigation/_variables.scss b/packages/vuetify/src/components/VBottomNavigation/_variables.scss new file mode 100644 index 0000000..9144dc3 --- /dev/null +++ b/packages/vuetify/src/components/VBottomNavigation/_variables.scss @@ -0,0 +1,42 @@ +@use 'sass:map'; +@use 'sass:math'; +@use '../../styles/settings'; +@use "../../styles/settings/variables"; +@use "../../styles/tools/functions"; + +// VBottomNavigation +$bottom-navigation-background: rgb(var(--v-theme-surface)) !default; +$bottom-navigation-border-color: settings.$border-color-root !default; +$bottom-navigation-border-radius: 0 !default; +$bottom-navigation-border-radius: map.get(settings.$rounded, '0') !default; +$bottom-navigation-border-style: settings.$border-style-root !default; +$bottom-navigation-border-thin-width: thin !default; +$bottom-navigation-border-width: 0 !default; +$bottom-navigation-button-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$bottom-navigation-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$bottom-navigation-content-font-size: functions.map-deep-get(variables.$typography, 'caption', 'size') !default; +$bottom-navigation-elevation: 4 !default; +$bottom-navigation-flat-elevation: 0 !default; +$bottom-navigation-height: 100% !default; +$bottom-navigation-icon-font-size: 1.5rem !default; +$bottom-navigation-max-width: 168px !default; +$bottom-navigation-min-width: 80px !default; +$bottom-navigation-opacity: var(--v-medium-emphasis-opacity) !default; +$bottom-navigation-shift-content-color: rgba(var(--v-theme-on-surface), 0) !default; +$bottom-navigation-shift-icon-top: math.div($bottom-navigation-icon-font-size, 3) !default; +$bottom-navigation-shift-icon-transform: translateY($bottom-navigation-shift-icon-top) !default; +$bottom-navigation-text-transform: none !default; +$bottom-navigation-transition: transform, color, .2s, .1s settings.$standard-easing !default; + +// Lists +$bottom-navigation-border: ( + $bottom-navigation-border-color, + $bottom-navigation-border-style, + $bottom-navigation-border-width, + $bottom-navigation-border-thin-width +) !default; + +$bottom-navigation-theme: ( + $bottom-navigation-background, + $bottom-navigation-color +) !default; diff --git a/packages/vuetify/src/components/VBottomNavigation/index.ts b/packages/vuetify/src/components/VBottomNavigation/index.ts new file mode 100644 index 0000000..a635a3e --- /dev/null +++ b/packages/vuetify/src/components/VBottomNavigation/index.ts @@ -0,0 +1 @@ +export { VBottomNavigation } from './VBottomNavigation' diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass new file mode 100644 index 0000000..f1de396 --- /dev/null +++ b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.sass @@ -0,0 +1,40 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +// Transition +@include tools.layer('transitions') + .bottom-sheet-transition + &-enter-from + transform: translateY(100%) + + &-leave-to + transform: translateY(100%) + +// Block +@include tools.layer('components') + .v-bottom-sheet + > .v-bottom-sheet__content.v-overlay__content + align-self: flex-end + border-radius: 0 + flex: 0 1 auto + left: 0 + right: 0 + margin-inline: 0 + margin-bottom: 0 + transition-duration: $bottom-sheet-transition-duration + width: 100% + max-width: 100% + overflow: visible + + @include tools.elevation($bottom-sheet-elevation) + + > .v-card, + > .v-sheet + border-radius: $bottom-sheet-border-radius + + &.v-bottom-sheet--inset + max-width: none + + @media #{map-get(settings.$display-breakpoints, 'sm-and-up')} + max-width: $bottom-sheet-inset-width diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx new file mode 100644 index 0000000..af6b3f1 --- /dev/null +++ b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx @@ -0,0 +1,64 @@ +// Styles +import './VBottomSheet.sass' + +// Components +import { makeVDialogProps, VDialog } from '@/components/VDialog/VDialog' + +// Composables +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { OverlaySlots } from '@/components/VOverlay/VOverlay' + +export const makeVBottomSheetProps = propsFactory({ + inset: Boolean, + + ...makeVDialogProps({ + transition: 'bottom-sheet-transition', + }), +}, 'VBottomSheet') + +export const VBottomSheet = genericComponent()({ + name: 'VBottomSheet', + + props: makeVBottomSheetProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { slots }) { + const isActive = useProxiedModel(props, 'modelValue') + + useRender(() => { + const dialogProps = VDialog.filterProps(props) + + return ( + + ) + }) + + return {} + }, +}) + +export type VBottomSheet = InstanceType diff --git a/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.cy.tsx b/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.cy.tsx new file mode 100644 index 0000000..51f41a0 --- /dev/null +++ b/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.cy.tsx @@ -0,0 +1,24 @@ +/// + +// Components +import { VBottomSheet } from '..' +import { VSheet } from '@/components/VSheet' + +// Tests +describe('VBottomSheet', () => { + it('reduces maximum width with the inset prop', () => { + cy.mount(({ inset }: any) => ( + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed hic, iusto tenetur rerum eum libero numquam reprehenderit + + + )) + .get('.v-bottom-sheet') + .should('have.not.class', 'v-bottom-sheet--inset') + .setProps({ inset: true }) + .get('.v-bottom-sheet') + .should('have.class', 'v-bottom-sheet--inset') + .should('have.css', 'max-width', '70%') + }) +}) diff --git a/packages/vuetify/src/components/VBottomSheet/_variables.scss b/packages/vuetify/src/components/VBottomSheet/_variables.scss new file mode 100644 index 0000000..7f99469 --- /dev/null +++ b/packages/vuetify/src/components/VBottomSheet/_variables.scss @@ -0,0 +1,6 @@ +@use '../../styles/settings'; + +$bottom-sheet-elevation: 12 !default; +$bottom-sheet-inset-width: 70% !default; +$bottom-sheet-border-radius: 0 !default; +$bottom-sheet-transition-duration: .2s !default; diff --git a/packages/vuetify/src/components/VBottomSheet/index.ts b/packages/vuetify/src/components/VBottomSheet/index.ts new file mode 100644 index 0000000..4b6fbc2 --- /dev/null +++ b/packages/vuetify/src/components/VBottomSheet/index.ts @@ -0,0 +1 @@ +export { VBottomSheet } from './VBottomSheet' diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass new file mode 100644 index 0000000..edae8df --- /dev/null +++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass @@ -0,0 +1,49 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-breadcrumbs + display: flex + align-items: center + line-height: $breadcrumbs-line-height + padding: $breadcrumbs-padding-y $breadcrumbs-padding-x + + &--rounded + @include tools.rounded($breadcrumbs-rounded-border-radius) + + @at-root + @include tools.density('v-breadcrumbs', $breadcrumbs-density) using ($modifier) + padding-top: #{$breadcrumbs-padding-y + $modifier} + padding-bottom: #{$breadcrumbs-padding-y + $modifier} + + .v-breadcrumbs__prepend + align-items: center + display: inline-flex + + .v-breadcrumbs-item + align-items: center + color: inherit + display: inline-flex + padding: $breadcrumbs-item-padding + text-decoration: none + vertical-align: $breadcrumbs-vertical-align + + &--disabled + opacity: $breadcrumbs-item-disabled-opacity + pointer-events: none + + &--link + color: inherit + text-decoration: none + + &--link:hover + text-decoration: $breadcrumbs-item-link-text-decoration + + .v-icon + font-size: $breadcrumbs-item-icon-font-size + margin-inline: $breadcrumbs-item-icon-margin-inline-start $breadcrumbs-item-icon-margin-inline-end + + .v-breadcrumbs-divider + display: inline-block + padding: $breadcrumbs-divider-padding + vertical-align: $breadcrumbs-vertical-align diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx new file mode 100644 index 0000000..c9af34e --- /dev/null +++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx @@ -0,0 +1,167 @@ +// Styles +import './VBreadcrumbs.sass' + +// Components +import { VBreadcrumbsDivider } from './VBreadcrumbsDivider' +import { VBreadcrumbsItem } from './VBreadcrumbsItem' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps, useDensity } from '@/composables/density' +import { IconValue } from '@/composables/icons' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { computed, toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { LinkProps } from '@/composables/router' +import type { GenericProps } from '@/util' + +export type InternalBreadcrumbItem = Partial & { + title: string + disabled?: boolean +} + +export type BreadcrumbItem = string | InternalBreadcrumbItem + +export const makeVBreadcrumbsProps = propsFactory({ + activeClass: String, + activeColor: String, + bgColor: String, + color: String, + disabled: Boolean, + divider: { + type: String, + default: '/', + }, + icon: IconValue, + items: { + type: Array as PropType, + default: () => ([]), + }, + + ...makeComponentProps(), + ...makeDensityProps(), + ...makeRoundedProps(), + ...makeTagProps({ tag: 'ul' }), +}, 'VBreadcrumbs') + +export const VBreadcrumbs = genericComponent( + props: { + items?: T[] + }, + slots: { + prepend: never + title: { item: InternalBreadcrumbItem, index: number } + divider: { item: T, index: number } + item: { item: InternalBreadcrumbItem, index: number } + default: never + } +) => GenericProps>()({ + name: 'VBreadcrumbs', + + props: makeVBreadcrumbsProps(), + + setup (props, { slots }) { + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor')) + const { densityClasses } = useDensity(props) + const { roundedClasses } = useRounded(props) + + provideDefaults({ + VBreadcrumbsDivider: { + divider: toRef(props, 'divider'), + }, + VBreadcrumbsItem: { + activeClass: toRef(props, 'activeClass'), + activeColor: toRef(props, 'activeColor'), + color: toRef(props, 'color'), + disabled: toRef(props, 'disabled'), + }, + }) + + const items = computed(() => props.items.map(item => { + return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item } + })) + + useRender(() => { + const hasPrepend = !!(slots.prepend || props.icon) + + return ( + + { hasPrepend && ( +
  • + { !slots.prepend ? ( + + ) : ( + + )} +
    • + )} + + { items.value.map(({ item, raw }, index, array) => ( + <> + { slots.item?.({ item, index }) ?? ( + = array.length - 1 } + { ...(typeof item === 'string' ? { title: item } : item) } + v-slots={{ + default: slots.title ? () => slots.title?.({ item, index }) : undefined, + }} + /> + )} + + { index < array.length - 1 && ( + slots.divider?.({ item: raw, index }) : undefined, + }} + /> + )} + + ))} + + { slots.default?.() } +     + ) + }) + + return {} + }, +}) + +export type VBreadcrumbs = InstanceType diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx new file mode 100644 index 0000000..3673449 --- /dev/null +++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx @@ -0,0 +1,35 @@ +// Composables +import { makeComponentProps } from '@/composables/component' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVBreadcrumbsDividerProps = propsFactory({ + divider: [Number, String], + + ...makeComponentProps(), +}, 'VBreadcrumbsDivider') + +export const VBreadcrumbsDivider = genericComponent()({ + name: 'VBreadcrumbsDivider', + + props: makeVBreadcrumbsDividerProps(), + + setup (props, { slots }) { + useRender(() => ( +
  • + { slots?.default?.() ?? props.divider } +
    • + )) + + return {} + }, +}) + +export type VBreadcrumbsDivider = InstanceType diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx new file mode 100644 index 0000000..3d85047 --- /dev/null +++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx @@ -0,0 +1,72 @@ +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeRouterProps, useLink } from '@/composables/router' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVBreadcrumbsItemProps = propsFactory({ + active: Boolean, + activeClass: String, + activeColor: String, + color: String, + disabled: Boolean, + title: String, + + ...makeComponentProps(), + ...makeRouterProps(), + ...makeTagProps({ tag: 'li' }), +}, 'VBreadcrumbsItem') + +export const VBreadcrumbsItem = genericComponent()({ + name: 'VBreadcrumbsItem', + + props: makeVBreadcrumbsItemProps(), + + setup (props, { slots, attrs }) { + const link = useLink(props, attrs) + const isActive = computed(() => props.active || link.isActive?.value) + const color = computed(() => isActive.value ? props.activeColor : props.color) + + const { textColorClasses, textColorStyles } = useTextColor(color) + + useRender(() => { + return ( + + { !link.isLink.value ? slots.default?.() ?? props.title : ( + + { slots.default?.() ?? props.title } + + )} + + ) + }) + return {} + }, +}) + +export type VBreadcrumbsItem = InstanceType diff --git a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx new file mode 100644 index 0000000..0f2f228 --- /dev/null +++ b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx @@ -0,0 +1,193 @@ +/// + +// Components +import { VBreadcrumbs } from '..' +import { Application } from '../../../../cypress/templates' +import { VBreadcrumbsDivider } from '../VBreadcrumbsDivider' +import { VBreadcrumbsItem } from '../VBreadcrumbsItem' + +// Utilities +import { createRouter, createWebHistory } from 'vue-router' + +describe('VBreadcrumbs', () => { + it('should use item slot', () => { + cy.mount(() => ( + + + {{ + title: ({ item }: any) => `${item.title}!`, + }} + + + )) + + cy.get('.v-breadcrumbs-item').should('have.length', 2).eq(0).should('have.text', 'hello!') + }) + + it('should use divider slot', () => { + cy.mount(() => ( + + + {{ + divider: () => '-', + }} + + + )) + + cy.get('.v-breadcrumbs-divider').should('have.length', 1).eq(0).should('have.text', '-') + }) + + it('should render icon', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-icon').should('exist').should('have.class', 'mdi-home').should('have.length', 1) + }) + + it('should use bg-color', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-breadcrumbs').should('have.class', 'bg-primary') + }) + + it('should use color', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-breadcrumbs-item').should('have.class', 'text-primary') + }) + + it('should render link if href is set', () => { + cy.mount(() => ( + + + + )) + + cy.get('a.v-breadcrumbs-item--link').should('exist').should('have.attr', 'href') + }) + + it('should use router if to is set', () => { + const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + component: { template: 'Home' }, + }, + { + path: '/about', + component: { template: 'About' }, + }, + ], + }) + + cy.mount(() => ( + + + + ), { + global: { + plugins: [router], + }, + }) + + cy.get('.v-breadcrumbs').should('exist') + + cy.get('.v-breadcrumbs-item').should('exist').eq(0).click() + cy.then(() => { + expect(router.currentRoute.value.path).to.equal('/about') + }) + + // Return back to root to not break succeeding tests that don't have /about path. + cy.get('.v-breadcrumbs').then(() => { + router.push('/') + }) + }) + + it('should apply active color', () => { + const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + component: { template: 'Home' }, + }, + { + path: '/world', + component: { template: 'World' }, + }, + ], + }) + + cy.mount(() => ( + + + + / + + + + ), { + global: { + plugins: [router], + }, + }) + + cy.get('.v-breadcrumbs-item').eq(0).should('have.class', 'text-primary') + + cy.get('.v-breadcrumbs').then(() => { + router.push('/world') + }) + + cy.get('.v-breadcrumbs-item').eq(1).should('have.class', 'text-primary') + }) + + it('should disabled last item by default if using items prop', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-breadcrumbs-item').last().should('have.class', 'v-breadcrumbs-item--disabled') + }) + + it('should be possible to override last item disabled by default', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-breadcrumbs-item').last().should('not.have.class', 'v-breadcrumbs-item--disabled') + }) + + it('should provide default divider', () => { + cy.mount(() => ( + + + + + + + + + + )) + + cy.get('.v-breadcrumbs-divider').first().should('have.text', '/') + cy.get('.v-breadcrumbs-divider').last().should('have.text', '-') + }) +}) diff --git a/packages/vuetify/src/components/VBreadcrumbs/_variables.scss b/packages/vuetify/src/components/VBreadcrumbs/_variables.scss new file mode 100644 index 0000000..17a9903 --- /dev/null +++ b/packages/vuetify/src/components/VBreadcrumbs/_variables.scss @@ -0,0 +1,17 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +// Defaults +$breadcrumbs-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; +$breadcrumbs-divider-padding: 0 8px !default; +$breadcrumbs-item-disabled-opacity: var(--v-disabled-opacity) !default; +$breadcrumbs-item-icon-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default; +$breadcrumbs-item-icon-margin-inline-end: 2px !default; +$breadcrumbs-item-icon-margin-inline-start: -4px !default; +$breadcrumbs-item-link-text-decoration: underline !default; +$breadcrumbs-item-padding: 0 4px !default; +$breadcrumbs-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default; +$breadcrumbs-padding-y: 16px !default; +$breadcrumbs-padding-x: 12px !default; +$breadcrumbs-rounded-border-radius: settings.$border-radius-root !default; +$breadcrumbs-vertical-align: middle !default; diff --git a/packages/vuetify/src/components/VBreadcrumbs/index.ts b/packages/vuetify/src/components/VBreadcrumbs/index.ts new file mode 100644 index 0000000..492d5cf --- /dev/null +++ b/packages/vuetify/src/components/VBreadcrumbs/index.ts @@ -0,0 +1,3 @@ +export { VBreadcrumbs } from './VBreadcrumbs' +export { VBreadcrumbsItem } from './VBreadcrumbsItem' +export { VBreadcrumbsDivider } from './VBreadcrumbsDivider' diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass new file mode 100644 index 0000000..8ed3b7b --- /dev/null +++ b/packages/vuetify/src/components/VBtn/VBtn.sass @@ -0,0 +1,250 @@ +@use 'sass:math' +@use 'sass:map' +@use '../../styles/settings' +@use '../../styles/tools' +@use './mixins' as * +@use './variables' as * + +@include tools.layer('components') + .v-btn + align-items: center + border-radius: $button-border-radius + display: inline-grid + grid-template-areas: "prepend content append" + grid-template-columns: max-content auto max-content + font-weight: $button-font-weight + justify-content: center + letter-spacing: $button-text-letter-spacing + line-height: $button-line-height + max-width: $button-max-width + outline: none + position: relative + text-decoration: none + text-indent: $button-text-letter-spacing + text-transform: $button-text-transform + transition-property: $button-transition-property + transition-duration: 0.28s + transition-timing-function: settings.$standard-easing + user-select: none + vertical-align: $button-vertical-align + flex-shrink: 0 + + @at-root + @include button-sizes() + @include button-density('height', $button-density) + + @include tools.border($button-border...) + @include tools.position($button-positions) + @include tools.states('.v-btn__overlay') + @include tools.variant($button-variants...) + + @supports selector(:focus-visible) + &::after + @include tools.absolute(true) + pointer-events: none + border: 2px solid currentColor + border-radius: inherit + opacity: 0 + transition: opacity .2s ease-in-out + + &:focus-visible::after + opacity: calc(.25 * var(--v-theme-overlay-multiplier)) + + &--icon + border-radius: $button-icon-border-radius + min-width: 0 + padding: 0 + + // ensure that default + // v-icon size is 24px + &.v-btn--size-default + --v-btn-size: #{$button-icon-font-size} + + @at-root & + @include button-density(('width', 'height'), $button-icon-density) + + &--elevated + &:hover, + &:focus + +tools.elevation(map.get($button-elevation, 'hover')) + + &:active + +tools.elevation(map.get($button-elevation, 'active')) + + &--flat + box-shadow: none + + &--block + display: flex + flex: 1 0 auto + min-width: 100% + + &--disabled + pointer-events: none + + @if ($button-colored-disabled) + opacity: $button-disabled-opacity + &:hover + opacity: $button-disabled-opacity + @else + opacity: 1 + &.v-btn + // specificity has to be higher to override theme !important + color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important + + &.v-btn--variant-elevated, + &.v-btn--variant-flat + box-shadow: none + + @if ($button-colored-disabled) + opacity: 1 + color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) + background: rgb(var(--v-theme-surface)) + @else + background: rgb(var(--v-theme-surface)) !important + + .v-btn__overlay + // __overlay uses currentColor, so we need to divide + // by the text opacity to get the correct value + opacity: math.div($button-disabled-overlay, $button-disabled-opacity) + + &--loading + pointer-events: none + + .v-btn__content, + .v-btn__prepend, + .v-btn__append + opacity: 0 + + &--stacked + grid-template-areas: "prepend" "content" "append" + grid-template-columns: auto + grid-template-rows: max-content max-content max-content + justify-items: center + align-content: center + + .v-btn__content + flex-direction: column + line-height: $button-stacked-line-height + + .v-btn__prepend, + .v-btn__append, + .v-btn__content > .v-icon--start, + .v-btn__content > .v-icon--end + margin-inline: 0 + + .v-btn__prepend, + .v-btn__content > .v-icon--start + margin-bottom: $button-stacked-icon-margin + + .v-btn__append, + .v-btn__content > .v-icon--end + margin-top: $button-stacked-icon-margin + + @at-root + @include button-sizes($button-stacked-sizes, true) + @include button-density('height', $button-stacked-density) + + &--slim + padding: $button-slim-padding + + &--readonly + pointer-events: none + + &--rounded + @include tools.rounded($button-rounded-border-radius) + + &.v-btn--icon + @include tools.rounded($button-border-radius) + + .v-icon + --v-icon-size-multiplier: #{calc(18/21)} + + &--icon + .v-icon + --v-icon-size-multiplier: 1 + + &--stacked + .v-icon + --v-icon-size-multiplier: #{calc(24/21)} + + .v-btn__loader + align-items: center + display: flex + height: 100% + justify-content: center + left: 0 + position: absolute + top: 0 + width: 100% + + > .v-progress-circular + width: $button-loader-size + height: $button-loader-size + + .v-btn__content, + .v-btn__prepend, + .v-btn__append + align-items: center + display: flex + transition: $button-content-transition + + .v-btn__prepend + grid-area: prepend + margin-inline: $button-margin-start $button-margin-end + + .v-btn--slim & + margin-inline-start: 0 + + .v-btn__append + grid-area: append + margin-inline: $button-margin-end $button-margin-start + + .v-btn--slim & + margin-inline-end: 0 + + .v-btn__content + grid-area: content + justify-content: center + white-space: $button-white-space + + > .v-icon--start + margin-inline: $button-margin-start $button-margin-end + + > .v-icon--end + margin-inline: $button-margin-end $button-margin-start + + .v-btn--stacked & + white-space: normal + + .v-btn__overlay + background-color: currentColor + border-radius: inherit + opacity: 0 + transition: opacity .2s ease-in-out + + .v-btn__overlay, + .v-btn__underlay + @include tools.absolute() + pointer-events: none + + // VCard + .v-btn + ~ .v-btn:not(.v-btn-toggle .v-btn) + .v-card-actions & + margin-inline-start: $button-card-actions-margin + + // VPagination + .v-btn + .v-pagination & + @include tools.rounded($button-pagination-border-radius) + + &--rounded + .v-pagination & + @include tools.rounded($button-pagination-rounded-border-radius) + + &__overlay + transition: none + + .v-pagination__item--is-active & + opacity: $button-pagination-active-overlay-opacity diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx new file mode 100644 index 0000000..1c9d0ff --- /dev/null +++ b/packages/vuetify/src/components/VBtn/VBtn.tsx @@ -0,0 +1,310 @@ +// Styles +import './VBtn.sass' + +// Components +import { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' +import { VProgressCircular } from '@/components/VProgressCircular' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeGroupItemProps, useGroupItem } from '@/composables/group' +import { IconValue } from '@/composables/icons' +import { makeLoaderProps, useLoader } from '@/composables/loader' +import { makeLocationProps, useLocation } from '@/composables/location' +import { makePositionProps, usePosition } from '@/composables/position' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeRouterProps, useLink } from '@/composables/router' +import { useSelectLink } from '@/composables/selectLink' +import { makeSizeProps, useSize } from '@/composables/size' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' + +// Directives +import { Ripple } from '@/directives/ripple' + +// Utilities +import { computed, withDirectives } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { RippleDirectiveBinding } from '@/directives/ripple' + +export type VBtnSlots = { + default: never + prepend: never + append: never + loader: never +} + +export const makeVBtnProps = propsFactory({ + active: { + type: Boolean, + default: undefined, + }, + baseColor: String, + symbol: { + type: null, + default: VBtnToggleSymbol, + }, + flat: Boolean, + icon: [Boolean, String, Function, Object] as PropType, + prependIcon: IconValue, + appendIcon: IconValue, + + block: Boolean, + readonly: Boolean, + slim: Boolean, + stacked: Boolean, + + ripple: { + type: [Boolean, Object] as PropType, + default: true, + }, + + text: String, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeDimensionProps(), + ...makeElevationProps(), + ...makeGroupItemProps(), + ...makeLoaderProps(), + ...makeLocationProps(), + ...makePositionProps(), + ...makeRoundedProps(), + ...makeRouterProps(), + ...makeSizeProps(), + ...makeTagProps({ tag: 'button' }), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'elevated' } as const), +}, 'VBtn') + +export const VBtn = genericComponent()({ + name: 'VBtn', + + props: makeVBtnProps(), + + emits: { + 'group:selected': (val: { value: boolean }) => true, + }, + + setup (props, { attrs, slots }) { + const { themeClasses } = provideTheme(props) + const { borderClasses } = useBorder(props) + const { densityClasses } = useDensity(props) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { loaderClasses } = useLoader(props) + const { locationStyles } = useLocation(props) + const { positionClasses } = usePosition(props) + const { roundedClasses } = useRounded(props) + const { sizeClasses, sizeStyles } = useSize(props) + const group = useGroupItem(props, props.symbol, false) + const link = useLink(props, attrs) + + const isActive = computed(() => { + if (props.active !== undefined) { + return props.active + } + + if (link.isLink.value) { + return link.isActive?.value + } + + return group?.isSelected.value + }) + + const variantProps = computed(() => { + const showColor = ( + (group?.isSelected.value && (!link.isLink.value || link.isActive?.value)) || + (!group || link.isActive?.value) + ) + return ({ + color: showColor ? props.color ?? props.baseColor : props.baseColor, + variant: props.variant, + }) + }) + const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps) + + const isDisabled = computed(() => group?.disabled.value || props.disabled) + const isElevated = computed(() => { + return props.variant === 'elevated' && !(props.disabled || props.flat || props.border) + }) + const valueAttr = computed(() => { + if (props.value === undefined || typeof props.value === 'symbol') return undefined + + return Object(props.value) === props.value + ? JSON.stringify(props.value, null, 0) + : props.value + }) + + function onClick (e: MouseEvent) { + if ( + isDisabled.value || + (link.isLink.value && ( + e.metaKey || + e.ctrlKey || + e.shiftKey || + (e.button !== 0) || + attrs.target === '_blank' + )) + ) return + + link.navigate?.(e) + group?.toggle() + } + + useSelectLink(link, group?.select) + + useRender(() => { + const Tag = (link.isLink.value) ? 'a' : props.tag + const hasPrepend = !!(props.prependIcon || slots.prepend) + const hasAppend = !!(props.appendIcon || slots.append) + const hasIcon = !!(props.icon && props.icon !== true) + + return withDirectives( + + { genOverlays(true, 'v-btn') } + + { !props.icon && hasPrepend && ( + + { !slots.prepend ? ( + + ) : ( + + )} + + )} + + + { (!slots.default && hasIcon) ? ( + + ) : ( + + { slots.default?.() ?? props.text } + + )} + + + { !props.icon && hasAppend && ( + + { !slots.append ? ( + + ) : ( + + )} + + )} + + { !!props.loading && ( + + { slots.loader?.() ?? ( + + )} + + )} + , + [[ + Ripple, + !isDisabled.value && !!props.ripple, + '', + { center: !!props.icon }, + ]] + ) + }) + + return { group } + }, +}) + +export type VBtn = InstanceType diff --git a/packages/vuetify/src/components/VBtn/__tests__/VBtn.spec.cy.tsx b/packages/vuetify/src/components/VBtn/__tests__/VBtn.spec.cy.tsx new file mode 100644 index 0000000..6273c35 --- /dev/null +++ b/packages/vuetify/src/components/VBtn/__tests__/VBtn.spec.cy.tsx @@ -0,0 +1,301 @@ +/// + +import { VBtn } from '../VBtn' + +// Utilities +import { createRouter, createWebHistory } from 'vue-router' +import { generate, gridOn } from '@/../cypress/templates' + +const anchor = { + href: '#my-anchor', + hash: 'my-anchor', +} + +// TODO: generate these from types +const colors = ['success', 'info', 'warning', 'error', 'invalid'] +const sizes = ['x-small', 'small', 'default', 'large', 'x-large'] as const +const densities = ['default', 'comfortable', 'compact'] as const +const variants = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'] as const +const props = { + color: colors, + // variant: variants, + // disabled: false, + // loading: false, +} + +const stories = { + 'Default button': Basic button, + 'Small success button': Completed!, + 'Large, plain button w/ error': Whoops, + Loading: ( +
    + {{ loader: () => Loading..., default: () => 'Default Content' }} + {{ loader: () => Loading..., default: () => 'Default Content' }} + {{ loader: () => Loading... }} + Default Content +
    + ), + Icon: , + 'Density + size': gridOn(densities, sizes, (density, size) => + { size } + ), + Variants: gridOn(['no color', 'primary'], variants, (color, variant) => + { variant } + ), + 'Disabled variants': gridOn(['no color', 'primary'], variants, (color, variant) => + { variant } + ), + Stacked: gridOn([undefined], variants, (_, variant) => + { variant } + ), +} + +// Actual tests +describe('VBtn', () => { + describe('color', () => { + it('supports default color props', () => { + cy.mount(() => ( + <> + { colors.map(color => ( + + { color } button + + ))} + + )) + .get('button') + .should('have.length', colors.length) + .then(subjects => { + Array.from(subjects).forEach((subject, idx) => { + expect(subject).to.contain(colors[idx]) + }) + }) + }) + }) + + describe('icons', () => { + it('adds the icon class when true', () => { + cy.mount() + .get('button') + .should('have.class', 'v-btn--icon') + }) + + it('renders an icon inside', () => { + // TODO: Render VIcon instead of emoji + cy.mount(🐻) + .get('button') + .should('have.text', '🐻') + }) + }) + + describe('plain', () => { + it('should have the plain class when variant is plain', () => { + cy.mount(Plain) + .get('button') + .should('have.class', 'v-btn--variant-plain') + }) + }) + + describe('tag', () => { + it('renders the proper tag instead of a button', () => { + cy.mount(Click me) + .get('button') + .should('not.exist') + .get('custom-tag') + .should('have.text', 'Click me') + }) + }) + + describe('elevation', () => { + it('should have the correct elevation', () => { + cy.mount() + .get('button') + .should('have.class', 'elevation-24') + }) + }) + + describe('events', () => { + it('emits native click events', () => { + const click = cy.stub().as('click') + cy.mount(Click me) + .get('button') + .click() + cy.get('@click') + .should('have.been.called', 1) + cy.setProps({ href: undefined, to: '#my-anchor' }) + cy.get('@click') + .should('have.been.called', 2) + }) + + // Pending test, is "toggle" even going to be emitted anymore? + it.skip('emits toggle when used within a button group', () => { + // const register = jest.fn() + // const unregister = jest.fn() + // const toggle = jest.fn() + // const wrapper = mountFunction({ + // provide: { + // btnToggle: { register, unregister }, + // }, + // methods: { toggle }, + // }) + + // wrapper.trigger('click') + // expect(toggle).toHaveBeenCalled() + }) + }) + + // These tests were copied over from the previous Jest tests, + // but they are breaking because the features have not been implemented + describe.skip('disabled', () => { + // The actual behavior here is working, but the color class name isn't being removed + // We can _technically_ test that the background is NOT the color's background, + // but it's a bit brittle and I think it'll be better to check against the class name + it('should not add color classes if disabled', () => { + cy.mount() + .get('button') + .should('have.class', 'bg-success') + .get('button') + .should('have.class', 'v-btn--disabled') + .should('not.have.class', 'bg-success') + }) + }) + + describe.skip('activeClass', () => { + it('should use custom active-class', () => { + cy.mount(Active Class) + .get('.my-active-class') + .should('exist') + }) + }) + + // v-btn--tile isn't implemented at all + describe.skip('tile', () => { + it('applies the tile class when true', () => { + cy.mount() + .get('button') + .should('contain.class', 'v-btn--tile') + }) + + it('does not apply the tile class when false', () => { + cy.mount() + .get('button') + .should('not.contain.class', 'v-btn--tile') + }) + }) + + describe('href', () => { + it('should render an tag when using href prop', () => { + cy.mount(Click me) + .get('.v-btn') + .click() + cy.get('a') + .should('contain.text', 'Click me') + .should('have.focus') + cy.hash() + .should('contain', anchor.hash) + }) + + it('should change route when using to prop', () => { + const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + component: { template: 'Home' }, + }, + { + path: '/about', + component: { template: 'About' }, + }, + ], + }) + + cy.mount(Click me, { global: { plugins: [router] } }) + .get('.v-btn') + .click() + cy.get('a') + .should('contain.text', 'Click me') + .should('have.focus') + cy.url() + .should('contain', '/about') + }) + }) + + describe('value', () => { + it('should pass string values', () => { + const stringValue = 'Foobar' + + cy.mount() + .get('button') + .should('have.value', stringValue) + }) + + it('should stringify object', () => { + const objectValue = { value: {} } + cy.mount() + .get('button') + .should('have.value', JSON.stringify(objectValue, null, 0)) + }) + + it('should stringify number', () => { + const numberValue = 15 + cy.mount() + .get('button') + .should('have.value', JSON.stringify(numberValue, null, 0)) + }) + + it('should stringify array', () => { + const arrayValue = ['foo', 'bar'] + cy.mount() + .get('button') + .should('have.value', JSON.stringify(arrayValue, null, 0)) + }) + + it('should not generate a fallback value when not provided', () => { + cy.mount() + .get('button') + .should('not.have.value') + }) + }) + + describe('Reactivity', () => { + // tile is not implemented. + it.skip('tile', () => { + cy.mount(My button) + .get('button') + .should('contain.class', 'v-btn--tile') + cy.setProps({ tile: false }) + cy.get('button') + .should('not.contain.class', 'v-btn--tile') + }) + + it('disabled', () => { + cy.mount() + .get('button') + .should('have.class', 'v-btn--disabled') + cy.setProps({ disabled: false }) + cy.get('button') + .should('not.have.class', 'v-btn--disabled') + }) + + it('activeClass', () => { + cy.mount(Active Class) + .setProps({ activeClass: 'different-class' }) + cy.get('.different-class') + .should('not.exist') + }) + + it('plain', () => { + cy.mount(Plain) + .get('button') + .should('have.class', 'v-btn--variant-plain') + cy.setProps({ variant: 'default' }) + cy.get('button') + .should('not.have.class', 'v-btn--variant-plain') + }) + }) + + describe('Showcase', () => { + generate({ stories, props, component: VBtn }) + }) +}) diff --git a/packages/vuetify/src/components/VBtn/_mixins.scss b/packages/vuetify/src/components/VBtn/_mixins.scss new file mode 100644 index 0000000..9ada6af --- /dev/null +++ b/packages/vuetify/src/components/VBtn/_mixins.scss @@ -0,0 +1,38 @@ +@use 'sass:math'; +@use 'sass:map'; +@use 'sass:meta'; +@use '../../styles/settings'; +@use '../../styles/tools'; +@use './variables' as *; + +@mixin button-sizes ($map: $button-sizes, $immediate: false) { + @each $sizeName, $multiplier in settings.$size-scales { + $size: map.get($map, 'font-size') + math.div(2 * $multiplier, 16); + $height: map.get($map, 'height') + (settings.$size-scale * $multiplier); + + #{if($immediate, &, '')}.v-btn--size-#{$sizeName} { + --v-btn-size: #{$size}; + --v-btn-height: #{$height}; + font-size: var(--v-btn-size); + min-width: tools.roundEven($height * map.get($map, 'width-ratio')); + padding: 0 tools.roundEven(math.div($height, map.get($map, 'padding-ratio'))); + } + } +} + +@mixin button-density ($properties, $densities) { + @each $density, $multiplier in $densities { + $value: calc(var(--v-btn-height) + #{$multiplier * settings.$spacer}); + + &.v-btn--density-#{$density} { + @if meta.type-of($properties) == "list" { + @each $property in $properties { + #{$property}: $value; + } + } + @else { + #{$properties}: $value; + } + } + } +} diff --git a/packages/vuetify/src/components/VBtn/_variables.scss b/packages/vuetify/src/components/VBtn/_variables.scss new file mode 100644 index 0000000..e5eab86 --- /dev/null +++ b/packages/vuetify/src/components/VBtn/_variables.scss @@ -0,0 +1,96 @@ +@use 'sass:math'; +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// Defaults +// if false, disabled buttons will be greyed out +$button-colored-disabled: true !default; + +$button-background: rgb(var(--v-theme-surface)) !default; +$button-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$button-banner-actions-padding: 0 8px !default; // @deprecated +$button-pagination-active-overlay-opacity: var(--v-border-opacity) !default; +$button-pagination-border-radius: settings.$border-radius-root !default; +$button-pagination-rounded-border-radius: map.get(settings.$rounded, 'circle') !default; +$button-border-color: settings.$border-color-root !default; +$button-border-radius: settings.$border-radius-root !default; +$button-border-style: settings.$border-style-root !default; +$button-border-thin-width: thin !default; +$button-border-width: 0 !default; +$button-card-actions-margin: .5rem !default; +$button-card-actions-padding: 0 8px !default; // @deprecated +$button-content-transition: transform, opacity .2s settings.$standard-easing !default; +$button-disabled-opacity: 0.26 !default; +$button-disabled-overlay: 0.12 !default; +$button-elevation: ('default': 2, 'hover': 4, 'active': 8) !default; +$button-font-size: tools.map-deep-get(settings.$typography, 'button', 'size') !default; +$button-font-weight: tools.map-deep-get(settings.$typography, 'button', 'weight') !default; +$button-height: 36px !default; +$button-stacked-height: 72px !default; +$button-stacked-icon-margin: 4px !default; +$button-icon-border-radius: map.get(settings.$rounded, 'circle') !default; +$button-icon-font-size: 1rem !default; +$button-line-height: normal !default; +$button-loader-size: 1.5em !default; +$button-stacked-line-height: 1.25 !default; +$button-plain-opacity: .62 !default; +$button-padding-ratio: 2.25 !default; +$button-stacked-padding-ratio: 4.5 !default; +$button-margin-start-multiplier: -9 !default; +$button-margin-end-multiplier: 4.5 !default; +$button-margin-start: calc(var(--v-btn-height) / #{$button-margin-start-multiplier}) !default; +$button-margin-end: calc(var(--v-btn-height) / #{$button-margin-end-multiplier}) !default; +$button-max-width: 100% !default; +$button-positions: absolute fixed !default; +$button-text-letter-spacing: tools.map-deep-get(settings.$typography, 'button', 'letter-spacing') !default; +$button-text-transform: tools.map-deep-get(settings.$typography, 'button', 'text-transform') !default; +$button-transition-property: box-shadow, transform, opacity, background !default; +$button-vertical-align: middle !default; +$button-width-ratio: math.div(16, 9) !default; +$button-snackbar-action-padding: 0 8px !default; // @deprecated +$button-slim-padding: 0 8px !default; +$button-stacked-width-ratio: 1 !default; +$button-rounded-border-radius: map.get(settings.$rounded, 'xl') !default; +$button-white-space: nowrap !default; + +$button-density: ('default': 0, 'comfortable': -2, 'compact': -3) !default; +$button-stacked-density: ('default': 0, 'comfortable': -4, 'compact': -6) !default; +$button-icon-density: ('default': 3, 'comfortable': 0, 'compact': -2) !default; + +$button-border: ( + $button-border-color, + $button-border-style, + $button-border-width, + $button-border-thin-width +) !default; + +$button-sizes: () !default; +$button-sizes: map.merge( + ( + 'height': $button-height, + 'font-size': $button-font-size, + 'width-ratio': $button-width-ratio, + 'padding-ratio': $button-padding-ratio + ), + $button-sizes +); + +$button-stacked-sizes: () !default; +$button-stacked-sizes: map.merge( + ( + 'height': $button-stacked-height, + 'font-size': $button-font-size, + 'width-ratio': $button-stacked-width-ratio, + 'padding-ratio': $button-stacked-padding-ratio + ), + $button-stacked-sizes +); + +$button-variants: ( + $button-background, + $button-color, + map.get($button-elevation, 'default'), + $button-plain-opacity, + 'v-btn' +) !default; diff --git a/packages/vuetify/src/components/VBtn/index.ts b/packages/vuetify/src/components/VBtn/index.ts new file mode 100644 index 0000000..188bef1 --- /dev/null +++ b/packages/vuetify/src/components/VBtn/index.ts @@ -0,0 +1 @@ +export { VBtn } from './VBtn' diff --git a/packages/vuetify/src/components/VBtnGroup/VBtnGroup.sass b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.sass new file mode 100644 index 0000000..7eb5698 --- /dev/null +++ b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.sass @@ -0,0 +1,52 @@ +@use 'sass:selector' +@use '../../styles/tools' +@use '../VBtn/variables' as * +@use './variables' as * + +@include tools.layer('components') + .v-btn-group + $root: & + + display: inline-flex + flex-wrap: nowrap + max-width: 100% + min-width: 0 + overflow: hidden + vertical-align: middle + + @include tools.border($btn-group-border...) + @include tools.elevation($btn-group-elevation) + @include tools.rounded($btn-group-border-radius) + @include tools.theme($btn-group-theme...) + + @at-root + @include tools.density('v-btn-group', $button-density) using ($modifier) + @at-root #{selector.append(&, $root)} + height: $btn-group-height + $modifier + + .v-btn + border-radius: 0 + border-color: inherit + + &:not(:last-child) + border-inline-end: none + + &:not(:first-child) + border-inline-start: none + + &:first-child + border-start-start-radius: inherit + border-end-start-radius: inherit + + &:last-child + border-start-end-radius: inherit + border-end-end-radius: inherit + + &--divided + .v-btn:not(:last-child) + border-inline-end-width: $btn-group-border-thin-width + border-inline-end-style: $btn-group-border-style + border-inline-end-color: $btn-group-border-color + + &--tile + @include tools.rounded($btn-group-tile-border-radius) diff --git a/packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx new file mode 100644 index 0000000..a0e1653 --- /dev/null +++ b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx @@ -0,0 +1,79 @@ +// Styles +import './VBtnGroup.sass' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { makeVariantProps } from '@/composables/variant' + +// Utilities +import { toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVBtnGroupProps = propsFactory({ + baseColor: String, + divided: Boolean, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeElevationProps(), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps(), +}, 'VBtnGroup') + +export const VBtnGroup = genericComponent()({ + name: 'VBtnGroup', + + props: makeVBtnGroupProps(), + + setup (props, { slots }) { + const { themeClasses } = provideTheme(props) + const { densityClasses } = useDensity(props) + const { borderClasses } = useBorder(props) + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(props) + + provideDefaults({ + VBtn: { + height: 'auto', + baseColor: toRef(props, 'baseColor'), + color: toRef(props, 'color'), + density: toRef(props, 'density'), + flat: true, + variant: toRef(props, 'variant'), + }, + }) + + useRender(() => { + return ( + + ) + }) + }, +}) + +export type VBtnGroup = InstanceType diff --git a/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx b/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx new file mode 100644 index 0000000..ca129c7 --- /dev/null +++ b/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx @@ -0,0 +1,66 @@ +/// + +// Components +import { VBtnGroup } from '..' +import { VBtn } from '@/components/VBtn' + +const colors = ['success', 'info', 'warning', 'error', 'invalid'] as const +const densities = ['default', 'comfortable', 'compact'] as const +const variants = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'] as const + +// TODO: screenshot tests +describe('VBtnGroup', () => { + describe('color', () => { + it('should render set length', () => { + cy.mount(() => ( + <> + { colors.map(color => ( + + { color } Button 1 + Button 2 + Button 3 + + ))} + + )) + .get('.v-btn-group') + .should('have.length', colors.length) + }) + }) + + describe('density', () => { + it('supports density props', () => { + cy.mount(() => ( + <> + { densities.map(density => ( + + { density } Button 1 + Button 2 + Button 3 + + ))} + + )) + .get('.v-btn-group') + .should('have.length', densities.length) + }) + }) + + describe('variant', () => { + it('supports variant props', () => { + cy.mount(() => ( + <> + { variants.map(variant => ( + + { variant } Button 1 + Button 2 + Button 3 + + ))} + + )) + .get('.v-btn-group') + .should('have.length', variants.length) + }) + }) +}) diff --git a/packages/vuetify/src/components/VBtnGroup/_variables.scss b/packages/vuetify/src/components/VBtnGroup/_variables.scss new file mode 100644 index 0000000..eac7b06 --- /dev/null +++ b/packages/vuetify/src/components/VBtnGroup/_variables.scss @@ -0,0 +1,27 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VBtnGroup +$btn-group-background: transparent !default; +$btn-group-border-color: settings.$border-color-root !default; +$btn-group-border-radius: settings.$border-radius-root !default; +$btn-group-border-style: settings.$border-style-root !default; +$btn-group-border-thin-width: thin !default; +$btn-group-border-width: 0 !default; +$btn-group-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$btn-group-height: 48px !default; +$btn-group-elevation: 0 !default; +$btn-group-tile-border-radius: 0 !default; + +// Lists +$btn-group-border: ( + $btn-group-border-color, + $btn-group-border-style, + $btn-group-border-width, + $btn-group-border-thin-width +) !default; + +$btn-group-theme: ( + $btn-group-background, + $btn-group-color +) !default; diff --git a/packages/vuetify/src/components/VBtnGroup/index.ts b/packages/vuetify/src/components/VBtnGroup/index.ts new file mode 100644 index 0000000..6b41c9a --- /dev/null +++ b/packages/vuetify/src/components/VBtnGroup/index.ts @@ -0,0 +1 @@ +export { VBtnGroup } from './VBtnGroup' diff --git a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass new file mode 100644 index 0000000..953e86a --- /dev/null +++ b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass @@ -0,0 +1,7 @@ +@use './variables' as * +@use '../../styles/tools' + +@include tools.layer('components') + .v-btn-toggle + > .v-btn.v-btn--active:not(.v-btn--disabled) + @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity) diff --git a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx new file mode 100644 index 0000000..4cb26d2 --- /dev/null +++ b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx @@ -0,0 +1,81 @@ +// Styles +import './VBtnToggle.sass' + +// Components +import { makeVBtnGroupProps, VBtnGroup } from '@/components/VBtnGroup/VBtnGroup' + +// Composables +import { makeGroupProps, useGroup } from '@/composables/group' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { InjectionKey } from 'vue' +import type { GroupProvide } from '@/composables/group' +import type { GenericProps } from '@/util' + +export type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev' +export interface DefaultBtnToggleSlot extends Pick {} + +export const VBtnToggleSymbol: InjectionKey = Symbol.for('vuetify:v-btn-toggle') + +type VBtnToggleSlots = { + default: DefaultBtnToggleSlot +} + +export const makeVBtnToggleProps = propsFactory({ + ...makeVBtnGroupProps(), + ...makeGroupProps(), +}, 'VBtnToggle') + +export const VBtnToggle = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VBtnToggleSlots, +) => GenericProps>()({ + name: 'VBtnToggle', + + props: makeVBtnToggleProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { slots }) { + const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol) + + useRender(() => { + const btnGroupProps = VBtnGroup.filterProps(props) + + return ( + + { slots.default?.({ + isSelected, + next, + prev, + select, + selected, + })} + + ) + }) + + return { + next, + prev, + select, + } + }, +}) + +export type VBtnToggle = InstanceType diff --git a/packages/vuetify/src/components/VBtnToggle/_variables.scss b/packages/vuetify/src/components/VBtnToggle/_variables.scss new file mode 100644 index 0000000..0dc5884 --- /dev/null +++ b/packages/vuetify/src/components/VBtnToggle/_variables.scss @@ -0,0 +1,6 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VBtnToggle +$btn-toggle-selected-opacity: map.get(settings.$states, 'activated') !default; diff --git a/packages/vuetify/src/components/VBtnToggle/index.ts b/packages/vuetify/src/components/VBtnToggle/index.ts new file mode 100644 index 0000000..2a22b69 --- /dev/null +++ b/packages/vuetify/src/components/VBtnToggle/index.ts @@ -0,0 +1 @@ +export { VBtnToggle } from './VBtnToggle' diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass new file mode 100644 index 0000000..8da5334 --- /dev/null +++ b/packages/vuetify/src/components/VCard/VCard.sass @@ -0,0 +1,200 @@ +@use '../../styles/tools' +@use './variables' as * +@use './mixins' as * + +@include tools.layer('components') + .v-card + display: block + overflow: hidden + overflow-wrap: $card-overflow-wrap + position: relative + padding: $card-padding + text-decoration: none + transition-duration: $card-transition-duration + transition-property: $card-transition-property + transition-timing-function: $card-transition-timing-function + z-index: 0 + + @include tools.border($card-border...) + @include tools.position($card-positions) + @include tools.rounded($card-border-radius) + @include tools.states('.v-card__overlay') + @include tools.variant($card-variants...) + + &--disabled + pointer-events: none + user-select: none + + >:not(.v-card__loader) + opacity: $card-disabled-opacity + + &--flat + box-shadow: none + + &--hover + cursor: pointer + + &::before, + &::after + border-radius: inherit + bottom: 0 + content: '' + display: block + left: 0 + pointer-events: none + position: absolute + right: 0 + top: 0 + transition: inherit + + &::before + opacity: 1 + z-index: -1 + + @include tools.elevation($card-elevation) + + &::after + z-index: 1 + opacity: 0 + + @include tools.elevation($card-hover-elevation) + + &:hover::after + opacity: 1 + + &:hover::before + opacity: 0 + + &:hover + @include tools.elevation($card-hover-elevation) + + &--link + cursor: pointer + + .v-card-actions + align-items: center + display: flex + flex: $card-actions-flex + min-height: $card-actions-min-height + padding: $card-actions-padding + + .v-card-item + align-items: $card-item-align-items + display: grid + flex: $card-header-flex + grid-template-areas: "prepend content append" + grid-template-columns: max-content auto max-content + padding: $card-item-padding + + + .v-card-text + padding-top: 0 + + &__prepend, + &__append + align-items: center + display: flex + + &__prepend + grid-area: prepend + padding-inline-end: $card-prepend-padding-inline-end + + &__append + grid-area: append + padding-inline-start: $card-append-padding-inline-start + + .v-card-item__content + align-self: center + grid-area: content + overflow: hidden + + .v-card-title + display: block + flex: $card-title-flex + font-size: $card-title-font-size + font-weight: $card-title-font-weight + hyphens: $card-title-hyphens + letter-spacing: $card-title-letter-spacing + min-width: 0 + overflow-wrap: $card-title-overflow-wrap + overflow: $card-title-overflow + padding: $card-title-padding + text-overflow: $card-title-text-overflow + text-transform: $card-title-text-transform + white-space: $card-title-white-space + word-break: $card-title-word-break + word-wrap: $card-title-word-wrap + + @include card-line-height-densities($card-title-densities) + + .v-card-item & + padding: $card-title-header-padding + + + .v-card-text, + + .v-card-actions + padding-top: 0 + + .v-card-subtitle + display: block + flex: $card-subtitle-flex + font-size: $card-subtitle-font-size + font-weight: $card-subtitle-font-weight + letter-spacing: $card-subtitle-letter-spacing + opacity: $card-subtitle-opacity + overflow: $card-subtitle-overflow + padding: $card-subtitle-padding + text-overflow: $card-subtitle-text-overflow + text-transform: $card-subtitle-text-transform + white-space: $card-subtitle-white-space + + @include card-line-height-densities($card-subtitle-density-line-height) + + .v-card-item & + padding: $card-subtitle-header-padding + + .v-card-text + flex: $card-text-flex + font-size: $card-text-font-size + font-weight: $card-text-font-weight + letter-spacing: $card-text-letter-spacing + opacity: $card-text-opacity + padding: $card-text-padding + text-transform: $card-text-text-transform + + @include card-line-height-densities($card-text-density-line-height) + + .v-card__image + display: flex + height: 100% + flex: $card-img-flex + left: 0 + overflow: hidden + position: absolute + top: 0 + width: 100% + z-index: -1 + + .v-card__content + border-radius: inherit + overflow: hidden + position: relative + + .v-card__loader + bottom: $card-loader-bottom + top: $card-loader-top + left: 0 + position: absolute + right: 0 + width: 100% + z-index: 1 + + .v-card__overlay + background-color: currentColor + border-radius: inherit + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + pointer-events: none + opacity: 0 + transition: opacity 0.2s ease-in-out diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx new file mode 100644 index 0000000..ba0d830 --- /dev/null +++ b/packages/vuetify/src/components/VCard/VCard.tsx @@ -0,0 +1,229 @@ +/* eslint-disable complexity */ + +// Styles +import './VCard.sass' + +// Components +import { VCardActions } from './VCardActions' +import { VCardItem } from './VCardItem' +import { VCardText } from './VCardText' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VImg } from '@/components/VImg' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { IconValue } from '@/composables/icons' +import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader' +import { makeLocationProps, useLocation } from '@/composables/location' +import { makePositionProps, usePosition } from '@/composables/position' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeRouterProps, useLink } from '@/composables/router' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' + +// Directives +import { Ripple } from '@/directives/ripple' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VCardItemSlots } from './VCardItem' +import type { LoaderSlotProps } from '@/composables/loader' +import type { RippleDirectiveBinding } from '@/directives/ripple' + +export const makeVCardProps = propsFactory({ + appendAvatar: String, + appendIcon: IconValue, + disabled: Boolean, + flat: Boolean, + hover: Boolean, + image: String, + link: { + type: Boolean, + default: undefined, + }, + prependAvatar: String, + prependIcon: IconValue, + ripple: { + type: [Boolean, Object] as PropType, + default: true, + }, + subtitle: [String, Number], + text: [String, Number], + title: [String, Number], + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeDimensionProps(), + ...makeElevationProps(), + ...makeLoaderProps(), + ...makeLocationProps(), + ...makePositionProps(), + ...makeRoundedProps(), + ...makeRouterProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'elevated' } as const), +}, 'VCard') + +export type VCardSlots = VCardItemSlots & { + default: never + actions: never + text: never + loader: LoaderSlotProps + image: never + item: never +} + +export const VCard = genericComponent()({ + name: 'VCard', + + directives: { Ripple }, + + props: makeVCardProps(), + + setup (props, { attrs, slots }) { + const { themeClasses } = provideTheme(props) + const { borderClasses } = useBorder(props) + const { colorClasses, colorStyles, variantClasses } = useVariant(props) + const { densityClasses } = useDensity(props) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { loaderClasses } = useLoader(props) + const { locationStyles } = useLocation(props) + const { positionClasses } = usePosition(props) + const { roundedClasses } = useRounded(props) + const link = useLink(props, attrs) + + const isLink = computed(() => props.link !== false && link.isLink.value) + const isClickable = computed(() => + !props.disabled && + props.link !== false && + (props.link || link.isClickable.value) + ) + + useRender(() => { + const Tag = isLink.value ? 'a' : props.tag + const hasTitle = !!(slots.title || props.title != null) + const hasSubtitle = !!(slots.subtitle || props.subtitle != null) + const hasHeader = hasTitle || hasSubtitle + const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon) + const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon) + const hasImage = !!(slots.image || props.image) + const hasCardItem = hasHeader || hasPrepend || hasAppend + const hasText = !!(slots.text || props.text != null) + + return ( + + { hasImage && ( +
    + { !slots.image ? ( + + ) : ( + + )} +
    + )} + + + + { hasCardItem && ( + + {{ + default: slots.item, + prepend: slots.prepend, + title: slots.title, + subtitle: slots.subtitle, + append: slots.append, + }} + + )} + + { hasText && ( + + { slots.text?.() ?? props.text } + + )} + + { slots.default?.() } + + { slots.actions && ( + + )} + + { genOverlays(isClickable.value, 'v-card') } +     + ) + }) + + return {} + }, +}) + +export type VCard = InstanceType diff --git a/packages/vuetify/src/components/VCard/VCardActions.tsx b/packages/vuetify/src/components/VCard/VCardActions.tsx new file mode 100644 index 0000000..5bade24 --- /dev/null +++ b/packages/vuetify/src/components/VCard/VCardActions.tsx @@ -0,0 +1,37 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' + +// Utilities +import { genericComponent, useRender } from '@/util' + +export const VCardActions = genericComponent()({ + name: 'VCardActions', + + props: makeComponentProps(), + + setup (props, { slots }) { + provideDefaults({ + VBtn: { + slim: true, + variant: 'text', + }, + }) + + useRender(() => ( +
    + { slots.default?.() } +
    + )) + + return {} + }, +}) + +export type VCardActions = InstanceType diff --git a/packages/vuetify/src/components/VCard/VCardItem.tsx b/packages/vuetify/src/components/VCard/VCardItem.tsx new file mode 100644 index 0000000..b1e2e27 --- /dev/null +++ b/packages/vuetify/src/components/VCard/VCardItem.tsx @@ -0,0 +1,161 @@ +// Components +import { VCardSubtitle } from './VCardSubtitle' +import { VCardTitle } from './VCardTitle' +import { VAvatar } from '@/components/VAvatar' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps } from '@/composables/density' +import { IconValue } from '@/composables/icons' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export type VCardItemSlots = { + default: never + prepend: never + append: never + title: never + subtitle: never +} + +export const makeCardItemProps = propsFactory({ + appendAvatar: String, + appendIcon: IconValue, + prependAvatar: String, + prependIcon: IconValue, + subtitle: [String, Number], + title: [String, Number], + + ...makeComponentProps(), + ...makeDensityProps(), +}, 'VCardItem') + +export const VCardItem = genericComponent()({ + name: 'VCardItem', + + props: makeCardItemProps(), + + setup (props, { slots }) { + useRender(() => { + const hasPrependMedia = !!(props.prependAvatar || props.prependIcon) + const hasPrepend = !!(hasPrependMedia || slots.prepend) + const hasAppendMedia = !!(props.appendAvatar || props.appendIcon) + const hasAppend = !!(hasAppendMedia || slots.append) + const hasTitle = !!(props.title != null || slots.title) + const hasSubtitle = !!(props.subtitle != null || slots.subtitle) + + return ( +
    + { hasPrepend && ( +
    + { !slots.prepend ? ( + <> + { props.prependAvatar && ( + + )} + + { props.prependIcon && ( + + )} + + ) : ( + + )} +
    + )} + +
    + { hasTitle && ( + + { slots.title?.() ?? props.title } + + )} + + { hasSubtitle && ( + + { slots.subtitle?.() ?? props.subtitle } + + )} + + { slots.default?.() } +
    + + { hasAppend && ( +
    + { !slots.append ? ( + <> + { props.appendIcon && ( + + )} + + { props.appendAvatar && ( + + )} + + ) : ( + + )} +
    + )} +
    + ) + }) + + return {} + }, +}) + +export type VCardItem = InstanceType diff --git a/packages/vuetify/src/components/VCard/VCardSubtitle.tsx b/packages/vuetify/src/components/VCard/VCardSubtitle.tsx new file mode 100644 index 0000000..8f49fe1 --- /dev/null +++ b/packages/vuetify/src/components/VCard/VCardSubtitle.tsx @@ -0,0 +1,39 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVCardSubtitleProps = propsFactory({ + opacity: [Number, String], + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VCardSubtitle') + +export const VCardSubtitle = genericComponent()({ + name: 'VCardSubtitle', + + props: makeVCardSubtitleProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VCardSubtitle = InstanceType diff --git a/packages/vuetify/src/components/VCard/VCardText.tsx b/packages/vuetify/src/components/VCard/VCardText.tsx new file mode 100644 index 0000000..1287b2c --- /dev/null +++ b/packages/vuetify/src/components/VCard/VCardText.tsx @@ -0,0 +1,39 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVCardTextProps = propsFactory({ + opacity: [Number, String], + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VCardText') + +export const VCardText = genericComponent()({ + name: 'VCardText', + + props: makeVCardTextProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VCardText = InstanceType diff --git a/packages/vuetify/src/components/VCard/VCardTitle.ts b/packages/vuetify/src/components/VCard/VCardTitle.ts new file mode 100644 index 0000000..69c9399 --- /dev/null +++ b/packages/vuetify/src/components/VCard/VCardTitle.ts @@ -0,0 +1,6 @@ +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VCardTitle = createSimpleFunctional('v-card-title') + +export type VCardTitle = InstanceType diff --git a/packages/vuetify/src/components/VCard/_mixins.scss b/packages/vuetify/src/components/VCard/_mixins.scss new file mode 100644 index 0000000..88e094c --- /dev/null +++ b/packages/vuetify/src/components/VCard/_mixins.scss @@ -0,0 +1,13 @@ +@mixin card-line-height-densities ($map) { + @each $density, $lineHeight in $map { + @if $density == null { + .v-card & { + line-height: $lineHeight; + } + } @else { + .v-card--density-#{$density} & { + line-height: $lineHeight; + } + } + } +} diff --git a/packages/vuetify/src/components/VCard/_variables.scss b/packages/vuetify/src/components/VCard/_variables.scss new file mode 100644 index 0000000..b349673 --- /dev/null +++ b/packages/vuetify/src/components/VCard/_variables.scss @@ -0,0 +1,127 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VCard +$card-actions-flex: none !default; +$card-actions-min-height: 52px !default; +$card-actions-padding: .5rem !default; +$card-append-padding-inline-start: .5rem !default; +$card-background: rgb(var(--v-theme-surface)) !default; +$card-border-color: settings.$border-color-root !default; +$card-border-radius: settings.$border-radius-root !default; +$card-border-style: settings.$border-style-root !default; +$card-border-thin-width: thin !default; +$card-border-width: 0 !default; +$card-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$card-disabled-opacity: 0.6 !default; +$card-elevation: 1 !default; +$card-loader-top: 0 !default; +$card-loader-bottom: auto !default; +$card-hover-elevation: 8 !default; +$card-img-flex: 1 1 auto !default; +$card-item-align-items: center !default; +$card-item-padding: .625rem 1rem !default; +$card-overflow-wrap: break-word !default; +$card-padding: 0 !default; +$card-plain-opacity: .62 !default; +$card-positions: absolute fixed !default; +$card-prepend-padding-inline-end: .5rem !default; +$card-transition-duration: 0.28s !default; +$card-transition-property: box-shadow, opacity, background !default; +$card-transition-timing-function: settings.$standard-easing !default; + +// VCardHeader +$card-header-flex: none !default; + +// VCardTitle +$card-title-comfortable-line-height: 1.75rem !default; +$card-title-compact-line-height: 1.55rem !default; +$card-title-flex: none !default; +$card-title-font-size: tools.map-deep-get(settings.$typography, 'h6', 'size') !default; +$card-title-font-weight: tools.map-deep-get(settings.$typography, 'h6', 'weight') !default; +$card-title-header-padding: 0 !default; +$card-title-hyphens: auto !default; +$card-title-letter-spacing: tools.map-deep-get(settings.$typography, 'h6', 'letter-spacing') !default; +$card-title-line-height: tools.map-deep-get(settings.$typography, 'h6', 'line-height') !default; +$card-title-overflow-wrap: normal !default; +$card-title-overflow: hidden !default; +$card-title-padding: .5rem 1rem !default; +$card-title-text-overflow: ellipsis !default; +$card-title-text-transform: none !default; +$card-title-white-space: nowrap !default; +$card-title-word-break: normal !default; +$card-title-word-wrap: break-word !default; + +// VCardSubtitle +$card-subtitle-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$card-subtitle-comfortable-line-height: 1.125rem !default; +$card-subtitle-compact-line-height: 1rem !default; +$card-subtitle-flex: none !default; +$card-subtitle-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default; +$card-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default; +$card-subtitle-header-padding: 0 0 .25rem !default; +$card-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default; +$card-subtitle-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default; +$card-subtitle-opacity: var(--v-card-subtitle-opacity, var(--v-medium-emphasis-opacity)) !default; +$card-subtitle-overflow: hidden !default; +$card-subtitle-padding: 0 1rem !default; +$card-subtitle-text-overflow: ellipsis !default; +$card-subtitle-text-transform: none !default; +$card-subtitle-white-space: nowrap !default; + +// VCardText +$card-text-comfortable-line-height: 1.2rem !default; +$card-text-compact-line-height: 1.15rem !default; +$card-text-flex: 1 1 auto !default; +$card-text-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default; +$card-text-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default; +$card-text-opacity: var(--v-card-text-opacity, 1) !default; +$card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default; +$card-text-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default; +$card-text-padding: 1rem !default; +$card-text-text-transform: tools.map-deep-get(settings.$typography, 'body-2', 'text-transform') !default; + +// Lists +$card-border: ( + $card-border-color, + $card-border-style, + $card-border-width, + $card-border-thin-width +) !default; + +$card-title-densities: () !default; +$card-title-densities: map.merge(( + null: $card-title-line-height, + 'comfortable': $card-title-comfortable-line-height, + 'compact': $card-title-compact-line-height +), $card-title-densities); + +$card-subtitle-density-line-height: () !default; +$card-subtitle-density-line-height: map.merge(( + null: $card-subtitle-line-height, + 'comfortable': $card-subtitle-comfortable-line-height, + 'compact': $card-subtitle-compact-line-height +), $card-subtitle-density-line-height); + +$card-text-density-line-height: () !default; +$card-text-density-line-height: map.merge(( + null: $card-text-line-height, + 'comfortable': $card-text-comfortable-line-height, + 'compact': $card-text-compact-line-height +), $card-text-density-line-height); + +$card-variants: ( + $card-background, + $card-color, + $card-elevation, + $card-plain-opacity, + 'v-card' +) !default; + +// Deprecated +$card-avatar-align-self: flex-start !default; +$card-avatar-header-padding: 0 !default; +$card-avatar-padding: .5rem 1rem !default; +$card-title-padding-top: 1rem !default; +$card-text-padding-bottom: 1rem !default; diff --git a/packages/vuetify/src/components/VCard/index.ts b/packages/vuetify/src/components/VCard/index.ts new file mode 100644 index 0000000..60945dc --- /dev/null +++ b/packages/vuetify/src/components/VCard/index.ts @@ -0,0 +1,6 @@ +export { VCard } from './VCard' +export { VCardActions } from './VCardActions' +export { VCardItem } from './VCardItem' +export { VCardSubtitle } from './VCardSubtitle' +export { VCardText } from './VCardText' +export { VCardTitle } from './VCardTitle' diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.sass b/packages/vuetify/src/components/VCarousel/VCarousel.sass new file mode 100644 index 0000000..66f89cb --- /dev/null +++ b/packages/vuetify/src/components/VCarousel/VCarousel.sass @@ -0,0 +1,68 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-carousel + overflow: hidden + position: relative + width: 100% + + &__controls + align-items: center + bottom: 0 + display: flex + height: $carousel-controls-size + justify-content: center + list-style-type: none + position: absolute + width: 100% + z-index: 1 + + @include tools.theme($carousel-controls-theme...) + + > .v-item-group + flex: 0 1 auto + + &__item + margin: $carousel-dot-margin + + .v-icon + opacity: $carousel-dot-inactive-opacity + + &--active + .v-icon + opacity: $carousel-dot-active-opacity + vertical-align: middle + + &:hover + background: none + + .v-icon + opacity: $carousel-dot-hover-opacity + + // Element + .v-carousel__progress + margin: 0 + position: absolute + bottom: 0 + left: 0 + right: 0 + + .v-carousel-item + display: block + height: inherit + text-decoration: none + + & > .v-img + height: inherit + + // Modifier + .v-carousel--hide-delimiter-background + .v-carousel__controls + background: transparent + + .v-carousel--vertical-delimiters + .v-carousel__controls + flex-direction: column + height: 100% !important + width: $carousel-controls-size diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.tsx b/packages/vuetify/src/components/VCarousel/VCarousel.tsx new file mode 100644 index 0000000..b4baf83 --- /dev/null +++ b/packages/vuetify/src/components/VCarousel/VCarousel.tsx @@ -0,0 +1,190 @@ +// Styles +import './VCarousel.sass' + +// Components +import { VBtn } from '@/components/VBtn' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VProgressLinear } from '@/components/VProgressLinear' +import { makeVWindowProps, VWindow } from '@/components/VWindow/VWindow' + +// Composables +import { IconValue } from '@/composables/icons' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { onMounted, ref, watch } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VWindowSlots } from '@/components/VWindow/VWindow' +import type { GroupProvide } from '@/composables/group' +import type { GenericProps } from '@/util' + +export const makeVCarouselProps = propsFactory({ + color: String, + cycle: Boolean, + delimiterIcon: { + type: IconValue, + default: '$delimiter', + }, + height: { + type: [Number, String], + default: 500, + }, + hideDelimiters: Boolean, + hideDelimiterBackground: Boolean, + interval: { + type: [Number, String], + default: 6000, + validator: (value: string | number) => Number(value) > 0, + }, + progress: [Boolean, String], + verticalDelimiters: [Boolean, String] as PropType, + + ...makeVWindowProps({ + continuous: true, + mandatory: 'force' as const, + showArrows: true, + }), +}, 'VCarousel') + +type VCarouselSlots = VWindowSlots & { + item: { + props: Record + item: { + id: number + value: unknown + disabled: boolean | undefined + } + } +} + +export const VCarousel = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VCarouselSlots, +) => GenericProps>()({ + name: 'VCarousel', + + props: makeVCarouselProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { slots }) { + const model = useProxiedModel(props, 'modelValue') + const { t } = useLocale() + const windowRef = ref() + + let slideTimeout = -1 + watch(model, restartTimeout) + watch(() => props.interval, restartTimeout) + watch(() => props.cycle, val => { + if (val) restartTimeout() + else window.clearTimeout(slideTimeout) + }) + + onMounted(startTimeout) + + function startTimeout () { + if (!props.cycle || !windowRef.value) return + + slideTimeout = window.setTimeout(windowRef.value.group.next, +props.interval > 0 ? +props.interval : 6000) + } + + function restartTimeout () { + window.clearTimeout(slideTimeout) + window.requestAnimationFrame(startTimeout) + } + + useRender(() => { + const windowProps = VWindow.filterProps(props) + + return ( + + {{ + default: slots.default, + additional: ({ group }: { group: GroupProvide }) => ( + <> + { !props.hideDelimiters && ( +
    + { group.items.value.length > 0 && ( + + { group.items.value.map((item, index) => { + const props = { + id: `carousel-item-${item.id}`, + 'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length), + class: [ + 'v-carousel__controls__item', + group.isSelected(item.id) && 'v-btn--active', + ], + onClick: () => group.select(item.id, true), + } + + return slots.item + ? slots.item({ props, item }) + : () + })} + + )} +
    + )} + + { props.progress && ( + + )} + + ), + prev: slots.prev, + next: slots.next, + }} +     + ) + }) + + return {} + }, +}) + +export type VCarousel = InstanceType diff --git a/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx b/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx new file mode 100644 index 0000000..258a70f --- /dev/null +++ b/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx @@ -0,0 +1,47 @@ +// Components +import { makeVImgProps, VImg } from '@/components/VImg/VImg' +import { makeVWindowItemProps, VWindowItem } from '@/components/VWindow/VWindowItem' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { VImgSlots } from '@/components/VImg/VImg' + +export const makeVCarouselItemProps = propsFactory({ + ...makeVImgProps(), + ...makeVWindowItemProps(), +}, 'VCarouselItem') + +export const VCarouselItem = genericComponent()({ + name: 'VCarouselItem', + + inheritAttrs: false, + + props: makeVCarouselItemProps(), + + setup (props, { slots, attrs }) { + useRender(() => { + const imgProps = VImg.filterProps(props) + const windowItemProps = VWindowItem.filterProps(props) + + return ( + + + + ) + }) + }, +}) + +export type VCarouselItem = InstanceType diff --git a/packages/vuetify/src/components/VCarousel/_variables.scss b/packages/vuetify/src/components/VCarousel/_variables.scss new file mode 100644 index 0000000..5457198 --- /dev/null +++ b/packages/vuetify/src/components/VCarousel/_variables.scss @@ -0,0 +1,13 @@ +// VCarousel +$carousel-controls-bg: rgba(var(--v-theme-surface-variant), .3) !default; +$carousel-controls-color: rgb(var(--v-theme-on-surface-variant)) !default; +$carousel-controls-size: 50px !default; +$carousel-dot-margin: 0 8px !default; +$carousel-dot-inactive-opacity: .5 !default; +$carousel-dot-active-opacity: 1 !default; +$carousel-dot-hover-opacity: .8 !default; + +$carousel-controls-theme: ( + $carousel-controls-bg, + $carousel-controls-color +) !default; diff --git a/packages/vuetify/src/components/VCarousel/index.ts b/packages/vuetify/src/components/VCarousel/index.ts new file mode 100644 index 0000000..5a5be83 --- /dev/null +++ b/packages/vuetify/src/components/VCarousel/index.ts @@ -0,0 +1,2 @@ +export { VCarousel } from './VCarousel' +export { VCarouselItem } from './VCarouselItem' diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.sass b/packages/vuetify/src/components/VCheckbox/VCheckbox.sass new file mode 100644 index 0000000..eda0b70 --- /dev/null +++ b/packages/vuetify/src/components/VCheckbox/VCheckbox.sass @@ -0,0 +1,12 @@ +@use 'sass:map' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-checkbox + &.v-input + flex: $checkbox-flex + + .v-selection-control + min-height: var(--v-input-control-height) diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx new file mode 100644 index 0000000..686200e --- /dev/null +++ b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx @@ -0,0 +1,103 @@ +// Styles +import './VCheckbox.sass' + +// Components +import { makeVCheckboxBtnProps, VCheckboxBtn } from './VCheckboxBtn' +import { makeVInputProps, VInput } from '@/components/VInput/VInput' + +// Composables +import { useFocus } from '@/composables/focus' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed } from 'vue' +import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util' + +// Types +import type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl' +import type { VInputSlots } from '@/components/VInput/VInput' +import type { GenericProps } from '@/util' + +export type VCheckboxSlots = Omit & VSelectionControlSlots + +export const makeVCheckboxProps = propsFactory({ + ...makeVInputProps(), + ...omit(makeVCheckboxBtnProps(), ['inline']), +}, 'VCheckbox') + +export const VCheckbox = genericComponent( + props: { + modelValue?: T | null + 'onUpdate:modelValue'?: (value: T | null) => void + }, + slots: VCheckboxSlots, +) => GenericProps>()({ + name: 'VCheckbox', + + inheritAttrs: false, + + props: makeVCheckboxProps(), + + emits: { + 'update:modelValue': (value: any) => true, + 'update:focused': (focused: boolean) => true, + }, + + setup (props, { attrs, slots }) { + const model = useProxiedModel(props, 'modelValue') + const { isFocused, focus, blur } = useFocus(props) + + const uid = getUid() + const id = computed(() => props.id || `checkbox-${uid}`) + + useRender(() => { + const [rootAttrs, controlAttrs] = filterInputAttrs(attrs) + const inputProps = VInput.filterProps(props) + const checkboxProps = VCheckboxBtn.filterProps(props) + + return ( + + {{ + ...slots, + default: ({ + id, + messagesId, + isDisabled, + isReadonly, + isValid, + }) => ( + + ), + }} + + ) + }) + + return {} + }, +}) + +export type VCheckbox = InstanceType diff --git a/packages/vuetify/src/components/VCheckbox/VCheckboxBtn.tsx b/packages/vuetify/src/components/VCheckbox/VCheckboxBtn.tsx new file mode 100644 index 0000000..98f74f2 --- /dev/null +++ b/packages/vuetify/src/components/VCheckbox/VCheckboxBtn.tsx @@ -0,0 +1,92 @@ +// Components +import { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl' + +// Composables +import { IconValue } from '@/composables/icons' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed } from 'vue' +import { genericComponent, omit, propsFactory, useRender } from '@/util' + +// Types +import type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl' +import type { GenericProps } from '@/util' + +export const makeVCheckboxBtnProps = propsFactory({ + indeterminate: Boolean, + indeterminateIcon: { + type: IconValue, + default: '$checkboxIndeterminate', + }, + + ...makeVSelectionControlProps({ + falseIcon: '$checkboxOff', + trueIcon: '$checkboxOn', + }), +}, 'VCheckboxBtn') + +export const VCheckboxBtn = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VSelectionControlSlots, +) => GenericProps>()({ + name: 'VCheckboxBtn', + + props: makeVCheckboxBtnProps(), + + emits: { + 'update:modelValue': (value: any) => true, + 'update:indeterminate': (value: boolean) => true, + }, + + setup (props, { slots }) { + const indeterminate = useProxiedModel(props, 'indeterminate') + const model = useProxiedModel(props, 'modelValue') + + function onChange (v: any) { + if (indeterminate.value) { + indeterminate.value = false + } + } + + const falseIcon = computed(() => { + return indeterminate.value + ? props.indeterminateIcon + : props.falseIcon + }) + + const trueIcon = computed(() => { + return indeterminate.value + ? props.indeterminateIcon + : props.trueIcon + }) + + useRender(() => { + const controlProps = omit(VSelectionControl.filterProps(props), ['modelValue']) + return ( + + ) + }) + + return {} + }, +}) + +export type VCheckboxBtn = InstanceType diff --git a/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx b/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx new file mode 100644 index 0000000..851f99f --- /dev/null +++ b/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx @@ -0,0 +1,63 @@ +/// + +// Components +import { VCheckboxBtn } from '../' + +// Utilities +import { ref } from 'vue' + +describe('VCheckboxBtn', () => { + it('should function without v-model', () => { + cy.mount(() => ( + + )) + + cy.get('.v-checkbox-btn').click(20, 20) + + cy.get('input').should('be.checked') + + cy.get('.v-checkbox-btn').click(20, 20) + + cy.get('input').should('not.be.checked') + }) + + it('should function with v-model', () => { + const model = ref(false) + cy.mount(() => ( + + )) + + cy.get('.v-checkbox-btn').click(20, 20) + + cy.get('input').should('be.checked').then(() => { + expect(model.value).to.be.true + }) + + cy.get('.v-checkbox-btn').click(20, 20) + + cy.get('input').should('not.be.checked').then(() => { + expect(model.value).to.be.false + }) + }) + + it('should display indeterminate status', () => { + cy.mount(() => ( + + )) + + cy.get('input').should('have.attr', 'aria-checked', 'mixed') + }) + + it('should not update input checked state when it is readonly', () => { + const model = ref(false) + cy.mount(() => ( + + )) + + cy.get('.v-checkbox-btn').click(20, 20) + + cy.get('input').should('not.be.checked').then(() => { + expect(model.value).to.be.false + }) + }) +}) diff --git a/packages/vuetify/src/components/VCheckbox/_variables.scss b/packages/vuetify/src/components/VCheckbox/_variables.scss new file mode 100644 index 0000000..ce35a41 --- /dev/null +++ b/packages/vuetify/src/components/VCheckbox/_variables.scss @@ -0,0 +1,5 @@ +@use '../../styles/settings'; + +$checkbox-flex: 0 1 auto !default; +$checkbox-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default; +$checkbox-error-color: rgb(var(--v-theme-error)) !default; diff --git a/packages/vuetify/src/components/VCheckbox/index.ts b/packages/vuetify/src/components/VCheckbox/index.ts new file mode 100644 index 0000000..25e2ff5 --- /dev/null +++ b/packages/vuetify/src/components/VCheckbox/index.ts @@ -0,0 +1,2 @@ +export { VCheckbox } from './VCheckbox' +export { VCheckboxBtn } from './VCheckboxBtn' diff --git a/packages/vuetify/src/components/VChip/VChip.sass b/packages/vuetify/src/components/VChip/VChip.sass new file mode 100644 index 0000000..4792e75 --- /dev/null +++ b/packages/vuetify/src/components/VChip/VChip.sass @@ -0,0 +1,88 @@ +@use '../../styles/tools' +@use './variables' as * +@use './mixins' as * + +@include tools.layer('components') + .v-chip + align-items: center + display: inline-flex + font-weight: $chip-font-weight + max-width: $chip-max-width + min-width: 0 + overflow: hidden + position: relative + text-decoration: none + white-space: $chip-white-space + vertical-align: middle + + .v-icon + --v-icon-size-multiplier: #{$chip-icon-size-multiplier} + + @at-root + @include chip-sizes() + @include chip-density('height', $chip-density) + + @include tools.border($chip-border...) + @include tools.states('.v-chip__overlay') + @include tools.rounded($chip-border-radius) + @include tools.variant($chip-variants...) + + &--border + border-width: $chip-border-thin-width + + &--link + cursor: pointer + + &--link, + &--filter + user-select: none + + &--label + @include tools.rounded($chip-label-border-radius) + + // Elements + .v-chip__content + align-items: center + display: inline-flex + + .v-autocomplete__selection &, + .v-combobox__selection &, + .v-select__selection & + overflow: hidden + + .v-chip__filter, + .v-chip__prepend, + .v-chip__append, + .v-chip__close + align-items: center + display: inline-flex + + .v-chip__close + cursor: pointer + flex: 0 1 auto + font-size: $chip-close-size + max-height: $chip-close-size + max-width: $chip-close-size + user-select: none + + .v-icon + font-size: inherit + + .v-chip__filter + transition: $chip-filter-transition + + .v-chip__overlay + @include tools.absolute() + background-color: currentColor + border-radius: inherit + pointer-events: none + opacity: 0 + transition: opacity .2s ease-in-out + + .v-chip--disabled + opacity: $chip-disabled-opacity + pointer-events: none + user-select: none + + .v-chip--label + border-radius: $chip-label-border-radius diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx new file mode 100644 index 0000000..958332a --- /dev/null +++ b/packages/vuetify/src/components/VChip/VChip.tsx @@ -0,0 +1,364 @@ +/* eslint-disable complexity */ +// Styles +import './VChip.sass' + +// Components +import { VExpandXTransition } from '@/components/transitions' +import { VAvatar } from '@/components/VAvatar' +import { VChipGroupSymbol } from '@/components/VChipGroup/VChipGroup' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeGroupItemProps, useGroupItem } from '@/composables/group' +import { IconValue } from '@/composables/icons' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeRouterProps, useLink } from '@/composables/router' +import { makeSizeProps, useSize } from '@/composables/size' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' + +// Directives +import { Ripple } from '@/directives/ripple' + +// Utilities +import { computed } from 'vue' +import { EventProp, genericComponent, propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { RippleDirectiveBinding } from '@/directives/ripple' + +export type VChipSlots = { + default: { + isSelected: boolean | undefined + selectedClass: boolean | (string | undefined)[] | undefined + select: ((value: boolean) => void) | undefined + toggle: (() => void) | undefined + value: unknown + disabled: boolean + } + label: never + prepend: never + append: never + close: never + filter: never +} + +export const makeVChipProps = propsFactory({ + activeClass: String, + appendAvatar: String, + appendIcon: IconValue, + closable: Boolean, + closeIcon: { + type: IconValue, + default: '$delete', + }, + closeLabel: { + type: String, + default: '$vuetify.close', + }, + draggable: Boolean, + filter: Boolean, + filterIcon: { + type: String, + default: '$complete', + }, + label: Boolean, + link: { + type: Boolean, + default: undefined, + }, + pill: Boolean, + prependAvatar: String, + prependIcon: IconValue, + ripple: { + type: [Boolean, Object] as PropType, + default: true, + }, + text: String, + modelValue: { + type: Boolean, + default: true, + }, + + onClick: EventProp<[MouseEvent]>(), + onClickOnce: EventProp<[MouseEvent]>(), + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeElevationProps(), + ...makeGroupItemProps(), + ...makeRoundedProps(), + ...makeRouterProps(), + ...makeSizeProps(), + ...makeTagProps({ tag: 'span' }), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'tonal' } as const), +}, 'VChip') + +export const VChip = genericComponent()({ + name: 'VChip', + + directives: { Ripple }, + + props: makeVChipProps(), + + emits: { + 'click:close': (e: MouseEvent) => true, + 'update:modelValue': (value: boolean) => true, + 'group:selected': (val: { value: boolean }) => true, + click: (e: MouseEvent | KeyboardEvent) => true, + }, + + setup (props, { attrs, emit, slots }) { + const { t } = useLocale() + const { borderClasses } = useBorder(props) + const { colorClasses, colorStyles, variantClasses } = useVariant(props) + const { densityClasses } = useDensity(props) + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(props) + const { sizeClasses } = useSize(props) + const { themeClasses } = provideTheme(props) + + const isActive = useProxiedModel(props, 'modelValue') + const group = useGroupItem(props, VChipGroupSymbol, false) + const link = useLink(props, attrs) + const isLink = computed(() => props.link !== false && link.isLink.value) + const isClickable = computed(() => + !props.disabled && + props.link !== false && + (!!group || props.link || link.isClickable.value) + ) + const closeProps = computed(() => ({ + 'aria-label': t(props.closeLabel), + onClick (e: MouseEvent) { + e.preventDefault() + e.stopPropagation() + + isActive.value = false + + emit('click:close', e) + }, + })) + + function onClick (e: MouseEvent) { + emit('click', e) + + if (!isClickable.value) return + + link.navigate?.(e) + group?.toggle() + } + + function onKeyDown (e: KeyboardEvent) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + onClick(e as any as MouseEvent) + } + } + + return () => { + const Tag = (link.isLink.value) ? 'a' : props.tag + const hasAppendMedia = !!(props.appendIcon || props.appendAvatar) + const hasAppend = !!(hasAppendMedia || slots.append) + const hasClose = !!(slots.close || props.closable) + const hasFilter = !!(slots.filter || props.filter) && group + const hasPrependMedia = !!(props.prependIcon || props.prependAvatar) + const hasPrepend = !!(hasPrependMedia || slots.prepend) + const hasColor = !group || group.isSelected.value + + return isActive.value && ( + + { genOverlays(isClickable.value, 'v-chip') } + + { hasFilter && ( + +
    + { !slots.filter ? ( + + ) : ( + + )} +
    +     + )} + + { hasPrepend && ( +
    + { !slots.prepend ? ( + <> + { props.prependIcon && ( + + )} + + { props.prependAvatar && ( + + )} + + ) : ( + + )} +
    + )} + +
    + { slots.default?.({ + isSelected: group?.isSelected.value, + selectedClass: group?.selectedClass.value, + select: group?.select, + toggle: group?.toggle, + value: group?.value.value, + disabled: props.disabled, + }) ?? props.text } +
    + + { hasAppend && ( +
    + { !slots.append ? ( + <> + { props.appendIcon && ( + + )} + + { props.appendAvatar && ( + + )} + + ) : ( + + )} +
    + )} + + { hasClose && ( + + )} +     + ) + } + }, +}) + +export type VChip = InstanceType diff --git a/packages/vuetify/src/components/VChip/__tests__/VChip.spec.cy.tsx b/packages/vuetify/src/components/VChip/__tests__/VChip.spec.cy.tsx new file mode 100644 index 0000000..5e3481d --- /dev/null +++ b/packages/vuetify/src/components/VChip/__tests__/VChip.spec.cy.tsx @@ -0,0 +1,33 @@ +/// + +import { VChip } from '../' + +describe('VChip', () => { + it('should emit events when closed', () => { + cy.mount(() => ( + chip + )) + + cy.get('.v-chip__close') + .click() + cy.emitted(VChip) + .then(emitted => { + expect(emitted).to.have.property('click:close') + expect(emitted).to.have.property('update:modelValue') + }) + }) + + it('should have aria-label', () => { + cy.mount(({ closeLabel }: any) => ( + chip + )) + + cy.get('.v-chip__close') + .should('have.attr', 'aria-label') + cy.setProps({ + closeLabel: 'Hello', + }) + cy.get('.v-chip__close') + .should('have.attr', 'aria-label', 'Hello') + }) +}) diff --git a/packages/vuetify/src/components/VChip/_mixins.scss b/packages/vuetify/src/components/VChip/_mixins.scss new file mode 100644 index 0000000..a69123a --- /dev/null +++ b/packages/vuetify/src/components/VChip/_mixins.scss @@ -0,0 +1,89 @@ +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:meta'; +@use 'sass:selector'; +@use '../../styles/settings'; +@use './variables' as *; + +@mixin chip-sizes { + @each $sizeName, $multiplier in settings.$size-scales { + $size: map.get($chip-sizes, "font-size") + math.div(2 * $multiplier, 16); + $height: map.get($chip-sizes, "height") + (6 * $multiplier); + $padding: math.round(math.div($height, $chip-padding-ratio)); + + .v-chip.v-chip--size-#{$sizeName} { + --v-chip-size: #{$size}; + --v-chip-height: #{$height}; + font-size: $size; + padding: 0 $padding; + + .v-avatar { + --v-avatar-height: #{$height - 6}; + + @at-root #{selector.append('.v-chip--pill', &)} { + --v-avatar-height: #{$height}; + } + } + + .v-avatar--start { + margin-inline-start: -$padding * .7; + margin-inline-end: $padding * .5; + + @at-root #{selector.append('.v-chip--pill', &)} { + margin-inline-start: -$padding; + } + } + + .v-avatar--end { + margin-inline-start: $padding * .5; + margin-inline-end: -$padding * .7; + + @at-root #{selector.append('.v-chip--pill', &)} { + margin-inline-end: -$padding; + } + + + .v-chip__close { + @at-root #{selector.append('.v-chip--pill', &)} { + margin-inline-start: $padding * 1.5; + } + } + } + + .v-icon--start, + .v-chip__filter { + margin-inline-start: -$padding * .5; + margin-inline-end: $padding * .5; + } + + .v-icon--end, + .v-chip__close { + margin-inline-start: $padding * .5; + margin-inline-end: -$padding * .5; + } + + .v-icon--end, + .v-avatar--end, + .v-chip__append { + + .v-chip__close { + margin-inline-start: $padding; + } + } + } + } +} + +@mixin chip-density($properties, $densities) { + @each $density, $multiplier in $densities { + $value: calc(var(--v-chip-height) + #{$multiplier * settings.$spacer}); + + &.v-chip--density-#{$density} { + @if meta.type-of($properties) == "list" { + @each $property in $properties { + #{$property}: $value; + } + } @else { + #{$properties}: $value; + } + } + } +} diff --git a/packages/vuetify/src/components/VChip/_variables.scss b/packages/vuetify/src/components/VChip/_variables.scss new file mode 100644 index 0000000..950bcc5 --- /dev/null +++ b/packages/vuetify/src/components/VChip/_variables.scss @@ -0,0 +1,47 @@ +@use 'sass:math'; +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// Defaults +$chip-background: rgb(var(--v-theme-surface-variant)) !default; +$chip-border-color: settings.$border-color-root !default; +$chip-border-radius: map.get(settings.$rounded, "pill") !default; +$chip-border-style: settings.$border-style-root !default; +$chip-border-thin-width: thin !default; +$chip-border-width: 0 !default; +$chip-close-size: 18px !default; +$chip-color: rgb(var(--v-theme-on-surface-variant)) !default; +$chip-density: ("default": 0, "comfortable": -1, "compact": -2) !default; +$chip-disabled-opacity: 0.3 !default; +$chip-elevation: 1 !default; +$chip-font-size: tools.map-deep-get(settings.$typography, "button", "size") !default; +$chip-font-weight: 400 !default; +$chip-height: 32px !default; +$chip-icon-size-multiplier: calc(18/21) !default; +$chip-label-border-radius: settings.$border-radius-root !default; +$chip-max-width: 100% !default; +$chip-overflow: hidden !default; +$chip-padding-ratio: 2 + math.div(2, 3) !default; +$chip-plain-opacity: 0.26 !default; +$chip-filter-transition: .15s settings.$standard-easing !default; +$chip-white-space: nowrap !default; + +$chip-sizes: ( + "height": $chip-height, + "font-size": $chip-font-size, +) !default; + +$chip-border: ( + $chip-border-color, + $chip-border-style, + $chip-border-width +) !default; + +$chip-variants: ( + $chip-background, + $chip-color, + $chip-elevation, + $chip-plain-opacity, + 'v-chip' +) !default; diff --git a/packages/vuetify/src/components/VChip/index.ts b/packages/vuetify/src/components/VChip/index.ts new file mode 100644 index 0000000..4c47461 --- /dev/null +++ b/packages/vuetify/src/components/VChip/index.ts @@ -0,0 +1 @@ +export { VChip } from './VChip' diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.sass b/packages/vuetify/src/components/VChipGroup/VChipGroup.sass new file mode 100644 index 0000000..4a8ec52 --- /dev/null +++ b/packages/vuetify/src/components/VChipGroup/VChipGroup.sass @@ -0,0 +1,25 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Block + .v-chip-group + display: flex + max-width: 100% + min-width: 0 + overflow-x: auto + padding: $chip-group-padding + + .v-chip + margin: $chip-group-margin + + &.v-chip--selected:not(.v-chip--disabled) + .v-chip__overlay + opacity: $chip-group-selected-opacity + + // Modifiers + .v-chip-group--column + .v-slide-group__content + white-space: normal + flex-wrap: wrap + max-width: 100% diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx new file mode 100644 index 0000000..8c9b127 --- /dev/null +++ b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx @@ -0,0 +1,110 @@ +// Styles +import './VChipGroup.sass' + +// Components +import { makeVSlideGroupProps, VSlideGroup } from '@/components/VSlideGroup/VSlideGroup' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeGroupProps, useGroup } from '@/composables/group' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { makeVariantProps } from '@/composables/variant' + +// Utilities +import { toRef } from 'vue' +import { deepEqual, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { GenericProps } from '@/util' + +export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group') + +export const makeVChipGroupProps = propsFactory({ + column: Boolean, + filter: Boolean, + valueComparator: { + type: Function as PropType, + default: deepEqual, + }, + + ...makeVSlideGroupProps(), + ...makeComponentProps(), + ...makeGroupProps({ selectedClass: 'v-chip--selected' }), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'tonal' } as const), +}, 'VChipGroup') + +type VChipGroupSlots = { + default: { + isSelected: (id: number) => boolean + select: (id: number, value: boolean) => void + next: () => void + prev: () => void + selected: readonly number[] + } +} + +export const VChipGroup = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VChipGroupSlots, +) => GenericProps>()({ + name: 'VChipGroup', + + props: makeVChipGroupProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { slots }) { + const { themeClasses } = provideTheme(props) + const { isSelected, select, next, prev, selected } = useGroup(props, VChipGroupSymbol) + + provideDefaults({ + VChip: { + color: toRef(props, 'color'), + disabled: toRef(props, 'disabled'), + filter: toRef(props, 'filter'), + variant: toRef(props, 'variant'), + }, + }) + + useRender(() => { + const slideGroupProps = VSlideGroup.filterProps(props) + + return ( + + { slots.default?.({ + isSelected, + select, + next, + prev, + selected: selected.value, + })} + + ) + }) + + return {} + }, +}) + +export type VChipGroup = InstanceType diff --git a/packages/vuetify/src/components/VChipGroup/_variables.scss b/packages/vuetify/src/components/VChipGroup/_variables.scss new file mode 100644 index 0000000..cf88f01 --- /dev/null +++ b/packages/vuetify/src/components/VChipGroup/_variables.scss @@ -0,0 +1,4 @@ +// VChipGroup +$chip-group-selected-opacity: var(--v-activated-opacity) !default; +$chip-group-padding: 4px 0 !default; +$chip-group-margin: 4px 8px 4px 0 !default; diff --git a/packages/vuetify/src/components/VChipGroup/index.ts b/packages/vuetify/src/components/VChipGroup/index.ts new file mode 100644 index 0000000..89a6131 --- /dev/null +++ b/packages/vuetify/src/components/VChipGroup/index.ts @@ -0,0 +1 @@ +export { VChipGroup } from './VChipGroup' diff --git a/packages/vuetify/src/components/VCode/VCode.sass b/packages/vuetify/src/components/VCode/VCode.sass new file mode 100644 index 0000000..5ba1d80 --- /dev/null +++ b/packages/vuetify/src/components/VCode/VCode.sass @@ -0,0 +1,12 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-code + background-color: $code-background-color + color: $code-color + border-radius: $code-border-radius + line-height: $code-line-height + font-size: $code-font-size + font-weight: $code-font-weight + padding: $code-padding diff --git a/packages/vuetify/src/components/VCode/_variables.scss b/packages/vuetify/src/components/VCode/_variables.scss new file mode 100644 index 0000000..cff1afb --- /dev/null +++ b/packages/vuetify/src/components/VCode/_variables.scss @@ -0,0 +1,7 @@ +$code-background-color: rgb(var(--v-theme-code)) !default; +$code-color: rgb(var(--v-theme-on-code)) !default; +$code-border-radius: 4px !default; +$code-line-height: 1.8 !default; +$code-font-size: 0.9em !default; +$code-font-weight: normal !default; +$code-padding: .2em .4em !default; diff --git a/packages/vuetify/src/components/VCode/index.ts b/packages/vuetify/src/components/VCode/index.ts new file mode 100644 index 0000000..3b58b9c --- /dev/null +++ b/packages/vuetify/src/components/VCode/index.ts @@ -0,0 +1,9 @@ +// Styles +import './VCode.sass' + +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VCode = createSimpleFunctional('v-code') + +export type VCode = InstanceType diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.sass b/packages/vuetify/src/components/VColorPicker/VColorPicker.sass new file mode 100644 index 0000000..f38da1b --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPicker.sass @@ -0,0 +1,25 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Block + .v-color-picker + align-self: flex-start + contain: content + + &.v-sheet + +tools.elevation($color-picker-elevation) + +tools.rounded($color-picker-border-radius) + + // Element + .v-color-picker__controls + display: flex + flex-direction: column + padding: $color-picker-controls-padding + + // Modifier + .v-color-picker--flat + +tools.elevation(0) + + .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity + +tools.elevation(0) diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx new file mode 100644 index 0000000..df290c1 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx @@ -0,0 +1,218 @@ +// Styles +import './VColorPicker.sass' + +// Components +import { VColorPickerCanvas } from './VColorPickerCanvas' +import { VColorPickerEdit } from './VColorPickerEdit' +import { VColorPickerPreview } from './VColorPickerPreview' +import { VColorPickerSwatches } from './VColorPickerSwatches' +import { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet' + +// Composables +import { provideDefaults } from '@/composables/defaults' +import { useRtl } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, onMounted, ref, watch } from 'vue' +import { extractColor, modes, nullColor } from './util' +import { consoleWarn, defineComponent, HSVtoCSS, omit, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util' + +// Types +import type { DeepReadonly, PropType } from 'vue' +import type { Color, HSV } from '@/util' + +export const makeVColorPickerProps = propsFactory({ + canvasHeight: { + type: [String, Number], + default: 150, + }, + disabled: Boolean, + dotSize: { + type: [Number, String], + default: 10, + }, + hideCanvas: Boolean, + hideSliders: Boolean, + hideInputs: Boolean, + mode: { + type: String as PropType, + default: 'rgba', + validator: (v: string) => Object.keys(modes).includes(v), + }, + modes: { + type: Array as PropType, + default: () => Object.keys(modes), + validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)), + }, + showSwatches: Boolean, + swatches: Array as PropType>, + swatchesMaxHeight: { + type: [Number, String], + default: 150, + }, + modelValue: { + type: [Object, String] as PropType | string | undefined | null>, + }, + + ...omit(makeVSheetProps({ width: 300 }), [ + 'height', + 'location', + 'minHeight', + 'maxHeight', + 'minWidth', + 'maxWidth', + ]), +}, 'VColorPicker') + +export const VColorPicker = defineComponent({ + name: 'VColorPicker', + + props: makeVColorPickerProps(), + + emits: { + 'update:modelValue': (color: any) => true, + 'update:mode': (mode: keyof typeof modes) => true, + }, + + setup (props) { + const mode = useProxiedModel(props, 'mode') + const hue = ref(null) + const model = useProxiedModel( + props, + 'modelValue', + undefined, + v => { + if (v == null || v === '') return null + + let c: HSV + try { + c = RGBtoHSV(parseColor(v as any)) + } catch (err) { + consoleWarn(err as any) + return null + } + + return c + }, + v => { + if (!v) return null + + return extractColor(v, props.modelValue) + } + ) + const currentColor = computed(() => { + return model.value + ? { ...model.value, h: hue.value ?? model.value.h } + : null + }) + const { rtlClasses } = useRtl() + + let externalChange = true + watch(model, v => { + if (!externalChange) { + // prevent hue shift from rgb conversion inaccuracy + externalChange = true + return + } + if (!v) return + hue.value = v.h + }, { immediate: true }) + + const updateColor = (hsva: HSV) => { + externalChange = false + hue.value = hsva.h + model.value = hsva + } + + onMounted(() => { + if (!props.modes.includes(mode.value)) mode.value = props.modes[0] + }) + + provideDefaults({ + VSlider: { + color: undefined, + trackColor: undefined, + trackFillColor: undefined, + }, + }) + + useRender(() => { + const sheetProps = VSheet.filterProps(props) + + return ( + + { !props.hideCanvas && ( + + )} + + { (!props.hideSliders || !props.hideInputs) && ( +
    + { !props.hideSliders && ( + + )} + + { !props.hideInputs && ( + mode.value = m } + color={ currentColor.value } + onUpdate:color={ updateColor } + disabled={ props.disabled } + /> + )} +
    + )} + + { props.showSwatches && ( + + )} +     + ) + }) + + return {} + }, +}) + +export type VColorPicker = InstanceType diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass new file mode 100644 index 0000000..de16592 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass @@ -0,0 +1,27 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-color-picker-canvas + $root: & + display: flex + position: relative + overflow: hidden + contain: content + touch-action: none + + &__dot + position: absolute + top: 0 + left: 0 + width: $color-picker-canvas-dot-size + height: $color-picker-canvas-dot-size + background: transparent + border-radius: 50% + box-shadow: $color-picker-canvas-dot-box-shadow + + &--disabled + box-shadow: $color-picker-canvas-dot-disabled-box-shadow + + #{$root}:hover & + will-change: transform diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx new file mode 100644 index 0000000..fa3f6e3 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx @@ -0,0 +1,210 @@ +// Styles +import './VColorPickerCanvas.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { useResizeObserver } from '@/composables/resizeObserver' + +// Utilities +import { computed, onMounted, ref, shallowRef, watch } from 'vue' +import { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { HSV } from '@/util' + +export const makeVColorPickerCanvasProps = propsFactory({ + color: { + type: Object as PropType, + }, + disabled: Boolean, + dotSize: { + type: [Number, String], + default: 10, + }, + height: { + type: [Number, String], + default: 150, + }, + width: { + type: [Number, String], + default: 300, + }, + + ...makeComponentProps(), +}, 'VColorPickerCanvas') + +export const VColorPickerCanvas = defineComponent({ + name: 'VColorPickerCanvas', + + props: makeVColorPickerCanvasProps(), + + emits: { + 'update:color': (color: HSV) => true, + 'update:position': (hue: any) => true, + }, + + setup (props, { emit }) { + const isInteracting = shallowRef(false) + const canvasRef = ref() + const canvasWidth = shallowRef(parseFloat(props.width)) + const canvasHeight = shallowRef(parseFloat(props.height)) + + const _dotPosition = ref({ x: 0, y: 0 }) + const dotPosition = computed({ + get: () => _dotPosition.value, + set (val) { + if (!canvasRef.value) return + + const { x, y } = val + _dotPosition.value = val + + emit('update:color', { + h: props.color?.h ?? 0, + s: clamp(x, 0, canvasWidth.value) / canvasWidth.value, + v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value, + a: props.color?.a ?? 1, + }) + }, + }) + + const dotStyles = computed(() => { + const { x, y } = dotPosition.value + const radius = parseInt(props.dotSize, 10) / 2 + + return { + width: convertToUnit(props.dotSize), + height: convertToUnit(props.dotSize), + transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`, + } + }) + + const { resizeRef } = useResizeObserver(entries => { + if (!resizeRef.el?.offsetParent) return + + const { width, height } = entries[0].contentRect + + canvasWidth.value = width + canvasHeight.value = height + }) + + function updateDotPosition (x: number, y: number, rect: DOMRect) { + const { left, top, width, height } = rect + dotPosition.value = { + x: clamp(x - left, 0, width), + y: clamp(y - top, 0, height), + } + } + + function handleMouseDown (e: MouseEvent | TouchEvent) { + if (e.type === 'mousedown') { + // Prevent text selection while dragging + e.preventDefault() + } + + if (props.disabled) return + + handleMouseMove(e) + + window.addEventListener('mousemove', handleMouseMove) + window.addEventListener('mouseup', handleMouseUp) + window.addEventListener('touchmove', handleMouseMove) + window.addEventListener('touchend', handleMouseUp) + } + + function handleMouseMove (e: MouseEvent | TouchEvent) { + if (props.disabled || !canvasRef.value) return + + isInteracting.value = true + + const coords = getEventCoordinates(e) + + updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect()) + } + + function handleMouseUp () { + window.removeEventListener('mousemove', handleMouseMove) + window.removeEventListener('mouseup', handleMouseUp) + window.removeEventListener('touchmove', handleMouseMove) + window.removeEventListener('touchend', handleMouseUp) + } + + function updateCanvas () { + if (!canvasRef.value) return + + const canvas = canvasRef.value + const ctx = canvas.getContext('2d') + + if (!ctx) return + + const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0) + saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white + saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`) + ctx.fillStyle = saturationGradient + ctx.fillRect(0, 0, canvas.width, canvas.height) + + const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height) + valueGradient.addColorStop(0, 'hsla(0, 0%, 0%, 0)') // transparent + valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black + ctx.fillStyle = valueGradient + ctx.fillRect(0, 0, canvas.width, canvas.height) + } + + watch(() => props.color?.h, updateCanvas, { immediate: true }) + watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => { + updateCanvas() + _dotPosition.value = { + x: dotPosition.value.x * newVal[0] / oldVal[0], + y: dotPosition.value.y * newVal[1] / oldVal[1], + } + }, { flush: 'post' }) + + watch(() => props.color, () => { + if (isInteracting.value) { + isInteracting.value = false + return + } + + _dotPosition.value = props.color ? { + x: props.color.s * canvasWidth.value, + y: (1 - props.color.v) * canvasHeight.value, + } : { x: 0, y: 0 } + }, { deep: true, immediate: true }) + + onMounted(() => updateCanvas()) + + useRender(() => ( +
    + + { props.color && ( +
    + )} +
    + )) + + return {} + }, +}) + +export type VColorPickerCanvas = InstanceType diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass new file mode 100644 index 0000000..94e8335 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass @@ -0,0 +1,31 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-color-picker-edit + display: flex + margin-top: $color-picker-input-margin-top + + .v-color-picker-edit__input + width: 100% + display: flex + flex-wrap: wrap + justify-content: center + text-align: center + + &:not(:last-child) + margin-inline-end: $color-picker-input-margin + + input + border-radius: $color-picker-border-radius + margin-bottom: $color-picker-input-margin-bottom + min-width: 0 + outline: none + text-align: center + width: 100% + height: $color-picker-input-height + background: rgba(var(--v-theme-surface-variant), .2) + color: rgba(var(--v-theme-on-surface)) + + span + font-size: $color-picker-input-font-size diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx new file mode 100644 index 0000000..dd5fe84 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx @@ -0,0 +1,116 @@ +// Styles +import './VColorPickerEdit.sass' + +// Components +import { VBtn } from '@/components/VBtn' + +// Composables +import { makeComponentProps } from '@/composables/component' + +// Utilities +import { computed } from 'vue' +import { modes, nullColor } from './util' +import { defineComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { HSV } from '@/util/colorUtils' + +const VColorPickerInput = ({ label, ...rest }: any) => { + return ( +
    + + { label } +
    + ) +} + +export const makeVColorPickerEditProps = propsFactory({ + color: Object as PropType, + disabled: Boolean, + mode: { + type: String as PropType, + default: 'rgba', + validator: (v: string) => Object.keys(modes).includes(v), + }, + modes: { + type: Array as PropType, + default: () => Object.keys(modes), + validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)), + }, + + ...makeComponentProps(), +}, 'VColorPickerEdit') + +export const VColorPickerEdit = defineComponent({ + name: 'VColorPickerEdit', + + props: makeVColorPickerEditProps(), + + emits: { + 'update:color': (color: HSV) => true, + 'update:mode': (mode: keyof typeof modes) => true, + }, + + setup (props, { emit }) { + const enabledModes = computed(() => { + return props.modes.map(key => ({ ...modes[key], name: key })) + }) + + const inputs = computed(() => { + const mode = enabledModes.value.find(m => m.name === props.mode) + + if (!mode) return [] + + const color = props.color ? mode.to(props.color) : null + + return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => { + return { + ...mode.inputProps, + ...inputProps, + disabled: props.disabled, + value: color && getValue(color), + onChange: (e: InputEvent) => { + const target = e.target as HTMLInputElement | null + + if (!target) return + + emit('update:color', mode.from(getColor(color ?? mode.to(nullColor), target.value))) + }, + } + }) + }) + + useRender(() => ( +
    + { inputs.value?.map(props => ( + + ))} + { enabledModes.value.length > 1 && ( + { + const mi = enabledModes.value.findIndex(m => m.name === props.mode) + + emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name) + }} + /> + )} +
    + )) + + return {} + }, +}) + +export type VColorPickerEdit = InstanceType diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass new file mode 100644 index 0000000..fdcfea0 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.sass @@ -0,0 +1,69 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-color-picker-preview__alpha + .v-slider-track__background + background-color: transparent !important + + +tools.ltr() + background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv)) + +tools.rtl() + background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv)) + + &::after + content: '' + z-index: -1 + left: 0 + top: 0 + width: 100% + height: 100% + position: absolute + background: $color-picker-checkerboard + border-radius: inherit + + .v-color-picker-preview__sliders + display: flex + flex: 1 0 auto + flex-direction: column + padding-inline-end: $color-picker-preview-sliders-padding + + .v-color-picker-preview__dot + position: relative + height: $color-picker-preview-dot-size + width: $color-picker-preview-dot-size + background: $color-picker-checkerboard + border-radius: 50% + overflow: hidden + margin-inline-end: $color-picker-preview-dot-margin + + > div + width: 100% + height: 100% + + .v-color-picker-preview__hue + &:not(.v-input--is-disabled) + .v-slider-track__background + +tools.ltr() + background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%) + + +tools.rtl() + background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%) + + .v-color-picker-preview__track + position: relative + width: 100% + + margin: 0 !important + + .v-slider-track__fill + display: none + + .v-color-picker-preview + align-items: center + display: flex + margin-bottom: $color-picker-preview-margin-bottom + + .v-color-picker-preview__eye-dropper + position: relative + margin-right: $color-picker-preview-dropper-margin diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx new file mode 100644 index 0000000..7dc55ae --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx @@ -0,0 +1,121 @@ +// Styles +import './VColorPickerPreview.sass' + +// Components +import { VBtn } from '@/components/VBtn' +import { VSlider } from '@/components/VSlider' + +// Composables +import { makeComponentProps } from '@/composables/component' + +// Utilities +import { onUnmounted } from 'vue' +import { nullColor } from './util' +import { + defineComponent, + HexToHSV, + HSVtoCSS, + propsFactory, + SUPPORTS_EYE_DROPPER, + useRender, +} from '@/util' + +// Types +import type { PropType } from 'vue' +import type { Hex, HSV } from '@/util' + +export const makeVColorPickerPreviewProps = propsFactory({ + color: { + type: Object as PropType, + }, + disabled: Boolean, + hideAlpha: Boolean, + + ...makeComponentProps(), +}, 'VColorPickerPreview') + +export const VColorPickerPreview = defineComponent({ + name: 'VColorPickerPreview', + + props: makeVColorPickerPreviewProps(), + + emits: { + 'update:color': (color: HSV) => true, + }, + + setup (props, { emit }) { + const abortController = new AbortController() + + onUnmounted(() => abortController.abort()) + + async function openEyeDropper () { + if (!SUPPORTS_EYE_DROPPER) return + + const eyeDropper = new window.EyeDropper() + try { + const result = await eyeDropper.open({ signal: abortController.signal }) + const colorHexValue = HexToHSV(result.sRGBHex as Hex) + emit('update:color', { ...(props.color ?? nullColor), ...colorHexValue }) + } catch (e) {} + } + + useRender(() => ( +
    + { SUPPORTS_EYE_DROPPER && ( +
    + +
    + )} + +
    +
    +
    + +
    + emit('update:color', { ...(props.color ?? nullColor), h }) } + step={ 0 } + min={ 0 } + max={ 360 } + disabled={ props.disabled } + thumbSize={ 14 } + trackSize={ 8 } + trackFillColor="white" + hideDetails + /> + + { !props.hideAlpha && ( + emit('update:color', { ...(props.color ?? nullColor), a }) } + step={ 1 / 256 } + min={ 0 } + max={ 1 } + disabled={ props.disabled } + thumbSize={ 14 } + trackSize={ 8 } + trackFillColor="white" + hideDetails + /> + )} +
    +
    + )) + + return {} + }, +}) + +export type VColorPickerPreview = InstanceType diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.sass new file mode 100644 index 0000000..761248a --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.sass @@ -0,0 +1,36 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-color-picker-swatches + overflow-y: auto + + > div + display: flex + flex-wrap: wrap + justify-content: center + padding: $color-picker-swatches-border-radius + + .v-color-picker-swatches__swatch + display: flex + flex-direction: column + margin-bottom: $color-picker-swatch-margin-bottom + + .v-color-picker-swatches__color + position: relative + height: $color-picker-swatch-color-height + max-height: $color-picker-swatch-color-height + width: $color-picker-swatch-color-width + margin: $color-picker-swatch-color-margin + border-radius: $color-picker-swatch-color-border-radius + user-select: none + overflow: hidden + background: $color-picker-checkerboard + cursor: pointer + + > div + display: flex + align-items: center + justify-content: center + width: 100% + height: 100% diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.tsx new file mode 100644 index 0000000..aa4343b --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.tsx @@ -0,0 +1,115 @@ +// Styles +import './VColorPickerSwatches.sass' + +// Components +import { VIcon } from '@/components/VIcon' + +// Composables +import { makeComponentProps } from '@/composables/component' + +// Utilities +import { + convertToUnit, + deepEqual, + defineComponent, + getContrast, + parseColor, + propsFactory, + RGBtoCSS, + RGBtoHSV, + useRender, +} from '@/util' +import colors from '@/util/colors' + +// Types +import type { DeepReadonly, PropType } from 'vue' +import type { Color, HSV } from '@/util' + +export const makeVColorPickerSwatchesProps = propsFactory({ + swatches: { + type: Array as PropType>, + default: () => parseDefaultColors(colors), + }, + disabled: Boolean, + color: Object as PropType, + maxHeight: [Number, String], + + ...makeComponentProps(), +}, 'VColorPickerSwatches') + +function parseDefaultColors (colors: Record>) { + return Object.keys(colors).map(key => { + const color = colors[key] + return color.base ? [ + color.base, + color.darken4, + color.darken3, + color.darken2, + color.darken1, + color.lighten1, + color.lighten2, + color.lighten3, + color.lighten4, + color.lighten5, + ] : [ + color.black, + color.white, + color.transparent, + ] + }) +} + +export const VColorPickerSwatches = defineComponent({ + name: 'VColorPickerSwatches', + + props: makeVColorPickerSwatchesProps(), + + emits: { + 'update:color': (color: HSV) => true, + }, + + setup (props, { emit }) { + useRender(() => ( +
    +
    + { props.swatches.map(swatch => ( +
    + { swatch.map(color => { + const rgba = parseColor(color) + const hsva = RGBtoHSV(rgba) + const background = RGBtoCSS(rgba) + + return ( +
    hsva && emit('update:color', hsva) } + > +
    + { props.color && deepEqual(props.color, hsva) + ? 2 ? 'white' : 'black' } /> + : undefined + } +
    +
    + ) + })} +
    + ))} +
    +
    + )) + + return {} + }, +}) + +export type VColorPickerSwatches = InstanceType diff --git a/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.cy.tsx b/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.cy.tsx new file mode 100644 index 0000000..ba89a4f --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/__tests__/VColorPicker.spec.cy.tsx @@ -0,0 +1,315 @@ +/* eslint-disable sonarjs/no-identical-functions */ +/// + +import { VColorPicker } from '../VColorPicker' +import { Application } from '@/../cypress/templates' + +describe('VColorPicker', () => { + it('should should render correctly in dark theme', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker').should('exist') + }) + + it('should should render correctly in rtl locale', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker').should('exist') + }) + + it('should show swatches', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-swatches').should('exist') + }) + + it('should hide inputs', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-edit').should('not.exist') + }) + + it('should hide canvas', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-canvas').should('not.exist') + }) + + it('should hide preview and sliders', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-preview').should('not.exist') + }) + + it('should support elevation', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker').should('have.class', 'elevation-0') + }) + + it('should support rounded', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker').should('have.class', 'rounded-0') + }) + + it('should default to emitting hex value if no value is provided', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-canvas canvas') + .then(canvas => { + const width = canvas.width() ?? 0 + const height = canvas.height() ?? 0 + + cy.wrap(canvas).click(width / 2, height / 2) + }) + cy.emitted(VColorPicker, 'update:modelValue') + .should('have.length', 1) + .then(arr => expect(arr[0][0]).to.match(/^#[A-F0-9]{6}$/)) + }) + + it('should emit hexa value if hexa value is provided', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-canvas canvas') + .then(canvas => { + const width = canvas.width() ?? 0 + const height = canvas.height() ?? 0 + + cy.wrap(canvas).click(width / 2, height / 2) + }) + cy.emitted(VColorPicker, 'update:modelValue') + .should('have.length', 1) + .then(arr => expect(arr[0][0]).to.match(/^#[A-F0-9]{8}$/)) + }) + + it('should emit hex value if hex value is provided', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-canvas canvas') + .then(canvas => { + const width = canvas.width() ?? 0 + const height = canvas.height() ?? 0 + + cy.wrap(canvas).click(width / 2, height / 2) + }) + cy.emitted(VColorPicker, 'update:modelValue') + .should('have.length', 1) + .then(arr => expect(arr[0][0]).to.match(/^#[A-F0-9]{6}$/)) + }) + + it('should emit hsla value if hsla value is provided', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-canvas canvas') + .then(canvas => { + const width = canvas.width() ?? 0 + const height = canvas.height() ?? 0 + + cy.wrap(canvas).click(width / 2, height / 2) + }) + cy.emitted(VColorPicker, 'update:modelValue') + .should('have.length', 1) + .then(emits => { + expect(emits[0][0]).to.haveOwnProperty('h') + expect(emits[0][0]).to.haveOwnProperty('s') + expect(emits[0][0]).to.haveOwnProperty('l') + expect(emits[0][0]).to.haveOwnProperty('a') + }) + }) + + it('should emit rgba value if rgba value is provided', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-canvas canvas') + .then(canvas => { + const width = canvas.width() ?? 0 + const height = canvas.height() ?? 0 + + cy.wrap(canvas).click(width / 2, height / 2) + }) + cy.emitted(VColorPicker, 'update:modelValue') + .should('have.length', 1) + .then(emits => { + expect(emits[0][0]).to.haveOwnProperty('r') + expect(emits[0][0]).to.haveOwnProperty('g') + expect(emits[0][0]).to.haveOwnProperty('b') + expect(emits[0][0]).to.haveOwnProperty('a') + }) + }) + + it('should hide mode switch if only one mode is enabled', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-edit > .v-btn').should('not.exist') + }) + + it('should hide alpha slider if mode does not include alpha', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-preview__alpha').should('not.exist') + }) + + it('should emit value when changing hue slider', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-preview__hue') + .then(slider => { + const width = slider.width() ?? 0 + const height = slider.height() ?? 0 + + cy.wrap(slider).click(width / 2, height / 2) + }) + cy.emitted(VColorPicker, 'update:modelValue') + .then(emits => expect(emits[0][0]).to.not.equal('#0000ff')) + }) + + it('should emit value when changing alpha slider', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-preview__alpha') + .then(slider => { + const width = slider.width() ?? 0 + const height = slider.height() ?? 0 + + cy.wrap(slider).click(width / 2, height / 2) + }) + cy.emitted(VColorPicker, 'update:modelValue') + .then(emits => expect(emits[0][0]).to.not.equal('#0000ff')) + }) + + it('should emit value when clicking on swatch', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-swatches__swatch').eq(4) + .find('.v-color-picker-swatches__color').eq(0).as('color') + .click() + cy.get('@color').find('.v-icon').should('exist') + cy.emitted(VColorPicker, 'update:modelValue') + .should('have.length', 1) + }) + + it('should not use global defaults for slider color', () => { + cy.mount(() => ( + + + + ), null, { + defaults: { + VSlider: { + color: 'primary', + trackColor: 'primary', + trackFillColor: 'primary', + }, + }, + }) + + cy.get('.bg-primary').should('not.exist') + cy.get('.text-primary').should('not.exist') + }) + + it('should not show dot or input values if no color is set', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-canvas__dot').should('not.exist') + cy.get('.v-color-picker-edit__input input').should('have.value', '') + cy.get('.v-color-picker-canvas canvas').then(canvas => { + const width = canvas.width() ?? 0 + const height = canvas.height() ?? 0 + + cy.wrap(canvas).click(width / 2, height / 2) + }) + cy.get('.v-color-picker-canvas__dot').should('exist') + cy.get('.v-color-picker-edit__input input').invoke('val').should('not.be.empty') + }) + + it('should emit correct color when typing in hex field', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-color-picker-edit__input input').as('input') + .type('FF00CC') + cy.get('@input').blur() + cy.emitted(VColorPicker, 'update:modelValue') + .should('deep.equal', [['#FF00CC']]) + }) +}) diff --git a/packages/vuetify/src/components/VColorPicker/_variables.scss b/packages/vuetify/src/components/VColorPicker/_variables.scss new file mode 100644 index 0000000..847ee00 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/_variables.scss @@ -0,0 +1,30 @@ +// VColorPicker +$color-picker-border-radius: 4px !default; +$color-picker-checkerboard: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat !default; +$color-picker-controls-padding: 16px !default; +$color-picker-elevation: 2 !default; +$color-picker-input-font-size: 0.75rem !default; +$color-picker-input-height: 32px !default; +$color-picker-input-margin: 8px !default; +$color-picker-preview-margin-bottom: 0 !default; +$color-picker-input-margin-bottom: 8px !default; +$color-picker-input-margin-top: 24px !default; + +// VColorPickerSwatch +$color-picker-swatch-color-border-radius: 2px !default; +$color-picker-swatch-color-height: 18px !default; +$color-picker-swatch-color-margin: 2px 4px !default; +$color-picker-swatch-color-width: 45px !default; +$color-picker-swatch-margin-bottom: 10px !default; +$color-picker-swatches-border-radius: 8px !default; + +// VColorCanvas +$color-picker-canvas-dot-box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 1), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3) !default; +$color-picker-canvas-dot-disabled-box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3) !default; +$color-picker-canvas-dot-size: 15px !default; + +// VColorPickerPreview +$color-picker-preview-dot-size: 30px !default; +$color-picker-preview-dot-margin: 24px !default; +$color-picker-preview-dropper-margin: 12px !default; +$color-picker-preview-sliders-padding: 16px !default; diff --git a/packages/vuetify/src/components/VColorPicker/index.ts b/packages/vuetify/src/components/VColorPicker/index.ts new file mode 100644 index 0000000..f2423e3 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/index.ts @@ -0,0 +1 @@ +export { VColorPicker } from './VColorPicker' diff --git a/packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts b/packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts new file mode 100644 index 0000000..972af43 --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts @@ -0,0 +1,28 @@ +// Utilities +import { describe, expect, it } from '@jest/globals' +import { extractColor } from '../' + +const red = { h: 0, s: 1, v: 1, a: 1 } + +describe('VColorPicker Utils', () => { + describe('Extract color', () => { + const cases = [ + [red, null, '#FF0000'], + [red, '#FF0000', '#FF0000'], + [red, '#FF0000FF', '#FF0000'], + [{ ...red, a: 0.5 }, '#FF000000', '#FF000080'], + [red, { r: 255, g: 0, b: 0 }, { r: 255, g: 0, b: 0 }], + [red, { r: 255, g: 0, b: 0, a: 0 }, { r: 255, g: 0, b: 0, a: 1 }], + [red, { h: 0, s: 1, l: 0.5 }, { h: 0, s: 1, l: 0.5 }], + [red, { h: 0, s: 1, l: 0.5, a: 1 }, { h: 0, s: 1, l: 0.5, a: 1 }], + [red, { h: 0, s: 1, v: 1 }, { h: 0, s: 1, v: 1 }], + [red, { h: 0, s: 1, v: 1, a: 0.5 }, { h: 0, s: 1, v: 1, a: 1 }], + [red, undefined, '#FF0000'], + ] as const + + it.each(cases)('When given %p and %p, extractColor util should return %p', (...args) => { + const [color, input, result] = args + expect(extractColor(color, input)).toEqual(result) + }) + }) +}) diff --git a/packages/vuetify/src/components/VColorPicker/util/index.ts b/packages/vuetify/src/components/VColorPicker/util/index.ts new file mode 100644 index 0000000..5c4119c --- /dev/null +++ b/packages/vuetify/src/components/VColorPicker/util/index.ts @@ -0,0 +1,194 @@ +// Utilities +import { + HexToHSV, + HSLtoHSV, + HSVtoHex, + HSVtoHSL, + HSVtoRGB, + RGBtoHSV, +} from '@/util/colorUtils' +import { has } from '@/util/helpers' + +// Types +import type { HSL, HSV, RGB } from '@/util/colorUtils' + +function stripAlpha (color: any, stripAlpha: boolean) { + if (stripAlpha) { + const { a, ...rest } = color + + return rest + } + + return color +} + +export function extractColor (color: HSV, input: any) { + if (input == null || typeof input === 'string') { + const hex = HSVtoHex(color) + + if (color.a === 1) return hex.slice(0, 7) + else return hex + } + + if (typeof input === 'object') { + let converted + + if (has(input, ['r', 'g', 'b'])) converted = HSVtoRGB(color) + else if (has(input, ['h', 's', 'l'])) converted = HSVtoHSL(color) + else if (has(input, ['h', 's', 'v'])) converted = color + + return stripAlpha(converted, !has(input, ['a']) && color.a === 1) + } + + return color +} + +export function hasAlpha (color: any) { + if (!color) return false + + if (typeof color === 'string') { + return color.length > 7 + } + + if (typeof color === 'object') { + return has(color, ['a']) || has(color, ['alpha']) + } + + return false +} + +export const nullColor = { h: 0, s: 0, v: 0, a: 1 } + +export type ColorPickerMode = { + inputProps: Record + inputs: { + [key: string]: any + getValue: (color: any) => number | string + getColor: (color: any, v: string) => any + }[] + from: (color: any) => HSV + to: (color: HSV) => any +} + +const rgba: ColorPickerMode = { + inputProps: { + type: 'number', + min: 0, + }, + inputs: [ + { + label: 'R', + max: 255, + step: 1, + getValue: (c: RGB) => Math.round(c.r), + getColor: (c: RGB, v: string): RGB => ({ ...c, r: Number(v) }), + }, + { + label: 'G', + max: 255, + step: 1, + getValue: (c: RGB) => Math.round(c.g), + getColor: (c: RGB, v: string): RGB => ({ ...c, g: Number(v) }), + }, + { + label: 'B', + max: 255, + step: 1, + getValue: (c: RGB) => Math.round(c.b), + getColor: (c: RGB, v: string): RGB => ({ ...c, b: Number(v) }), + }, + { + label: 'A', + max: 1, + step: 0.01, + getValue: ({ a }: RGB) => a != null ? Math.round(a * 100) / 100 : 1, + getColor: (c: RGB, v: string): RGB => ({ ...c, a: Number(v) }), + }, + ], + to: HSVtoRGB, + from: RGBtoHSV, +} + +const rgb = { + ...rgba, + inputs: rgba.inputs?.slice(0, 3), +} + +const hsla: ColorPickerMode = { + inputProps: { + type: 'number', + min: 0, + }, + inputs: [ + { + label: 'H', + max: 360, + step: 1, + getValue: (c: HSL) => Math.round(c.h), + getColor: (c: HSL, v: string): HSL => ({ ...c, h: Number(v) }), + }, + { + label: 'S', + max: 1, + step: 0.01, + getValue: (c: HSL) => Math.round(c.s * 100) / 100, + getColor: (c: HSL, v: string): HSL => ({ ...c, s: Number(v) }), + }, + { + label: 'L', + max: 1, + step: 0.01, + getValue: (c: HSL) => Math.round(c.l * 100) / 100, + getColor: (c: HSL, v: string): HSL => ({ ...c, l: Number(v) }), + }, + { + label: 'A', + max: 1, + step: 0.01, + getValue: ({ a }: HSL) => a != null ? Math.round(a * 100) / 100 : 1, + getColor: (c: HSL, v: string): HSL => ({ ...c, a: Number(v) }), + }, + ], + to: HSVtoHSL, + from: HSLtoHSV, +} + +const hsl = { + ...hsla, + inputs: hsla.inputs.slice(0, 3), +} + +const hexa: ColorPickerMode = { + inputProps: { + type: 'text', + }, + inputs: [ + { + label: 'HEXA', + getValue: (c: string) => c, + getColor: (c: string, v: string) => v, + }, + ], + to: HSVtoHex, + from: HexToHSV, +} + +const hex = { + ...hexa, + inputs: [ + { + label: 'HEX', + getValue: (c: string) => c.slice(0, 7), + getColor: (c: string, v: string) => v, + }, + ], +} + +export const modes = { + rgb, + rgba, + hsl, + hsla, + hex, + hexa, +} satisfies Record diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.sass b/packages/vuetify/src/components/VCombobox/VCombobox.sass new file mode 100644 index 0000000..cae4b8d --- /dev/null +++ b/packages/vuetify/src/components/VCombobox/VCombobox.sass @@ -0,0 +1,106 @@ +@use 'sass:selector' +@use 'sass:math' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-combobox + .v-field + .v-text-field__prefix, + .v-text-field__suffix, + .v-field__input, + &.v-field + cursor: text + + .v-field + .v-field__input + > input + flex: 1 1 + + .v-field + input + min-width: $combobox-focused-input + + &:not(.v-field--focused) + input + min-width: 0 + + .v-field--dirty + .v-combobox__selection + margin-inline-end: $combobox-selection-gap + + .v-combobox__selection-text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .v-combobox + &__content + overflow: hidden + + @include tools.elevation($combobox-content-elevation) + @include tools.rounded($combobox-content-border-radius) + + &__mask + background: rgb(var(--v-theme-surface-light)) + + &__selection + display: inline-flex + align-items: center + height: calc($input-font-size * $input-line-height) + letter-spacing: inherit + line-height: inherit + max-width: calc(100% - $combobox-selection-gap - $combobox-input-buffer) + + &__selection + &:first-child + margin-inline-start: 0 + + &--chips.v-input--density-compact + .v-field--variant-solo, + .v-field--variant-solo-inverted, + .v-field--variant-filled, + .v-field--variant-solo-filled + .v-label.v-field-label + &--floating + top: 0px + + &--selecting-index + .v-combobox__selection + opacity: var(--v-medium-emphasis-opacity) + + &--selected + opacity: 1 + + .v-field__input > input + caret-color: transparent + + &--single:not(.v-combobox--selection-slot) + &.v-text-field input + flex: 1 1 + position: absolute + left: 0 + right: 0 + width: 100% + padding-inline: inherit + + .v-field--active + input + transition: none + + .v-field--dirty:not(.v-field--focused) + input + opacity: 0 + + .v-field--focused + .v-combobox__selection + opacity: 0 + + &__menu-icon + margin-inline-start: 4px + transition: $combobox-transition + + .v-combobox--active-menu & + opacity: var(--v-high-emphasis-opacity) + transform: rotate(180deg) diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx new file mode 100644 index 0000000..bc1fbe1 --- /dev/null +++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx @@ -0,0 +1,704 @@ +// Styles +import './VCombobox.sass' + +// Components +import { VAvatar } from '@/components/VAvatar' +import { VCheckboxBtn } from '@/components/VCheckbox' +import { VChip } from '@/components/VChip' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' +import { VList, VListItem } from '@/components/VList' +import { VMenu } from '@/components/VMenu' +import { makeSelectProps } from '@/components/VSelect/VSelect' +import { VTextField } from '@/components/VTextField' +import { makeVTextFieldProps } from '@/components/VTextField/VTextField' +import { VVirtualScroll } from '@/components/VVirtualScroll' + +// Composables +import { useScrolling } from '../VSelect/useScrolling' +import { useTextColor } from '@/composables/color' +import { makeFilterProps, useFilter } from '@/composables/filter' +import { useForm } from '@/composables/form' +import { forwardRefs } from '@/composables/forwardRefs' +import { transformItem, useItems } from '@/composables/list-items' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeTransitionProps } from '@/composables/transition' + +// Utilities +import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue' +import { + ensureValidVNode, + genericComponent, + IN_BROWSER, + isComposingIgnoreKey, + noop, + omit, + propsFactory, + useRender, + wrapInArray, +} from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VFieldSlots } from '@/components/VField/VField' +import type { VInputSlots } from '@/components/VInput/VInput' +import type { FilterMatch } from '@/composables/filter' +import type { ListItem } from '@/composables/list-items' +import type { GenericProps, SelectItemKey } from '@/util' + +function highlightResult (text: string, matches: FilterMatch | undefined, length: number) { + if (matches == null) return text + + if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented') + + return typeof matches === 'number' && ~matches + ? ( + <> + { text.substr(0, matches) } + { text.substr(matches, length) } + { text.substr(matches + length) } + + ) + : text +} + +type Primitive = string | number | boolean | symbol + +type Val = string | ([T] extends [Primitive] + ? T + : (ReturnObject extends true ? T : any)) + +type Value = + Multiple extends true + ? readonly Val[] + : Val | null + +export const makeVComboboxProps = propsFactory({ + autoSelectFirst: { + type: [Boolean, String] as PropType, + }, + clearOnSelect: { + type: Boolean, + default: true, + }, + delimiters: Array as PropType, + + ...makeFilterProps({ filterKeys: ['title'] }), + ...makeSelectProps({ hideNoData: true, returnObject: true }), + ...omit(makeVTextFieldProps({ + modelValue: null, + role: 'combobox', + }), ['validationValue', 'dirty', 'appendInnerIcon']), + ...makeTransitionProps({ transition: false }), +}, 'VCombobox') + +type ItemType = T extends readonly (infer U)[] ? U : never + +export const VCombobox = genericComponent, + ReturnObject extends boolean = true, + Multiple extends boolean = false, + V extends Value = Value +>( + props: { + items?: T + itemTitle?: SelectItemKey> + itemValue?: SelectItemKey> + itemProps?: SelectItemKey> + returnObject?: ReturnObject + multiple?: Multiple + modelValue?: V | null + 'onUpdate:modelValue'?: (value: V) => void + }, + slots: Omit & { + item: { item: ListItem, index: number, props: Record } + chip: { item: ListItem, index: number, props: Record } + selection: { item: ListItem, index: number } + 'prepend-item': never + 'append-item': never + 'no-data': never + } +) => GenericProps>()({ + name: 'VCombobox', + + props: makeVComboboxProps(), + + emits: { + 'update:focused': (focused: boolean) => true, + 'update:modelValue': (value: any) => true, + 'update:search': (value: string) => true, + 'update:menu': (value: boolean) => true, + }, + + setup (props, { emit, slots }) { + const { t } = useLocale() + const vTextFieldRef = ref() + const isFocused = shallowRef(false) + const isPristine = shallowRef(true) + const listHasFocus = shallowRef(false) + const vMenuRef = ref() + const vVirtualScrollRef = ref() + const _menu = useProxiedModel(props, 'menu') + const menu = computed({ + get: () => _menu.value, + set: v => { + if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return + _menu.value = v + }, + }) + const selectionIndex = shallowRef(-1) + let cleared = false + const color = computed(() => vTextFieldRef.value?.color) + const label = computed(() => menu.value ? props.closeText : props.openText) + const { items, transformIn, transformOut } = useItems(props) + const { textColorClasses, textColorStyles } = useTextColor(color) + const model = useProxiedModel( + props, + 'modelValue', + [], + v => transformIn(wrapInArray(v)), + v => { + const transformed = transformOut(v) + return props.multiple ? transformed : (transformed[0] ?? null) + } + ) + const form = useForm() + + const hasChips = computed(() => !!(props.chips || slots.chip)) + const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection) + + const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '') + + const search = computed({ + get: () => { + return _search.value + }, + set: (val: string | null) => { + _search.value = val ?? '' + if (!props.multiple && !hasSelectionSlot.value) { + model.value = [transformItem(props, val)] + } + + if (val && props.multiple && props.delimiters?.length) { + const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`)) + if (values.length > 1) { + values.forEach(v => { + v = v.trim() + if (v) select(transformItem(props, v)) + }) + _search.value = '' + } + } + + if (!val) selectionIndex.value = -1 + + isPristine.value = !val + }, + }) + const counterValue = computed(() => { + return typeof props.counterValue === 'function' ? props.counterValue(model.value) + : typeof props.counterValue === 'number' ? props.counterValue + : (props.multiple ? model.value.length : search.value.length) + }) + watch(_search, value => { + if (cleared) { + // wait for clear to finish, VTextField sets _search to null + // then search computed triggers and updates _search to '' + nextTick(() => (cleared = false)) + } else if (isFocused.value && !menu.value) { + menu.value = true + } + + emit('update:search', value) + }) + + watch(model, value => { + if (!props.multiple && !hasSelectionSlot.value) { + _search.value = value[0]?.title ?? '' + } + }) + + const { filteredItems, getMatches } = useFilter(props, items, () => isPristine.value ? '' : search.value) + + const displayItems = computed(() => { + if (props.hideSelected) { + return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value)) + } + return filteredItems.value + }) + + const selectedValues = computed(() => model.value.map(selection => selection.value)) + + const highlightFirst = computed(() => { + const selectFirst = props.autoSelectFirst === true || + (props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title) + return selectFirst && + displayItems.value.length > 0 && + !isPristine.value && + !listHasFocus.value + }) + + const menuDisabled = computed(() => ( + (props.hideNoData && !displayItems.value.length) || + props.readonly || form?.isReadonly.value + )) + + const listRef = ref() + const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef) + function onClear (e: MouseEvent) { + cleared = true + + if (props.openOnClear) { + menu.value = true + } + } + function onMousedownControl () { + if (menuDisabled.value) return + + menu.value = true + } + function onMousedownMenuIcon (e: MouseEvent) { + if (menuDisabled.value) return + + if (isFocused.value) { + e.preventDefault() + e.stopPropagation() + } + menu.value = !menu.value + } + // eslint-disable-next-line complexity + function onKeydown (e: KeyboardEvent) { + if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return + + const selectionStart = vTextFieldRef.value.selectionStart + const length = model.value.length + + if ( + selectionIndex.value > -1 || + ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key) + ) { + e.preventDefault() + } + + if (['Enter', 'ArrowDown'].includes(e.key)) { + menu.value = true + } + + if (['Escape'].includes(e.key)) { + menu.value = false + } + + if (['Enter', 'Escape', 'Tab'].includes(e.key)) { + if ( + highlightFirst.value && + ['Enter', 'Tab'].includes(e.key) && + !model.value.some(({ value }) => value === displayItems.value[0].value) + ) { + select(filteredItems.value[0]) + } + + isPristine.value = true + } + + if (e.key === 'ArrowDown' && highlightFirst.value) { + listRef.value?.focus('next') + } + + if (e.key === 'Enter' && search.value) { + select(transformItem(props, search.value)) + if (hasSelectionSlot.value) _search.value = '' + } + + if (['Backspace', 'Delete'].includes(e.key)) { + if ( + !props.multiple && + hasSelectionSlot.value && + model.value.length > 0 && + !search.value + ) return select(model.value[0], false) + + if (~selectionIndex.value) { + const originalSelectionIndex = selectionIndex.value + select(model.value[selectionIndex.value], false) + + selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex + } else if (e.key === 'Backspace' && !search.value) { + selectionIndex.value = length - 1 + } + } + + if (!props.multiple) return + + if (e.key === 'ArrowLeft') { + if (selectionIndex.value < 0 && selectionStart > 0) return + + const prev = selectionIndex.value > -1 + ? selectionIndex.value - 1 + : length - 1 + + if (model.value[prev]) { + selectionIndex.value = prev + } else { + selectionIndex.value = -1 + vTextFieldRef.value.setSelectionRange(search.value.length, search.value.length) + } + } + + if (e.key === 'ArrowRight') { + if (selectionIndex.value < 0) return + + const next = selectionIndex.value + 1 + + if (model.value[next]) { + selectionIndex.value = next + } else { + selectionIndex.value = -1 + vTextFieldRef.value.setSelectionRange(0, 0) + } + } + } + function onAfterLeave () { + if (isFocused.value) { + isPristine.value = true + vTextFieldRef.value?.focus() + } + } + /** @param set - null means toggle */ + function select (item: ListItem | undefined, set: boolean | null = true) { + if (!item || item.props.disabled) return + + if (props.multiple) { + const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value)) + const add = set == null ? !~index : set + + if (~index) { + const value = add ? [...model.value, item] : [...model.value] + value.splice(index, 1) + model.value = value + } else if (add) { + model.value = [...model.value, item] + } + + if (props.clearOnSelect) { + search.value = '' + } + } else { + const add = set !== false + model.value = add ? [item] : [] + _search.value = add && !hasSelectionSlot.value ? item.title : '' + + // watch for search watcher to trigger + nextTick(() => { + menu.value = false + isPristine.value = true + }) + } + } + + function onFocusin (e: FocusEvent) { + isFocused.value = true + setTimeout(() => { + listHasFocus.value = true + }) + } + function onFocusout (e: FocusEvent) { + listHasFocus.value = false + } + function onUpdateModelValue (v: any) { + if (v == null || (v === '' && !props.multiple && !hasSelectionSlot.value)) model.value = [] + } + + watch(isFocused, (val, oldVal) => { + if (val || val === oldVal) return + + selectionIndex.value = -1 + menu.value = false + + if (search.value) { + if (props.multiple) { + select(transformItem(props, search.value)) + return + } + + if (!hasSelectionSlot.value) return + + if (model.value.some(({ title }) => title === search.value)) { + _search.value = '' + } else { + select(transformItem(props, search.value)) + } + } + }) + + watch(menu, () => { + if (!props.hideSelected && menu.value && model.value.length) { + const index = displayItems.value.findIndex( + item => model.value.some(s => props.valueComparator(s.value, item.value)) + ) + IN_BROWSER && window.requestAnimationFrame(() => { + index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index) + }) + } + }) + + watch(() => props.items, (newVal, oldVal) => { + if (menu.value) return + + if (isFocused.value && !oldVal.length && newVal.length) { + menu.value = true + } + }) + + useRender(() => { + const hasList = !!( + (!props.hideNoData || displayItems.value.length) || + slots['prepend-item'] || + slots['append-item'] || + slots['no-data'] + ) + const isDirty = model.value.length > 0 + const textFieldProps = VTextField.filterProps(props) + + return ( + -1, + [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true, + }, + props.class, + ]} + style={ props.style } + readonly={ props.readonly } + placeholder={ isDirty ? undefined : props.placeholder } + onClick:clear={ onClear } + onMousedown:control={ onMousedownControl } + onKeydown={ onKeydown } + > + {{ + ...slots, + default: () => ( + <> + + { hasList && ( + e.preventDefault() } + onKeydown={ onListKeydown } + onFocusin={ onFocusin } + onFocusout={ onFocusout } + onScrollPassive={ onListScroll } + tabindex="-1" + aria-live="polite" + color={ props.itemColor ?? props.color } + { ...props.listProps } + > + { slots['prepend-item']?.() } + + { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? ( + + ))} + + + { ({ item, index, itemRef }) => { + const itemProps = mergeProps(item.props, { + ref: itemRef, + key: index, + active: (highlightFirst.value && index === 0) ? true : undefined, + onClick: () => select(item, null), + }) + + return slots.item?.({ + item, + index, + props: itemProps, + }) ?? ( + + {{ + prepend: ({ isSelected }) => ( + <> + { props.multiple && !props.hideSelected ? ( + + ) : undefined } + + { item.props.prependAvatar && ( + + )} + + { item.props.prependIcon && ( + + )} + + ), + title: () => { + return isPristine.value + ? item.title + : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0) + }, + }} + + ) + }} + + + { slots['append-item']?.() } + + )} + + + { model.value.map((item, index) => { + function onChipClose (e: Event) { + e.stopPropagation() + e.preventDefault() + + select(item, false) + } + + const slotProps = { + 'onClick:close': onChipClose, + onKeydown (e: KeyboardEvent) { + if (e.key !== 'Enter' && e.key !== ' ') return + + e.preventDefault() + e.stopPropagation() + + onChipClose(e) + }, + onMousedown (e: MouseEvent) { + e.preventDefault() + e.stopPropagation() + }, + modelValue: true, + 'onUpdate:modelValue': undefined, + } + + const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection + const slotContent = hasSlot + ? ensureValidVNode( + hasChips.value + ? slots.chip!({ item, index, props: slotProps }) + : slots.selection!({ item, index }) + ) + : undefined + + if (hasSlot && !slotContent) return undefined + + return ( +
    + { hasChips.value ? ( + !slots.chip ? ( + + ) : ( + + { slotContent } + + ) + ) : ( + slotContent ?? ( + + { item.title } + { props.multiple && (index < model.value.length - 1) && ( + , + )} + + ) + )} +
    + ) + })} + + ), + 'append-inner': (...args) => ( + <> + { slots['append-inner']?.(...args) } + { (!props.hideNoData || props.items.length) && props.menuIcon ? ( + + ) : undefined } + + ), + }} +     + ) + }) + + return forwardRefs({ + isFocused, + isPristine, + menu, + search, + selectionIndex, + filteredItems, + select, + }, vTextFieldRef) + }, +}) + +export type VCombobox = InstanceType diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts new file mode 100644 index 0000000..12f4aac --- /dev/null +++ b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts @@ -0,0 +1,696 @@ +// @ts-nocheck +/* eslint-disable */ + +// Components +// import VCombobox from '../VCombobox' + +// Utilities +import { + mount, + Wrapper, +} from '@vue/test-utils' +// import { keyCodes } from '../../../util/helpers' + +describe.skip('VCombobox.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: object) => Wrapper + + beforeEach(() => { + document.body.setAttribute('data-app', 'true') + + mountFunction = (options = {}) => { + return mount(VCombobox, { + // https://github.com/vuejs/vue-test-utils/issues/1130 + sync: false, + mocks: { + $vuetify: { + lang: { + t: (val: string) => val, + }, + theme: { + dark: false, + }, + }, + }, + ...options, + }) + } + }) + + function createMultipleCombobox (propsData) { + const change = jest.fn() + const wrapper = mountFunction({ + attachToDocument: true, + propsData: Object.assign({ + multiple: true, + value: [], + }, propsData), + }) + + wrapper.vm.$on('input', change) + return { wrapper, change } + } + + it('should create new values when tagging', async () => { + const { wrapper, change } = createMultipleCombobox({}) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + element.value = 'foo' + input.trigger('input') + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith(['foo']) + }) + + it('should change selectedIndex with keyboard', async () => { + const { wrapper } = createMultipleCombobox({ + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + + input.trigger('focus') + await wrapper.vm.$nextTick() + + for (const index of [1, 0, -1]) { + input.trigger('keydown.left') + await wrapper.vm.$nextTick() + expect(wrapper.vm.selectedIndex).toBe(index) + } + }) + + it('should delete a tagged item when selected and backspace/delete is pressed', async () => { + const { wrapper, change } = createMultipleCombobox({ + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + + input.trigger('focus') + input.trigger('keydown.left') + expect(wrapper.vm.selectedIndex).toBe(1) + + input.trigger('keydown.delete') + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledWith(['foo']) + expect(wrapper.vm.selectedIndex).toBe(0) + + const backspace = new Event('keydown') + backspace.keyCode = keyCodes.delete + + input.element.dispatchEvent(backspace) // Avoriaz doesn't wrap keydown.backspace + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledWith([]) + expect(wrapper.vm.selectedIndex).toBe(-1) + }) + + it('should add a tag on enter using the current searchValue', async () => { + const { wrapper, change } = createMultipleCombobox({ + items: ['bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + await wrapper.vm.$nextTick() + + element.value = 'ba' + input.trigger('input') + await wrapper.vm.$nextTick() + input.trigger('keydown.enter') + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith(['ba']) + }) + + it.skip('should add a tag on left arrow and select the previous tag', async () => { + const { wrapper, change } = createMultipleCombobox({ + value: ['foo'], + items: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + element.value = 'b' + input.trigger('input') + input.trigger('keydown.left') + + expect(change).toHaveBeenCalledWith(['foo', 'b']) + expect(wrapper.vm.selectedIndex).toBe(0) + }) + + it('should remove a duplicate tag and add it to the end', async () => { + const { wrapper, change } = createMultipleCombobox({ + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + await wrapper.vm.$nextTick() + + element.value = 'foo' + input.trigger('input') + input.trigger('keydown.enter') + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith(['bar', 'foo']) + }) + + it('should add tag with valid search value on blur', async () => { + const { wrapper, change } = createMultipleCombobox({}) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + element.value = 'bar' + input.trigger('input') + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith(['bar']) + }) + + it('should be able to add a tag from user input after deleting a tag with delete', async () => { + const { wrapper, change } = createMultipleCombobox({ + multiple: true, + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + input.trigger('keydown.left') + expect(wrapper.vm.selectedIndex).toBe(1) + input.trigger('keydown.delete') + expect(change).toHaveBeenCalledWith(['foo']) + expect(wrapper.vm.selectedIndex).toBe(0) + + // Must be reset for input to update + wrapper.vm.selectedIndex = -1 + await wrapper.vm.$nextTick() + + element.value = 'baz' + + input.trigger('input') + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith(['foo', 'baz']) + expect(wrapper.vm.selectedIndex).toBe(-1) + }) + + it('should be able to add a tag from user input after clicking a deletable chip', async () => { + const { wrapper, change } = createMultipleCombobox({ + chips: true, + clearable: true, + deletableChips: true, + multiple: true, + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + const chip = wrapper.findAll('.v-chip').at(1) + const close = chip.find('.v-chip__close') + + input.trigger('focus') + chip.trigger('click') + close.trigger('click') + expect(change).toHaveBeenCalledWith(['foo']) + expect(wrapper.vm.selectedIndex).toBe(-1) + + element.value = 'baz' + input.trigger('input') + expect(wrapper.vm.internalSearch).toBe('baz') + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith(['foo', 'baz']) + expect(wrapper.vm.selectedIndex).toBe(-1) + }) + + // This test is actually almost useless + it('should not change search when selecting an index', () => { + const { wrapper } = createMultipleCombobox({ + chips: true, + multiple: true, + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + expect(wrapper.vm.selectedIndex).toBe(-1) + + input.trigger('keydown.left') + expect(wrapper.vm.selectedIndex).toBe(1) + + expect(wrapper.vm.internalSearch).toBeUndefined() + input.trigger('keydown.right') + element.value = 'fizz' + input.trigger('input') + + expect(wrapper.vm.internalSearch).toBe('fizz') + expect(wrapper.vm.selectedIndex).toBe(-1) + }) + + // eslint-disable-next-line max-statements + it('should create new items when a delimiter is entered', async () => { + const { wrapper, change } = createMultipleCombobox({ + delimiters: [', ', 'baz'], + }) + + await wrapper.vm.$nextTick() + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + input.trigger('focus') + + element.value = 'foo,' + input.trigger('input') + + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledTimes(0) + + element.value += ' ' + input.trigger('input') + + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledTimes(1) + expect(change).toHaveBeenCalledWith(['foo']) + expect(element.value).toBe('') + + element.value = 'foo,barba' + input.trigger('input') + + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledTimes(1) + + element.value += 'z' + input.trigger('input') + + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledTimes(2) + expect(change).toHaveBeenCalledWith(['foo', 'foo,bar']) + expect(element.value).toBe('') + }) + + it('should allow the editing of an existing value', async () => { + const { wrapper } = createMultipleCombobox({ + chips: true, + value: ['foo'], + }) + + const change = jest.fn() + const internal = jest.fn() + const chip = wrapper.find('.v-chip') + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + wrapper.vm.$on('change', change) + wrapper.vm.$watch('internalValue', internal) + + expect(wrapper.vm.editingIndex).toBe(-1) + expect(wrapper.vm.internalSearch).toBeUndefined() + + chip.trigger('dblclick') + + expect(wrapper.vm.editingIndex).toBe(0) + expect(wrapper.vm.internalSearch).toBe('foo') + + element.value = 'foobar' + input.trigger('input') + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith(['foobar']) + expect(internal).toHaveBeenCalledWith(['foobar'], ['foo']) + }) + + it('should paste as item if source of pasted text is item in another v-combobox/v-autocomplete', async () => { + const { wrapper, change } = createMultipleCombobox({ + items: ['aaa', 'bbb'], + }) + + const input = wrapper.find('input') + const getData = jest.fn(mimeType => 'ccc') + const event = { + clipboardData: { + getData, + }, + } + + input.trigger('focus') + input.trigger('paste', event) + + expect(getData).toHaveBeenCalledTimes(1) + expect(getData).toHaveBeenCalledWith('text/vnd.vuetify.autocomplete.item+plain') + expect(change).toHaveBeenCalledWith(['ccc']) + }) + + it('should paste as text if source of pasted text is not item in another v-combobox/v-autocomplete', async () => { + const { wrapper, change } = createMultipleCombobox({ + items: ['aaa', 'bbb'], + }) + + const input = wrapper.find('input') + const getData = jest.fn(mimeType => mimeType === 'text/plain' ? 'ccc' : '') + const event = { + clipboardData: { + getData, + }, + } + + input.trigger('focus') + input.trigger('paste', event) + + expect(change).not.toHaveBeenCalled() + // expect(input.element.value).toBe('ccc') // can be checked only in browser environment + }) + + it('should not add search to list when selecting items with keyboard', async () => { + const { wrapper, change } = createMultipleCombobox({ + chips: true, + multiple: true, + items: ['aaa', 'bbb'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + element.value = 'a' + input.trigger('input') + input.trigger('keydown.down') + + await wrapper.vm.$nextTick() + + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(wrapper.vm.internalSearch).toBeNull() + expect(change).toHaveBeenCalledWith(['aaa']) + }) + + // https://github.com/vuetifyjs/vuetify/issues/12781 + // eslint-disable-next-line max-statements + it('should correctly add items after deletion and blur', async () => { + const { wrapper, change } = createMultipleCombobox({ + multiple: true, + chips: true, + value: ['foo', 'bar'], + items: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + // delete 'bar' + input.trigger('focus') + input.trigger('keydown.left') + expect(wrapper.vm.selectedIndex).toBe(1) + input.trigger('keydown.delete') + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledWith(['foo']) + expect(wrapper.vm.selectedIndex).toBe(0) + + // Lose focus + input.trigger('keydown.tab') + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledWith(['foo']) + + // Add 'bar' again + input.trigger('focus') + element.value = 'bar' + input.trigger('input') + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + input.trigger('keydown.enter') + await wrapper.vm.$nextTick() + expect(change).toHaveBeenLastCalledWith(['foo', 'bar']) + + // Set 'bar' as search input + element.value = 'bar' + input.trigger('input') + await wrapper.vm.$nextTick() + expect(wrapper.vm.internalSearch).toBe('bar') + + // Lose focus + input.trigger('keydown.tab') + await wrapper.vm.$nextTick() + expect(change).toHaveBeenLastCalledWith(['foo', 'bar']) + }) + + // https://github.com/vuetifyjs/vuetify/issues/13274 + it('should not add empty values', async () => { + const { wrapper, change } = createMultipleCombobox({ + chips: true, + multiple: true, + items: ['foo'], + value: ['foo'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + // Add a value and then remove it + input.trigger('focus') + element.value = 'a' + input.trigger('input') + await wrapper.vm.$nextTick() + element.value = '' + input.trigger('input') + await wrapper.vm.$nextTick() + + // Lose focus + input.trigger('keydown.tab') + await wrapper.vm.$nextTick() + + expect(change).not.toHaveBeenCalled() + }) + + // https://github.com/vuetifyjs/vuetify/issues/10827 + it('should not add empty chips after clear and re-select', async () => { + const { wrapper, change } = createMultipleCombobox({ + chips: true, + multiple: true, + clearable: true, + items: ['foo', 'bar'], + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + // Dbl click chip at index 1 + const chip = wrapper.findAll('.v-chip').at(1) + chip.trigger('dblclick') + expect(wrapper.vm.editingIndex).toBe(1) + expect(wrapper.vm.internalSearch).toBe('bar') + + // Click clear button + const clear = wrapper.find('.v-input__icon--clear .v-icon') + clear.trigger('click') + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledWith([]) + await wrapper.vm.$nextTick() + + // Add 'foo' + input.trigger('focus') + element.value = 'foo' + input.trigger('input') + await wrapper.vm.$nextTick() + input.trigger('keydown.enter') + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenLastCalledWith(['foo']) + }) + + // https://github.com/vuetifyjs/vuetify/issues/12351 + it('should correctly handle duplicate items', async () => { + const { wrapper, change } = createMultipleCombobox({ + chips: true, + multiple: true, + items: [ + { text: 'foo', value: 'foo' }, + { text: 'bar', value: 'bar' }, + ], + value: [ + { text: 'foo', value: 'foo' }, + ], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + input.trigger('focus') + element.value = 'foo' + input.trigger('input') + await wrapper.vm.$nextTick() + + input.trigger('keydown.tab') + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenLastCalledWith([{ text: 'foo', value: 'foo' }]) + }) + + // https://github.com/vuetifyjs/vuetify/issues/6364 + it('should not add duplicate chip after edit', async () => { + const { wrapper, change } = createMultipleCombobox({ + chips: true, + multiple: true, + clearable: true, + items: ['foo', 'bar'], + value: ['foo', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + // Dbl click chip at index 1 + const chip = wrapper.findAll('.v-chip').at(1) + chip.trigger('dblclick') + expect(wrapper.vm.editingIndex).toBe(1) + expect(wrapper.vm.internalSearch).toBe('bar') + + // Add a duplicate value - 'foo' + input.trigger('focus') + element.value = 'foo' + input.trigger('input') + await wrapper.vm.$nextTick() + input.trigger('keydown.enter') + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenLastCalledWith(['bar', 'foo']) + }) + + // example 1 in https://github.com/vuetifyjs/vuetify/issues/14194 + it('should not point to a result that does not exist as in example 1', async () => { + const { wrapper } = createMultipleCombobox({ + items: ['a', 'aa', 'aaa', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + const listIndexUpdate = jest.fn() + wrapper.vm.$on('update:list-index', listIndexUpdate) + + input.trigger('focus') + await wrapper.vm.$nextTick() + element.value = 'a' + input.trigger('input') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + element.value = 'aa' + input.trigger('input') + await wrapper.vm.$nextTick() + expect(listIndexUpdate.mock.calls.length === 6).toBe(true) + expect(listIndexUpdate.mock.calls[0][0]).toBe(-1) + expect(listIndexUpdate.mock.calls[1][0]).toBe(0) + expect(listIndexUpdate.mock.calls[2][0]).toBe(1) + expect(listIndexUpdate.mock.calls[3][0]).toBe(2) + expect(listIndexUpdate.mock.calls[4][0]).toBe(3) + expect(listIndexUpdate.mock.calls[5][0]).toBe(-1) + }) + + // example 2 in https://github.com/vuetifyjs/vuetify/issues/14194 + it('should not change selection on search input as in example 2', async () => { + const { wrapper } = createMultipleCombobox({ + items: ['a', 'aa', 'aaa', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + const listIndexUpdate = jest.fn() + wrapper.vm.$on('update:list-index', listIndexUpdate) + + input.trigger('focus') + await wrapper.vm.$nextTick() + element.value = 'a' + input.trigger('input') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + element.value = 'aa' + input.trigger('input') + await wrapper.vm.$nextTick() + + expect(listIndexUpdate.mock.calls.length === 5).toBe(true) + expect(listIndexUpdate.mock.calls[0][0]).toBe(-1) + expect(listIndexUpdate.mock.calls[1][0]).toBe(0) + expect(listIndexUpdate.mock.calls[2][0]).toBe(1) + expect(listIndexUpdate.mock.calls[3][0]).toBe(2) + expect(listIndexUpdate.mock.calls[4][0]).toBe(1) + }) + + // example 3 in https://github.com/vuetifyjs/vuetify/issues/14194 + it('should not point to a result that does not exist as in example 3', async () => { + const { wrapper } = createMultipleCombobox({ + items: ['a', 'aa', 'aaa', 'bar'], + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + const listIndexUpdate = jest.fn() + wrapper.vm.$on('update:list-index', listIndexUpdate) + + input.trigger('focus') + await wrapper.vm.$nextTick() + element.value = 'a' + input.trigger('input') + await wrapper.vm.$nextTick() + + input.trigger('keydown.down') + await wrapper.vm.$nextTick() + + element.value = 'aaaa' + input.trigger('input') + await wrapper.vm.$nextTick() + + expect(listIndexUpdate.mock.calls.length === 3).toBe(true) + expect(listIndexUpdate.mock.calls[0][0]).toBe(-1) + expect(listIndexUpdate.mock.calls[1][0]).toBe(0) + expect(listIndexUpdate.mock.calls[2][0]).toBe(-1) + }) +}) diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx new file mode 100644 index 0000000..616753c --- /dev/null +++ b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx @@ -0,0 +1,816 @@ +/// + +// Components +import { VCombobox } from '../VCombobox' +import { VForm } from '@/components/VForm' + +// Utilities +import { cloneVNode, ref } from 'vue' +import { generate } from '../../../../cypress/templates' +import { keyValues } from '@/util' + +const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const +const densities = ['default', 'comfortable', 'compact'] as const +const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const + +const stories = Object.fromEntries(Object.entries({ + 'Default input': , + Disabled: , + Affixes: , + 'Prepend/append': , + 'Prepend/append inner': , + Placeholder: , +}).map(([k, v]) => [k, ( +
    + { variants.map(variant => ( + densities.map(density => ( +
    + { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) } + { cloneVNode(v, { variant, density, label: `with value`, modelValue: ['California'] }) } + { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: ['California'] }) } + {{ + selection: ({ item }) => { + return item.title + }, + }} + +
    + )) + )).flat()} +
    +)])) + +describe('VCombobox', () => { + describe('closableChips', () => { + it('should close only first chip', () => { + const items = [ + 'Item 1', + 'Item 2', + 'Item 3', + 'Item 4', + ] + + const selectedItems = [ + 'Item 1', + 'Item 2', + 'Item 3', + ] + + cy.mount(() => ( + + )) + .get('.v-chip__close').eq(0) + .click() + cy.get('input').should('exist') + cy.get('.v-chip') + .should('have.length', 2) + }) + }) + + describe('complex objects', () => { + it('single', () => { + const items = [ + { title: 'Item 1', value: 'item1' }, + { title: 'Item 2', value: 'item2' }, + { title: 'Item 3', value: 'item3' }, + { title: 'Item 4', value: 'item4' }, + ] + const model = ref() + const search = ref() + const updateModel = cy.stub().as('model').callsFake(val => model.value = val) + const updateSearch = cy.stub().as('search').callsFake(val => search.value = val) + + cy.mount(() => ( + + )) + .get('input') + .click() + cy.get('.v-list-item').eq(0) + .click({ waitForAnimations: false }) + cy.should(() => { + expect(model.value).to.deep.equal(items[0]) + expect(search.value).to.deep.equal(items[0].title) + }) + cy.get('input') + .should('have.value', items[0].title) + .blur() + cy.get('.v-combobox__selection') + .should('contain', items[0].title) + + cy.get('input').click() + cy.get('input').clear() + cy.get('input').type('Item 2') + cy.should(() => { + expect(model.value).to.equal('Item 2') + expect(search.value).to.equal('Item 2') + }) + cy.get('input') + .should('have.value', 'Item 2') + .blur() + cy.get('.v-combobox__selection') + .should('contain', 'Item 2') + + cy.get('input').click() + cy.get('input').clear() + cy.get('input').type('item3') + cy.should(() => { + expect(model.value).to.equal('item3') + expect(search.value).to.equal('item3') + }) + cy.get('input') + .should('have.value', 'item3') + .blur() + cy.get('.v-combobox__selection') + .should('contain', 'item3') + }) + + it('multiple', () => { + const items = [ + { title: 'Item 1', value: 'item1' }, + { title: 'Item 2', value: 'item2' }, + { title: 'Item 3', value: 'item3' }, + { title: 'Item 4', value: 'item4' }, + ] + const model = ref<(string | typeof items[number])[]>([]) + const search = ref() + const updateModel = cy.stub().as('model').callsFake(val => model.value = val) + const updateSearch = cy.stub().as('search').callsFake(val => search.value = val) + + cy.mount(() => ( + + )) + .get('.v-field input') + .click() + cy.get('.v-list-item').eq(0) + .click({ waitForAnimations: false }) + cy.then(() => { + expect(model.value).to.deep.equal([items[0]]) + expect(search.value).to.be.undefined + }) + cy.get('.v-field input').as('input') + .should('have.value', '') + cy.get('.v-combobox__selection') + .should('contain', items[0].title) + + cy.get('@input').click() + cy.get('@input').type('Item 2') + cy.get('@input').blur() + cy.should(() => { + expect(model.value).to.deep.equal([items[0], 'Item 2']) + expect(search.value).to.equal('') + }) + cy.get('@input').should('have.value', '') + cy.get('.v-combobox__selection') + .should('contain', 'Item 2') + + cy.get('@input').click() + cy.get('@input').type('item3') + cy.get('@input').blur() + cy.should(() => { + expect(model.value).to.deep.equal([items[0], 'Item 2', 'item3']) + expect(search.value).to.equal('') + }) + cy.get('@input').should('have.value', '') + cy.get('.v-combobox__selection') + .should('contain', 'item3') + }) + }) + + describe('search', () => { + it('should filter items', () => { + const items = [ + 'Item 1', + 'Item 1a', + 'Item 2', + 'Item 2a', + ] + + cy.mount(() => ( + + )) + .get('input') + .type('Item') + cy.get('.v-list-item') + .should('have.length', 4) + cy.get('input').clear() + cy.get('input').type('Item 1') + cy.get('.v-list-item') + .should('have.length', 2) + cy.get('input').clear() + cy.get('input').type('Item 3') + cy.get('.v-list-item').should('have.length', 0) + }) + + it('should filter items when using multiple', () => { + const items = [ + 'Item 1', + 'Item 1a', + 'Item 2', + 'Item 2a', + ] + + cy.mount(() => ( + + )) + .get('input') + .type('Item') + cy.get('.v-list-item') + .should('have.length', 4) + cy.get('input:first-child').as('input') + .clear() + cy.get('@input').type('Item 1') + cy.get('.v-list-item') + .should('have.length', 2) + cy.get('@input').clear() + cy.get('@input').type('Item 3') + cy.get('.v-list-item') + .should('have.length', 0) + }) + + it('should filter with custom item shape', () => { + const items = [ + { + id: 1, + name: 'Test1', + }, + { + id: 2, + name: 'Antonsen PK', + }, + ] + + cy.mount(() => ( + + )) + .get('input') + .type('test') + cy.get('.v-list-item') + .should('have.length', 1) + .eq(0) + .should('have.text', 'Test1') + cy.get('input').clear() + cy.get('input').type('antonsen') + cy.get('.v-list-item') + .should('have.length', 1) + .eq(0) + .should('have.text', 'Antonsen PK') + }) + }) + + describe('prefilled data', () => { + it('should work with array of strings when using multiple', () => { + const items = ref(['California', 'Colorado', 'Florida']) + + const selectedItems = ref(['California', 'Colorado']) + + cy.mount(() => ( + + )) + + cy.get('.v-combobox input').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('input').get('.v-chip').should('have.length', 2) + + cy.get('.v-chip__close') + .eq(0) + .click() + cy.get('input').should('exist') + cy.get('.v-chip') + .should('have.length', 1) + cy.should(() => expect(selectedItems.value).to.deep.equal(['Colorado'])) + }) + + it('should work with objects when using multiple', () => { + const items = ref([ + { + title: 'Item 1', + value: 'item1', + }, + { + title: 'Item 2', + value: 'item2', + }, + { + title: 'Item 3', + value: 'item3', + }, + ]) + + const selectedItems = ref( + [ + { + title: 'Item 1', + value: 'item1', + }, + { + title: 'Item 2', + value: 'item2', + }, + ] + ) + + cy.mount(() => ( + + )) + + cy.get('.v-combobox input').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('input').get('.v-chip').should('have.length', 2) + + cy.get('.v-chip__close') + .eq(0) + .click() + cy.get('input').should('exist') + cy.get('.v-chip') + .should('have.length', 1) + cy.should(() => expect(selectedItems.value).to.deep.equal([{ + title: 'Item 2', + value: 'item2', + }])) + }) + + it('should work with objects when using multiple and item-value', () => { + const items = ref([ + { + text: 'Item 1', + id: 'item1', + }, + { + text: 'Item 2', + id: 'item2', + }, + { + text: 'Item 3', + id: 'item3', + }, + ]) + + const selectedItems = ref( + [ + { + text: 'Item 1', + id: 'item1', + }, + { + text: 'Item 2', + id: 'item2', + }, + ] + ) + + cy.mount(() => ( + + )) + + cy.get('.v-combobox input').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('.v-field__input').should('include.text', 'Item 1') + cy.get('.v-field__input').should('include.text', 'Item 2') + + cy.get('.v-list-item--active input') + .eq(0) + .click() + .get('.v-field__input') + .should(() => expect(selectedItems.value).to.deep.equal([{ + text: 'Item 2', + id: 'item2', + }])) + }) + }) + + describe('readonly', () => { + it('should not be clickable when in readonly', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = 'Item 1' + + cy.mount(() => ( + + )) + + cy.get('.v-combobox') + .click() + cy.get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + + cy.get('.v-combobox input').as('input') + .focus() + cy.get('@input').type('{downarrow}', { force: true }) + cy.get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + }) + + it('should not be clickable when in readonly form', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = 'Item 1' + + cy.mount(() => ( + + + + )) + + cy.get('.v-combobox') + .click() + cy.get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + + cy.get('.v-combobox input').as('input') + .focus() + cy.get('@input').type('{downarrow}', { force: true }) + cy.get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + }) + }) + + describe('hide-selected', () => { + it('should hide selected item(s)', () => { + const items = [ + 'Item 1', + 'Item 2', + 'Item 3', + 'Item 4', + ] + + const selectedItems = [ + 'Item 1', + 'Item 2', + ] + + cy.mount(() => ( + + )) + + cy.get('.v-combobox input').click() + + cy.get('.v-overlay__content .v-list-item').should('have.length', 2) + cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 3') + cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(1).should('have.text', 'Item 4') + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/17120 + it('should display 0 when selected', () => { + const items = [0, 1, 2, 3, 4] + + const selectedItems = ref(undefined) + + cy.mount(() => ( + + )) + .get('.v-field input') + .click() + + cy.get('.v-list-item').eq(0) + .click({ waitForAnimations: false }) + + cy.get('.v-combobox input') + .should('have.value', '0') + }) + + it('should conditionally show placeholder', () => { + cy.mount(props => ( + + )) + .get('.v-combobox input') + .should('have.attr', 'placeholder', 'Placeholder') + .setProps({ label: 'Label' }) + .get('.v-combobox input') + .should('not.be.visible') + .get('.v-combobox input') + .focus() + .should('have.attr', 'placeholder', 'Placeholder') + .should('be.visible') + .blur() + .setProps({ persistentPlaceholder: true }) + .get('.v-combobox input') + .should('have.attr', 'placeholder', 'Placeholder') + .should('be.visible') + .setProps({ modelValue: 'Foobar' }) + .get('.v-combobox input') + .should('not.have.attr', 'placeholder') + .setProps({ multiple: true, modelValue: ['Foobar'] }) + .get('.v-combobox input') + .should('not.have.attr', 'placeholder') + }) + + it('should keep TextField focused while selecting items from open menu', () => { + cy.mount(() => ( + + )) + + cy.get('.v-combobox') + .click() + + cy.get('.v-list') + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + + cy.get('.v-field').should('have.class', 'v-field--focused') + }) + + it('should not open menu when closing a chip', () => { + cy + .mount(() => ( + + )) + .get('.v-combobox') + .should('not.have.class', 'v-combobox--active-menu') + .get('.v-chip__close').eq(1) + .click() + .get('.v-combobox') + .should('not.have.class', 'v-combobox--active-menu') + .get('.v-chip__close') + .click() + .get('.v-combobox') + .should('not.have.class', 'v-combobox--active-menu') + .click() + .should('have.class', 'v-combobox--active-menu') + .trigger('keydown', { key: keyValues.esc }) + .should('not.have.class', 'v-combobox--active-menu') + }) + + describe('auto-select-first', () => { + it('should auto-select-first item when pressing enter', () => { + cy + .mount(() => ( + + )) + .get('.v-combobox') + .click() + .get('.v-list-item') + .should('have.length', 6) + .get('.v-combobox input') + .type('Cal') + .get('.v-list-item').eq(0) + .should('have.class', 'v-list-item--active') + .get('.v-combobox input') + .trigger('keydown', { key: keyValues.enter, waitForAnimations: false }) + .get('.v-list-item') + .should('have.length', 6) + }) + + it('should auto-select-first item when pressing tab', () => { + const selectedItems = ref([]) + + cy + .mount(() => ( + + )) + .get('.v-combobox') + .click() + .get('.v-list-item') + .should('have.length', 6) + .get('.v-combobox input') + .type('Cal') + .get('.v-list-item').eq(0) + .should('have.class', 'v-list-item--active') + .realPress('Tab') + .get('.v-list-item') + .should('have.length', 0) + .then(_ => { + expect(selectedItems.value).to.deep.equal(['California']) + }) + }) + + it('should not auto-select-first item when blur', () => { + const selectedItems = ref(undefined) + + cy + .mount(() => ( + + )) + .get('.v-combobox') + .click() + .get('.v-list-item') + .should('have.length', 6) + .get('.v-combobox input') + .type('Cal') + .get('.v-list-item').eq(0) + .should('have.class', 'v-list-item--active') + .get('.v-combobox input') + .blur() + .get('.v-list-item') + .should('have.length', 0) + .should(_ => { + expect(selectedItems.value).to.deep.equal(['Cal']) + }) + }) + }) + + it(`doesn't add duplicate values`, () => { + cy + .mount(() => ( + + )) + .get('.v-combobox input') + .click() + .type('foo{enter}') + .type('bar{enter}') + .get('.v-combobox__selection') + .should('have.length', 2) + .get('.v-combobox input') + .type('foo{enter}') + .get('.v-combobox__selection') + .should('have.length', 2) + }) + + // https://github.com/vuetifyjs/vuetify/issues/18796 + it('should allow deleting selection via closable-chips', () => { + const selectedItem = ref('California') + + cy.mount(() => ( + + )) + .get('.v-chip__close') + .click() + .then(_ => { + expect(selectedItem.value).to.equal(null) + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/18556 + it('should show menu if focused and items are added', () => { + cy + .mount(props => ()) + .get('.v-combobox input') + .focus() + .get('.v-overlay') + .should('not.exist') + .setProps({ items: ['Foo', 'Bar'] }) + .get('.v-overlay') + .should('exist') + }) + + // https://github.com/vuetifyjs/vuetify/issues/19346 + it('should not show menu when focused and existing non-empty items are changed', () => { + cy + .mount((props: any) => ()) + .setProps({ items: ['Foo', 'Bar'] }) + .get('.v-combobox') + .click() + .get('.v-overlay') + .should('exist') + .get('.v-list-item').eq(0).click({ waitForAnimations: false }) + .setProps({ items: ['Foo', 'Bar', 'test'] }) + .get('.v-overlay') + .should('not.exist') + }) + + // https://github.com/vuetifyjs/vuetify/issues/17573 + // When using selection slot or chips, input displayed next to chip/selection slot should be always empty + it('should always have empty input value when it is unfocused and when using selection slot or chips', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + const selectedItem = ref('Item 1') + + cy + .mount(() => ( + + )) + .get('.v-combobox').click() + .get('.v-combobox input').should('have.value', '') + // Blur input with a custom search input value + .type('test') + .blur() + .should('have.value', '') + .should(() => { + expect(selectedItem.value).to.equal('test') + }) + // Press enter key with a custom search input value + .get('.v-combobox').click() + .get('.v-combobox input').should('have.value', '') + .type('test 2') + .trigger('keydown', { key: keyValues.enter, waitForAnimations: false }) + .should('have.value', '') + .should(() => { + expect(selectedItem.value).to.equal('test 2') + }) + // Search existing item and click to select + .get('.v-combobox').click() + .get('.v-combobox input').type('Item 1') + .get('.v-list-item').eq(0).click({ waitForAnimations: false }) + .get('.v-combobox input').should('have.value', '') + .should(() => { + expect(selectedItem.value).to.equal('Item 1') + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/19319 + it('should respect return-object when blurring', () => { + const items = [ + { title: 'Item 1', value: 'item1' }, + { title: 'Item 2', value: 'item2' }, + { title: 'Item 3', value: 'item3' }, + { title: 'Item 4', value: 'item4' }, + ] + const model = ref() + const search = ref() + + cy.mount(() => ( + + )) + .get('.v-combobox').click() + .get('.v-list-item').eq(0).click({ waitForAnimations: false }) + .should(() => { + expect(model.value).to.deep.equal({ title: 'Item 1', value: 'item1' }) + }) + .get('.v-combobox input').blur() + .should(() => { + expect(model.value).to.deep.equal({ title: 'Item 1', value: 'item1' }) + }) + }) + + describe('Showcase', () => { + generate({ stories }) + }) +}) diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.ts b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.ts new file mode 100644 index 0000000..615d175 --- /dev/null +++ b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.ts @@ -0,0 +1,357 @@ +// @ts-nocheck +/* eslint-disable */ + +// Components +// import VCombobox from '../VCombobox' + +// Utilities +import { + mount, + Wrapper, +} from '@vue/test-utils' + +describe.skip('VCombobox.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: object) => Wrapper + + beforeEach(() => { + document.body.setAttribute('data-app', 'true') + + mountFunction = (options = {}) => { + return mount(VCombobox, { + // https://github.com/vuejs/vue-test-utils/issues/1130 + sync: false, + mocks: { + $vuetify: { + lang: { + t: (val: string) => val, + }, + theme: { + dark: false, + }, + }, + }, + ...options, + }) + } + }) + + // TODO: this fails without sync, nextTick doesn't help + // https://github.com/vuejs/vue-test-utils/issues/1130 + it.skip('should evaluate the range of an integer', async () => { + const wrapper = mountFunction({ + propsData: { + value: 11, + }, + }) + + await wrapper.vm.$nextTick() + expect(wrapper.vm.currentRange).toBe(2) + + wrapper.setProps({ value: 0 }) + await wrapper.vm.$nextTick() + expect(wrapper.vm.currentRange).toBe(1) + }) + + it('should not use search input when blurring', async () => { + const wrapper = mountFunction({ + attachToDocument: true, + propsData: { + eager: true, + items: [1, 12], + }, + }) + + const event = jest.fn() + wrapper.vm.$on('input', event) + + const input = wrapper.find('input') + input.trigger('focus') + await wrapper.vm.$nextTick() + + wrapper.setProps({ searchInput: '1' }) + await wrapper.vm.$nextTick() + + expect(wrapper.vm.internalSearch).toBe('1') + + const list = wrapper.findAll('.v-list-item').at(1) + list.trigger('click') + await wrapper.vm.$nextTick() + expect(event).toHaveBeenCalledWith(12) + }) + + it('should not use search input if an option is selected from the menu', async () => { + const item = { value: 123, text: 'Foo' } + const wrapper = mountFunction({ + propsData: { + items: [item], + }, + }) + + const event = jest.fn() + wrapper.vm.$on('input', event) + + wrapper.setData({ isMenuActive: true }) + await wrapper.vm.$nextTick() + + wrapper.vm.selectItem(item) + await wrapper.vm.$nextTick() + + wrapper.setData({ isMenuActive: false }) + await wrapper.vm.$nextTick() + + expect(event).toHaveBeenCalledWith(item) + }) + + it('should not populate search field if value is falsey', async () => { + const wrapper = mountFunction() + + const event = jest.fn() + wrapper.vm.$on('input', event) + + wrapper.setData({ isMenuActive: true }) + await wrapper.vm.$nextTick() + + wrapper.setProps({ searchInput: '' }) + await wrapper.vm.$nextTick() + + wrapper.setData({ isMenuActive: false }) + await wrapper.vm.$nextTick() + + expect(event).not.toHaveBeenCalled() + }) + + // TODO: fails with TS 3.9 + it.skip('should clear value', async () => { + const wrapper = mountFunction({ + attachToDocument: true, + }) + await wrapper.vm.$nextTick() + + const change = jest.fn() + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + wrapper.vm.$on('change', change) + wrapper.vm.$on('input', change) + + input.trigger('focus') + element.value = 'foo' + input.trigger('input') + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(change).toHaveBeenCalledWith('foo') + expect(change).toHaveBeenCalledTimes(2) + expect(wrapper.vm.internalValue).toBe('foo') + + element.value = '' + input.trigger('input') + input.trigger('keydown.enter') + + await wrapper.vm.$nextTick() + + expect(wrapper.vm.internalValue).toBe('') + expect(change).toHaveBeenCalledTimes(4) + }) + + it('should call methods on blur', async () => { + const updateCombobox = jest.fn() + const wrapper = mountFunction({ + attachToDocument: true, + methods: { + updateCombobox, + }, + }) + + const e = { preventDefault: jest.fn() } + wrapper.vm.onEnterDown(e) + + await wrapper.vm.$nextTick() + + // https://github.com/vuetifyjs/vuetify/issues/4974 + expect(e.preventDefault).toHaveBeenCalled() + expect(updateCombobox).toHaveBeenCalledTimes(1) + }) + + it('should emit custom value on blur', async () => { + const wrapper = mountFunction() + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + const change = jest.fn() + wrapper.vm.$on('change', change) + + input.trigger('focus') + await wrapper.vm.$nextTick() + + element.value = 'foo' + input.trigger('input') + + input.trigger('keydown.enter') + await wrapper.vm.$nextTick() + expect(change).toHaveBeenCalledWith('foo') + + input.trigger('keydown.esc') + expect(wrapper.vm.isMenuActive).toBe(false) + + element.value = '' + input.trigger('input') + + await wrapper.vm.$nextTick() + expect(wrapper.vm.isMenuActive).toBe(false) + }) + + it('should conditionally show the menu', async () => { + const wrapper = mountFunction({ + attachToDocument: true, + propsData: { + items: ['foo', 'bar', 'fizz'], + searchInput: 'foobar', + }, + }) + + const slot = wrapper.find('.v-input__slot') + const input = wrapper.find('input') + + // Focus input should only focus + input.trigger('focus') + + expect(wrapper.vm.isFocused).toBe(true) + expect(wrapper.vm.$_menuProps.value).toBe(false) + + slot.trigger('click') + + expect(wrapper.vm.$_menuProps.value).toBe(false) + + // TODO: Add expects for tags when impl + }) + + it('should return an object', () => { + const items = [ + { text: 'Programming', value: 0 }, + { text: 'Design', value: 1 }, + { text: 'Vue', value: 2 }, + { text: 'Vuetify', value: 3 }, + ] + const wrapper = mountFunction({ + attachToDocument: true, + propsData: { + items, + }, + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + const event = jest.fn() + wrapper.vm.$on('input', event) + + input.trigger('focus') + element.value = 'Programming' + input.trigger('input') + wrapper.vm.selectItem(items[0]) + + expect(wrapper.vm.isFocused).toBe(true) + expect(event).toHaveBeenCalledWith(items[0]) + + input.trigger('keydown.tab') + + expect(wrapper.vm.isFocused).toBe(false) + expect(wrapper.vm.internalValue).toEqual(items[0]) + }) + + // https://github.com/vuetifyjs/vuetify/issues/5008 + // TODO: this fails without sync, nextTick doesn't help + // https://github.com/vuejs/vue-test-utils/issues/1130 + it.skip('should select item if menu index is greater than -1', async () => { + const selectItem = jest.fn() + const wrapper = mountFunction({ + propsData: { + items: ['foo'], + }, + methods: { selectItem }, + }) + + const input = wrapper.find('input') + + input.trigger('focus') + input.trigger('keydown.enter') + input.trigger('keydown.down') + + await wrapper.vm.$nextTick() + + expect(wrapper.vm.getMenuIndex()).toBe(0) + + input.trigger('keydown.enter') + + expect(selectItem).toHaveBeenCalledWith('foo') + }) + + // https://github.com/vuetifyjs/vuetify/issues/8476 + it('should properly compare falsey values when setting', async () => { + const wrapper = mountFunction() + + wrapper.vm.setValue(0) + expect(wrapper.vm.internalValue).toBe(0) + + wrapper.vm.setValue('') + expect(wrapper.vm.internalValue).toBe('') + + wrapper.vm.setValue(null) + expect(wrapper.vm.internalValue).toBeNull() + + wrapper.vm.setValue(undefined) + expect(wrapper.vm.internalValue).toBeUndefined() + + wrapper.setData({ lazySearch: 'foo' }) + + wrapper.vm.setValue(null) + expect(wrapper.vm.internalValue).toBeNull() + + wrapper.vm.setValue(undefined) + expect(wrapper.vm.internalValue).toBe('foo') + }) + + it('should change autocomplete attribute', () => { + const wrapper = mountFunction({ + attrs: { + autocomplete: 'on', + }, + }) + + expect(wrapper.vm.$attrs.autocomplete).toBe('on') + }) + + // https://github.com/vuetifyjs/vuetify/issues/6607 + it('should select first row when autoSelectFirst true is applied', async () => { + const wrapper = mountFunction({ + propsData: { + autoSelectFirst: true, + items: [ + { text: 'Learn JavaScript', done: false }, + { text: 'Learn Vue', done: false }, + { text: 'Play around in JSFiddle', done: true }, + { text: 'Build something awesome', done: true }, + ], + }, + }) + + const input = wrapper.find('input') + const element = input.element as HTMLInputElement + + const listIndexUpdate = jest.fn() + wrapper.vm.$on('update:list-index', listIndexUpdate) + + input.trigger('focus') + await wrapper.vm.$nextTick() + element.value = 'L' + input.trigger('input') + await wrapper.vm.$nextTick() + + expect(listIndexUpdate.mock.calls.length === 1).toBe(true) + expect(listIndexUpdate.mock.calls[0][0]).toBe(0) + }) +}) diff --git a/packages/vuetify/src/components/VCombobox/_variables.scss b/packages/vuetify/src/components/VCombobox/_variables.scss new file mode 100644 index 0000000..7e2f500 --- /dev/null +++ b/packages/vuetify/src/components/VCombobox/_variables.scss @@ -0,0 +1,14 @@ +@forward '../VInput/variables'; +@use '../../styles/settings'; + +// Defaults +$combobox-content-border-radius: 4px !default; +$combobox-content-elevation: 4 !default; +$combobox-focused-input: 64px !default; +$combobox-input-buffer: 2px !default; +$combobox-line-height: 1.75 !default; +$combobox-selection-gap: 2px !default; +$combobox-transition: .2s settings.$standard-easing !default; +$combobox-chips-control-min-height: null !default; +$combobox-chips-margin-top: null !default; +$combobox-chips-margin-bottom: null !default; \ No newline at end of file diff --git a/packages/vuetify/src/components/VCombobox/index.ts b/packages/vuetify/src/components/VCombobox/index.ts new file mode 100644 index 0000000..cc72170 --- /dev/null +++ b/packages/vuetify/src/components/VCombobox/index.ts @@ -0,0 +1 @@ +export { VCombobox } from './VCombobox' diff --git a/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx b/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx new file mode 100644 index 0000000..6250146 --- /dev/null +++ b/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx @@ -0,0 +1,129 @@ +// Components +import { VBtn } from '@/components/VBtn' + +// Composables +import { useLocale } from '@/composables' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, ref, toRaw, watchEffect } from 'vue' +import { deepEqual, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { Ref, VNode } from 'vue' +import type { GenericProps } from '@/util' + +export type VConfirmEditSlots = { + default: { + model: Ref + save: () => void + cancel: () => void + isPristine: boolean + get actions (): VNode + } +} + +export const makeVConfirmEditProps = propsFactory({ + modelValue: null, + color: String, + cancelText: { + type: String, + default: '$vuetify.confirmEdit.cancel', + }, + okText: { + type: String, + default: '$vuetify.confirmEdit.ok', + }, +}, 'VConfirmEdit') + +export const VConfirmEdit = genericComponent ( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + 'onSave'?: (value: T) => void + }, + slots: VConfirmEditSlots +) => GenericProps>()({ + name: 'VConfirmEdit', + + props: makeVConfirmEditProps(), + + emits: { + cancel: () => true, + save: (value: any) => true, + 'update:modelValue': (value: any) => true, + }, + + setup (props, { emit, slots }) { + const model = useProxiedModel(props, 'modelValue') + const internalModel = ref() + watchEffect(() => { + internalModel.value = structuredClone(toRaw(model.value)) + }) + + const { t } = useLocale() + + const isPristine = computed(() => { + return deepEqual(model.value, internalModel.value) + }) + + function save () { + model.value = internalModel.value + emit('save', internalModel.value) + } + + function cancel () { + internalModel.value = structuredClone(toRaw(model.value)) + emit('cancel') + } + + let actionsUsed = false + useRender(() => { + const actions = ( + <> + + + + + ) + return ( + <> + { + slots.default?.({ + model: internalModel, + save, + cancel, + isPristine: isPristine.value, + get actions () { + actionsUsed = true + return actions + }, + }) + } + + { !actionsUsed && actions } + + ) + }) + + return { + save, + cancel, + isPristine, + } + }, +}) + +export type VConfirmEdit = InstanceType diff --git a/packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx b/packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx new file mode 100644 index 0000000..340f862 --- /dev/null +++ b/packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.cy.tsx @@ -0,0 +1,83 @@ +/// + +import { VConfirmEdit } from '..' + +// Utilities +import { ref } from 'vue' + +// Tests +describe('VConfirmEdit', () => { + it('mirrors external updates', () => { + const externalModel = ref('foo') + + cy.mount(() => ( + + { ({ model }) => ( +

    { model.value }

    + )} +     + )).get('p') + .should('have.text', 'foo') + .then(() => { + externalModel.value = 'bar' + }) + .get('p') + .should('have.text', 'bar') + }) + + it(`doesn't mutate the original value`, () => { + const externalModel = ref(['foo']) + + cy.mount( + + { ({ model }) => ( + <> +

    { model.value.join(',') }

    + + + )} +     + ).get('p') + .should('have.text', 'foo') + .get('[data-test="push"]').click() + .get('p') + .should('have.text', 'foo,bar') + .then(() => { + expect(externalModel.value).to.deep.equal(['foo']) + }) + cy.contains('.v-btn', 'OK').click() + cy.get('p') + .should('have.text', 'foo,bar') + .then(() => { + expect(externalModel.value).to.deep.equal(['foo', 'bar']) + }) + }) + + it('hides actions if used from the slot', () => { + cy.mount( + + ).get('.v-btn').should('have.length', 2) + + cy.mount( + + { ({ model }) => { + void model + }} + + ).get('.v-btn').should('have.length', 2) + + cy.mount( + + { ({ actions }) => { + void actions + }} + + ).get('.v-btn').should('have.length', 0) + + cy.mount( + + { ({ actions }) => actions } + + ).get('.v-btn').should('have.length', 2) + }) +}) diff --git a/packages/vuetify/src/components/VConfirmEdit/index.ts b/packages/vuetify/src/components/VConfirmEdit/index.ts new file mode 100644 index 0000000..54df137 --- /dev/null +++ b/packages/vuetify/src/components/VConfirmEdit/index.ts @@ -0,0 +1 @@ +export { VConfirmEdit } from './VConfirmEdit' diff --git a/packages/vuetify/src/components/VCounter/VCounter.sass b/packages/vuetify/src/components/VCounter/VCounter.sass new file mode 100644 index 0000000..8cb9464 --- /dev/null +++ b/packages/vuetify/src/components/VCounter/VCounter.sass @@ -0,0 +1,10 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-counter + color: $counter-color + flex: $counter-flex + font-size: $counter-font-size + transition-duration: $counter-transition-duration diff --git a/packages/vuetify/src/components/VCounter/VCounter.tsx b/packages/vuetify/src/components/VCounter/VCounter.tsx new file mode 100644 index 0000000..74d2917 --- /dev/null +++ b/packages/vuetify/src/components/VCounter/VCounter.tsx @@ -0,0 +1,85 @@ +// Styles +import './VCounter.sass' + +// Components +import { VSlideYTransition } from '@/components/transitions' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { Component } from 'vue' + +export const makeVCounterProps = propsFactory({ + active: Boolean, + disabled: Boolean, + max: [Number, String], + value: { + type: [Number, String], + default: 0, + }, + + ...makeComponentProps(), + ...makeTransitionProps({ + transition: { component: VSlideYTransition as Component }, + }), +}, 'VCounter') + +export type VCounterSlot = { + counter: string + max: string | number | undefined + value: string | number | undefined +} + +type VCounterSlots = { + default: VCounterSlot +} + +export const VCounter = genericComponent()({ + name: 'VCounter', + + functional: true, + + props: makeVCounterProps(), + + setup (props, { slots }) { + const counter = computed(() => { + return props.max ? `${props.value} / ${props.max}` : String(props.value) + }) + + useRender(() => ( + +
    parseFloat(props.max), + }, + props.class, + ]} + style={ props.style } + > + { slots.default + ? slots.default({ + counter: counter.value, + max: props.max, + value: props.value, + }) + : counter.value + } +
    +     + )) + + return {} + }, +}) + +export type VCounter = InstanceType diff --git a/packages/vuetify/src/components/VCounter/_variables.scss b/packages/vuetify/src/components/VCounter/_variables.scss new file mode 100644 index 0000000..c941ed0 --- /dev/null +++ b/packages/vuetify/src/components/VCounter/_variables.scss @@ -0,0 +1,7 @@ +// VCounter +$counter-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$counter-flex: 0 1 auto !default; +$counter-font-size: 12px !default; +$counter-line-height: $counter-font-size !default; +$counter-min-height: 12px !default; +$counter-transition-duration: 150ms !default; diff --git a/packages/vuetify/src/components/VCounter/index.ts b/packages/vuetify/src/components/VCounter/index.ts new file mode 100644 index 0000000..6f55a2c --- /dev/null +++ b/packages/vuetify/src/components/VCounter/index.ts @@ -0,0 +1 @@ +export { VCounter } from './VCounter' diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx b/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx new file mode 100644 index 0000000..8d49eeb --- /dev/null +++ b/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx @@ -0,0 +1,213 @@ +// Components +import { VFadeTransition } from '@/components/transitions' +import { makeDataTableExpandProps, provideExpanded } from '@/components/VDataTable/composables/expand' +import { makeDataTableGroupProps, provideGroupBy, useGroupedItems } from '@/components/VDataTable/composables/group' +import { useOptions } from '@/components/VDataTable/composables/options' +import { + createPagination, + makeDataTablePaginateProps, + providePagination, + usePaginatedItems, +} from '@/components/VDataTable/composables/paginate' +import { makeDataTableSelectProps, provideSelection } from '@/components/VDataTable/composables/select' +import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from '@/components/VDataTable/composables/sort' + +// Composables +import { makeDataIteratorItemsProps, useDataIteratorItems } from './composables/items' +import { makeComponentProps } from '@/composables/component' +import { makeFilterProps, useFilter } from '@/composables/filter' +import { LoaderSlot } from '@/composables/loader' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeTagProps } from '@/composables/tag' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Utilities +import { computed, toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { Component } from 'vue' +import type { DataIteratorItem } from './composables/items' +import type { Group } from '@/components/VDataTable/composables/group' +import type { SortItem } from '@/components/VDataTable/composables/sort' +import type { LoaderSlotProps } from '@/composables/loader' +import type { GenericProps } from '@/util' + +type VDataIteratorSlotProps = { + page: number + itemsPerPage: number + sortBy: readonly SortItem[] + pageCount: number + toggleSort: ReturnType['toggleSort'] + prevPage: ReturnType['prevPage'] + nextPage: ReturnType['nextPage'] + setPage: ReturnType['setPage'] + setItemsPerPage: ReturnType['setItemsPerPage'] + isSelected: ReturnType['isSelected'] + select: ReturnType['select'] + selectAll: ReturnType['selectAll'] + toggleSelect: ReturnType['toggleSelect'] + isExpanded: ReturnType['isExpanded'] + toggleExpand: ReturnType['toggleExpand'] + isGroupOpen: ReturnType['isGroupOpen'] + toggleGroup: ReturnType['toggleGroup'] + items: readonly DataIteratorItem[] + groupedItems: readonly (DataIteratorItem | Group>)[] +} + +export type VDataIteratorSlots = { + default: VDataIteratorSlotProps + header: VDataIteratorSlotProps + footer: VDataIteratorSlotProps + loader: LoaderSlotProps + 'no-data': never +} + +export const makeVDataIteratorProps = propsFactory({ + search: String, + loading: Boolean, + + ...makeComponentProps(), + ...makeDataIteratorItemsProps(), + ...makeDataTableSelectProps(), + ...makeDataTableSortProps(), + ...makeDataTablePaginateProps({ itemsPerPage: 5 }), + ...makeDataTableExpandProps(), + ...makeDataTableGroupProps(), + ...makeFilterProps(), + ...makeTagProps(), + ...makeTransitionProps({ + transition: { + component: VFadeTransition as Component, + hideOnLeave: true, + }, + }), +}, 'VDataIterator') + +export const VDataIterator = genericComponent ( + props: { + items?: readonly T[] + }, + slots: VDataIteratorSlots, +) => GenericProps>()({ + name: 'VDataIterator', + + props: makeVDataIteratorProps(), + + emits: { + 'update:modelValue': (value: any[]) => true, + 'update:groupBy': (value: any) => true, + 'update:page': (value: number) => true, + 'update:itemsPerPage': (value: number) => true, + 'update:sortBy': (value: any) => true, + 'update:options': (value: any) => true, + 'update:expanded': (value: any) => true, + 'update:currentItems': (value: any) => true, + }, + + setup (props, { slots }) { + const groupBy = useProxiedModel(props, 'groupBy') + const search = toRef(props, 'search') + + const { items } = useDataIteratorItems(props) + const { filteredItems } = useFilter(props, items, search, { transform: item => item.raw }) + + const { sortBy, multiSort, mustSort } = createSort(props) + const { page, itemsPerPage } = createPagination(props) + + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }) + const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy }) + + const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { transform: item => item.raw }) + const { flatItems } = useGroupedItems(sortedItems, groupBy, opened) + + const itemsLength = computed(() => flatItems.value.length) + + const { + startIndex, + stopIndex, + pageCount, + prevPage, + nextPage, + setItemsPerPage, + setPage, + } = providePagination({ page, itemsPerPage, itemsLength }) + const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage }) + + const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) + + const { + isSelected, + select, + selectAll, + toggleSelect, + } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups }) + const { isExpanded, toggleExpand } = provideExpanded(props) + + useOptions({ + page, + itemsPerPage, + sortBy, + groupBy, + search, + }) + + const slotProps = computed(() => ({ + page: page.value, + itemsPerPage: itemsPerPage.value, + sortBy: sortBy.value, + pageCount: pageCount.value, + toggleSort, + prevPage, + nextPage, + setPage, + setItemsPerPage, + isSelected, + select, + selectAll, + toggleSelect, + isExpanded, + toggleExpand, + isGroupOpen, + toggleGroup, + items: paginatedItemsWithoutGroups.value, + groupedItems: paginatedItems.value, + })) + + useRender(() => ( + + { slots.header?.(slotProps.value) } + + + { props.loading ? ( + + { slotProps => slots.loader?.(slotProps) } + + ) : ( +
    + { !paginatedItems.value.length + ? slots['no-data']?.() + : slots.default?.(slotProps.value) + } +
    + )} +     + + { slots.footer?.(slotProps.value) } +     + )) + + return {} + }, +}) + +export type VDataIterator = InstanceType diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.cy.tsx b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.cy.tsx new file mode 100644 index 0000000..c4815cf --- /dev/null +++ b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.cy.tsx @@ -0,0 +1,105 @@ +/// + +import { Application } from '../../../../cypress/templates' +import { VDataIterator } from '..' + +const DESSERT_ITEMS = [ + { + name: 'Frozen Yogurt', + calories: 159, + fat: 6.0, + carbs: 24, + protein: 4.0, + iron: '1%', + }, + { + name: 'Ice cream sandwich', + calories: 237, + fat: 9.0, + carbs: 37, + protein: 4.3, + iron: '1%', + }, + { + name: 'Eclair', + calories: 262, + fat: 16.0, + carbs: 23, + protein: 6.0, + iron: '7%', + }, + { + name: 'Cupcake', + calories: 305, + fat: 3.7, + carbs: 67, + protein: 4.3, + iron: '8%', + }, + { + name: 'Gingerbread', + calories: 356, + fat: 16.0, + carbs: 49, + protein: 3.9, + iron: '16%', + }, + { + name: 'Jelly bean', + calories: 375, + fat: 0.0, + carbs: 94, + protein: 0.0, + iron: '0%', + }, + { + name: 'Lollipop', + calories: 392, + fat: 0.2, + carbs: 98, + protein: 0, + iron: '2%', + }, + { + name: 'Honeycomb', + calories: 408, + fat: 3.2, + carbs: 87, + protein: 6.5, + iron: '45%', + }, + { + name: 'Donut', + calories: 452, + fat: 25.0, + carbs: 51, + protein: 4.9, + iron: '22%', + }, + { + name: 'KitKat', + calories: 518, + fat: 26.0, + carbs: 65, + protein: 7, + iron: '6%', + }, +] + +describe('VDataIterator', () => { + it('should render default slot', () => { + cy.mount(() => ( + + + {{ + default: ({ items }) => items.map(item => ( +
    { item.raw.name }
    + )), + }} +     +     + )) + + cy.get('.dessert-item').should('have.length', 5) + }) +}) diff --git a/packages/vuetify/src/components/VDataIterator/composables/items.ts b/packages/vuetify/src/components/VDataIterator/composables/items.ts new file mode 100644 index 0000000..f009fbd --- /dev/null +++ b/packages/vuetify/src/components/VDataIterator/composables/items.ts @@ -0,0 +1,71 @@ +// Utilities +import { computed } from 'vue' +import { getPropertyFromItem, propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { GroupableItem } from '@/components/VDataTable/composables/group' +import type { SelectableItem } from '@/components/VDataTable/composables/select' +import type { SelectItemKey } from '@/util' + +export interface DataIteratorItemProps { + items: any[] + itemValue: SelectItemKey + itemSelectable: SelectItemKey + returnObject: boolean +} + +export interface DataIteratorItem extends GroupableItem, SelectableItem { + value: unknown +} + +// Composables +export const makeDataIteratorItemsProps = propsFactory({ + items: { + type: Array as PropType, + default: () => ([]), + }, + itemValue: { + type: [String, Array, Function] as PropType, + default: 'id', + }, + itemSelectable: { + type: [String, Array, Function] as PropType, + default: null, + }, + returnObject: Boolean, +}, 'DataIterator-items') + +export function transformItem ( + props: Omit, + item: any +): DataIteratorItem { + const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue) + const selectable = getPropertyFromItem(item, props.itemSelectable, true) + + return { + type: 'item', + value, + selectable, + raw: item, + } +} + +export function transformItems ( + props: Omit, + items: DataIteratorItemProps['items'] +) { + const array: DataIteratorItem[] = [] + + for (const item of items) { + array.push(transformItem(props, item)) + } + + return array +} + +export function useDataIteratorItems (props: DataIteratorItemProps) { + const items = computed(() => transformItems(props, props.items)) + + return { items } +} diff --git a/packages/vuetify/src/components/VDataIterator/index.ts b/packages/vuetify/src/components/VDataIterator/index.ts new file mode 100644 index 0000000..ea84538 --- /dev/null +++ b/packages/vuetify/src/components/VDataIterator/index.ts @@ -0,0 +1 @@ +export { VDataIterator } from './VDataIterator' diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass new file mode 100644 index 0000000..8789632 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass @@ -0,0 +1,166 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use '../../components/VTable/variables' as * +@use './variables' as * +@use '../VTable/variables' as VTable + +@include tools.layer('components') + .v-data-table + width: 100% + + .v-data-table__table + width: 100% + border-collapse: separate + border-spacing: 0 + + .v-data-table__tr + &--focus + border: 1px dotted black + + &--clickable + cursor: pointer + + .v-data-table + .v-table__wrapper + > table + > thead, + tbody + > tr + > td, + th + + &.v-data-table-column--align-end + text-align: end + + .v-data-table-header__content + flex-direction: row-reverse + + &.v-data-table-column--align-center + text-align: center + + .v-data-table-header__content + justify-content: center + + &.v-data-table-column--no-padding + padding: 0 8px + + &.v-data-table-column--nowrap + text-overflow: ellipsis + text-wrap: nowrap + overflow: hidden + + & .v-data-table-header__content + display: contents + + > th + align-items: center + + > th.v-data-table__th--fixed + position: sticky + + > th.v-data-table__th--sortable:hover + cursor: pointer + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) + + > th:not(.v-data-table__th--sorted) + .v-data-table-header__sort-icon + opacity: 0 + + &:hover + .v-data-table-header__sort-icon + opacity: 0.5 + + &.v-data-table__tr--mobile + > td + height: fit-content + + .v-data-table-column--fixed, + .v-data-table__th--sticky + background: $table-background + position: sticky !important + left: 0 + z-index: 1 + + .v-data-table-column--last-fixed + border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) + + .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed + z-index: 2 + + .v-data-table-group-header-row + td + background: rgba(var(--v-theme-surface)) + color: rgba(var(--v-theme-on-surface)) + + > span + padding-left: 5px + + .v-data-table--loading + .v-data-table__td + opacity: $data-table-loading-opacity + + .v-data-table-group-header-row__column + padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important + + .v-data-table-header__content + display: flex + align-items: center + + .v-data-table-header__sort-badge + display: inline-flex + justify-content: center + align-items: center + font-size: 0.875rem + padding: 4px + border-radius: 50% + background: $data-table-header-sort-badge-color + min-width: $data-table-header-sort-badge-size + min-height: $data-table-header-sort-badge-size + width: $data-table-header-sort-badge-size + height: $data-table-header-sort-badge-size + + .v-data-table-progress + > th + border: none !important + height: auto !important + padding: 0 !important + + .v-data-table-progress__loader + position: relative + + .v-data-table-rows-loading, + .v-data-table-rows-no-data + text-align: center + + .v-data-table__tr--mobile + > .v-data-table__td--expanded-row + grid-template-columns: 0 + justify-content: center + + > .v-data-table__td--select-row + grid-template-columns: 0 + justify-content: end + + > td + align-items: center + column-gap: 4px + display: grid + grid-template-columns: repeat(2, 1fr) + min-height: var(--v-table-row-height) + + &:not(:last-child) + border-bottom: 0 !important + + .v-data-table__td-title + font-weight: VTable.$table-header-font-weight + text-align: left + + .v-data-table__td-value + text-align: right + + .v-data-table__td + &-sort-icon + color: $data-table-header-mobile-chip-icon-color + + &-active + color: $data-table-header-mobile-chip-icon-color-active diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx new file mode 100644 index 0000000..c98c3ba --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -0,0 +1,295 @@ +// Styles +import './VDataTable.sass' + +// Components +import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter' +import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders' +import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows' +import { VDivider } from '@/components/VDivider' +import { makeVTableProps, VTable } from '@/components/VTable/VTable' + +// Composables +import { makeDataTableExpandProps, provideExpanded } from './composables/expand' +import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group' +import { createHeaders, makeDataTableHeaderProps } from './composables/headers' +import { makeDataTableItemsProps, useDataTableItems } from './composables/items' +import { useOptions } from './composables/options' +import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from './composables/paginate' +import { makeDataTableSelectProps, provideSelection } from './composables/select' +import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort' +import { provideDefaults } from '@/composables/defaults' +import { makeFilterProps, useFilter } from '@/composables/filter' + +// Utilities +import { computed, toRef, toRefs } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { DeepReadonly, UnwrapRef } from 'vue' +import type { Group } from './composables/group' +import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types' +import type { VDataTableHeadersSlots } from './VDataTableHeaders' +import type { VDataTableRowsSlots } from './VDataTableRows' +import type { GenericProps, SelectItemKey } from '@/util' + +export type VDataTableSlotProps = { + page: number + itemsPerPage: number + sortBy: UnwrapRef['sortBy']> + pageCount: number + toggleSort: ReturnType['toggleSort'] + setItemsPerPage: ReturnType['setItemsPerPage'] + someSelected: boolean + allSelected: boolean + isSelected: ReturnType['isSelected'] + select: ReturnType['select'] + selectAll: ReturnType['selectAll'] + toggleSelect: ReturnType['toggleSelect'] + isExpanded: ReturnType['isExpanded'] + toggleExpand: ReturnType['toggleExpand'] + isGroupOpen: ReturnType['isGroupOpen'] + toggleGroup: ReturnType['toggleGroup'] + items: readonly T[] + internalItems: readonly DataTableItem[] + groupedItems: readonly (DataTableItem | Group>)[] + columns: InternalDataTableHeader[] + headers: InternalDataTableHeader[][] +} + +export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { + default: VDataTableSlotProps + colgroup: VDataTableSlotProps + top: VDataTableSlotProps + body: VDataTableSlotProps + tbody: VDataTableSlotProps + thead: VDataTableSlotProps + tfoot: VDataTableSlotProps + bottom: VDataTableSlotProps + 'body.prepend': VDataTableSlotProps + 'body.append': VDataTableSlotProps + 'footer.prepend': never +} + +export const makeDataTableProps = propsFactory({ + ...makeVDataTableRowsProps(), + + hideDefaultBody: Boolean, + hideDefaultFooter: Boolean, + hideDefaultHeader: Boolean, + width: [String, Number], + search: String, + + ...makeDataTableExpandProps(), + ...makeDataTableGroupProps(), + ...makeDataTableHeaderProps(), + ...makeDataTableItemsProps(), + ...makeDataTableSelectProps(), + ...makeDataTableSortProps(), + ...makeVDataTableHeadersProps(), + ...makeVTableProps(), +}, 'DataTable') + +export const makeVDataTableProps = propsFactory({ + ...makeDataTablePaginateProps(), + ...makeDataTableProps(), + ...makeFilterProps(), + ...makeVDataTableFooterProps(), +}, 'VDataTable') + +type ItemType = T extends readonly (infer U)[] ? U : never + +export const VDataTable = genericComponent( + props: { + items?: T + itemValue?: SelectItemKey> + rowProps?: RowProps> + cellProps?: CellProps> + itemSelectable?: SelectItemKey> + headers?: DeepReadonly>[]> + modelValue?: V + 'onUpdate:modelValue'?: (value: V) => void + }, + slots: VDataTableSlots>, +) => GenericProps>()({ + name: 'VDataTable', + + props: makeVDataTableProps(), + + emits: { + 'update:modelValue': (value: any[]) => true, + 'update:page': (value: number) => true, + 'update:itemsPerPage': (value: number) => true, + 'update:sortBy': (value: any) => true, + 'update:options': (value: any) => true, + 'update:groupBy': (value: any) => true, + 'update:expanded': (value: any) => true, + 'update:currentItems': (value: any) => true, + }, + + setup (props, { attrs, slots }) { + const { groupBy } = createGroupBy(props) + const { sortBy, multiSort, mustSort } = createSort(props) + const { page, itemsPerPage } = createPagination(props) + const { disableSort } = toRefs(props) + + const { + columns, + headers, + sortFunctions, + sortRawFunctions, + filterFunctions, + } = createHeaders(props, { + groupBy, + showSelect: toRef(props, 'showSelect'), + showExpand: toRef(props, 'showExpand'), + }) + + const { items } = useDataTableItems(props, columns) + + const search = toRef(props, 'search') + const { filteredItems } = useFilter(props, items, search, { + transform: item => item.columns, + customKeyFilter: filterFunctions, + }) + + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }) + const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy, disableSort }) + + const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { + transform: item => item.columns, + sortFunctions, + sortRawFunctions, + }) + const { flatItems } = useGroupedItems(sortedItems, groupBy, opened) + const itemsLength = computed(() => flatItems.value.length) + + const { startIndex, stopIndex, pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength }) + const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage }) + + const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value)) + + const { + isSelected, + select, + selectAll, + toggleSelect, + someSelected, + allSelected, + } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups }) + + const { isExpanded, toggleExpand } = provideExpanded(props) + + useOptions({ + page, + itemsPerPage, + sortBy, + groupBy, + search, + }) + + provideDefaults({ + VDataTableRows: { + hideNoData: toRef(props, 'hideNoData'), + noDataText: toRef(props, 'noDataText'), + loading: toRef(props, 'loading'), + loadingText: toRef(props, 'loadingText'), + }, + }) + + const slotProps = computed>(() => ({ + page: page.value, + itemsPerPage: itemsPerPage.value, + sortBy: sortBy.value, + pageCount: pageCount.value, + toggleSort, + setItemsPerPage, + someSelected: someSelected.value, + allSelected: allSelected.value, + isSelected, + select, + selectAll, + toggleSelect, + isExpanded, + toggleExpand, + isGroupOpen, + toggleGroup, + items: paginatedItemsWithoutGroups.value.map(item => item.raw), + internalItems: paginatedItemsWithoutGroups.value, + groupedItems: paginatedItems.value, + columns: columns.value, + headers: headers.value, + })) + + useRender(() => { + const dataTableFooterProps = VDataTableFooter.filterProps(props) + const dataTableHeadersProps = VDataTableHeaders.filterProps(props) + const dataTableRowsProps = VDataTableRows.filterProps(props) + const tableProps = VTable.filterProps(props) + + return ( + + {{ + top: () => slots.top?.(slotProps.value), + default: () => slots.default ? slots.default(slotProps.value) : ( + <> + { slots.colgroup?.(slotProps.value) } + { !props.hideDefaultHeader && ( + + + + )} + { slots.thead?.(slotProps.value) } + { !props.hideDefaultBody && ( + + { slots['body.prepend']?.(slotProps.value) } + { slots.body ? slots.body(slotProps.value) : ( + + )} + { slots['body.append']?.(slotProps.value) } + + )} + { slots.tbody?.(slotProps.value) } + { slots.tfoot?.(slotProps.value) } + + ), + bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && ( + <> + + + + + ), + }} + + ) + }) + + return {} + }, +}) + +export type VDataTable = InstanceType diff --git a/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx new file mode 100644 index 0000000..2640d79 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx @@ -0,0 +1,45 @@ +// Utilities +import { convertToUnit, defineFunctionalComponent } from '@/util' + +// Types +import type { PropType } from 'vue' + +export const VDataTableColumn = defineFunctionalComponent({ + align: { + type: String as PropType<'start' | 'center' | 'end'>, + default: 'start', + }, + fixed: Boolean, + fixedOffset: [Number, String], + height: [Number, String], + lastFixed: Boolean, + noPadding: Boolean, + tag: String, + width: [Number, String], + maxWidth: [Number, String], + nowrap: Boolean, +}, (props, { slots }) => { + const Tag = props.tag ?? 'td' + return ( + + { slots.default?.() } + + ) +}) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass new file mode 100644 index 0000000..ca3b5cb --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableFooter.sass @@ -0,0 +1,36 @@ +@forward './variables' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-data-table-footer + align-items: center + display: flex + flex-wrap: wrap + justify-content: flex-end + padding: $data-table-footer-padding + + &__items-per-page + align-items: center + display: flex + justify-content: center + + > span + padding-inline-end: $data-table-footer-items-per-page-padding + + > .v-select + width: $data-table-footer-select-width + + &__info + display: flex + justify-content: flex-end + min-width: $data-table-footer-info-min-width + padding: $data-table-footer-info-padding + + &__paginationz + align-items: center + display: flex + margin-inline-start: $data-table-footer-pagination-margin-inline-start + + &__page + padding: 0 8px diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx b/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx new file mode 100644 index 0000000..6c2737e --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx @@ -0,0 +1,149 @@ +// Styles +import './VDataTableFooter.sass' + +// Components +import { VPagination } from '@/components/VPagination' +import { VSelect } from '@/components/VSelect' + +// Composables +import { usePagination } from './composables/paginate' +import { IconValue } from '@/composables/icons' +import { useLocale } from '@/composables/locale' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export const makeVDataTableFooterProps = propsFactory({ + prevIcon: { + type: IconValue, + default: '$prev', + }, + nextIcon: { + type: IconValue, + default: '$next', + }, + firstIcon: { + type: IconValue, + default: '$first', + }, + lastIcon: { + type: IconValue, + default: '$last', + }, + itemsPerPageText: { + type: String, + default: '$vuetify.dataFooter.itemsPerPageText', + }, + pageText: { + type: String, + default: '$vuetify.dataFooter.pageText', + }, + firstPageLabel: { + type: String, + default: '$vuetify.dataFooter.firstPage', + }, + prevPageLabel: { + type: String, + default: '$vuetify.dataFooter.prevPage', + }, + nextPageLabel: { + type: String, + default: '$vuetify.dataFooter.nextPage', + }, + lastPageLabel: { + type: String, + default: '$vuetify.dataFooter.lastPage', + }, + itemsPerPageOptions: { + type: Array as PropType, + default: () => ([ + { value: 10, title: '10' }, + { value: 25, title: '25' }, + { value: 50, title: '50' }, + { value: 100, title: '100' }, + { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' }, + ]), + }, + showCurrentPage: Boolean, +}, 'VDataTableFooter') + +export const VDataTableFooter = genericComponent<{ prepend: never }>()({ + name: 'VDataTableFooter', + + props: makeVDataTableFooterProps(), + + setup (props, { slots }) { + const { t } = useLocale() + const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage, setItemsPerPage } = usePagination() + + const itemsPerPageOptions = computed(() => ( + props.itemsPerPageOptions.map(option => { + if (typeof option === 'number') { + return { + value: option, + title: option === -1 + ? t('$vuetify.dataFooter.itemsPerPageAll') + : String(option), + } + } + + return { + ...option, + title: !isNaN(Number(option.title)) ? option.title : t(option.title), + } + }) + )) + + useRender(() => { + const paginationProps = VPagination.filterProps(props) + + return ( +
    + { slots.prepend?.() } + +
    + { t(props.itemsPerPageText) } + + setItemsPerPage(Number(v)) } + density="compact" + variant="outlined" + hide-details + /> +
    + +
    +
    + { t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value) } +
    +
    + +
    + +
    +
    + ) + }) + + return {} + }, +}) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableGroupHeaderRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableGroupHeaderRow.tsx new file mode 100644 index 0000000..07b14e0 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableGroupHeaderRow.tsx @@ -0,0 +1,91 @@ +// Components +import { VDataTableColumn } from './VDataTableColumn' +import { VBtn } from '@/components/VBtn' +import { VCheckboxBtn } from '@/components/VCheckbox' + +// Composables +import { useGroupBy } from './composables/group' +import { useHeaders } from './composables/headers' +import { useSelection } from './composables/select' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { Group } from './composables/group' + +export type VDataTableGroupHeaderRowSlots = { + 'data-table-group': { item: Group, count: number, props: Record } + 'data-table-select': { props: Record } +} + +export const makeVDataTableGroupHeaderRowProps = propsFactory({ + item: { + type: Object as PropType, + required: true, + }, +}, 'VDataTableGroupHeaderRow') + +export const VDataTableGroupHeaderRow = genericComponent()({ + name: 'VDataTableGroupHeaderRow', + + props: makeVDataTableGroupHeaderRowProps(), + + setup (props, { slots }) { + const { isGroupOpen, toggleGroup, extractRows } = useGroupBy() + const { isSelected, isSomeSelected, select } = useSelection() + const { columns } = useHeaders() + + const rows = computed(() => { + return extractRows([props.item]) + }) + + return () => ( + + { columns.value.map(column => { + if (column.key === 'data-table-group') { + const icon = isGroupOpen(props.item) ? '$expand' : '$next' + const onClick = () => toggleGroup(props.item) + + return slots['data-table-group']?.({ item: props.item, count: rows.value.length, props: { icon, onClick } }) ?? ( + + + { props.item.value } + ({ rows.value.length }) + + ) + } + + if (column.key === 'data-table-select') { + const modelValue = isSelected(rows.value) + const indeterminate = isSomeSelected(rows.value) && !modelValue + const selectGroup = (v: boolean) => select(rows.value, v) + return slots['data-table-select']?.({ props: { modelValue, indeterminate, 'onUpdate:modelValue': selectGroup } }) ?? ( + + + + ) + } + + return + })} + + ) + }, +}) diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx new file mode 100644 index 0000000..0702a34 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -0,0 +1,326 @@ +// Components +import { VDataTableColumn } from './VDataTableColumn' +import { VCheckboxBtn } from '@/components/VCheckbox' +import { VChip } from '@/components/VChip' +import { VIcon } from '@/components/VIcon' +import { VSelect } from '@/components/VSelect' + +// Composables +import { useHeaders } from './composables/headers' +import { useSelection } from './composables/select' +import { useSort } from './composables/sort' +import { useBackgroundColor } from '@/composables/color' +import { makeDisplayProps, useDisplay } from '@/composables/display' +import { IconValue } from '@/composables/icons' +import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader' +import { useLocale } from '@/composables/locale' + +// Utilities +import { computed, mergeProps } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { CSSProperties, PropType, UnwrapRef } from 'vue' +import type { provideSelection } from './composables/select' +import type { provideSort } from './composables/sort' +import type { InternalDataTableHeader } from './types' +import type { ItemProps } from '@/composables/list-items' +import type { LoaderSlotProps } from '@/composables/loader' + +export type HeadersSlotProps = { + headers: InternalDataTableHeader[][] + columns: InternalDataTableHeader[] + sortBy: UnwrapRef['sortBy']> + someSelected: UnwrapRef['someSelected']> + allSelected: UnwrapRef['allSelected']> + toggleSort: ReturnType['toggleSort'] + selectAll: ReturnType['selectAll'] + getSortIcon: (column: InternalDataTableHeader) => IconValue + isSorted: ReturnType['isSorted'] +} + +export type VDataTableHeaderCellColumnSlotProps = { + column: InternalDataTableHeader + selectAll: ReturnType['selectAll'] + isSorted: ReturnType['isSorted'] + toggleSort: ReturnType['toggleSort'] + sortBy: UnwrapRef['sortBy']> + someSelected: UnwrapRef['someSelected']> + allSelected: UnwrapRef['allSelected']> + getSortIcon: (column: InternalDataTableHeader) => IconValue +} + +export type VDataTableHeadersSlots = { + headers: HeadersSlotProps + loader: LoaderSlotProps + 'header.data-table-select': VDataTableHeaderCellColumnSlotProps + 'header.data-table-expand': VDataTableHeaderCellColumnSlotProps +} & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps } + +export const makeVDataTableHeadersProps = propsFactory({ + color: String, + sticky: Boolean, + disableSort: Boolean, + multiSort: Boolean, + sortAscIcon: { + type: IconValue, + default: '$sortAsc', + }, + sortDescIcon: { + type: IconValue, + default: '$sortDesc', + }, + headerProps: { + type: Object as PropType>, + }, + + ...makeDisplayProps(), + ...makeLoaderProps(), +}, 'VDataTableHeaders') + +export const VDataTableHeaders = genericComponent()({ + name: 'VDataTableHeaders', + + props: makeVDataTableHeadersProps(), + + setup (props, { slots }) { + const { t } = useLocale() + const { toggleSort, sortBy, isSorted } = useSort() + const { someSelected, allSelected, selectAll, showSelectAll } = useSelection() + const { columns, headers } = useHeaders() + const { loaderClasses } = useLoader(props) + + function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined { + if (!props.sticky && !column.fixed) return undefined + + return { + position: 'sticky', + left: column.fixed ? convertToUnit(column.fixedOffset) : undefined, + top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined, + } + } + + function getSortIcon (column: InternalDataTableHeader) { + const item = sortBy.value.find(item => item.key === column.key) + + if (!item) return props.sortAscIcon + + return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon + } + + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') + + const { displayClasses, mobile } = useDisplay(props) + + const slotProps = computed(() => ({ + headers: headers.value, + columns: columns.value, + toggleSort, + isSorted, + sortBy: sortBy.value, + someSelected: someSelected.value, + allSelected: allSelected.value, + selectAll, + getSortIcon, + } satisfies HeadersSlotProps)) + + const headerCellClasses = computed(() => ([ + 'v-data-table__th', + { + 'v-data-table__th--sticky': props.sticky, + }, + displayClasses.value, + loaderClasses.value, + ])) + + const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => { + const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand' + const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {}) + + return ( + toggleSort(column) : undefined } + fixed={ column.fixed } + nowrap={ column.nowrap } + lastFixed={ column.lastFixed } + noPadding={ noPadding } + { ...headerProps } + > + {{ + default: () => { + const columnSlotName = `header.${column.key}` as const + const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { + column, + selectAll, + isSorted, + toggleSort, + sortBy: sortBy.value, + someSelected: someSelected.value, + allSelected: allSelected.value, + getSortIcon, + } + + if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps) + + if (column.key === 'data-table-select') { + return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && ( + + )) + } + + return ( +
    + { column.title } + { column.sortable && !props.disableSort && ( + + )} + { props.multiSort && isSorted(column) && ( +
    + { sortBy.value.findIndex(x => x.key === column.key) + 1 } +
    + )} +
    + ) + }, + }} +     + ) + } + + const VDataTableMobileHeaderCell = () => { + const headerProps = mergeProps(props.headerProps ?? {} ?? {}) + + const displayItems = computed(() => { + return columns.value.filter(column => column?.sortable && !props.disableSort) + }) + + const appendIcon = computed(() => { + const showSelectColumn = columns.value.find(column => column.key === 'data-table-select') + + if (showSelectColumn == null) return + + return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff' + }) + + return ( + +
    + sortBy.value = [] } + appendIcon={ appendIcon.value } + onClick:append={ () => selectAll(!allSelected.value) } + > + {{ + ...slots, + chip: props => ( + toggleSort(props.item.raw) : undefined } + onMousedown={ (e: MouseEvent) => { + e.preventDefault() + e.stopPropagation() + }} + > + { props.item.title } + + + ), + }} + +
    +     + ) + } + + useRender(() => { + return mobile.value ? ( + + + + ) : ( + <> + { slots.headers + ? slots.headers(slotProps.value) + : headers.value.map((row, y) => ( + + { row.map((column, x) => ( + + ))} + + ))} + + { props.loading && ( + + + + + + )} + + ) + }) + }, +}) + +export type VDataTableHeaders = InstanceType diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx new file mode 100644 index 0000000..37a53c2 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx @@ -0,0 +1,185 @@ +// Components +import { VDataTableColumn } from './VDataTableColumn' +import { VBtn } from '@/components/VBtn' +import { VCheckboxBtn } from '@/components/VCheckbox' + +// Composables +import { useExpanded } from './composables/expand' +import { useHeaders } from './composables/headers' +import { useSelection } from './composables/select' +import { useSort } from './composables/sort' +import { makeDisplayProps, useDisplay } from '@/composables/display' + +// Utilities +import { toDisplayString, withModifiers } from 'vue' +import { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { CellProps, DataTableItem, ItemKeySlot } from './types' +import type { VDataTableHeaderCellColumnSlotProps } from './VDataTableHeaders' +import type { GenericProps } from '@/util' + +export type VDataTableRowSlots = { + 'item.data-table-select': Omit, 'value'> + 'item.data-table-expand': Omit, 'value'> + 'header.data-table-select': VDataTableHeaderCellColumnSlotProps + 'header.data-table-expand': VDataTableHeaderCellColumnSlotProps +} & { + [key: `item.${string}`]: ItemKeySlot + [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps +} + +export const makeVDataTableRowProps = propsFactory({ + index: Number, + item: Object as PropType, + cellProps: [Object, Function] as PropType>, + onClick: EventProp<[MouseEvent]>(), + onContextmenu: EventProp<[MouseEvent]>(), + onDblclick: EventProp<[MouseEvent]>(), + + ...makeDisplayProps(), +}, 'VDataTableRow') + +export const VDataTableRow = genericComponent( + props: { + item?: DataTableItem + cellProps?: CellProps + }, + slots: VDataTableRowSlots, +) => GenericProps>()({ + name: 'VDataTableRow', + + props: makeVDataTableRowProps(), + + setup (props, { slots }) { + const { displayClasses, mobile } = useDisplay(props, 'v-data-table__tr') + const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection() + const { isExpanded, toggleExpand } = useExpanded() + const { toggleSort, sortBy, isSorted } = useSort() + const { columns } = useHeaders() + + useRender(() => ( + + { props.item && columns.value.map((column, i) => { + const item = props.item! + const slotName = `item.${column.key}` as const + const headerSlotName = `header.${column.key}` as const + const slotProps = { + index: props.index!, + item: item.raw, + internalItem: item, + value: getObjectValueByPath(item.columns, column.key), + column, + isSelected, + toggleSelect, + isExpanded, + toggleExpand, + } satisfies ItemKeySlot + + const columnSlotProps: VDataTableHeaderCellColumnSlotProps = { + column, + selectAll, + isSorted, + toggleSort, + sortBy: sortBy.value, + someSelected: someSelected.value, + allSelected: allSelected.value, + getSortIcon: () => '', + } + + const cellProps = typeof props.cellProps === 'function' + ? props.cellProps({ + index: slotProps.index, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, + column, + }) + : props.cellProps + const columnCellProps = typeof column.cellProps === 'function' + ? column.cellProps({ + index: slotProps.index, + item: slotProps.item, + internalItem: slotProps.internalItem, + value: slotProps.value, + }) + : column.cellProps + + return ( + + {{ + default: () => { + if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps) + + if (column.key === 'data-table-select') { + return slots['item.data-table-select']?.(slotProps) ?? ( + toggleSelect(item), ['stop']) } + /> + ) + } + + if (column.key === 'data-table-expand') { + return slots['item.data-table-expand']?.(slotProps) ?? ( + toggleExpand(item), ['stop']) } + /> + ) + } + + const displayValue = toDisplayString(slotProps.value) + + return !mobile.value ? displayValue : ( + <> +
    + { slots[headerSlotName]?.(columnSlotProps) ?? column.title } +
    + +
    + { slots[slotName]?.(slotProps) ?? displayValue } +
    + + ) + }, + }} +     + ) + })} + + )) + }, +}) + +export type VDataTableRow = InstanceType diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx new file mode 100644 index 0000000..cd61f72 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx @@ -0,0 +1,183 @@ +// Components +import { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow' +import { VDataTableRow } from './VDataTableRow' + +// Composables +import { useExpanded } from './composables/expand' +import { useGroupBy } from './composables/group' +import { useHeaders } from './composables/headers' +import { useSelection } from './composables/select' +import { makeDisplayProps, useDisplay } from '@/composables/display' +import { useLocale } from '@/composables/locale' + +// Utilities +import { Fragment, mergeProps } from 'vue' +import { genericComponent, getPrefixedEventHandlers, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { Group } from './composables/group' +import type { CellProps, DataTableItem, GroupHeaderSlot, ItemSlot, RowProps } from './types' +import type { VDataTableGroupHeaderRowSlots } from './VDataTableGroupHeaderRow' +import type { VDataTableRowSlots } from './VDataTableRow' +import type { GenericProps } from '@/util' + +export type VDataTableRowsSlots = VDataTableGroupHeaderRowSlots & VDataTableRowSlots & { + item: ItemSlot & { props: Record } + loading: never + 'group-header': GroupHeaderSlot + 'no-data': never + 'expanded-row': ItemSlot +} + +export const makeVDataTableRowsProps = propsFactory({ + loading: [Boolean, String], + loadingText: { + type: String, + default: '$vuetify.dataIterator.loadingText', + }, + hideNoData: Boolean, + items: { + type: Array as PropType, + default: () => ([]), + }, + noDataText: { + type: String, + default: '$vuetify.noDataText', + }, + rowProps: [Object, Function] as PropType>, + cellProps: [Object, Function] as PropType>, + + ...makeDisplayProps(), +}, 'VDataTableRows') + +export const VDataTableRows = genericComponent( + props: { + items?: readonly (DataTableItem | Group)[] + }, + slots: VDataTableRowsSlots, +) => GenericProps>()({ + name: 'VDataTableRows', + + inheritAttrs: false, + + props: makeVDataTableRowsProps(), + + setup (props, { attrs, slots }) { + const { columns } = useHeaders() + const { expandOnClick, toggleExpand, isExpanded } = useExpanded() + const { isSelected, toggleSelect } = useSelection() + const { toggleGroup, isGroupOpen } = useGroupBy() + const { t } = useLocale() + const { mobile } = useDisplay(props) + + useRender(() => { + if (props.loading && (!props.items.length || slots.loading)) { + return ( + + + { slots.loading?.() ?? t(props.loadingText) } + + + ) + } + + if (!props.loading && !props.items.length && !props.hideNoData) { + return ( + + + { slots['no-data']?.() ?? t(props.noDataText) } + + + ) + } + + return ( + <> + { props.items.map((item, index) => { + if (item.type === 'group') { + const slotProps = { + index, + item, + columns: columns.value, + isExpanded, + toggleExpand, + isSelected, + toggleSelect, + toggleGroup, + isGroupOpen, + } satisfies GroupHeaderSlot + + return slots['group-header'] ? slots['group-header'](slotProps) : ( + slotProps) } + v-slots={ slots } + /> + ) + } + + const slotProps = { + index, + item: item.raw, + internalItem: item, + columns: columns.value, + isExpanded, + toggleExpand, + isSelected, + toggleSelect, + } satisfies ItemSlot + + const itemSlotProps = { + ...slotProps, + props: mergeProps( + { + key: `item_${item.key ?? item.index}`, + onClick: expandOnClick.value ? () => { + toggleExpand(item) + } : undefined, + index, + item, + cellProps: props.cellProps, + mobile: mobile.value, + }, + getPrefixedEventHandlers(attrs, ':row', () => slotProps), + typeof props.rowProps === 'function' + ? props.rowProps({ + item: slotProps.item, + index: slotProps.index, + internalItem: slotProps.internalItem, + }) + : props.rowProps, + ), + } + + return ( + + { slots.item ? slots.item(itemSlotProps) : ( + + )} + + { isExpanded(item) && slots['expanded-row']?.(slotProps) } + + ) + })} + + ) + }) + + return {} + }, +}) + +export type VDataTableRows = InstanceType diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx new file mode 100644 index 0000000..1300519 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx @@ -0,0 +1,216 @@ +// Components +import { makeDataTableProps } from './VDataTable' +import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter' +import { VDataTableHeaders } from './VDataTableHeaders' +import { VDataTableRows } from './VDataTableRows' +import { VDivider } from '@/components/VDivider' +import { VTable } from '@/components/VTable' + +// Composables +import { provideExpanded } from './composables/expand' +import { createGroupBy, provideGroupBy, useGroupedItems } from './composables/group' +import { createHeaders } from './composables/headers' +import { useDataTableItems } from './composables/items' +import { useOptions } from './composables/options' +import { createPagination, makeDataTablePaginateProps, providePagination } from './composables/paginate' +import { provideSelection } from './composables/select' +import { createSort, provideSort } from './composables/sort' +import { provideDefaults } from '@/composables/defaults' + +// Utilities +import { computed, provide, toRef, toRefs } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { VDataTableSlotProps, VDataTableSlots } from './VDataTable' +import type { CellProps, RowProps } from '@/components/VDataTable/types' +import type { GenericProps, SelectItemKey } from '@/util' + +export const makeVDataTableServerProps = propsFactory({ + itemsLength: { + type: [Number, String], + required: true, + }, + + ...makeDataTablePaginateProps(), + ...makeDataTableProps(), + ...makeVDataTableFooterProps(), +}, 'VDataTableServer') + +type ItemType = T extends readonly (infer U)[] ? U : never + +export const VDataTableServer = genericComponent( + props: { + items?: T + itemValue?: SelectItemKey> + rowProps?: RowProps> + cellProps?: CellProps> + itemSelectable?: SelectItemKey> + modelValue?: V + 'onUpdate:modelValue'?: (value: V) => void + }, + slots: VDataTableSlots>, +) => GenericProps>()({ + name: 'VDataTableServer', + + props: makeVDataTableServerProps(), + + emits: { + 'update:modelValue': (value: any[]) => true, + 'update:page': (page: number) => true, + 'update:itemsPerPage': (page: number) => true, + 'update:sortBy': (sortBy: any) => true, + 'update:options': (options: any) => true, + 'update:expanded': (options: any) => true, + 'update:groupBy': (value: any) => true, + }, + + setup (props, { attrs, slots }) { + const { groupBy } = createGroupBy(props) + const { sortBy, multiSort, mustSort } = createSort(props) + const { page, itemsPerPage } = createPagination(props) + const { disableSort } = toRefs(props) + const itemsLength = computed(() => parseInt(props.itemsLength, 10)) + + const { columns, headers } = createHeaders(props, { + groupBy, + showSelect: toRef(props, 'showSelect'), + showExpand: toRef(props, 'showExpand'), + }) + + const { items } = useDataTableItems(props, columns) + + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page }) + + const { opened, isGroupOpen, toggleGroup, extractRows } = provideGroupBy({ groupBy, sortBy, disableSort }) + + const { pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength }) + + const { flatItems } = useGroupedItems(items, groupBy, opened) + + const { isSelected, select, selectAll, toggleSelect, someSelected, allSelected } = provideSelection(props, { + allItems: items, + currentPage: items, + }) + + const { isExpanded, toggleExpand } = provideExpanded(props) + + const itemsWithoutGroups = computed(() => extractRows(items.value)) + + useOptions({ + page, + itemsPerPage, + sortBy, + groupBy, + search: toRef(props, 'search'), + }) + + provide('v-data-table', { + toggleSort, + sortBy, + }) + + provideDefaults({ + VDataTableRows: { + hideNoData: toRef(props, 'hideNoData'), + noDataText: toRef(props, 'noDataText'), + loading: toRef(props, 'loading'), + loadingText: toRef(props, 'loadingText'), + }, + }) + + const slotProps = computed>(() => ({ + page: page.value, + itemsPerPage: itemsPerPage.value, + sortBy: sortBy.value, + pageCount: pageCount.value, + toggleSort, + setItemsPerPage, + someSelected: someSelected.value, + allSelected: allSelected.value, + isSelected, + select, + selectAll, + toggleSelect, + isExpanded, + toggleExpand, + isGroupOpen, + toggleGroup, + items: itemsWithoutGroups.value.map(item => item.raw), + internalItems: itemsWithoutGroups.value, + groupedItems: flatItems.value, + columns: columns.value, + headers: headers.value, + })) + + useRender(() => { + const dataTableFooterProps = VDataTableFooter.filterProps(props) + const dataTableHeadersProps = VDataTableHeaders.filterProps(props) + const dataTableRowsProps = VDataTableRows.filterProps(props) + const tableProps = VTable.filterProps(props) + + return ( + + {{ + top: () => slots.top?.(slotProps.value), + default: () => slots.default ? slots.default(slotProps.value) : ( + <> + { slots.colgroup?.(slotProps.value) } + { !props.hideDefaultHeader && ( + + + + )} + { slots.thead?.(slotProps.value) } + { !props.hideDefaultBody && ( + + { slots['body.prepend']?.(slotProps.value) } + { slots.body ? slots.body(slotProps.value) : ( + + )} + { slots['body.append']?.(slotProps.value) } + + )} + { slots.tbody?.(slotProps.value) } + { slots.tfoot?.(slotProps.value) } + + ), + bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && ( + <> + + + + + ), + }} + + ) + }) + }, +}) + +export type VDataTableServer = InstanceType diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx new file mode 100644 index 0000000..898c15e --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx @@ -0,0 +1,271 @@ +// Components +import { makeDataTableProps } from './VDataTable' +import { VDataTableHeaders } from './VDataTableHeaders' +import { VDataTableRow } from './VDataTableRow' +import { VDataTableRows } from './VDataTableRows' +import { VTable } from '@/components/VTable' +import { VVirtualScrollItem } from '@/components/VVirtualScroll/VVirtualScrollItem' + +// Composables +import { provideExpanded } from './composables/expand' +import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group' +import { createHeaders } from './composables/headers' +import { useDataTableItems } from './composables/items' +import { useOptions } from './composables/options' +import { provideSelection } from './composables/select' +import { createSort, provideSort, useSortedItems } from './composables/sort' +import { provideDefaults } from '@/composables/defaults' +import { makeFilterProps, useFilter } from '@/composables/filter' +import { makeVirtualProps, useVirtual } from '@/composables/virtual' + +// Utilities +import { computed, shallowRef, toRef, toRefs } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { VDataTableSlotProps } from './VDataTable' +import type { VDataTableHeadersSlots } from './VDataTableHeaders' +import type { VDataTableRowsSlots } from './VDataTableRows' +import type { CellProps, RowProps } from '@/components/VDataTable/types' +import type { GenericProps, SelectItemKey, TemplateRef } from '@/util' + +type VDataTableVirtualSlotProps = Omit< + VDataTableSlotProps, + | 'setItemsPerPage' + | 'page' + | 'pageCount' + | 'itemsPerPage' +> + +export type VDataTableVirtualSlots = VDataTableRowsSlots & VDataTableHeadersSlots & { + colgroup: VDataTableVirtualSlotProps + top: VDataTableVirtualSlotProps + headers: VDataTableHeadersSlots['headers'] + bottom: VDataTableVirtualSlotProps + 'body.prepend': VDataTableVirtualSlotProps + 'body.append': VDataTableVirtualSlotProps + item: { + itemRef: TemplateRef + } +} + +export const makeVDataTableVirtualProps = propsFactory({ + ...makeDataTableProps(), + ...makeDataTableGroupProps(), + ...makeVirtualProps(), + ...makeFilterProps(), +}, 'VDataTableVirtual') + +type ItemType = T extends readonly (infer U)[] ? U : never + +export const VDataTableVirtual = genericComponent( + props: { + items?: T + itemValue?: SelectItemKey> + rowProps?: RowProps> + cellProps?: CellProps> + itemSelectable?: SelectItemKey> + modelValue?: V + 'onUpdate:modelValue'?: (value: V) => void + }, + slots: VDataTableVirtualSlots>, +) => GenericProps>()({ + name: 'VDataTableVirtual', + + props: makeVDataTableVirtualProps(), + + emits: { + 'update:modelValue': (value: any[]) => true, + 'update:sortBy': (value: any) => true, + 'update:options': (value: any) => true, + 'update:groupBy': (value: any) => true, + 'update:expanded': (value: any) => true, + }, + + setup (props, { attrs, slots }) { + const { groupBy } = createGroupBy(props) + const { sortBy, multiSort, mustSort } = createSort(props) + const { disableSort } = toRefs(props) + + const { + columns, + headers, + filterFunctions, + sortFunctions, + sortRawFunctions, + } = createHeaders(props, { + groupBy, + showSelect: toRef(props, 'showSelect'), + showExpand: toRef(props, 'showExpand'), + }) + const { items } = useDataTableItems(props, columns) + + const search = toRef(props, 'search') + const { filteredItems } = useFilter(props, items, search, { + transform: item => item.columns, + customKeyFilter: filterFunctions, + }) + + const { toggleSort } = provideSort({ sortBy, multiSort, mustSort }) + const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy, disableSort }) + + const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { + transform: item => item.columns, + sortFunctions, + sortRawFunctions, + }) + const { flatItems } = useGroupedItems(sortedItems, groupBy, opened) + + const allItems = computed(() => extractRows(flatItems.value)) + + const { isSelected, select, selectAll, toggleSelect, someSelected, allSelected } = provideSelection(props, { + allItems, + currentPage: allItems, + }) + const { isExpanded, toggleExpand } = provideExpanded(props) + + const { + containerRef, + markerRef, + paddingTop, + paddingBottom, + computedItems, + handleItemResize, + handleScroll, + handleScrollend, + } = useVirtual(props, flatItems) + const displayItems = computed(() => computedItems.value.map(item => item.raw)) + + useOptions({ + sortBy, + page: shallowRef(1), + itemsPerPage: shallowRef(-1), + groupBy, + search, + }) + + provideDefaults({ + VDataTableRows: { + hideNoData: toRef(props, 'hideNoData'), + noDataText: toRef(props, 'noDataText'), + loading: toRef(props, 'loading'), + loadingText: toRef(props, 'loadingText'), + }, + }) + + const slotProps = computed>(() => ({ + sortBy: sortBy.value, + toggleSort, + someSelected: someSelected.value, + allSelected: allSelected.value, + isSelected, + select, + selectAll, + toggleSelect, + isExpanded, + toggleExpand, + isGroupOpen, + toggleGroup, + items: allItems.value.map(item => item.raw), + internalItems: allItems.value, + groupedItems: flatItems.value, + columns: columns.value, + headers: headers.value, + })) + + useRender(() => { + const dataTableHeadersProps = VDataTableHeaders.filterProps(props) + const dataTableRowsProps = VDataTableRows.filterProps(props) + const tableProps = VTable.filterProps(props) + + return ( + + {{ + top: () => slots.top?.(slotProps.value), + wrapper: () => ( +
    + + { slots.colgroup?.(slotProps.value) } + { !props.hideDefaultHeader && ( + + + + )} + { !props.hideDefaultBody && ( + + + + + + { slots['body.prepend']?.(slotProps.value) } + + + {{ + ...slots, + item: itemSlotProps => ( + handleItemResize(itemSlotProps.internalItem.index, height) } + > + { ({ itemRef }) => ( + slots.item?.({ ...itemSlotProps, itemRef }) ?? ( + + ) + )} + + ), + }} + + + { slots['body.append']?.(slotProps.value) } + + + + + + )} +
    +
    + ), + bottom: () => slots.bottom?.(slotProps.value), + }} +     + ) + }) + }, +}) + +export type VDataTableVirtual = InstanceType diff --git a/packages/vuetify/src/components/VDataTable/__tests__/MobileRow.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/MobileRow.spec.ts new file mode 100644 index 0000000..faa98ba --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/MobileRow.spec.ts @@ -0,0 +1,141 @@ +// @ts-nocheck +/* eslint-disable */ + +// import MobileRow from '../MobileRow' +import { + mount, + Wrapper, + MountOptions, +} from '@vue/test-utils' +// import Vue from 'vue' + +describe.skip('MobileRow', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(MobileRow, options) + } + }) + + it('should render without slots', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol' }, + { text: 'Diesel', value: 'diesel' }, + ], + item: { + petrol: 0.68, + diesel: 0.65, + }, + }, + }, + }) + + expect(wrapper.findAll('tr')).toHaveLength(1) + expect(wrapper.findAll('td')).toHaveLength(2) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render non-string values', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { value: 'string' }, + { value: 'number' }, + { value: 'array' }, + { value: 'boolean' }, + { value: 'object' }, + { value: 'undefined' }, + { value: 'null' }, + ], + item: { + string: 'string', + number: 12.34, + array: [1, 2], + boolean: false, + object: { foo: 'bar' }, + null: null, + }, + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with regular slots', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol' }, + { text: 'Diesel', value: 'diesel' }, + ], + }, + }, + slots: { + petrol: '

    $0.68

    ', + diesel: '

    $0.65

    ', + }, + }) + + expect(wrapper.findAll('tr')).toHaveLength(1) + expect(wrapper.findAll('td')).toHaveLength(2) + expect(wrapper.findAll('p.test')).toHaveLength(2) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with scoped slots', () => { + const vm = new Vue() + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol' }, + { text: 'Diesel', value: 'diesel' }, + ], + item: { + petrol: 0.68, + diesel: 0.65, + }, + }, + }, + scopedSlots: { + petrol: props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]), + diesel: props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]), + }, + }) + + expect(wrapper.findAll('tr')).toHaveLength(1) + expect(wrapper.findAll('td')).toHaveLength(2) + expect(wrapper.findAll('p.test')).toHaveLength(2) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render without header when hideDefaultHeader: true', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol' }, + { text: 'Diesel', value: 'diesel' }, + ], + hideDefaultHeader: true, + item: { + petrol: 0.68, + diesel: 0.65, + }, + }, + }, + }) + + expect(wrapper.findAll('tr')).toHaveLength(1) + expect(wrapper.findAll('td')).toHaveLength(2) + expect(wrapper.findAll('.v-data-table__mobile-row__header')).toHaveLength(0) + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/Row.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/Row.spec.ts new file mode 100644 index 0000000..a096f7f --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/Row.spec.ts @@ -0,0 +1,141 @@ +// @ts-nocheck +/* eslint-disable */ + +// import Row from '../Row' +import { + mount, + Wrapper, + MountOptions, +} from '@vue/test-utils' +// import Vue from 'vue' + +describe.skip('Table Row', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(Row, options) + } + }) + + it('should render without slots', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol' }, + { text: 'Diesel', value: 'diesel' }, + ], + item: { + petrol: 0.68, + diesel: 0.65, + }, + }, + }, + }) + + expect(wrapper.findAll('tr')).toHaveLength(1) + expect(wrapper.findAll('td')).toHaveLength(2) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render non-string values', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { value: 'string' }, + { value: 'number' }, + { value: 'array' }, + { value: 'boolean' }, + { value: 'object' }, + { value: 'undefined' }, + { value: 'null' }, + ], + item: { + string: 'string', + number: 12.34, + array: [1, 2], + boolean: false, + object: { foo: 'bar' }, + null: null, + }, + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with cellClass', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol', cellClass: 'a' }, + { text: 'Diesel', value: 'diesel', cellClass: ['b', 'c'] }, + ], + item: { + petrol: 0.68, + diesel: 0.65, + }, + }, + }, + }) + + const tds = wrapper.findAll('td') + expect(tds.at(0).classes()).toContain('a') + expect(tds.at(1).classes()).toContain('b') + expect(tds.at(1).classes()).toContain('c') + expect(wrapper.html()).toMatchSnapshot() + }) + + it.skip('should render with regular slots', () => { + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol' }, + { text: 'Diesel', value: 'diesel' }, + ], + }, + }, + slots: { + 'column.petrol': '

    $0.68

    ', + 'column.diesel': '

    $0.65

    ', + }, + }) + + expect(wrapper.findAll('tr')).toHaveLength(1) + expect(wrapper.findAll('td')).toHaveLength(2) + expect(wrapper.findAll('p.test')).toHaveLength(2) + expect(wrapper.html()).toMatchSnapshot() + }) + + it.skip('should render with scoped slots', () => { + const vm = new Vue() + const wrapper = mountFunction({ + context: { + props: { + headers: [ + { text: 'Petrol', value: 'petrol' }, + { text: 'Diesel', value: 'diesel' }, + ], + item: { + petrol: 0.68, + diesel: 0.65, + }, + }, + }, + scopedSlots: { + 'column.petrol': props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]), + 'column.diesel': props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]), + }, + }) + + expect(wrapper.findAll('tr')).toHaveLength(1) + expect(wrapper.findAll('td')).toHaveLength(2) + expect(wrapper.findAll('p.test')).toHaveLength(2) + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/RowGroup.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/RowGroup.spec.ts new file mode 100644 index 0000000..d772afd --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/RowGroup.spec.ts @@ -0,0 +1,39 @@ +// @ts-nocheck +/* eslint-disable */ + +// import RowGroup from '../RowGroup' +import { + mount, + Wrapper, + MountOptions, +} from '@vue/test-utils' + +describe.skip('Table RowGroup', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(RowGroup, options) + } + }) + + it('should render with "column.summary" slot', () => { + const wrapper = mountFunction({ + slots: { + 'column.summary': '
    ', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with "row.summary" slot', () => { + const wrapper = mountFunction({ + slots: { + 'row.summary': '
    ', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx new file mode 100644 index 0000000..cde77da --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx @@ -0,0 +1,458 @@ +/// + +// Components +import { VDataTable } from '..' +import { Application } from '../../../../cypress/templates' + +// Utilities +import { ref } from 'vue' + +const DESSERT_HEADERS = [ + { title: 'Dessert (100g serving)', key: 'name' }, + { title: 'Calories', key: 'calories' }, + { title: 'Fat (g)', key: 'fat' }, + { title: 'Carbs (g)', key: 'carbs' }, + { title: 'Protein (g)', key: 'protein' }, + { title: 'Iron (%)', key: 'iron' }, + { title: 'Group', key: 'group' }, +] + +const DESSERT_ITEMS = [ + { + name: 'Frozen Yogurt', + calories: 159, + fat: 6.0, + carbs: 24, + protein: 4.0, + iron: '1%', + group: 1, + }, + { + name: 'Ice cream sandwich', + calories: 237, + fat: 9.0, + carbs: 37, + protein: 4.3, + iron: '1%', + group: 3, + }, + { + name: 'Eclair', + calories: 262, + fat: 16.0, + carbs: 23, + protein: 6.0, + iron: '7%', + group: 2, + }, + { + name: 'Cupcake', + calories: 305, + fat: 3.7, + carbs: 67, + protein: 4.3, + iron: '8%', + group: 2, + }, + { + name: 'Gingerbread', + calories: 356, + fat: 16.0, + carbs: 49, + protein: 3.9, + iron: '16%', + group: 3, + }, + { + name: 'Jelly bean', + calories: 375, + fat: 0.0, + carbs: 94, + protein: 0.0, + iron: '0%', + group: 1, + }, + { + name: 'Lollipop', + calories: 392, + fat: 0.2, + carbs: 98, + protein: 0, + iron: '2%', + group: 2, + }, + { + name: 'Honeycomb', + calories: 408, + fat: 3.2, + carbs: 87, + protein: 6.5, + iron: '45%', + group: 3, + }, + { + name: 'Donut', + calories: 452, + fat: 25.0, + carbs: 51, + protein: 4.9, + iron: '22%', + group: 3, + }, + { + name: 'KitKat', + calories: 518, + fat: 26.0, + carbs: 65, + protein: 7, + iron: '6%', + group: 1, + }, +] + +describe('VDataTable', () => { + it('should reset page when searching', () => { + cy.mount(({ search }: { search: string }) => ( + + + + )) + + cy.get('.v-btn[aria-label="Next page"]') + .click() + cy.setProps({ search: 'a' }) + cy.emitted(VDataTable, 'update:page') + .should('deep.equal', [[2], [1]]) + }) + + // https://github.com/vuetifyjs/vuetify/issues/16999 + it('should search in nested keys', () => { + const nestedItems = [ + { + foo: { + bar: 'hello', + }, + }, + { + foo: { + bar: 'world', + }, + }, + ] + + const headers = [ + { + key: 'unique', + value: 'foo.bar', + title: 'Column', + }, + ] + + cy.mount(props => ( + + + + )) + + cy.get('tbody tr') + .should('have.length', 2) + .invoke('text') + .should('equal', 'helloworld') + .setProps({ + search: 'hello', + }) + .get('tbody tr') + .should('have.length', 1) + .invoke('text') + .should('equal', 'hello') + }) + + it('should not emit click:row event when clicking select or expand', () => { + const onClick = cy.stub() + cy.mount(() => ( + + + + )) + + cy.get('tbody tr') + .eq(2) + .find('.v-checkbox-btn') + .click() + + cy.get('tbody tr') + .eq(3) + .find('.v-btn') + .click() + .then(() => { + expect(onClick).not.to.be.called + }) + + cy.get('tbody tr') + .eq(1) + .click() + .then(() => { + expect(onClick).to.be.calledOnce + }) + }) + + it('should show no-data-text if there are no items', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-data-table tbody tr').should('have.text', 'No data available') + }) + + // https://github.com/vuetifyjs/vuetify/issues/17226 + it('should change page if we are trying to display a page beyond current page count', () => { + const items = ref(DESSERT_ITEMS.slice()) + cy.mount(() => ( + + + + )) + + cy.get('[aria-label="Next page"]') + .click() + .then(() => { + items.value = DESSERT_ITEMS.slice(0, 5) + }) + .emitted(VDataTable, 'update:page') + .should('deep.equal', [[2], [1]]) + }) + + // https://github.com/vuetifyjs/vuetify/issues/19069 + it('should update the select all checkbox when changing the select-strategy', () => { + const strategy = ref('single') + cy.mount(() => ( + + + + )).get('thead .v-selection-control').should('not.exist') + .then(() => strategy.value = 'all') + .get('thead .v-selection-control').should('exist') + .then(() => strategy.value = 'page') + .get('thead .v-selection-control').should('exist') + }) + + describe('slots', () => { + it('should have top slot', () => { + cy.mount(() => ( + + + {{ + top: _ =>
    TOP
    , + }} +     +     + )) + + cy.get('.v-data-table').find('#top').should('have.text', 'TOP') + }) + + it('should have bottom slot (and should overwrite footer)', () => { + cy.mount(() => ( + + + {{ + bottom: _ =>
    BOTTOM
    , + }} +     +     + )) + + cy.get('.v-data-table').find('#bottom').should('have.text', 'BOTTOM') + cy.get('.v-data-table-footer').should('not.exist') + }) + + it('should have headers slot (and overwrite default headers)', () => { + cy.mount(() => ( + + + {{ + headers: _ =>
    headers
    , + }} +     +     + )) + + cy.get('.v-data-table').find('#headers').should('have.text', 'headers') + cy.get('.v-data-table__th').should('not.exist') + }) + + it('should have colgroup slot', () => { + cy.mount(() => ( + + + {{ + colgroup: ({ columns }) => ( + + { columns.map(column => ( + + ))} + + ), + }} + + + )) + + cy.get('colgroup').should('exist') + }) + + it('should have header.* slots', () => { + cy.mount(() => ( + + + {{ + 'header.data-table-expand': () =>

    expand

    , + 'header.data-table-select': () =>

    select

    , + 'header.name': ({ column }) => ( +

    { column.title }

    + ), + }} +     +     + )) + + cy.get('.v-data-table__th').find('h1').should('exist') + cy.get('.v-data-table__th').find('h2').should('exist') + cy.get('.v-data-table__th').find('h3').should('exist') + }) + + it('should have item slot', () => { + cy.mount(() => ( + + + {{ + item: ({ columns, internalItem }) => ( + + { columns.map(column => ( + column.key != null ? ( + +

    { internalItem.columns[column.key] }

    + + ) : null + ))} + + ), + }} +     +     + )) + + cy.get('.custom-row').should('have.length', 10) + }) + + it('should have item.* slots', () => { + cy.mount(() => ( + + + {{ + 'item.data-table-expand': () =>

    expand

    , + 'item.data-table-select': () =>

    select

    , + 'item.name': ({ value }) => ( +

    { value }

    + ), + }} +     +     + )) + + cy.get('.v-data-table').find('h1').should('exist') + cy.get('.v-data-table').find('h2').should('exist') + cy.get('.v-data-table').find('h3').should('exist') + }) + }) + + describe('sort', () => { + it('should sort by sortBy', () => { + cy.mount(() => ( + + + + )) + cy.get('thead .v-data-table__td').eq(2).should('have.class', 'v-data-table__th--sorted') + .get('tbody td:nth-child(3)').then(rows => { + const actualFat = Array.from(rows).map(row => { + return Number(row.textContent) + }) + const expectedFat = DESSERT_ITEMS.map(d => d.fat).sort((a, b) => a - b) + expect(actualFat).to.deep.equal(expectedFat) + }) + cy.get('thead .v-data-table__td').eq(2).click() + .get('thead .v-data-table__td').eq(2).should('have.class', 'v-data-table__th--sorted') + .get('tbody td:nth-child(3)').then(rows => { + const actualFat = Array.from(rows).map(row => { + return Number(row.textContent) + }) + const expectedFat = DESSERT_ITEMS.map(d => d.fat).sort((a, b) => b - a) + expect(actualFat).to.deep.equal(expectedFat) + }) + }) + + it('should sort by groupBy and sortBy', () => { + cy.mount(() => ( + + + + )).get('tr.v-data-table-group-header-row .v-data-table__td button + span').then(rows => { + const actualGroup = Array.from(rows).map(row => { + return Number(row.textContent) + }) + const expectedGroup = [...new Set(DESSERT_ITEMS.map(d => d.group))].sort((a, b) => b - a) + expect(actualGroup).to.deep.equal(expectedGroup) + }).get('.v-data-table-group-header-row button').eq(0).click() + .get('.v-data-table__tr td:nth-child(3)').then(rows => { + const actualCalories = Array.from(rows).map(row => { + return Number(row.textContent) + }) + const expectedCalories = DESSERT_ITEMS.filter(d => d.group === 3).map(d => d.calories).sort((a, b) => b - a) + expect(actualCalories).to.deep.equal(expectedCalories) + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/20046 + it('should sort by groupBy while sort is disabled', () => { + cy.mount(() => ( + + + + )).get('tr.v-data-table-group-header-row .v-data-table__td button + span').then(rows => { + const actualGroup = Array.from(rows).map(row => { + return Number(row.textContent) + }) + const expectedGroup = [...new Set(DESSERT_ITEMS.map(d => d.group))].sort((a, b) => b - a) + expect(actualGroup).to.deep.equal(expectedGroup) + }).get('.v-data-table-group-header-row button').eq(0).click() + .get('.v-data-table__tr td:nth-child(3)').then(rows => { + const actualCalories = Array.from(rows).map(row => { + return Number(row.textContent) + }) + const expectedCalories = DESSERT_ITEMS.filter(d => d.group === 3).map(d => d.calories) + expect(actualCalories).to.deep.equal(expectedCalories) + }) + }) + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts new file mode 100644 index 0000000..0e2851a --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts @@ -0,0 +1,1110 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDataTable from '../VDataTable' +import { + mount, + Wrapper, + MountOptions, +} from '@vue/test-utils' +// import { Breakpoint } from '../../../services/breakpoint' +// import ripple from '../../../directives/ripple/index' +// import Vue from 'vue' +// import { Lang } from '../../../services/lang' +// import { preset } from '../../../presets/default' +// import { resizeWindow } from '../../../../test' + +// Vue.prototype.$vuetify = { +// icons: {}, +// rtl: false, +// lang: new Lang(preset), +// } +// Vue.directive('ripple', ripple) + +const testHeaders = [ + { + text: 'Dessert (100g serving)', + align: 'left', + sortable: false, + value: 'name', + }, + { text: 'Calories', value: 'calories' }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, +] + +const testItems = [ + { + name: 'Frozen Yogurt', + calories: 159, + fat: 6.0, + carbs: 24, + protein: 4.0, + iron: '1%', + class: 'test', + }, + { + name: 'Ice cream sandwich', + calories: 237, + fat: 9.0, + carbs: 37, + protein: 4.3, + iron: '1%', + class: ['test', 'second'], + }, + { + name: 'Eclair', + calories: 262, + fat: 16.0, + carbs: 23, + protein: 6.0, + iron: '7%', + class: { test: true, second: false }, + }, + { + name: 'Cupcake', + calories: 305, + fat: 3.7, + carbs: 67, + protein: 4.3, + iron: '8%', + }, + { + name: 'Gingerbread', + calories: 356, + fat: 16.0, + carbs: 49, + protein: 3.9, + iron: '16%', + }, + { + name: 'Jelly bean', + calories: 375, + fat: 0.0, + carbs: 94, + protein: 0.0, + iron: '0%', + }, + { + name: 'Lollipop', + calories: 392, + fat: 0.2, + carbs: 98, + protein: 0, + iron: '2%', + }, + { + name: 'Honeycomb', + calories: 408, + fat: 3.2, + carbs: 87, + protein: 6.5, + iron: '45%', + }, + { + name: 'Donut', + calories: 452, + fat: 25.0, + carbs: 51, + protein: 4.9, + iron: '22%', + }, + { + name: 'KitKat', + calories: 518, + fat: 26.0, + carbs: 65, + protein: 7, + iron: '6%', + }, +] + +/* eslint-disable max-statements */ +describe.skip('VDataTable.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + document.body.setAttribute('data-app', 'true') + + mountFunction = (options?: MountOptions) => { + return mount(VDataTable, { + mocks: { + $vuetify: { + breakpoint: new Breakpoint(preset), + lang: new Lang(preset), + theme: { + dark: false, + }, + }, + }, + sync: false, + ...options, + }) + } + + return resizeWindow(0) + }) + + it('should render', () => { + const wrapper = mountFunction() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with data', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with body slot', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + }, + scopedSlots: { + body (props) { + return this.$createElement('div', [props.items.length]) + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with foot slot', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + }, + scopedSlots: { + foot (props) { + return this.$createElement('tfoot', [props.items.length]) + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it.skip('should render virtual table', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + virtualRows: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with showExpand', async () => { + const expand = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + itemKey: 'name', + items: testItems, + itemsPerPage: 5, + showExpand: true, + }, + listeners: { + 'update:expanded': expand, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + const expandIcon = wrapper.findAll('.v-data-table__expand-icon').at(0) + expandIcon.trigger('click') + + await wrapper.vm.$nextTick() + expect(expand).toHaveBeenCalledWith(testItems.slice(0, 1)) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with showSelect', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + showSelect: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with item.expanded scoped slot', async () => { + const vm = new Vue() + + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + expanded: testItems, + }, + scopedSlots: { + 'expanded-item': props => vm.$createElement('div', ['expanded']), + }, + }) + + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with group.summary scoped slot', () => { + const vm = new Vue() + + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + groupBy: 'calories', + }, + scopedSlots: { + 'group.summary': props => vm.$createElement('div', ['summary']), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with item scoped slot', () => { + const vm = new Vue() + + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + }, + scopedSlots: { + item: props => vm.$createElement('div', [JSON.stringify(props)]), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with grouped rows', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + groupBy: ['protein'], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with group scoped slot', () => { + const vm = new Vue() + + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + groupBy: ['protein'], + }, + scopedSlots: { + group: props => vm.$createElement('div', [JSON.stringify(props)]), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render loading state', () => { + const wrapper = mountFunction({ + propsData: { + loading: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + const wrapper2 = mountFunction({ + propsData: { + headers: testHeaders, + loading: true, + }, + slots: { + progress: '
    50%
    ', + }, + }) + + expect(wrapper2.html()).toMatchSnapshot() + }) + + it.each([ + 'click', + 'contextmenu', + 'dblclick', + ])('should emit event when %sing on internally created row', async event => { + const eventToEmit = event + ':row' + const fn = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + }, + listeners: { + [eventToEmit]: fn, + }, + }) + + wrapper.find('tbody tr').trigger(event) + await wrapper.vm.$nextTick() + + expect(fn).toHaveBeenCalled() + }) + + // https://github.com/vuetifyjs/vuetify/issues/8254 + it('should pass kebab-case footer props correctly', () => { + const wrapper = mountFunction({ + propsData: { + headers: [], + items: [], + footerProps: { + 'items-per-page-text': 'Foo:', + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/8266 + it('should use options prop for initial values', () => { + const fn = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + options: { + page: 2, + itemsPerPage: 5, + }, + }, + listeners: { + 'update:options': fn, + }, + }) + + expect(fn).toHaveBeenCalledWith(expect.objectContaining({ + page: 2, + })) + }) + + it('should render footer.prepend slot content', () => { + const wrapper = mountFunction({ + propsData: { + headers: [], + items: [{}], + }, + scopedSlots: { + 'footer.prepend' () { + return this.$createElement('div', ['footer.prepend slot content']) + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render footer.page-text slot content', () => { + const wrapper = mountFunction({ + propsData: { + headers: [], + items: [{}], + }, + scopedSlots: { + 'footer.page-text' ({ pageStart, pageStop }) { + return this.$createElement('div', [`foo ${pageStart} bar ${pageStop}`]) + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/8359 + it('should not limit page to current item count when using server-items-length', async () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: [], + page: 2, + itemsPerPage: 5, + serverItemsLength: 0, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ + items: testItems.slice(5), + serverItemsLength: 20, + }) + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should not search column with filterable set to false', async () => { + const wrapper = mountFunction({ + propsData: { + items: testItems, + headers: [ + { + text: 'Dessert (100g serving)', + align: 'left', + filterable: false, + value: 'name', + }, + { text: 'Calories', value: 'calories' }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, + ], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ + search: 'cup', + }) + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should not search column with filterable set to false and has filter function', async () => { + const wrapper = mountFunction({ + propsData: { + items: testItems, + headers: [ + { + text: 'Dessert (100g serving)', + align: 'left', + value: 'name', + }, + { text: 'Calories', value: 'calories', filter: v => v > 400 }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, + ], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ + headers: [ + { + text: 'Dessert (100g serving)', + align: 'left', + value: 'name', + }, + { text: 'Calories', value: 'calories', filter: v => v > 400, filterable: false }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, + ], + }) + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/8359 + it('should limit page to current page count if not using server-items-length', async () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + page: 3, + itemsPerPage: 5, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/8184 + it('should default to first option in itemsPerPageOptions if it does not include itemsPerPage', async () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + footerProps: { + itemsPerPageOptions: [6, 7], + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/8817 + it('should handle object when checking if it should default to first option in itemsPerPageOptions', async () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: -1, + footerProps: { + itemsPerPageOptions: [6, { text: 'All', value: -1 }], + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/9599 + it('should not immediately emit items-per-page', async () => { + const itemsPerPage = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + footerProps: { + itemsPerPageOptions: [6, 7], + }, + }, + listeners: { + 'update:itemsPerPage': itemsPerPage, + }, + }) + + expect(itemsPerPage).not.toHaveBeenCalled() + }) + + // https://github.com/vuetifyjs/vuetify/issues/9010 + it('should change page if item count decreases below page start', async () => { + const page = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems.slice(0, 4), + itemsPerPage: 2, + footerProps: { + itemsPerPageOptions: [2], + }, + page: 2, + }, + listeners: { + 'update:page': page, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ items: testItems.slice(0, 2) }) + await wrapper.vm.$nextTick() + + expect(page).toHaveBeenCalledWith(1) + }) + + // https://github.com/vuetifyjs/vuetify/issues/8477 + it('should emit two item-selected events when using single-select prop and selecting new item', async () => { + const itemSelected = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + itemKey: 'name', + items: testItems.slice(0, 2), + value: [testItems[0]], + showSelect: true, + singleSelect: true, + }, + listeners: { + 'item-selected': itemSelected, + }, + }) + + const checkbox = wrapper.findAll('.v-data-table__checkbox').at(1) + checkbox.trigger('click') + await wrapper.vm.$nextTick() + + expect(itemSelected).toHaveBeenCalledTimes(2) + expect(itemSelected).toHaveBeenCalledWith({ item: testItems[0], value: false }) + expect(itemSelected).toHaveBeenCalledWith({ item: testItems[1], value: true }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/8915 + it('should not select item that is not selectable', async () => { + const items = [ + { ...testItems[0], isSelectable: false }, + { ...testItems[1] }, + ] + const input = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items, + showSelect: true, + }, + listeners: { + input, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + const selectAll = wrapper.findAll('.v-simple-checkbox').at(0) + selectAll.trigger('click') + await wrapper.vm.$nextTick() + + expect(input).toHaveBeenNthCalledWith(1, [testItems[1]]) + + const single = wrapper.findAll('.v-simple-checkbox').at(1) + single.trigger('click') + await wrapper.vm.$nextTick() + + expect(input.mock.calls).toHaveLength(1) + }) + + // https://github.com/vuetifyjs/vuetify/issues/8915 + it('should toggle all selectable items', async () => { + const items = [ + { ...testItems[0], isSelectable: false }, + { ...testItems[1] }, + ] + const input = jest.fn() + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items, + showSelect: true, + }, + listeners: { + input, + }, + }) + + const selectAll = wrapper.findAll('.v-simple-checkbox').at(0) + selectAll.trigger('click') + await wrapper.vm.$nextTick() + + expect(input).toHaveBeenNthCalledWith(1, [testItems[1]]) + + selectAll.trigger('click') + await wrapper.vm.$nextTick() + + expect(input).toHaveBeenNthCalledWith(2, []) + }) + + // https://github.com/vuetifyjs/vuetify/issues/10392 + it('should search group-by column', async () => { + const headers = [ + { + text: 'Name', + value: 'name', + }, + { + text: 'ID', + value: 'id', + }, + ] + + const items = [ + { + name: 'Assistance', + id: 1, + }, + { + name: 'Candidat', + id: 2, + }, + ] + + const wrapper = mountFunction({ + propsData: { + headers, + items, + itemKey: 'id', + groupBy: 'name', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ search: 'candidat' }) + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/10289 + it('should render item slot when using group-by function', async () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + itemKey: 'name', + items: testItems.slice(0, 2), + groupBy: 'name', + }, + scopedSlots: { + item () { + return this.$createElement('div', ['scoped']) + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/10392 + it('should emit pagination event when filtering', async () => { + const headers = [ + { + text: 'Name', + value: 'name', + }, + { + text: 'ID', + value: 'id', + }, + ] + + const items = [ + { + name: 'Assistance', + id: 1, + }, + { + name: 'Candidat', + id: 2, + }, + ] + + const pagination = jest.fn() + + const wrapper = mountFunction({ + propsData: { + headers, + items, + itemKey: 'id', + }, + listeners: { + pagination, + }, + }) + + expect(pagination).toHaveBeenLastCalledWith({ + itemsLength: 2, + itemsPerPage: 10, + page: 1, + pageCount: 1, + pageStart: 0, + pageStop: 2, + }) + + wrapper.setProps({ search: 'candidat' }) + await wrapper.vm.$nextTick() + + expect(pagination).toHaveBeenLastCalledWith({ + itemsLength: 1, + itemsPerPage: 10, + page: 1, + pageCount: 1, + pageStart: 0, + pageStop: 1, + }) + + expect(pagination).toHaveBeenCalledTimes(2) + }) + + // https://github.com/vuetifyjs/vuetify/issues/10715 + // NOTE: This test currently succeeds regardless of fix + // It seems like the test environment does not double + // fire the events in the same way the browser does + it('should not emit too many pagination events', async () => { + const headers = [ + { + text: 'Name', + value: 'name', + }, + { + text: 'ID', + value: 'id', + }, + ] + + const items = [ + { + name: 'Assistance', + id: 1, + }, + { + name: 'Candidat', + id: 2, + }, + ] + + const wrapper = mountFunction({ + propsData: { + headers, + itemKey: 'id', + serverItemsLength: 0, + }, + }) + + wrapper.setProps({ items, serverItemsLength: items.length }) + await wrapper.vm.$nextTick() + + expect(wrapper.emitted().pagination).toHaveLength(2) + }) + + // https://github.com/vuetifyjs/vuetify/issues/4975 + it('should show correct aria-labels when sorting', async () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + itemKey: 'name', + items: testItems.slice(0, 5), + sortBy: 'calories', + }, + }) + + wrapper.setProps({ sortDesc: true }) + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ mustSort: true }) + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should apply class list to rows', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + itemClass: () => ['my-class', 'my-other-class'], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should apply class unique to rows', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + itemClass: () => 'my-unique-class', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should apply class function to rows', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + itemClass: (item: Object) => ({ + 'first-class': item.fat < 10, + 'second-class': item.protein > 4.0, + }), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should apply class from item to rows', () => { + const wrapper = mountFunction({ + propsData: { + headers: testHeaders, + items: testItems, + itemsPerPage: 5, + itemClass: 'class', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + // https://github.com/vuetifyjs/vuetify/issues/11179 + it('should return rows from columns that exclusively match custom filters', async () => { + const wrapper = mountFunction({ + propsData: { + items: testItems, + headers: [ + { text: 'Dessert (100g serving)', align: 'left', value: 'name' }, + { text: 'Calories', value: 'calories', filter: value => value === 159 }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, + ], + }, + }) + + await wrapper.vm.$nextTick() + expect(wrapper.vm.internalCurrentItems).toHaveLength(1) + }) + + // https://github.com/vuetifyjs/vuetify/issues/10244 + it('should respect mustSort property on options', async () => { + const wrapper = mountFunction({ + propsData: { + items: testItems, + headers: [ + { text: 'Dessert (100g serving)', value: 'name' }, + ], + options: { + mustSort: true, + }, + }, + }) + + wrapper.find('th').trigger('click') + await wrapper.vm.$nextTick() + + wrapper.find('th').trigger('click') + await wrapper.vm.$nextTick() + + wrapper.find('th').trigger('click') + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should hide group button when column is not groupable', async () => { + const wrapper = mountFunction({ + propsData: { + showGroupBy: true, + items: testItems, + headers: [ + { + text: 'Dessert (100g serving)', + align: 'left', + value: 'name', + groupable: false, + }, + { text: 'Calories', value: 'calories' }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, + ], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should return rows matching search term if specified', async () => { + const wrapper = mountFunction({ + propsData: { + items: testItems, + headers: [ + { text: 'Dessert (100g serving)', align: 'left', value: 'name' }, + { text: 'Calories', value: 'calories' }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, + ], + }, + }) + + wrapper.setProps({ search: 'unknown-term' }) + await wrapper.vm.$nextTick() + expect(wrapper.vm.internalCurrentItems).toHaveLength(0) + + wrapper.setProps({ search: 'Eclair' }) + await wrapper.vm.$nextTick() + expect(wrapper.vm.internalCurrentItems).toHaveLength(1) + }) + + it('should return results which match both search term and column filters if both specified', async () => { + const wrapper = mountFunction({ + propsData: { + items: testItems, + headers: [ + { text: 'Dessert (100g serving)', align: 'left', value: 'name' }, + { text: 'Calories', value: 'calories', filter: value => value < 300 }, + { text: 'Fat (g)', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, + ], + }, + }) + + wrapper.setProps({ search: 'EA' }) + await wrapper.vm.$nextTick() + expect(wrapper.vm.internalCurrentItems).toHaveLength(1) + }) + + // https://github.com/vuetifyjs/vuetify/issues/14006 + it('should allow selection on second page when using numbers as item key', async () => { + const input = jest.fn() + const items = testItems.map((item, index) => ({ ...item, name: index + 1 })).slice(0, 8) + const wrapper = mountFunction({ + propsData: { + items, + itemKey: 'name', + itemsPerPage: 5, + showSelect: true, + headers: testHeaders, + mobileBreakpoint: 0, + }, + listeners: { + input, + }, + }) + + let checkbox = wrapper.findAll('td > .v-data-table__checkbox').at(4) + + checkbox.trigger('click') + await wrapper.vm.$nextTick() + + wrapper.setProps({ page: 2 }) + await wrapper.vm.$nextTick() + + checkbox = wrapper.findAll('td > .v-data-table__checkbox').at(0) + + checkbox.trigger('click') + await wrapper.vm.$nextTick() + + expect(input).toHaveBeenCalledWith([items[4], items[5]]) + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts new file mode 100644 index 0000000..c8603c4 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts @@ -0,0 +1,164 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDataTableHeader from '../VDataTableHeader' +// import { Lang } from '../../../services/lang' +// import ripple from '../../../directives/ripple' +// import VSelect from '../../VSelect/VSelect' +// import { preset } from '../../../presets/default' + +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' +// import Vue from 'vue' + +const testHeaders = [ + { + text: 'Dessert (100g serving)', + align: 'left', + sortable: false, + value: 'name', + }, + { text: 'Calories', width: 50, value: 'calories' }, + { text: 'Fat (g)', width: '50em', value: 'fat' }, + { text: 'Carbs (g)', value: 'carbs' }, + { text: 'Protein (g)', value: 'protein' }, + { text: 'Iron (%)', value: 'iron' }, +] + +// Vue.prototype.$vuetify = { +// icons: {}, +// rtl: false, +// lang: new Lang(preset), +// theme: { +// dark: false, +// }, +// } +// Vue.directive('ripple', ripple) + +describe.skip('VDataTableHeader.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions, isMobile?: boolean) => Wrapper + + ;[false, true].forEach(isMobile => { + describe(isMobile ? 'mobile' : 'desktop', () => { // eslint-disable-line jest/valid-title + beforeEach(() => { + document.body.setAttribute('data-app', 'true') + + mountFunction = (options?: MountOptions) => { + return mount(VDataTableHeader, { + ...options, + // https://github.com/vuejs/vue-test-utils/issues/1130 + sync: false, + propsData: { + headers: testHeaders, + mobile: isMobile, + ...(options || {}).propsData, + }, + }) + } + }) + + it('should render', () => { + const wrapper = mountFunction() + + expect(wrapper.html()).toMatchSnapshot() + }) + it('should work with showGroupBy', () => { + const wrapper = mountFunction({ + propsData: { + showGroupBy: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should work with multiSort', () => { + const wrapper = mountFunction({ + propsData: { + options: { + multiSort: true, + sortBy: ['iron'], + sortDesc: [true], + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should work with sortBy correctly', () => { + const wrapper = mountFunction({ + propsData: { + options: { + sortBy: ['iron'], + sortDesc: [true], + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should work with sortDesc correctly', () => { + const wrapper = mountFunction({ + propsData: { + options: { + sortBy: ['iron', 'carbs'], + sortDesc: [false, true], + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + if (isMobile) { + it('should render with data-table-select header', () => { + const wrapper = mountFunction({ + propsData: { + headers: [...testHeaders, { text: 'test', value: 'data-table-select' }], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should sort when select changes', () => { + const sort = jest.fn() + const wrapper = mountFunction({ + listeners: { + sort, + }, + }) + const select = wrapper.find(VSelect) + + select.vm.$emit('change', 'test') + expect(sort).toHaveBeenLastCalledWith('test') + }) + + it('should apply header class and width for select-all column', () => { + const wrapper = mount(VDataTableHeader, { + propsData: { + mobile: isMobile, + headers: [ + { + value: 'data-table-select', + width: '100px', + class: 'foo', + }, + ], + }, + }) + + const foo = wrapper.find('.foo') + expect(foo.exists()).toBe(true) + expect(foo.attributes().width).toBe('100px') + }) + } + }) + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableServer.spec.cy.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableServer.spec.cy.tsx new file mode 100644 index 0000000..807a53a --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableServer.spec.cy.tsx @@ -0,0 +1,295 @@ +/// + +import { Application } from '../../../../cypress/templates' + +// Utilities +import { ref } from 'vue' +import { VDataTableServer } from '..' + +const DESSERT_HEADERS = [ + { title: 'Dessert (100g serving)', key: 'name' }, + { title: 'Calories', key: 'calories' }, + { title: 'Fat (g)', key: 'fat' }, + { title: 'Carbs (g)', key: 'carbs' }, + { title: 'Protein (g)', key: 'protein' }, + { title: 'Iron (%)', key: 'iron' }, +] + +const DESSERT_ITEMS = [ + { + name: 'Frozen Yogurt', + calories: 159, + fat: 6.0, + carbs: 24, + protein: 4.0, + iron: '1%', + }, + { + name: 'Ice cream sandwich', + calories: 237, + fat: 9.0, + carbs: 37, + protein: 4.3, + iron: '1%', + }, + { + name: 'Eclair', + calories: 262, + fat: 16.0, + carbs: 23, + protein: 6.0, + iron: '7%', + }, + { + name: 'Cupcake', + calories: 305, + fat: 3.7, + carbs: 67, + protein: 4.3, + iron: '8%', + }, + { + name: 'Gingerbread', + calories: 356, + fat: 16.0, + carbs: 49, + protein: 3.9, + iron: '16%', + }, + { + name: 'Jelly bean', + calories: 375, + fat: 0.0, + carbs: 94, + protein: 0.0, + iron: '0%', + }, + { + name: 'Lollipop', + calories: 392, + fat: 0.2, + carbs: 98, + protein: 0, + iron: '2%', + }, + { + name: 'Honeycomb', + calories: 408, + fat: 3.2, + carbs: 87, + protein: 6.5, + iron: '45%', + }, + { + name: 'Donut', + calories: 452, + fat: 25.0, + carbs: 51, + protein: 4.9, + iron: '22%', + }, + { + name: 'KitKat', + calories: 518, + fat: 26.0, + carbs: 65, + protein: 7, + iron: '6%', + }, +] + +describe('VDataTableServer', () => { + it('should render table', () => { + const itemsLength = 2 + + cy.mount(() => ( + + )) + + cy.get('.v-data-table thead th').should('have.length', DESSERT_HEADERS.length) + cy.get('.v-data-table tbody tr').should('have.length', itemsLength) + }) + + it('should only trigger update event once on mount', () => { + const items = ref([]) + const options = ref({ + itemsLength: 0, + page: 1, + itemsPerPage: 2, + }) + + function load (opts: { page: number, itemsPerPage: number }) { + setTimeout(() => { + const start = (opts.page - 1) * opts.itemsPerPage + const end = start + opts.itemsPerPage + items.value = DESSERT_ITEMS.slice(start, end) + options.value = { + ...options.value, + ...opts, + } + }, 10) + } + + cy.mount(() => ( + + )) + + cy.get('.v-data-table tbody tr') + .emitted(VDataTableServer, 'update:options') + .should('have.length', 1) + }) + + it('should only trigger update event once when changing itemsPerPage', () => { + const items = ref([]) + const options = ref({ + itemsLength: DESSERT_ITEMS.length, + page: 1, + itemsPerPage: 2, + }) + + // eslint-disable-next-line sonarjs/no-identical-functions + function load (opts: { page: number, itemsPerPage: number }) { + setTimeout(() => { + const start = (opts.page - 1) * opts.itemsPerPage + const end = start + opts.itemsPerPage + items.value = DESSERT_ITEMS.slice(start, end) + options.value = { + ...options.value, + ...opts, + } + }, 10) + } + + cy.mount(() => ( + + + + )) + + cy.get('.v-btn[aria-label="Next page"]') + .click() + cy.get('.v-select') + .click() + cy.get('.v-list-item') + .eq(0) + .click() + cy.emitted(VDataTableServer, 'update:options') + .should('deep.equal', [ + [{ page: 1, itemsPerPage: 2, sortBy: [], groupBy: [], search: undefined }], + [{ page: 2, itemsPerPage: 2, sortBy: [], groupBy: [], search: undefined }], + [{ page: 1, itemsPerPage: 10, sortBy: [], groupBy: [], search: undefined }], + ]) + }) + + it('should only trigger update event once when changing sort', () => { + const items = ref([]) + const options = ref({ + itemsLength: DESSERT_ITEMS.length, + page: 1, + itemsPerPage: 2, + }) + + // eslint-disable-next-line sonarjs/no-identical-functions + function load (opts: { page: number, itemsPerPage: number }) { + setTimeout(() => { + const start = (opts.page - 1) * opts.itemsPerPage + const end = start + opts.itemsPerPage + items.value = DESSERT_ITEMS.slice(start, end) + options.value = { + ...options.value, + ...opts, + } + }, 10) + } + + cy.mount(() => ( + + + + )) + + cy.get('.v-btn[aria-label="Next page"]') + .click() + cy.get('th') + .eq(0) + .click() + cy.emitted(VDataTableServer, 'update:options') + .should('deep.equal', [ + [{ page: 1, itemsPerPage: 2, sortBy: [], groupBy: [], search: undefined }], + [{ page: 2, itemsPerPage: 2, sortBy: [], groupBy: [], search: undefined }], + [{ page: 1, itemsPerPage: 2, sortBy: [{ key: 'name', order: 'asc' }], groupBy: [], search: undefined }], + ]) + }) + + it('should only trigger update event once when search changes', () => { + const items = ref([]) + const options = ref({ + itemsLength: DESSERT_ITEMS.length, + page: 1, + itemsPerPage: 2, + search: '', + }) + + // eslint-disable-next-line sonarjs/no-identical-functions + function load (opts: { page: number, itemsPerPage: number, search: string }) { + setTimeout(() => { + const start = (opts.page - 1) * opts.itemsPerPage + const end = start + opts.itemsPerPage + items.value = DESSERT_ITEMS + .filter(item => !opts.search || item.name.toLowerCase().includes(opts.search.toLowerCase())) + .slice(start, end) + options.value = { + ...options.value, + ...opts, + } + }, 10) + } + + cy.mount(() => ( + + + + )) + + cy + .get('.v-btn[aria-label="Next page"]') + .click() + + cy.then(() => { + options.value = { + ...options.value, + search: 'frozen', + } + }) + .emitted(VDataTableServer, 'update:options') + .should('deep.equal', [ + [{ page: 1, itemsPerPage: 2, sortBy: [], groupBy: [], search: '' }], + [{ page: 2, itemsPerPage: 2, sortBy: [], groupBy: [], search: '' }], + [{ page: 1, itemsPerPage: 2, sortBy: [], groupBy: [], search: 'frozen' }], + ]) + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.cy.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.cy.tsx new file mode 100644 index 0000000..cd62cae --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.cy.tsx @@ -0,0 +1,121 @@ +/// + +import { Application } from '../../../../cypress/templates' +import { VDataTableVirtual } from '..' + +const DESSERT_HEADERS = [ + { title: 'Dessert (100g serving)', key: 'name' }, + { title: 'Calories', key: 'calories' }, + { title: 'Fat (g)', key: 'fat' }, + { title: 'Carbs (g)', key: 'carbs' }, + { title: 'Protein (g)', key: 'protein' }, + { title: 'Iron (%)', key: 'iron' }, +] + +const DESSERT_ITEMS = [ + { + name: 'Frozen Yogurt', + calories: 159, + fat: 6.0, + carbs: 24, + protein: 4.0, + iron: '1%', + }, + { + name: 'Ice cream sandwich', + calories: 237, + fat: 9.0, + carbs: 37, + protein: 4.3, + iron: '1%', + }, + { + name: 'Eclair', + calories: 262, + fat: 16.0, + carbs: 23, + protein: 6.0, + iron: '7%', + }, + { + name: 'Cupcake', + calories: 305, + fat: 3.7, + carbs: 67, + protein: 4.3, + iron: '8%', + }, + { + name: 'Gingerbread', + calories: 356, + fat: 16.0, + carbs: 49, + protein: 3.9, + iron: '16%', + }, + { + name: 'Jelly bean', + calories: 375, + fat: 0.0, + carbs: 94, + protein: 0.0, + iron: '0%', + }, + { + name: 'Lollipop', + calories: 392, + fat: 0.2, + carbs: 98, + protein: 0, + iron: '2%', + }, + { + name: 'Honeycomb', + calories: 408, + fat: 3.2, + carbs: 87, + protein: 6.5, + iron: '45%', + }, + { + name: 'Donut', + calories: 452, + fat: 25.0, + carbs: 51, + protein: 4.9, + iron: '22%', + }, + { + name: 'KitKat', + calories: 518, + fat: 26.0, + carbs: 65, + protein: 7, + iron: '6%', + }, +] + +describe('VDataTable', () => { + it('should render only visible items', () => { + const items = [...new Array(10)].reduce(curr => { + curr.push(...DESSERT_ITEMS) + return curr + }, []) + cy.mount(() => ( + + + + )) + + cy.get('tbody tr') + .should('have.length.lt', items.length) + .get('tbody tr') + .last() + .should('have.css', 'height') + .and('not.equal', '0px') + .get('tbody tr') + .first() + .should('have.css', 'height') + .and('equal', '0px') + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VEditDialog.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VEditDialog.spec.ts new file mode 100644 index 0000000..e3dddbf --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VEditDialog.spec.ts @@ -0,0 +1,222 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VEditDialog from '../VEditDialog' +// import VMenu from '../../VMenu' + +import { + mount, + Wrapper, + MountOptions, +} from '@vue/test-utils' +// import { keyCodes } from '../../../util/helpers' +// import mixins from '../../../util/mixins' + +describe.skip('VEditDialog.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + document.body.setAttribute('data-app', 'true') + + mountFunction = (options?: MountOptions) => { + return mount(VEditDialog, { + // https://github.com/vuejs/vue-test-utils/issues/1130 + sync: false, + mocks: { + $vuetify: { + theme: { + dark: false, + }, + }, + }, + ...options, + }) + } + }) + + it('should render', () => { + const wrapper = mountFunction() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render custom button texts', () => { + const wrapper = mountFunction({ + propsData: { + cancelText: `I don't want to modify that!`, + saveText: 'Save it!', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should open and close', async () => { + jest.useFakeTimers() + + const open = jest.fn() + const close = jest.fn() + + const wrapper = mountFunction({ + listeners: { + open, + close, + }, + }) + + wrapper.vm.isActive = true + await wrapper.vm.$nextTick() + expect(open).toHaveBeenCalledTimes(1) + expect(setTimeout).toHaveBeenLastCalledWith(wrapper.vm.focus, 50) + + wrapper.vm.isActive = false + await wrapper.vm.$nextTick() + expect(close).toHaveBeenCalledTimes(1) + + jest.useRealTimers() + }) + + it('should react to menu', async () => { + const open = jest.fn() + const close = jest.fn() + + const wrapper = mountFunction({ + listeners: { + open, + close, + }, + }) + + const menu = wrapper.find(VMenu) + + menu.vm.$emit('input', true) + await wrapper.vm.$nextTick() + expect(open).toHaveBeenCalledTimes(1) + + menu.vm.$emit('input', false) + await wrapper.vm.$nextTick() + expect(close).toHaveBeenCalledTimes(1) + }) + + it('should react to input', async () => { + jest.useFakeTimers() + + const parentWrapper = mount({ + template: ` + + + + `, + components: { + 'v-edit-dialog': mixins(VEditDialog).extend({ + render () { + return this.genContent() + }, + }), + }, + data () { + return { + val: '', + } + }, + }) + + const wrapper = parentWrapper.find(VEditDialog) + const field = parentWrapper.find('input.test') + const input = wrapper.vm.$refs.content as HTMLElement + + // Make sure originalValue gets set + wrapper.vm.isActive = true + field.setValue('test') + input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.esc } as KeyboardEventInit)) + expect(wrapper.emitted('cancel')).toBeTruthy() + expect(wrapper.emitted('update:return-value')[0]).toEqual(['']) + expect(wrapper.props('returnValue')).toBe('') + + wrapper.vm.isActive = true + field.setValue('test') + input.dispatchEvent(new KeyboardEvent('keydown', { keyCode: keyCodes.enter } as KeyboardEventInit)) + expect(wrapper.emitted('save')).toBeTruthy() + expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function)) + jest.advanceTimersByTime(0) + expect(wrapper.emitted('update:return-value')[1]).toEqual(['test']) + expect(wrapper.props('returnValue')).toBe('test') + + jest.useRealTimers() + }) + + it('should render button', () => { + const fn = jest.fn() + + const wrapper = mountFunction({ + render () { + return this.genButton(fn, 'test') + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + const btn = wrapper.find('.v-btn') + btn.trigger('click') + expect(fn).toHaveBeenCalledTimes(1) + }) + + it('should focus', () => { + const wrapper = mountFunction({ + render () { + return this.genContent() + }, + slots: { + input: '', + }, + }) + + const input = wrapper.find('input.test') + + expect(document.activeElement).not.toEqual(input.element as HTMLInputElement) + wrapper.vm.focus() + expect(document.activeElement).toEqual(input.element as HTMLInputElement) + }) + + it('should render actions', () => { + const save = jest.fn() + const saveEvent = jest.fn() + + const wrapper = mountFunction({ + methods: { + save, + }, + render () { + return this.genActions() + }, + listeners: { + save: saveEvent, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + const btn = wrapper.find('.v-btn:last-child') + btn.trigger('click') + expect(save).toHaveBeenCalledTimes(1) + expect(saveEvent).toHaveBeenCalledTimes(1) + }) + + it('should cancel', () => { + const cancel = jest.fn() + const wrapper = mountFunction({ + listeners: { + cancel, + }, + data: () => ({ + isActive: true, + }), + }) + + wrapper.vm.cancel() + expect(wrapper.vm.isActive).toBeFalsy() + expect(cancel).toHaveBeenCalledTimes(1) + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VSimpleTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VSimpleTable.spec.ts new file mode 100644 index 0000000..9a6d94d --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VSimpleTable.spec.ts @@ -0,0 +1,123 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VSimpleTable from '../VSimpleTable' +import { + mount, + Wrapper, + MountOptions, +} from '@vue/test-utils' + +describe.skip('VSimpleTable.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VSimpleTable, options) + } + }) + + it('should render', () => { + const wrapper = mountFunction({ + slots: { + default: ` + FooBar + bazqux + `, + }, + }) + + expect(wrapper.findAll('.v-data-table')).toHaveLength(1) + expect(wrapper.findAll('.v-data-table .v-data-table__wrapper')).toHaveLength(1) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with custom wrapper', () => { + const wrapper = mountFunction({ + slots: { + wrapper: ` + + + +
    FooBar
    bazqux
    + `, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with top & bottom slots', () => { + const wrapper = mountFunction({ + slots: { + top: '
    Header
    ', + bottom: '
    Footer
    ', + }, + }) + + expect(wrapper.findAll('.top')).toHaveLength(1) + expect(wrapper.findAll('.bottom')).toHaveLength(1) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render with custom height', () => { + const wrapper = mountFunction({ + slots: { + default: ` + FooBar + bazqux + `, + }, + propsData: { + height: 1000, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should compute classes', () => { + const wrapper = mountFunction() + + wrapper.setProps({ + dense: true, + }) + expect(wrapper.vm.classes).toMatchObject({ + 'v-data-table--dense': true, + }) + wrapper.setProps({ + dark: true, + }) + expect(wrapper.vm.classes).toMatchObject({ + 'theme--dark': true, + 'theme--light': false, + }) + wrapper.setProps({ + fixedHeader: true, + }) + expect(wrapper.vm.classes).toMatchObject({ + 'v-data-table--fixed-header': true, + }) + wrapper.setProps({ + fixedHeader: false, + height: 1000, + }) + expect(wrapper.vm.classes).toMatchObject({ + 'v-data-table--fixed-height': true, + }) + }) + + it('should compute classes with top & bottom slots', () => { + const wrapper = mountFunction({ + slots: { + top: '
    Header
    ', + bottom: '
    Footer
    ', + }, + }) + + expect(wrapper.vm.classes).toMatchObject({ + 'v-data-table--has-top': true, + 'v-data-table--has-bottom': true, + }) + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VVirtualTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VVirtualTable.spec.ts new file mode 100644 index 0000000..dada0db --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/VVirtualTable.spec.ts @@ -0,0 +1,56 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VVirtualTable from '../VVirtualTable' +import { + mount, + Wrapper, + MountOptions, +} from '@vue/test-utils' +// import Vue from 'vue' + +describe.skip('VVirtualTable.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VVirtualTable, options) + } + }) + + it('should render', () => { + const vm = new Vue() + + const wrapper = mountFunction({ + propsData: { + items: ['a', 'b', 'c'], + }, + scopedSlots: { + items: props => vm.$createElement('div', { staticClass: 'test' }, [JSON.stringify(props)]), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should re-render when items change', async () => { + const wrapper = mountFunction({ + propsData: { + items: ['a', 'b', 'c'], + }, + scopedSlots: { + items (props) { + return this.$createElement('div', props.items.map(i => this.$createElement('div', [i]))) + }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ + items: ['d', 'e', 'f'], + }) + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap new file mode 100644 index 0000000..23f88cf --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap @@ -0,0 +1,139 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MobileRow should render non-string values 1`] = ` + + +
    +
    +
    + string +
    + + +
    +
    +
    + 12.34 +
    + + +
    +
    +
    + 1,2 +
    + + +
    +
    +
    + false +
    + + +
    +
    +
    + [object Object] +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +`; + +exports[`MobileRow should render with regular slots 1`] = ` + + +
    + Petrol +
    +
    +

    + $0.68 +

    +
    + + +
    + Diesel +
    +
    +

    + $0.65 +

    +
    + + +`; + +exports[`MobileRow should render with scoped slots 1`] = ` + + +
    + Petrol +
    +
    +

    + 0.68 +

    +
    + + +
    + Diesel +
    +
    +

    + 0.65 +

    +
    + + +`; + +exports[`MobileRow should render without header when hideDefaultHeader: true 1`] = ` + + +
    + 0.68 +
    + + +
    + 0.65 +
    + + +`; + +exports[`MobileRow should render without slots 1`] = ` + + +
    + Petrol +
    +
    + 0.68 +
    + + +
    + Diesel +
    +
    + 0.65 +
    + + +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap new file mode 100644 index 0000000..b6a0cbe --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Table Row should render non-string values 1`] = ` + + + string + + + 12.34 + + + 1,2 + + + false + + + [object Object] + + + + + + +`; + +exports[`Table Row should render with cellClass 1`] = ` + + + 0.68 + + + 0.65 + + +`; + +exports[`Table Row should render without slots 1`] = ` + + + 0.68 + + + 0.65 + + +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap new file mode 100644 index 0000000..2050e02 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Table RowGroup should render with "column.summary" slot 1`] = ` + +
    +
    + +`; + +exports[`Table RowGroup should render with "row.summary" slot 1`] = ` +
    +
    +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap new file mode 100644 index 0000000..edac369 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap @@ -0,0 +1,12780 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDataTable.ts should apply class from item to rows 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should apply class function to rows 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should apply class list to rows 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should apply class unique to rows 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should change page if item count decreases below page start 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    +
    +
    + 3-4 of 4 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should default to first option in itemsPerPageOptions if it does not include itemsPerPage 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-6 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should handle object when checking if it should default to first option in itemsPerPageOptions 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +     		+
    + Calories +
    +
    + 392 +
    +     		+
    + Fat (g) +
    +
    + 0.2 +
    +     		+
    + Carbs (g) +
    +
    + 98 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 2% +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +     		+
    + Calories +
    +
    + 408 +
    +     		+
    + Fat (g) +
    +
    + 3.2 +
    +     		+
    + Carbs (g) +
    +
    + 87 +
    +     		+
    + Protein (g) +
    +
    + 6.5 +
    +     		+
    + Iron (%) +
    +
    + 45% +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +     		+
    + Calories +
    +
    + 452 +
    +     		+
    + Fat (g) +
    +
    + 25 +
    +     		+
    + Carbs (g) +
    +
    + 51 +
    +     		+
    + Protein (g) +
    +
    + 4.9 +
    +     		+
    + Iron (%) +
    +
    + 22% +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +     		+
    + Calories +
    +
    + 518 +
    +     		+
    + Fat (g) +
    +
    + 26 +
    +     		+
    + Carbs (g) +
    +
    + 65 +
    +     		+
    + Protein (g) +
    +
    + 7 +
    +     		+
    + Iron (%) +
    +
    + 6% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-10 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should hide group button when column is not groupable 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +     		+
    + Calories +
    +
    + 392 +
    +     		+
    + Fat (g) +
    +
    + 0.2 +
    +     		+
    + Carbs (g) +
    +
    + 98 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 2% +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +     		+
    + Calories +
    +
    + 408 +
    +     		+
    + Fat (g) +
    +
    + 3.2 +
    +     		+
    + Carbs (g) +
    +
    + 87 +
    +     		+
    + Protein (g) +
    +
    + 6.5 +
    +     		+
    + Iron (%) +
    +
    + 45% +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +     		+
    + Calories +
    +
    + 452 +
    +     		+
    + Fat (g) +
    +
    + 25 +
    +     		+
    + Carbs (g) +
    +
    + 51 +
    +     		+
    + Protein (g) +
    +
    + 4.9 +
    +     		+
    + Iron (%) +
    +
    + 22% +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +     		+
    + Calories +
    +
    + 518 +
    +     		+
    + Fat (g) +
    +
    + 26 +
    +     		+
    + Carbs (g) +
    +
    + 65 +
    +     		+
    + Protein (g) +
    +
    + 7 +
    +     		+
    + Iron (%) +
    +
    + 6% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-10 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should limit page to current page count if not using server-items-length 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +     		+
    + Calories +
    +
    + 392 +
    +     		+
    + Fat (g) +
    +
    + 0.2 +
    +     		+
    + Carbs (g) +
    +
    + 98 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 2% +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +     		+
    + Calories +
    +
    + 408 +
    +     		+
    + Fat (g) +
    +
    + 3.2 +
    +     		+
    + Carbs (g) +
    +
    + 87 +
    +     		+
    + Protein (g) +
    +
    + 6.5 +
    +     		+
    + Iron (%) +
    +
    + 45% +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +     		+
    + Calories +
    +
    + 452 +
    +     		+
    + Fat (g) +
    +
    + 25 +
    +     		+
    + Carbs (g) +
    +
    + 51 +
    +     		+
    + Protein (g) +
    +
    + 4.9 +
    +     		+
    + Iron (%) +
    +
    + 22% +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +     		+
    + Calories +
    +
    + 518 +
    +     		+
    + Fat (g) +
    +
    + 26 +
    +     		+
    + Carbs (g) +
    +
    + 65 +
    +     		+
    + Protein (g) +
    +
    + 7 +
    +     		+
    + Iron (%) +
    +
    + 6% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 6-10 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should not limit page to current item count when using server-items-length 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + No data available +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + – +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should not limit page to current item count when using server-items-length 2`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +     		+
    + Calories +
    +
    + 392 +
    +     		+
    + Fat (g) +
    +
    + 0.2 +
    +     		+
    + Carbs (g) +
    +
    + 98 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 2% +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +     		+
    + Calories +
    +
    + 408 +
    +     		+
    + Fat (g) +
    +
    + 3.2 +
    +     		+
    + Carbs (g) +
    +
    + 87 +
    +     		+
    + Protein (g) +
    +
    + 6.5 +
    +     		+
    + Iron (%) +
    +
    + 45% +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +     		+
    + Calories +
    +
    + 452 +
    +     		+
    + Fat (g) +
    +
    + 25 +
    +     		+
    + Carbs (g) +
    +
    + 51 +
    +     		+
    + Protein (g) +
    +
    + 4.9 +
    +     		+
    + Iron (%) +
    +
    + 22% +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +     		+
    + Calories +
    +
    + 518 +
    +     		+
    + Fat (g) +
    +
    + 26 +
    +     		+
    + Carbs (g) +
    +
    + 65 +
    +     		+
    + Protein (g) +
    +
    + 7 +
    +     		+
    + Iron (%) +
    +
    + 6% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 6-10 of 20 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should not search column with filterable set to false 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +     		+
    + Calories +
    +
    + 392 +
    +     		+
    + Fat (g) +
    +
    + 0.2 +
    +     		+
    + Carbs (g) +
    +
    + 98 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 2% +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +     		+
    + Calories +
    +
    + 408 +
    +     		+
    + Fat (g) +
    +
    + 3.2 +
    +     		+
    + Carbs (g) +
    +
    + 87 +
    +     		+
    + Protein (g) +
    +
    + 6.5 +
    +     		+
    + Iron (%) +
    +
    + 45% +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +     		+
    + Calories +
    +
    + 452 +
    +     		+
    + Fat (g) +
    +
    + 25 +
    +     		+
    + Carbs (g) +
    +
    + 51 +
    +     		+
    + Protein (g) +
    +
    + 4.9 +
    +     		+
    + Iron (%) +
    +
    + 22% +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +     		+
    + Calories +
    +
    + 518 +
    +     		+
    + Fat (g) +
    +
    + 26 +
    +     		+
    + Carbs (g) +
    +
    + 65 +
    +     		+
    + Protein (g) +
    +
    + 7 +
    +     		+
    + Iron (%) +
    +
    + 6% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-10 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should not search column with filterable set to false 2`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + No matching records found +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + – +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should not search column with filterable set to false and has filter function 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +     		+
    + Calories +
    +
    + 408 +
    +     		+
    + Fat (g) +
    +
    + 3.2 +
    +     		+
    + Carbs (g) +
    +
    + 87 +
    +     		+
    + Protein (g) +
    +
    + 6.5 +
    +     		+
    + Iron (%) +
    +
    + 45% +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +     		+
    + Calories +
    +
    + 452 +
    +     		+
    + Fat (g) +
    +
    + 25 +
    +     		+
    + Carbs (g) +
    +
    + 51 +
    +     		+
    + Protein (g) +
    +
    + 4.9 +
    +     		+
    + Iron (%) +
    +
    + 22% +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +     		+
    + Calories +
    +
    + 518 +
    +     		+
    + Fat (g) +
    +
    + 26 +
    +     		+
    + Carbs (g) +
    +
    + 65 +
    +     		+
    + Protein (g) +
    +
    + 7 +
    +     		+
    + Iron (%) +
    +
    + 6% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-3 of 3 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should not search column with filterable set to false and has filter function 2`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +     		+
    + Calories +
    +
    + 392 +
    +     		+
    + Fat (g) +
    +
    + 0.2 +
    +     		+
    + Carbs (g) +
    +
    + 98 +
    +     		+
    + Protein (g) +
    +
    + 0 +
    +     		+
    + Iron (%) +
    +
    + 2% +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +     		+
    + Calories +
    +
    + 408 +
    +     		+
    + Fat (g) +
    +
    + 3.2 +
    +     		+
    + Carbs (g) +
    +
    + 87 +
    +     		+
    + Protein (g) +
    +
    + 6.5 +
    +     		+
    + Iron (%) +
    +
    + 45% +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +     		+
    + Calories +
    +
    + 452 +
    +     		+
    + Fat (g) +
    +
    + 25 +
    +     		+
    + Carbs (g) +
    +
    + 51 +
    +     		+
    + Protein (g) +
    +
    + 4.9 +
    +     		+
    + Iron (%) +
    +
    + 22% +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +     		+
    + Calories +
    +
    + 518 +
    +     		+
    + Fat (g) +
    +
    + 26 +
    +     		+
    + Carbs (g) +
    +
    + 65 +
    +     		+
    + Protein (g) +
    +
    + 7 +
    +     		+
    + Iron (%) +
    +
    + 6% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-10 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should not select item that is not selectable 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +     		+
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +     		+
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-2 of 2 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should pass kebab-case footer props correctly 1`] = ` +
    +
    + + + + + + + + + + + + +
    + No data available +
    +
    +
    +
    + Foo: +
    +
    + +
    +
    +
    +
    + – +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render 1`] = ` +
    +
    + + + + + + + + + + + + +
    + No data available +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + – +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render footer.page-text slot content 1`] = ` +
    +
    + + + + + + + + + + + +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    +
    + foo 1 bar 1 +
    +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render footer.prepend slot content 1`] = ` +
    +
    + + + + + + + + + + + +
    +
    +
    +
    + footer.prepend slot content +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-1 of 1 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render item slot when using group-by function 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + +
    + scoped +
    + + + +
    + scoped +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + + Dessert (100g serving): Frozen Yogurt + +
    + + Dessert (100g serving): Ice cream sandwich + +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-2 of 2 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render loading state 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Loading items... +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + – +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render loading state 2`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + 50% +
    +
    + Loading items... +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + – +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with body slot 1`] = ` +
    +
    + + + + + + + + + + + + + + +
    + 5 +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with data 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with foot slot 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 5 + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with group scoped slot 1`] = ` +
    +
    + + + + + + + + + + + + + + +
    + {"group":0,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Jelly bean","calories":375,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":392,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]} +
    +
    + {"group":3.9,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]} +
    +
    + {"group":4,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]} +
    +
    + {"group":4.3,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]} +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with group.summary scoped slot 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + summary +
    + + + + + + + + + + + + +
    + summary +
    + + + + + + + + + + + + +
    + summary +
    + + + + + + + + + + + + +
    + summary +
    + + + + + + + + + + + + +
    + summary +
    + + +
    +
    +
    +
    + +
    +
    +
    +
    + + Calories: 159 + +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    + + Calories: 237 + +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    + + Calories: 262 + +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    + + Calories: 305 + +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    + + Calories: 356 + +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with grouped rows 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + + Protein (g): 0 + +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +     		+
    + Calories +
    +
    + 375 +
    +     		+
    + Fat (g) +
    +
    + 0 +
    +     		+
    + Carbs (g) +
    +
    + 94 +
    +     		+
    + Iron (%) +
    +
    + 0% +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +     		+
    + Calories +
    +
    + 392 +
    +     		+
    + Fat (g) +
    +
    + 0.2 +
    +     		+
    + Carbs (g) +
    +
    + 98 +
    +     		+
    + Iron (%) +
    +
    + 2% +
    +
    + + Protein (g): 3.9 + +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    + + Protein (g): 4 + +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    + + Protein (g): 4.3 + +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with item scoped slot 1`] = ` +
    +
    + + + + + + + + + + + + + + + +
    + {"item":{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"},"index":0,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]} +
    +
    + {"item":{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]},"index":1,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]} +
    +
    + {"item":{"name":"Eclair","calories":262,"fat":16,"carbs":23,"protein":6,"iron":"7%","class":{"test":true,"second":false}},"index":2,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]} +
    +
    + {"item":{"name":"Cupcake","calories":305,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},"index":3,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]} +
    +
    + {"item":{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},"index":4,"isSelected":false,"isExpanded":false,"isMobile":true,"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Protein (g)","value":"protein"},{"text":"Iron (%)","value":"iron"}]} +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + +
    + expanded +
    + + + + + + + + + + +
    + expanded +
    + + + + + + + + + + +
    + expanded +
    + + + + + + + + + + +
    + expanded +
    + + + + + + + + + + +
    + expanded +
    + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with showExpand 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with showExpand 2`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    +
    +
    + +
    +     		+
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should render with showSelect 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +     		+
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +     		+
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +     		+
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +     		+
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +     		+
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should respect mustSort property on options 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +
    +
    + Dessert (100g serving) +
    +
    + Jelly bean +
    +
    +
    + Dessert (100g serving) +
    +
    + Lollipop +
    +
    +
    + Dessert (100g serving) +
    +
    + Honeycomb +
    +
    +
    + Dessert (100g serving) +
    +
    + Donut +
    +
    +
    + Dessert (100g serving) +
    +
    + KitKat +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-10 of 10 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should search group-by column 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + + Name: Assistance + +
    +
    + ID +
    +
    + 1 +
    +
    + + Name: Candidat + +
    +
    + ID +
    +
    + 2 +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-2 of 2 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should search group-by column 2`] = ` +
    +
    + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    + + Name: Candidat + +
    +
    + ID +
    +
    + 2 +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-1 of 1 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should show correct aria-labels when sorting 1`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 5 +
    +
    + +
    +
    + +
    +
    +
    +`; + +exports[`VDataTable.ts should show correct aria-labels when sorting 2`] = ` +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Dessert (100g serving) +
    +
    + Gingerbread +
    +     		+
    + Calories +
    +
    + 356 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 49 +
    +     		+
    + Protein (g) +
    +
    + 3.9 +
    +     		+
    + Iron (%) +
    +
    + 16% +
    +
    +
    + Dessert (100g serving) +
    +
    + Cupcake +
    +     		+
    + Calories +
    +
    + 305 +
    +     		+
    + Fat (g) +
    +
    + 3.7 +
    +     		+
    + Carbs (g) +
    +
    + 67 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 8% +
    +
    +
    + Dessert (100g serving) +
    +
    + Eclair +
    +     		+
    + Calories +
    +
    + 262 +
    +     		+
    + Fat (g) +
    +
    + 16 +
    +     		+
    + Carbs (g) +
    +
    + 23 +
    +     		+
    + Protein (g) +
    +
    + 6 +
    +     		+
    + Iron (%) +
    +
    + 7% +
    +
    +
    + Dessert (100g serving) +
    +
    + Ice cream sandwich +
    +     		+
    + Calories +
    +
    + 237 +
    +     		+
    + Fat (g) +
    +
    + 9 +
    +     		+
    + Carbs (g) +
    +
    + 37 +
    +     		+
    + Protein (g) +
    +
    + 4.3 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    + Dessert (100g serving) +
    +
    + Frozen Yogurt +
    +     		+
    + Calories +
    +
    + 159 +
    +     		+
    + Fat (g) +
    +
    + 6 +
    +     		+
    + Carbs (g) +
    +
    + 24 +
    +     		+
    + Protein (g) +
    +
    + 4 +
    +     		+
    + Iron (%) +
    +
    + 1% +
    +
    +
    +
    +
    + Rows per page: +
    +
    + +
    +
    +
    +
    + 1-5 of 5 +
    +
    + +
    +
    + +
    +
    +
    +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap new file mode 100644 index 0000000..32970b9 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap @@ -0,0 +1,870 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDataTableHeader.ts desktop should render 1`] = ` + + + + + Dessert (100g serving) + + + + + Calories + + + + + + Fat (g) + + + + + + Carbs (g) + + + + + + Protein (g) + + + + + + Iron (%) + + + + + +`; + +exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = ` + + + + + Dessert (100g serving) + + + + + Calories + + + + + + Fat (g) + + + + + + Carbs (g) + + + + + + Protein (g) + + + + + + Iron (%) + + + + 1 + + + + +`; + +exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = ` + + + + + Dessert (100g serving) + + + group + + + + + Calories + + + + group + + + + + Fat (g) + + + + group + + + + + Carbs (g) + + + + group + + + + + Protein (g) + + + + group + + + + + Iron (%) + + + + group + + + + +`; + +exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = ` + + + + + Dessert (100g serving) + + + + + Calories + + + + + + Fat (g) + + + + + + Carbs (g) + + + + + + Protein (g) + + + + + + Iron (%) + + + + + +`; + +exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = ` + + + + + Dessert (100g serving) + + + + + Calories + + + + + + Fat (g) + + + + + + Carbs (g) + + + + + + Protein (g) + + + + + + Iron (%) + + + + + +`; + +exports[`VDataTableHeader.ts mobile should render 1`] = ` + + + +
    +
    +
    + +
    +
    +
    + + + +`; + +exports[`VDataTableHeader.ts mobile should render with data-table-select header 1`] = ` + + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +`; + +exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = ` + + + +
    +
    +
    + +
    +
    +
    + + + +`; + +exports[`VDataTableHeader.ts mobile should work with showGroupBy 1`] = ` + + + +
    +
    +
    + +
    +
    +
    + + + +`; + +exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = ` + + + +
    +
    +
    + +
    +
    +
    + + + +`; + +exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = ` + + + +
    +
    +
    + +
    +
    +
    + + + +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap new file mode 100644 index 0000000..b6bb737 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap @@ -0,0 +1,48 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VEditDialog.ts should render 1`] = ` +
    +
    + + +
    +
    +`; + +exports[`VEditDialog.ts should render actions 1`] = ` +
    + + +
    +`; + +exports[`VEditDialog.ts should render button 1`] = ` + +`; + +exports[`VEditDialog.ts should render custom button texts 1`] = ` +
    +
    + + +
    +
    +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap new file mode 100644 index 0000000..d8e1c91 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap @@ -0,0 +1,91 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VSimpleTable.ts should render 1`] = ` +
    +
    + + + + + + + + + +
    + Foo + + Bar +
    + baz + + qux +
    +
    +
    +`; + +exports[`VSimpleTable.ts should render with custom height 1`] = ` +
    +
    + + + + + + + + + +
    + Foo + + Bar +
    + baz + + qux +
    +
    +
    +`; + +exports[`VSimpleTable.ts should render with custom wrapper 1`] = ` +
    + + + + + + + + + +
    + Foo + + Bar +
    + baz + + qux +
    +
    +`; + +exports[`VSimpleTable.ts should render with top & bottom slots 1`] = ` +
    +
    + Header +
    +
    + +
    +
    +
    + Footer +
    +
    +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap new file mode 100644 index 0000000..54ee281 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VVirtualTable.ts should re-render when items change 1`] = ` +
    +
    +
    + + + + +
    +
    + a +
    +
    + b +
    +
    + c +
    +
    + + + +
    +
    +
    +
    +`; + +exports[`VVirtualTable.ts should re-render when items change 2`] = ` +
    +
    +
    + + + + +
    +
    + d +
    +
    + e +
    +
    + f +
    +
    + + + +
    +
    +
    +
    +`; + +exports[`VVirtualTable.ts should render 1`] = ` +
    +
    +
    + + + + +
    + {"items":["a","b","c"]} +
    + + + +
    +
    +
    +
    +`; diff --git a/packages/vuetify/src/components/VDataTable/__tests__/headers.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/headers.spec.ts new file mode 100644 index 0000000..bf5f25a --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/headers.spec.ts @@ -0,0 +1,66 @@ +import { createHeaders } from '../composables/headers' + +// Utilities +import { describe, expect, it } from '@jest/globals' + +describe('VDataTable headers', () => { + it('flattens 2d headers', () => { + const { headers, columns } = createHeaders({ + items: [], + headers: [ + { key: 'foo' }, + { key: 'bar', children: [{ key: 'fizz' }, { key: 'buzz' }] }, + { key: 'baz' }, + ], + }) + expect(headers.value).toMatchObject([ + [{ key: 'foo', rowspan: 2 }, { key: 'bar', colspan: 2 }, { key: 'baz', rowspan: 2 }], + [{ key: 'fizz' }, { key: 'buzz' }], + ] as any) + expect(columns.value).toMatchObject([{ key: 'foo' }, { key: 'fizz' }, { key: 'buzz' }, { key: 'baz' }]) + expect('provide() can only be used inside setup()').toHaveBeenTipped() + }) + + it('orders sibling columns correctly', () => { + const { headers, columns } = createHeaders({ + items: [], + headers: [ + { + key: 'left', + children: [ + { + key: 'left_child', + children: [ + { + key: 'foo', + }, + { + key: 'bar', + }, + ], + }, + ], + }, + { + key: 'right', + children: [ + { + key: 'fizz', + }, + { + key: 'buzz', + }, + ], + }, + ], + }) + + expect(headers.value).toMatchObject([ + [{ key: 'left', colspan: 2 }, { key: 'right', rowspan: 2, colspan: 2 }], + [{ key: 'left_child', colspan: 2 }], + [{ key: 'foo' }, { key: 'bar' }, { key: 'fizz' }, { key: 'buzz' }], + ] as any) + expect(columns.value).toMatchObject([{ key: 'foo' }, { key: 'bar' }, { key: 'fizz' }, { key: 'buzz' }]) + expect('provide() can only be used inside setup()').toHaveBeenTipped() + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/__tests__/sort.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/sort.spec.ts new file mode 100644 index 0000000..dc5853d --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/__tests__/sort.spec.ts @@ -0,0 +1,276 @@ +// Composables +import { createHeaders } from '../composables/headers' +import { transformItems as _transformItems } from '../composables/items' +import { sortItems as _sortItems } from '../composables/sort' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' + +// Types +import type { SortItem } from '../composables/sort' +import type { DataTableCompareFunction, DataTableHeader, DataTableItem } from '@/components/VDataTable/types' + +function transformItems (items: any[], headers?: DataTableHeader[]) { + let _items: DataTableItem[] + mount({ + setup () { + const { columns } = createHeaders({ items, headers }) + _items = _transformItems({} as any, items, columns.value) + return () => {} + }, + }) + return _items! +} + +function sortItems (items: any[], sortBy: SortItem[], sortFunctions?: Record) { + return _sortItems(items, sortBy, 'en', { + sortFunctions, + transform: item => item.columns, + }) +} + +describe('VDataTable - sorting', () => { + it('should sort items by single column', () => { + const items = transformItems([ + { string: 'foo', number: 1 }, + { string: 'bar', number: 2 }, + { string: 'baz', number: 4 }, + { string: 'fizzbuzz', number: 3 }, + ]) + + expect( + sortItems(items, [{ key: 'string', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: 2 }, + { string: 'baz', number: 4 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'foo', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'string', order: 'desc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'foo', number: 1 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'baz', number: 4 }, + { string: 'bar', number: 2 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'foo', number: 1 }, + { string: 'bar', number: 2 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'baz', number: 4 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'desc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'baz', number: 4 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'bar', number: 2 }, + { string: 'foo', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'asc' }], { number: (a, b) => b - a }) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'baz', number: 4 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'bar', number: 2 }, + { string: 'foo', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'desc' }], { number: (a, b) => b - a }) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'foo', number: 1 }, + { string: 'bar', number: 2 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'baz', number: 4 }, + ]) + }) + + it('should sort items with deep structure', () => { + const items = transformItems([ + { foo: { bar: { baz: 3 } } }, + { foo: { bar: { baz: 1 } } }, + { foo: { bar: { baz: 2 } } }, + ], [{ key: 'foo.bar.baz' }]) + + expect( + sortItems(items, [{ key: 'foo.bar.baz', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { foo: { bar: { baz: 1 } } }, + { foo: { bar: { baz: 2 } } }, + { foo: { bar: { baz: 3 } } }, + ]) + }) + + it('should sort items by multiple columns', () => { + const items = transformItems([ + { string: 'foo', number: 1 }, + { string: 'bar', number: 3 }, + { string: 'baz', number: 2 }, + { string: 'baz', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'string', order: 'asc' }, { key: 'number', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: 3 }, + { string: 'baz', number: 1 }, + { string: 'baz', number: 2 }, + { string: 'foo', number: 1 }, + ]) + + // { string: 'foo', number: 1 }, + // { string: 'bar', number: 3 }, + // { string: 'baz', number: 2 }, + // { string: 'baz', number: 1 }, + + // { string: 'bar', number: 3 }, + // { string: 'baz', number: 2 }, + // { string: 'baz', number: 1 }, + // { string: 'foo', number: 1 }, + + expect( + sortItems(items, [{ key: 'string', order: 'desc' }, { key: 'number', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'foo', number: 1 }, + { string: 'baz', number: 1 }, + { string: 'baz', number: 2 }, + { string: 'bar', number: 3 }, + ]) + + expect( + sortItems(items, [{ key: 'string', order: 'asc' }, { key: 'number', order: 'desc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: 3 }, + { string: 'baz', number: 2 }, + { string: 'baz', number: 1 }, + { string: 'foo', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'string', order: 'desc' }, { key: 'number', order: 'desc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'foo', number: 1 }, + { string: 'baz', number: 2 }, + { string: 'baz', number: 1 }, + { string: 'bar', number: 3 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'asc' }, { key: 'string', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'baz', number: 1 }, + { string: 'foo', number: 1 }, + { string: 'baz', number: 2 }, + { string: 'bar', number: 3 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'desc' }, { key: 'string', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: 3 }, + { string: 'baz', number: 2 }, + { string: 'baz', number: 1 }, + { string: 'foo', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'asc' }, { key: 'string', order: 'desc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'foo', number: 1 }, + { string: 'baz', number: 1 }, + { string: 'baz', number: 2 }, + { string: 'bar', number: 3 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'desc' }, { key: 'string', order: 'desc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: 3 }, + { string: 'baz', number: 2 }, + { string: 'foo', number: 1 }, + { string: 'baz', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'string', order: 'asc' }, { key: 'number', order: 'asc' }], { number: (a, b) => b - a }) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: 3 }, + { string: 'baz', number: 2 }, + { string: 'baz', number: 1 }, + { string: 'foo', number: 1 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'asc' }, { key: 'string', order: 'asc' }], { number: (a, b) => b - a }) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: 3 }, + { string: 'baz', number: 2 }, + { string: 'baz', number: 1 }, + { string: 'foo', number: 1 }, + ]) + }) + + it('should sort items with nullable column', () => { + const items = transformItems([ + { string: 'foo', number: 1 }, + { string: 'bar', number: null }, + { string: 'baz', number: 4 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'foobar', number: 5 }, + { string: 'barbaz', number: undefined }, + { string: 'foobarbuzz', number: '' }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'asc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'bar', number: null }, + { string: 'barbaz', number: undefined }, + { string: 'foobarbuzz', number: '' }, + { string: 'foo', number: 1 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'baz', number: 4 }, + { string: 'foobar', number: 5 }, + ]) + + expect( + sortItems(items, [{ key: 'number', order: 'desc' }]) + .map(i => i.raw) + ).toStrictEqual([ + { string: 'foobar', number: 5 }, + { string: 'baz', number: 4 }, + { string: 'fizzbuzz', number: 3 }, + { string: 'foo', number: 1 }, + { string: 'bar', number: null }, + { string: 'barbaz', number: undefined }, + { string: 'foobarbuzz', number: '' }, + ]) + }) +}) diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss new file mode 100644 index 0000000..d3cda1e --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/_variables.scss @@ -0,0 +1,17 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +$data-table-header-sort-badge-size: 20px !default; +$data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default; + +$data-table-loading-opacity: var(--v-disabled-opacity) !default; + +$data-table-footer-info-min-width: 116px !default; +$data-table-footer-info-padding: 0 16px !default; +$data-table-footer-padding: 8px 4px !default; +$data-table-footer-pagination-margin-inline-start: 16px !default; +$data-table-footer-select-width: 90px !default; +$data-table-footer-items-per-page-padding: 8px !default; + +$data-table-header-mobile-chip-icon-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default; +$data-table-header-mobile-chip-icon-color-active: rgba(var(--v-theme-on-surface)) !default; diff --git a/packages/vuetify/src/components/VDataTable/composables/expand.ts b/packages/vuetify/src/components/VDataTable/composables/expand.ts new file mode 100644 index 0000000..1ee3714 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/expand.ts @@ -0,0 +1,76 @@ +// Composables +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { inject, provide, toRef } from 'vue' +import { propsFactory } from '@/util' + +// Types +import type { InjectionKey, PropType, Ref } from 'vue' +import type { DataTableItem } from '../types' + +export const makeDataTableExpandProps = propsFactory({ + expandOnClick: Boolean, + showExpand: Boolean, + expanded: { + type: Array as PropType, + default: () => ([]), + }, +}, 'DataTable-expand') + +export const VDataTableExpandedKey: InjectionKey<{ + expand: (item: DataTableItem, value: boolean) => void + expanded: Ref> + expandOnClick: Ref + isExpanded: (item: DataTableItem) => boolean + toggleExpand: (item: DataTableItem) => void +}> = Symbol.for('vuetify:datatable:expanded') + +type ExpandProps = { + expandOnClick: boolean + expanded: readonly string[] + 'onUpdate:expanded': ((value: any[]) => void) | undefined +} + +export function provideExpanded (props: ExpandProps) { + const expandOnClick = toRef(props, 'expandOnClick') + const expanded = useProxiedModel(props, 'expanded', props.expanded, v => { + return new Set(v) + }, v => { + return [...v.values()] + }) + + function expand (item: DataTableItem, value: boolean) { + const newExpanded = new Set(expanded.value) + + if (!value) { + newExpanded.delete(item.value) + } else { + newExpanded.add(item.value) + } + + expanded.value = newExpanded + } + + function isExpanded (item: DataTableItem) { + return expanded.value.has(item.value) + } + + function toggleExpand (item: DataTableItem) { + expand(item, !isExpanded(item)) + } + + const data = { expand, expanded, expandOnClick, isExpanded, toggleExpand } + + provide(VDataTableExpandedKey, data) + + return data +} + +export function useExpanded () { + const data = inject(VDataTableExpandedKey) + + if (!data) throw new Error('foo') + + return data +} diff --git a/packages/vuetify/src/components/VDataTable/composables/group.ts b/packages/vuetify/src/components/VDataTable/composables/group.ts new file mode 100644 index 0000000..7f4ac2b --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/group.ts @@ -0,0 +1,193 @@ +// Composables +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, inject, provide, ref } from 'vue' +import { getObjectValueByPath, propsFactory } from '@/util' + +// Types +import type { InjectionKey, PropType, Ref } from 'vue' +import type { SortItem } from './sort' +import type { DataTableItem } from '../types' + +export interface GroupableItem { + type: 'item' + raw: T +} + +export interface Group { + type: 'group' + depth: number + id: string + key: string + value: any + items: readonly (T | Group)[] +} + +export const makeDataTableGroupProps = propsFactory({ + groupBy: { + type: Array as PropType, + default: () => ([]), + }, +}, 'DataTable-group') + +const VDataTableGroupSymbol: InjectionKey<{ + opened: Ref> + toggleGroup: (group: Group) => void + isGroupOpen: (group: Group) => boolean + sortByWithGroups: Ref + groupBy: Ref + extractRows: (items: (DataTableItem | Group)[]) => DataTableItem[] +}> = Symbol.for('vuetify:data-table-group') + +type GroupProps = { + groupBy: readonly SortItem[] + 'onUpdate:groupBy': ((value: SortItem[]) => void) | undefined +} + +export function createGroupBy (props: GroupProps) { + const groupBy = useProxiedModel(props, 'groupBy') + + return { groupBy } +} + +export function provideGroupBy (options: { + groupBy: Ref + sortBy: Ref + disableSort?: Ref +}) { + const { disableSort, groupBy, sortBy } = options + const opened = ref(new Set()) + + const sortByWithGroups = computed(() => { + return groupBy.value.map(val => ({ + ...val, + order: val.order ?? false, + })).concat(disableSort?.value ? [] : sortBy.value) + }) + + function isGroupOpen (group: Group) { + return opened.value.has(group.id) + } + + function toggleGroup (group: Group) { + const newOpened = new Set(opened.value) + if (!isGroupOpen(group)) newOpened.add(group.id) + else newOpened.delete(group.id) + + opened.value = newOpened + } + + function extractRows (items: readonly (T | Group)[]) { + function dive (group: Group): T[] { + const arr = [] + + for (const item of group.items) { + if ('type' in item && item.type === 'group') { + arr.push(...dive(item)) + } else { + arr.push(item as T) + } + } + + return arr + } + return dive({ type: 'group', items, id: 'dummy', key: 'dummy', value: 'dummy', depth: 0 }) + } + + // onBeforeMount(() => { + // for (const key of groupedItems.value.keys()) { + // opened.value.add(key) + // } + // }) + + const data = { sortByWithGroups, toggleGroup, opened, groupBy, extractRows, isGroupOpen } + + provide(VDataTableGroupSymbol, data) + + return data +} + +export function useGroupBy () { + const data = inject(VDataTableGroupSymbol) + + if (!data) throw new Error('Missing group!') + + return data +} + +function groupItemsByProperty (items: readonly T[], groupBy: string) { + if (!items.length) return [] + + const groups = new Map() + for (const item of items) { + const value = getObjectValueByPath(item.raw, groupBy) + + if (!groups.has(value)) { + groups.set(value, []) + } + groups.get(value)!.push(item) + } + + return groups +} + +function groupItems (items: readonly T[], groupBy: readonly string[], depth = 0, prefix = 'root') { + if (!groupBy.length) return [] + + const groupedItems = groupItemsByProperty(items, groupBy[0]) + const groups: Group[] = [] + + const rest = groupBy.slice(1) + groupedItems.forEach((items, value) => { + const key = groupBy[0] + const id = `${prefix}_${key}_${value}` + groups.push({ + depth, + id, + key, + value, + items: rest.length ? groupItems(items, rest, depth + 1, id) : items, + type: 'group', + }) + }) + + return groups +} + +function flattenItems (items: readonly (T | Group)[], opened: Set): readonly (T | Group)[] { + const flatItems: (T | Group)[] = [] + + for (const item of items) { + // TODO: make this better + if ('type' in item && item.type === 'group') { + if (item.value != null) { + flatItems.push(item) + } + + if (opened.has(item.id) || item.value == null) { + flatItems.push(...flattenItems(item.items, opened)) + } + } else { + flatItems.push(item) + } + } + + return flatItems +} + +export function useGroupedItems ( + items: Ref, + groupBy: Ref, + opened: Ref> +) { + const flatItems = computed(() => { + if (!groupBy.value.length) return items.value + + const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key)) + + return flattenItems(groupedItems, opened.value) + }) + + return { flatItems } +} diff --git a/packages/vuetify/src/components/VDataTable/composables/headers.ts b/packages/vuetify/src/components/VDataTable/composables/headers.ts new file mode 100644 index 0000000..7b54b9e --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/headers.ts @@ -0,0 +1,296 @@ +// Utilities +import { capitalize, inject, provide, ref, watchEffect } from 'vue' +import { consoleError, propsFactory } from '@/util' + +// Types +import type { DeepReadonly, InjectionKey, PropType, Ref } from 'vue' +import type { SortItem } from './sort' +import type { DataTableCompareFunction, DataTableHeader, InternalDataTableHeader } from '../types' +import type { FilterKeyFunctions } from '@/composables/filter' + +export const makeDataTableHeaderProps = propsFactory({ + headers: Array as PropType>, +}, 'DataTable-header') + +export const VDataTableHeadersSymbol: InjectionKey<{ + headers: Ref + columns: Ref +}> = Symbol.for('vuetify:data-table-headers') + +type HeaderProps = { + headers: DeepReadonly | undefined + items: any[] +} + +const defaultHeader = { title: '', sortable: false } +const defaultActionHeader = { ...defaultHeader, width: 48 } + +function priorityQueue (arr: T[] = []) { + const queue: { element: T, priority: number }[] = arr.map(element => ({ element, priority: 0 })) + + return { + enqueue: (element: T, priority: number) => { + let added = false + for (let i = 0; i < queue.length; i++) { + const item = queue[i] + if (item.priority > priority) { + queue.splice(i, 0, { element, priority }) + added = true + break + } + } + + if (!added) queue.push({ element, priority }) + }, + size: () => queue.length, + count: () => { + let count = 0 + + if (!queue.length) return 0 + + const whole = Math.floor(queue[0].priority) + for (let i = 0; i < queue.length; i++) { + if (Math.floor(queue[i].priority) === whole) count += 1 + } + + return count + }, + dequeue: () => { + return queue.shift() + }, + } +} + +function extractLeaves (item: InternalDataTableHeader, columns: InternalDataTableHeader[] = []) { + if (!item.children) { + columns.push(item) + } else { + for (const child of item.children) { + extractLeaves(child, columns) + } + } + + return columns +} + +function extractKeys (headers: DeepReadonly, keys = new Set()) { + for (const item of headers) { + if (item.key) keys.add(item.key) + + if (item.children) { + extractKeys(item.children, keys) + } + } + + return keys +} + +function getDefaultItem (item: DeepReadonly) { + if (!item.key) return undefined + if (item.key === 'data-table-group') return defaultHeader + if (['data-table-expand', 'data-table-select'].includes(item.key)) return defaultActionHeader + return undefined +} + +function getDepth (item: InternalDataTableHeader, depth = 0): number { + if (!item.children) return depth + + return Math.max(depth, ...item.children.map(child => getDepth(child, depth + 1))) +} + +function parseFixedColumns (items: InternalDataTableHeader[]) { + let seenFixed = false + function setFixed (item: InternalDataTableHeader, parentFixed = false) { + if (!item) return + + if (parentFixed) { + item.fixed = true + } + + if (item.fixed) { + if (item.children) { + for (let i = item.children.length - 1; i >= 0; i--) { + setFixed(item.children[i], true) + } + } else { + if (!seenFixed) { + item.lastFixed = true + } else if (isNaN(+item.width!)) { + consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`) + } + seenFixed = true + } + } else { + if (item.children) { + for (let i = item.children.length - 1; i >= 0; i--) { + setFixed(item.children[i]) + } + } else { + seenFixed = false + } + } + } + + for (let i = items.length - 1; i >= 0; i--) { + setFixed(items[i]) + } + + function setFixedOffset (item: InternalDataTableHeader, fixedOffset = 0) { + if (!item) return fixedOffset + + if (item.children) { + item.fixedOffset = fixedOffset + for (const child of item.children) { + fixedOffset = setFixedOffset(child, fixedOffset) + } + } else if (item.fixed) { + item.fixedOffset = fixedOffset + fixedOffset += parseFloat(item.width || '0') || 0 + } + + return fixedOffset + } + + let fixedOffset = 0 + for (const item of items) { + fixedOffset = setFixedOffset(item, fixedOffset) + } +} + +function parse (items: InternalDataTableHeader[], maxDepth: number) { + const headers: InternalDataTableHeader[][] = [] + let currentDepth = 0 + const queue = priorityQueue(items) + + while (queue.size() > 0) { + let rowSize = queue.count() + const row: InternalDataTableHeader[] = [] + let fraction = 1 + while (rowSize > 0) { + const { element: item, priority } = queue.dequeue()! + const diff = maxDepth - currentDepth - getDepth(item) + + row.push({ + ...item, + rowspan: diff ?? 1, + colspan: item.children ? extractLeaves(item).length : 1, + }) + + if (item.children) { + for (const child of item.children) { + // This internally sorts items that are on the same priority "row" + const sort = priority % 1 + (fraction / Math.pow(10, currentDepth + 2)) + queue.enqueue(child, currentDepth + diff + sort) + } + } + + fraction += 1 + rowSize -= 1 + } + currentDepth += 1 + headers.push(row) + } + + const columns = items.map(item => extractLeaves(item)).flat() + + return { columns, headers } +} + +function convertToInternalHeaders (items: DeepReadonly) { + const internalHeaders: InternalDataTableHeader[] = [] + for (const item of items) { + const defaultItem = { ...getDefaultItem(item), ...item } + const key = defaultItem.key ?? (typeof defaultItem.value === 'string' ? defaultItem.value : null) + const value = defaultItem.value ?? key ?? null + const internalItem: InternalDataTableHeader = { + ...defaultItem, + key, + value, + sortable: defaultItem.sortable ?? (defaultItem.key != null || !!defaultItem.sort), + children: defaultItem.children ? convertToInternalHeaders(defaultItem.children) : undefined, + } + + internalHeaders.push(internalItem) + } + + return internalHeaders +} + +export function createHeaders ( + props: HeaderProps, + options?: { + groupBy?: Ref + showSelect?: Ref + showExpand?: Ref + } +) { + const headers = ref([]) + const columns = ref([]) + const sortFunctions = ref>({}) + const sortRawFunctions = ref>({}) + const filterFunctions = ref({}) + + watchEffect(() => { + const _headers = props.headers || + Object.keys(props.items[0] ?? {}).map(key => ({ key, title: capitalize(key) })) as never + + const items = _headers.slice() + const keys = extractKeys(items) + + if (options?.groupBy?.value.length && !keys.has('data-table-group')) { + items.unshift({ key: 'data-table-group', title: 'Group' }) + } + + if (options?.showSelect?.value && !keys.has('data-table-select')) { + items.unshift({ key: 'data-table-select' }) + } + + if (options?.showExpand?.value && !keys.has('data-table-expand')) { + items.push({ key: 'data-table-expand' }) + } + + const internalHeaders = convertToInternalHeaders(items) + + parseFixedColumns(internalHeaders) + + const maxDepth = Math.max(...internalHeaders.map(item => getDepth(item))) + 1 + const parsed = parse(internalHeaders, maxDepth) + + headers.value = parsed.headers + columns.value = parsed.columns + + const flatHeaders = parsed.headers.flat(1) + + for (const header of flatHeaders) { + if (!header.key) continue + + if (header.sortable) { + if (header.sort) { + sortFunctions.value[header.key] = header.sort + } + + if (header.sortRaw) { + sortRawFunctions.value[header.key] = header.sortRaw + } + } + + if (header.filter) { + filterFunctions.value[header.key] = header.filter + } + } + }) + + const data = { headers, columns, sortFunctions, sortRawFunctions, filterFunctions } + + provide(VDataTableHeadersSymbol, data) + + return data +} + +export function useHeaders () { + const data = inject(VDataTableHeadersSymbol) + + if (!data) throw new Error('Missing headers!') + + return data +} diff --git a/packages/vuetify/src/components/VDataTable/composables/items.ts b/packages/vuetify/src/components/VDataTable/composables/items.ts new file mode 100644 index 0000000..9529af5 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/items.ts @@ -0,0 +1,72 @@ +// Utilities +import { computed } from 'vue' +import { getPropertyFromItem, propsFactory } from '@/util' + +// Types +import type { PropType, Ref } from 'vue' +import type { CellProps, DataTableItem, InternalDataTableHeader, RowProps } from '../types' +import type { SelectItemKey } from '@/util' + +export interface DataTableItemProps { + items: any[] + itemValue: SelectItemKey + itemSelectable: SelectItemKey + returnObject: boolean +} + +// Composables +export const makeDataTableItemsProps = propsFactory({ + items: { + type: Array as PropType, + default: () => ([]), + }, + itemValue: { + type: [String, Array, Function] as PropType, + default: 'id', + }, + itemSelectable: { + type: [String, Array, Function] as PropType, + default: null, + }, + rowProps: [Object, Function] as PropType>, + cellProps: [Object, Function] as PropType>, + returnObject: Boolean, +}, 'DataTable-items') + +export function transformItem ( + props: Omit, + item: any, + index: number, + columns: InternalDataTableHeader[] +): DataTableItem { + const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue) + const selectable = getPropertyFromItem(item, props.itemSelectable, true) + const itemColumns = columns.reduce((obj, column) => { + if (column.key != null) obj[column.key] = getPropertyFromItem(item, column.value!) + return obj + }, {} as Record) + + return { + type: 'item', + key: props.returnObject ? getPropertyFromItem(item, props.itemValue) : value, + index, + value, + selectable, + columns: itemColumns, + raw: item, + } +} + +export function transformItems ( + props: Omit, + items: DataTableItemProps['items'], + columns: InternalDataTableHeader[] +): DataTableItem[] { + return items.map((item, index) => transformItem(props, item, index, columns)) +} + +export function useDataTableItems (props: DataTableItemProps, columns: Ref) { + const items = computed(() => transformItems(props, props.items, columns.value)) + + return { items } +} diff --git a/packages/vuetify/src/components/VDataTable/composables/options.ts b/packages/vuetify/src/components/VDataTable/composables/options.ts new file mode 100644 index 0000000..9dcab1d --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/options.ts @@ -0,0 +1,44 @@ +// Utilities +import { computed, watch } from 'vue' +import { deepEqual, getCurrentInstance } from '@/util' + +// Types +import type { Ref } from 'vue' +import type { SortItem } from './sort' + +export function useOptions ({ + page, + itemsPerPage, + sortBy, + groupBy, + search, +}: { + page: Ref + itemsPerPage: Ref + sortBy: Ref + groupBy: Ref + search: Ref +}) { + const vm = getCurrentInstance('VDataTable') + + const options = computed(() => ({ + page: page.value, + itemsPerPage: itemsPerPage.value, + sortBy: sortBy.value, + groupBy: groupBy.value, + search: search.value, + })) + + let oldOptions: typeof options.value | null = null + watch(options, () => { + if (deepEqual(oldOptions, options.value)) return + + // Reset page when searching + if (oldOptions && oldOptions.search !== options.value.search) { + page.value = 1 + } + + vm.emit('update:options', options.value) + oldOptions = options.value + }, { deep: true, immediate: true }) +} diff --git a/packages/vuetify/src/components/VDataTable/composables/paginate.ts b/packages/vuetify/src/components/VDataTable/composables/paginate.ts new file mode 100644 index 0000000..63515ee --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/paginate.ts @@ -0,0 +1,134 @@ +// Composables +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, inject, provide, watch, watchEffect } from 'vue' +import { clamp, getCurrentInstance, propsFactory } from '@/util' + +// Types +import type { InjectionKey, Ref } from 'vue' +import type { Group } from './group' +import type { EventProp } from '@/util' + +export const makeDataTablePaginateProps = propsFactory({ + page: { + type: [Number, String], + default: 1, + }, + itemsPerPage: { + type: [Number, String], + default: 10, + }, +}, 'DataTable-paginate') + +const VDataTablePaginationSymbol: InjectionKey<{ + page: Ref + itemsPerPage: Ref + startIndex: Ref + stopIndex: Ref + pageCount: Ref + itemsLength: Ref + prevPage: () => void + nextPage: () => void + setPage: (value: number) => void + setItemsPerPage: (value: number) => void +}> = Symbol.for('vuetify:data-table-pagination') + +type PaginationProps = { + page: number | string + 'onUpdate:page': EventProp | undefined + itemsPerPage: number | string + 'onUpdate:itemsPerPage': EventProp | undefined + itemsLength?: number | string +} + +export function createPagination (props: PaginationProps) { + const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1)) + const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10)) + + return { page, itemsPerPage } +} + +export function providePagination (options: { + page: Ref + itemsPerPage: Ref + itemsLength: Ref +}) { + const { page, itemsPerPage, itemsLength } = options + + const startIndex = computed(() => { + if (itemsPerPage.value === -1) return 0 + + return itemsPerPage.value * (page.value - 1) + }) + const stopIndex = computed(() => { + if (itemsPerPage.value === -1) return itemsLength.value + + return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value) + }) + + const pageCount = computed(() => { + if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1 + + return Math.ceil(itemsLength.value / itemsPerPage.value) + }) + + watchEffect(() => { + if (page.value > pageCount.value) { + page.value = pageCount.value + } + }) + + function setItemsPerPage (value: number) { + itemsPerPage.value = value + page.value = 1 + } + + function nextPage () { + page.value = clamp(page.value + 1, 1, pageCount.value) + } + + function prevPage () { + page.value = clamp(page.value - 1, 1, pageCount.value) + } + + function setPage (value: number) { + page.value = clamp(value, 1, pageCount.value) + } + + const data = { page, itemsPerPage, startIndex, stopIndex, pageCount, itemsLength, nextPage, prevPage, setPage, setItemsPerPage } + + provide(VDataTablePaginationSymbol, data) + + return data +} + +export function usePagination () { + const data = inject(VDataTablePaginationSymbol) + + if (!data) throw new Error('Missing pagination!') + + return data +} + +export function usePaginatedItems (options: { + items: Ref)[]> + startIndex: Ref + stopIndex: Ref + itemsPerPage: Ref +}) { + const vm = getCurrentInstance('usePaginatedItems') + + const { items, startIndex, stopIndex, itemsPerPage } = options + const paginatedItems = computed(() => { + if (itemsPerPage.value <= 0) return items.value + + return items.value.slice(startIndex.value, stopIndex.value) + }) + + watch(paginatedItems, val => { + vm.emit('update:currentItems', val) + }) + + return { paginatedItems } +} diff --git a/packages/vuetify/src/components/VDataTable/composables/select.ts b/packages/vuetify/src/components/VDataTable/composables/select.ts new file mode 100644 index 0000000..fcea69f --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/select.ts @@ -0,0 +1,190 @@ +// Composables +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, inject, provide } from 'vue' +import { deepEqual, propsFactory, wrapInArray } from '@/util' + +// Types +import type { InjectionKey, PropType, Ref } from 'vue' +import type { DataTableItemProps } from './items' +import type { EventProp } from '@/util' + +export interface SelectableItem { + value: any + selectable: boolean +} + +export interface DataTableSelectStrategy { + showSelectAll: boolean + allSelected: (data: { + allItems: SelectableItem[] + currentPage: SelectableItem[] + }) => SelectableItem[] + select: (data: { + items: SelectableItem[] + value: boolean + selected: Set + }) => Set + selectAll: (data: { + value: boolean + allItems: SelectableItem[] + currentPage: SelectableItem[] + selected: Set + }) => Set +} + +type SelectionProps = Pick & { + modelValue: readonly any[] + selectStrategy: 'single' | 'page' | 'all' + valueComparator: typeof deepEqual + 'onUpdate:modelValue': EventProp<[any[]]> | undefined +} + +const singleSelectStrategy: DataTableSelectStrategy = { + showSelectAll: false, + allSelected: () => [], + select: ({ items, value }) => { + return new Set(value ? [items[0]?.value] : []) + }, + selectAll: ({ selected }) => selected, +} + +const pageSelectStrategy: DataTableSelectStrategy = { + showSelectAll: true, + allSelected: ({ currentPage }) => currentPage, + select: ({ items, value, selected }) => { + for (const item of items) { + if (value) selected.add(item.value) + else selected.delete(item.value) + } + + return selected + }, + selectAll: ({ value, currentPage, selected }) => pageSelectStrategy.select({ items: currentPage, value, selected }), +} + +const allSelectStrategy: DataTableSelectStrategy = { + showSelectAll: true, + allSelected: ({ allItems }) => allItems, + select: ({ items, value, selected }) => { + for (const item of items) { + if (value) selected.add(item.value) + else selected.delete(item.value) + } + + return selected + }, + selectAll: ({ value, allItems, selected }) => allSelectStrategy.select({ items: allItems, value, selected }), +} + +export const makeDataTableSelectProps = propsFactory({ + showSelect: Boolean, + selectStrategy: { + type: [String, Object] as PropType<'single' | 'page' | 'all'>, + default: 'page', + }, + modelValue: { + type: Array as PropType, + default: () => ([]), + }, + valueComparator: { + type: Function as PropType, + default: deepEqual, + }, +}, 'DataTable-select') + +export const VDataTableSelectionSymbol: InjectionKey> = Symbol.for('vuetify:data-table-selection') + +export function provideSelection ( + props: SelectionProps, + { allItems, currentPage }: { allItems: Ref, currentPage: Ref } +) { + const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => { + return new Set(wrapInArray(v).map(v => { + return allItems.value.find(item => props.valueComparator(v, item.value))?.value ?? v + })) + }, v => { + return [...v.values()] + }) + + const allSelectable = computed(() => allItems.value.filter(item => item.selectable)) + const currentPageSelectable = computed(() => currentPage.value.filter(item => item.selectable)) + + const selectStrategy = computed(() => { + if (typeof props.selectStrategy === 'object') return props.selectStrategy + + switch (props.selectStrategy) { + case 'single': return singleSelectStrategy + case 'all': return allSelectStrategy + case 'page': + default: return pageSelectStrategy + } + }) + + function isSelected (items: SelectableItem | SelectableItem[]) { + return wrapInArray(items).every(item => selected.value.has(item.value)) + } + + function isSomeSelected (items: SelectableItem | SelectableItem[]) { + return wrapInArray(items).some(item => selected.value.has(item.value)) + } + + function select (items: SelectableItem[], value: boolean) { + const newSelected = selectStrategy.value.select({ + items, + value, + selected: new Set(selected.value), + }) + + selected.value = newSelected + } + + function toggleSelect (item: SelectableItem) { + select([item], !isSelected([item])) + } + + function selectAll (value: boolean) { + const newSelected = selectStrategy.value.selectAll({ + value, + allItems: allSelectable.value, + currentPage: currentPageSelectable.value, + selected: new Set(selected.value), + }) + + selected.value = newSelected + } + + const someSelected = computed(() => selected.value.size > 0) + const allSelected = computed(() => { + const items = selectStrategy.value.allSelected({ + allItems: allSelectable.value, + currentPage: currentPageSelectable.value, + }) + return !!items.length && isSelected(items) + }) + const showSelectAll = computed(() => selectStrategy.value.showSelectAll) + + const data = { + toggleSelect, + select, + selectAll, + isSelected, + isSomeSelected, + someSelected, + allSelected, + showSelectAll, + } + + provide(VDataTableSelectionSymbol, data) + + return data +} + +export function useSelection () { + const data = inject(VDataTableSelectionSymbol) + + if (!data) throw new Error('Missing selection!') + + return data +} diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts new file mode 100644 index 0000000..d2e316d --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -0,0 +1,197 @@ +// Composables +import { useLocale } from '@/composables' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, inject, provide, toRef } from 'vue' +import { isEmpty, propsFactory } from '@/util' + +// Types +import type { InjectionKey, PropType, Ref } from 'vue' +import type { DataTableCompareFunction, InternalDataTableHeader } from '../types' +import type { InternalItem } from '@/composables/filter' + +export const makeDataTableSortProps = propsFactory({ + sortBy: { + type: Array as PropType, + default: () => ([]), + }, + customKeySort: Object as PropType>, + multiSort: Boolean, + mustSort: Boolean, +}, 'DataTable-sort') + +const VDataTableSortSymbol: InjectionKey<{ + sortBy: Ref + toggleSort: (column: InternalDataTableHeader) => void + isSorted: (column: InternalDataTableHeader) => boolean +}> = Symbol.for('vuetify:data-table-sort') + +export type SortItem = { key: string, order?: boolean | 'asc' | 'desc' } + +type SortProps = { + sortBy: readonly SortItem[] + 'onUpdate:sortBy': ((value: any) => void) | undefined + mustSort: boolean + multiSort: boolean +} + +export function createSort (props: SortProps) { + const sortBy = useProxiedModel(props, 'sortBy') + const mustSort = toRef(props, 'mustSort') + const multiSort = toRef(props, 'multiSort') + + return { sortBy, mustSort, multiSort } +} + +export function provideSort (options: { + sortBy: Ref + mustSort: Ref + multiSort: Ref + page?: Ref +}) { + const { sortBy, mustSort, multiSort, page } = options + + const toggleSort = (column: InternalDataTableHeader) => { + if (column.key == null) return + + let newSortBy = sortBy.value.map(x => ({ ...x })) ?? [] + const item = newSortBy.find(x => x.key === column.key) + + if (!item) { + if (multiSort.value) newSortBy = [...newSortBy, { key: column.key, order: 'asc' }] + else newSortBy = [{ key: column.key, order: 'asc' }] + } else if (item.order === 'desc') { + if (mustSort.value) { + item.order = 'asc' + } else { + newSortBy = newSortBy.filter(x => x.key !== column.key) + } + } else { + item.order = 'desc' + } + + sortBy.value = newSortBy + if (page) page.value = 1 + } + + function isSorted (column: InternalDataTableHeader) { + return !!sortBy.value.find(item => item.key === column.key) + } + + const data = { sortBy, toggleSort, isSorted } + + provide(VDataTableSortSymbol, data) + + return data +} + +export function useSort () { + const data = inject(VDataTableSortSymbol) + + if (!data) throw new Error('Missing sort!') + + return data +} + +// TODO: abstract into project composable +export function useSortedItems ( + props: { + customKeySort: Record | undefined + }, + items: Ref, + sortBy: Ref, + options?: { + transform?: (item: T) => {} + sortFunctions?: Ref | undefined> + sortRawFunctions?: Ref | undefined> + }, +) { + const locale = useLocale() + const sortedItems = computed(() => { + if (!sortBy.value.length) return items.value + + return sortItems(items.value, sortBy.value, locale.current.value, { + transform: options?.transform, + sortFunctions: { + ...props.customKeySort, + ...options?.sortFunctions?.value, + }, + sortRawFunctions: options?.sortRawFunctions?.value, + }) + }) + + return { sortedItems } +} + +export function sortItems ( + items: T[], + sortByItems: readonly SortItem[], + locale: string, + options?: { + transform?: (item: T) => Record + sortFunctions?: Record + sortRawFunctions?: Record + }, +): T[] { + const stringCollator = new Intl.Collator(locale, { sensitivity: 'accent', usage: 'sort' }) + + const transformedItems = items.map(item => ( + [item, options?.transform ? options.transform(item) : item as never] as const) + ) + + return transformedItems.sort((a, b) => { + for (let i = 0; i < sortByItems.length; i++) { + let hasCustomResult = false + const sortKey = sortByItems[i].key + const sortOrder = sortByItems[i].order ?? 'asc' + + if (sortOrder === false) continue + + let sortA = a[1][sortKey] + let sortB = b[1][sortKey] + let sortARaw = a[0].raw + let sortBRaw = b[0].raw + + if (sortOrder === 'desc') { + [sortA, sortB] = [sortB, sortA] + ;[sortARaw, sortBRaw] = [sortBRaw, sortARaw] + } + + if (options?.sortRawFunctions?.[sortKey]) { + const customResult = options.sortRawFunctions[sortKey](sortARaw, sortBRaw) + + if (customResult == null) continue + hasCustomResult = true + if (customResult) return customResult + } + + if (options?.sortFunctions?.[sortKey]) { + const customResult = options.sortFunctions[sortKey](sortA, sortB) + + if (customResult == null) continue + hasCustomResult = true + if (customResult) return customResult + } + + if (hasCustomResult) continue + + // Dates should be compared numerically + if (sortA instanceof Date && sortB instanceof Date) { + return sortA.getTime() - sortB.getTime() + } + + [sortA, sortB] = [sortA, sortB].map(s => s != null ? s.toString().toLocaleLowerCase() : s) + + if (sortA !== sortB) { + if (isEmpty(sortA) && isEmpty(sortB)) return 0 + if (isEmpty(sortA)) return -1 + if (isEmpty(sortB)) return 1 + if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB) + return stringCollator.compare(sortA, sortB) + } + } + + return 0 + }).map(([item]) => item) +} diff --git a/packages/vuetify/src/components/VDataTable/index.ts b/packages/vuetify/src/components/VDataTable/index.ts new file mode 100644 index 0000000..da1fdaf --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/index.ts @@ -0,0 +1,7 @@ +export { VDataTable } from './VDataTable' +export { VDataTableHeaders } from './VDataTableHeaders' +export { VDataTableFooter } from './VDataTableFooter' +export { VDataTableRows } from './VDataTableRows' +export { VDataTableRow } from './VDataTableRow' +export { VDataTableVirtual } from './VDataTableVirtual' +export { VDataTableServer } from './VDataTableServer' diff --git a/packages/vuetify/src/components/VDataTable/types.ts b/packages/vuetify/src/components/VDataTable/types.ts new file mode 100644 index 0000000..1a9ec44 --- /dev/null +++ b/packages/vuetify/src/components/VDataTable/types.ts @@ -0,0 +1,97 @@ +// Types +import type { provideExpanded } from './composables/expand' +import type { Group, GroupableItem, provideGroupBy } from './composables/group' +import type { provideSelection, SelectableItem } from './composables/select' +import type { FilterFunction, InternalItem } from '@/composables/filter' +import type { SelectItemKey } from '@/util' + +export type DataTableCompareFunction = (a: T, b: T) => number | null + +export type DataTableHeader> = { + key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {}) + value?: SelectItemKey + title?: string + + fixed?: boolean + align?: 'start' | 'end' | 'center' + + width?: number | string + minWidth?: string + maxWidth?: string + nowrap?: boolean + + headerProps?: Record + cellProps?: HeaderCellProps + + sortable?: boolean + sort?: DataTableCompareFunction + sortRaw?: DataTableCompareFunction + filter?: FilterFunction + + mobile?: boolean + + children?: DataTableHeader[] +} + +export type InternalDataTableHeader = Omit & { + key: string | null + value: SelectItemKey | null + sortable: boolean + fixedOffset?: number + lastFixed?: boolean + nowrap?: boolean + colspan?: number + rowspan?: number + children?: InternalDataTableHeader[] +} + +export interface DataTableItem extends InternalItem, GroupableItem, SelectableItem { + key: any + index: number + columns: { + [key: string]: any + } +} + +export type GroupHeaderSlot = { + index: number + item: Group + columns: InternalDataTableHeader[] + isExpanded: ReturnType['isExpanded'] + toggleExpand: ReturnType['toggleExpand'] + isSelected: ReturnType['isSelected'] + toggleSelect: ReturnType['toggleSelect'] + toggleGroup: ReturnType['toggleGroup'] + isGroupOpen: ReturnType['isGroupOpen'] +} + +type ItemSlotBase = { + index: number + item: T + internalItem: DataTableItem + isExpanded: ReturnType['isExpanded'] + toggleExpand: ReturnType['toggleExpand'] + isSelected: ReturnType['isSelected'] + toggleSelect: ReturnType['toggleSelect'] +} + +export type ItemSlot = ItemSlotBase & { + columns: InternalDataTableHeader[] +} + +export type ItemKeySlot = ItemSlotBase & { + value: any + column: InternalDataTableHeader +} + +export type RowProps = + | Record + | ((data: Pick, 'index' | 'item' | 'internalItem'>) => Record) + +export type CellProps = + | Record + | ((data: Pick, 'index' | 'item' | 'internalItem' | 'value' | 'column'>) => Record) + +export type HeaderCellProps = + | Record + | ((data: Pick, 'index' | 'item' | 'internalItem' | 'value'>) => Record) diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.sass b/packages/vuetify/src/components/VDatePicker/VDatePicker.sass new file mode 100644 index 0000000..9621aee --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.sass @@ -0,0 +1,10 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-date-picker + overflow: hidden + width: $date-picker-width + + &--show-week + width: $date-picker-show-week-width diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx new file mode 100644 index 0000000..0e6e6d9 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx @@ -0,0 +1,365 @@ +// Styles +import './VDatePicker.sass' + +// Components +import { makeVDatePickerControlsProps, VDatePickerControls } from './VDatePickerControls' +import { VDatePickerHeader } from './VDatePickerHeader' +import { makeVDatePickerMonthProps, VDatePickerMonth } from './VDatePickerMonth' +import { makeVDatePickerMonthsProps, VDatePickerMonths } from './VDatePickerMonths' +import { makeVDatePickerYearsProps, VDatePickerYears } from './VDatePickerYears' +import { VFadeTransition } from '@/components/transitions' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker' + +// Composables +import { useDate } from '@/composables/date' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, ref, shallowRef, watch } from 'vue' +import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util' + +// Types +import type { VPickerSlots } from '@/labs/VPicker/VPicker' +import type { GenericProps } from '@/util' + +// Types +export type VDatePickerSlots = Omit & { + header: { + header: string + transition: string + } +} + +export const makeVDatePickerProps = propsFactory({ + // TODO: implement in v3.5 + // calendarIcon: { + // type: String, + // default: '$calendar', + // }, + // keyboardIcon: { + // type: String, + // default: '$edit', + // }, + // inputMode: { + // type: String as PropType<'calendar' | 'keyboard'>, + // default: 'calendar', + // }, + // inputText: { + // type: String, + // default: '$vuetify.datePicker.input.placeholder', + // }, + // inputPlaceholder: { + // type: String, + // default: 'dd/mm/yyyy', + // }, + header: { + type: String, + default: '$vuetify.datePicker.header', + }, + + ...makeVDatePickerControlsProps(), + ...makeVDatePickerMonthProps({ + weeksInMonth: 'static' as const, + }), + ...omit(makeVDatePickerMonthsProps(), ['modelValue']), + ...omit(makeVDatePickerYearsProps(), ['modelValue']), + ...makeVPickerProps({ title: '$vuetify.datePicker.title' }), + + modelValue: null, +}, 'VDatePicker') + +export const VDatePicker = genericComponent ( + props: { + modelValue?: TModel + 'onUpdate:modelValue'?: (value: TModel) => void + multiple?: Multiple + }, + slots: VDatePickerSlots +) => GenericProps>()({ + name: 'VDatePicker', + + props: makeVDatePickerProps(), + + emits: { + 'update:modelValue': (date: any) => true, + 'update:month': (date: any) => true, + 'update:year': (date: any) => true, + // 'update:inputMode': (date: any) => true, + 'update:viewMode': (date: any) => true, + }, + + setup (props, { emit, slots }) { + const adapter = useDate() + const { t } = useLocale() + + const model = useProxiedModel( + props, + 'modelValue', + undefined, + v => wrapInArray(v), + v => props.multiple ? v : v[0], + ) + + const viewMode = useProxiedModel(props, 'viewMode') + // const inputMode = useProxiedModel(props, 'inputMode') + const internal = computed(() => { + const value = adapter.date(model.value?.[0]) + + return value && adapter.isValid(value) ? value : adapter.date() + }) + + const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value)))) + const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value))))) + + const isReversing = shallowRef(false) + const header = computed(() => { + if (props.multiple && model.value.length > 1) { + return t('$vuetify.datePicker.itemsSelected', model.value.length) + } + + return (model.value[0] && adapter.isValid(model.value[0])) + ? adapter.format(adapter.date(model.value[0]), 'normalDateWithWeekday') + : t(props.header) + }) + const text = computed(() => { + let date = adapter.date() + + date = adapter.setDate(date, 1) + date = adapter.setMonth(date, month.value) + date = adapter.setYear(date, year.value) + + return adapter.format(date, 'monthAndYear') + }) + // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon) + const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`) + const minDate = computed(() => { + const date = adapter.date(props.min) + + return props.min && adapter.isValid(date) ? date : null + }) + const maxDate = computed(() => { + const date = adapter.date(props.max) + + return props.max && adapter.isValid(date) ? date : null + }) + const disabled = computed(() => { + if (props.disabled) return true + + const targets = [] + + if (viewMode.value !== 'month') { + targets.push(...['prev', 'next']) + } else { + let _date = adapter.date() + + _date = adapter.setYear(_date, year.value) + _date = adapter.setMonth(_date, month.value) + + if (minDate.value) { + const date = adapter.addDays(adapter.startOfMonth(_date), -1) + + adapter.isAfter(minDate.value, date) && targets.push('prev') + } + + if (maxDate.value) { + const date = adapter.addDays(adapter.endOfMonth(_date), 1) + + adapter.isAfter(date, maxDate.value) && targets.push('next') + } + } + + return targets + }) + + // function onClickAppend () { + // inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar' + // } + + function onClickNext () { + if (month.value < 11) { + month.value++ + } else { + year.value++ + month.value = 0 + onUpdateYear(year.value) + } + onUpdateMonth(month.value) + } + + function onClickPrev () { + if (month.value > 0) { + month.value-- + } else { + year.value-- + month.value = 11 + onUpdateYear(year.value) + } + onUpdateMonth(month.value) + } + + function onClickDate () { + viewMode.value = 'month' + } + + function onClickMonth () { + viewMode.value = viewMode.value === 'months' ? 'month' : 'months' + } + + function onClickYear () { + viewMode.value = viewMode.value === 'year' ? 'month' : 'year' + } + + function onUpdateMonth (value: number) { + if (viewMode.value === 'months') onClickMonth() + + emit('update:month', value) + } + + function onUpdateYear (value: number) { + if (viewMode.value === 'year') onClickYear() + + emit('update:year', value) + } + + watch(model, (val, oldVal) => { + const arrBefore = wrapInArray(oldVal) + const arrAfter = wrapInArray(val) + + if (!arrAfter.length) return + + const before = adapter.date(arrBefore[arrBefore.length - 1]) + const after = adapter.date(arrAfter[arrAfter.length - 1]) + const newMonth = adapter.getMonth(after) + const newYear = adapter.getYear(after) + + if (newMonth !== month.value) { + month.value = newMonth + onUpdateMonth(month.value) + } + + if (newYear !== year.value) { + year.value = newYear + onUpdateYear(year.value) + } + + isReversing.value = adapter.isBefore(before, after) + }) + + useRender(() => { + const pickerProps = VPicker.filterProps(props) + const datePickerControlsProps = VDatePickerControls.filterProps(props) + const datePickerHeaderProps = VDatePickerHeader.filterProps(props) + const datePickerMonthProps = VDatePickerMonth.filterProps(props) + const datePickerMonthsProps = omit(VDatePickerMonths.filterProps(props), ['modelValue']) + const datePickerYearsProps = omit(VDatePickerYears.filterProps(props), ['modelValue']) + + const headerProps = { + header: header.value, + transition: headerTransition.value, + } + + return ( + slots.title?.() ?? ( +
    + { t(props.title) } +
    + ), + header: () => slots.header ? ( + + { slots.header?.(headerProps) } + + ) : ( + + ), + default: () => ( + <> + + + + { viewMode.value === 'months' ? ( + + ) : viewMode.value === 'year' ? ( + + ) : ( + + )} + + + ), + actions: slots.actions, + }} + /> + ) + }) + + return {} + }, +}) + +export type VDatePicker = InstanceType diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerControls.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.sass new file mode 100644 index 0000000..3420da1 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.sass @@ -0,0 +1,58 @@ +@use '../../styles/tools' + +@include tools.layer('components') + .v-date-picker-controls + display: flex + align-items: center + justify-content: space-between + font-size: .875rem + padding-top: 4px + padding-bottom: 4px + padding-inline-start: 6px + padding-inline-end: 12px + + > .v-btn:first-child + text-transform: none + font-weight: 400 + line-height: initial + letter-spacing: initial + + &--variant-classic + padding-inline-start: 12px + + &--variant-modern + .v-date-picker__title + &:not(:hover) + opacity: .7 + + .v-date-picker--month & + cursor: pointer + + .v-date-picker--year & + opacity: 1 + + .v-btn:last-child + margin-inline-start: 4px + + .v-date-picker--year & + .v-date-picker-controls__mode-btn + transform: rotate(180deg) + + .v-date-picker-controls__date + margin-inline-end: 4px + + .v-date-picker-controls--variant-classic & + margin: auto + text-align: center + + .v-date-picker-controls__month + display: flex + + @include tools.rtl() + flex-direction: row-reverse + + .v-date-picker-controls--variant-classic & + flex: 1 0 auto + + .v-date-picker__title + display: inline-block diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx new file mode 100644 index 0000000..4d66e80 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx @@ -0,0 +1,152 @@ +// Styles +import './VDatePickerControls.sass' + +// Components +import { VBtn } from '@/components/VBtn' +import { VSpacer } from '@/components/VGrid' + +// Composables +import { IconValue } from '@/composables/icons' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export const makeVDatePickerControlsProps = propsFactory({ + active: { + type: [String, Array] as PropType, + default: undefined, + }, + disabled: { + type: [Boolean, String, Array] as PropType, + default: false, + }, + nextIcon: { + type: IconValue, + default: '$next', + }, + prevIcon: { + type: IconValue, + default: '$prev', + }, + modeIcon: { + type: IconValue, + default: '$subgroup', + }, + text: String, + viewMode: { + type: String as PropType<'month' | 'months' | 'year'>, + default: 'month', + }, +}, 'VDatePickerControls') + +export const VDatePickerControls = genericComponent()({ + name: 'VDatePickerControls', + + props: makeVDatePickerControlsProps(), + + emits: { + 'click:year': () => true, + 'click:month': () => true, + 'click:prev': () => true, + 'click:next': () => true, + 'click:text': () => true, + }, + + setup (props, { emit }) { + const disableMonth = computed(() => { + return Array.isArray(props.disabled) + ? props.disabled.includes('text') + : !!props.disabled + }) + const disableYear = computed(() => { + return Array.isArray(props.disabled) + ? props.disabled.includes('mode') + : !!props.disabled + }) + const disablePrev = computed(() => { + return Array.isArray(props.disabled) + ? props.disabled.includes('prev') + : !!props.disabled + }) + const disableNext = computed(() => { + return Array.isArray(props.disabled) + ? props.disabled.includes('next') + : !!props.disabled + }) + + function onClickPrev () { + emit('click:prev') + } + + function onClickNext () { + emit('click:next') + } + + function onClickYear () { + emit('click:year') + } + + function onClickMonth () { + emit('click:month') + } + + useRender(() => { + // TODO: add slot support and scope defaults + return ( +
    + + + + + + +
    + + + +
    +
    + ) + }) + + return {} + }, +}) + +export type VDatePickerControls = InstanceType diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass new file mode 100644 index 0000000..1da7cd8 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.sass @@ -0,0 +1,61 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-date-picker-header + align-items: flex-end + height: $date-picker-header-height + display: grid + grid-template-areas: "prepend content append" + grid-template-columns: min-content minmax(0, 1fr) min-content + overflow: hidden + padding-inline: 24px 12px + padding-bottom: 12px + + .v-date-picker-header__append + grid-area: append + + .v-date-picker-header__prepend + grid-area: prepend + padding-inline-start: 8px + + .v-date-picker-header__content + align-items: center + display: inline-flex + font-size: 32px + line-height: 40px + grid-area: content + justify-content: space-between + + .v-date-picker-header--clickable & + cursor: pointer + + &:not(:hover) + opacity: .7 + + .date-picker-header-transition, + .date-picker-header-reverse-transition + &-enter-active + transition-duration: 0.3s + transition-timing-function: settings.$standard-easing + + &-leave-active + transition-duration: 0.3s + transition-timing-function: settings.$standard-easing + + .date-picker-header-transition + &-enter-from + transform: translate(0, 100%) + + &-leave-to + opacity: 0 + transform: translate(0, -100%) + + .date-picker-header-reverse-transition + &-enter-from + transform: translate(0, -100%) + + &-leave-to + opacity: 0 + transform: translate(0, 100%) diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx new file mode 100644 index 0000000..15e13d9 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx @@ -0,0 +1,114 @@ +// Styles +import './VDatePickerHeader.sass' + +// Components +import { VBtn } from '@/components/VBtn' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { MaybeTransition } from '@/composables/transition' + +// Utilities +import { EventProp, genericComponent, propsFactory, useRender } from '@/util' + +// Types +export type VDatePickerHeaderSlots = { + prepend: never + default: never + append: never +} + +export const makeVDatePickerHeaderProps = propsFactory({ + appendIcon: String, + color: String, + header: String, + transition: String, + onClick: EventProp<[MouseEvent]>(), +}, 'VDatePickerHeader') + +export const VDatePickerHeader = genericComponent()({ + name: 'VDatePickerHeader', + + props: makeVDatePickerHeaderProps(), + + emits: { + click: () => true, + 'click:append': () => true, + }, + + setup (props, { emit, slots }) { + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') + + function onClick () { + emit('click') + } + + function onClickAppend () { + emit('click:append') + } + + useRender(() => { + const hasContent = !!(slots.default || props.header) + const hasAppend = !!(slots.append || props.appendIcon) + + return ( +
    + { slots.prepend && ( +
    + { slots.prepend() } +
    + )} + + { hasContent && ( + +
    + { slots.default?.() ?? props.header } +
    +     + )} + + { hasAppend && ( +
    + { !slots.append ? ( + + ) : ( + + { slots.append?.() } + + )} +
    + )} +
    + ) + }) + + return {} + }, +}) + +export type VDatePickerHeader = InstanceType diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass new file mode 100644 index 0000000..5468998 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass @@ -0,0 +1,55 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-date-picker-month + display: flex + justify-content: center + padding: $date-picker-month-padding + + --v-date-picker-month-day-diff: 4px + + .v-date-picker-month__weeks + display: grid + grid-template-rows: min-content min-content min-content min-content min-content min-content min-content + column-gap: $date-picker-month-column-gap + font-size: $date-picker-month-font-size + + + .v-date-picker-month__days + grid-row-gap: 0 + + .v-date-picker-month__weekday + font-size: $date-picker-month-font-size + + .v-date-picker-month__days + display: grid + grid-template-columns: min-content min-content min-content min-content min-content min-content min-content + column-gap: $date-picker-month-column-gap + flex: 1 1 + justify-content: space-around + + .v-date-picker-month__day + align-items: center + display: flex + justify-content: center + position: relative + height: $date-picker-month-day-size + width: $date-picker-month-day-size + + &--selected + .v-btn + background-color: rgb(var(--v-theme-surface-variant)) + color: rgb(var(--v-theme-on-surface-variant)) + + .v-btn.v-date-picker-month__day-btn + --v-btn-height: #{$date-picker-month-btn-height} + --v-btn-size: #{$date-picker-month-btn-size} + + &--week + font-size: var(--v-btn-size) + + .v-date-picker-month__day--adjacent + opacity: 0.5 + + .v-date-picker-month__day--hide-adjacent + opacity: 0 diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx new file mode 100644 index 0000000..384f9b7 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx @@ -0,0 +1,247 @@ +// Styles +import './VDatePickerMonth.sass' + +// Components +import { VBtn } from '@/components/VBtn' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' + +// Composables +import { makeCalendarProps, useCalendar } from '@/composables/calendar' +import { useDate } from '@/composables/date/date' +import { MaybeTransition } from '@/composables/transition' + +// Utilities +import { computed, ref, shallowRef, watch } from 'vue' +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' + +export type VDatePickerMonthSlots = { + day: { + props: { + onClick: () => void + } + item: any + i: number + } +} + +export const makeVDatePickerMonthProps = propsFactory({ + color: String, + hideWeekdays: Boolean, + multiple: [Boolean, Number, String] as PropType, + showWeek: Boolean, + transition: { + type: String, + default: 'picker-transition', + }, + reverseTransition: { + type: String, + default: 'picker-reverse-transition', + }, + + ...makeCalendarProps(), +}, 'VDatePickerMonth') + +export const VDatePickerMonth = genericComponent()({ + name: 'VDatePickerMonth', + + props: makeVDatePickerMonthProps(), + + emits: { + 'update:modelValue': (date: unknown) => true, + 'update:month': (date: number) => true, + 'update:year': (date: number) => true, + }, + + setup (props, { emit, slots }) { + const daysRef = ref() + + const { daysInMonth, model, weekNumbers } = useCalendar(props) + const adapter = useDate() + + const rangeStart = shallowRef() + const rangeStop = shallowRef() + const isReverse = shallowRef(false) + + const transition = computed(() => { + return !isReverse.value ? props.transition : props.reverseTransition + }) + + if (props.multiple === 'range' && model.value.length > 0) { + rangeStart.value = model.value[0] + if (model.value.length > 1) { + rangeStop.value = model.value[model.value.length - 1] + } + } + + const atMax = computed(() => { + const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity + + return model.value.length >= max + }) + + watch(daysInMonth, (val, oldVal) => { + if (!oldVal) return + + isReverse.value = adapter.isBefore(val[0].date, oldVal[0].date) + }) + + function onRangeClick (value: unknown) { + const _value = adapter.startOfDay(value) + + if (model.value.length === 0) { + rangeStart.value = undefined + } + if (!rangeStart.value) { + rangeStart.value = _value + model.value = [rangeStart.value] + } else if (!rangeStop.value) { + if (adapter.isSameDay(_value, rangeStart.value)) { + rangeStart.value = undefined + model.value = [] + return + } else if (adapter.isBefore(_value, rangeStart.value)) { + rangeStop.value = adapter.endOfDay(rangeStart.value) + rangeStart.value = _value + } else { + rangeStop.value = adapter.endOfDay(_value) + } + + const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days') + const datesInRange = [rangeStart.value] + + for (let i = 1; i < diff; i++) { + const nextDate = adapter.addDays(rangeStart.value, i) + datesInRange.push(nextDate) + } + + datesInRange.push(rangeStop.value) + + model.value = datesInRange + } else { + rangeStart.value = value + rangeStop.value = undefined + model.value = [rangeStart.value] + } + } + + function onMultipleClick (value: unknown) { + const index = model.value.findIndex(selection => adapter.isSameDay(selection, value)) + + if (index === -1) { + model.value = [...model.value, value] + } else { + const value = [...model.value] + value.splice(index, 1) + model.value = value + } + } + + function onClick (value: unknown) { + if (props.multiple === 'range') { + onRangeClick(value) + } else if (props.multiple) { + onMultipleClick(value) + } else { + model.value = [value] + } + } + + return () => ( +
    + { props.showWeek && ( +
    + { !props.hideWeekdays && ( +
     
    + )} + { weekNumbers.value.map(week => ( +
    { week }
    + ))} +
    + )} + + +
    + { !props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => ( +
    { weekDay }
    + ))} + + { daysInMonth.value.map((item, i) => { + const slotProps = { + props: { + onClick: () => onClick(item.date), + }, + item, + i, + } as const + + if (atMax.value && !item.isSelected) { + item.isDisabled = true + } + + return ( +
    + + { (props.showAdjacentMonths || !item.isAdjacent) && ( + onClick(item.date), + }, + }} + > + { slots.day?.(slotProps) ?? ( + + )} + + )} +
    + ) + })} +
    +     +
    + ) + }, +}) + +export type VDatePickerMonth = InstanceType diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass new file mode 100644 index 0000000..2bae969 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.sass @@ -0,0 +1,22 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-date-picker-months + height: $date-picker-months-height + + .v-date-picker-months__content + align-items: center + display: grid + flex: 1 1 + height: inherit + justify-content: space-around + grid-template-columns: repeat(2, 1fr) + grid-gap: $date-picker-months-grid-gap + padding-inline-start: 36px + padding-inline-end: 36px + + .v-btn + text-transform: none + padding-inline-start: 8px + padding-inline-end: 8px diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx new file mode 100644 index 0000000..a412e75 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx @@ -0,0 +1,125 @@ +// Styles +import './VDatePickerMonths.sass' + +// Components +import { VBtn } from '@/components/VBtn' + +// Composables +import { useDate } from '@/composables/date' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, watchEffect } from 'vue' +import { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export type VDatePickerMonthsSlots = { + month: { + month: { + text: string + value: number + } + i: number + props: { + onClick: () => void + } + } +} + +export const makeVDatePickerMonthsProps = propsFactory({ + color: String, + height: [String, Number], + min: null as any as PropType, + max: null as any as PropType, + modelValue: Number, + year: Number, +}, 'VDatePickerMonths') + +export const VDatePickerMonths = genericComponent()({ + name: 'VDatePickerMonths', + + props: makeVDatePickerMonthsProps(), + + emits: { + 'update:modelValue': (date: any) => true, + }, + + setup (props, { emit, slots }) { + const adapter = useDate() + const model = useProxiedModel(props, 'modelValue') + + const months = computed(() => { + let date = adapter.startOfYear(adapter.date()) + if (props.year) { + date = adapter.setYear(date, props.year) + } + return createRange(12).map(i => { + const text = adapter.format(date, 'monthShort') + const isDisabled = + !!( + (props.min && adapter.isAfter(adapter.startOfMonth(adapter.date(props.min)), date)) || + (props.max && adapter.isAfter(date, adapter.startOfMonth(adapter.date(props.max)))) + ) + date = adapter.getNextMonth(date) + + return { + isDisabled, + text, + value: i, + } + }) + }) + + watchEffect(() => { + model.value = model.value ?? adapter.getMonth(adapter.date()) + }) + + useRender(() => ( +
    +
    + { months.value.map((month, i) => { + const btnProps = { + active: model.value === i, + color: model.value === i ? props.color : undefined, + disabled: month.isDisabled, + rounded: true, + text: month.text, + variant: model.value === month.value ? 'flat' : 'text', + onClick: () => onClick(i), + } as const + + function onClick (i: number) { + if (model.value === i) { + emit('update:modelValue', model.value) + return + } + model.value = i + } + + return slots.month?.({ + month, + i, + props: btnProps, + }) ?? ( + + ) + })} +
    +
    + )) + + return {} + }, +}) + +export type VDatePickerMonths = InstanceType diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass new file mode 100644 index 0000000..81d6071 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.sass @@ -0,0 +1,18 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-date-picker-years + height: $date-picker-years-height + overflow-y: scroll + + .v-date-picker-years__content + display: grid + flex: 1 1 + justify-content: space-around + grid-template-columns: repeat(3, 1fr) + gap: 8px 24px + padding-inline: $date-picker-years-padding-inline + + .v-btn + padding-inline: 8px diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx new file mode 100644 index 0000000..4910d07 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx @@ -0,0 +1,141 @@ +// Styles +import './VDatePickerYears.sass' + +// Components +import { VBtn } from '@/components/VBtn' + +// Composables +import { useDate } from '@/composables/date' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, nextTick, onMounted, watchEffect } from 'vue' +import { convertToUnit, createRange, genericComponent, propsFactory, templateRef, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +// Types +export type VDatePickerYearsSlots = { + year: { + year: { + text: string + value: number + } + i: number + props: { + active: boolean + color?: string + rounded: boolean + text: string + variant: 'flat' | 'text' + onClick: () => void + } + } +} + +export const makeVDatePickerYearsProps = propsFactory({ + color: String, + height: [String, Number], + min: null as any as PropType, + max: null as any as PropType, + modelValue: Number, +}, 'VDatePickerYears') + +export const VDatePickerYears = genericComponent()({ + name: 'VDatePickerYears', + + props: makeVDatePickerYearsProps(), + + emits: { + 'update:modelValue': (year: number) => true, + }, + + setup (props, { emit, slots }) { + const adapter = useDate() + const model = useProxiedModel(props, 'modelValue') + const years = computed(() => { + const year = adapter.getYear(adapter.date()) + + let min = year - 100 + let max = year + 52 + + if (props.min) { + min = adapter.getYear(adapter.date(props.min)) + } + + if (props.max) { + max = adapter.getYear(adapter.date(props.max)) + } + + let date = adapter.startOfYear(adapter.date()) + + date = adapter.setYear(date, min) + + return createRange(max - min + 1, min).map(i => { + const text = adapter.format(date, 'year') + date = adapter.setYear(date, adapter.getYear(date) + 1) + + return { + text, + value: i, + } + }) + }) + + watchEffect(() => { + model.value = model.value ?? adapter.getYear(adapter.date()) + }) + + const yearRef = templateRef() + + onMounted(async () => { + await nextTick() + yearRef.el?.scrollIntoView({ block: 'center' }) + }) + + useRender(() => ( +
    +
    + { years.value.map((year, i) => { + const btnProps = { + ref: model.value === year.value ? yearRef : undefined, + active: model.value === year.value, + color: model.value === year.value ? props.color : undefined, + rounded: true, + text: year.text, + variant: model.value === year.value ? 'flat' : 'text', + onClick: () => { + if (model.value === year.value) { + emit('update:modelValue', model.value) + return + } + model.value = year.value + }, + } as const + + return slots.year?.({ + year, + i, + props: btnProps, + }) ?? ( + + ) + })} +
    +
    + )) + + return {} + }, +}) + +export type VDatePickerYears = InstanceType diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.date.spec.ts b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.date.spec.ts new file mode 100644 index 0000000..21a70a7 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.date.spec.ts @@ -0,0 +1,767 @@ +// @ts-nocheck +/* eslint-disable */ + +// import { touch } from '../../../../test' +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' +// import { Lang } from '../../../services/lang' +// import VDatePicker from '../VDatePicker' +// import Vue from 'vue' +// import { preset } from '../../../presets/default' + +// Vue.prototype.$vuetify = { +// icons: { +// values: { +// next: 'mdi-chevron-right', +// prev: 'mdi-chevron-left', +// }, +// }, +// } + +describe.skip('VDatePicker.ts', () => { // eslint-disable-line max-statements + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VDatePicker, { + ...options, + mocks: { + $vuetify: { + lang: new Lang({ + ...preset, + }), + }, + }, + }) + } + }) + + it('should display the correct date in title and header', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + }, + }) + + const title = wrapper.findAll('.v-date-picker-title__date').at(0) + const header = wrapper.findAll('.v-date-picker-header__value div').at(0) + + expect(title.text()).toBe('Tue, Nov 1') + expect(header.text()).toBe('November 2005') + }) + + it('should work with year < 1000', () => { + expect(() => { + mountFunction({ + propsData: { + value: '0005-11-01', + }, + }) + }).not.toThrow() + }) + + it('should display the correct year when model is null', () => { + const wrapper = mountFunction({ + propsData: { + value: null, + pickerDate: '2013-01', + }, + }) + + const year = wrapper.findAll('.v-date-picker-title__year').at(0) + + expect(year.text()).toBe('2013') + }) + + it('should match snapshot with default settings', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render readonly picker', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + readonly: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render flat picker', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + flat: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render picker with elevation', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + elevation: 15, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render disabled picker', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + disabled: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should emit input event on date click', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + }, + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + const change = jest.fn() + wrapper.vm.$on('change', change) + + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('click') + expect(input).toHaveBeenCalledWith('2013-05-05') + expect(change).toHaveBeenCalledWith('2013-05-05') + }) + + it('should not emit input event on month click if date is not allowed', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + value: '2013-05-13', + allowedDates: () => false, + }, + data: () => ({ + internalActivePicker: 'MONTH', + }), + }) + + wrapper.vm.$on('input', cb) + wrapper.findAll('.v-date-picker-table--month button').at(0).trigger('click') + expect(cb).not.toHaveBeenCalled() + }) + + it('should emit input event on year click (reactive picker)', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-13', + reactive: true, + }, + data: () => ({ + internalActivePicker: 'YEAR', + }), + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + const change = jest.fn() + wrapper.vm.$on('change', input) + + wrapper.findAll('.v-date-picker-years li.active + li').at(0).trigger('click') + expect(input).toHaveBeenCalledWith('2012-05-13') + expect(change).not.toHaveBeenCalled() + }) + + it('should not emit input event on year click if date is not allowed', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + value: '2013-05-13', + allowedDates: () => false, + }, + data: () => ({ + internalActivePicker: 'YEAR', + }), + }) + + wrapper.vm.$on('input', cb) + wrapper.findAll('.v-date-picker-years li.active + li').at(0).trigger('click') + expect(cb).not.toHaveBeenCalled() + }) + + it('should emit input event with selected dates after click', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + multiple: true, + value: ['2013-05-07', '2013-05-08'], + }, + }) + + wrapper.vm.$on('input', cb) + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('click') + expect(cb.mock.calls[0][0]).toHaveLength(3) + expect(cb.mock.calls[0][0][2]).toBe('2013-05-05') + expect(cb.mock.calls[0][0]).toEqual( + expect.arrayContaining(['2013-05-07', '2013-05-08', '2013-05-05']), + ) + }) + + it('should display translated title', async () => { + const wrapper = mountFunction({ + propsData: { + multiple: true, + value: ['2013-05-07'], + }, + }) + + expect(wrapper.find('.v-date-picker-title__date').text()).toBe('Tue, May 7') + + wrapper.setProps({ + value: [], + }) + expect(wrapper.find('.v-date-picker-title__date').text()).toBe('-') + + wrapper.setProps({ + value: ['2013-05-07', '2013-05-08', '2013-05-09'], + }) + expect(wrapper.find('.v-date-picker-title__date').text()).toBe('3 selected') + }) + + it('should emit input without unselected dates after click', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + multiple: true, + value: ['2013-05-07', '2013-05-08', '2013-05-05'], + }, + }) + + wrapper.vm.$on('input', cb) + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('click') + expect(cb.mock.calls[0][0]).toHaveLength(2) + expect(cb.mock.calls[0][0]).toEqual(expect.arrayContaining(['2013-05-07', '2013-05-08'])) + expect(cb.mock.calls[0][0]).not.toEqual(expect.arrayContaining(['2013-05-05'])) + }) + + it('should be scrollable', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + scrollable: true, + }, + }) + + wrapper.findAll('.v-date-picker-table--date').at(0).trigger('wheel', { deltaY: 1 }) + expect(wrapper.vm.tableDate).toBe('2013-06') + }) + + it('should change tableDate on touch', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + scrollable: true, + }, + }) + + const table = wrapper.findAll('.v-date-picker-table--date').at(0) + touch(table).start(0, 0).end(20, 0) + expect(wrapper.vm.tableDate).toBe('2013-04') + + touch(table).start(0, 0).end(-20, 0) + expect(wrapper.vm.tableDate).toBe('2013-05') + }) + + it('should match snapshot with dark theme', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + dark: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match snapshot with no title', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + noTitle: true, + }, + }) + + expect(wrapper.findAll('.v-picker__title').wrappers).toHaveLength(0) + }) + + it('should pass first day of week to v-date-picker-table component', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + firstDayOfWeek: 2, + }, + }) + + expect(wrapper.vm.$refs.table.firstDayOfWeek).toBe(2) + }) + + // TODO: This fails in different ways for multiple people + // Avoriaz/Jsdom (?) doesn't fully support date formatting using locale + // This should be tested in browser env + it.skip('should match snapshot with locale', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + locale: 'fa-AF', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match snapshot with title/header formatting functions', () => { + const dateFormat = date => `(${date})` + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + headerDateFormat: dateFormat, + titleDateFormat: dateFormat, + weekdayFormat: () => 'W', + }, + }) + + expect(wrapper.findAll('.v-date-picker-title__date').at(0).text()).toBe('(2005-11-01)') + expect(wrapper.findAll('.v-date-picker-header__value').at(0).text()).toBe('(2005-11)') + expect(wrapper.findAll('.v-date-picker-table--date th').at(1).text()).toBe('W') + }) + + it('should match snapshot with colored picker & header', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + color: 'primary', + headerColor: 'orange darken-1', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match snapshot with colored picker', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + color: 'orange darken-1', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match snapshot with year icon', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + yearIcon: 'year', + }, + }) + + expect(wrapper.findAll('.v-picker__title').at(0).html()).toMatchSnapshot() + }) + + it('should match change month when clicked on header arrow buttons', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + }, + }) + + const [leftButton, rightButton] = wrapper.findAll('.v-date-picker-header button.v-btn').wrappers + + leftButton.trigger('click') + expect(wrapper.vm.tableDate).toBe('2005-10') + + rightButton.trigger('click') + expect(wrapper.vm.tableDate).toBe('2005-11') + }) + + it('should match change active picker when clicked on month button', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + }, + }) + + const button = wrapper.findAll('.v-date-picker-header__value button').at(0) + + button.trigger('click') + expect(wrapper.vm.internalActivePicker).toBe('MONTH') + }) + + it('should match snapshot with slot', async () => { + const wrapper = mountFunction({ + propsData: { + type: 'date', + value: '2005-11-01', + }, + scopedSlots: { + default: '
    ', + }, + }) + expect(wrapper.findAll('.v-picker__actions .scoped-slot').wrappers).toHaveLength(1) + }) + + it('should match years snapshot', async () => { + const wrapper = mountFunction({ + data: () => ({ + internalActivePicker: 'YEAR', + }), + propsData: { + type: 'date', + value: '2005-11-01', + }, + }) + + expect(wrapper.vm.internalActivePicker).toBe('YEAR') + + wrapper.findAll('.v-date-picker-title__date').at(0).trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.vm.internalActivePicker).toBe('DATE') + + wrapper.findAll('.v-date-picker-title__year').at(0).trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.vm.internalActivePicker).toBe('YEAR') + }) + + it('should select year', async () => { + const wrapper = mountFunction({ + data: () => ({ + internalActivePicker: 'YEAR', + }), + propsData: { + type: 'date', + value: '2005-11-01', + }, + }) + + wrapper.findAll('.v-date-picker-years li.active + li').at(0).trigger('click') + expect(wrapper.vm.internalActivePicker).toBe('MONTH') + expect(wrapper.vm.tableDate).toBe('2004-11') + }) + + it('should set the table date when value has changed', () => { + const wrapper = mountFunction({ + propsData: { + value: null, + }, + }) + + wrapper.setProps({ value: '2005-11-11' }) + expect(wrapper.vm.tableDate).toBe('2005-11') + }) + + it('should update the active picker if type has changed', () => { + const wrapper = mountFunction({ + propsData: { + value: '1999-12-13', + type: 'date', + }, + }) + + wrapper.vm.$on('input', value => wrapper.setProps({ value })) + + wrapper.setProps({ type: 'month' }) + expect(wrapper.vm.internalActivePicker).toBe('MONTH') + expect(wrapper.vm.value).toBe('1999-12') + // TODO: uncomment when type: 'year' is implemented + // wrapper.setProps({ type: 'year' }) + // expect(wrapper.vm.internalActivePicker).toBe('YEAR') + // expect(wrapper.vm.inputDate).toBe('1999') + // wrapper.setProps({ type: 'month' }) + // expect(wrapper.vm.internalActivePicker).toBe('MONTH') + // expect(wrapper.vm.inputDate).toBe('1999-01') + wrapper.setProps({ type: 'date' }) + expect(wrapper.vm.internalActivePicker).toBe('DATE') + expect(wrapper.vm.value).toBe('1999-12-01') + }) + + it('should format title date', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + }, + }) + + expect(wrapper.vm.defaultTitleDateFormatter('2013-03-05')).toBe('Tue, Mar 5') + + wrapper.setProps({ landscape: true }) + expect(wrapper.vm.defaultTitleDateFormatter('2013-03-05')).toBe('Tue,
    Mar 5') + }) + + it('should use prev and next icons', () => { + const wrapper = mountFunction({ + propsData: { + prevIcon: 'block', + nextIcon: 'check', + }, + }) + + const icons = wrapper.findAll('.v-date-picker-header .v-icon').wrappers + expect(icons[0].element.textContent).toBe('block') + expect(icons[1].element.textContent).toBe('check') + }) + + it('should emit update:picker-date event when tableDate changes', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2017-09', + }, + }) + + const pickerDate = jest.fn() + wrapper.vm.$on('update:picker-date', pickerDate) + wrapper.vm.tableDate = '2013-11' + await wrapper.vm.$nextTick() + expect(pickerDate).toHaveBeenCalledWith('2013-11') + }) + + it('should set tableDate to pickerDate if provided', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2017-09', + pickerDate: '2013-11', + }, + }) + + expect(wrapper.vm.tableDate).toBe('2013-11') + }) + + it('should update pickerDate to the selected month after setting it to null', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2017-09-13', + pickerDate: '2013-11', + }, + }) + + const update = jest.fn() + wrapper.vm.$on('update:picker-date', update) + await wrapper.vm.$nextTick() + + wrapper.setProps({ + pickerDate: null, + }) + await wrapper.vm.$nextTick() + expect(update).toHaveBeenCalledWith('2017-09') + }) + + it.skip('should render component with min/max props', async () => { // TODO: fix this one + const wrapper = mountFunction({ + propsData: { + value: '2013-01-07', + min: '2013-01-03', + max: '2013-01-17', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + wrapper.setData({ + internalActivePicker: 'MONTH', + }) + await wrapper.vm.$nextTick() + expect(wrapper.html()).toMatchSnapshot() + wrapper.setData({ + internalActivePicker: 'YEAR', + }) + await wrapper.vm.$nextTick() + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should round down min date in ISO 8601 format', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + value: '2019-01-20', + min: '2019-01-06T15:55:56.441Z', + }, + }) + + wrapper.vm.$on('input', cb) + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('click') + expect(cb.mock.calls[0][0]).toEqual('2019-01-06') + }) + + it('should emit @input and not emit @change when month is clicked (not reative picker)', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-02-07', + reactive: true, + }, + data: () => ({ + internalActivePicker: 'MONTH', + }), + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + const change = jest.fn() + wrapper.vm.$on('change', change) + + wrapper.findAll('tbody tr td button').at(0).trigger('click') + wrapper.vm.$nextTick() + expect(change).not.toHaveBeenCalled() + expect(input).toHaveBeenCalledWith('2013-01-07') + }) + + it('should not emit @input and not emit @change when month is clicked (lazy picker)', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-02-07', + }, + data: () => ({ + internalActivePicker: 'MONTH', + }), + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + const change = jest.fn() + wrapper.vm.$on('change', change) + + wrapper.findAll('tbody tr td button').at(0).trigger('click') + wrapper.vm.$nextTick() + expect(change).not.toHaveBeenCalled() + expect(input).not.toHaveBeenCalled() + }) + + it('should emit click/dblclick:date event', async () => { + const click = jest.fn() + const dblclick = jest.fn() + const wrapper = mountFunction({ + propsData: { + value: '2013-05-20', + type: 'date', + }, + listeners: { + 'click:date': (value: any, event: any) => click(value, event instanceof Event), + 'dblclick:date': (value: any, event: any) => dblclick(value, event instanceof Event), + }, + }) + + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('click') + expect(click).toHaveBeenCalledWith('2013-05-05', true) + + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('dblclick') + expect(dblclick).toHaveBeenCalledWith('2013-05-05', true) + }) + + it('should handle date range select', async () => { + const wrapper = mountFunction({ + propsData: { + range: true, + value: ['2019-01-06'], + }, + }) + + const [input, change] = [jest.fn(), jest.fn()] + wrapper.vm.$on('input', input) + wrapper.vm.$on('change', change) + + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td button').at(2).trigger('click') + // Lead to [from, to], both 'input' and 'change' should be called + expect(input.mock.calls[0][0]).toEqual(expect.arrayContaining(['2019-01-06', '2019-01-08'])) + expect(change.mock.calls[0][0]).toEqual(expect.arrayContaining(['2019-01-06', '2019-01-08'])) + + wrapper.setProps({ + value: ['2019-01-01', '2019-01-31'], + }) + wrapper.findAll('.v-date-picker-table--date tbody tr+tr td:first-child button').at(0).trigger('click') + // Lead to [from,], only 'input' should be called + expect(input.mock.calls[1][0]).toEqual(expect.arrayContaining(['2019-01-06'])) + expect(change.mock.calls).toHaveLength(1) + }) + + it('should add class for the first and last days in range', async () => { + const wrapper = mountFunction({ + propsData: { + range: true, + showCurrent: '2019-01', + type: 'date', + value: ['2019-01-06', '2019-01-16'], + }, + }) + + expect(wrapper.findAll('.v-date-picker-table--date tbody button.v-date-picker--first-in-range') + .exists()).toBe(true) + expect(wrapper.findAll('.v-date-picker-table--date tbody button.v-date-picker--last-in-range') + .exists()).toBe(true) + }) + + it('should set proper tableDate', async () => { + const wrapper = mountFunction({ + propsData: { + showCurrent: '2030-04-04', + }, + }) + + expect(wrapper.vm.tableDate).toBe('2030-04') + }) + + it('should not higlight not allowed dates in range', async () => { + const wrapper = mountFunction({ + propsData: { + range: true, + value: ['2019-09-01', '2019-09-03'], + allowedDates: value => value.endsWith('1') || value.endsWith('3'), + }, + }) + + const buttonOfDay02 = wrapper.findAll('.v-date-picker-table--date tbody button').at(1) + expect(buttonOfDay02.element.classList.contains('accent')).toBeFalsy() + }) + + it('should handle date range picker with null value', async () => { + const wrapper = mountFunction({ + propsData: { + range: true, + value: null, + }, + }) + + expect(wrapper.find('.v-date-picker-title__date').html()).toMatchSnapshot() + }) + + it('should correctly show weeks and dates when showWeek and showAdjacentMonths props are passed', () => { + const wrapper = mountFunction({ + propsData: { + value: '2021-02-01', + firstDayOfWeek: 1, + showWeek: true, + showAdjacentMonths: true, + }, + }) + + const lastWeekEl = wrapper.find('.v-date-picker-table--date tbody tr:last-child td small') + const lastDayEl = wrapper.findAll('.v-date-picker-table--date tbody tr:last-child td button div').at(6) + + expect(lastWeekEl.text()).toBe('09') + expect(lastDayEl.text()).toBe('7') + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.month.spec.ts b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.month.spec.ts new file mode 100644 index 0000000..8af580c --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.month.spec.ts @@ -0,0 +1,354 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDatePicker from '../VDatePicker' +// import { Lang } from '../../../services/lang' +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' +// import Vue from 'vue' +// import { preset } from '../../../presets/default' +// import en from '../../../locale/en' + +// Vue.prototype.$vuetify = { +// icons: { +// values: { +// next: 'mdi-chevron-right', +// prev: 'mdi-chevron-left', +// }, +// }, +// } + +describe.skip('VDatePicker.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VDatePicker, { + ...options, + mocks: { + $vuetify: { + rtl: false, + lang: new Lang({ + ...preset, + }), + }, + }, + }) + } + }) + + it('should emit input event on year click (reactive picker)', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + type: 'month', + reactive: true, + }, + }) + + wrapper.setData({ + internalActivePicker: 'YEAR', + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + const change = jest.fn() + wrapper.vm.$on('change', input) + + wrapper.findAll('.v-date-picker-years li.active + li').at(0).trigger('click') + expect(input).toHaveBeenCalledWith('2012-05') + expect(change).not.toHaveBeenCalled() + }) + + it('should render flat picker', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + flat: true, + type: 'month', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render picker with elevation', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + elevation: 15, + type: 'month', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should not emit input event on year click if month is not allowed', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + type: 'month', + allowedDates: () => false, + }, + }) + + wrapper.setData({ + internalActivePicker: 'YEAR', + }) + + wrapper.vm.$on('input', cb) + wrapper.findAll('.v-date-picker-years li.active + li').at(0).trigger('click') + expect(cb).not.toHaveBeenCalled() + }) + + it('should emit input event on month click', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + type: 'month', + }, + }) + + wrapper.vm.$on('input', cb) + wrapper.findAll('.v-date-picker-table--month button').at(0).trigger('click') + expect(cb).toHaveBeenCalledWith('2013-01') + }) + + it('should be scrollable', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + type: 'month', + scrollable: true, + }, + }) + + wrapper.findAll('.v-date-picker-table--month').at(0).trigger('wheel', { deltaY: 1 }) + await wrapper.vm.$nextTick() + expect(wrapper.vm.tableDate).toBe('2014') + }) + + it('should match snapshot with pick-month prop', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05-07', + type: 'month', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match snapshot with allowed dates as array', () => { + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + type: 'month', + allowedDates: value => ['2013-01', '2013-03', '2013-05', '2013-07'].includes(value), + }, + }) + + expect(wrapper.findAll('.v-date-picker-table--month tbody').at(0).html()).toMatchSnapshot() + }) + + it('should match snapshot with month formatting functions', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + type: 'month', + monthFormat: date => `(${date.split('-')[1]})`, + }, + }) + + expect(wrapper.findAll('.v-date-picker-table--month tbody').at(0).html()).toMatchSnapshot() + }) + + it('should match snapshot with colored picker & header', () => { + const wrapper = mountFunction({ + propsData: { + type: 'month', + value: '2005-11-01', + color: 'primary', + headerColor: 'orange darken-1', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match snapshot with colored picker', () => { + const wrapper = mountFunction({ + propsData: { + type: 'month', + value: '2005-11-01', + color: 'orange darken-1', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match change month when clicked on header arrow buttons', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + type: 'month', + }, + }) + + const [leftButton, rightButton] = wrapper.findAll('.v-date-picker-header button.v-btn').wrappers + + leftButton.trigger('click') + expect(wrapper.vm.tableDate).toBe('2004') + + rightButton.trigger('click') + expect(wrapper.vm.tableDate).toBe('2005') + }) + + it('should match change active picker when clicked on month button', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11-01', + type: 'month', + }, + }) + + const button = wrapper.findAll('.v-date-picker-header__value button').at(0) + + button.trigger('click') + expect(wrapper.vm.internalActivePicker).toBe('YEAR') + }) + + it('should select year', async () => { + const wrapper = mountFunction({ + propsData: { + type: 'month', + value: '2005-11', + }, + }) + + wrapper.setData({ + internalActivePicker: 'YEAR', + }) + + wrapper.findAll('.v-date-picker-years li.active + li').at(0).trigger('click') + expect(wrapper.vm.internalActivePicker).toBe('MONTH') + expect(wrapper.vm.tableDate).toBe('2004') + }) + + it('should set the table date when value has changed', () => { + const wrapper = mountFunction({ + propsData: { + value: null, + type: 'month', + }, + }) + + wrapper.setProps({ value: '2005-11' }) + expect(wrapper.vm.tableDate).toBe('2005') + }) + + it('should use prev and next icons', () => { + const wrapper = mountFunction({ + propsData: { + type: 'month', + prevIcon: 'block', + nextIcon: 'check', + }, + }) + + const icons = wrapper.findAll('.v-date-picker-header .v-icon').wrappers + expect(icons[0].element.textContent).toBe('block') + expect(icons[1].element.textContent).toBe('check') + }) + + it('should display translated title', async () => { + const wrapper = mountFunction({ + propsData: { + multiple: true, + type: 'month', + value: ['2013-05'], + }, + }) + + expect(wrapper.find('.v-date-picker-title__date').text()).toBe('May') + + wrapper.setProps({ + value: [], + }) + expect(wrapper.find('.v-date-picker-title__date').text()).toBe('-') + + wrapper.setProps({ + value: ['2013-05', '2013-06', '2013-07'], + }) + expect(wrapper.find('.v-date-picker-title__date').text()).toBe('3 selected') + }) + + it('should emit click/dblclick:month event', async () => { + const click = jest.fn() + const dblclick = jest.fn() + const wrapper = mountFunction({ + propsData: { + value: '2013-05', + type: 'month', + }, + listeners: { + 'click:month': (value: any, event: any) => click(value, event instanceof Event), + 'dblclick:month': (value: any, event: any) => dblclick(value, event instanceof Event), + }, + }) + + wrapper.findAll('.v-date-picker-table--month tbody tr+tr td:first-child button').at(0).trigger('click') + expect(click).toHaveBeenCalledWith('2013-04', true) + + wrapper.findAll('.v-date-picker-table--month tbody tr+tr td:first-child button').at(0).trigger('dblclick') + expect(dblclick).toHaveBeenCalledWith('2013-04', true) + }) + + it('should handle date range select', async () => { + const cb = jest.fn() + const wrapper = mountFunction({ + propsData: { + range: true, + type: 'month', + value: [], + }, + }) + const year = new Date().getFullYear() + const toDate = `${year}-08` + const fromDate = `${year}-03` + + wrapper.vm.$on('input', cb) + wrapper.find('.v-date-picker-table--month tbody tr:first-child td:nth-child(3) button').trigger('click') + expect(cb.mock.calls[0][0]).toEqual( + expect.arrayContaining([fromDate]) + ) + + wrapper.find('.v-date-picker-table--month tbody tr:first-child+tr+tr td:nth-child(2) button').trigger('click') + expect(cb.mock.calls[0][0][0]).toBe(fromDate) + expect(cb.mock.calls[1][0][0]).toBe(toDate) + }) + + it('should add class for the first and last days in range', async () => { + const wrapper = mountFunction({ + propsData: { + range: true, + showCurrent: '2019', + type: 'month', + value: ['2019-01', '2019-02'], + }, + }) + + expect(wrapper.findAll('.v-date-picker-table--month tbody button.v-date-picker--first-in-range') + .exists()).toBe(true) + expect(wrapper.findAll('.v-date-picker-table--month tbody button.v-date-picker--last-in-range') + .exists()).toBe(true) + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx new file mode 100644 index 0000000..9d328f6 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx @@ -0,0 +1,43 @@ +/// + +import { VDatePicker } from '..' +import { Application } from '@/../cypress/templates' + +// Utilities +import { ref } from 'vue' + +describe('VDatePicker', () => { + it('selects a range of dates', () => { + const model = ref([]) + cy.mount(() => ( + + + + )) + + cy.get('.v-date-picker-month__day').contains(10).click() + cy.get('.v-date-picker-month__day').contains(20).click() + .then(() => { + expect(model.value).to.have.length(11) + }) + }) + + it('selects a range of dates across month boundary', () => { + const model = ref([]) + cy.mount(() => ( + + + + )) + + cy.get('.v-date-picker-controls__month-btn').click() + cy.get('.v-date-picker-months__content').contains('Jan').click() + cy.get('.v-date-picker-month__day').contains(7).click() + cy.get('.v-date-picker-controls__month-btn').click() + cy.get('.v-date-picker-months__content').contains('Feb').click() + cy.get('.v-date-picker-month__day').contains(7).click() + .then(() => { + expect(model.value).to.have.length(32) + }) + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerDateTable.spec.ts b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerDateTable.spec.ts new file mode 100644 index 0000000..f6acb27 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerDateTable.spec.ts @@ -0,0 +1,321 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDatePickerDateTable from '../VDatePickerDateTable' +// import { Lang } from '../../../services/lang' +// import { preset } from '../../../presets/default' +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' + +describe.skip('VDatePickerDateTable.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VDatePickerDateTable, { + ...options, + mocks: { + $vuetify: { + rtl: false, + lang: new Lang(preset), + }, + }, + }) + } + }) + + it('should render component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render readonly component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + readonly: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render disabled component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + disabled: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with showWeek and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2018-02', + current: '2005-07', + value: null, + firstDayOfWeek: 2, + showWeek: true, + }, + }) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component and match snapshot for multiple selection', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + multiple: true, + selectedDates: ['2005-11-03', '2005-11-05', '2005-11-08'], + value: '2005-11-03', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with events (array) and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + events: ['2005-05-03'], + eventColor: 'red', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with events (function) and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + events: date => date === '2005-05-03', + eventColor: 'red', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with events colored by object and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + events: ['2005-05-03', '2005-05-04'], + eventColor: { '2005-05-03': 'red', '2005-05-04': 'blue lighten-1' }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with events colored by function and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + events: ['2005-05-03', '2005-05-04'], + eventColor: date => ({ '2005-05-03': 'red' }[date]), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should match snapshot with first day of week', function () { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + firstDayOfWeek: 2, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it.skip('should watch tableDate value and run transition', async () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + }, + }) + + wrapper.setProps({ + tableDate: '2005-06', + }) + await wrapper.vm.$nextTick() + expect(wrapper.findAll('table').at(0).element.className).toBe('tab-transition-enter tab-transition-enter-active') + }) + + it.skip('should watch tableDate value and run reverse transition', async () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + }, + }) + + wrapper.setProps({ + tableDate: '2005-04', + }) + await wrapper.vm.$nextTick() + expect(wrapper.findAll('table').at(0).element.className).toBe('tab-reverse-transition-enter tab-reverse-transition-enter-active') + }) + + it('should emit event when date button is clicked', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + }, + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + wrapper.findAll('tbody button').at(0).trigger('click') + expect(input).toHaveBeenCalledWith('2005-05-01') + }) + + it('should not emit event when disabled month button is clicked', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + current: '2005-07', + value: '2005-11-03', + allowedDates: () => false, + }, + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + wrapper.findAll('tbody button').at(0).trigger('click') + expect(input).not.toHaveBeenCalled() + }) + + it('should emit tableDate event when scrolled and scrollable', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + scrollable: true, + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: 1 }) + expect(tableDate).toHaveBeenCalledWith('2005-06') + }) + + it('should not emit tableDate event when scrolled and not scrollable', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: 1 }) + expect(tableDate).not.toHaveBeenCalled() + }) + + it('should not emit tableDate event when scrollable but tableDate less than min', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + scrollable: true, + min: '2005-05', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: -50 }) + expect(tableDate).not.toHaveBeenCalled() + }) + + it('should emit tableDate event when scrollable and tableDate greater than min', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + scrollable: true, + min: '2005-03', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: -50 }) + expect(tableDate).toHaveBeenCalledWith('2005-04') + }) + + // TODO + it.skip('should emit tableDate event when swiped', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('touchstart') + wrapper.trigger('touchend') + expect(tableDate).toHaveBeenCalledWith('2005-06') + }) + + it('should change tableDate when touch is called', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005-05', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.vm.touch(1, wrapper.vm.calculateTableDate) + expect(tableDate).toHaveBeenCalledWith('2005-06') + wrapper.vm.touch(-1, wrapper.vm.calculateTableDate) + expect(tableDate).toHaveBeenCalledWith('2005-04') + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerHeader.spec.ts b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerHeader.spec.ts new file mode 100644 index 0000000..3d54ed2 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerHeader.spec.ts @@ -0,0 +1,221 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDatePickerHeader from '../VDatePickerHeader' +// import { Lang } from '../../../services/lang' +// import { preset } from '../../../presets/default' +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' +// import Vue from 'vue' + +// Vue.prototype.$vuetify = { +// icons: { +// values: { +// next: 'mdi-chevron-right', +// prev: 'mdi-chevron-left', +// }, +// }, +// } + +describe.skip('VDatePickerHeader.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VDatePickerHeader, { + ...options, + mocks: { + $vuetify: { + rtl: false, + lang: new Lang(preset), + }, + }, + }) + } + }) + + it('should render component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render disabled component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + disabled: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render readonly component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + readonly: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component in RTL mode and match snapshot', async () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + }, + }) + wrapper.vm.$vuetify.rtl = true + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + wrapper.vm.$vuetify.rtl = undefined + }) + + it('should render component with year value and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005', + }, + }) + + expect(wrapper.findAll('.v-date-picker-header__value div').at(0).element.textContent).toBe('2005') + }) + + it('should render prev/next icons', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005', + prevIcon: 'foo', + nextIcon: 'bar', + }, + }) + + expect(wrapper.findAll('.v-icon').at(0).element.textContent).toBe('foo') + expect(wrapper.findAll('.v-icon').at(1).element.textContent).toBe('bar') + }) + + it('should render component with own formatter and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + format: value => `(${value})`, + }, + }) + + expect(wrapper.findAll('.v-date-picker-header__value div').at(0).element.textContent).toBe('(2005-11)') + }) + + it('should render colored component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + color: 'green lighten-1', + }, + }) + + const div = wrapper.findAll('.v-date-picker-header__value div').at(0) + expect(div.classes('green--text')).toBe(true) + expect(div.classes('text--lighten-1')).toBe(true) + }) + + it('should render component with default slot and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + }, + slots: { + default: 'foo', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should trigger event on selector click', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-11', + }, + }) + + const toggle = jest.fn() + wrapper.vm.$on('toggle', toggle) + + wrapper.findAll('.v-date-picker-header__value button').at(0).trigger('click') + expect(toggle).toHaveBeenCalled() + }) + + it('should trigger event on arrows click', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-12', + }, + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + wrapper.findAll('button.v-btn').at(0).trigger('click') + expect(input).toHaveBeenCalledWith('2005-11') + + wrapper.findAll('button.v-btn').at(1).trigger('click') + expect(input).toHaveBeenCalledWith('2006-01') + }) + + it('should calculate prev/next value', () => { + const wrapper = mountFunction({ + propsData: { + value: '2005-12', + }, + }) + expect(wrapper.vm.calculateChange(-1)).toBe('2005-11') + expect(wrapper.vm.calculateChange(+1)).toBe('2006-01') + + wrapper.setProps({ + value: '2005', + }) + expect(wrapper.vm.calculateChange(-1)).toBe('2004') + expect(wrapper.vm.calculateChange(+1)).toBe('2006') + }) + + it.skip('should watch value and run transition', async () => { + const wrapper = mountFunction({ + propsData: { + value: 2005, + }, + }) + + wrapper.setProps({ + value: 2006, + }) + await wrapper.vm.$nextTick() + expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-transition-enter')).toBe(true) + expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-transition-enter-active')).toBe(true) + }) + + it.skip('should watch value and run reverse transition', async () => { + const wrapper = mountFunction({ + propsData: { + value: 2005, + }, + }) + + wrapper.setProps({ + value: 2004, + }) + await wrapper.vm.$nextTick() + expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-reverse-transition-enter')).toBe(true) + expect(wrapper.findAll('.v-date-picker-header__value div').at(0).classes('tab-reverse-transition-enter-active')).toBe(true) + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerMonthTable.spec.ts b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerMonthTable.spec.ts new file mode 100644 index 0000000..ce1f281 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerMonthTable.spec.ts @@ -0,0 +1,259 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDatePickerMonthTable from '../VDatePickerMonthTable' +// import { Lang } from '../../../services/lang' + +// import { preset } from '../../../presets/default' +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' + +describe.skip('VDatePickerMonthTable.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VDatePickerMonthTable, { + ...options, + mocks: { + $vuetify: { + lang: new Lang(preset), + }, + }, + }) + } + }) + + it('should render component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + current: '2005-05', + value: '2005-11', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component and match snapshot (multiple)', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + current: '2005-05', + value: ['2005-11', '2005-10'], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it.skip('should watch tableDate value and run transition', async () => { // TODO: make this one work + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + current: '2005-05', + value: '2005-11', + }, + }) + + wrapper.setProps({ + tableDate: '2006', + }) + await wrapper.vm.$nextTick() + expect(wrapper.findAll('table').at(0).element.className).toBe('tab-transition-enter tab-transition-enter-active') + }) + + it.skip('should watch tableDate value and run reverse transition', async () => { // TODO: make this one work + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + current: '2005-05', + value: '2005-11', + }, + }) + + wrapper.setProps({ + tableDate: '2004', + }) + await wrapper.vm.$nextTick() + expect(wrapper.findAll('table').at(0).element.className).toBe('tab-reverse-transition-enter tab-reverse-transition-enter-active') + }) + + it('should emit event when month button is clicked', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + current: '2005-05', + value: '2005-11', + }, + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + wrapper.findAll('tbody button').at(0).trigger('click') + expect(input).toHaveBeenCalledWith('2005-01') + }) + + it('should not emit event when disabled month button is clicked', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + current: '2005-05', + value: '2005-11', + allowedDates: () => false, + }, + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + wrapper.findAll('tbody button').at(0).trigger('click') + expect(input).not.toHaveBeenCalled() + }) + + it('should emit tableDate event when scrolled and scrollable', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + scrollable: true, + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: 1 }) + expect(tableDate).toHaveBeenCalledWith('2006') + }) + + it('should not emit tableDate event when scrolled and not scrollable', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: 1 }) + expect(tableDate).not.toHaveBeenCalled() + }) + + it('should not emit tableDate event when scrollable but tableDate less than min', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + scrollable: true, + min: '2005', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: -50 }) + expect(tableDate).not.toHaveBeenCalled() + }) + + it('should emit tableDate event when scrollable and tableDate greater than min', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + scrollable: true, + min: '2003', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('wheel', { deltaY: -50 }) + expect(tableDate).toHaveBeenCalledWith('2004') + }) + + // TODO + it.skip('should emit tableDate event when swiped', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.trigger('touchstart') + wrapper.trigger('touchend') + expect(tableDate).toHaveBeenCalledWith(2006) + }) + + it('should change tableDate when touch is called', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + }, + }) + + const tableDate = jest.fn() + wrapper.vm.$on('update:table-date', tableDate) + + wrapper.vm.touch(1, wrapper.vm.calculateTableDate) + expect(tableDate).toHaveBeenCalledWith('2006') + wrapper.vm.touch(-1, wrapper.vm.calculateTableDate) + expect(tableDate).toHaveBeenCalledWith('2004') + }) + + it('should render component with events (array) and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + events: ['2005-07', '2005-11'], + eventColor: 'red', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with events (function) and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + events: date => date === '2005-07' || date === '2005-11', + eventColor: 'red', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with events colored by object and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + events: ['2005-07', '2005-11'], + eventColor: { '2005-07': 'red', '2005-11': 'blue lighten-1' }, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component with events colored by function and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + tableDate: '2005', + events: ['2005-07', '2005-11'], + eventColor: date => ({ '2005-07': 'red', '2005-11': 'blue lighten-1' }[date]), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerTitle.spec.ts b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerTitle.spec.ts new file mode 100644 index 0000000..36bcc22 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerTitle.spec.ts @@ -0,0 +1,127 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDatePickerTitle from '../VDatePickerTitle' +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' + +describe.skip('VDatePickerTitle.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VDatePickerTitle, options) + } + }) + + it('should render component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + year: '1234', + date: '2005-11-01', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render disabled component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + year: '1234', + date: '2005-11-01', + disabled: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render readonly component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + year: '1234', + date: '2005-11-01', + readonly: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render component when selecting year and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + year: '1234', + date: '2005-11-01', + selectingYear: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render year icon', () => { + const wrapper = mountFunction({ + propsData: { + year: '1234', + yearIcon: 'year', + date: '2005-11-01', + }, + }) + + expect(wrapper.findAll('.v-date-picker-title__year').at(0).html()).toMatchSnapshot() + }) + + it('should emit input event on year/date click', () => { + const wrapper = mountFunction({ + propsData: { + year: '1234', + yearIcon: 'year', + date: '2005-11-01', + }, + }) + + const input = jest.fn(value => wrapper.setProps({ selectingYear: value })) + wrapper.vm.$on('update:selecting-year', input) + + wrapper.findAll('.v-date-picker-title__date').at(0).trigger('click') + expect(input).not.toHaveBeenCalled() + wrapper.findAll('.v-date-picker-title__year').at(0).trigger('click') + expect(input).toHaveBeenCalledWith(true) + wrapper.findAll('.v-date-picker-title__date').at(0).trigger('click') + expect(input).toHaveBeenCalledWith(false) + wrapper.findAll('.v-date-picker-title__year').at(0).trigger('click') + wrapper.findAll('.v-date-picker-title__year').at(0).trigger('click') + expect(input).toHaveBeenCalledWith(false) + }) + + it('should have the correct transition', () => { + const wrapper = mountFunction({ + propsData: { + year: '2018', + date: 'Tue, Mar 3', + value: '2018-03-03', + }, + }) + + expect(wrapper.vm.isReversing).toBe(false) + + wrapper.setProps({ + date: 'Wed, Mar 4', + value: '2018-03-04', + }) + + expect(wrapper.vm.isReversing).toBe(false) + + wrapper.setProps({ + date: 'Wed, Mar 3', + value: '2018-03-03', + }) + + expect(wrapper.vm.isReversing).toBe(true) + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerYears.spec.ts b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerYears.spec.ts new file mode 100644 index 0000000..413ceb6 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePickerYears.spec.ts @@ -0,0 +1,89 @@ +// @ts-nocheck +/* eslint-disable */ + +// import VDatePickerYears from '../VDatePickerYears' +import { + mount, + MountOptions, + Wrapper, +} from '@vue/test-utils' + +describe.skip('VDatePickerYears.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: MountOptions) => Wrapper + beforeEach(() => { + mountFunction = (options?: MountOptions) => { + return mount(VDatePickerYears, { + ...options, + mocks: { + $vuetify: { + rtl: false, + lang: { + t: () => {}, + }, + }, + }, + }) + } + }) + + it('should render component and match snapshot', () => { + const wrapper = mountFunction({ + propsData: { + value: '2000', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should respect min/max props', async () => { + const wrapper = mountFunction({ + propsData: { + min: 1234, + max: 1238, + }, + }) + + expect(wrapper.findAll('li:first-child').at(0).element.textContent).toBe('1238') + expect(wrapper.findAll('li:last-child').at(0).element.textContent).toBe('1234') + }) + + it('should not allow min to be greater then max', async () => { + const wrapper = mountFunction({ + propsData: { + min: 1238, + max: 1234, + }, + }) + expect(wrapper.findAll('li')).toHaveLength(1) + expect(wrapper.findAll('li').at(0).element.textContent).toBe('1234') + expect(wrapper.findAll('li').at(0).element.textContent).toBe('1234') + }) + + it('should emit event on year click', async () => { + const wrapper = mountFunction({ + propsData: { + value: 1999, + }, + }) + + const input = jest.fn() + wrapper.vm.$on('input', input) + + wrapper.findAll('li.active + li').at(0).trigger('click') + expect(input).toHaveBeenCalledWith(1998) + }) + + it('should format years', async () => { + const wrapper = mountFunction({ + propsData: { + format: year => `(${year})`, + min: 1001, + max: 1001, + }, + }) + + expect(wrapper.findAll('li').at(0).element.textContent).toBe('(1001)') + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.date.spec.ts.snap b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.date.spec.ts.snap new file mode 100644 index 0000000..92ba10d --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.date.spec.ts.snap @@ -0,0 +1,4631 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDatePicker.ts should handle date range picker with null value 1`] = ` +
    +
    +   +
    +
    +`; + +exports[`VDatePicker.ts should match snapshot with colored picker & header 1`] = ` +
    +
    +
    +
    + 2005 +
    +
    +
    + Tue, Nov 1 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should match snapshot with colored picker 1`] = ` +
    +
    +
    +
    + 2005 +
    +
    +
    + Tue, Nov 1 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should match snapshot with dark theme 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + Tue, May 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should match snapshot with default settings 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + Tue, May 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should match snapshot with year icon 1`] = ` +
    +
    +
    + 2005 + +
    +
    +
    + Tue, Nov 1 +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should render component with min/max props 1`] = ` + +
    +
    +
    +
    + 2013 +
    +
    +
    + Mon, Jan 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +
    +
    +
    + +`; + +exports[`VDatePicker.ts should render component with min/max props 2`] = ` + +
    +
    +
    +
    + 2013 +
    +
    +
    + Mon, Jan 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +
    +
    +
    + +`; + +exports[`VDatePicker.ts should render component with min/max props 3`] = ` + +
    +
    +
    +
    + 2013 +
    +
    +
    + Mon, Jan 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +
    +
    +
      +
    • + 2013 +
      • +
    +
    +
    +
    + +`; + +exports[`VDatePicker.ts should render disabled picker 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + Tue, May 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should render flat picker 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + Tue, May 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should render picker with elevation 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + Tue, May 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should render readonly picker 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + Tue, May 7 +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + +
    +
    +
    +
    +
    +`; diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.month.spec.ts.snap b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.month.spec.ts.snap new file mode 100644 index 0000000..739fd23 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePicker.month.spec.ts.snap @@ -0,0 +1,1131 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDatePicker.ts should match snapshot with allowed dates as array 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`VDatePicker.ts should match snapshot with colored picker & header 1`] = ` +
    +
    +
    +
    + 2005 +
    +
    +
    + November +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should match snapshot with colored picker 1`] = ` +
    +
    +
    +
    + 2005 +
    +
    +
    + November +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should match snapshot with month formatting functions 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`VDatePicker.ts should match snapshot with pick-month prop 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + May +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should render flat picker 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + May +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +
    +
    +
    +`; + +exports[`VDatePicker.ts should render picker with elevation 1`] = ` +
    +
    +
    +
    + 2013 +
    +
    +
    + May +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +
    +
    +
    +`; diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerDateTable.spec.ts.snap b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerDateTable.spec.ts.snap new file mode 100644 index 0000000..ab33caf --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerDateTable.spec.ts.snap @@ -0,0 +1,3387 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDatePickerDateTable.ts should match snapshot with first day of week 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + T + + W + + T + + F + + S + + S + + M +
    + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render component and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render component and match snapshot for multiple selection 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render component with events (array) and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render component with events (function) and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render component with events colored by function and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render component with events colored by object and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render component with showWeek and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + T + + W + + T + + F + + S + + S + + M +
    + + 04 + + + + + + + + + + + + + +
    + + 05 + + + + + + + + + + + + + + + +
    + + 06 + + + + + + + + + + + + + + + +
    + + 07 + + + + + + + + + + + + + + + +
    + + 08 + + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render disabled component and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; + +exports[`VDatePickerDateTable.ts should render readonly component and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + S + + M + + T + + W + + T + + F + + S +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + + + + + +
    + + + + + + + + + +
    +
    +`; diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerHeader.spec.ts.snap b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerHeader.spec.ts.snap new file mode 100644 index 0000000..214a727 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerHeader.spec.ts.snap @@ -0,0 +1,165 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDatePickerHeader.ts should render component and match snapshot 1`] = ` +
    + +
    +
    + +
    +
    + +
    +`; + +exports[`VDatePickerHeader.ts should render component in RTL mode and match snapshot 1`] = ` +
    + +
    +
    + +
    +
    + +
    +`; + +exports[`VDatePickerHeader.ts should render component with default slot and match snapshot 1`] = ` +
    + +
    +
    + +
    +
    + +
    +`; + +exports[`VDatePickerHeader.ts should render disabled component and match snapshot 1`] = ` +
    + +
    +
    + +
    +
    + +
    +`; + +exports[`VDatePickerHeader.ts should render readonly component and match snapshot 1`] = ` +
    + +
    +
    + +
    +
    + +
    +`; diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerMonthTable.spec.ts.snap b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerMonthTable.spec.ts.snap new file mode 100644 index 0000000..1d3cbcc --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerMonthTable.spec.ts.snap @@ -0,0 +1,783 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDatePickerMonthTable.ts should render component and match snapshot (multiple) 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +`; + +exports[`VDatePickerMonthTable.ts should render component and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +`; + +exports[`VDatePickerMonthTable.ts should render component with events (array) and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +`; + +exports[`VDatePickerMonthTable.ts should render component with events (function) and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +`; + +exports[`VDatePickerMonthTable.ts should render component with events colored by function and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +`; + +exports[`VDatePickerMonthTable.ts should render component with events colored by object and match snapshot 1`] = ` +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    + + + + + +
    +
    +`; diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerYears.spec.ts.snap b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerYears.spec.ts.snap new file mode 100644 index 0000000..57b8b66 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/__tests__/__snapshots__/VDatePickerYears.spec.ts.snap @@ -0,0 +1,609 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VDatePickerYears.ts should render component and match snapshot 1`] = ` +
      +
    • + 2100 +
      • +
    • + 2099 +
      • +
    • + 2098 +
      • +
    • + 2097 +
      • +
    • + 2096 +
      • +
    • + 2095 +
      • +
    • + 2094 +
      • +
    • + 2093 +
      • +
    • + 2092 +
      • +
    • + 2091 +
      • +
    • + 2090 +
      • +
    • + 2089 +
      • +
    • + 2088 +
      • +
    • + 2087 +
      • +
    • + 2086 +
      • +
    • + 2085 +
      • +
    • + 2084 +
      • +
    • + 2083 +
      • +
    • + 2082 +
      • +
    • + 2081 +
      • +
    • + 2080 +
      • +
    • + 2079 +
      • +
    • + 2078 +
      • +
    • + 2077 +
      • +
    • + 2076 +
      • +
    • + 2075 +
      • +
    • + 2074 +
      • +
    • + 2073 +
      • +
    • + 2072 +
      • +
    • + 2071 +
      • +
    • + 2070 +
      • +
    • + 2069 +
      • +
    • + 2068 +
      • +
    • + 2067 +
      • +
    • + 2066 +
      • +
    • + 2065 +
      • +
    • + 2064 +
      • +
    • + 2063 +
      • +
    • + 2062 +
      • +
    • + 2061 +
      • +
    • + 2060 +
      • +
    • + 2059 +
      • +
    • + 2058 +
      • +
    • + 2057 +
      • +
    • + 2056 +
      • +
    • + 2055 +
      • +
    • + 2054 +
      • +
    • + 2053 +
      • +
    • + 2052 +
      • +
    • + 2051 +
      • +
    • + 2050 +
      • +
    • + 2049 +
      • +
    • + 2048 +
      • +
    • + 2047 +
      • +
    • + 2046 +
      • +
    • + 2045 +
      • +
    • + 2044 +
      • +
    • + 2043 +
      • +
    • + 2042 +
      • +
    • + 2041 +
      • +
    • + 2040 +
      • +
    • + 2039 +
      • +
    • + 2038 +
      • +
    • + 2037 +
      • +
    • + 2036 +
      • +
    • + 2035 +
      • +
    • + 2034 +
      • +
    • + 2033 +
      • +
    • + 2032 +
      • +
    • + 2031 +
      • +
    • + 2030 +
      • +
    • + 2029 +
      • +
    • + 2028 +
      • +
    • + 2027 +
      • +
    • + 2026 +
      • +
    • + 2025 +
      • +
    • + 2024 +
      • +
    • + 2023 +
      • +
    • + 2022 +
      • +
    • + 2021 +
      • +
    • + 2020 +
      • +
    • + 2019 +
      • +
    • + 2018 +
      • +
    • + 2017 +
      • +
    • + 2016 +
      • +
    • + 2015 +
      • +
    • + 2014 +
      • +
    • + 2013 +
      • +
    • + 2012 +
      • +
    • + 2011 +
      • +
    • + 2010 +
      • +
    • + 2009 +
      • +
    • + 2008 +
      • +
    • + 2007 +
      • +
    • + 2006 +
      • +
    • + 2005 +
      • +
    • + 2004 +
      • +
    • + 2003 +
      • +
    • + 2002 +
      • +
    • + 2001 +
      • +
    • + 2000 +
      • +
    • + 1999 +
      • +
    • + 1998 +
      • +
    • + 1997 +
      • +
    • + 1996 +
      • +
    • + 1995 +
      • +
    • + 1994 +
      • +
    • + 1993 +
      • +
    • + 1992 +
      • +
    • + 1991 +
      • +
    • + 1990 +
      • +
    • + 1989 +
      • +
    • + 1988 +
      • +
    • + 1987 +
      • +
    • + 1986 +
      • +
    • + 1985 +
      • +
    • + 1984 +
      • +
    • + 1983 +
      • +
    • + 1982 +
      • +
    • + 1981 +
      • +
    • + 1980 +
      • +
    • + 1979 +
      • +
    • + 1978 +
      • +
    • + 1977 +
      • +
    • + 1976 +
      • +
    • + 1975 +
      • +
    • + 1974 +
      • +
    • + 1973 +
      • +
    • + 1972 +
      • +
    • + 1971 +
      • +
    • + 1970 +
      • +
    • + 1969 +
      • +
    • + 1968 +
      • +
    • + 1967 +
      • +
    • + 1966 +
      • +
    • + 1965 +
      • +
    • + 1964 +
      • +
    • + 1963 +
      • +
    • + 1962 +
      • +
    • + 1961 +
      • +
    • + 1960 +
      • +
    • + 1959 +
      • +
    • + 1958 +
      • +
    • + 1957 +
      • +
    • + 1956 +
      • +
    • + 1955 +
      • +
    • + 1954 +
      • +
    • + 1953 +
      • +
    • + 1952 +
      • +
    • + 1951 +
      • +
    • + 1950 +
      • +
    • + 1949 +
      • +
    • + 1948 +
      • +
    • + 1947 +
      • +
    • + 1946 +
      • +
    • + 1945 +
      • +
    • + 1944 +
      • +
    • + 1943 +
      • +
    • + 1942 +
      • +
    • + 1941 +
      • +
    • + 1940 +
      • +
    • + 1939 +
      • +
    • + 1938 +
      • +
    • + 1937 +
      • +
    • + 1936 +
      • +
    • + 1935 +
      • +
    • + 1934 +
      • +
    • + 1933 +
      • +
    • + 1932 +
      • +
    • + 1931 +
      • +
    • + 1930 +
      • +
    • + 1929 +
      • +
    • + 1928 +
      • +
    • + 1927 +
      • +
    • + 1926 +
      • +
    • + 1925 +
      • +
    • + 1924 +
      • +
    • + 1923 +
      • +
    • + 1922 +
      • +
    • + 1921 +
      • +
    • + 1920 +
      • +
    • + 1919 +
      • +
    • + 1918 +
      • +
    • + 1917 +
      • +
    • + 1916 +
      • +
    • + 1915 +
      • +
    • + 1914 +
      • +
    • + 1913 +
      • +
    • + 1912 +
      • +
    • + 1911 +
      • +
    • + 1910 +
      • +
    • + 1909 +
      • +
    • + 1908 +
      • +
    • + 1907 +
      • +
    • + 1906 +
      • +
    • + 1905 +
      • +
    • + 1904 +
      • +
    • + 1903 +
      • +
    • + 1902 +
      • +
    • + 1901 +
      • +
    • + 1900 +
      • +
    +`; diff --git a/packages/vuetify/src/components/VDatePicker/_variables.scss b/packages/vuetify/src/components/VDatePicker/_variables.scss new file mode 100644 index 0000000..d74b28d --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/_variables.scss @@ -0,0 +1,17 @@ +$date-picker-width: 328px !default; +$date-picker-show-week-width: 368px !default; + +$date-picker-header-height: 70px !default; + +$date-picker-month-btn-height: 24px !default; +$date-picker-month-btn-size: 0.85rem !default; +$date-picker-month-column-gap: 4px !default; +$date-picker-month-day-size: 40px !default; +$date-picker-month-font-size: 0.85rem !default; +$date-picker-month-padding: 0 12px 8px !default; + +$date-picker-months-grid-gap: 0px 24px !default; +$date-picker-months-height: 288px !default; + +$date-picker-years-height: 288px !default; +$date-picker-years-padding-inline: 32px !default; diff --git a/packages/vuetify/src/components/VDatePicker/index.ts b/packages/vuetify/src/components/VDatePicker/index.ts new file mode 100644 index 0000000..c347b02 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/index.ts @@ -0,0 +1,6 @@ +export { VDatePicker } from './VDatePicker' +export { VDatePickerControls } from './VDatePickerControls' +export { VDatePickerHeader } from './VDatePickerHeader' +export { VDatePickerMonth } from './VDatePickerMonth' +export { VDatePickerMonths } from './VDatePickerMonths' +export { VDatePickerYears } from './VDatePickerYears' diff --git a/packages/vuetify/src/components/VDatePicker/util/__tests__/createNativeLocaleFormatter.spec.ts b/packages/vuetify/src/components/VDatePicker/util/__tests__/createNativeLocaleFormatter.spec.ts new file mode 100644 index 0000000..e39441f --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/__tests__/createNativeLocaleFormatter.spec.ts @@ -0,0 +1,30 @@ +// @ts-nocheck +/* eslint-disable */ + +// import createNativeLocaleFormatter from '../createNativeLocaleFormatter' + +describe.skip('VDatePicker/util/createNativeLocaleFormatter.ts', () => { + it('should format dates', () => { + const formatter = createNativeLocaleFormatter(undefined, { day: 'numeric', timeZone: 'UTC' }) + expect(formatter('2013-2-07')).toBe('7') + }) + + it('should format date with year < 1000', () => { + const formatter = createNativeLocaleFormatter(undefined, { year: 'numeric', timeZone: 'UTC' }) + expect(formatter('13-2-07')).toBe('13') + }) + + it('should format dates if Intl is not defined', () => { + const oldIntl = global.Intl + + global.Intl = null + const formatter = createNativeLocaleFormatter(undefined, { day: 'numeric', timeZone: 'UTC' }, { start: 0, length: 10 }) + expect(formatter('2013-2-7')).toBe('2013-02-07') + expect(formatter('2013-2')).toBe('2013-02-01') + expect(formatter('2013')).toBe('2013-01-01') + + const nullFormatter = createNativeLocaleFormatter(undefined, { day: 'numeric', timeZone: 'UTC' }) + expect(nullFormatter).toBeUndefined() + global.Intl = oldIntl + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/util/__tests__/monthChange.spec.ts b/packages/vuetify/src/components/VDatePicker/util/__tests__/monthChange.spec.ts new file mode 100644 index 0000000..8e33d1a --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/__tests__/monthChange.spec.ts @@ -0,0 +1,13 @@ +// @ts-nocheck +/* eslint-disable */ + +// import monthChange from '../monthChange' + +describe.skip('VDatePicker/util/monthChange.ts', () => { + it('should change month', () => { + expect(monthChange('2000-01', -1)).toBe('1999-12') + expect(monthChange('2000-01', +1)).toBe('2000-02') + expect(monthChange('2000-12', -1)).toBe('2000-11') + expect(monthChange('2000-12', +1)).toBe('2001-01') + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/util/__tests__/pad.spec.ts b/packages/vuetify/src/components/VDatePicker/util/__tests__/pad.spec.ts new file mode 100644 index 0000000..0190093 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/__tests__/pad.spec.ts @@ -0,0 +1,21 @@ +// @ts-nocheck +/* eslint-disable */ + +// import pad from '../pad' + +describe.skip('VDatePicker/util/pad.ts', () => { + it('should pad 1-digit numbers', () => { + expect(pad(0)).toBe('00') + expect(pad('3', 3)).toBe('003') + }) + + it('should pad 2-digit numbers', () => { + expect(pad(40)).toBe('40') + expect(pad('98')).toBe('98') + }) + + it('should not pad 3-digit numbers', () => { + expect(pad(400)).toBe('400') + expect(pad('998')).toBe('998') + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/util/__tests__/sanitizeDateString.spec.ts b/packages/vuetify/src/components/VDatePicker/util/__tests__/sanitizeDateString.spec.ts new file mode 100644 index 0000000..2e688a6 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/__tests__/sanitizeDateString.spec.ts @@ -0,0 +1,12 @@ +// Utilities +import { describe, expect, it } from '@jest/globals' +import sanitizeDateString from '../sanitizeDateString' + +describe('VDatePicker/util/sanitizeDateString.ts', () => { + it('should sanitize date string based upon type', () => { + expect(sanitizeDateString('2000-01-02T14:48:00.000Z', 'date')).toBe('2000-01-02') + expect(sanitizeDateString('2000-01-02T14:48:00.000Z', 'month')).toBe('2000-01') + expect(sanitizeDateString('2000-01-02T14:48:00.000Z', 'year')).toBe('2000') + expect(sanitizeDateString('2000-1-2', 'date')).toBe('2000-01-02') + }) +}) diff --git a/packages/vuetify/src/components/VDatePicker/util/createNativeLocaleFormatter.ts b/packages/vuetify/src/components/VDatePicker/util/createNativeLocaleFormatter.ts new file mode 100644 index 0000000..d26787c --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/createNativeLocaleFormatter.ts @@ -0,0 +1,43 @@ +// @ts-nocheck +/* eslint-disable */ + +import pad from './pad' +import { DatePickerFormatter } from 'vuetify/types' + +interface SubstrOptions { + start?: number + length: number +} + +function createNativeLocaleFormatter ( + local: string | undefined, + options: Intl.DateTimeFormatOptions +): DatePickerFormatter | undefined + +function createNativeLocaleFormatter ( + local: string | undefined, + options: Intl.DateTimeFormatOptions, + substrOptions: SubstrOptions +): DatePickerFormatter + +function createNativeLocaleFormatter ( + locale: string | undefined, + options: Intl.DateTimeFormatOptions, + substrOptions: SubstrOptions = { start: 0, length: 0 } +): DatePickerFormatter | undefined { + const makeIsoString = (dateString: string) => { + const [year, month, date] = dateString.trim().split(' ')[0].split('-') + return [pad(year, 4), pad(month || 1), pad(date || 1)].join('-') + } + + try { + const intlFormatter = new Intl.DateTimeFormat(locale || undefined, options) + return (dateString: string) => intlFormatter.format(new Date(`${makeIsoString(dateString)}T00:00:00+00:00`)) + } catch (e) { + return (substrOptions.start || substrOptions.length) + ? (dateString: string) => makeIsoString(dateString).substr(substrOptions.start || 0, substrOptions.length) + : undefined + } +} + +export default createNativeLocaleFormatter diff --git a/packages/vuetify/src/components/VDatePicker/util/eventHelpers.ts b/packages/vuetify/src/components/VDatePicker/util/eventHelpers.ts new file mode 100644 index 0000000..9bee354 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/eventHelpers.ts @@ -0,0 +1,24 @@ +// @ts-nocheck +/* eslint-disable */ + +// import Vue from 'vue' + +export function createItemTypeNativeListeners (instance: /*Vue*/any, itemTypeSuffix: string, value: any) { + return Object.keys(instance.$listeners).reduce((on, eventName) => { + if (eventName.endsWith(itemTypeSuffix)) { + on[eventName.slice(0, -itemTypeSuffix.length)] = (event: Event) => instance.$emit(eventName, value, event) + } + + return on + }, {} as typeof instance.$listeners) +} + +export function createItemTypeListeners (instance: /*Vue*/any, itemTypeSuffix: string) { + return Object.keys(instance.$listeners).reduce((on, eventName) => { + if (eventName.endsWith(itemTypeSuffix)) { + on[eventName] = instance.$listeners[eventName] + } + + return on + }, {} as typeof instance.$listeners) +} diff --git a/packages/vuetify/src/components/VDatePicker/util/index.ts b/packages/vuetify/src/components/VDatePicker/util/index.ts new file mode 100644 index 0000000..c379581 --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/index.ts @@ -0,0 +1,20 @@ +// @ts-nocheck +/* eslint-disable */ + +import { + createItemTypeListeners, + createItemTypeNativeListeners, +} from './eventHelpers' +import createNativeLocaleFormatter from './createNativeLocaleFormatter' +import monthChange from './monthChange' +import sanitizeDateString from './sanitizeDateString' +import pad from './pad' + +export { + createItemTypeListeners, + createItemTypeNativeListeners, + createNativeLocaleFormatter, + monthChange, + sanitizeDateString, + pad, +} diff --git a/packages/vuetify/src/components/VDatePicker/util/isDateAllowed.ts b/packages/vuetify/src/components/VDatePicker/util/isDateAllowed.ts new file mode 100644 index 0000000..d1ad1ee --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/isDateAllowed.ts @@ -0,0 +1,10 @@ +// @ts-nocheck +/* eslint-disable */ + +import { DatePickerAllowedDatesFunction } from 'vuetify/types' + +export default function isDateAllowed (date: string, min: string, max: string, allowedFn: DatePickerAllowedDatesFunction | undefined) { + return (!allowedFn || allowedFn(date)) && + (!min || date >= min.substr(0, 10)) && + (!max || date <= max) +} diff --git a/packages/vuetify/src/components/VDatePicker/util/monthChange.ts b/packages/vuetify/src/components/VDatePicker/util/monthChange.ts new file mode 100644 index 0000000..178f7fb --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/monthChange.ts @@ -0,0 +1,20 @@ +// @ts-nocheck +/* eslint-disable */ + +import pad from './pad' + +/** + * @param {String} value YYYY-MM format + * @param {Number} sign -1 or +1 + */ +export default (value: string, sign: number) => { + const [year, month] = value.split('-').map(Number) + + if (month + sign === 0) { + return `${year - 1}-12` + } else if (month + sign === 13) { + return `${year + 1}-01` + } else { + return `${year}-${pad(month + sign)}` + } +} diff --git a/packages/vuetify/src/components/VDatePicker/util/pad.ts b/packages/vuetify/src/components/VDatePicker/util/pad.ts new file mode 100644 index 0000000..eede14a --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/pad.ts @@ -0,0 +1,19 @@ +// @ts-nocheck +/* eslint-disable */ + +const padStart = (string: number | string, targetLength: number, padString: string) => { + targetLength = targetLength >> 0 + string = String(string) + padString = String(padString) + if (string.length > targetLength) { + return String(string) + } + + targetLength = targetLength - string.length + if (targetLength > padString.length) { + padString += padString.repeat(targetLength / padString.length) + } + return padString.slice(0, targetLength) + String(string) +} + +export default (n: string | number, length = 2) => padStart(n, length, '0') diff --git a/packages/vuetify/src/components/VDatePicker/util/sanitizeDateString.ts b/packages/vuetify/src/components/VDatePicker/util/sanitizeDateString.ts new file mode 100644 index 0000000..00e65cd --- /dev/null +++ b/packages/vuetify/src/components/VDatePicker/util/sanitizeDateString.ts @@ -0,0 +1,8 @@ +// Adds leading zero to month/day if necessary, returns 'YYYY' if type = 'year', +// 'YYYY-MM' if 'month' and 'YYYY-MM-DD' if 'date' +import pad from './pad' + +export default (dateString: string, type: 'date' | 'month' | 'year'): string => { + const [year, month = 1, date = 1] = dateString.split('-') + return `${year}-${pad(month)}-${pad(date)}`.substr(0, { date: 10, month: 7, year: 4 }[type]) +} diff --git a/packages/vuetify/src/components/VDefaultsProvider/VDefaultsProvider.tsx b/packages/vuetify/src/components/VDefaultsProvider/VDefaultsProvider.tsx new file mode 100644 index 0000000..96e4606 --- /dev/null +++ b/packages/vuetify/src/components/VDefaultsProvider/VDefaultsProvider.tsx @@ -0,0 +1,39 @@ +// Composables +import { provideDefaults } from '@/composables/defaults' + +// Utilities +import { toRefs } from 'vue' +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { DefaultsOptions } from '@/composables/defaults' + +export const makeVDefaultsProviderProps = propsFactory({ + defaults: Object as PropType, + disabled: Boolean, + reset: [Number, String], + root: [Boolean, String], + scoped: Boolean, +}, 'VDefaultsProvider') + +export const VDefaultsProvider = genericComponent(false)({ + name: 'VDefaultsProvider', + + props: makeVDefaultsProviderProps(), + + setup (props, { slots }) { + const { defaults, disabled, reset, root, scoped } = toRefs(props) + + provideDefaults(defaults, { + reset, + root, + scoped, + disabled, + }) + + return () => slots.default?.() + }, +}) + +export type VDefaultsProvider = InstanceType diff --git a/packages/vuetify/src/components/VDefaultsProvider/__tests__/VDefaultsProvider.spec.cy.tsx b/packages/vuetify/src/components/VDefaultsProvider/__tests__/VDefaultsProvider.spec.cy.tsx new file mode 100644 index 0000000..477b885 --- /dev/null +++ b/packages/vuetify/src/components/VDefaultsProvider/__tests__/VDefaultsProvider.spec.cy.tsx @@ -0,0 +1,19 @@ +/// + +import { CenteredGrid } from '@/../cypress/templates' + +// Components +import { VDefaultsProvider } from '../VDefaultsProvider' +import { VCard } from '@/components/VCard' + +describe('VDefaultsProvider', () => { + it('should apply new defaults', () => { + cy.mount(() => ( + + + + + + )).get('.v-card').should('have.class', 'elevation-10').should('have.class', 'bg-primary') + }) +}) diff --git a/packages/vuetify/src/components/VDefaultsProvider/index.ts b/packages/vuetify/src/components/VDefaultsProvider/index.ts new file mode 100644 index 0000000..34e221f --- /dev/null +++ b/packages/vuetify/src/components/VDefaultsProvider/index.ts @@ -0,0 +1 @@ +export { VDefaultsProvider } from './VDefaultsProvider' diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass new file mode 100644 index 0000000..c9aeb41 --- /dev/null +++ b/packages/vuetify/src/components/VDialog/VDialog.sass @@ -0,0 +1,86 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-dialog + align-items: center + justify-content: center + margin: auto + + > .v-overlay__content + max-height: calc(100% - #{$dialog-margin * 2}) + width: calc(100% - #{$dialog-margin * 2}) + max-width: calc(100% - #{$dialog-margin * 2}) + margin: $dialog-margin + + &, + > form + display: flex + flex-direction: column + min-height: 0 + + > .v-card, + > .v-sheet + --v-scrollbar-offset: 0px + border-radius: $dialog-border-radius + overflow-y: auto + + @include tools.elevation($dialog-elevation) + + > .v-card + display: flex + flex-direction: column + + > .v-card-item + padding: $dialog-card-header-padding + + + .v-card-text + padding-top: $dialog-card-header-text-padding-top + + > .v-card-text + font-size: inherit + letter-spacing: $dialog-card-text-letter-spacing + line-height: inherit + padding: $dialog-card-text-padding + + > .v-card-actions + justify-content: $dialog-card-actions-justify + + .v-dialog--fullscreen + --v-scrollbar-offset: 0px + + > .v-overlay__content + border-radius: 0 + margin: 0 + padding: 0 + width: 100% + height: 100% + max-width: 100% + max-height: 100% + overflow-y: auto + top: 0 + left: 0 + + &, + > form + > .v-card, + > .v-sheet + min-height: 100% + min-width: 100% + border-radius: 0 + + .v-dialog--scrollable > .v-overlay__content + &, + > form + display: flex + + > .v-card + display: flex + flex: 1 1 100% + flex-direction: column + max-height: 100% + max-width: 100% + + > .v-card-text + backface-visibility: hidden + overflow-y: auto diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx new file mode 100644 index 0000000..4dcdea8 --- /dev/null +++ b/packages/vuetify/src/components/VDialog/VDialog.tsx @@ -0,0 +1,156 @@ +// Styles +import './VDialog.sass' + +// Components +import { VDialogTransition } from '@/components/transitions' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VOverlay } from '@/components/VOverlay' +import { makeVOverlayProps } from '@/components/VOverlay/VOverlay' + +// Composables +import { forwardRefs } from '@/composables/forwardRefs' +import { useProxiedModel } from '@/composables/proxiedModel' +import { useScopeId } from '@/composables/scopeId' + +// Utilities +import { mergeProps, nextTick, ref, watch } from 'vue' +import { focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util' + +// Types +import type { Component } from 'vue' +import type { OverlaySlots } from '@/components/VOverlay/VOverlay' + +export const makeVDialogProps = propsFactory({ + fullscreen: Boolean, + retainFocus: { + type: Boolean, + default: true, + }, + scrollable: Boolean, + + ...makeVOverlayProps({ + origin: 'center center' as const, + scrollStrategy: 'block' as const, + transition: { component: VDialogTransition as Component }, + zIndex: 2400, + }), +}, 'VDialog') + +export const VDialog = genericComponent()({ + name: 'VDialog', + + props: makeVDialogProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + afterLeave: () => true, + }, + + setup (props, { emit, slots }) { + const isActive = useProxiedModel(props, 'modelValue') + const { scopeId } = useScopeId() + + const overlay = ref() + function onFocusin (e: FocusEvent) { + const before = e.relatedTarget as HTMLElement | null + const after = e.target as HTMLElement | null + + if ( + before !== after && + overlay.value?.contentEl && + // We're the topmost dialog + overlay.value?.globalTop && + // It isn't the document or the dialog body + ![document, overlay.value.contentEl].includes(after!) && + // It isn't inside the dialog body + !overlay.value.contentEl.contains(after) + ) { + const focusable = focusableChildren(overlay.value.contentEl) + + if (!focusable.length) return + + const firstElement = focusable[0] + const lastElement = focusable[focusable.length - 1] + + if (before === firstElement) { + lastElement.focus() + } else { + firstElement.focus() + } + } + } + + if (IN_BROWSER) { + watch(() => isActive.value && props.retainFocus, val => { + val + ? document.addEventListener('focusin', onFocusin) + : document.removeEventListener('focusin', onFocusin) + }, { immediate: true }) + } + + function onAfterEnter () { + if (overlay.value?.contentEl && !overlay.value.contentEl.contains(document.activeElement)) { + overlay.value.contentEl.focus({ preventScroll: true }) + } + } + + function onAfterLeave () { + emit('afterLeave') + } + + watch(isActive, async val => { + if (!val) { + await nextTick() + overlay.value!.activatorEl?.focus({ preventScroll: true }) + } + }) + + useRender(() => { + const overlayProps = VOverlay.filterProps(props) + const activatorProps = mergeProps({ + 'aria-haspopup': 'dialog', + 'aria-expanded': String(isActive.value), + }, props.activatorProps) + const contentProps = mergeProps({ + tabindex: -1, + }, props.contentProps) + + return ( + + {{ + activator: slots.activator, + default: (...args) => ( + + { slots.default?.(...args) } + + ), + }} + + ) + }) + + return forwardRefs({}, overlay) + }, +}) + +export type VDialog = InstanceType diff --git a/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx b/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx new file mode 100644 index 0000000..ec5d229 --- /dev/null +++ b/packages/vuetify/src/components/VDialog/__test__/VDialog.spec.cy.tsx @@ -0,0 +1,39 @@ +/// + +// Components +import { VDialog } from '..' + +// Utilities +import { ref } from 'vue' + +// Tests +describe('VDialog', () => { + it('should render correctly', () => { + const model = ref(false) + cy.mount(() => ( + +
    Content
    +     + )).get('[data-test="dialog"]').should('not.exist') + .then(() => { model.value = true }) + .get('[data-test="dialog"]').should('be.visible') + .get('[data-test="content"]').should('be.visible') + .get('body').click() + .then(() => { + expect(model.value).to.be.false + }) + .get('[data-test="dialog"]').should('not.exist') + .get('[data-test="content"]').should('not.exist') + }) + + it('should emit afterLeave', () => { + const model = ref(true) + const onAfterLeave = cy.spy().as('afterLeave') + cy.mount(() => ( + +
    Content
    +     + )).get('body').click() + .get('@afterLeave').should('have.been.calledOnce') + }) +}) diff --git a/packages/vuetify/src/components/VDialog/_variables.scss b/packages/vuetify/src/components/VDialog/_variables.scss new file mode 100644 index 0000000..ccd830f --- /dev/null +++ b/packages/vuetify/src/components/VDialog/_variables.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// Defaults +$dialog-elevation: 24 !default; +$dialog-border-radius: settings.$border-radius-root !default; +$dialog-margin: 24px !default; + +$dialog-card-actions-justify: flex-end !default; +$dialog-card-header-padding: 16px 24px !default; +$dialog-card-header-text-padding-top: 0 !default; +$dialog-card-text-padding: 16px 24px 24px !default; +$dialog-card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-1', 'letter-spacing') !default; diff --git a/packages/vuetify/src/components/VDialog/index.ts b/packages/vuetify/src/components/VDialog/index.ts new file mode 100644 index 0000000..c21c7d8 --- /dev/null +++ b/packages/vuetify/src/components/VDialog/index.ts @@ -0,0 +1 @@ +export { VDialog } from './VDialog' diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass new file mode 100644 index 0000000..66fdbc2 --- /dev/null +++ b/packages/vuetify/src/components/VDivider/VDivider.sass @@ -0,0 +1,53 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-divider + display: block + flex: $divider-flex + height: 0px + max-height: 0px + opacity: $divider-opacity + transition: inherit + + @include tools.border($divider-border...) + + &--vertical + align-self: stretch + border-width: $divider-vertical-border-width + display: inline-flex + height: auto + margin-left: $divider-vertical-margin-left + max-height: 100% + max-width: 0px + vertical-align: text-bottom + width: 0px + + &--inset + &:not(.v-divider--vertical) + max-width: $divider-inset-max-width + margin-inline-start: $divider-inset-margin + + &.v-divider--vertical + margin-bottom: $divider-vertical-inset-margin-bottom + margin-top: $divider-vertical-inset-margin-top + max-height: $divider-vertical-inset-max-height + + .v-divider__content + padding: $divider-content-padding + text-wrap: nowrap + + .v-divider__wrapper--vertical & + padding: $divider-content-vertical-padding + + .v-divider__wrapper + display: flex + align-items: center + justify-content: center + + &--vertical + flex-direction: column + height: 100% + + .v-divider + margin: 0 auto diff --git a/packages/vuetify/src/components/VDivider/VDivider.tsx b/packages/vuetify/src/components/VDivider/VDivider.tsx new file mode 100644 index 0000000..6096116 --- /dev/null +++ b/packages/vuetify/src/components/VDivider/VDivider.tsx @@ -0,0 +1,105 @@ +// Styles +import './VDivider.sass' + +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, toRef } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'height' | 'width' +type DividerStyles = Partial> + +export const makeVDividerProps = propsFactory({ + color: String, + inset: Boolean, + length: [Number, String], + opacity: [Number, String], + thickness: [Number, String], + vertical: Boolean, + + ...makeComponentProps(), + ...makeThemeProps(), +}, 'VDivider') + +export const VDivider = genericComponent()({ + name: 'VDivider', + + props: makeVDividerProps(), + + setup (props, { attrs, slots }) { + const { themeClasses } = provideTheme(props) + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')) + const dividerStyles = computed(() => { + const styles: DividerStyles = {} + + if (props.length) { + styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length) + } + + if (props.thickness) { + styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness) + } + + return styles + }) + + useRender(() => { + const divider = ( +
    + ) + + if (!slots.default) return divider + + return ( +
    + { divider } + +
    + { slots.default() } +
    + + { divider } +
    + ) + }) + + return {} + }, +}) + +export type VDivider = InstanceType diff --git a/packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx b/packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx new file mode 100644 index 0000000..9a29830 --- /dev/null +++ b/packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx @@ -0,0 +1,244 @@ +/// + +import { VDivider } from '..' +import { VList, VListItem } from '../../VList' +import { VCard } from '../../VCard' +import { VToolbar } from '../../VToolbar' +import { VBtn } from '../../VBtn' +import { VCol, VRow, VSpacer } from '../../VGrid' + +// Tests +describe('VDivider', () => { + describe('examples in documentation', () => { + it('takes full height in flexbox container with static height', () => { + cy.mount(() => ( + <> +
    + +
    + + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '200px') + }) + + it('takes defined length when used as centered separator in VToolbar', () => { + cy.mount(() => ( + <> + + + + + + + + + + + + + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '24px') + }) + }) + + describe('adaptive height', () => { + it('takes full height in flexbox container with dynamic height', () => { + cy.mount(() => ( + <> +
    +
    + + +
    + {[1, 2, 3, 4, 5, 6, 7, 8].map(idx => ( + + ))} +
    +
    +
    footer
    +
    + + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '272px') // 272 = 3 * 80px (card height) + 2 * 16px (ga-4) + }) + + it('takes relative height in flexbox container with dynamic height', () => { + cy.mount(() => ( + <> +
    + + +
    Content
    +
    + + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '300px') + }) + }) + + describe('separator in list', () => { + it('takes full width in VList', () => { + cy.mount(() => ( + <> +
    + +
    + + )) + .get("[data-test='divider-h']") + .should('have.length', 2) + .should('have.css', 'width', '184px') + }) + }) + + describe('separator in grid', () => { + it('takes only necessary height when grid wraps', () => { + cy.mount(() => ( + <> +
    + + {[0, 1, 2, 3, 4, 5, 6, 7, 8].map(idx => ( + <> + { idx % 4 !== 0 && ( + + )} + + + + + ))} + +
    + + )) + .get("[data-test*='divider-v-']") + .should('have.length', 6) + .should('have.css', 'height', '104px') // 80px + 2 * 12px (v-col) + }) + }) + + describe('vertical inset variant', () => { + it('accepts `inset` prop to get predefined margin', () => { + cy.mount(() => ( + <> +
    + +
    + + )) + .get("[data-test='divider-v']") + .should('have.length', 1) + .should('have.css', 'height', '184px') // 200px - 2 * 8px (inset margin) + }) + + it('accepts custom margin', () => { + cy.mount(() => ( + <> +
    + +
    +
    + + +
    + + )) + .get("[data-test='divider-v']") + .should('have.length', 2) + .should('have.css', 'height', '152px') // 200px - 2 * 24px (margin) + }) + }) +}) diff --git a/packages/vuetify/src/components/VDivider/_variables.scss b/packages/vuetify/src/components/VDivider/_variables.scss new file mode 100644 index 0000000..f8d521f --- /dev/null +++ b/packages/vuetify/src/components/VDivider/_variables.scss @@ -0,0 +1,26 @@ +@use '../../styles/settings'; + +// VDivider +$divider-border-color: null !default; +$divider-border-style: settings.$border-style-root !default; +$divider-border-width: thin 0 0 0 !default; +$divider-content-padding: 0 16px !default; +$divider-content-vertical-padding: 4px 0 !default; +$divider-flex: 1 1 100% !default; +$divider-inset-margin: 72px !default; +$divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default; +$divider-margin: 8px !default; +$divider-opacity: var(--v-border-opacity) !default; +$divider-vertical-border-width: 0 thin 0 0 !default; +$divider-vertical-inset-margin-bottom: $divider-margin !default; +$divider-vertical-inset-margin-top: $divider-margin !default; +$divider-vertical-inset-max-height: calc(100% - #{$divider-margin * 2}) !default; +$divider-vertical-margin-left: -1px !default; + + +// Lists +$divider-border: ( + $divider-border-color, + $divider-border-style, + $divider-border-width +) !default; diff --git a/packages/vuetify/src/components/VDivider/index.ts b/packages/vuetify/src/components/VDivider/index.ts new file mode 100644 index 0000000..c27d5d1 --- /dev/null +++ b/packages/vuetify/src/components/VDivider/index.ts @@ -0,0 +1 @@ +export { VDivider } from './VDivider' diff --git a/packages/vuetify/src/components/VEmptyState/VEmptyState.sass b/packages/vuetify/src/components/VEmptyState/VEmptyState.sass new file mode 100644 index 0000000..9f4aa07 --- /dev/null +++ b/packages/vuetify/src/components/VEmptyState/VEmptyState.sass @@ -0,0 +1,64 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-empty-state + align-items: center + display: flex + flex-direction: column + justify-content: center + min-height: $empty-state-min-height + padding: $empty-state-padding + + &--start + align-items: flex-start + + &--center + align-items: center + + &--end + align-items: flex-end + + .v-empty-state__media + text-align: center + width: 100% + + .v-icon + color: $empty-state-media-icon-color + + .v-empty-state__headline + color: $empty-state-headline-color + font-size: $empty-state-headline-font-size + font-weight: $empty-state-headline-font-weight + line-height: $empty-state-headline-line-height + text-align: center + margin-bottom: $empty-state-headline-margin-bottom + + .v-empty-state--mobile & + font-size: $empty-state-headline-mobile-font-size + + .v-empty-state__title + font-size: $empty-state-title-font-size + font-weight: $empty-state-title-font-weight + line-height: $empty-state-title-line-height + margin-bottom: $empty-state-title-margin-bottom + text-align: center + + .v-empty-state__text + font-size: $empty-state-text-font-size + font-weight: $empty-state-text-font-weight + line-height: $empty-state-text-line-height + padding: $empty-state-text-padding + text-align: center + + .v-empty-state__content + padding: $empty-state-content-padding + + .v-empty-state__actions + display: flex + gap: $empty-state-actions-gap + padding: $empty-state-actions-padding + + .v-empty-state__action-btn.v-btn + background-color: $empty-state-actions-btn-background-color + color: $empty-state-actions-btn-color diff --git a/packages/vuetify/src/components/VEmptyState/VEmptyState.tsx b/packages/vuetify/src/components/VEmptyState/VEmptyState.tsx new file mode 100644 index 0000000..848442e --- /dev/null +++ b/packages/vuetify/src/components/VEmptyState/VEmptyState.tsx @@ -0,0 +1,208 @@ +// Styles +import './VEmptyState.sass' + +// Components +import { VBtn } from '@/components/VBtn' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' +import { VImg } from '@/components/VImg' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { useDisplay } from '@/composables/display' +import { IconValue } from '@/composables/icons' +import { makeSizeProps } from '@/composables/size' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { toRef } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +// Types + +export type VEmptyStateSlots = { + actions: { + props: { + onClick: (e: Event) => void + } + } + default: never + headline: never + title: never + media: never + text: never +} + +export const makeVEmptyStateProps = propsFactory({ + actionText: String, + bgColor: String, + color: String, + icon: IconValue, + image: String, + justify: { + type: String as PropType<'start' | 'center' | 'end'>, + default: 'center', + }, + headline: String, + title: String, + text: String, + textWidth: { + type: [Number, String], + default: 500, + }, + href: String, + to: String, + + ...makeComponentProps(), + ...makeDimensionProps(), + ...makeSizeProps({ size: undefined }), + ...makeThemeProps(), +}, 'VEmptyState') + +export const VEmptyState = genericComponent()({ + name: 'VEmptyState', + + props: makeVEmptyStateProps(), + + emits: { + 'click:action': (e: Event) => true, + }, + + setup (props, { emit, slots }) { + const { themeClasses } = provideTheme(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor')) + const { dimensionStyles } = useDimension(props) + const { displayClasses } = useDisplay() + + function onClickAction (e: Event) { + emit('click:action', e) + } + + useRender(() => { + const hasActions = !!(slots.actions || props.actionText) + const hasHeadline = !!(slots.headline || props.headline) + const hasTitle = !!(slots.title || props.title) + const hasText = !!(slots.text || props.text) + const hasMedia = !!(slots.media || props.image || props.icon) + const size = props.size || (props.image ? 200 : 96) + + return ( +
    + { hasMedia && ( +
    + { !slots.media ? ( + <> + { props.image ? ( + + ) : props.icon ? ( + + ) : undefined } + + ) : ( + + { slots.media() } + + )} +
    + )} + + { hasHeadline && ( +
    + { slots.headline?.() ?? props.headline } +
    + )} + + { hasTitle && ( +
    + { slots.title?.() ?? props.title } +
    + )} + + { hasText && ( +
    + { slots.text?.() ?? props.text } +
    + )} + + { slots.default && ( +
    + { slots.default() } +
    + )} + + { hasActions && ( +
    + + { + slots.actions?.({ props: { onClick: onClickAction } }) ?? ( + + ) + } + +
    + )} +
    + ) + }) + + return {} + }, +}) + +export type VEmptyState = InstanceType diff --git a/packages/vuetify/src/components/VEmptyState/_variables.scss b/packages/vuetify/src/components/VEmptyState/_variables.scss new file mode 100644 index 0000000..30e3778 --- /dev/null +++ b/packages/vuetify/src/components/VEmptyState/_variables.scss @@ -0,0 +1,26 @@ +@use '../../styles/settings'; +@use "../../styles/tools/functions"; + +$empty-state-actions-btn-background-color: initial !default; +$empty-state-actions-btn-color: initial !default; +$empty-state-actions-gap: 8px !default; +$empty-state-actions-padding: 16px !default; +$empty-state-content-padding: 24px 0 !default; +$empty-state-headline-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$empty-state-headline-font-size: functions.map-deep-get(settings.$typography, 'h2', 'size') !default; +$empty-state-headline-font-weight: functions.map-deep-get(settings.$typography, 'h2', 'weight') !default; +$empty-state-headline-line-height: functions.map-deep-get(settings.$typography, 'h2', 'line-height') !default; +$empty-state-headline-margin-bottom: 8px !default; +$empty-state-headline-mobile-font-size: functions.map-deep-get(settings.$typography, 'h4', 'size') !default; +$empty-state-image-padding: 16px !default; +$empty-state-min-height: 100% !default; +$empty-state-media-icon-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$empty-state-padding: 16px !default; +$empty-state-text-font-size: functions.map-deep-get(settings.$typography, 'body-2', 'size') !default; +$empty-state-text-font-weight: functions.map-deep-get(settings.$typography, 'body-2', 'weight') !default; +$empty-state-text-line-height: functions.map-deep-get(settings.$typography, 'body-2', 'line-height') !default; +$empty-state-text-padding: 0 16px !default; +$empty-state-title-font-size: functions.map-deep-get(settings.$typography, 'h6', 'size') !default; +$empty-state-title-font-weight: functions.map-deep-get(settings.$typography, 'h6', 'weight') !default; +$empty-state-title-line-height: functions.map-deep-get(settings.$typography, 'h6', 'line-height') !default; +$empty-state-title-margin-bottom: 4px !default; diff --git a/packages/vuetify/src/components/VEmptyState/index.ts b/packages/vuetify/src/components/VEmptyState/index.ts new file mode 100644 index 0000000..b07cb70 --- /dev/null +++ b/packages/vuetify/src/components/VEmptyState/index.ts @@ -0,0 +1 @@ +export { VEmptyState } from './VEmptyState' diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass new file mode 100644 index 0000000..7fd294c --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass @@ -0,0 +1,191 @@ +@use 'sass:math' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Theme + .v-expansion-panel + background-color: $expansion-panel-background-color + color: $expansion-panel-color + + &:not(:first-child)::after + border-color: $expansion-panel-border-color + + &--disabled + .v-expansion-panel-title + color: $expansion-panel-disabled-color + + .v-expansion-panel-title__overlay + // This is multiplied by the text opacity, + // so we need to divide it to get the desired value + // TODO: Should disabled be part of states mixin? + opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity) + + // Block + .v-expansion-panels + display: flex + flex-wrap: wrap + justify-content: center + list-style-type: none + padding: 0 + width: 100% + position: relative + z-index: 1 + + &:not(&--variant-accordion) + > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) + border-bottom-left-radius: 0 !important + border-bottom-right-radius: 0 !important + + > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) + border-top-left-radius: 0 !important + border-top-right-radius: 0 !important + + > :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active) + border-bottom-left-radius: 0 !important + border-bottom-right-radius: 0 !important + + > :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active) + border-top-left-radius: 0 !important + border-top-right-radius: 0 !important + + &--variant-accordion + > :first-child:not(:last-child) + border-bottom-left-radius: 0 !important + border-bottom-right-radius: 0 !important + + > :last-child:not(:first-child) + border-top-left-radius: 0 !important + border-top-right-radius: 0 !important + + .v-expansion-panel-title--active + border-bottom-left-radius: initial + border-bottom-right-radius: initial + + > :not(:first-child):not(:last-child) + border-radius: 0 !important + + .v-expansion-panel-title__overlay + transition: 0.3s border-radius settings.$standard-easing + + // Element + .v-expansion-panel + flex: 1 0 100% + max-width: 100% + position: relative + transition: .3s all settings.$standard-easing + transition-property: margin-top, border-radius, border, max-width + border-radius: $expansion-panel-border-radius + + &:not(:first-child)::after + border-top-style: solid + border-top-width: thin + content: '' + left: 0 + position: absolute + right: 0 + top: 0 + transition: 0.3s opacity settings.$standard-easing + + &--disabled + .v-expansion-panel-title + pointer-events: none + + &--active + &:not(:first-child), + + .v-expansion-panel + margin-top: $expansion-panel-active-margin + + &::after + opacity: 0 + + > .v-expansion-panel-title + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 + + &:not(.v-expansion-panel-title--static) + min-height: $expansion-panel-active-title-min-height + + .v-expansion-panel__shadow + @include tools.absolute() + @include tools.elevation(2) + border-radius: inherit + z-index: -1 + + .v-expansion-panel-title + align-items: center + text-align: start + border-radius: inherit + display: flex + font-size: $expansion-panel-title-font-size + line-height: 1 + min-height: $expansion-panel-title-min-height + outline: none + padding: $expansion-panel-title-padding + position: relative + transition: .3s min-height settings.$standard-easing + width: 100% + justify-content: space-between + + @include tools.states('.v-expansion-panel-title__overlay', false) + + &--focusable.v-expansion-panel-title--active + @include tools.active-states('.v-expansion-panel-title__overlay') + + .v-expansion-panel-title__overlay + @include tools.absolute() + background-color: currentColor + border-radius: inherit + opacity: 0 + + .v-expansion-panel-title__icon + display: inline-flex + margin-bottom: -4px + margin-top: -4px + user-select: none + margin-inline-start: auto + + .v-expansion-panel-text + display: flex + + &__wrapper + padding: $expansion-panel-text-padding + flex: 1 1 auto + max-width: 100% + + // Variants + .v-expansion-panels--variant-accordion + > .v-expansion-panel + margin-top: 0 + + &::after + opacity: 1 + + .v-expansion-panels--variant-popout + > .v-expansion-panel + max-width: $expansion-panel-popout-max-width + + &--active + max-width: $expansion-panel-popout-active-max-width + + .v-expansion-panels--variant-inset + > .v-expansion-panel + max-width: $expansion-panel-inset-max-width + + &--active + max-width: $expansion-panel-inset-active-max-width + + .v-expansion-panels--flat + > .v-expansion-panel + &::after + border-top: none + + .v-expansion-panel__shadow + display: none + + .v-expansion-panels--tile + border-radius: 0 + + > .v-expansion-panel + border-radius: 0 diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx new file mode 100644 index 0000000..4741fad --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx @@ -0,0 +1,139 @@ +// Components +import { VExpansionPanelSymbol } from './shared' +import { makeVExpansionPanelTextProps, VExpansionPanelText } from './VExpansionPanelText' +import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from './VExpansionPanelTitle' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeGroupItemProps, useGroupItem } from '@/composables/group' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { computed, provide } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVExpansionPanelProps = propsFactory({ + title: String, + text: String, + bgColor: String, + + ...makeElevationProps(), + ...makeGroupItemProps(), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeVExpansionPanelTitleProps(), + ...makeVExpansionPanelTextProps(), +}, 'VExpansionPanel') + +export type VExpansionPanelSlots = { + default: never + title: never + text: never +} + +export const VExpansionPanel = genericComponent()({ + name: 'VExpansionPanel', + + props: makeVExpansionPanelProps(), + + emits: { + 'group:selected': (val: { value: boolean }) => true, + }, + + setup (props, { slots }) { + const groupItem = useGroupItem(props, VExpansionPanelSymbol) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'bgColor') + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(props) + const isDisabled = computed(() => groupItem?.disabled.value || props.disabled) + + const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => { + if (groupItem.group.selected.value.includes(item.id)) arr.push(index) + return arr + }, [])) + + const isBeforeSelected = computed(() => { + const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id) + return !groupItem.isSelected.value && + selectedIndices.value.some(selectedIndex => selectedIndex - index === 1) + }) + + const isAfterSelected = computed(() => { + const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id) + return !groupItem.isSelected.value && + selectedIndices.value.some(selectedIndex => selectedIndex - index === -1) + }) + + provide(VExpansionPanelSymbol, groupItem) + + useRender(() => { + const hasText = !!(slots.text || props.text) + const hasTitle = !!(slots.title || props.title) + + const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props) + const expansionPanelTextProps = VExpansionPanelText.filterProps(props) + + return ( + +
    + + + { hasTitle && ( + + { slots.title ? slots.title() : props.title } + + )} + + { hasText && ( + + { slots.text ? slots.text() : props.text } + + )} + + { slots.default?.() } + + + ) + }) + + return { + groupItem, + } + }, +}) + +export type VExpansionPanel = InstanceType diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx new file mode 100644 index 0000000..6c0211b --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx @@ -0,0 +1,53 @@ +// Components +import { VExpansionPanelSymbol } from './shared' +import { VExpandTransition } from '@/components/transitions' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeLazyProps, useLazy } from '@/composables/lazy' + +// Utilities +import { inject } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVExpansionPanelTextProps = propsFactory({ + ...makeComponentProps(), + ...makeLazyProps(), +}, 'VExpansionPanelText') + +export const VExpansionPanelText = genericComponent()({ + name: 'VExpansionPanelText', + + props: makeVExpansionPanelTextProps(), + + setup (props, { slots }) { + const expansionPanel = inject(VExpansionPanelSymbol) + + if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-text needs to be placed inside v-expansion-panel') + + const { hasContent, onAfterLeave } = useLazy(props, expansionPanel.isSelected) + + useRender(() => ( + +
    + { slots.default && hasContent.value && ( +
    + { slots.default?.() } +
    + )} +
    +     + )) + + return {} + }, +}) + +export type VExpansionPanelText = InstanceType diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx new file mode 100644 index 0000000..98df96d --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx @@ -0,0 +1,128 @@ +// Components +import { VExpansionPanelSymbol } from './shared' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { IconValue } from '@/composables/icons' + +// Directives +import { Ripple } from '@/directives/ripple' + +// Utilities +import { computed, inject } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { RippleDirectiveBinding } from '@/directives/ripple' + +interface ExpansionPanelTitleSlot { + collapseIcon: IconValue + disabled: boolean | undefined + expanded: boolean + expandIcon: IconValue + readonly: boolean +} + +export type VExpansionPanelTitleSlots = { + default: ExpansionPanelTitleSlot + actions: ExpansionPanelTitleSlot +} + +export const makeVExpansionPanelTitleProps = propsFactory({ + color: String, + expandIcon: { + type: IconValue, + default: '$expand', + }, + collapseIcon: { + type: IconValue, + default: '$collapse', + }, + hideActions: Boolean, + focusable: Boolean, + static: Boolean, + ripple: { + type: [Boolean, Object] as PropType, + default: false, + }, + readonly: Boolean, + + ...makeComponentProps(), +}, 'VExpansionPanelTitle') + +export const VExpansionPanelTitle = genericComponent()({ + name: 'VExpansionPanelTitle', + + directives: { Ripple }, + + props: makeVExpansionPanelTitleProps(), + + setup (props, { slots }) { + const expansionPanel = inject(VExpansionPanelSymbol) + + if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel') + + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color') + + const slotProps = computed(() => ({ + collapseIcon: props.collapseIcon, + disabled: expansionPanel.disabled.value, + expanded: expansionPanel.isSelected.value, + expandIcon: props.expandIcon, + readonly: props.readonly, + })) + + const icon = computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon) + + useRender(() => ( + + )) + + return {} + }, +}) + +export type VExpansionPanelTitle = InstanceType diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx new file mode 100644 index 0000000..204cfd9 --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx @@ -0,0 +1,123 @@ +// Styles +import './VExpansionPanel.sass' + +// Components +import { VExpansionPanelSymbol } from './shared' +import { makeVExpansionPanelProps } from './VExpansionPanel' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeGroupProps, useGroup } from '@/composables/group' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, toRef } from 'vue' +import { genericComponent, pick, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +const allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const + +type Variant = typeof allowedVariants[number] + +export type VExpansionPanelSlot = { + prev: () => void + next: () => void +} + +export type VExpansionPanelSlots = { + default: VExpansionPanelSlot +} + +export const makeVExpansionPanelsProps = propsFactory({ + flat: Boolean, + + ...makeGroupProps(), + ...pick(makeVExpansionPanelProps(), [ + 'bgColor', + 'collapseIcon', + 'color', + 'eager', + 'elevation', + 'expandIcon', + 'focusable', + 'hideActions', + 'readonly', + 'ripple', + 'rounded', + 'tile', + 'static', + ]), + ...makeThemeProps(), + ...makeComponentProps(), + ...makeTagProps(), + + variant: { + type: String as PropType, + default: 'default', + validator: (v: any) => allowedVariants.includes(v), + }, +}, 'VExpansionPanels') + +export const VExpansionPanels = genericComponent()({ + name: 'VExpansionPanels', + + props: makeVExpansionPanelsProps(), + + emits: { + 'update:modelValue': (val: unknown) => true, + }, + + setup (props, { slots }) { + const { next, prev } = useGroup(props, VExpansionPanelSymbol) + + const { themeClasses } = provideTheme(props) + + const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`) + + provideDefaults({ + VExpansionPanel: { + bgColor: toRef(props, 'bgColor'), + collapseIcon: toRef(props, 'collapseIcon'), + color: toRef(props, 'color'), + eager: toRef(props, 'eager'), + elevation: toRef(props, 'elevation'), + expandIcon: toRef(props, 'expandIcon'), + focusable: toRef(props, 'focusable'), + hideActions: toRef(props, 'hideActions'), + readonly: toRef(props, 'readonly'), + ripple: toRef(props, 'ripple'), + rounded: toRef(props, 'rounded'), + static: toRef(props, 'static'), + }, + }) + + useRender(() => ( + + { slots.default?.({ prev, next }) } + + )) + + return { + next, + prev, + } + }, +}) + +export type VExpansionPanels = InstanceType diff --git a/packages/vuetify/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.cy.tsx b/packages/vuetify/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.cy.tsx new file mode 100644 index 0000000..c65454f --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.cy.tsx @@ -0,0 +1,155 @@ +/// + +// Components +import { VExpansionPanel, VExpansionPanels, VExpansionPanelText, VExpansionPanelTitle } from '../' +import { CenteredGrid } from '@/../cypress/templates' + +// Utilities +import { ref } from 'vue' + +describe('VExpansionPanels', () => { + it('renders using props', () => { + const titles = ['Header 1', 'Header 2'] + + cy.mount(() => ( + + + { titles.map(title => ( + + ))} + + + )) + .get('.v-expansion-panel-title') + .each((item, index) => { + expect(item.text()).to.equal(titles[index]) + }) + }) + + it('renders using slots', () => { + const titles = ['Header 1', 'Header 2'] + + cy.mount(() => ( + + + { titles.map(title => ( + + {{ + title: () => title, + text: () => 'Content', + }} + + ))} + + + )) + .get('.v-expansion-panel-title') + .each((item, index) => { + expect(item.text()).to.equal(titles[index]) + }) + }) + + it('renders default slot', () => { + const titles = ['Header 1', 'Header 2'] + + cy.mount(() => ( + + + { titles.map(title => ( + + { title } + Content + + ))} + + + )) + .get('.v-expansion-panel-title') + .each((item, index) => { + expect(item.text()).to.equal(titles[index]) + }) + }) + + it('responds to clicking title', () => { + cy.mount(() => ( + + + + + + )) + .get('.v-expansion-panel-title').eq(0).as('title') + .click() + // TODO: basically a noop, what is this test supposed to do? + cy.get('@title').should('have.class', 'v-expansion-panel-title') + }) + + it('supports hide-actions prop', () => { + cy.mount(() => ( + + + + + + )) + .get('.v-expansion-panel-title__icon') + .should('not.exist') + }) + + it('supports color props', () => { + cy.mount(() => ( + + + + + + )) + .get('.v-expansion-panel-title') + .should('have.class', 'bg-primary') + .get('.v-expansion-panel') + .should('have.class', 'bg-secondary') + }) + + it('supports rounded prop', () => { + cy.mount(() => ( + + + + + + )) + .get('.v-expansion-panel') + .should('have.class', 'rounded-xl') + }) + + it('supports model-value', () => { + cy.mount(() => ( + + + + + + + )) + .get('.v-expansion-panel-title') + .should('have.class', 'v-expansion-panel-title--active') + }) + + it('supports v-model', () => { + const foo = ref() + cy.mount(() => ( + + foo.value = v }> + + + +
    { foo.value }
    +     + )) + .get('.v-expansion-panel-title').eq(1).as('title') + .click() + cy.get('@title').should('have.class', 'v-expansion-panel-title--active') + .get('.value') + .should('have.text', 'foo') + }) +}) diff --git a/packages/vuetify/src/components/VExpansionPanel/_variables.scss b/packages/vuetify/src/components/VExpansionPanel/_variables.scss new file mode 100644 index 0000000..bf6b8dd --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/_variables.scss @@ -0,0 +1,24 @@ +@use '../../styles/settings'; + +// VExpansionPanel +$expansion-panel-active-margin: 16px !default; +$expansion-panel-background-color: rgb(var(--v-theme-surface)) !default; +$expansion-panel-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default; +$expansion-panel-border-radius: settings.$border-radius-root !default; +$expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$expansion-panel-disabled-opacity: 0.26 !default; +$expansion-panel-disabled-color: rgba(var(--v-theme-on-surface), $expansion-panel-disabled-opacity) !default; +$expansion-panel-disabled-overlay: 0.12 !default; +$expansion-panel-inset-active-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default; +$expansion-panel-inset-max-width: 100% !default; +$expansion-panel-popout-active-max-width: calc(100% + #{$expansion-panel-active-margin}) !default; +$expansion-panel-popout-max-width: calc(100% - #{$expansion-panel-active-margin * 2}) !default; + +// VExpansionPanelTitle +$expansion-panel-active-title-min-height: 64px !default; +$expansion-panel-title-font-size: 0.9375rem !default; +$expansion-panel-title-min-height: 48px !default; +$expansion-panel-title-padding: 16px 24px !default; + +// VExpansionPanelText +$expansion-panel-text-padding: 8px 24px 16px !default; diff --git a/packages/vuetify/src/components/VExpansionPanel/index.ts b/packages/vuetify/src/components/VExpansionPanel/index.ts new file mode 100644 index 0000000..577e846 --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/index.ts @@ -0,0 +1,4 @@ +export { VExpansionPanels } from './VExpansionPanels' +export { VExpansionPanel } from './VExpansionPanel' +export { VExpansionPanelText } from './VExpansionPanelText' +export { VExpansionPanelTitle } from './VExpansionPanelTitle' diff --git a/packages/vuetify/src/components/VExpansionPanel/shared.ts b/packages/vuetify/src/components/VExpansionPanel/shared.ts new file mode 100644 index 0000000..002b0a0 --- /dev/null +++ b/packages/vuetify/src/components/VExpansionPanel/shared.ts @@ -0,0 +1,5 @@ +// Types +import type { InjectionKey } from 'vue' +import type { GroupItemProvide } from '@/composables/group' + +export const VExpansionPanelSymbol: InjectionKey = Symbol.for('vuetify:v-expansion-panel') diff --git a/packages/vuetify/src/components/VFab/VFab.sass b/packages/vuetify/src/components/VFab/VFab.sass new file mode 100644 index 0000000..e6bf9ee --- /dev/null +++ b/packages/vuetify/src/components/VFab/VFab.sass @@ -0,0 +1,84 @@ +@use '../../styles/tools' +@use '../../styles/settings' +@use 'sass:math' +@use 'sass:map' +@use './variables' as * +@use './mixins' as * + +@include tools.layer('components') + .v-fab + align-items: center + display: inline-flex + flex: 1 1 auto + pointer-events: none + position: relative + transition-duration: $fab-transition-duration + transition-timing-function: $fab-transition-timing-function + vertical-align: middle + + .v-btn + pointer-events: auto + + &--variant-elevated + @include tools.elevation(3) + + &--app, + &--absolute + display: flex + + &--start, + &--left + justify-content: flex-start + + &--center + align-items: center + justify-content: center + + &--end, + &--right + justify-content: flex-end + + &--bottom + align-items: flex-end + + &--top + align-items: flex-start + + &--extended + .v-btn + // min-height: 56px + // min-width: 80px + border-radius: 9999px !important + + .v-fab__container + align-self: center + display: inline-flex + position: absolute + vertical-align: middle + + .v-fab--app & + margin: 12px + + .v-fab--absolute & + position: absolute + z-index: 4 + + .v-fab--offset.v-fab--top & + transform: translateY(-50%) + + .v-fab--offset.v-fab--bottom & + transform: translateY(50%) + + .v-fab--top & + top: 0 + + .v-fab--bottom & + bottom: 0 + + .v-fab--left &, + .v-fab--start & + left: 0 + + .v-fab--right &, + .v-fab--end & + right: 0 diff --git a/packages/vuetify/src/components/VFab/VFab.tsx b/packages/vuetify/src/components/VFab/VFab.tsx new file mode 100644 index 0000000..069034e --- /dev/null +++ b/packages/vuetify/src/components/VFab/VFab.tsx @@ -0,0 +1,142 @@ +// Styles +import './VFab.sass' + +// Components +import { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn' + +// Composables +import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' +import { makeLocationProps } from '@/composables/location' +import { useProxiedModel } from '@/composables/proxiedModel' +import { useResizeObserver } from '@/composables/resizeObserver' +import { useToggleScope } from '@/composables/toggleScope' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Utilities +import { computed, ref, shallowRef, toRef, watchEffect } from 'vue' +import { genericComponent, omit, propsFactory, useRender } from '@/util' + +// Types +import type { ComputedRef } from 'vue' +import type { Position } from '@/composables/layout' + +export const makeVFabProps = propsFactory({ + app: Boolean, + appear: Boolean, + extended: Boolean, + layout: Boolean, + offset: Boolean, + modelValue: { + type: Boolean, + default: true, + }, + + ...omit(makeVBtnProps({ active: true }), ['location']), + ...makeLayoutItemProps(), + ...makeLocationProps(), + ...makeTransitionProps({ transition: 'fab-transition' }), +}, 'VFab') + +export const VFab = genericComponent()({ + name: 'VFab', + + props: makeVFabProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { slots }) { + const model = useProxiedModel(props, 'modelValue') + const height = shallowRef(56) + const layoutItemStyles = ref() + + const { resizeRef } = useResizeObserver(entries => { + if (!entries.length) return + height.value = entries[0].target.clientHeight + }) + + const hasPosition = computed(() => props.app || props.absolute) + + const position = computed(() => { + if (!hasPosition.value) return false + + return props.location?.split(' ').shift() ?? 'bottom' + }) as ComputedRef + + const orientation = computed(() => { + if (!hasPosition.value) return false + + return props.location?.split(' ')[1] ?? 'end' + }) + + useToggleScope(() => props.app, () => { + const layout = useLayoutItem({ + id: props.name, + order: computed(() => parseInt(props.order, 10)), + position, + layoutSize: computed(() => props.layout ? height.value + 24 : 0), + elementSize: computed(() => height.value + 24), + active: computed(() => props.app && model.value), + absolute: toRef(props, 'absolute'), + }) + + watchEffect(() => { + layoutItemStyles.value = layout.layoutItemStyles.value + }) + }) + + const vFabRef = ref() + + useRender(() => { + const btnProps = VBtn.filterProps(props) + + return ( +
    +
    + + + +
    +
    + ) + }) + + return {} + }, +}) + +export type VFab = InstanceType diff --git a/packages/vuetify/src/components/VFab/_mixins.scss b/packages/vuetify/src/components/VFab/_mixins.scss new file mode 100644 index 0000000..46aab79 --- /dev/null +++ b/packages/vuetify/src/components/VFab/_mixins.scss @@ -0,0 +1,22 @@ +@use 'sass:math'; +@use 'sass:map'; +@use 'sass:meta'; +@use '../../styles/settings'; +@use '../../styles/tools'; +@use './variables' as *; + +@mixin fab-sizes ($map: $fab-sizes, $immediate: false) { + @each $sizeName, $multiplier in $fab-size-scales { + $size: map.get($map, 'font-size') + math.div(2 * $multiplier, 16); + $height: map.get($map, 'height') + (12px * $multiplier); + + // .v-fab .v-btn--size-#{$sizeName} { + // --v-btn-size: #{$size}; + // --v-btn-height: #{$height}; + // } + + .v-fab--bottom .v-btn--size-#{$sizeName} { + bottom: -1 * $height / 2; + } + } +} diff --git a/packages/vuetify/src/components/VFab/_variables.scss b/packages/vuetify/src/components/VFab/_variables.scss new file mode 100644 index 0000000..d5cb273 --- /dev/null +++ b/packages/vuetify/src/components/VFab/_variables.scss @@ -0,0 +1,33 @@ +@use 'sass:math'; +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +$fab-border-radius: map.get(settings.$rounded, 'circle') !default; +$fab-border-radius-multiplier: 0 !default; // 2.4 for MD3 +$fab-height: 56px !default; +$fab-font-size: tools.map-deep-get(settings.$typography, 'button', 'size') !default; +$fab-font-weight: tools.map-deep-get(settings.$typography, 'button', 'weight') !default; +$fab-transition-duration: 0.2s !default; +$fab-transition-timing-function: settings.$standard-easing !default; +$fab-width-ratio: math.div(16, 9) !default; +$fab-padding-ratio: 2.25 !default; + +$fab-size-scales: ( + 'x-small': -2, + 'small': -1, + 'default': 0, + 'large': 2, + 'x-large': 5 +) !default; + +$fab-sizes: () !default; +$fab-sizes: map.merge( + ( + 'height': $fab-height, + 'font-size': $fab-font-size, + 'width-ratio': $fab-width-ratio, + 'padding-ratio': $fab-padding-ratio + ), + $fab-sizes +); diff --git a/packages/vuetify/src/components/VFab/index.ts b/packages/vuetify/src/components/VFab/index.ts new file mode 100644 index 0000000..a2c3347 --- /dev/null +++ b/packages/vuetify/src/components/VFab/index.ts @@ -0,0 +1 @@ +export { VFab } from './VFab' diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass new file mode 100644 index 0000000..6a698fa --- /dev/null +++ b/packages/vuetify/src/components/VField/VField.sass @@ -0,0 +1,540 @@ +@use 'sass:map' +@use 'sass:math' +@use 'sass:selector' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + /* region INPUT */ + .v-field + --v-theme-overlay-multiplier: 1 + + display: grid + grid-template-areas: "prepend-inner field clear append-inner" + grid-template-columns: min-content minmax(0, 1fr) min-content min-content + font-size: $field-font-size + letter-spacing: $field-letter-spacing + max-width: $field-max-width + border-radius: $field-border-radius + contain: layout + flex: 1 0 + grid-area: control + position: relative + + &--disabled + opacity: var(--v-disabled-opacity) + pointer-events: none + + --v-field-padding-start: #{$field-control-padding-start} + --v-field-padding-end: #{$field-control-padding-end} + --v-field-padding-top: #{$field-control-padding-top} + --v-field-padding-bottom: #{$field-control-padding-bottom} + --v-field-input-padding-top: #{$field-input-padding-top} + --v-field-input-padding-bottom: #{$field-input-padding-bottom} + + .v-chip + --v-chip-height: #{$field-chip-height} + + /* endregion */ + /* region MODIFIERS */ + .v-field + &--prepended + padding-inline-start: $field-control-affixed-padding + + &--appended + padding-inline-end: $field-control-affixed-padding + + &--variant-solo, + &--variant-solo-filled + background: $field-control-solo-background + border-color: transparent + color: $field-control-solo-color + + @include tools.elevation($field-control-solo-elevation) + + &--variant-solo-inverted + background: $field-control-solo-background + border-color: transparent + color: $field-control-solo-inverted-color + + @include tools.elevation($field-control-solo-elevation) + + &.v-field--focused + color: $field-control-solo-inverted-focused-color + + &--variant-filled + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 + + &--variant-solo, + &--variant-solo-inverted, + &--variant-solo-filled, + &--variant-filled + $root: & + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + --v-input-control-height: #{$field-control-height + $modifier} + --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)} + + &--variant-outlined, + &--single-line, + &--no-label + --v-field-padding-top: 0px + $root: & + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + --v-field-padding-bottom: #{16px + $modifier * .5} + + &--variant-plain, + &--variant-underlined + $root: & + border-radius: 0 + padding: 0 + + &.v-field + --v-field-padding-start: 0px + --v-field-padding-end: 0px + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + --v-input-control-height: #{$field-control-underlined-height + $modifier} + --v-field-padding-top: #{math.max(0px, 4px + $modifier * .25)} + --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)} + + &--flat + box-shadow: none + + &--rounded + @include tools.rounded($field-rounded-border-radius) + + // These are separate so they can override the default variant styles + &.v-field + &--prepended + --v-field-padding-start: #{$field-control-affixed-inner-padding} + + &--appended + --v-field-padding-end: #{$field-control-affixed-inner-padding} + + /* endregion */ + /* region ELEMENTS */ + .v-field__input + align-items: center + color: inherit + column-gap: $field-input-column-gap + display: flex + flex-wrap: wrap + letter-spacing: $field-letter-spacing + opacity: $field-input-opacity + min-height: $field-input-min-height + min-width: 0 + padding-inline: var(--v-field-padding-start) var(--v-field-padding-end) + padding-top: var(--v-field-input-padding-top) + padding-bottom: var(--v-field-input-padding-bottom) + position: relative + width: 100% + + $root: & + + @at-root #{selector.nest('.v-field.v-field--center-affix.v-field--variant-underlined, .v-field.v-field--center-affix.v-field--variant-plain', &)} + padding-top: unset + padding-bottom: unset + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + row-gap: #{$field-input-row-gap + $modifier * .25} + + input + letter-spacing: inherit + + @at-root + & input::placeholder, + input#{&}::placeholder, + textarea#{&}::placeholder + color: currentColor + opacity: var(--v-disabled-opacity) + + &:focus, + &:active + outline: none + + // Remove Firefox red outline + &:invalid + box-shadow: none + + .v-field__field + flex: 1 0 + grid-area: field + position: relative + align-items: flex-start + display: flex + + /* endregion */ + /* region AFFIXES */ + .v-field__prepend-inner + grid-area: prepend-inner + padding-inline-end: var(--v-field-padding-after) + + .v-field__clearable + grid-area: clear + + .v-field__append-inner + grid-area: append-inner + padding-inline-start: var(--v-field-padding-after) + + .v-field__append-inner, + .v-field__clearable, + .v-field__prepend-inner + display: flex + align-items: flex-start + padding-top: var(--v-input-padding-top, $field-control-padding-top) + + .v-field--center-affix & + align-items: center + padding-top: 0 + + .v-field:not(.v-field--center-affix).v-field--variant-underlined, + .v-field:not(.v-field--center-affix).v-field--variant-plain + .v-field__append-inner, + .v-field__clearable, + .v-field__prepend-inner + align-items: flex-start + padding-top: $field-input-padding-top + padding-bottom: $field-input-padding-bottom + + .v-field__prepend-inner, + .v-field__append-inner + .v-field--focused & + opacity: 1 + + .v-field__prepend-inner, + .v-field__append-inner, + .v-field__clearable + > .v-icon + opacity: var(--v-medium-emphasis-opacity) + + .v-field--disabled &, + .v-field--error & + > .v-icon + opacity: 1 + + .v-field--error:not(.v-field--disabled) & + > .v-icon + color: rgb(var(--v-theme-error)) + + .v-field__clearable + cursor: pointer + opacity: 0 + overflow: hidden + margin-inline: $field-clearable-margin + transition: $field-transition-timing + transition-property: opacity, transform, width + + .v-field--focused &, + .v-field--persistent-clear & + opacity: 1 + + @media (hover: hover) + .v-field:hover & + opacity: 1 + + @media (hover: none) + opacity: 1 + + /* endregion */ + /* region LABEL */ + .v-label.v-field-label + contain: layout paint + display: block + margin-inline-start: var(--v-field-padding-start) + margin-inline-end: var(--v-field-padding-end) + max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end)) + pointer-events: none + position: absolute + top: var(--v-input-padding-top) + transform-origin: left center + transition: $field-transition-timing + transition-property: opacity, transform + z-index: 1 + + .v-field--variant-underlined &, + .v-field--variant-plain & + top: calc(var(--v-input-padding-top) + var(--v-field-padding-top)) + + .v-field--center-affix & + top: 50% + transform: translateY(-50%) + + .v-field--active & + visibility: hidden + + .v-field--focused &, + .v-field--error & + opacity: 1 + + .v-field--error:not(.v-field--disabled) & + color: rgb(var(--v-theme-error)) + + &--floating + --v-field-label-scale: #{$field-label-floating-scale}em + font-size: var(--v-field-label-scale) + visibility: hidden + max-width: 100% + + .v-field--center-affix & + transform: none + + .v-field.v-field--active & + visibility: unset + + .v-field--variant-solo &, + .v-field--variant-solo-inverted &, + .v-field--variant-filled &, + .v-field--variant-solo-filled & + $root: & + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.nest(&, $root)} + top: 7px + $modifier * .25 + + .v-field--variant-plain &, + .v-field--variant-underlined & + transform: translateY(-16px) + margin: 0 + top: var(--v-input-padding-top) + + .v-field--variant-outlined & + transform: translateY(-50%) + transform-origin: center + position: static + margin: 0 4px + + /* endregion */ + /* region OUTLINE */ + .v-field__outline + --v-field-border-width: #{$field-border-width} + --v-field-border-opacity: #{$field-outline-opacity} + align-items: stretch + contain: layout + display: flex + height: 100% + left: 0 + pointer-events: none + position: absolute + right: 0 + width: 100% + + @media (hover: hover) + .v-field:hover & + --v-field-border-opacity: var(--v-high-emphasis-opacity) + + .v-field--error:not(.v-field--disabled) & + color: rgb(var(--v-theme-error)) + + .v-field.v-field--focused &, + .v-input.v-input--error & + --v-field-border-opacity: 1 + + .v-field--variant-outlined.v-field--focused & + --v-field-border-width: #{$field-focused-border-width} + + .v-field--variant-filled &, + .v-field--variant-underlined & + &::before + border-color: currentColor + border-style: solid + border-width: 0 0 var(--v-field-border-width) + opacity: var(--v-field-border-opacity) + transition: opacity $field-subtle-transition-timing + @include tools.absolute(true) + + .v-field--variant-filled &, + .v-field--variant-underlined & + &::after + border-color: currentColor + border-style: solid + border-width: 0 0 $field-focused-border-width + transform: scaleX(0) + transition: transform $field-transition-timing + @include tools.absolute(true) + + @at-root #{selector.append('.v-field--focused', &)} + transform: scaleX(1) + + .v-field--variant-outlined & + border-radius: inherit + + &__start, + &__notch::before, + &__notch::after, + &__end + border: 0 solid currentColor + opacity: var(--v-field-border-opacity) + transition: opacity $field-subtle-transition-timing + + &__start + flex: 0 0 $field-control-affixed-padding + border-top-width: var(--v-field-border-width) + border-bottom-width: var(--v-field-border-width) + border-inline-start-width: var(--v-field-border-width) + border-start-start-radius: inherit + border-start-end-radius: 0 + border-end-end-radius: 0 + border-end-start-radius: inherit + + @at-root + #{selector.append('.v-field--rounded', &)}, + #{selector.append('[class^="rounded-"]', &)}, + #{selector.append('[class*=" rounded-"]', &)} + flex-basis: calc(var(--v-input-control-height) / 2 + 2px) + + @at-root #{selector.append('.v-field--reverse', &)} + border-start-start-radius: 0 + border-start-end-radius: inherit + border-end-end-radius: inherit + border-end-start-radius: 0 + border-inline-end-width: var(--v-field-border-width) + border-inline-start-width: 0 + + &__notch + flex: none + position: relative + max-width: calc(100% - $field-control-affixed-padding) + + &::before, + &::after + opacity: var(--v-field-border-opacity) + transition: opacity $field-subtle-transition-timing + + @include tools.absolute(true) + + &::before + border-width: var(--v-field-border-width) 0 0 + + &::after + bottom: 0 + border-width: 0 0 var(--v-field-border-width) + + @at-root #{selector.append('.v-field--active', &)} + &::before + opacity: 0 + + &__end + flex: 1 + border-top-width: var(--v-field-border-width) + border-bottom-width: var(--v-field-border-width) + border-inline-end-width: var(--v-field-border-width) + border-start-start-radius: 0 + border-start-end-radius: inherit + border-end-end-radius: inherit + border-end-start-radius: 0 + + @at-root #{selector.append('.v-field--reverse', &)} + border-start-start-radius: inherit + border-start-end-radius: 0 + border-end-end-radius: 0 + border-end-start-radius: inherit + border-inline-end-width: 0 + border-inline-start-width: var(--v-field-border-width) + + /* endregion */ + /* region LOADER */ + .v-field__loader + top: calc(100% - 2px) + left: 0 + position: absolute + right: 0 + width: 100% + border-top-left-radius: 0 + border-top-right-radius: 0 + border-bottom-left-radius: inherit + border-bottom-right-radius: inherit + overflow: hidden + + .v-field--variant-outlined & + top: calc(100% - 3px) + width: calc(100% - #{$field-border-width} * 2) + left: $field-border-width + + /* endregion */ + /* region OVERLAY */ + .v-field__overlay + border-radius: inherit + pointer-events: none + + @include tools.absolute() + + .v-field--variant-filled + .v-field__overlay + background-color: currentColor + opacity: $field-overlay-filled-opacity + transition: opacity $field-subtle-transition-timing + + &.v-field--has-background .v-field__overlay + opacity: 0 + + @media (hover: hover) + &:hover .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + + &.v-field--focused .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) + + .v-field--variant-solo-filled + .v-field__overlay + background-color: currentColor + opacity: $field-overlay-filled-opacity + transition: opacity $field-subtle-transition-timing + + @media (hover: hover) + &:hover .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + + &.v-field--focused .v-field__overlay + opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier)) + + .v-field--variant-solo-inverted + .v-field__overlay + transition: opacity $field-subtle-transition-timing + + &.v-field--has-background .v-field__overlay + opacity: 0 + + @media (hover: hover) + &:hover .v-field__overlay + opacity: calc((#{.04} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier)) + + &.v-field--focused .v-field__overlay + background-color: $field-overlay-focused-background-color + opacity: 1 + + /* endregion */ + /* region MODIFIERS */ + .v-field--reverse + .v-field__field, + .v-field__input, + .v-field__outline + flex-direction: row-reverse + + .v-field__input, input + text-align: end + + .v-field--variant-filled, + .v-field--variant-underlined + .v-input--disabled & + .v-field__outline::before + border-image: repeating-linear-gradient(to right, $field-disabled-color 0px, $field-disabled-color 2px, transparent 2px, transparent 4px) 1 repeat + + .v-field--loading + .v-field__outline::after, + .v-field__outline::before + opacity: 0 + + /* endregion */ diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx new file mode 100644 index 0000000..037cf02 --- /dev/null +++ b/packages/vuetify/src/components/VField/VField.tsx @@ -0,0 +1,415 @@ +// Styles +import './VField.sass' + +// Components +import { VFieldLabel } from './VFieldLabel' +import { VExpandXTransition } from '@/components/transitions' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { useInputIcon } from '@/components/VInput/InputIcon' + +// Composables +import { useBackgroundColor, useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeFocusProps, useFocus } from '@/composables/focus' +import { IconValue } from '@/composables/icons' +import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader' +import { useRtl } from '@/composables/locale' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, ref, toRef, watch } from 'vue' +import { + animate, + convertToUnit, + EventProp, + genericComponent, + getUid, + isOn, + nullifyTransforms, + pick, + propsFactory, + standardEasing, + useRender, +} from '@/util' + +// Types +import type { PropType, Ref } from 'vue' +import type { LoaderSlotProps } from '@/composables/loader' +import type { GenericProps } from '@/util' + +const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'] as const +type Variant = typeof allowedVariants[number] + +export interface DefaultInputSlot { + isActive: Ref + isFocused: Ref + controlRef: Ref + focus: () => void + blur: () => void +} + +export interface VFieldSlot extends DefaultInputSlot { + props: Record +} + +export const makeVFieldProps = propsFactory({ + appendInnerIcon: IconValue, + bgColor: String, + clearable: Boolean, + clearIcon: { + type: IconValue, + default: '$clear', + }, + active: Boolean, + centerAffix: Boolean, + color: String, + baseColor: String, + dirty: Boolean, + disabled: { + type: Boolean, + default: null, + }, + error: Boolean, + flat: Boolean, + label: String, + persistentClear: Boolean, + prependInnerIcon: IconValue, + reverse: Boolean, + singleLine: Boolean, + variant: { + type: String as PropType, + default: 'filled', + validator: (v: any) => allowedVariants.includes(v), + }, + + 'onClick:clear': EventProp<[MouseEvent]>(), + 'onClick:appendInner': EventProp<[MouseEvent]>(), + 'onClick:prependInner': EventProp<[MouseEvent]>(), + + ...makeComponentProps(), + ...makeLoaderProps(), + ...makeRoundedProps(), + ...makeThemeProps(), +}, 'VField') + +export type VFieldSlots = { + clear: DefaultInputSlot & { props: Record } + 'prepend-inner': DefaultInputSlot + 'append-inner': DefaultInputSlot + label: DefaultInputSlot & { label: string | undefined, props: Record } + loader: LoaderSlotProps + default: VFieldSlot +} + +export const VField = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VFieldSlots +) => GenericProps>()({ + name: 'VField', + + inheritAttrs: false, + + props: { + id: String, + + ...makeFocusProps(), + ...makeVFieldProps(), + }, + + emits: { + 'update:focused': (focused: boolean) => true, + 'update:modelValue': (value: any) => true, + }, + + setup (props, { attrs, emit, slots }) { + const { themeClasses } = provideTheme(props) + const { loaderClasses } = useLoader(props) + const { focusClasses, isFocused, focus, blur } = useFocus(props) + const { InputIcon } = useInputIcon(props) + const { roundedClasses } = useRounded(props) + const { rtlClasses } = useRtl() + + const isSingleLine = computed(() => props.singleLine || props.centerAffix) + const isActive = computed(() => props.dirty || props.active) + const hasLabel = computed(() => !isSingleLine.value && !!(props.label || slots.label)) + + const uid = getUid() + const id = computed(() => props.id || `input-${uid}`) + const messagesId = computed(() => `${id.value}-messages`) + + const labelRef = ref() + const floatingLabelRef = ref() + const controlRef = ref() + const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant)) + + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor')) + const { textColorClasses, textColorStyles } = useTextColor(computed(() => { + return props.error || props.disabled ? undefined + : isActive.value && isFocused.value ? props.color + : props.baseColor + })) + + watch(isActive, val => { + if (hasLabel.value) { + const el: HTMLElement = labelRef.value!.$el + const targetEl: HTMLElement = floatingLabelRef.value!.$el + + requestAnimationFrame(() => { + const rect = nullifyTransforms(el) + const targetRect = targetEl.getBoundingClientRect() + + const x = targetRect.x - rect.x + const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2) + + const targetWidth = targetRect.width / 0.75 + const width = Math.abs(targetWidth - rect.width) > 1 + ? { maxWidth: convertToUnit(targetWidth) } + : undefined + + const style = getComputedStyle(el) + const targetStyle = getComputedStyle(targetEl) + const duration = parseFloat(style.transitionDuration) * 1000 || 150 + const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale')) + const color = targetStyle.getPropertyValue('color') + + el.style.visibility = 'visible' + targetEl.style.visibility = 'hidden' + + animate(el, { + transform: `translate(${x}px, ${y}px) scale(${scale})`, + color, + ...width, + }, { + duration, + easing: standardEasing, + direction: val ? 'normal' : 'reverse', + }).finished.then(() => { + el.style.removeProperty('visibility') + targetEl.style.removeProperty('visibility') + }) + }) + } + }, { flush: 'post' }) + + const slotProps = computed(() => ({ + isActive, + isFocused, + controlRef, + blur, + focus, + })) + + function onClick (e: MouseEvent) { + if (e.target !== document.activeElement) { + e.preventDefault() + } + } + + function onKeydownClear (e: KeyboardEvent) { + if (e.key !== 'Enter' && e.key !== ' ') return + + e.preventDefault() + e.stopPropagation() + + props['onClick:clear']?.(new MouseEvent('click')) + } + + useRender(() => { + const isOutlined = props.variant === 'outlined' + const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon) + const hasClear = !!(props.clearable || slots.clear) + const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear) + const label = () => ( + slots.label + ? slots.label({ + ...slotProps.value, + label: props.label, + props: { for: id.value }, + }) + : props.label + ) + + return ( +
    +
    + + + + { hasPrepend && ( +
    + { props.prependInnerIcon && ( + + )} + + { slots['prepend-inner']?.(slotProps.value) } +
    + )} + +
    + {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && ( + + { label() } + + )} + + + { label() } + + + { slots.default?.({ + ...slotProps.value, + props: { + id: id.value, + class: 'v-field__input', + 'aria-describedby': messagesId.value, + }, + focus, + blur, + } as VFieldSlot)} +
    + + { hasClear && ( + +
    { + e.preventDefault() + e.stopPropagation() + }} + > + + { slots.clear + ? slots.clear({ + ...slotProps.value, + props: { + onKeydown: onKeydownClear, + onFocus: focus, + onBlur: blur, + onClick: props['onClick:clear'], + }, + }) + : ( + + )} + +
    +     + )} + + { hasAppend && ( +
    + { slots['append-inner']?.(slotProps.value) } + + { props.appendInnerIcon && ( + + )} +
    + )} + +
    + { isOutlined && ( + <> +
    + + { hasLabel.value && ( +
    + + { label() } + +
    + )} + +
    + + )} + + { isPlainOrUnderlined.value && hasLabel.value && ( + + { label() } + + )} +
    +
    + ) + }) + + return { + controlRef, + } + }, +}) + +export type VField = InstanceType + +// TODO: this is kinda slow, might be better to implicitly inherit props instead +export function filterFieldProps (attrs: Record) { + const keys = Object.keys(VField.props).filter(k => !isOn(k) && k !== 'class' && k !== 'style') + return pick(attrs, keys) +} diff --git a/packages/vuetify/src/components/VField/VFieldLabel.tsx b/packages/vuetify/src/components/VField/VFieldLabel.tsx new file mode 100644 index 0000000..f8cb213 --- /dev/null +++ b/packages/vuetify/src/components/VField/VFieldLabel.tsx @@ -0,0 +1,39 @@ +// Components +import { VLabel } from '@/components/VLabel' + +// Composables +import { makeComponentProps } from '@/composables/component' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVFieldLabelProps = propsFactory({ + floating: Boolean, + + ...makeComponentProps(), +}, 'VFieldLabel') + +export const VFieldLabel = genericComponent()({ + name: 'VFieldLabel', + + props: makeVFieldLabelProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VFieldLabel = InstanceType diff --git a/packages/vuetify/src/components/VField/_variables.scss b/packages/vuetify/src/components/VField/_variables.scss new file mode 100644 index 0000000..f5ca249 --- /dev/null +++ b/packages/vuetify/src/components/VField/_variables.scss @@ -0,0 +1,59 @@ +@forward '../VInput/variables'; +@use '../../styles/settings'; +@use '../VInput/variables' as *; + +// INPUT +$field-border-radius: settings.$border-radius-root !default; +$field-rounded-border-radius: map-get(settings.$rounded, 'xl') !default; +$field-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$field-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default; +$field-error-color: rgb(var(--v-theme-error)) !default; +$field-font-size: 16px !default; +$field-letter-spacing: .009375em !default; +$field-max-width: 100% !default; +$field-transition-timing: .15s settings.$standard-easing !default; +$field-subtle-transition-timing: 250ms settings.$standard-easing !default; +$field-underlined-margin-bottom: 4px !default; +$field-clearable-margin: 4px !default; +$field-clearable-transition: .15s opacity, .15s width settings.$standard-easing !default; +$field-chip-height: 24px !default; + +// CONTROL +$field-control-solo-background: rgb(var(--v-theme-surface)) !default; +$field-control-solo-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$field-control-solo-elevation: 2 !default; +$field-control-solo-inverted-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$field-control-solo-inverted-focused-color: rgb(var(--v-theme-on-surface-variant)) !default; +$field-control-filled-background: rgba(var(--v-theme-on-surface), var(--v-idle-opacity)) !default; +$field-control-padding-start: 16px !default; +$field-control-padding-end: 16px !default; +$field-control-padding-top: 8px !default; +$field-control-padding-bottom: 4px !default; +$field-control-affixed-padding: 12px !default; +$field-control-affixed-inner-padding: 6px !default; +$field-control-underlined-height: 48px !default; +$field-control-underlined-padding-bottom: 2px !default; +$field-control-height: 56px !default; + +// INPUT +$field-input-opacity: var(--v-high-emphasis-opacity) !default; +$field-input-min-height: #{max( + var(--v-input-control-height, $input-control-height), + calc($input-font-size * $input-line-height + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom)) +)} !default; +$field-input-padding-top: calc(var(--v-field-padding-top, $field-control-padding-top) + var(--v-input-padding-top, 0)) !default; +$field-input-padding-bottom: var(--v-field-padding-bottom, $field-control-padding-bottom) !default; +$field-input-column-gap: 2px !default; +$field-input-row-gap: 8px !default; + +// LABEL +$field-label-floating-scale: .75 !default; + +// OUTLINE +$field-outline-opacity: .38 !default; +$field-border-width: 1px !default; +$field-focused-border-width: 2px !default; + +// OVERLAY +$field-overlay-filled-opacity: 0.04 !default; +$field-overlay-focused-background-color: rgb(var(--v-theme-surface-variant)) !default; diff --git a/packages/vuetify/src/components/VField/index.ts b/packages/vuetify/src/components/VField/index.ts new file mode 100644 index 0000000..29746b7 --- /dev/null +++ b/packages/vuetify/src/components/VField/index.ts @@ -0,0 +1,2 @@ +export { VField } from './VField' +export { VFieldLabel } from './VFieldLabel' diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.sass b/packages/vuetify/src/components/VFileInput/VFileInput.sass new file mode 100644 index 0000000..888e3e3 --- /dev/null +++ b/packages/vuetify/src/components/VFileInput/VFileInput.sass @@ -0,0 +1,39 @@ +@use './variables' as * +@use '../../styles/tools' +@use 'sass:math' +@use 'sass:selector' + +@include tools.layer('components') + .v-file-input + &--hide.v-input + .v-field, + .v-input__control, + .v-input__details + display: none + + .v-input__prepend + grid-area: control + margin: 0 auto + + &--chips.v-input--density-compact + .v-field--variant-solo, + .v-field--variant-solo-inverted, + .v-field--variant-filled, + .v-field--variant-solo-filled + .v-label.v-field-label + &--floating + top: 0px + + input[type="file"] + height: 100% + left: 0 + opacity: 0 + position: absolute + top: 0 + width: 100% + z-index: 1 + + .v-input__details + padding-inline: $file-input-details-padding-inline + @at-root #{selector.append('.v-input--plain-underlined', &)} + padding-inline: 0 diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx new file mode 100644 index 0000000..57f8bc2 --- /dev/null +++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx @@ -0,0 +1,300 @@ +// Styles +import './VFileInput.sass' + +// Components +import { VChip } from '@/components/VChip' +import { VCounter } from '@/components/VCounter' +import { VField } from '@/components/VField' +import { filterFieldProps, makeVFieldProps } from '@/components/VField/VField' +import { makeVInputProps, VInput } from '@/components/VInput/VInput' + +// Composables +import { useFocus } from '@/composables/focus' +import { forwardRefs } from '@/composables/forwardRefs' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, nextTick, ref, watch } from 'vue' +import { + callEvent, + filterInputAttrs, + genericComponent, + humanReadableFileSize, + propsFactory, + useRender, + wrapInArray, +} from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VFieldSlots } from '@/components/VField/VField' +import type { VInputSlots } from '@/components/VInput/VInput' + +export type VFileInputSlots = VInputSlots & VFieldSlots & { + counter: never + selection: { + fileNames: string[] + totalBytes: number + totalBytesReadable: string + } +} + +export const makeVFileInputProps = propsFactory({ + chips: Boolean, + counter: Boolean, + counterSizeString: { + type: String, + default: '$vuetify.fileInput.counterSize', + }, + counterString: { + type: String, + default: '$vuetify.fileInput.counter', + }, + hideInput: Boolean, + multiple: Boolean, + showSize: { + type: [Boolean, Number, String] as PropType, + default: false, + validator: (v: boolean | number) => { + return ( + typeof v === 'boolean' || + [1000, 1024].includes(Number(v)) + ) + }, + }, + + ...makeVInputProps({ prependIcon: '$file' }), + + modelValue: { + type: [Array, Object] as PropType, + default: (props: any) => props.multiple ? [] : null, + validator: (val: any) => { + return wrapInArray(val).every(v => v != null && typeof v === 'object') + }, + }, + + ...makeVFieldProps({ clearable: true }), +}, 'VFileInput') + +export const VFileInput = genericComponent()({ + name: 'VFileInput', + + inheritAttrs: false, + + props: makeVFileInputProps(), + + emits: { + 'click:control': (e: MouseEvent) => true, + 'mousedown:control': (e: MouseEvent) => true, + 'update:focused': (focused: boolean) => true, + 'update:modelValue': (files: File | File[]) => true, + }, + + setup (props, { attrs, emit, slots }) { + const { t } = useLocale() + const model = useProxiedModel( + props, + 'modelValue', + props.modelValue, + val => wrapInArray(val), + val => (props.multiple || Array.isArray(props.modelValue)) ? val : (val[0] ?? null), + ) + const { isFocused, focus, blur } = useFocus(props) + const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined) + const totalBytes = computed(() => (model.value ?? []).reduce((bytes, { size = 0 }) => bytes + size, 0)) + const totalBytesReadable = computed(() => humanReadableFileSize(totalBytes.value, base.value)) + + const fileNames = computed(() => (model.value ?? []).map(file => { + const { name = '', size = 0 } = file + + return !props.showSize + ? name + : `${name} (${humanReadableFileSize(size, base.value)})` + })) + + const counterValue = computed(() => { + const fileCount = model.value?.length ?? 0 + if (props.showSize) return t(props.counterSizeString, fileCount, totalBytesReadable.value) + else return t(props.counterString, fileCount) + }) + const vInputRef = ref() + const vFieldRef = ref() + const inputRef = ref() + const isActive = computed(() => ( + isFocused.value || + props.active + )) + const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant)) + function onFocus () { + if (inputRef.value !== document.activeElement) { + inputRef.value?.focus() + } + + if (!isFocused.value) focus() + } + function onClickPrepend (e: MouseEvent) { + inputRef.value?.click() + } + function onControlMousedown (e: MouseEvent) { + emit('mousedown:control', e) + } + function onControlClick (e: MouseEvent) { + inputRef.value?.click() + + emit('click:control', e) + } + function onClear (e: MouseEvent) { + e.stopPropagation() + + onFocus() + + nextTick(() => { + model.value = [] + + callEvent(props['onClick:clear'], e) + }) + } + + watch(model, newValue => { + const hasModelReset = !Array.isArray(newValue) || !newValue.length + + if (hasModelReset && inputRef.value) { + inputRef.value.value = '' + } + }) + + useRender(() => { + const hasCounter = !!(slots.counter || props.counter) + const hasDetails = !!(hasCounter || slots.details) + const [rootAttrs, inputAttrs] = filterInputAttrs(attrs) + const { modelValue: _, ...inputProps } = VInput.filterProps(props) + const fieldProps = filterFieldProps(props) + + return ( + + {{ + ...slots, + default: ({ + id, + isDisabled, + isDirty, + isReadonly, + isValid, + }) => ( + + {{ + ...slots, + default: ({ + props: { class: fieldClass, ...slotProps }, + }) => ( + <> + { + e.stopPropagation() + + if (isReadonly.value) e.preventDefault() + + onFocus() + }} + onChange={ e => { + if (!e.target) return + + const target = e.target as HTMLInputElement + model.value = [...target.files ?? []] + }} + onFocus={ onFocus } + onBlur={ blur } + { ...slotProps } + { ...inputAttrs } + /> + +
    + { !!model.value?.length && !props.hideInput && ( + slots.selection ? slots.selection({ + fileNames: fileNames.value, + totalBytes: totalBytes.value, + totalBytesReadable: totalBytesReadable.value, + }) + : props.chips ? fileNames.value.map(text => ( + + )) + : fileNames.value.join(', ') + )} +
    + + ), + }} +     + ), + details: hasDetails ? slotProps => ( + <> + { slots.details?.(slotProps) } + + { hasCounter && ( + <> + + + + + )} + + ) : undefined, + }} +     + ) + }) + + return forwardRefs({}, vInputRef, vFieldRef, inputRef) + }, +}) + +export type VFileInput = InstanceType diff --git a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx new file mode 100644 index 0000000..fcfa488 --- /dev/null +++ b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx @@ -0,0 +1,237 @@ +/// + +import { CenteredGrid, generate } from '@/../cypress/templates' + +// Components +import { VFileInput } from '../VFileInput' + +// Utilities +import { cloneVNode, ref } from 'vue' + +const oneMBFile = new File([new ArrayBuffer(1021576)], '1MB file') +const twoMBFile = new File([new ArrayBuffer(2021152)], '2MB file') + +const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const +const densities = ['default', 'comfortable', 'compact'] as const +const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const + +const stories = Object.fromEntries(Object.entries({ + 'Default input': , + Disabled: , + Affixes: , + 'Prepend/append': , + 'Prepend/append inner': , + Placeholder: , +}).map(([k, v]) => [k, ( +
    + { variants.map(variant => ( + densities.map(density => ( +
    + { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) } + { cloneVNode(v, { variant, density, label: `with value`, modelValue: [oneMBFile, twoMBFile] }) } + { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: [oneMBFile, twoMBFile] }) } + {{ + selection: ({ fileNames }) => { + return fileNames.map(f => f) + }, + }} + +
    + )) + )).flat()} +
    +)])) + +describe('VFileInput', () => { + it('should add file', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input input') + .attachFile('text.txt') + .get('.v-file-input .v-field__input') + .should('have.text', 'text.txt') + }) + + it('should show number of files', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input .v-input__details') + .should('have.text', '2 files') + }) + + it('should show size of files', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input .v-field__input') + .should('have.text', '1MB file (1.0 MB), 2MB file (2.0 MB)') + }) + + it('should show total size of files in counter', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input .v-input__details') + .should('have.text', '2 files (3.0 MB in total)') + }) + + it('should clear input', () => { + const model = ref([oneMBFile, twoMBFile]) + cy.mount(() => ( + + + + )) + .get('.v-field__clearable > .v-icon') + .click() + cy.get('.v-input input') + .should('have.value', '') + }) + + it('should support removing clearable icon', () => { + cy.mount(() => ( + + + + )) + .get('.v-field__append-inner > .v-btn') + .should('not.exist') + }) + + it('should be disabled', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input') + .should('have.class', 'v-input--disabled') + .get('.v-file-input input') + .should('have.attr', 'disabled') + }) + + it('should support no prepend icon', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input .v-input__prepend') + .should('not.exist') + }) + + it('should support chips', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input .v-chip') + .should('have.length', 2) + }) + + // https://github.com/vuetifyjs/vuetify/issues/8167 + it('should not emit change event when input is blurred', () => { + const change = cy.spy().as('change') + const update = cy.spy().as('update') + cy.mount(() => ( + + ), { + props: { + onChange: change, + 'onUpdate:modelValue': update, + }, + }) + .get('.v-file-input input').as('input') + .focus() + cy.get('@input').attachFile('text.txt') + cy.get('@input').blur() + cy.then(() => { + expect(change).to.be.calledOnce + expect(update).to.be.calledOnce + }) + }) + + it('should put extra attributes on input', () => { + cy.mount(() => ( + + + + )) + .get('.v-file-input input') + .should('have.attr', 'accept', 'image/*') + }) + + /** + * https://github.com/vuetifyjs/vuetify/issues/16486 + */ + it('should reset the underlying HTMLInput when model is controlled input', () => { + function TestWrapper () { + const files = ref([]) + const onReset = () => { + files.value = [] + } + return ( + + + + + ) + } + + cy.mount(() => ( + + )) + .get('.v-file-input input').as('input') + .should($res => { + const input = $res[0] as HTMLInputElement + expect(input.files).to.have.length(0) + }) + // add file + cy.get('@input').attachFile('text.txt') + .should($res => { + const input = $res[0] as HTMLInputElement + expect(input.files).to.have.length(1) + }) + // reset input from wrapper/parent component + cy.get('button').click() + cy.get('@input') + .should($res => { + const input = $res[0] as HTMLInputElement + expect(input.files).to.have.length(0) + }) + // add same file again + .attachFile('text.txt') + .should($res => { + const input = $res[0] as HTMLInputElement + expect(input.files).to.have.length(1) + }) + // reset input from wrapper/parent component + cy.get('button').click() + cy.get('@input') + .should($res => { + const input = $res[0] as HTMLInputElement + expect(input.files).to.have.length(0) + }) + }) + + describe('Showcase', () => { + generate({ stories }) + }) +}) diff --git a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.tsx b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.tsx new file mode 100644 index 0000000..6729592 --- /dev/null +++ b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.tsx @@ -0,0 +1,99 @@ +import { VFileInput } from '../VFileInput' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { createVuetify } from '@/framework' + +describe('VFileInput', () => { + const vuetify = createVuetify() + + function mountFunction (component: any, options = {}) { + return mount(component, { + global: { + plugins: [vuetify], + }, + ...options, + }) + } + + it('has affixed icons', () => { + const wrapper = mountFunction( + + ) + + let el = wrapper.find('.v-input__prepend .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + + el = wrapper.find('.v-field__prepend-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('true') + expect(el.attributes('aria-label')).toBeUndefined() + + el = wrapper.find('.v-field__append-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('true') + expect(el.attributes('aria-label')).toBeUndefined() + + el = wrapper.find('.v-input__append .v-icon') + expect(el.attributes('aria-hidden')).toBe('true') + expect(el.attributes('aria-label')).toBeUndefined() + }) + + it('has affixed icons with actions', () => { + const onClickPrepend = jest.fn() + const onClickPrependInner = jest.fn() + const onClickAppendInner = jest.fn() + const onClickAppend = jest.fn() + + const wrapper = mountFunction( + + ) + + expect(onClickPrepend).toHaveBeenCalledTimes(0) + expect(onClickPrependInner).toHaveBeenCalledTimes(0) + expect(onClickAppendInner).toHaveBeenCalledTimes(0) + expect(onClickAppend).toHaveBeenCalledTimes(0) + + let el = wrapper.find('.v-input__prepend .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickPrepend).toHaveBeenCalledTimes(1) + + el = wrapper.find('.v-field__prepend-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickPrependInner).toHaveBeenCalledTimes(1) + + el = wrapper.find('.v-field__append-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickAppendInner).toHaveBeenCalledTimes(1) + + el = wrapper.find('.v-input__append .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickAppend).toHaveBeenCalledTimes(1) + + expect(onClickPrepend).toHaveBeenCalledTimes(1) + expect(onClickPrependInner).toHaveBeenCalledTimes(1) + expect(onClickAppendInner).toHaveBeenCalledTimes(1) + }) +}) diff --git a/packages/vuetify/src/components/VFileInput/_variables.scss b/packages/vuetify/src/components/VFileInput/_variables.scss new file mode 100644 index 0000000..536f3b0 --- /dev/null +++ b/packages/vuetify/src/components/VFileInput/_variables.scss @@ -0,0 +1,5 @@ +// Defaults +$file-input-chip-margin-inline-end: null !default; +$file-input-chips-margin-top: null !default; +$file-input-chips-margin-bottom: null !default; +$file-input-details-padding-inline: 16px !default; diff --git a/packages/vuetify/src/components/VFileInput/index.ts b/packages/vuetify/src/components/VFileInput/index.ts new file mode 100644 index 0000000..fc53fa2 --- /dev/null +++ b/packages/vuetify/src/components/VFileInput/index.ts @@ -0,0 +1 @@ +export { VFileInput } from './VFileInput' diff --git a/packages/vuetify/src/components/VFooter/VFooter.sass b/packages/vuetify/src/components/VFooter/VFooter.sass new file mode 100644 index 0000000..e6c2d16 --- /dev/null +++ b/packages/vuetify/src/components/VFooter/VFooter.sass @@ -0,0 +1,22 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-footer + align-items: center + display: flex + flex: $footer-flex + padding: $footer-padding + position: relative + transition: $footer-transition + transition-property: height, width, transform, max-width, left, right, top, bottom + + // missing from variables + @include tools.border($footer-border...) + @include tools.elevation($footer-elevation) + @include tools.position($footer-positions) + @include tools.rounded($footer-border-radius) + @include tools.theme($footer-theme...) + + &--rounded + @include tools.rounded($footer-rounded-border-radius) diff --git a/packages/vuetify/src/components/VFooter/VFooter.tsx b/packages/vuetify/src/components/VFooter/VFooter.tsx new file mode 100644 index 0000000..3fa2347 --- /dev/null +++ b/packages/vuetify/src/components/VFooter/VFooter.tsx @@ -0,0 +1,91 @@ +// Styles +import './VFooter.sass' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' +import { useResizeObserver } from '@/composables/resizeObserver' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, shallowRef, toRef } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +export const makeVFooterProps = propsFactory({ + app: Boolean, + color: String, + height: { + type: [Number, String], + default: 'auto', + }, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeElevationProps(), + ...makeLayoutItemProps(), + ...makeRoundedProps(), + ...makeTagProps({ tag: 'footer' }), + ...makeThemeProps(), +}, 'VFooter') + +export const VFooter = genericComponent()({ + name: 'VFooter', + + props: makeVFooterProps(), + + setup (props, { slots }) { + const { themeClasses } = provideTheme(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')) + const { borderClasses } = useBorder(props) + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(props) + + const autoHeight = shallowRef(32) + const { resizeRef } = useResizeObserver(entries => { + if (!entries.length) return + autoHeight.value = entries[0].target.clientHeight + }) + const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10)) + const { layoutItemStyles, layoutIsReady } = useLayoutItem({ + id: props.name, + order: computed(() => parseInt(props.order, 10)), + position: computed(() => 'bottom'), + layoutSize: height, + elementSize: computed(() => props.height === 'auto' ? undefined : height.value), + active: computed(() => props.app), + absolute: toRef(props, 'absolute'), + }) + + useRender(() => ( + + )) + + return props.app ? layoutIsReady : {} + }, +}) + +export type VFooter = InstanceType diff --git a/packages/vuetify/src/components/VFooter/_variables.scss b/packages/vuetify/src/components/VFooter/_variables.scss new file mode 100644 index 0000000..898572e --- /dev/null +++ b/packages/vuetify/src/components/VFooter/_variables.scss @@ -0,0 +1,32 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use "../../styles/settings/variables"; + +// VFooter +$footer-background: rgb(var(--v-theme-surface)) !default; +$footer-border-color: settings.$border-color-root !default; +$footer-border-style: settings.$border-style-root !default; +$footer-border-thin-width: thin !default; +$footer-border-width: 0 !default; +$footer-border-radius: map.get(settings.$rounded, 0) !default; +$footer-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$footer-flex: 1 1 auto !default; +$footer-font-size: 14px !default; +$footer-elevation: 0 !default; +$footer-padding: 8px 16px !default; +$footer-positions: absolute fixed !default; +$footer-rounded-border-radius: settings.$border-radius-root !default; +$footer-transition: .2s variables.$standard-easing !default; + +// Lists +$footer-border: ( + $footer-border-color, + $footer-border-style, + $footer-border-width, + $footer-border-thin-width +) !default; + +$footer-theme: ( + $footer-background, + $footer-color +) !default; diff --git a/packages/vuetify/src/components/VFooter/index.ts b/packages/vuetify/src/components/VFooter/index.ts new file mode 100644 index 0000000..400a229 --- /dev/null +++ b/packages/vuetify/src/components/VFooter/index.ts @@ -0,0 +1 @@ +export { VFooter } from './VFooter' diff --git a/packages/vuetify/src/components/VForm/VForm.tsx b/packages/vuetify/src/components/VForm/VForm.tsx new file mode 100644 index 0000000..1143726 --- /dev/null +++ b/packages/vuetify/src/components/VForm/VForm.tsx @@ -0,0 +1,82 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { createForm, makeFormProps } from '@/composables/form' +import { forwardRefs } from '@/composables/forwardRefs' + +// Utilities +import { ref } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { SubmitEventPromise } from '@/composables/form' + +export const makeVFormProps = propsFactory({ + ...makeComponentProps(), + ...makeFormProps(), +}, 'VForm') + +type VFormSlots = { + default: ReturnType +} + +export const VForm = genericComponent()({ + name: 'VForm', + + props: makeVFormProps(), + + emits: { + 'update:modelValue': (val: boolean | null) => true, + submit: (e: SubmitEventPromise) => true, + }, + + setup (props, { slots, emit }) { + const form = createForm(props) + const formRef = ref() + + function onReset (e: Event) { + e.preventDefault() + form.reset() + } + + function onSubmit (_e: Event) { + const e = _e as SubmitEventPromise + + const ready = form.validate() + e.then = ready.then.bind(ready) + e.catch = ready.catch.bind(ready) + e.finally = ready.finally.bind(ready) + + emit('submit', e) + + if (!e.defaultPrevented) { + ready.then(({ valid }) => { + if (valid) { + formRef.value?.submit() + } + }) + } + + e.preventDefault() + } + + useRender(() => (( +
    + { slots.default?.(form) } +
    + ))) + + return forwardRefs(form, formRef) + }, +}) + +export type VForm = InstanceType diff --git a/packages/vuetify/src/components/VForm/__tests__/VForm.spec.cy.tsx b/packages/vuetify/src/components/VForm/__tests__/VForm.spec.cy.tsx new file mode 100644 index 0000000..bfd40e3 --- /dev/null +++ b/packages/vuetify/src/components/VForm/__tests__/VForm.spec.cy.tsx @@ -0,0 +1,231 @@ +/* eslint-disable sonarjs/no-identical-functions */ +/// + +// Components +import { VForm } from '../' +import { Application } from '../../../../cypress/templates' +import { VBtn } from '@/components/VBtn' +import { VTextField } from '@/components/VTextField' + +// Utilities +import { ref } from 'vue' + +// Types +import type { SubmitEventPromise } from '@/composables' + +describe('VForm', () => { + it('emits when inputs are updated', () => { + cy.mount(() => ( + + + v?.length > 10 || 'Name should be longer than 10 characters']}> + + + )) + + cy.emitted(VForm, 'update:modelValue') + .should('be.undefined') + cy.get('.v-text-field').type('Something!!') + cy.emitted(VForm, 'update:modelValue') + .should('deep.equal', [[false], [true]]) + cy.get('.v-text-field').type('{backspace}{backspace}') + cy.emitted(VForm, 'update:modelValue') + .should('deep.equal', [[false], [true], [false]]) + }) + + it('only emits true if all inputs are explicitly valid', () => { + cy.mount(() => ( + + + v?.length < 10 || 'Name should be longer than 10 characters']}> + v?.length < 10 || 'E-mail should be longer than 10 characters']}> + + + )) + + cy.emitted(VForm, 'update:modelValue') + .should('be.undefined') + cy.get('.v-text-field').eq(0).type('Valid') + cy.emitted(VForm, 'update:modelValue') + .should('be.undefined') + cy.get('.v-text-field').eq(1).type('Valid') + cy.emitted(VForm, 'update:modelValue') + .should('deep.equal', [[true]]) + }) + + it('exposes validate function', () => { + const form = ref() + cy.mount(() => ( + + + !!v || 'Name required']}> + + + )) + + cy.get('.v-form') + .then(async () => { + const { valid } = await form.value.validate() + expect(valid).to.equal(false) + }) + .get('.v-text-field').should('have.class', 'v-input--error') + }) + + it('exposes reset function', () => { + const form = ref() + cy.mount(() => ( + + + v?.length > 10 || 'Name should be longer than 10 characters']}> + + + )) + + cy.get('.v-text-field') + .type('Something') + .should('have.class', 'v-input--error') + cy.get('.v-form').then(() => { + form.value.reset() + }) + cy.get('.v-text-field') + .should('have.not.class', 'v-input--error') + .find('input') + .should('have.value', '') + }) + + it('exposes resetValidation function', () => { + const form = ref() + cy.mount(() => ( + + + v?.length > 10 || 'Name should be longer than 10 characters']}> + + + )) + + cy.get('.v-text-field') + .type('Something') + .should('have.class', 'v-input--error') + cy.emitted(VForm, 'update:modelValue') + .should('deep.equal', [[false]]) + cy.get('.v-form').then(() => { + form.value.resetValidation() + }) + cy.get('.v-text-field') + .should('have.not.class', 'v-input--error') + .find('input') + .should('have.value', 'Something') + cy.emitted(VForm, 'update:modelValue') + .should('deep.equal', [[false], [null]]) + }) + + it('does not submit form if validation fails', () => { + cy.mount(() => ( + + !!v || 'Field required']} /> + Submit + + )) + + cy.get('.v-btn').click().url().should('not.contain', '/action') + .get('.v-text-field').should('have.class', 'v-input--error').find('.v-messages').should('have.text', 'Field required') + }) + + it('emits a SubmitEventPromise', () => { + cy.mount(() => ( + + + !!v || 'Field required']} /> + Submit + + + )) + + function onSubmit (e: SubmitEventPromise) { + e.preventDefault() + } + + cy.get('.v-btn').click().url().should('not.contain', '/action') + .emitted(VForm, 'submit') + .then(async emits => { + const result = await emits[0][0] + expect(result).to.deep.equal({ valid: true, errors: [] }) + }) + }) + + it('exposes errors reactively', () => { + const form = ref() + + cy.mount(() => ( + + + v?.length < 4 || 'Error']} /> + + + )) + + cy.get('.v-text-field') + .type('Invalid') + .then(() => { + expect(form.value.errors).to.deep.equal([ + { + id: 'input-0', + errorMessages: ['Error'], + }, + ]) + }) + }) + + it('provides validate-on prop to child inputs', () => { + const form = ref() + + cy.mount(() => ( + + + v?.length > 5 || 'Error']} modelValue="" /> + + + )) + + cy.then(() => { + expect(form.value.isValid).to.be.null + }) + .get('.v-text-field').should('not.have.class', 'v-input--error') + .get('.v-text-field input') + .type('Hello') + .then(() => { + expect(form.value.isValid).to.be.false + }) + .get('.v-text-field').should('have.class', 'v-input--error') + }) + + it('validates inputs to true if there are no rules', () => { + const model = ref(false) + cy.mount(() => ( + + + + + + + )) + + cy.then(() => { + expect(model.value).to.be.true + }) + }) + + // TODO: This test has to be the last one, + // because subsequent tests in the same file + // will break due to the page change + it('submits form if validation passes', () => { + cy.mount(() => ( + + !!v || 'Field required']} /> + Submit + + )) + + cy.get('.v-btn').click().url().should('contain', '/action') + }) +}) diff --git a/packages/vuetify/src/components/VForm/index.ts b/packages/vuetify/src/components/VForm/index.ts new file mode 100644 index 0000000..b9a8a06 --- /dev/null +++ b/packages/vuetify/src/components/VForm/index.ts @@ -0,0 +1 @@ +export { VForm } from './VForm' diff --git a/packages/vuetify/src/components/VGrid/VCol.ts b/packages/vuetify/src/components/VGrid/VCol.ts new file mode 100644 index 0000000..febe7b2 --- /dev/null +++ b/packages/vuetify/src/components/VGrid/VCol.ts @@ -0,0 +1,153 @@ +// Styles +import './VGrid.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { breakpoints } from '@/composables/display' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { capitalize, computed, h } from 'vue' +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { Prop, PropType } from 'vue' +import type { Breakpoint } from '@/composables/display' + +type BreakpointOffset = `offset${Capitalize}` +type BreakpointOrder = `order${Capitalize}` + +const breakpointProps = (() => { + return breakpoints.reduce((props, val) => { + props[val] = { + type: [Boolean, String, Number], + default: false, + } + return props + }, {} as Record>) +})() + +const offsetProps = (() => { + return breakpoints.reduce((props, val) => { + const offsetKey = ('offset' + capitalize(val)) as BreakpointOffset + props[offsetKey] = { + type: [String, Number], + default: null, + } + return props + }, {} as Record>) +})() + +const orderProps = (() => { + return breakpoints.reduce((props, val) => { + const orderKey = ('order' + capitalize(val)) as BreakpointOrder + props[orderKey] = { + type: [String, Number], + default: null, + } + return props + }, {} as Record>) +})() + +const propMap = { + col: Object.keys(breakpointProps), + offset: Object.keys(offsetProps), + order: Object.keys(orderProps), +} + +function breakpointClass (type: keyof typeof propMap, prop: string, val: boolean | string | number) { + let className: string = type + if (val == null || val === false) { + return undefined + } + if (prop) { + const breakpoint = prop.replace(type, '') + className += `-${breakpoint}` + } + if (type === 'col') { + className = 'v-' + className + } + // Handling the boolean style prop when accepting [Boolean, String, Number] + // means Vue will not convert to sm: true for us. + // Since the default is false, an empty string indicates the prop's presence. + if (type === 'col' && (val === '' || val === true)) { + // .v-col-md + return className.toLowerCase() + } + // .order-md-6 + className += `-${val}` + return className.toLowerCase() +} + +const ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'] as const + +export const makeVColProps = propsFactory({ + cols: { + type: [Boolean, String, Number], + default: false, + }, + ...breakpointProps, + offset: { + type: [String, Number], + default: null, + }, + ...offsetProps, + order: { + type: [String, Number], + default: null, + }, + ...orderProps, + alignSelf: { + type: String as PropType, + default: null, + validator: (str: any) => ALIGN_SELF_VALUES.includes(str), + }, + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VCol') + +export const VCol = genericComponent()({ + name: 'VCol', + + props: makeVColProps(), + + setup (props, { slots }) { + const classes = computed(() => { + const classList: any[] = [] + + // Loop through `col`, `offset`, `order` breakpoint props + let type: keyof typeof propMap + for (type in propMap) { + propMap[type].forEach(prop => { + const value: string | number | boolean = (props as any)[prop] + const className = breakpointClass(type, prop, value) + if (className) classList!.push(className) + }) + } + + const hasColClasses = classList.some(className => className.startsWith('v-col-')) + + classList.push({ + // Default to .v-col if no other col-{bp}-* classes generated nor `cols` specified. + 'v-col': !hasColClasses || !props.cols, + [`v-col-${props.cols}`]: props.cols, + [`offset-${props.offset}`]: props.offset, + [`order-${props.order}`]: props.order, + [`align-self-${props.alignSelf}`]: props.alignSelf, + }) + + return classList + }) + + return () => h(props.tag, { + class: [ + classes.value, + props.class, + ], + style: props.style, + }, slots.default?.()) + }, +}) + +export type VCol = InstanceType diff --git a/packages/vuetify/src/components/VGrid/VContainer.tsx b/packages/vuetify/src/components/VGrid/VContainer.tsx new file mode 100644 index 0000000..497ac18 --- /dev/null +++ b/packages/vuetify/src/components/VGrid/VContainer.tsx @@ -0,0 +1,47 @@ +// Styles +import './VGrid.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { useRtl } from '@/composables/locale' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVContainerProps = propsFactory({ + fluid: { + type: Boolean, + default: false, + }, + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VContainer') + +export const VContainer = genericComponent()({ + name: 'VContainer', + + props: makeVContainerProps(), + + setup (props, { slots }) { + const { rtlClasses } = useRtl() + + useRender(() => ( + + )) + + return {} + }, +}) + +export type VContainer = InstanceType diff --git a/packages/vuetify/src/components/VGrid/VGrid.sass b/packages/vuetify/src/components/VGrid/VGrid.sass new file mode 100644 index 0000000..90e338e --- /dev/null +++ b/packages/vuetify/src/components/VGrid/VGrid.sass @@ -0,0 +1,51 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './mixins' as * + +@include tools.layer('components') + .v-container + @include make-container + @include make-container-max-widths + + &--fluid + max-width: 100% + + &.fill-height + align-items: center + display: flex + flex-wrap: wrap + + // Row + // + // Rows contain and clear the floats of your columns. + .v-row + +make-row + + & + .v-row + margin-top: settings.$grid-gutter * .5 + + &--dense + margin-top: settings.$form-grid-gutter * .5 + + &--dense + margin: -(settings.$form-grid-gutter) * .5 + + > .v-col, + > [class*="v-col-"] + padding: settings.$form-grid-gutter * .5 + + // Remove the negative margin from default .v-row, then the horizontal padding + // from all immediate children columns (to prevent runaway style inheritance). + &.v-row--no-gutters + margin: 0 + > .v-col, + > [class*="v-col-"] + padding: 0 + + .v-spacer + flex-grow: 1 + + // Columns + // + // Common styles for small and large grid columns + @include make-grid-columns diff --git a/packages/vuetify/src/components/VGrid/VRow.ts b/packages/vuetify/src/components/VGrid/VRow.ts new file mode 100644 index 0000000..0fe88ef --- /dev/null +++ b/packages/vuetify/src/components/VGrid/VRow.ts @@ -0,0 +1,157 @@ +// Styles +import './VGrid.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { breakpoints } from '@/composables/display' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { capitalize, computed, h } from 'vue' +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { Prop, PropType } from 'vue' +import type { Breakpoint } from '@/composables/display' + +const ALIGNMENT = ['start', 'end', 'center'] as const + +type BreakpointAlign = `align${Capitalize}` +type BreakpointJustify = `justify${Capitalize}` +type BreakpointAlignContent = `alignContent${Capitalize}` + +const SPACE = ['space-between', 'space-around', 'space-evenly'] as const + +function makeRowProps < + Name extends BreakpointAlign | BreakpointJustify | BreakpointAlignContent, + Type, +> (prefix: string, def: () => Prop) { + return breakpoints.reduce((props, val) => { + const prefixKey = prefix + capitalize(val) as Name + props[prefixKey] = def() + return props + }, {} as Record>) +} + +const ALIGN_VALUES = [...ALIGNMENT, 'baseline', 'stretch'] as const +type AlignValue = typeof ALIGN_VALUES[number] +const alignValidator = (str: any) => ALIGN_VALUES.includes(str) +const alignProps = makeRowProps('align', () => ({ + type: String as PropType, + default: null, + validator: alignValidator, +})) + +const JUSTIFY_VALUES = [...ALIGNMENT, ...SPACE] as const +type JustifyValue = typeof JUSTIFY_VALUES[number] +const justifyValidator = (str: any) => JUSTIFY_VALUES.includes(str) +const justifyProps = makeRowProps('justify', () => ({ + type: String as PropType, + default: null, + validator: justifyValidator, +})) + +const ALIGN_CONTENT_VALUES = [...ALIGNMENT, ...SPACE, 'stretch'] as const +type AlignContentValue = typeof ALIGN_CONTENT_VALUES[number] +const alignContentValidator = (str: any) => ALIGN_CONTENT_VALUES.includes(str) +const alignContentProps = makeRowProps('alignContent', () => ({ + type: String as PropType, + default: null, + validator: alignContentValidator, +})) + +const propMap = { + align: Object.keys(alignProps), + justify: Object.keys(justifyProps), + alignContent: Object.keys(alignContentProps), +} + +const classMap = { + align: 'align', + justify: 'justify', + alignContent: 'align-content', +} + +function breakpointClass (type: keyof typeof propMap, prop: string, val: string) { + let className = classMap[type] + if (val == null) { + return undefined + } + if (prop) { + // alignSm -> Sm + const breakpoint = prop.replace(type, '') + className += `-${breakpoint}` + } + // .align-items-sm-center + className += `-${val}` + return className.toLowerCase() +} + +export const makeVRowProps = propsFactory({ + dense: Boolean, + noGutters: Boolean, + align: { + type: String as PropType, + default: null, + validator: alignValidator, + }, + ...alignProps, + justify: { + type: String as PropType, + default: null, + validator: justifyValidator, + }, + ...justifyProps, + alignContent: { + type: String as PropType, + default: null, + validator: alignContentValidator, + }, + + ...alignContentProps, + ...makeComponentProps(), + ...makeTagProps(), +}, 'VRow') + +export const VRow = genericComponent()({ + name: 'VRow', + + props: makeVRowProps(), + + setup (props, { slots }) { + const classes = computed(() => { + const classList: any[] = [] + + // Loop through `align`, `justify`, `alignContent` breakpoint props + let type: keyof typeof propMap + for (type in propMap) { + propMap[type].forEach(prop => { + const value: string = (props as any)[prop] + const className = breakpointClass(type, prop, value) + if (className) classList!.push(className) + }) + } + + classList.push({ + 'v-row--no-gutters': props.noGutters, + 'v-row--dense': props.dense, + [`align-${props.align}`]: props.align, + [`justify-${props.justify}`]: props.justify, + [`align-content-${props.alignContent}`]: props.alignContent, + }) + + return classList + }) + + return () => h(props.tag, { + class: [ + 'v-row', + classes.value, + props.class, + ], + style: props.style, + }, slots.default?.()) + }, +}) + +export type VRow = InstanceType diff --git a/packages/vuetify/src/components/VGrid/VSpacer.ts b/packages/vuetify/src/components/VGrid/VSpacer.ts new file mode 100644 index 0000000..2c0f20f --- /dev/null +++ b/packages/vuetify/src/components/VGrid/VSpacer.ts @@ -0,0 +1,9 @@ +// Styles +import './VGrid.sass' + +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VSpacer = createSimpleFunctional('v-spacer', 'div', 'VSpacer') + +export type VSpacer = InstanceType diff --git a/packages/vuetify/src/components/VGrid/__tests__/VCol.spec.ts b/packages/vuetify/src/components/VGrid/__tests__/VCol.spec.ts new file mode 100644 index 0000000..e3da083 --- /dev/null +++ b/packages/vuetify/src/components/VGrid/__tests__/VCol.spec.ts @@ -0,0 +1,66 @@ +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { VCol } from '../VCol' +import { createVuetify } from '@/framework' + +describe('VCol', () => { + const vuetify = createVuetify() + + function mountFunction (template: string) { + return mount({ + components: { VCol }, + template, + }, { + global: { plugins: [vuetify] }, + }) + } + + it('should have default expected structure', async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('
    ') + }) + + it('renders custom root element when tag prop set', async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('') + }) + + it('should apply breakpoint specific col-{bp}-{#} classes', async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('
    ') + }) + + it('should apply ".offset-*" classes with "offset-{bp}-{#}" props', async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('
    ') + }) + + it('should apply ".order-*" classes with "order-{bp}-{#}" props', async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('
    ') + }) + + it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop`, async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('
    ') + }) + + it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop set to empty string`, async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('
    ') + }) + + it('should apply ".align-self-*" class with "align-self" prop', async () => { + const wrapper = mountFunction(``) + + expect(wrapper.html()).toBe('
    ') + }) +}) diff --git a/packages/vuetify/src/components/VGrid/_mixins.sass b/packages/vuetify/src/components/VGrid/_mixins.sass new file mode 100644 index 0000000..9b88134 --- /dev/null +++ b/packages/vuetify/src/components/VGrid/_mixins.sass @@ -0,0 +1,74 @@ +@use 'sass:map' +@use 'sass:math' +@use '../../styles/settings' +@use '../../styles/tools' + +@mixin make-container($padding-x: settings.$container-padding-x) + width: 100% + padding: $padding-x + margin-right: auto + margin-left: auto + +// For each breakpoint, define the maximum width of the container in a media query +@mixin make-container-max-widths($max-widths: settings.$container-max-widths, $breakpoints: settings.$grid-breakpoints) + @each $breakpoint, $container-max-width in $max-widths + +tools.media-breakpoint-up($breakpoint, $breakpoints) + max-width: $container-max-width + +@mixin make-row($gutter: settings.$grid-gutter) + display: flex + flex-wrap: wrap + flex: 1 1 auto + margin: -$gutter * .5 + +@mixin make-col-ready($gutter: settings.$grid-gutter) + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100% + padding: $gutter * .5 + +@mixin make-col($size, $columns: settings.$grid-columns) + flex: 0 0 math.percentage(math.div($size, $columns)) + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: math.percentage(math.div($size, $columns)) + +@mixin make-col-offset($size, $columns: settings.$grid-columns) + $num: math.div($size, $columns) + margin-inline-start: if($num == 0, 0, math.percentage($num)) + +@mixin make-grid-columns($columns: settings.$grid-columns, $gutter: settings.$grid-gutter, $breakpoints: settings.$grid-breakpoints) + // Common properties for all breakpoints + %grid-column + width: 100% + padding: $gutter * .5 + @each $breakpoint in map.keys($breakpoints) + $infix: tools.breakpoint-infix($breakpoint, $breakpoints) + // Allow columns to stretch full width below their breakpoints + @for $i from 1 through $columns + .v-col#{$infix}-#{$i} + @extend %grid-column + .v-col#{$infix}, + .v-col#{$infix}-auto + @extend %grid-column + +tools.media-breakpoint-up($breakpoint, $breakpoints) + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .v-col#{$infix} + flex-basis: 0 + flex-grow: 1 + max-width: 100% + .v-col#{$infix}-auto + flex: 0 0 auto + width: auto + max-width: 100% // Reset earlier grid tiers + @for $i from 1 through $columns + .v-col#{$infix}-#{$i} + +make-col($i, $columns) + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through $columns - 1 + @if not ($infix == "" and $i == 0) + // Avoid emitting useless .offset-0 + .offset#{$infix}-#{$i} + +make-col-offset($i, $columns) diff --git a/packages/vuetify/src/components/VGrid/index.ts b/packages/vuetify/src/components/VGrid/index.ts new file mode 100644 index 0000000..f1d7e8a --- /dev/null +++ b/packages/vuetify/src/components/VGrid/index.ts @@ -0,0 +1,4 @@ +export { VContainer } from './VContainer' +export { VCol } from './VCol' +export { VRow } from './VRow' +export { VSpacer } from './VSpacer' diff --git a/packages/vuetify/src/components/VHover/VHover.tsx b/packages/vuetify/src/components/VHover/VHover.tsx new file mode 100644 index 0000000..f841729 --- /dev/null +++ b/packages/vuetify/src/components/VHover/VHover.tsx @@ -0,0 +1,48 @@ +// Composables +import { makeDelayProps, useDelay } from '@/composables/delay' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { genericComponent, propsFactory } from '@/util' + +type VHoverSlots = { + default: { + isHovering: boolean | null + props: Record + } +} + +export const makeVHoverProps = propsFactory({ + disabled: Boolean, + modelValue: { + type: Boolean, + default: null, + }, + + ...makeDelayProps(), +}, 'VHover') + +export const VHover = genericComponent()({ + name: 'VHover', + + props: makeVHoverProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { slots }) { + const isHovering = useProxiedModel(props, 'modelValue') + const { runOpenDelay, runCloseDelay } = useDelay(props, value => !props.disabled && (isHovering.value = value)) + + return () => slots.default?.({ + isHovering: isHovering.value, + props: { + onMouseenter: runOpenDelay, + onMouseleave: runCloseDelay, + }, + }) + }, +}) + +export type VHover = InstanceType diff --git a/packages/vuetify/src/components/VHover/__tests__/VHover.spec.cy.tsx b/packages/vuetify/src/components/VHover/__tests__/VHover.spec.cy.tsx new file mode 100644 index 0000000..08db114 --- /dev/null +++ b/packages/vuetify/src/components/VHover/__tests__/VHover.spec.cy.tsx @@ -0,0 +1,62 @@ +/// + +import { CenteredGrid } from '@/../cypress/templates' +import { VHover } from '../VHover' + +describe('VHover', () => { + it('should react on mouse events', () => { + cy.mount(() => ( + + + {{ + default: ({ isHovering, props }: any) =>
    foobar
    , + }} +     +     + )) + .get('.hover-element') + .trigger('mouseenter') + .should('have.class', 'bg-primary') + .trigger('mouseleave') + .should('not.have.class', 'bg-primary') + }) + + it('should not react when disabled', () => { + cy.mount(() => ( + + + {{ + default: ({ isHovering, props }: any) =>
    foobar
    , + }} +     +     + )) + .get('.hover-element') + .trigger('mouseenter') + .should('not.have.class', 'bg-primary') + .trigger('mouseleave') + .should('not.have.class', 'bg-primary') + }) + + it('should respect delays', () => { + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.mount(() => ( + + + {{ + default: ({ isHovering, props }: any) =>
    foobar
    , + }} +     +     + )) + .get('.hover-element') + .trigger('mouseenter') + .should('not.have.class', 'bg-primary') + .wait(100) + .should('have.class', 'bg-primary') + .trigger('mouseleave') + .should('have.class', 'bg-primary') + .wait(100) + .should('not.have.class', 'bg-primary') + }) +}) diff --git a/packages/vuetify/src/components/VHover/index.ts b/packages/vuetify/src/components/VHover/index.ts new file mode 100644 index 0000000..bb03a0f --- /dev/null +++ b/packages/vuetify/src/components/VHover/index.ts @@ -0,0 +1 @@ +export { VHover } from './VHover' diff --git a/packages/vuetify/src/components/VIcon/VIcon.sass b/packages/vuetify/src/components/VIcon/VIcon.sass new file mode 100644 index 0000000..1914a30 --- /dev/null +++ b/packages/vuetify/src/components/VIcon/VIcon.sass @@ -0,0 +1,44 @@ +@use 'sass:map' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-icon + --v-icon-size-multiplier: 1 + align-items: center + display: inline-flex + font-feature-settings: 'liga' + height: $icon-size + justify-content: center + letter-spacing: $icon-letter-spacing + line-height: $icon-line-height + position: relative + text-indent: $icon-text-indent + text-align: center + user-select: none + vertical-align: $icon-vertical-align + width: $icon-size + min-width: $icon-size + + &--clickable + cursor: pointer + + &--disabled + pointer-events: none + opacity: $icon-disabled-opacity + + @each $name in settings.$sizes + &--size-#{$name} + font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)}) + + .v-icon__svg + fill: currentColor + width: 100% + height: 100% + + .v-icon--start + margin-inline-end: $icon-margin-start + + .v-icon--end + margin-inline-start: $icon-margin-end diff --git a/packages/vuetify/src/components/VIcon/VIcon.tsx b/packages/vuetify/src/components/VIcon/VIcon.tsx new file mode 100644 index 0000000..4167c70 --- /dev/null +++ b/packages/vuetify/src/components/VIcon/VIcon.tsx @@ -0,0 +1,91 @@ +// Styles +import './VIcon.sass' + +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { IconValue, useIcon } from '@/composables/icons' +import { makeSizeProps, useSize } from '@/composables/size' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, ref, Text, toRef } from 'vue' +import { convertToUnit, flattenFragments, genericComponent, propsFactory, useRender } from '@/util' + +export const makeVIconProps = propsFactory({ + color: String, + disabled: Boolean, + start: Boolean, + end: Boolean, + icon: IconValue, + + ...makeComponentProps(), + ...makeSizeProps(), + ...makeTagProps({ tag: 'i' }), + ...makeThemeProps(), +}, 'VIcon') + +export const VIcon = genericComponent()({ + name: 'VIcon', + + props: makeVIconProps(), + + setup (props, { attrs, slots }) { + const slotIcon = ref() + + const { themeClasses } = provideTheme(props) + const { iconData } = useIcon(computed(() => slotIcon.value || props.icon)) + const { sizeClasses } = useSize(props) + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')) + + useRender(() => { + const slotValue = slots.default?.() + if (slotValue) { + slotIcon.value = flattenFragments(slotValue).filter(node => + node.type === Text && node.children && typeof node.children === 'string' + )[0]?.children as string + } + const hasClick = !!(attrs.onClick || attrs.onClickOnce) + + return ( + + { slotValue } + + ) + }) + + return {} + }, +}) + +export type VIcon = InstanceType diff --git a/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx b/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx new file mode 100644 index 0000000..c1b34f9 --- /dev/null +++ b/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx @@ -0,0 +1,126 @@ +/// + +// Components +import { VClassIcon } from '..' +import { VIcon } from '../VIcon' + +// Icons +import { aliases } from '@/iconsets/mdi' + +// Utilities +import { defineComponent } from 'vue' + +describe('VIcon', () => { + describe('icon prop', () => { + it('should render icon from default set', () => { + cy.mount(() => ( + + )) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-home') + }) + + it('should render aliased icon', () => { + cy.mount(() => ( + + ), null, { icons: { aliases } }) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-close') + }) + + it('should render icon from alternative set', () => { + cy.mount(() => ( + + ), null, { + icons: { + defaultSet: 'mdi', + sets: { + foo: { + component: props => , + }, + }, + }, + }) + + cy.get('.v-icon').should('have.class', 'bar') + }) + }) + + describe('default slot', () => { + it('should render icon from default set', () => { + cy.mount(() => ( + mdi-home + )) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-home') + }) + + it('should render aliased icon', () => { + cy.mount(() => ( + $close + ), null, { icons: { aliases } }) + + cy.get('.v-icon').should('have.class', 'mdi') + cy.get('.v-icon').should('have.class', 'mdi-close') + }) + + it('should render icon from alternative set', () => { + cy.mount(() => ( + + foo:bar + + ), null, { + icons: { + defaultSet: 'mdi', + sets: { + foo: { + component: props => , + }, + }, + }, + }) + + cy.get('.v-icon').should('have.class', 'bar') + }) + + it('should render default slot if no icon value found', () => { + const Foo = defineComponent({ + setup () { + return () => ( + + + + ) + }, + }) + + cy.mount(() => ( + + bar + + )) + + cy.get('.v-icon > svg.foo').should('exist') + }) + }) + + it('should render svg icon', () => { + cy.mount(() => ( + + )) + + cy.get('.v-icon svg').should('exist') + cy.get('.v-icon path').should('have.attr', 'd', 'M7,10L12,15L17,10H7Z') + }) + + it('should render class icon', () => { + cy.mount(() => ( + + )) + + cy.get('.v-icon').should('have.class', 'foo') + }) +}) diff --git a/packages/vuetify/src/components/VIcon/_variables.scss b/packages/vuetify/src/components/VIcon/_variables.scss new file mode 100644 index 0000000..8d21b4f --- /dev/null +++ b/packages/vuetify/src/components/VIcon/_variables.scss @@ -0,0 +1,27 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VIcon +$icon-disabled-opacity: 0.38 !default; +$icon-left-margin-left: map.get(settings.$grid-gutters, 'md') !default; +$icon-letter-spacing: normal !default; +$icon-line-height: 1 !default; +$icon-margin-end: map.get(settings.$grid-gutters, 'md') !default; +$icon-margin-start: map.get(settings.$grid-gutters, 'md') !default; +$icon-size: 1em !default; +$icon-text-indent: 0 !default; +$icon-vertical-align: middle !default; + +// Lists +$icon-sizes: () !default; +$icon-sizes: tools.map-deep-merge( + ( + 'x-small': 1em, + 'small': 1.25em, + 'default': 1.5em, + 'large': 1.75em, + 'x-large': 2em, + ), + $icon-sizes +); diff --git a/packages/vuetify/src/components/VIcon/index.ts b/packages/vuetify/src/components/VIcon/index.ts new file mode 100644 index 0000000..9376928 --- /dev/null +++ b/packages/vuetify/src/components/VIcon/index.ts @@ -0,0 +1,2 @@ +export { VIcon } from './VIcon' +export { VComponentIcon, VSvgIcon, VLigatureIcon, VClassIcon } from '@/composables/icons' diff --git a/packages/vuetify/src/components/VImg/VImg.sass b/packages/vuetify/src/components/VImg/VImg.sass new file mode 100644 index 0000000..00fa633 --- /dev/null +++ b/packages/vuetify/src/components/VImg/VImg.sass @@ -0,0 +1,35 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-img + --v-theme-overlay-multiplier: 3 + z-index: 0 + + &--booting .v-responsive__sizer + transition: none + + &--rounded + @include tools.rounded($img-rounded-border-radius) + + .v-img__img, + .v-img__picture, + .v-img__gradient, + .v-img__placeholder, + .v-img__error + z-index: -1 + + @include tools.absolute() + + .v-img__img + &--preload + filter: $img-preload-filter + + &--contain + object-fit: contain + + &--cover + object-fit: cover + + .v-img__gradient + background-repeat: no-repeat diff --git a/packages/vuetify/src/components/VImg/VImg.tsx b/packages/vuetify/src/components/VImg/VImg.tsx new file mode 100644 index 0000000..30c4926 --- /dev/null +++ b/packages/vuetify/src/components/VImg/VImg.tsx @@ -0,0 +1,397 @@ +// Styles +import './VImg.sass' + +// Components +import { makeVResponsiveProps, VResponsive } from '@/components/VResponsive/VResponsive' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Directives +import intersect from '@/directives/intersect' + +// Utilities +import { + computed, + nextTick, + onBeforeMount, + onBeforeUnmount, + ref, + shallowRef, + toRef, + vShow, + watch, + withDirectives, +} from 'vue' +import { + convertToUnit, + genericComponent, + getCurrentInstance, + propsFactory, + SUPPORTS_INTERSECTION, + useRender, +} from '@/util' + +// Types +import type { PropType } from 'vue' + +// not intended for public use, this is passed in by vuetify-loader +export interface srcObject { + src?: string + srcset?: string + lazySrc?: string + aspect: number +} + +export type VImgSlots = { + default: never + placeholder: never + error: never + sources: never +} + +export const makeVImgProps = propsFactory({ + alt: String, + cover: Boolean, + color: String, + draggable: { + type: [Boolean, String] as PropType, + default: undefined, + }, + eager: Boolean, + gradient: String, + lazySrc: String, + options: { + type: Object as PropType, + // For more information on types, navigate to: + // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API + default: () => ({ + root: undefined, + rootMargin: undefined, + threshold: undefined, + }), + }, + sizes: String, + src: { + type: [String, Object] as PropType, + default: '', + }, + crossorigin: String as PropType<'' | 'anonymous' | 'use-credentials'>, + referrerpolicy: String as PropType< + | 'no-referrer' + | 'no-referrer-when-downgrade' + | 'origin' + | 'origin-when-cross-origin' + | 'same-origin' + | 'strict-origin' + | 'strict-origin-when-cross-origin' + | 'unsafe-url' + >, + srcset: String, + position: String, + + ...makeVResponsiveProps(), + ...makeComponentProps(), + ...makeRoundedProps(), + ...makeTransitionProps(), +}, 'VImg') + +export const VImg = genericComponent()({ + name: 'VImg', + + directives: { intersect }, + + props: makeVImgProps(), + + emits: { + loadstart: (value: string | undefined) => true, + load: (value: string | undefined) => true, + error: (value: string | undefined) => true, + }, + + setup (props, { emit, slots }) { + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')) + const { roundedClasses } = useRounded(props) + const vm = getCurrentInstance('VImg') + + const currentSrc = shallowRef('') // Set from srcset + const image = ref() + const state = shallowRef<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle') + const naturalWidth = shallowRef() + const naturalHeight = shallowRef() + + const normalisedSrc = computed(() => { + return props.src && typeof props.src === 'object' + ? { + src: props.src.src, + srcset: props.srcset || props.src.srcset, + lazySrc: props.lazySrc || props.src.lazySrc, + aspect: Number(props.aspectRatio || props.src.aspect || 0), + } : { + src: props.src, + srcset: props.srcset, + lazySrc: props.lazySrc, + aspect: Number(props.aspectRatio || 0), + } + }) + const aspectRatio = computed(() => { + return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0 + }) + + watch(() => props.src, () => { + init(state.value !== 'idle') + }) + watch(aspectRatio, (val, oldVal) => { + if (!val && oldVal && image.value) { + pollForSize(image.value) + } + }) + + // TODO: getSrc when window width changes + + onBeforeMount(() => init()) + + function init (isIntersecting?: boolean) { + if (props.eager && isIntersecting) return + if ( + SUPPORTS_INTERSECTION && + !isIntersecting && + !props.eager + ) return + + state.value = 'loading' + + if (normalisedSrc.value.lazySrc) { + const lazyImg = new Image() + lazyImg.src = normalisedSrc.value.lazySrc + pollForSize(lazyImg, null) + } + + if (!normalisedSrc.value.src) return + + nextTick(() => { + emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src) + + setTimeout(() => { + if (vm.isUnmounted) return + + if (image.value?.complete) { + if (!image.value.naturalWidth) { + onError() + } + + if (state.value === 'error') return + + if (!aspectRatio.value) pollForSize(image.value, null) + if (state.value === 'loading') onLoad() + } else { + if (!aspectRatio.value) pollForSize(image.value!) + getSrc() + } + }) + }) + } + + function onLoad () { + if (vm.isUnmounted) return + + getSrc() + pollForSize(image.value!) + state.value = 'loaded' + emit('load', image.value?.currentSrc || normalisedSrc.value.src) + } + + function onError () { + if (vm.isUnmounted) return + + state.value = 'error' + emit('error', image.value?.currentSrc || normalisedSrc.value.src) + } + + function getSrc () { + const img = image.value + if (img) currentSrc.value = img.currentSrc || img.src + } + + let timer = -1 + + onBeforeUnmount(() => { + clearTimeout(timer) + }) + + function pollForSize (img: HTMLImageElement, timeout: number | null = 100) { + const poll = () => { + clearTimeout(timer) + if (vm.isUnmounted) return + + const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img + + if (imgHeight || imgWidth) { + naturalWidth.value = imgWidth + naturalHeight.value = imgHeight + } else if (!img.complete && state.value === 'loading' && timeout != null) { + timer = window.setTimeout(poll, timeout) + } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) { + naturalWidth.value = 1 + naturalHeight.value = 1 + } + } + + poll() + } + + const containClasses = computed(() => ({ + 'v-img__img--cover': props.cover, + 'v-img__img--contain': !props.cover, + })) + + const __image = () => { + if (!normalisedSrc.value.src || state.value === 'idle') return null + + const img = ( + { + ) + + const sources = slots.sources?.() + + return ( + + { + withDirectives( + sources + ? { sources }{ img } + : img, + [[vShow, state.value === 'loaded']] + ) + } + + ) + } + + const __preloadImage = () => ( + + { normalisedSrc.value.lazySrc && state.value !== 'loaded' && ( + { + )} + + ) + + const __placeholder = () => { + if (!slots.placeholder) return null + + return ( + + { (state.value === 'loading' || (state.value === 'error' && !slots.error)) && +
    { slots.placeholder() }
    + } +     + ) + } + + const __error = () => { + if (!slots.error) return null + + return ( + + { state.value === 'error' && +
    { slots.error() }
    + } +     + ) + } + + const __gradient = () => { + if (!props.gradient) return null + + return
    + } + + const isBooted = shallowRef(false) + { + const stop = watch(aspectRatio, val => { + if (val) { + // Doesn't work with nextTick, idk why + requestAnimationFrame(() => { + requestAnimationFrame(() => { + isBooted.value = true + }) + }) + stop() + } + }) + } + + useRender(() => { + const responsiveProps = VResponsive.filterProps(props) + return ( + {{ + additional: () => ( + <> + <__image /> + <__preloadImage /> + <__gradient /> + <__placeholder /> + <__error /> + + ), + default: slots.default, + }} + ) + }) + + return { + currentSrc, + image, + state, + naturalWidth, + naturalHeight, + } + }, +}) + +export type VImg = InstanceType diff --git a/packages/vuetify/src/components/VImg/_variables.scss b/packages/vuetify/src/components/VImg/_variables.scss new file mode 100644 index 0000000..88de0f6 --- /dev/null +++ b/packages/vuetify/src/components/VImg/_variables.scss @@ -0,0 +1,6 @@ +@use '../../styles/settings'; + +// Defaults +$img-rounded-border-radius: settings.$border-radius-root !default; +$img-preload-filter: blur(4px) !default; +$img-card-media-height: 200px !default; diff --git a/packages/vuetify/src/components/VImg/index.ts b/packages/vuetify/src/components/VImg/index.ts new file mode 100644 index 0000000..b836f85 --- /dev/null +++ b/packages/vuetify/src/components/VImg/index.ts @@ -0,0 +1 @@ +export { VImg } from './VImg' diff --git a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass new file mode 100644 index 0000000..01984da --- /dev/null +++ b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass @@ -0,0 +1,27 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-infinite-scroll--horizontal + display: flex + flex-direction: row + overflow-x: auto + + .v-infinite-scroll-intersect + height: 100% + width: 1px + + .v-infinite-scroll--vertical + display: flex + flex-direction: column + overflow-y: auto + + .v-infinite-scroll-intersect + height: 1px + width: 100% + + .v-infinite-scroll__side + align-items: center + display: flex + justify-content: center + padding: $infinite-scroll-side-padding diff --git a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx new file mode 100644 index 0000000..5092409 --- /dev/null +++ b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx @@ -0,0 +1,298 @@ +// Styles +import './VInfiniteScroll.sass' + +// Components +import { VBtn } from '@/components/VBtn' +import { VProgressCircular } from '@/components/VProgressCircular' + +// Composables +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { useIntersectionObserver } from '@/composables/intersectionObserver' +import { useLocale } from '@/composables/locale' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue' +import { convertToUnit, defineComponent, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export type InfiniteScrollSide = 'start' | 'end' | 'both' +export type InfiniteScrollStatus = 'ok' | 'empty' | 'loading' | 'error' + +type InfiniteScrollSlot = { + side: InfiniteScrollSide + props: Record +} + +type VInfiniteScrollSlots = { + default: never + loading: InfiniteScrollSlot + error: InfiniteScrollSlot + empty: InfiniteScrollSlot + 'load-more': InfiniteScrollSlot +} + +export const makeVInfiniteScrollProps = propsFactory({ + color: String, + direction: { + type: String as PropType<'vertical' | 'horizontal'>, + default: 'vertical', + validator: (v: any) => ['vertical', 'horizontal'].includes(v), + }, + side: { + type: String as PropType, + default: 'end', + validator: (v: any) => ['start', 'end', 'both'].includes(v), + }, + mode: { + type: String as PropType<'intersect' | 'manual'>, + default: 'intersect', + validator: (v: any) => ['intersect', 'manual'].includes(v), + }, + margin: [Number, String], + loadMoreText: { + type: String, + default: '$vuetify.infiniteScroll.loadMore', + }, + emptyText: { + type: String, + default: '$vuetify.infiniteScroll.empty', + }, + + ...makeDimensionProps(), + ...makeTagProps(), +}, 'VInfiniteScroll') + +export const VInfiniteScrollIntersect = defineComponent({ + name: 'VInfiniteScrollIntersect', + + props: { + side: { + type: String as PropType, + required: true, + }, + rootRef: null, + rootMargin: String, + }, + + emits: { + intersect: (side: InfiniteScrollSide, isIntersecting: boolean) => true, + }, + + setup (props, { emit }) { + const { intersectionRef, isIntersecting } = useIntersectionObserver(entries => { + }, props.rootMargin ? { + rootMargin: props.rootMargin, + } : undefined) + + watch(isIntersecting, async val => { + emit('intersect', props.side, val) + }) + + useRender(() => ( +
     
    + )) + + return {} + }, +}) + +export const VInfiniteScroll = genericComponent()({ + name: 'VInfiniteScroll', + + props: makeVInfiniteScrollProps(), + + emits: { + load: (options: { side: InfiniteScrollSide, done: (status: InfiniteScrollStatus) => void }) => true, + }, + + setup (props, { slots, emit }) { + const rootEl = ref() + const startStatus = shallowRef('ok') + const endStatus = shallowRef('ok') + const margin = computed(() => convertToUnit(props.margin)) + const isIntersecting = shallowRef(false) + + function setScrollAmount (amount: number) { + if (!rootEl.value) return + + const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft' + rootEl.value[property] = amount + } + + function getScrollAmount () { + if (!rootEl.value) return 0 + + const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft' + return rootEl.value[property] + } + + function getScrollSize () { + if (!rootEl.value) return 0 + + const property = props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth' + return rootEl.value[property] + } + + function getContainerSize () { + if (!rootEl.value) return 0 + + const property = props.direction === 'vertical' ? 'clientHeight' : 'clientWidth' + return rootEl.value[property] + } + + onMounted(() => { + if (!rootEl.value) return + + if (props.side === 'start') { + setScrollAmount(getScrollSize()) + } else if (props.side === 'both') { + setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2) + } + }) + + function setStatus (side: InfiniteScrollSide, status: InfiniteScrollStatus) { + if (side === 'start') { + startStatus.value = status + } else if (side === 'end') { + endStatus.value = status + } + } + + function getStatus (side: string) { + return side === 'start' ? startStatus.value : endStatus.value + } + + let previousScrollSize = 0 + function handleIntersect (side: InfiniteScrollSide, _isIntersecting: boolean) { + isIntersecting.value = _isIntersecting + if (isIntersecting.value) { + intersecting(side) + } + } + + function intersecting (side: InfiniteScrollSide) { + if (props.mode !== 'manual' && !isIntersecting.value) return + + const status = getStatus(side) + if (!rootEl.value || ['empty', 'loading'].includes(status)) return + + previousScrollSize = getScrollSize() + setStatus(side, 'loading') + + function done (status: InfiniteScrollStatus) { + setStatus(side, status) + + nextTick(() => { + if (status === 'empty' || status === 'error') return + + if (status === 'ok' && side === 'start') { + setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount()) + } + if (props.mode !== 'manual') { + nextTick(() => { + window.requestAnimationFrame(() => { + window.requestAnimationFrame(() => { + window.requestAnimationFrame(() => { + intersecting(side) + }) + }) + }) + }) + } + }) + } + + emit('load', { side, done }) + } + + const { t } = useLocale() + + function renderSide (side: InfiniteScrollSide, status: InfiniteScrollStatus) { + if (props.side !== side && props.side !== 'both') return + + const onClick = () => intersecting(side) + const slotProps = { side, props: { onClick, color: props.color } } + + if (status === 'error') return slots.error?.(slotProps) + + if (status === 'empty') return slots.empty?.(slotProps) ??
    { t(props.emptyText) }
    + + if (props.mode === 'manual') { + if (status === 'loading') { + return slots.loading?.(slotProps) ?? ( + + ) + } + + return slots['load-more']?.(slotProps) ?? ( + + { t(props.loadMoreText) } + + ) + } + + return slots.loading?.(slotProps) ?? ( + + ) + } + + const { dimensionStyles } = useDimension(props) + + useRender(() => { + const Tag = props.tag + const hasStartIntersect = props.side === 'start' || props.side === 'both' + const hasEndIntersect = props.side === 'end' || props.side === 'both' + const intersectMode = props.mode === 'intersect' + + return ( + +
    + { renderSide('start', startStatus.value) } +
    + + { rootEl.value && hasStartIntersect && intersectMode && ( + + )} + + { slots.default?.() } + + { rootEl.value && hasEndIntersect && intersectMode && ( + + )} + +
    + { renderSide('end', endStatus.value) } +
    +     + ) + }) + }, +}) + +export type VInfiniteScroll = InstanceType diff --git a/packages/vuetify/src/components/VInfiniteScroll/__tests__/VInfiniteScroll.spec.cy.tsx b/packages/vuetify/src/components/VInfiniteScroll/__tests__/VInfiniteScroll.spec.cy.tsx new file mode 100644 index 0000000..91d8fad --- /dev/null +++ b/packages/vuetify/src/components/VInfiniteScroll/__tests__/VInfiniteScroll.spec.cy.tsx @@ -0,0 +1,105 @@ +/// + +// Components +import { VInfiniteScroll } from '../VInfiniteScroll' + +// Utilities +import { ref } from 'vue' +import { createRange } from '@/util' + +// Constants +const SCROLL_OPTIONS = { ensureScrollable: true, duration: 300 } + +describe('VInfiniteScroll', () => { + it('should call load function when scrolled', () => { + const load = cy.spy().as('load') + const items = createRange(50) + + cy.mount(() => ( + + { items.map(item => ( +
    { item }
    + ))} +     + )) + .get('.v-infinite-scroll').scrollTo('bottom', SCROLL_OPTIONS) + .get('.v-infinite-scroll .v-progress-circular').should('exist') + .get('@load').should('have.been.calledOnce') + }) + + it('should work when using start side', () => { + const load = cy.spy().as('load') + const items = createRange(50) + + cy.mount(() => ( + + { items.map(item => ( +
    { item }
    + ))} +     + )) + .get('.v-infinite-scroll').scrollTo('top', SCROLL_OPTIONS) + .get('.v-infinite-scroll .v-progress-circular').should('exist') + .get('@load').should('have.been.calledOnce') + }) + + it('should work when using both sides', () => { + const load = cy.spy().as('load') + const items = createRange(50) + + cy.mount(() => ( + + { items.map(item => ( +
    { item }
    + ))} +     + )) + .get('.v-infinite-scroll').scrollTo('top', SCROLL_OPTIONS) + .get('.v-infinite-scroll .v-progress-circular').eq(0).should('exist') + .get('@load').should('have.been.calledOnce') + .get('.v-infinite-scroll').scrollTo('bottom', SCROLL_OPTIONS) + .get('.v-infinite-scroll .v-progress-circular').eq(1).should('exist') + .get('@load').should('have.been.calledTwice') + }) + + it('should support horizontal direction', () => { + const load = cy.spy().as('load') + const items = createRange(50) + + cy.mount(() => ( + + { items.map(item => ( +
    { item }
    + ))} +     + )) + .get('.v-infinite-scroll').scrollTo('right', SCROLL_OPTIONS) + .get('.v-infinite-scroll .v-progress-circular').should('exist') + .get('@load').should('have.been.calledOnce') + }) + + // https://github.com/vuetifyjs/vuetify/issues/17358 + it('should keep triggering load logic until VInfiniteScrollIntersect disappears', () => { + const loadTracker = cy.spy().as('loadTracker') + const items = ref(Array.from({ length: 3 }, (k, v) => v + 1)) + + const load = async ({ done }: any) => { + setTimeout(() => { + items.value.push(...Array.from({ length: 3 }, (k, v) => v + items.value.at(-1)! + 1)) + loadTracker() + done('ok') + }, 100) + } + + cy.viewport(400, 200) + .mount(() => ( + + { items.value.map(item => ( +
    Item #{ item }
    + ))} +     + )) + .get('.v-infinite-scroll .v-progress-circular').should('exist') + .get('@loadTracker').should('have.been.calledTwice') + }) +}) diff --git a/packages/vuetify/src/components/VInfiniteScroll/_variables.scss b/packages/vuetify/src/components/VInfiniteScroll/_variables.scss new file mode 100644 index 0000000..b760772 --- /dev/null +++ b/packages/vuetify/src/components/VInfiniteScroll/_variables.scss @@ -0,0 +1,3 @@ +@use '../../styles/settings'; + +$infinite-scroll-side-padding: 8px !default; diff --git a/packages/vuetify/src/components/VInfiniteScroll/index.ts b/packages/vuetify/src/components/VInfiniteScroll/index.ts new file mode 100644 index 0000000..0b8e57e --- /dev/null +++ b/packages/vuetify/src/components/VInfiniteScroll/index.ts @@ -0,0 +1 @@ +export { VInfiniteScroll } from './VInfiniteScroll' diff --git a/packages/vuetify/src/components/VInput/InputIcon.tsx b/packages/vuetify/src/components/VInput/InputIcon.tsx new file mode 100644 index 0000000..de31795 --- /dev/null +++ b/packages/vuetify/src/components/VInput/InputIcon.tsx @@ -0,0 +1,49 @@ +// Components +import { VIcon } from '@/components/VIcon' + +// Composables +import { useLocale } from '@/composables/locale' + +// Types +import type { IconValue } from '@/composables/icons' + +type names = 'clear' | 'prepend' | 'append' | 'appendInner' | 'prependInner' + +type EventProp any> = T | T[] +type InputIconProps = { + label: string | undefined +} & { + [K in `${T}Icon`]: IconValue | undefined +} & { + [K in `onClick:${T}`]: EventProp | undefined +} + +type Listeners = U extends `onClick:${infer V extends names}` ? V : never + +export function useInputIcon> (props: T & InputIconProps) { + const { t } = useLocale() + + function InputIcon ({ name }: { name: Extract }) { + const localeKey = { + prepend: 'prependAction', + prependInner: 'prependAction', + append: 'appendAction', + appendInner: 'appendAction', + clear: 'clear', + }[name] + const listener = props[`onClick:${name}`] + const label = listener && localeKey + ? t(`$vuetify.input.${localeKey}`, props.label ?? '') + : undefined + + return ( + + ) + } + + return { InputIcon } +} diff --git a/packages/vuetify/src/components/VInput/VInput.sass b/packages/vuetify/src/components/VInput/VInput.sass new file mode 100644 index 0000000..2441ec1 --- /dev/null +++ b/packages/vuetify/src/components/VInput/VInput.sass @@ -0,0 +1,116 @@ +@use 'sass:math' +@use 'sass:selector' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-input + display: grid + flex: $input-flex + font-size: $input-font-size + font-weight: $input-font-weight + line-height: $input-line-height + + &--disabled + pointer-events: none + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + --v-input-control-height: #{$input-control-height + $modifier} + --v-input-padding-top: #{16px + $modifier * .5} + + .v-input--vertical + grid-template-areas: "append" "control" "prepend" + grid-template-rows: max-content auto max-content + grid-template-columns: min-content + + .v-input__prepend + margin-block-start: $input-affix-margin-inside + + .v-input__append + margin-block-end: $input-affix-margin-inside + + .v-input--horizontal + grid-template-areas: "prepend control append" "a messages b" + grid-template-columns: max-content minmax(0, 1fr) max-content + grid-template-rows: auto auto + + .v-input__prepend + margin-inline-end: $input-affix-margin-inside + + .v-input__append + margin-inline-start: $input-affix-margin-inside + + .v-input__details + align-items: flex-end + display: flex + font-size: $input-details-font-size + font-weight: $input-details-font-weight + grid-area: messages + letter-spacing: $input-details-letter-spacing + line-height: $input-details-line-height + min-height: $input-details-min-height + padding-top: $input-details-padding-above + overflow: hidden + justify-content: space-between + + .v-input__details, + .v-input__prepend, + .v-input__append + > .v-icon + opacity: var(--v-medium-emphasis-opacity) + + .v-input--disabled &, + .v-input--error & + > .v-icon, + .v-messages + opacity: 1 + + .v-input--disabled & + opacity: var(--v-disabled-opacity) + + .v-input--error:not(.v-input--disabled) & + > .v-icon, + .v-messages + color: rgb(var(--v-theme-error)) + + .v-input__prepend, + .v-input__append + display: flex + align-items: flex-start + padding-top: var(--v-input-padding-top) + + .v-input--center-affix & + align-items: center + padding-top: 0 + + .v-input__prepend + grid-area: prepend + + .v-input__append + grid-area: append + + .v-input__control + display: flex + grid-area: control + + .v-input + &--hide-spin-buttons + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button + -webkit-appearance: none + margin: 0 + input[type=number] + -moz-appearance: textfield + + &--plain-underlined:not(&--center-affix) + + .v-input__prepend, + .v-input__append + $this: & + align-items: flex-start + + @at-root + @include tools.density('v-input', $input-density) using ($modifier) + @at-root #{selector.append(&, $this)} + padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)}) diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx new file mode 100644 index 0000000..f12b059 --- /dev/null +++ b/packages/vuetify/src/components/VInput/VInput.tsx @@ -0,0 +1,234 @@ +// Styles +import './VInput.sass' + +// Components +import { useInputIcon } from '@/components/VInput/InputIcon' +import { VMessages } from '@/components/VMessages/VMessages' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { IconValue } from '@/composables/icons' +import { useRtl } from '@/composables/locale' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { makeValidationProps, useValidation } from '@/composables/validation' + +// Utilities +import { computed } from 'vue' +import { EventProp, genericComponent, getUid, only, propsFactory, useRender } from '@/util' + +// Types +import type { ComputedRef, PropType, Ref } from 'vue' +import type { VMessageSlot } from '@/components/VMessages/VMessages' +import type { GenericProps } from '@/util' + +export interface VInputSlot { + id: ComputedRef + messagesId: ComputedRef + isDirty: ComputedRef + isDisabled: ComputedRef + isReadonly: ComputedRef + isPristine: Ref + isValid: ComputedRef + isValidating: Ref + reset: () => void + resetValidation: () => void + validate: () => void +} + +export const makeVInputProps = propsFactory({ + id: String, + appendIcon: IconValue, + centerAffix: Boolean, + prependIcon: IconValue, + hideDetails: [Boolean, String] as PropType, + hideSpinButtons: Boolean, + hint: String, + persistentHint: Boolean, + messages: { + type: [Array, String] as PropType, + default: () => ([]), + }, + direction: { + type: String as PropType<'horizontal' | 'vertical'>, + default: 'horizontal', + validator: (v: any) => ['horizontal', 'vertical'].includes(v), + }, + + 'onClick:prepend': EventProp<[MouseEvent]>(), + 'onClick:append': EventProp<[MouseEvent]>(), + + ...makeComponentProps(), + ...makeDensityProps(), + ...only(makeDimensionProps(), [ + 'maxWidth', + 'minWidth', + 'width', + ]), + ...makeThemeProps(), + ...makeValidationProps(), +}, 'VInput') + +export type VInputSlots = { + default: VInputSlot + prepend: VInputSlot + append: VInputSlot + details: VInputSlot + message: VMessageSlot +} + +export const VInput = genericComponent( + props: { + modelValue?: T | null + 'onUpdate:modelValue'?: (value: T | null) => void + }, + slots: VInputSlots, +) => GenericProps>()({ + name: 'VInput', + + props: { + ...makeVInputProps(), + }, + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { attrs, slots, emit }) { + const { densityClasses } = useDensity(props) + const { dimensionStyles } = useDimension(props) + const { themeClasses } = provideTheme(props) + const { rtlClasses } = useRtl() + const { InputIcon } = useInputIcon(props) + + const uid = getUid() + const id = computed(() => props.id || `input-${uid}`) + const messagesId = computed(() => `${id.value}-messages`) + + const { + errorMessages, + isDirty, + isDisabled, + isReadonly, + isPristine, + isValid, + isValidating, + reset, + resetValidation, + validate, + validationClasses, + } = useValidation(props, 'v-input', id) + + const slotProps = computed(() => ({ + id, + messagesId, + isDirty, + isDisabled, + isReadonly, + isPristine, + isValid, + isValidating, + reset, + resetValidation, + validate, + })) + + const messages = computed(() => { + if (props.errorMessages?.length || (!isPristine.value && errorMessages.value.length)) { + return errorMessages.value + } else if (props.hint && (props.persistentHint || props.focused)) { + return props.hint + } else { + return props.messages + } + }) + + useRender(() => { + const hasPrepend = !!(slots.prepend || props.prependIcon) + const hasAppend = !!(slots.append || props.appendIcon) + const hasMessages = messages.value.length > 0 + const hasDetails = !props.hideDetails || ( + props.hideDetails === 'auto' && + (hasMessages || !!slots.details) + ) + + return ( +
    + { hasPrepend && ( +
    + { slots.prepend?.(slotProps.value) } + + { props.prependIcon && ( + + )} +
    + )} + + { slots.default && ( +
    + { slots.default?.(slotProps.value) } +
    + )} + + { hasAppend && ( +
    + { props.appendIcon && ( + + )} + + { slots.append?.(slotProps.value) } +
    + )} + + { hasDetails && ( +
    + + + { slots.details?.(slotProps.value) } +
    + )} +
    + ) + }) + + return { + reset, + resetValidation, + validate, + isValid, + errorMessages, + } + }, +}) + +export type VInput = InstanceType diff --git a/packages/vuetify/src/components/VInput/__tests__/VInput.spec.cy.tsx b/packages/vuetify/src/components/VInput/__tests__/VInput.spec.cy.tsx new file mode 100644 index 0000000..6a437a0 --- /dev/null +++ b/packages/vuetify/src/components/VInput/__tests__/VInput.spec.cy.tsx @@ -0,0 +1,34 @@ +/// + +// Components +import { VInput } from '../VInput' + +// Utilities +import { cloneVNode } from 'vue' +import { generate } from '../../../../cypress/templates' + +const densities = ['default', 'comfortable', 'compact'] + +const stories = Object.fromEntries(Object.entries({ + Default: , + Disabled: , + Affixes: , + PrependAppend: , + Hint: , + Messages: , +}).map(([k, v]) => [k, ( +
    + { densities.map(density => ( +
    + { cloneVNode(v, { density }) } + { cloneVNode(v, { density, modelValue: 'Value' }) } +
    + ))} +
    +)])) + +describe('VInput', () => { + describe('Showcase', () => { + generate({ stories }) + }) +}) diff --git a/packages/vuetify/src/components/VInput/_variables.scss b/packages/vuetify/src/components/VInput/_variables.scss new file mode 100644 index 0000000..dc1fa49 --- /dev/null +++ b/packages/vuetify/src/components/VInput/_variables.scss @@ -0,0 +1,27 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// CONTROL +$input-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default; +$input-control-height: 56px !default; +$input-flex: 1 1 auto !default; +$input-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default; +$input-font-weight: tools.map-deep-get(settings.$typography, 'body-1', 'weight') !default; +$input-line-height: 1.5 !default; + +// CHIPS +$input-chips-margin-top: null !default; +$input-chips-margin-bottom: null !default; + +// DETAILS +$input-details-font-size: .75rem !default; +$input-details-font-weight: 400 !default; +$input-details-letter-spacing: .0333333333em !default; +$input-details-line-height: normal !default; +$input-details-min-height: 22px !default; +$input-details-padding-above: 6px !default; +$input-details-transition: 150ms settings.$standard-easing !default; + +// AFFIXES +$input-affix-margin-inside: 16px !default; diff --git a/packages/vuetify/src/components/VInput/index.ts b/packages/vuetify/src/components/VInput/index.ts new file mode 100644 index 0000000..52dae00 --- /dev/null +++ b/packages/vuetify/src/components/VInput/index.ts @@ -0,0 +1 @@ +export { VInput } from './VInput' diff --git a/packages/vuetify/src/components/VItemGroup/VItem.tsx b/packages/vuetify/src/components/VItemGroup/VItem.tsx new file mode 100644 index 0000000..bbb3f06 --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/VItem.tsx @@ -0,0 +1,41 @@ +// Composables +import { VItemGroupSymbol } from './VItemGroup' +import { makeGroupItemProps, useGroupItem } from '@/composables/group' + +// Utilities +import { genericComponent } from '@/util' + +type VItemSlots = { + default: { + isSelected: boolean | undefined + selectedClass: boolean | (string | undefined)[] | undefined + select: ((value: boolean) => void) | undefined + toggle: (() => void) | undefined + value: unknown + disabled: boolean | undefined + } +} + +export const VItem = genericComponent()({ + name: 'VItem', + + props: makeGroupItemProps(), + + emits: { + 'group:selected': (val: { value: boolean }) => true, + }, + + setup (props, { slots }) { + const { isSelected, select, toggle, selectedClass, value, disabled } = useGroupItem(props, VItemGroupSymbol) + return () => slots.default?.({ + isSelected: isSelected.value, + selectedClass: selectedClass.value, + select, + toggle, + value: value.value, + disabled: disabled.value, + }) + }, +}) + +export type VItem = InstanceType diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.sass b/packages/vuetify/src/components/VItemGroup/VItemGroup.sass new file mode 100644 index 0000000..31bf5fb --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/VItemGroup.sass @@ -0,0 +1,9 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-item-group + flex: 0 1 auto + max-width: 100% + position: relative + transition: $item-group-transition diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx b/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx new file mode 100644 index 0000000..d33ac86 --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx @@ -0,0 +1,77 @@ +// Styles +import './VItemGroup.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeGroupProps, useGroup } from '@/composables/group' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { GenericProps } from '@/util' + +export const VItemGroupSymbol = Symbol.for('vuetify:v-item-group') + +export const makeVItemGroupProps = propsFactory({ + ...makeComponentProps(), + ...makeGroupProps({ + selectedClass: 'v-item--selected', + }), + ...makeTagProps(), + ...makeThemeProps(), +}, 'VItemGroup') + +type VItemGroupSlots = { + default: { + isSelected: (id: number) => boolean + select: (id: number, value: boolean) => void + next: () => void + prev: () => void + selected: readonly number[] + } +} + +export const VItemGroup = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VItemGroupSlots, +) => GenericProps>()({ + name: 'VItemGroup', + + props: makeVItemGroupProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { slots }) { + const { themeClasses } = provideTheme(props) + const { isSelected, select, next, prev, selected } = useGroup(props, VItemGroupSymbol) + + return () => ( + + { slots.default?.({ + isSelected, + select, + next, + prev, + selected: selected.value, + })} + + ) + }, +}) + +export type VItemGroup = InstanceType diff --git a/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.cy.tsx b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.cy.tsx new file mode 100644 index 0000000..fd835ae --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.cy.tsx @@ -0,0 +1,27 @@ +/// + +import { VItem, VItemGroup } from '../' +import { VCard } from '../../VCard' + +describe('VItemGroup', () => { + // https://github.com/vuetifyjs/vuetify/issues/14754 + it('should apply selected-class from both group and item', () => { + cy.mount(() => ( + + + {{ + default: props => Foo, + }} + + + {{ + default: props => Bar, + }} + + + )) + + cy.get('.v-card').eq(0).click().should('have.class', 'bg-blue').should('have.class', 'font-weight-bold') + cy.get('.v-card').eq(1).click().should('have.class', 'bg-orange').should('have.class', 'font-weight-bold') + }) +}) diff --git a/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts new file mode 100644 index 0000000..696c5f8 --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts @@ -0,0 +1,148 @@ +// Components +import { VItem } from '../VItem' +import { VItemGroup } from '../VItemGroup' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { h } from 'vue' +import { createVuetify } from '@/framework' + +describe('VItemGroup', () => { + const vuetify = createVuetify() + const mountFunction = (options = {}) => { + return mount(VItemGroup, { + ...options, + global: { + plugins: [vuetify], + }, + }) + } + + const defaultSlot = () => [ + h(VItem, { value: 'foo' }, { + default: ({ toggle }: any) => h('div', { id: 'item', onClick: toggle }, ['foo']), + }), + h(VItem, { value: 'bar' }, { + default: ({ toggle }: any) => h('div', { id: 'item', onClick: toggle }, ['bar']), + }), + ] + + it('should update state from child clicks', async () => { + const wrapper = mountFunction({ + slots: { + default: defaultSlot, + }, + }) + + const items = wrapper.findAll('#item') + + await items[0].trigger('click') + await items[1].trigger('click') + + const events = wrapper.emitted('update:modelValue') + + expect(events).toEqual([['foo'], ['bar']]) + }) + + it('should not deselect value when using mandatory prop', async () => { + const wrapper = mountFunction({ + props: { + mandatory: true, + modelValue: 'foo', + }, + slots: { + default: defaultSlot, + }, + }) + + const items = wrapper.findAll('#item') + + await items[0].trigger('click') + + const events = wrapper.emitted('update:modelValue') + + expect(events).toBeUndefined() + }) + + it('should update a multiple item group', async () => { + const wrapper = mountFunction({ + props: { + multiple: true, + modelValue: ['foo'], + }, + slots: { + default: defaultSlot, + }, + }) + + const items = wrapper.findAll('#item') + + await items[0].trigger('click') + await items[1].trigger('click') + + const events = wrapper.emitted('update:modelValue') + + expect(events).toEqual([ + [[]], + [['bar']], + ]) + }) + + it('should ignore disabled items', async () => { + const wrapper = mountFunction({ + props: { + multiple: true, + }, + slots: { + default: () => [ + h(VItem, { value: 'foo', disabled: true }, { + default: ({ toggle }: any) => h('div', { id: 'item', onClick: toggle }, ['foo']), + }), + h(VItem, { value: 'bar' }, { + default: ({ toggle }: any) => h('div', { id: 'item', onClick: toggle }, ['bar']), + }), + ], + }, + }) + + const items = wrapper.findAll('#item') + + await items[0].trigger('click') + await items[1].trigger('click') + + const events = wrapper.emitted('update:modelValue') + + expect(events).toEqual([ + [['bar']], + ]) + }) + + // https://github.com/vuetifyjs/vuetify/issues/5384 + it('should not unregister children when is destroyed', async () => { + const change = jest.fn() + const wrapper = mountFunction({ + props: { + modelValue: 'foo', + 'onUpdate:modelValue': change, + }, + slots: { + default: () => h(VItem, { value: 'foo' }, () => ['foo']), + }, + }) + + wrapper.unmount() + + expect(change).not.toHaveBeenCalled() + }) + + it('should render with a specified tag when the tag prop is provided with a value', () => { + const wrapper = mountFunction({ + props: { + tag: 'button', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VItemGroup/__tests__/__snapshots__/VItemGroup.spec.ts.snap b/packages/vuetify/src/components/VItemGroup/__tests__/__snapshots__/VItemGroup.spec.ts.snap new file mode 100644 index 0000000..5b13b57 --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/__tests__/__snapshots__/VItemGroup.spec.ts.snap @@ -0,0 +1,6 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VItemGroup should render with a specified tag when the tag prop is provided with a value 1`] = ` + +`; diff --git a/packages/vuetify/src/components/VItemGroup/_variables.scss b/packages/vuetify/src/components/VItemGroup/_variables.scss new file mode 100644 index 0000000..5784e5c --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/_variables.scss @@ -0,0 +1,4 @@ +@use '../../styles/settings'; + +// Defaults +$item-group-transition: 0.2s settings.$standard-easing !default; diff --git a/packages/vuetify/src/components/VItemGroup/index.ts b/packages/vuetify/src/components/VItemGroup/index.ts new file mode 100644 index 0000000..6ca9f40 --- /dev/null +++ b/packages/vuetify/src/components/VItemGroup/index.ts @@ -0,0 +1,2 @@ +export { VItemGroup } from './VItemGroup' +export { VItem } from './VItem' diff --git a/packages/vuetify/src/components/VKbd/VKbd.sass b/packages/vuetify/src/components/VKbd/VKbd.sass new file mode 100644 index 0000000..7dce6b3 --- /dev/null +++ b/packages/vuetify/src/components/VKbd/VKbd.sass @@ -0,0 +1,14 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-kbd + background: rgb(var(--v-theme-kbd)) + color: rgb(var(--v-theme-on-kbd)) + border-radius: $kbd-border-radius + display: $kbd-display + font-size: $kbd-font-size + font-weight: $kbd-font-weight + padding: $kbd-padding + + @include tools.elevation($kbd-elevation) diff --git a/packages/vuetify/src/components/VKbd/_variables.scss b/packages/vuetify/src/components/VKbd/_variables.scss new file mode 100644 index 0000000..dcbeceb --- /dev/null +++ b/packages/vuetify/src/components/VKbd/_variables.scss @@ -0,0 +1,7 @@ +// VKbd +$kbd-border-radius: 3px !default; +$kbd-display: inline !default; +$kbd-elevation: 2 !default; +$kbd-font-size: 85% !default; +$kbd-font-weight: normal !default; +$kbd-padding: .2em .4rem !default; diff --git a/packages/vuetify/src/components/VKbd/index.ts b/packages/vuetify/src/components/VKbd/index.ts new file mode 100644 index 0000000..1f09551 --- /dev/null +++ b/packages/vuetify/src/components/VKbd/index.ts @@ -0,0 +1,9 @@ +// Styles +import './VKbd.sass' + +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VKbd = createSimpleFunctional('v-kbd') + +export type VKbd = InstanceType diff --git a/packages/vuetify/src/components/VLabel/VLabel.sass b/packages/vuetify/src/components/VLabel/VLabel.sass new file mode 100644 index 0000000..2af93b4 --- /dev/null +++ b/packages/vuetify/src/components/VLabel/VLabel.sass @@ -0,0 +1,19 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-label + align-items: center + color: $label-color + display: $label-display + font-size: $label-font-size + letter-spacing: $label-letter-spacing + min-width: 0 + opacity: $label-opacity + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .v-label--clickable + cursor: pointer diff --git a/packages/vuetify/src/components/VLabel/VLabel.tsx b/packages/vuetify/src/components/VLabel/VLabel.tsx new file mode 100644 index 0000000..799feb2 --- /dev/null +++ b/packages/vuetify/src/components/VLabel/VLabel.tsx @@ -0,0 +1,48 @@ +// Styles +import './VLabel.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeThemeProps } from '@/composables/theme' + +// Utilities +import { EventProp, genericComponent, propsFactory, useRender } from '@/util' + +export const makeVLabelProps = propsFactory({ + text: String, + + onClick: EventProp<[MouseEvent]>(), + + ...makeComponentProps(), + ...makeThemeProps(), +}, 'VLabel') + +export const VLabel = genericComponent()({ + name: 'VLabel', + + props: makeVLabelProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VLabel = InstanceType diff --git a/packages/vuetify/src/components/VLabel/_variables.scss b/packages/vuetify/src/components/VLabel/_variables.scss new file mode 100644 index 0000000..21b0a6c --- /dev/null +++ b/packages/vuetify/src/components/VLabel/_variables.scss @@ -0,0 +1,10 @@ +@use '../../styles/settings'; + +// VLabel +$label-color: inherit !default; +$label-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default; +$label-display: inline-flex !default; +$label-error-color: rgb(var(--v-theme-error)) !default; +$label-font-size: 1rem !default; +$label-letter-spacing: .009375em !default; +$label-opacity: var(--v-medium-emphasis-opacity) !default; diff --git a/packages/vuetify/src/components/VLabel/index.ts b/packages/vuetify/src/components/VLabel/index.ts new file mode 100644 index 0000000..877de99 --- /dev/null +++ b/packages/vuetify/src/components/VLabel/index.ts @@ -0,0 +1 @@ +export { VLabel } from './VLabel' diff --git a/packages/vuetify/src/components/VLayout/VLayout.sass b/packages/vuetify/src/components/VLayout/VLayout.sass new file mode 100644 index 0000000..82a9260 --- /dev/null +++ b/packages/vuetify/src/components/VLayout/VLayout.sass @@ -0,0 +1,11 @@ +@use '../../styles/tools' + +@include tools.layer('components') + .v-layout + --v-scrollbar-offset: 0px + display: flex + flex: 1 1 auto + + &--full-height + --v-scrollbar-offset: inherit + height: 100% diff --git a/packages/vuetify/src/components/VLayout/VLayout.tsx b/packages/vuetify/src/components/VLayout/VLayout.tsx new file mode 100644 index 0000000..065882a --- /dev/null +++ b/packages/vuetify/src/components/VLayout/VLayout.tsx @@ -0,0 +1,56 @@ +// Styles +import './VLayout.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { createLayout, makeLayoutProps } from '@/composables/layout' + +// Utilities +import { Suspense } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVLayoutProps = propsFactory({ + ...makeComponentProps(), + ...makeDimensionProps(), + ...makeLayoutProps(), +}, 'VLayout') + +export const VLayout = genericComponent()({ + name: 'VLayout', + + props: makeVLayoutProps(), + + setup (props, { slots }) { + const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props) + const { dimensionStyles } = useDimension(props) + + useRender(() => ( +
    + + <> + { slots.default?.() } + + +
    + )) + + return { + getLayoutItem, + items, + } + }, +}) + +export type VLayout = InstanceType diff --git a/packages/vuetify/src/components/VLayout/VLayoutItem.sass b/packages/vuetify/src/components/VLayout/VLayoutItem.sass new file mode 100644 index 0000000..280058c --- /dev/null +++ b/packages/vuetify/src/components/VLayout/VLayoutItem.sass @@ -0,0 +1,10 @@ +@use '../../styles/settings' +@use '../../styles/tools' + +@include tools.layer('components') + .v-layout-item + position: absolute + transition: 0.2s settings.$standard-easing + + .v-layout-item--absolute + position: absolute diff --git a/packages/vuetify/src/components/VLayout/VLayoutItem.tsx b/packages/vuetify/src/components/VLayout/VLayoutItem.tsx new file mode 100644 index 0000000..f7f9af5 --- /dev/null +++ b/packages/vuetify/src/components/VLayout/VLayoutItem.tsx @@ -0,0 +1,65 @@ +// Styles +import './VLayoutItem.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' + +// Utilities +import { computed, toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export const makeVLayoutItemProps = propsFactory({ + position: { + type: String as PropType<'top' | 'right' | 'bottom' | 'left'>, + required: true, + }, + size: { + type: [Number, String], + default: 300, + }, + modelValue: Boolean, + + ...makeComponentProps(), + ...makeLayoutItemProps(), +}, 'VLayoutItem') + +export const VLayoutItem = genericComponent()({ + name: 'VLayoutItem', + + props: makeVLayoutItemProps(), + + setup (props, { slots }) { + const { layoutItemStyles, layoutIsReady } = useLayoutItem({ + id: props.name, + order: computed(() => parseInt(props.order, 10)), + position: toRef(props, 'position'), + elementSize: toRef(props, 'size'), + layoutSize: toRef(props, 'size'), + active: toRef(props, 'modelValue'), + absolute: toRef(props, 'absolute'), + }) + + useRender(() => ( +
    + { slots.default?.() } +
    + )) + + return layoutIsReady + }, +}) + +export type VLayoutItem = InstanceType diff --git a/packages/vuetify/src/components/VLayout/__tests__/VLayout.spec.cy.tsx b/packages/vuetify/src/components/VLayout/__tests__/VLayout.spec.cy.tsx new file mode 100644 index 0000000..5dbef5a --- /dev/null +++ b/packages/vuetify/src/components/VLayout/__tests__/VLayout.spec.cy.tsx @@ -0,0 +1,87 @@ +/// + +// Components +import { VLayout } from '../VLayout' +import { VAppBar } from '@/components/VAppBar' +import { VMain } from '@/components/VMain' +import { VNavigationDrawer } from '@/components/VNavigationDrawer' + +// Utilities +import { createRange } from '@/util' + +describe('VLayout', () => { + it('should position main component', () => { + cy.mount(() => ( + + + + + hello world + + + )) + + cy.get('.v-main').should('have.css', 'padding-top', '64px') + cy.get('.v-main').should('have.css', 'padding-left', '200px') + }) + + it('should work with sticky elements', () => { + cy.mount(() => ( + + + + +
    + { createRange(10).map(_ =>
    hello
    ) } + + { createRange(100).map(_ =>
    hello
    ) } +
    +     +     + )) + + cy.get('html').scrollTo(0, 1000) + .get('nav').should('be.visible') + }) + + it.only('should work with scrollable main', () => { + cy.mount(() => ( + + + + +
    + { createRange(10).map(_ =>
    hello
    ) } + + { createRange(100).map(_ =>
    hello
    ) } +
    +     +     + )) + + cy.get('.v-main__scroller').scrollTo(0, 1000) + .get('nav').should('be.visible') + }) + + it('should work when nested inside another layout', () => { + cy.mount(({ drawer }: any) => ( + + + + + + + + + Nested + + + + + )) + + cy.get('#nested .v-navigation-drawer').should('not.be.visible') + .setProps({ drawer: true }) + .get('#nested .v-navigation-drawer').should('be.visible') + }) +}) diff --git a/packages/vuetify/src/components/VLayout/index.ts b/packages/vuetify/src/components/VLayout/index.ts new file mode 100644 index 0000000..e4fcc88 --- /dev/null +++ b/packages/vuetify/src/components/VLayout/index.ts @@ -0,0 +1,2 @@ +export { VLayout } from './VLayout' +export { VLayoutItem } from './VLayoutItem' diff --git a/packages/vuetify/src/components/VLazy/VLazy.tsx b/packages/vuetify/src/components/VLazy/VLazy.tsx new file mode 100644 index 0000000..edded6b --- /dev/null +++ b/packages/vuetify/src/components/VLazy/VLazy.tsx @@ -0,0 +1,89 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeTagProps } from '@/composables/tag' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Directives +import intersect from '@/directives/intersect' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export const makeVLazyProps = propsFactory({ + modelValue: Boolean, + options: { + type: Object as PropType, + // For more information on types, navigate to: + // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API + default: () => ({ + root: undefined, + rootMargin: undefined, + threshold: undefined, + }), + }, + + ...makeComponentProps(), + ...makeDimensionProps(), + ...makeTagProps(), + ...makeTransitionProps({ transition: 'fade-transition' }), +}, 'VLazy') + +export const VLazy = genericComponent()({ + name: 'VLazy', + + directives: { intersect }, + + props: makeVLazyProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { slots }) { + const { dimensionStyles } = useDimension(props) + + const isActive = useProxiedModel(props, 'modelValue') + + function onIntersect (isIntersecting: boolean) { + if (isActive.value) return + + isActive.value = isIntersecting + } + + useRender(() => ( + + { isActive.value && ( + + { slots.default?.() } + + )} + + )) + + return {} + }, +}) + +export type VLazy = InstanceType diff --git a/packages/vuetify/src/components/VLazy/index.ts b/packages/vuetify/src/components/VLazy/index.ts new file mode 100644 index 0000000..738ac52 --- /dev/null +++ b/packages/vuetify/src/components/VLazy/index.ts @@ -0,0 +1 @@ +export { VLazy } from './VLazy' diff --git a/packages/vuetify/src/components/VList/VList.sass b/packages/vuetify/src/components/VList/VList.sass new file mode 100644 index 0000000..6bec2f9 --- /dev/null +++ b/packages/vuetify/src/components/VList/VList.sass @@ -0,0 +1,91 @@ +@use 'sass:list' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-list + overflow: auto + padding: $list-padding + position: relative + outline: none + + @include tools.border($list-border...) + @include tools.elevation($list-elevation) + @include tools.rounded($list-border-radius) + @include tools.theme($list-theme...) + + &--disabled + pointer-events: none + user-select: none + + &--nav + padding-inline: $list-nav-padding + + &--rounded + @include tools.rounded($list-rounded-border-radius) + + &--subheader + padding-top: $list-subheader-padding-top + + .v-list-img + border-radius: inherit + display: flex + height: 100% + left: 0 + overflow: hidden + position: absolute + top: 0 + width: 100% + z-index: -1 + + .v-list-subheader + $root: & + + align-items: center + background: inherit + color: $list-subheader-color + display: flex + font-size: $list-subheader-font-size + font-weight: $list-subheader-font-weight + line-height: $list-subheader-line-height + padding-inline-end: $list-subheader-padding-end + min-height: $list-subheader-min-height + transition: $list-subheader-transition + + &__text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + @at-root + @include tools.density('v-list', $list-density) using ($modifier) + $base-padding: list.nth($list-item-padding, 2) + + #{$root} + min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier) + padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important + + &--inset + --indent-padding: #{$list-subheader-inset-padding-start} + + .v-list--nav & + font-size: $list-nav-subheader-font-size + + &--sticky + background: inherit + left: 0 + position: sticky + top: 0 + z-index: 1 + + .v-list__overlay + background-color: currentColor + border-radius: inherit + bottom: 0 + left: 0 + opacity: 0 + pointer-events: none + position: absolute + right: 0 + top: 0 + transition: opacity 0.2s ease-in-out diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx new file mode 100644 index 0000000..fd1d33d --- /dev/null +++ b/packages/vuetify/src/components/VList/VList.tsx @@ -0,0 +1,295 @@ +// Styles +import './VList.sass' + +// Components +import { VListChildren } from './VListChildren' + +// Composables +import { createList } from './list' +import { makeBorderProps, useBorder } from '@/composables/border' +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeItemsProps } from '@/composables/list-items' +import { makeNestedProps, useNested } from '@/composables/nested/nested' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { makeVariantProps } from '@/composables/variant' + +// Utilities +import { computed, ref, shallowRef, toRef } from 'vue' +import { EventProp, focusChild, genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VListChildrenSlots } from './VListChildren' +import type { ItemProps, ListItem } from '@/composables/list-items' +import type { GenericProps, SelectItemKey } from '@/util' + +export interface InternalListItem extends ListItem { + type?: 'item' | 'subheader' | 'divider' +} + +function isPrimitive (value: unknown): value is string | number | boolean { + return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' +} + +function transformItem (props: ItemProps & { itemType: string }, item: any): InternalListItem { + const type = getPropertyFromItem(item, props.itemType, 'item') + const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle) + const value = getPropertyFromItem(item, props.itemValue, undefined) + const children = getPropertyFromItem(item, props.itemChildren) + const itemProps = props.itemProps === true + ? omit(item, ['children']) + : getPropertyFromItem(item, props.itemProps) + + const _props = { + title, + value, + ...itemProps, + } + + return { + type, + title: _props.title, + value: _props.value, + props: _props, + children: type === 'item' && children ? transformItems(props, children) : undefined, + raw: item, + } +} + +function transformItems (props: ItemProps & { itemType: string }, items: (string | object)[]) { + const array: InternalListItem[] = [] + + for (const item of items) { + array.push(transformItem(props, item)) + } + + return array +} + +export function useListItems (props: ItemProps & { itemType: string }) { + const items = computed(() => transformItems(props, props.items)) + + return { items } +} + +export const makeVListProps = propsFactory({ + baseColor: String, + /* @deprecated */ + activeColor: String, + activeClass: String, + bgColor: String, + disabled: Boolean, + expandIcon: String, + collapseIcon: String, + lines: { + type: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>, + default: 'one', + }, + slim: Boolean, + nav: Boolean, + + 'onClick:open': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(), + 'onClick:select': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(), + 'onUpdate:opened': EventProp<[]>(), + ...makeNestedProps({ + selectStrategy: 'single-leaf' as const, + openStrategy: 'list' as const, + }), + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeDimensionProps(), + ...makeElevationProps(), + itemType: { + type: String, + default: 'type', + }, + ...makeItemsProps(), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'text' } as const), +}, 'VList') + +type ItemType = T extends readonly (infer U)[] ? U : never + +export const VList = genericComponent( + props: { + items?: T + itemTitle?: SelectItemKey> + itemValue?: SelectItemKey> + itemChildren?: SelectItemKey> + itemProps?: SelectItemKey> + selected?: S + 'onUpdate:selected'?: (value: S) => void + 'onClick:open'?: (value: { id: unknown, value: boolean, path: unknown[] }) => void + 'onClick:select'?: (value: { id: unknown, value: boolean, path: unknown[] }) => void + opened?: O + 'onUpdate:opened'?: (value: O) => void + }, + slots: VListChildrenSlots> +) => GenericProps>()({ + name: 'VList', + + props: makeVListProps(), + + emits: { + 'update:selected': (value: unknown) => true, + 'update:activated': (value: unknown) => true, + 'update:opened': (value: unknown) => true, + 'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true, + 'click:activate': (value: { id: unknown, value: boolean, path: unknown[] }) => true, + 'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true, + }, + + setup (props, { slots }) { + const { items } = useListItems(props) + const { themeClasses } = provideTheme(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor')) + const { borderClasses } = useBorder(props) + const { densityClasses } = useDensity(props) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(props) + const { children, open, parents, select } = useNested(props) + const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined) + const activeColor = toRef(props, 'activeColor') + const baseColor = toRef(props, 'baseColor') + const color = toRef(props, 'color') + + createList() + + provideDefaults({ + VListGroup: { + activeColor, + baseColor, + color, + expandIcon: toRef(props, 'expandIcon'), + collapseIcon: toRef(props, 'collapseIcon'), + }, + VListItem: { + activeClass: toRef(props, 'activeClass'), + activeColor, + baseColor, + color, + density: toRef(props, 'density'), + disabled: toRef(props, 'disabled'), + lines: toRef(props, 'lines'), + nav: toRef(props, 'nav'), + slim: toRef(props, 'slim'), + variant: toRef(props, 'variant'), + }, + }) + + const isFocused = shallowRef(false) + const contentRef = ref() + function onFocusin (e: FocusEvent) { + isFocused.value = true + } + + function onFocusout (e: FocusEvent) { + isFocused.value = false + } + + function onFocus (e: FocusEvent) { + if ( + !isFocused.value && + !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget as Node)) + ) focus() + } + + function onKeydown (e: KeyboardEvent) { + const target = e.target as HTMLElement + + if (!contentRef.value || ['INPUT', 'TEXTAREA'].includes(target.tagName)) return + + if (e.key === 'ArrowDown') { + focus('next') + } else if (e.key === 'ArrowUp') { + focus('prev') + } else if (e.key === 'Home') { + focus('first') + } else if (e.key === 'End') { + focus('last') + } else { + return + } + + e.preventDefault() + } + + function onMousedown (e: MouseEvent) { + isFocused.value = true + } + + function focus (location?: 'next' | 'prev' | 'first' | 'last') { + if (contentRef.value) { + return focusChild(contentRef.value, location) + } + } + + useRender(() => { + return ( + + + + ) + }) + + return { + open, + select, + focus, + children, + parents, + } + }, +}) + +export type VList = InstanceType diff --git a/packages/vuetify/src/components/VList/VListChildren.tsx b/packages/vuetify/src/components/VList/VListChildren.tsx new file mode 100644 index 0000000..9f81757 --- /dev/null +++ b/packages/vuetify/src/components/VList/VListChildren.tsx @@ -0,0 +1,107 @@ +// Components +import { VListGroup } from './VListGroup' +import { VListItem } from './VListItem' +import { VListSubheader } from './VListSubheader' +import { VDivider } from '../VDivider' + +// Utilities +import { createList } from './list' +import { genericComponent, propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { InternalListItem } from './VList' +import type { VListItemSlots } from './VListItem' +import type { GenericProps } from '@/util' + +export type VListChildrenSlots = { + [K in keyof Omit]: VListItemSlots[K] & { item: T } +} & { + default: never + item: { props: InternalListItem['props'] } + divider: { props: InternalListItem['props'] } + subheader: { props: InternalListItem['props'] } + header: { props: InternalListItem['props'] } +} + +export const makeVListChildrenProps = propsFactory({ + items: Array as PropType, + returnObject: Boolean, +}, 'VListChildren') + +export const VListChildren = genericComponent( + props: { + items?: readonly T[] + returnObject?: boolean + }, + slots: VListChildrenSlots +) => GenericProps>()({ + name: 'VListChildren', + + props: makeVListChildrenProps(), + + setup (props, { slots }) { + createList() + + return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type, raw: item }) => { + if (type === 'divider') { + return slots.divider?.({ props: itemProps }) ?? ( + + ) + } + + if (type === 'subheader') { + return slots.subheader?.({ props: itemProps }) ?? ( + + ) + } + + const slotsWithItem = { + subtitle: slots.subtitle ? (slotProps: any) => slots.subtitle?.({ ...slotProps, item }) : undefined, + prepend: slots.prepend ? (slotProps: any) => slots.prepend?.({ ...slotProps, item }) : undefined, + append: slots.append ? (slotProps: any) => slots.append?.({ ...slotProps, item }) : undefined, + title: slots.title ? (slotProps: any) => slots.title?.({ ...slotProps, item }) : undefined, + } + + const listGroupProps = VListGroup.filterProps(itemProps) + + return children ? ( + + {{ + activator: ({ props: activatorProps }) => { + const listItemProps = { + ...itemProps, + ...activatorProps, + value: props.returnObject ? item : itemProps.value, + } + + return slots.header + ? slots.header({ props: listItemProps }) + : ( + + ) + }, + default: () => ( + + ), + }} + + ) : ( + slots.item ? slots.item({ props: itemProps }) : ( + + ) + ) + }) + }, +}) diff --git a/packages/vuetify/src/components/VList/VListGroup.tsx b/packages/vuetify/src/components/VList/VListGroup.tsx new file mode 100644 index 0000000..2d94ce7 --- /dev/null +++ b/packages/vuetify/src/components/VList/VListGroup.tsx @@ -0,0 +1,129 @@ +// Components +import { VExpandTransition } from '@/components/transitions' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' + +// Composables +import { useList } from './list' +import { makeComponentProps } from '@/composables/component' +import { IconValue } from '@/composables/icons' +import { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested' +import { useSsrBoot } from '@/composables/ssrBoot' +import { makeTagProps } from '@/composables/tag' +import { MaybeTransition } from '@/composables/transition' + +// Utilities +import { computed, toRef } from 'vue' +import { defineComponent, genericComponent, propsFactory, useRender } from '@/util' + +export type VListGroupSlots = { + default: never + activator: { isOpen: boolean, props: Record } +} + +const VListGroupActivator = defineComponent({ + name: 'VListGroupActivator', + + setup (_, { slots }) { + useNestedGroupActivator() + + return () => slots.default?.() + }, +}) + +export const makeVListGroupProps = propsFactory({ + /* @deprecated */ + activeColor: String, + baseColor: String, + color: String, + collapseIcon: { + type: IconValue, + default: '$collapse', + }, + expandIcon: { + type: IconValue, + default: '$expand', + }, + prependIcon: IconValue, + appendIcon: IconValue, + fluid: Boolean, + subgroup: Boolean, + title: String, + value: null, + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VListGroup') + +export const VListGroup = genericComponent()({ + name: 'VListGroup', + + props: makeVListGroupProps(), + + setup (props, { slots }) { + const { isOpen, open, id: _id } = useNestedItem(toRef(props, 'value'), true) + const id = computed(() => `v-list-group--id-${String(_id.value)}`) + const list = useList() + const { isBooted } = useSsrBoot() + + function onClick (e: Event) { + e.stopPropagation() + open(!isOpen.value, e) + } + + const activatorProps = computed(() => ({ + onClick, + class: 'v-list-group__header', + id: id.value, + })) + + const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon) + const activatorDefaults = computed(() => ({ + VListItem: { + active: isOpen.value, + activeColor: props.activeColor, + baseColor: props.baseColor, + color: props.color, + prependIcon: props.prependIcon || (props.subgroup && toggleIcon.value), + appendIcon: props.appendIcon || (!props.subgroup && toggleIcon.value), + title: props.title, + value: props.value, + }, + })) + + useRender(() => ( + + { slots.activator && ( + + + { slots.activator({ props: activatorProps.value, isOpen: isOpen.value }) } + + + )} + + +
    + { slots.default?.() } +
    +     +     + )) + + return { + isOpen, + } + }, +}) + +export type VListGroup = InstanceType diff --git a/packages/vuetify/src/components/VList/VListImg.ts b/packages/vuetify/src/components/VList/VListImg.ts new file mode 100644 index 0000000..4c70006 --- /dev/null +++ b/packages/vuetify/src/components/VList/VListImg.ts @@ -0,0 +1,6 @@ +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VListImg = createSimpleFunctional('v-list-img') + +export type VListImg = InstanceType diff --git a/packages/vuetify/src/components/VList/VListItem.sass b/packages/vuetify/src/components/VList/VListItem.sass new file mode 100644 index 0000000..d1146c2 --- /dev/null +++ b/packages/vuetify/src/components/VList/VListItem.sass @@ -0,0 +1,329 @@ +@use 'sass:list' +@use 'sass:map' +@use 'sass:math' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-list-item + align-items: center + display: grid + flex: none + grid-template-areas: "prepend content append" + grid-template-columns: max-content 1fr auto + outline: none + max-width: 100% + padding: $list-item-padding + position: relative + text-decoration: none + + @include tools.border($list-item-border...) + @include tools.states('.v-list-item__overlay') + @include tools.rounded($list-item-border-radius) + @include tools.variant($list-item-variants...) + + @supports selector(:focus-visible) + &::after + @include tools.absolute(true) + pointer-events: none + border: 2px solid currentColor + border-radius: 4px + opacity: 0 + transition: opacity .2s ease-in-out + + &:focus-visible::after + opacity: calc(.15 * var(--v-theme-overlay-multiplier)) + + &__prepend, + &__append + > .v-badge .v-icon, + > .v-icon + opacity: #{$list-item-icon-opacity} + + &--active + .v-list-item__prepend, + .v-list-item__append + > .v-badge .v-icon, + > .v-icon + opacity: #{$list-item-icon-active-opacity} + + &:not(.v-list-item--link) + .v-list-item__overlay + opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier)) + + &--rounded + @include tools.rounded($list-item-rounded-border-radius) + + &--disabled + pointer-events: none + user-select: none + opacity: $list-disabled-opacity + + &--link + cursor: pointer + + .v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) &, + .v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) & + .v-avatar + --v-avatar-height: 24px + + .v-list-item__prepend + align-items: center + align-self: center + display: flex + grid-area: prepend + + > .v-badge, + > .v-icon, + > .v-tooltip + ~ .v-list-item__spacer + width: $list-item-icon-margin-start + + > .v-avatar ~ .v-list-item__spacer + width: $list-item-avatar-margin-start + + > .v-list-item-action ~ .v-list-item__spacer + width: $list-item-action-spacer-width + + .v-list-item--slim & + > .v-badge, + > .v-icon, + > .v-tooltip + ~ .v-list-item__spacer + width: $list-item-slim-spacer-width + + > .v-avatar ~ .v-list-item__spacer + width: $list-item-slim-avatar-spacer-width + + > .v-list-item-action ~ .v-list-item__spacer + width: $list-item-slim-action-spacer-width + + .v-list-item--three-line & + align-self: start + + .v-list-item__append + align-self: center + display: flex + align-items: center + grid-area: append + + .v-list-item__spacer + order: -1 + transition: 150ms width settings.$standard-easing + + > .v-badge, + > .v-icon, + > .v-tooltip + ~ .v-list-item__spacer + width: $list-item-icon-margin-end + + > .v-avatar ~ .v-list-item__spacer + width: $list-item-avatar-margin-end + + > .v-list-item-action ~ .v-list-item__spacer + width: $list-item-action-spacer-width + + .v-list-item--slim & + > .v-badge, + > .v-icon, + > .v-tooltip + ~ .v-list-item__spacer + width: $list-item-slim-spacer-width + + > .v-avatar ~ .v-list-item__spacer + width: $list-item-slim-avatar-spacer-width + + > .v-list-item-action ~ .v-list-item__spacer + width: $list-item-slim-action-spacer-width + + .v-list-item--three-line & + align-self: start + + .v-list-item__content + align-self: center + grid-area: content + overflow: hidden + + .v-list-item-action + align-self: center + display: flex + align-items: center + flex: none + transition: inherit + transition-property: height, width + + &--start + margin-inline-end: $list-item-action-margin-end + margin-inline-start: -$list-item-action-margin-start + + &--end + margin-inline-start: $list-item-action-margin-start + margin-inline-end: -$list-item-action-margin-end + + .v-list-item-media + margin-top: $list-item-media-margin-top + margin-bottom: $list-item-media-margin-bottom + + &--start + margin-inline-end: $list-item-media-margin-end + + &--end + margin-inline-start: $list-item-media-margin-start + + .v-list-item--two-line & + margin-top: $list-item-media-two-line-margin-top + margin-bottom: $list-item-media-two-line-margin-bottom + + .v-list-item--three-line & + margin-top: $list-item-media-three-line-margin-top + margin-bottom: $list-item-media-three-line-margin-bottom + + .v-list-item-subtitle + -webkit-box-orient: vertical + display: -webkit-box + opacity: $list-item-subtitle-opacity + overflow: hidden + padding: $list-item-subtitle-padding + text-overflow: ellipsis + overflow-wrap: $list-item-subtitle-overflow-wrap + word-break: $list-item-subtitle-word-break + + .v-list-item--one-line & + -webkit-line-clamp: 1 + + .v-list-item--two-line & + -webkit-line-clamp: 2 + + .v-list-item--three-line & + -webkit-line-clamp: 3 + + @include tools.typography($list-item-subtitle-typography...) + + .v-list-item--nav & + @include tools.typography($list-item-nav-subtitle-typography...) + + .v-list-item-title + hyphens: $list-item-title-hyphens + overflow-wrap: $list-item-title-overflow-wrap + overflow: hidden + padding: $list-item-title-padding + white-space: nowrap + text-overflow: ellipsis + word-break: $list-item-title-word-break + word-wrap: $list-item-title-word-wrap + + @include tools.typography($list-item-title-typography...) + + .v-list-item--nav & + @include tools.typography($list-item-nav-title-typography...) + + .v-list-item + @at-root + @include tools.density('v-list-item', $list-density) using ($modifier) + min-height: $list-item-min-height + $modifier + + &.v-list-item--one-line + $one-line-padding: (list.nth($list-item-padding, 1) + $modifier) + + min-height: $list-item-one-line-min-height + $modifier + + @if ($one-line-padding > 0) + padding-top: $one-line-padding + padding-bottom: $one-line-padding + + &.v-list-item--two-line + $two-line-padding: (list.nth($list-item-two-line-padding, 1) + $modifier) + + min-height: $list-item-two-line-min-height + $modifier + + @if ($two-line-padding > 0) + padding-top: $two-line-padding + padding-bottom: $two-line-padding + + &.v-list-item--three-line + $three-line-padding: (list.nth($list-item-three-line-padding, 1) + $modifier) + + min-height: $list-item-three-line-min-height + $modifier + + @if ($three-line-padding > 0) + padding-top: $three-line-padding + padding-bottom: $three-line-padding + + .v-list-item__prepend, + .v-list-item__append + padding-top: math.div($three-line-padding, 2) + + &:not(.v-list-item--nav) + &.v-list-item--one-line + padding-inline: list.nth($list-item-padding, 2) + + &.v-list-item--two-line + padding-inline: list.nth($list-item-two-line-padding, 2) + + &.v-list-item--three-line + padding-inline: list.nth($list-item-three-line-padding, 2) + + &--nav + padding-inline: $list-nav-padding + + .v-list & + &:not(:only-child) + margin-bottom: $list-item-nav-margin-top + + .v-list-item__underlay + position: absolute + + .v-list-item__overlay + background-color: currentColor + border-radius: inherit + bottom: 0 + left: 0 + opacity: 0 + pointer-events: none + position: absolute + right: 0 + top: 0 + transition: opacity 0.2s ease-in-out + + .v-list-item--active.v-list-item--variant-elevated & + --v-theme-overlay-multiplier: 0 + + $base-padding: list.nth($list-item-padding, 2) + .v-list + --indent-padding: 0px + + &--nav + --indent-padding: -#{$list-nav-padding} + + .v-list-group + --list-indent-size: #{$list-indent-size} + --parent-padding: var(--indent-padding) + --prepend-width: #{$list-item-prepend-size} + + .v-list--slim & + --prepend-width: #{$list-item-slim-prepend-size} + + &--fluid + --list-indent-size: 0px + + &--prepend + --parent-padding: calc(var(--indent-padding) + var(--prepend-width)) + + &--fluid.v-list-group--prepend + --parent-padding: var(--indent-padding) + + .v-list-group__items + --indent-padding: calc(var(--parent-padding) + var(--list-indent-size)) + + .v-list-group__items .v-list-item + padding-inline-start: calc(#{$base-padding} + var(--indent-padding)) !important + + .v-list-group__header:not(.v-treeview-item--activetable-group-activator).v-list-item--active + &:not(:focus-visible) + .v-list-item__overlay + opacity: 0 + + &:hover + .v-list-item__overlay + opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier)) diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx new file mode 100644 index 0000000..5033f79 --- /dev/null +++ b/packages/vuetify/src/components/VList/VListItem.tsx @@ -0,0 +1,372 @@ +// Styles +import './VListItem.sass' + +// Components +import { VListItemSubtitle } from './VListItemSubtitle' +import { VListItemTitle } from './VListItemTitle' +import { VAvatar } from '@/components/VAvatar' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' + +// Composables +import { useList } from './list' +import { makeBorderProps, useBorder } from '@/composables/border' +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { IconValue } from '@/composables/icons' +import { useNestedItem } from '@/composables/nested/nested' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeRouterProps, useLink } from '@/composables/router' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' + +// Directives +import { Ripple } from '@/directives/ripple' + +// Utilities +import { computed, watch } from 'vue' +import { deprecate, EventProp, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { RippleDirectiveBinding } from '@/directives/ripple' + +export type ListItemSlot = { + isActive: boolean + isSelected: boolean + isIndeterminate: boolean + select: (value: boolean) => void +} + +export type ListItemTitleSlot = { + title?: string | number +} + +export type ListItemSubtitleSlot = { + subtitle?: string | number +} + +export type VListItemSlots = { + prepend: ListItemSlot + append: ListItemSlot + default: ListItemSlot + title: ListItemTitleSlot + subtitle: ListItemSubtitleSlot +} + +export const makeVListItemProps = propsFactory({ + active: { + type: Boolean, + default: undefined, + }, + activeClass: String, + /* @deprecated */ + activeColor: String, + appendAvatar: String, + appendIcon: IconValue, + baseColor: String, + disabled: Boolean, + lines: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>, + link: { + type: Boolean, + default: undefined, + }, + nav: Boolean, + prependAvatar: String, + prependIcon: IconValue, + ripple: { + type: [Boolean, Object] as PropType, + default: true, + }, + slim: Boolean, + subtitle: [String, Number], + title: [String, Number], + value: null, + + onClick: EventProp<[MouseEvent]>(), + onClickOnce: EventProp<[MouseEvent]>(), + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeDimensionProps(), + ...makeElevationProps(), + ...makeRoundedProps(), + ...makeRouterProps(), + ...makeTagProps(), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'text' } as const), +}, 'VListItem') + +export const VListItem = genericComponent()({ + name: 'VListItem', + + directives: { Ripple }, + + props: makeVListItemProps(), + + emits: { + click: (e: MouseEvent | KeyboardEvent) => true, + }, + + setup (props, { attrs, slots, emit }) { + const link = useLink(props, attrs) + const id = computed(() => props.value === undefined ? link.href.value : props.value) + const { + activate, + isActivated, + select, + isSelected, + isIndeterminate, + isGroupActivator, + root, + parent, + openOnSelect, + } = useNestedItem(id, false) + const list = useList() + const isActive = computed(() => + props.active !== false && + (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)) + ) + const isLink = computed(() => props.link !== false && link.isLink.value) + const isClickable = computed(() => + !props.disabled && + props.link !== false && + (props.link || link.isClickable.value || (!!list && (root.selectable.value || root.activatable.value || props.value != null))) + ) + + const roundedProps = computed(() => props.rounded || props.nav) + const color = computed(() => props.color ?? props.activeColor) + const variantProps = computed(() => ({ + color: isActive.value ? color.value ?? props.baseColor : props.baseColor, + variant: props.variant, + })) + + watch(() => link.isActive?.value, val => { + if (val && parent.value != null) { + root.open(parent.value, true) + } + + if (val) { + openOnSelect(val) + } + }, { immediate: true }) + + const { themeClasses } = provideTheme(props) + const { borderClasses } = useBorder(props) + const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps) + const { densityClasses } = useDensity(props) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(roundedProps) + const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined) + + const slotProps = computed(() => ({ + isActive: isActive.value, + select, + isSelected: isSelected.value, + isIndeterminate: isIndeterminate.value, + } satisfies ListItemSlot)) + + function onClick (e: MouseEvent) { + emit('click', e) + + if (!isClickable.value) return + + link.navigate?.(e) + + if (isGroupActivator) return + + if (root.activatable.value) { + activate(!isActivated.value, e) + } else if (root.selectable.value) { + select(!isSelected.value, e) + } else if (props.value != null) { + select(!isSelected.value, e) + } + } + + function onKeyDown (e: KeyboardEvent) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + onClick(e as any as MouseEvent) + } + } + + useRender(() => { + const Tag = isLink.value ? 'a' : props.tag + const hasTitle = (slots.title || props.title != null) + const hasSubtitle = (slots.subtitle || props.subtitle != null) + const hasAppendMedia = !!(props.appendAvatar || props.appendIcon) + const hasAppend = !!(hasAppendMedia || slots.append) + const hasPrependMedia = !!(props.prependAvatar || props.prependIcon) + const hasPrepend = !!(hasPrependMedia || slots.prepend) + + list?.updateHasPrepend(hasPrepend) + + if (props.activeColor) { + deprecate('active-color', ['color', 'base-color']) + } + + return ( + + { genOverlays(isClickable.value || isActive.value, 'v-list-item') } + + { hasPrepend && ( +
    + { !slots.prepend ? ( + <> + { props.prependAvatar && ( + + )} + + { props.prependIcon && ( + + )} + + ) : ( + + { slots.prepend?.(slotProps.value) } + + )} + +
    +
    + )} + +
    + { hasTitle && ( + + { slots.title?.({ title: props.title }) ?? props.title } + + )} + + { hasSubtitle && ( + + { slots.subtitle?.({ subtitle: props.subtitle }) ?? props.subtitle } + + )} + + { slots.default?.(slotProps.value) } +
    + + { hasAppend && ( +
    + { !slots.append ? ( + <> + { props.appendIcon && ( + + )} + + { props.appendAvatar && ( + + )} + + ) : ( + + { slots.append?.(slotProps.value) } + + )} + +
    +
    + )} + + ) + }) + + return { + activate, + isActivated, + isGroupActivator, + isSelected, + list, + select, + } + }, +}) + +export type VListItem = InstanceType diff --git a/packages/vuetify/src/components/VList/VListItemAction.tsx b/packages/vuetify/src/components/VList/VListItemAction.tsx new file mode 100644 index 0000000..a85e05e --- /dev/null +++ b/packages/vuetify/src/components/VList/VListItemAction.tsx @@ -0,0 +1,41 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVListItemActionProps = propsFactory({ + start: Boolean, + end: Boolean, + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VListItemAction') + +export const VListItemAction = genericComponent()({ + name: 'VListItemAction', + + props: makeVListItemActionProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VListItemAction = InstanceType diff --git a/packages/vuetify/src/components/VList/VListItemMedia.tsx b/packages/vuetify/src/components/VList/VListItemMedia.tsx new file mode 100644 index 0000000..ea589b4 --- /dev/null +++ b/packages/vuetify/src/components/VList/VListItemMedia.tsx @@ -0,0 +1,43 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVListItemMediaProps = propsFactory({ + start: Boolean, + end: Boolean, + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VListItemMedia') + +export const VListItemMedia = genericComponent()({ + name: 'VListItemMedia', + + props: makeVListItemMediaProps(), + + setup (props, { slots }) { + useRender(() => { + return ( + + ) + }) + + return {} + }, +}) + +export type VListItemMedia = InstanceType diff --git a/packages/vuetify/src/components/VList/VListItemSubtitle.tsx b/packages/vuetify/src/components/VList/VListItemSubtitle.tsx new file mode 100644 index 0000000..10856bd --- /dev/null +++ b/packages/vuetify/src/components/VList/VListItemSubtitle.tsx @@ -0,0 +1,39 @@ +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVListItemSubtitleProps = propsFactory({ + opacity: [Number, String], + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VListItemSubtitle') + +export const VListItemSubtitle = genericComponent()({ + name: 'VListItemSubtitle', + + props: makeVListItemSubtitleProps(), + + setup (props, { slots }) { + useRender(() => ( + + )) + + return {} + }, +}) + +export type VListItemSubtitle = InstanceType diff --git a/packages/vuetify/src/components/VList/VListItemTitle.ts b/packages/vuetify/src/components/VList/VListItemTitle.ts new file mode 100644 index 0000000..e421312 --- /dev/null +++ b/packages/vuetify/src/components/VList/VListItemTitle.ts @@ -0,0 +1,6 @@ +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VListItemTitle = createSimpleFunctional('v-list-item-title') + +export type VListItemTitle = InstanceType diff --git a/packages/vuetify/src/components/VList/VListSubheader.tsx b/packages/vuetify/src/components/VList/VListSubheader.tsx new file mode 100644 index 0000000..cffae2d --- /dev/null +++ b/packages/vuetify/src/components/VList/VListSubheader.tsx @@ -0,0 +1,60 @@ +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVListSubheaderProps = propsFactory({ + color: String, + inset: Boolean, + sticky: Boolean, + title: String, + + ...makeComponentProps(), + ...makeTagProps(), +}, 'VListSubheader') + +export const VListSubheader = genericComponent()({ + name: 'VListSubheader', + + props: makeVListSubheaderProps(), + + setup (props, { slots }) { + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')) + + useRender(() => { + const hasText = !!(slots.default || props.title) + + return ( + + { hasText && ( +
    + { slots.default?.() ?? props.title } +
    + )} +     + ) + }) + + return {} + }, +}) + +export type VListSubheader = InstanceType diff --git a/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx new file mode 100644 index 0000000..463e471 --- /dev/null +++ b/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx @@ -0,0 +1,262 @@ +/* eslint-disable sonarjs/no-identical-functions */ +/// + +// Components +import { VList, VListItem } from '..' +import { CenteredGrid } from '@/../cypress/templates' + +// Utilities +import { ref } from 'vue' +import { createRouter, createWebHistory } from 'vue-router' + +describe('VList', () => { + function mountFunction (content: JSX.Element) { + return cy.mount(() => content) + } + + it('supports the density property', () => { + const densities = ['default', 'comfortable', 'compact'] as const + const ListItems = densities.map(density => ( + + + density { density } + + + )) + const wrapper = mountFunction(( + +

    ListItems by Density

    + + { ListItems } +     + )) + + wrapper.get('.v-list--density-default').should('exist') + wrapper.get('.v-list--density-comfortable').should('exist') + wrapper.get('.v-list--density-compact').should('exist') + }) + + it('supports the lines property', () => { + const lines = ['one', 'two', 'three'] as const + const ListItems = lines.map(number => ( + + + lines { number } + + + )) + const wrapper = mountFunction(( + +

    ListItems by Density

    + + { ListItems } +     + )) + + wrapper.get('.v-list--one-line').should('exist') + wrapper.get('.v-list--two-line').should('exist') + wrapper.get('.v-list--three-line').should('exist') + }) + + it('supports items prop', () => { + const items = [ + { + title: 'Foo', + subtitle: 'Bar', + value: 'foo', + }, + { + title: 'Group', + value: 'group', + children: [ + { + title: 'Child', + subtitle: 'Subtitle', + value: 'child', + }, + ], + }, + ] + + const wrapper = mountFunction(( + + + + )) + + wrapper.get('.v-list-item').should('have.length', 3) + }) + + it('supports item slot', () => { + const items = [ + { + title: 'Foo', + subtitle: 'Bar', + value: 'foo', + }, + { + title: 'Group', + value: 'group', + children: [ + { + title: 'Child', + subtitle: 'Subtitle', + value: 'child', + }, + ], + }, + ] + + const wrapper = mountFunction(( + + + {{ + item: item => , + }} + + + )) + + wrapper.get('.v-icon.mdi-home').should('have.length', 2) + }) + + it('should set active item on route change', () => { + const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + component: { template: 'Home' }, + }, + { + path: '/about', + component: { template: 'About' }, + }, + ], + }) + + cy.mount(() => ( + + + + + + + ), { + global: { + plugins: [router], + }, + }) + + cy.get('.v-list').then(() => { + router.push('/about') + }) + + cy.get('.v-list-item--active').should('exist').should('have.text', 'About') + }) + + it('should change route when clicking item with to prop', () => { + const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + component: { template: 'Home' }, + }, + { + path: '/about', + component: { template: 'About' }, + }, + ], + }) + + cy.mount(() => ( + + + + + + + ), { + global: { + plugins: [router], + }, + }) + + cy.get('.v-list-item').eq(1).trigger('click') + + cy.get('.v-list').then(() => { + expect(router.currentRoute.value.path).to.equal('/about') + }) + }) + + it('should deselect v-list-item if route changes externally', () => { + const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + component: { template: 'Home' }, + }, + { + path: '/about', + component: { template: 'About' }, + }, + { + path: '/other', + component: { template: 'Other' }, + }, + ], + }) + + // eslint-disable-next-line sonarjs/no-identical-functions + cy.mount(() => ( + + + + + + + ), { + global: { + plugins: [router], + }, + }) + + cy.get('.v-list-item').eq(1).click().should('have.class', 'v-list-item--active') + + cy.get('.v-list').then(() => { + expect(router.currentRoute.value.path).to.equal('/about') + }) + + cy.get('.v-list').then(() => router.push('/other')) + + cy.get('.v-list-item').eq(1).should('not.have.class', 'v-list-item--active') + }) + + // https://github.com/vuetifyjs/vuetify/issues/18304 + it('should support return-object', () => { + const selectedItem = ref([]) + const items = [ + { id: '1', title: 'Events' }, + { id: '2', title: 'Labour' }, + { id: '3', title: 'Equipment' }, + ] + + cy.mount(() => ( + selectedItem.value = val } + item-value="id" + item-title="title" + > + + )) + + cy.get('.v-list-item').eq(1).trigger('click') + .then(_ => { + expect(selectedItem.value).to.deep.equal([items[1]]) + }) + }) +}) diff --git a/packages/vuetify/src/components/VList/__tests__/VList.spec.ts b/packages/vuetify/src/components/VList/__tests__/VList.spec.ts new file mode 100644 index 0000000..5e5c998 --- /dev/null +++ b/packages/vuetify/src/components/VList/__tests__/VList.spec.ts @@ -0,0 +1,24 @@ +// Components +import { VList } from '..' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { createVuetify } from '@/framework' + +describe('VList', () => { + const vuetify = createVuetify() + + function mountFunction (options = {}) { + return mount(VList, { + global: { plugins: [vuetify] }, + ...options, + }) + } + + it('should match a snapshot', () => { + const wrapper = mountFunction() + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx new file mode 100644 index 0000000..8953593 --- /dev/null +++ b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx @@ -0,0 +1,52 @@ +/// + +import { CenteredGrid } from '@/../cypress/templates' +import { VListGroup } from '../VListGroup' +import { VListItem } from '../VListItem' +import { VList } from '../VList' + +describe('VListGroup', () => { + function mountFunction (content: JSX.Element) { + return cy.mount(() => content) + } + + it('supports header slot', () => { + const wrapper = mountFunction(( + +

    ListGroup

    + + + + {{ activator: props => }} + + +     + )) + + wrapper.get('.v-list-item-title').contains('Group') + }) + + it('supports children', () => { + const wrapper = mountFunction(( + +

    ListGroup

    + + + + {{ + activator: props => , + default: () => ( + <> + + + + ), + }} + + +     + )) + + wrapper.get('.v-list-item-title').contains('Group') + }) +}) diff --git a/packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx new file mode 100644 index 0000000..9cf55ae --- /dev/null +++ b/packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx @@ -0,0 +1,53 @@ +/// + +import { CenteredGrid } from '@/../cypress/templates' +import { VListItem } from '../' + +describe('VListItem', () => { + it('supports header text props, title and subtitle', () => { + cy.mount(() => ( + +

    ListItem Header Text

    + + +     + )) + + cy.get('.v-list-item-title').contains('foo') + .get('.v-list-item-subtitle').contains('bar') + }) + + // https://github.com/vuetifyjs/vuetify/issues/13893 + it('should use active-color for active item', () => { + cy.mount(props => ( + + + + )) + + cy.get('.v-list-item') + .should('not.have.class', 'text-success') + .setProps({ active: true }) + .get('.v-list-item') + .should('have.class', 'text-success') + }) + + it('should render prepend and append slots', () => { + cy.mount(props => ( + + + + )) + + cy.get('.v-list-item__prepend').should('exist') + .get('.v-list-item__append').should('not.exist') + .setProps({ appendIcon: '$success', prependIcon: undefined }) + .get('.v-list-item__append').should('exist') + .get('.v-list-item__prepend').should('not.exist') + }) +}) diff --git a/packages/vuetify/src/components/VList/__tests__/VListItemMedia.spec.ts b/packages/vuetify/src/components/VList/__tests__/VListItemMedia.spec.ts new file mode 100644 index 0000000..0fcf032 --- /dev/null +++ b/packages/vuetify/src/components/VList/__tests__/VListItemMedia.spec.ts @@ -0,0 +1,24 @@ +// Components +import { VListItemMedia } from '..' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { createVuetify } from '@/framework' + +describe('VListItemMedia', () => { + const vuetify = createVuetify() + + function mountFunction (options = {}) { + return mount(VListItemMedia, { + global: { plugins: [vuetify] }, + ...options, + }) + } + + it('should match a snapshot', () => { + const wrapper = mountFunction() + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VList/__tests__/__snapshots__/VList.spec.ts.snap b/packages/vuetify/src/components/VList/__tests__/__snapshots__/VList.spec.ts.snap new file mode 100644 index 0000000..7c65a62 --- /dev/null +++ b/packages/vuetify/src/components/VList/__tests__/__snapshots__/VList.spec.ts.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VList should match a snapshot 1`] = ` +
    +
    +`; diff --git a/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItemMedia.spec.ts.snap b/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItemMedia.spec.ts.snap new file mode 100644 index 0000000..c61febf --- /dev/null +++ b/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItemMedia.spec.ts.snap @@ -0,0 +1,6 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VListItemMedia should match a snapshot 1`] = ` +
    +
    +`; diff --git a/packages/vuetify/src/components/VList/_variables.scss b/packages/vuetify/src/components/VList/_variables.scss new file mode 100644 index 0000000..b173a4c --- /dev/null +++ b/packages/vuetify/src/components/VList/_variables.scss @@ -0,0 +1,178 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VList +$list-background: rgba(var(--v-theme-surface)) !default; +$list-border-color: settings.$border-color-root !default; +$list-border-radius: 0 !default; +$list-border-style: settings.$border-style-root !default; +$list-border-thin-width: thin !default; +$list-border-width: 0 !default; +$list-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$list-disabled-opacity: 0.6 !default; +$list-elevation: 0 !default; +$list-padding: 8px 0 !default; +$list-rounded-border-radius: map.get(settings.$rounded, null) !default; +$list-indent-size: 16px !default; + +$list-nav-padding: 8px !default; +$list-nav-subheader-font-size: .75rem !default; + +// VListSubheader +$list-subheader-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$list-subheader-font-size: .875rem !default; +$list-subheader-font-weight: 400 !default; +$list-subheader-inset-margin: 56px !default; +$list-subheader-inset-padding-start: 56px !default; +$list-subheader-line-height: 1.375rem !default; +$list-subheader-min-height: 40px !default; +$list-subheader-padding-end: 16px !default; +$list-subheader-padding-start: 16px !default; +$list-subheader-padding-top: 0 !default; +$list-subheader-min-height-multiplier: 1 !default; +$list-subheader-text-opacity: var(--v-medium-emphasis-opacity) !default; +$list-subheader-transition: 0.2s min-height settings.$standard-easing !default; + +// VListItem +$list-item-border-color: settings.$border-color-root !default; +$list-item-border-radius: 0 !default; +$list-item-border-style: settings.$border-style-root !default; +$list-item-border-width: 0 !default; +$list-item-border-thin-width: thin !default; +$list-item-elevation: 1 !default; +$list-item-icon-opacity: var(--v-medium-emphasis-opacity) !default; +$list-item-icon-active-opacity: 1 !default; +$list-item-min-height: 40px !default; +$list-item-padding: 4px 16px !default; +$list-item-prepend-size: 40px !default; +$list-item-slim-prepend-size: 28px !default; +$list-item-plain-opacity: .62 !default; +$list-item-rounded-border-radius: map.get(settings.$rounded, null) !default; +$list-item-one-line-min-height: 48px !default; +$list-item-one-line-padding: 8px 16px !default; +$list-item-two-line-min-height: 64px !default; +$list-item-two-line-padding: 12px 16px !default; +$list-item-three-line-min-height: 88px !default; +$list-item-three-line-padding: 16px 16px !default; + +$list-item-action-spacer-width: 16px !default; +$list-item-slim-action-spacer-width: 4px !default; +$list-item-avatar-align-self: flex-start !default; +$list-item-avatar-margin-end: 16px !default; +$list-item-avatar-margin-start: 16px !default; +$list-item-avatar-size: 40px !default; +$list-item-avatar-margin-y: 4px !default; +$list-item-slim-spacer-width: 20px !default; +$list-item-slim-avatar-spacer-width: 4px !default; + +$list-item-action-margin-end: 8px !default; +$list-item-action-margin-start: 8px !default; + +$list-item-icon-margin-end: 32px !default; +$list-item-icon-margin-start: 32px !default; +$list-item-slim-icon-margin: 8px !default; +$list-item-icon-size: 16px !default; + +$list-item-media-margin-bottom: 0 !default; +$list-item-media-margin-end: 16px !default; +$list-item-media-margin-start: 16px !default; +$list-item-media-margin-top: 0 !default; +$list-item-media-two-line-margin-bottom: -4px !default; +$list-item-media-two-line-margin-top: -4px !default; +$list-item-media-three-line-margin-bottom: 0 !default; +$list-item-media-three-line-margin-top: 0 !default; + +$list-item-nav-margin-top: 4px !default; +$list-item-nav-title-font-size: .8125rem !default; +$list-item-nav-title-font-weight: 500 !default; +$list-item-nav-title-letter-spacing: normal !default; +$list-item-nav-title-line-height: 1rem !default; +$list-item-nav-subtitle-font-size: .75rem !default; +$list-item-nav-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default; +$list-item-nav-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default; +$list-item-nav-subtitle-line-height: 1rem !default; + +$list-item-subtitle-opacity: var(--v-list-item-subtitle-opacity, var(--v-medium-emphasis-opacity)) !default; +$list-item-subtitle-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default; +$list-item-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default; +$list-item-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default; +$list-item-subtitle-line-height: 1rem !default; +$list-item-subtitle-padding: 0 !default; +$list-item-subtitle-text-transform: none !default; +$list-item-subtitle-overflow-wrap: break-word !default; +$list-item-subtitle-word-break: initial !default; + +$list-item-title-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default; +$list-item-title-font-weight: tools.map-deep-get(settings.$typography, 'body-1', 'weight') !default; +$list-item-title-header-padding: 0 !default; +$list-item-title-hyphens: auto !default; +$list-item-title-letter-spacing: tools.map-deep-get(settings.$typography, 'subtitle-1', 'letter-spacing') !default; +$list-item-title-line-height: tools.map-deep-get(settings.$typography, 'body-1', 'line-height') !default; +$list-item-title-overflow-wrap: normal !default; +$list-item-title-padding: 0 !default; +$list-item-title-text-overflow: ellipsis !default; +$list-item-title-text-transform: none !default; +$list-item-title-word-break: normal !default; +$list-item-title-word-wrap: break-word !default; + +$list-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; + +$list-border: ( + $list-border-color, + $list-border-style, + $list-border-width, + $list-border-thin-width +) !default; + +$list-theme: ( + $list-background, + $list-color +) !default; + +$list-item-border: ( + $list-item-border-color, + $list-item-border-style, + $list-item-border-width, + $list-item-border-thin-width +) !default; + +$list-item-title-typography: ( + $list-item-title-font-size, + $list-item-title-font-weight, + $list-item-title-letter-spacing, + $list-item-title-line-height, + $list-item-title-text-transform +) !default; + +$list-item-subtitle-typography: ( + $list-item-subtitle-font-size, + $list-item-subtitle-font-weight, + $list-item-subtitle-letter-spacing, + $list-item-subtitle-line-height, + $list-item-subtitle-text-transform +) !default; + +$list-item-nav-title-typography: ( + $list-item-nav-title-font-size, + $list-item-nav-title-font-weight, + $list-item-nav-title-letter-spacing, + $list-item-nav-title-line-height, + null +) !default; + +$list-item-nav-subtitle-typography: ( + $list-item-nav-subtitle-font-size, + $list-item-nav-subtitle-font-weight, + $list-item-nav-subtitle-letter-spacing, + $list-item-nav-subtitle-line-height, + null +) !default; + +$list-item-variants: ( + $list-background, + $list-color, + $list-item-elevation, + $list-item-plain-opacity, + 'v-list-item' +) !default; diff --git a/packages/vuetify/src/components/VList/index.ts b/packages/vuetify/src/components/VList/index.ts new file mode 100644 index 0000000..f0a6415 --- /dev/null +++ b/packages/vuetify/src/components/VList/index.ts @@ -0,0 +1,9 @@ +export { VList } from './VList' +export { VListGroup } from './VListGroup' +export { VListImg } from './VListImg' +export { VListItem } from './VListItem' +export { VListItemAction } from './VListItemAction' +export { VListItemMedia } from './VListItemMedia' +export { VListItemSubtitle } from './VListItemSubtitle' +export { VListItemTitle } from './VListItemTitle' +export { VListSubheader } from './VListSubheader' diff --git a/packages/vuetify/src/components/VList/list.ts b/packages/vuetify/src/components/VList/list.ts new file mode 100644 index 0000000..7619d20 --- /dev/null +++ b/packages/vuetify/src/components/VList/list.ts @@ -0,0 +1,43 @@ +// Utilities +import { computed, inject, provide, shallowRef } from 'vue' + +// Types +import type { InjectionKey, Ref } from 'vue' + +// Depth +export const DepthKey: InjectionKey> = Symbol.for('vuetify:depth') + +export function useDepth (hasPrepend?: Ref) { + const parent = inject(DepthKey, shallowRef(-1)) + + const depth = computed(() => parent.value + 1 + (hasPrepend?.value ? 1 : 0)) + + provide(DepthKey, depth) + + return depth +} + +// List +export const ListKey: InjectionKey<{ + hasPrepend: Ref + updateHasPrepend: (value: boolean) => void +}> = Symbol.for('vuetify:list') + +export function createList () { + const parent = inject(ListKey, { hasPrepend: shallowRef(false), updateHasPrepend: () => null }) + + const data = { + hasPrepend: shallowRef(false), + updateHasPrepend: (value: boolean) => { + if (value) data.hasPrepend.value = value + }, + } + + provide(ListKey, data) + + return parent +} + +export function useList () { + return inject(ListKey, null) +} diff --git a/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.sass b/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.sass new file mode 100644 index 0000000..414d01d --- /dev/null +++ b/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.sass @@ -0,0 +1,5 @@ +@use '../../styles/tools' + +@include tools.layer('components') + .v-locale-provider + display: contents diff --git a/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.tsx b/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.tsx new file mode 100644 index 0000000..e65f818 --- /dev/null +++ b/packages/vuetify/src/components/VLocaleProvider/VLocaleProvider.tsx @@ -0,0 +1,48 @@ +// Styles +import './VLocaleProvider.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { provideLocale } from '@/composables/locale' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVLocaleProviderProps = propsFactory({ + locale: String, + fallbackLocale: String, + messages: Object, + rtl: { + type: Boolean, + default: undefined, + }, + + ...makeComponentProps(), +}, 'VLocaleProvider') + +export const VLocaleProvider = genericComponent()({ + name: 'VLocaleProvider', + + props: makeVLocaleProviderProps(), + + setup (props, { slots }) { + const { rtlClasses } = provideLocale(props) + + useRender(() => ( +
    + { slots.default?.() } +
    + )) + + return {} + }, +}) + +export type VLocaleProvider = InstanceType diff --git a/packages/vuetify/src/components/VLocaleProvider/index.ts b/packages/vuetify/src/components/VLocaleProvider/index.ts new file mode 100644 index 0000000..ccfed57 --- /dev/null +++ b/packages/vuetify/src/components/VLocaleProvider/index.ts @@ -0,0 +1 @@ +export { VLocaleProvider } from './VLocaleProvider' diff --git a/packages/vuetify/src/components/VMain/VMain.sass b/packages/vuetify/src/components/VMain/VMain.sass new file mode 100644 index 0000000..cff317d --- /dev/null +++ b/packages/vuetify/src/components/VMain/VMain.sass @@ -0,0 +1,28 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-main + flex: 1 0 auto + max-width: 100% + transition: $main-transition + padding-left: var(--v-layout-left) + padding-right: var(--v-layout-right) + padding-top: var(--v-layout-top) + padding-bottom: var(--v-layout-bottom) + + &__scroller + max-width: 100% + position: relative + + &--scrollable + display: flex + @include tools.absolute() + + & > .v-main__scroller + flex: 1 1 auto + overflow-y: auto + --v-layout-left: 0px + --v-layout-right: 0px + --v-layout-top: 0px + --v-layout-bottom: 0px diff --git a/packages/vuetify/src/components/VMain/VMain.tsx b/packages/vuetify/src/components/VMain/VMain.tsx new file mode 100644 index 0000000..b365cc6 --- /dev/null +++ b/packages/vuetify/src/components/VMain/VMain.tsx @@ -0,0 +1,61 @@ +// Styles +import './VMain.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { useLayout } from '@/composables/layout' +import { useSsrBoot } from '@/composables/ssrBoot' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVMainProps = propsFactory({ + scrollable: Boolean, + + ...makeComponentProps(), + ...makeDimensionProps(), + ...makeTagProps({ tag: 'main' }), +}, 'VMain') + +export const VMain = genericComponent()({ + name: 'VMain', + + props: makeVMainProps(), + + setup (props, { slots }) { + const { dimensionStyles } = useDimension(props) + const { mainStyles, layoutIsReady } = useLayout() + const { ssrBootStyles } = useSsrBoot() + + useRender(() => ( + + { props.scrollable + ? ( +
    + { slots.default?.() } +
    + ) + : slots.default?.() + } +     + )) + + return layoutIsReady + }, +}) + +export type VMain = InstanceType diff --git a/packages/vuetify/src/components/VMain/__tests__/VMain.spec.cy.tsx b/packages/vuetify/src/components/VMain/__tests__/VMain.spec.cy.tsx new file mode 100644 index 0000000..baa5cac --- /dev/null +++ b/packages/vuetify/src/components/VMain/__tests__/VMain.spec.cy.tsx @@ -0,0 +1,17 @@ +/// + +// Components +import { VMain } from '..' +import { VApp } from '@/components/VApp' + +describe('VAppBar', () => { + it('should allow custom height', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-main').should('have.prop', 'tagName').should('eq', 'DIV') + }) +}) diff --git a/packages/vuetify/src/components/VMain/_variables.scss b/packages/vuetify/src/components/VMain/_variables.scss new file mode 100644 index 0000000..61237e5 --- /dev/null +++ b/packages/vuetify/src/components/VMain/_variables.scss @@ -0,0 +1,4 @@ +@use '../../styles/settings'; + +// VMain +$main-transition: 0.2s settings.$standard-easing !default; diff --git a/packages/vuetify/src/components/VMain/index.ts b/packages/vuetify/src/components/VMain/index.ts new file mode 100644 index 0000000..8ffd39e --- /dev/null +++ b/packages/vuetify/src/components/VMain/index.ts @@ -0,0 +1 @@ +export { VMain } from './VMain' diff --git a/packages/vuetify/src/components/VMenu/VMenu.sass b/packages/vuetify/src/components/VMenu/VMenu.sass new file mode 100644 index 0000000..bb2776d --- /dev/null +++ b/packages/vuetify/src/components/VMenu/VMenu.sass @@ -0,0 +1,19 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-menu + > .v-overlay__content + display: flex + flex-direction: column + @include tools.rounded($menu-content-border-radius) + + > .v-card, + > .v-sheet, + > .v-list + background: rgb(var(--v-theme-surface)) + border-radius: inherit + overflow: auto + height: 100% + + @include tools.elevation($menu-elevation) diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx new file mode 100644 index 0000000..b21ae40 --- /dev/null +++ b/packages/vuetify/src/components/VMenu/VMenu.tsx @@ -0,0 +1,216 @@ +// Styles +import './VMenu.sass' + +// Components +import { VDialogTransition } from '@/components/transitions' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VOverlay } from '@/components/VOverlay' +import { makeVOverlayProps } from '@/components/VOverlay/VOverlay' + +// Composables +import { forwardRefs } from '@/composables/forwardRefs' +import { useProxiedModel } from '@/composables/proxiedModel' +import { useScopeId } from '@/composables/scopeId' + +// Utilities +import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, watch } from 'vue' +import { VMenuSymbol } from './shared' +import { + focusableChildren, + focusChild, + genericComponent, + getNextElement, + getUid, + isClickInsideElement, + omit, + propsFactory, + useRender, +} from '@/util' + +// Types +import type { Component } from 'vue' +import type { OverlaySlots } from '@/components/VOverlay/VOverlay' + +export const makeVMenuProps = propsFactory({ + // TODO + // disableKeys: Boolean, + id: String, + + ...omit(makeVOverlayProps({ + closeDelay: 250, + closeOnContentClick: true, + locationStrategy: 'connected' as const, + openDelay: 300, + scrim: false, + scrollStrategy: 'reposition' as const, + transition: { component: VDialogTransition as Component }, + }), ['absolute']), +}, 'VMenu') + +export const VMenu = genericComponent()({ + name: 'VMenu', + + props: makeVMenuProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { slots }) { + const isActive = useProxiedModel(props, 'modelValue') + const { scopeId } = useScopeId() + + const uid = getUid() + const id = computed(() => props.id || `v-menu-${uid}`) + + const overlay = ref() + + const parent = inject(VMenuSymbol, null) + const openChildren = shallowRef(0) + provide(VMenuSymbol, { + register () { + ++openChildren.value + }, + unregister () { + --openChildren.value + }, + closeParents (e) { + setTimeout(() => { + if (!openChildren.value && + !props.persistent && + (e == null || (e && !isClickInsideElement(e, overlay.value!.contentEl!))) + ) { + isActive.value = false + parent?.closeParents() + } + }, 40) + }, + }) + + async function onFocusIn (e: FocusEvent) { + const before = e.relatedTarget as HTMLElement | null + const after = e.target as HTMLElement | null + + await nextTick() + + if ( + isActive.value && + before !== after && + overlay.value?.contentEl && + // We're the topmost menu + overlay.value?.globalTop && + // It isn't the document or the menu body + ![document, overlay.value.contentEl].includes(after!) && + // It isn't inside the menu body + !overlay.value.contentEl.contains(after) + ) { + const focusable = focusableChildren(overlay.value.contentEl) + focusable[0]?.focus() + } + } + + watch(isActive, val => { + if (val) { + parent?.register() + document.addEventListener('focusin', onFocusIn, { once: true }) + } else { + parent?.unregister() + document.removeEventListener('focusin', onFocusIn) + } + }) + + function onClickOutside (e: MouseEvent) { + parent?.closeParents(e) + } + + function onKeydown (e: KeyboardEvent) { + if (props.disabled) return + + if (e.key === 'Tab' || (e.key === 'Enter' && !props.closeOnContentClick)) { + if ( + e.key === 'Enter' && + ((e.target instanceof HTMLTextAreaElement) || + (e.target instanceof HTMLInputElement && !!e.target.closest('form'))) + ) return + if (e.key === 'Enter') e.preventDefault() + + const nextElement = getNextElement( + focusableChildren(overlay.value?.contentEl as Element, false), + e.shiftKey ? 'prev' : 'next', + (el: HTMLElement) => el.tabIndex >= 0 + ) + if (!nextElement) { + isActive.value = false + overlay.value?.activatorEl?.focus() + } + } else if (['Enter', ' '].includes(e.key) && props.closeOnContentClick) { + isActive.value = false + parent?.closeParents() + } + } + + function onActivatorKeydown (e: KeyboardEvent) { + if (props.disabled) return + + const el = overlay.value?.contentEl + if (el && isActive.value) { + if (e.key === 'ArrowDown') { + e.preventDefault() + focusChild(el, 'next') + } else if (e.key === 'ArrowUp') { + e.preventDefault() + focusChild(el, 'prev') + } + } else if (['ArrowDown', 'ArrowUp'].includes(e.key)) { + isActive.value = true + e.preventDefault() + setTimeout(() => setTimeout(() => onActivatorKeydown(e))) + } + } + + const activatorProps = computed(() => + mergeProps({ + 'aria-haspopup': 'menu', + 'aria-expanded': String(isActive.value), + 'aria-owns': id.value, + onKeydown: onActivatorKeydown, + }, props.activatorProps) + ) + + useRender(() => { + const overlayProps = VOverlay.filterProps(props) + + return ( + + {{ + activator: slots.activator, + default: (...args) => ( + + { slots.default?.(...args) } + + ), + }} + + ) + }) + + return forwardRefs({ id, ΨopenChildren: openChildren }, overlay) + }, +}) + +export type VMenu = InstanceType diff --git a/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.ts b/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.ts new file mode 100644 index 0000000..cbf97c8 --- /dev/null +++ b/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.ts @@ -0,0 +1,297 @@ +// @ts-nocheck +/* eslint-disable */ + +// Components +// import VMenu from '../VMenu' +// import VCard from '../../VCard/VCard' +// import VListItem from '../../VList/VListItem' + +// Utilities +import { + mount, + Wrapper, +} from '@vue/test-utils' +// import { keyCodes } from '../../../util/helpers' +// import { waitAnimationFrame } from '../../../../test' + +describe.skip('VMenu.ts', () => { + type Instance = InstanceType + let mountFunction: (options?: object) => Wrapper + + beforeEach(() => { + mountFunction = (options = {}) => { + return mount(VMenu, { + // https://github.com/vuejs/vue-test-utils/issues/1130 + sync: false, + ...options, + mocks: { + $vuetify: { + theme: {}, + }, + }, + }) + } + }) + + it('should work', async () => { + const wrapper = mountFunction({ + propsData: { + value: false, + eager: true, + }, + scopedSlots: { + activator: '', + }, + slots: { + default: [VCard], + }, + }) + + const activator = wrapper.find('button') + const input = jest.fn() + wrapper.vm.$on('input', input) + activator.trigger('click') + + await wrapper.vm.$nextTick() + + expect(input).toHaveBeenCalledWith(true) + expect(wrapper.html()).toMatchSnapshot() + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should render multiple content nodes', async () => { + const wrapper = mountFunction({ + propsData: { + eager: true, + }, + scopedSlots: { + activator: '', + }, + slots: { + default: 'foobar', + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should round dimensions', async () => { + const wrapper = mountFunction({ + propsData: { + value: false, + eager: true, + }, + scopedSlots: { + activator: '', + }, + slots: { + default: '', + }, + }) + + const content = wrapper.find('.v-menu__content') + + const getBoundingClientRect = () => { + return { + width: 100.5, + height: 100.25, + top: 0.75, + left: 50.123, + right: 75.987, + bottom: 4, + x: 0, + y: 0, + } + } + + wrapper.find('button').element.getBoundingClientRect = getBoundingClientRect + wrapper.vm.$refs.content.getBoundingClientRect = getBoundingClientRect + + wrapper.setProps({ value: true }) + + await waitAnimationFrame() + + expect(content.attributes('style')).toMatchSnapshot() + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should not attach event handlers to the activator container if disabled', async () => { + const wrapper = mountFunction({ + propsData: { + disabled: true, + }, + scopedSlots: { + activator: '', + }, + }) + + const activator = wrapper.find('button') + activator.trigger('click') + + expect(wrapper.vm.isActive).toBe(false) + }) + + it('should show the menu on mounted', () => { + const activate = jest.fn() + mountFunction({ + methods: { activate }, + }) + + expect(activate).not.toHaveBeenCalled() + + mountFunction({ + propsData: { value: true }, + methods: { activate }, + }) + expect(activate).toHaveBeenCalled() + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should update position dynamically', async () => { + const wrapper = mountFunction({ + propsData: { + absolute: true, + value: true, + positionX: 100, + positionY: 200, + }, + }) + + const content = wrapper.findAll('.v-menu__content').at(0) + + // TODO replace with jest fakeTimers when it will support requestAnimationFrame: https://github.com/facebook/jest/pull/7776 + // See https://github.com/vuetifyjs/vuetify/pull/6330#issuecomment-460083547 for details + expect(content.attributes('style')).toMatchSnapshot() + + wrapper.setProps({ + positionX: 110, + positionY: 220, + }) + expect(content.attributes('style')).toMatchSnapshot() + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should select next and previous tiles and skip non links/disabled', () => { + const wrapper = mountFunction({ + propsData: { eager: true }, + scopedSlots: { + default () { + return this.$createElement('div', [ + this.$createElement(VListItem, { props: { link: true } }), + this.$createElement(VListItem, { props: { link: true } }), + this.$createElement(VListItem), + this.$createElement(VListItem, { props: { link: true } }), + ]) + }, + }, + }) + + wrapper.vm.getTiles() + + expect(wrapper.vm.listIndex).toBe(-1) + + wrapper.vm.nextTile() + expect(wrapper.vm.listIndex).toBe(0) + + wrapper.vm.nextTile() + expect(wrapper.vm.listIndex).toBe(1) + + wrapper.vm.nextTile() + expect(wrapper.vm.listIndex).toBe(3) + + wrapper.vm.nextTile() + expect(wrapper.vm.listIndex).toBe(0) + + wrapper.vm.prevTile() + expect(wrapper.vm.listIndex).toBe(3) + + wrapper.vm.prevTile() + expect(wrapper.vm.listIndex).toBe(1) + + wrapper.vm.prevTile() + expect(wrapper.vm.listIndex).toBe(0) + + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should accept a custom role or use default', () => { + expect(mountFunction({ + propsData: { eager: true }, + }).vm.$refs.content.getAttribute('role')).toBe('menu') + expect(mountFunction({ + propsData: { eager: true }, + attrs: { role: 'listbox' }, + }).vm.$refs.content.getAttribute('role')).toBe('listbox') + + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should select first or last item when opening menu with up or down key', async () => { + const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode }) + const wrapper = mountFunction({ + propsData: { eager: true }, + scopedSlots: { + default () { + return this.$createElement('div', [ + this.$createElement(VListItem, { props: { link: true } }), + this.$createElement(VListItem, { props: { link: true } }), + this.$createElement(VListItem, { props: { link: true } }), + this.$createElement(VListItem, { props: { link: true } }), + ]) + }, + }, + }) + + wrapper.vm.onKeyDown(event(keyCodes.up)) + expect(wrapper.vm.isActive).toBe(true) + + await wrapper.vm.$nextTick() + + expect(wrapper.vm.listIndex).toBe(3) + + wrapper.setData({ isActive: false }) + + wrapper.vm.onKeyDown(event(keyCodes.down)) + expect(wrapper.vm.isActive).toBe(true) + + await wrapper.vm.$nextTick() + + expect(wrapper.vm.listIndex).toBe(0) + + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) + + it('should select first or last item when pressing home or end on active menu', async () => { + const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode }) + const wrapper = mountFunction({ + propsData: { eager: true }, + scopedSlots: { + default () { + return this.$createElement('div', [ + this.$createElement(VListItem), + this.$createElement(VListItem, { props: { link: true } }), + this.$createElement(VListItem, { props: { link: true } }), + this.$createElement(VListItem, { props: { link: true } }), + ]) + }, + }, + }) + + wrapper.setData({ isActive: true }) + + wrapper.vm.onKeyDown(event(keyCodes.end)) + + await wrapper.vm.$nextTick() + + expect(wrapper.vm.listIndex).toBe(3) + + wrapper.vm.onKeyDown(event(keyCodes.home)) + + await wrapper.vm.$nextTick() + + expect(wrapper.vm.listIndex).toBe(1) + + expect('Unable to locate target [data-app]').toHaveBeenTipped() + }) +}) diff --git a/packages/vuetify/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap b/packages/vuetify/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap new file mode 100644 index 0000000..e37be2b --- /dev/null +++ b/packages/vuetify/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VMenu.ts should render multiple content nodes 1`] = ` +
    + + +
    +`; + +exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"`; + +exports[`VMenu.ts should update position dynamically 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`; + +exports[`VMenu.ts should update position dynamically 2`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`; + +exports[`VMenu.ts should work 1`] = ` +
    + + +
    +`; diff --git a/packages/vuetify/src/components/VMenu/_variables.scss b/packages/vuetify/src/components/VMenu/_variables.scss new file mode 100644 index 0000000..370a35e --- /dev/null +++ b/packages/vuetify/src/components/VMenu/_variables.scss @@ -0,0 +1,4 @@ +@use '../../styles/settings'; + +$menu-elevation: 8 !default; +$menu-content-border-radius: settings.$border-radius-root !default; diff --git a/packages/vuetify/src/components/VMenu/index.ts b/packages/vuetify/src/components/VMenu/index.ts new file mode 100644 index 0000000..b590274 --- /dev/null +++ b/packages/vuetify/src/components/VMenu/index.ts @@ -0,0 +1 @@ +export { VMenu } from './VMenu' diff --git a/packages/vuetify/src/components/VMenu/shared.ts b/packages/vuetify/src/components/VMenu/shared.ts new file mode 100644 index 0000000..c23b276 --- /dev/null +++ b/packages/vuetify/src/components/VMenu/shared.ts @@ -0,0 +1,10 @@ +// Types +import type { InjectionKey } from 'vue' + +interface MenuProvide { + register (): void + unregister (): void + closeParents (e?: MouseEvent): void +} + +export const VMenuSymbol: InjectionKey = Symbol.for('vuetify:v-menu') diff --git a/packages/vuetify/src/components/VMessages/VMessages.sass b/packages/vuetify/src/components/VMessages/VMessages.sass new file mode 100644 index 0000000..b1ab3c0 --- /dev/null +++ b/packages/vuetify/src/components/VMessages/VMessages.sass @@ -0,0 +1,20 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-messages + flex: 1 1 auto + font-size: $messages-font-size + min-height: $messages-min-height + min-width: 1px // Ensure takes up space with no messages and inside of flex + opacity: var(--v-medium-emphasis-opacity) + position: relative + + &__message + line-height: $messages-line-height + word-break: break-word + overflow-wrap: break-word + word-wrap: break-word + hyphens: auto + transition-duration: $messages-transition-duration diff --git a/packages/vuetify/src/components/VMessages/VMessages.tsx b/packages/vuetify/src/components/VMessages/VMessages.tsx new file mode 100644 index 0000000..0d062f5 --- /dev/null +++ b/packages/vuetify/src/components/VMessages/VMessages.tsx @@ -0,0 +1,87 @@ +// Styles +import './VMessages.sass' + +// Components +import { VSlideYTransition } from '@/components/transitions' + +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory, useRender, wrapInArray } from '@/util' + +// Types +import type { Component, PropType } from 'vue' + +export type VMessageSlot = { + message: string +} + +export type VMessagesSlots = { + message: VMessageSlot +} + +export const makeVMessagesProps = propsFactory({ + active: Boolean, + color: String, + messages: { + type: [Array, String] as PropType, + default: () => ([]), + }, + + ...makeComponentProps(), + ...makeTransitionProps({ + transition: { + component: VSlideYTransition as Component, + leaveAbsolute: true, + group: true, + }, + }), +}, 'VMessages') + +export const VMessages = genericComponent()({ + name: 'VMessages', + + props: makeVMessagesProps(), + + setup (props, { slots }) { + const messages = computed(() => wrapInArray(props.messages)) + const { textColorClasses, textColorStyles } = useTextColor(computed(() => props.color)) + + useRender(() => ( + + { props.active && ( + messages.value.map((message, i) => ( +
    + { slots.message ? slots.message({ message }) : message } +
    + )) + )} +     + )) + + return {} + }, +}) + +export type VMessages = InstanceType diff --git a/packages/vuetify/src/components/VMessages/_variables.scss b/packages/vuetify/src/components/VMessages/_variables.scss new file mode 100644 index 0000000..84f1264 --- /dev/null +++ b/packages/vuetify/src/components/VMessages/_variables.scss @@ -0,0 +1,6 @@ +// VMessages +$messages-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$messages-font-size: 12px !default; +$messages-line-height: $messages-font-size !default; +$messages-min-height: 14px !default; +$messages-transition-duration: 150ms !default; diff --git a/packages/vuetify/src/components/VMessages/index.ts b/packages/vuetify/src/components/VMessages/index.ts new file mode 100644 index 0000000..4f1a695 --- /dev/null +++ b/packages/vuetify/src/components/VMessages/index.ts @@ -0,0 +1 @@ +export { VMessages } from './VMessages' diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass new file mode 100644 index 0000000..e6c0cd7 --- /dev/null +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.sass @@ -0,0 +1,99 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-navigation-drawer + -webkit-overflow-scrolling: $navigation-drawer-overflow-scrolling + background: $navigation-drawer-background + display: flex + flex-direction: column + height: $navigation-drawer-height + max-width: 100% + pointer-events: auto + transition-duration: $navigation-drawer-transition-duration + transition-property: $navigation-drawer-transition-property + transition-timing-function: $navigation-drawer-transition-timing-function + position: absolute + + @include tools.border($navigation-drawer-border...) + @include tools.elevation($navigation-drawer-elevation) + @include tools.rounded($navigation-drawer-border-radius) + @include tools.theme($navigation-drawer-theme...) + + &--rounded + @include tools.rounded($navigation-drawer-rounded-border-radius) + + &--top, + &--bottom + max-height: -webkit-fill-available + overflow-y: auto + + &--top + top: 0 + border-bottom-width: $navigation-drawer-border-thin-width + + &--bottom + left: 0 + border-top-width: $navigation-drawer-border-thin-width + + &--left + top: 0 + left: 0 + right: auto + border-right-width: $navigation-drawer-border-thin-width + + &--right + top: 0 + left: auto + right: 0 + border-left-width: $navigation-drawer-border-thin-width + + &--floating + border: none + + &--temporary.v-navigation-drawer--active + @include tools.elevation($navigation-drawer-temporary-elevation) + + &--sticky + height: auto + transition: box-shadow, transform, visibility, width, height, left, right + + .v-list + overflow: hidden + + .v-navigation-drawer__content + flex: 0 1 auto + height: $navigation-drawer-content-height + max-width: 100% + overflow-x: $navigation-drawer-content-overflow-x + overflow-y: $navigation-drawer-content-overflow-y + + .v-navigation-drawer__img + height: 100% + left: 0 + position: absolute + top: 0 + width: 100% + z-index: -1 + + // TODO: remove in v4 + img:not(.v-img__img) + height: $navigation-drawer-img-height + object-fit: $navigation-drawer-img-object-fit + width: $navigation-drawer-img-width + + .v-navigation-drawer__scrim + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + background: black + opacity: $navigation-drawer-scrim-opacity + transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function + z-index: 1 + + .v-navigation-drawer__prepend, + .v-navigation-drawer__append + flex: none + overflow: hidden diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx new file mode 100644 index 0000000..ef077b7 --- /dev/null +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx @@ -0,0 +1,321 @@ +// Styles +import './VNavigationDrawer.sass' + +// Components +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VImg } from '@/components/VImg' + +// Composables +import { useSticky } from './sticky' +import { useTouch } from './touch' +import { useRtl } from '@/composables' +import { makeBorderProps, useBorder } from '@/composables/border' +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDelayProps, useDelay } from '@/composables/delay' +import { makeDisplayProps, useDisplay } from '@/composables/display' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { useRouter } from '@/composables/router' +import { useScopeId } from '@/composables/scopeId' +import { useSsrBoot } from '@/composables/ssrBoot' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { useToggleScope } from '@/composables/toggleScope' + +// Utilities +import { computed, nextTick, ref, shallowRef, toRef, Transition, watch } from 'vue' +import { genericComponent, propsFactory, toPhysical, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export type VNavigationDrawerImageSlot = { + image: string | undefined +} + +export type VNavigationDrawerSlots = { + default: never + prepend: never + append: never + image: VNavigationDrawerImageSlot +} + +const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const + +export const makeVNavigationDrawerProps = propsFactory({ + color: String, + disableResizeWatcher: Boolean, + disableRouteWatcher: Boolean, + expandOnHover: Boolean, + floating: Boolean, + modelValue: { + type: Boolean as PropType, + default: null, + }, + permanent: Boolean, + rail: { + type: Boolean as PropType, + default: null, + }, + railWidth: { + type: [Number, String], + default: 56, + }, + scrim: { + type: [Boolean, String], + default: true, + }, + image: String, + temporary: Boolean, + persistent: Boolean, + touchless: Boolean, + width: { + type: [Number, String], + default: 256, + }, + location: { + type: String as PropType, + default: 'start', + validator: (value: any) => locations.includes(value), + }, + sticky: Boolean, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDelayProps(), + ...makeDisplayProps({ mobile: null }), + ...makeElevationProps(), + ...makeLayoutItemProps(), + ...makeRoundedProps(), + ...makeTagProps({ tag: 'nav' }), + ...makeThemeProps(), +}, 'VNavigationDrawer') + +export const VNavigationDrawer = genericComponent()({ + name: 'VNavigationDrawer', + + props: makeVNavigationDrawerProps(), + + emits: { + 'update:modelValue': (val: boolean) => true, + 'update:rail': (val: boolean) => true, + }, + + setup (props, { attrs, emit, slots }) { + const { isRtl } = useRtl() + const { themeClasses } = provideTheme(props) + const { borderClasses } = useBorder(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')) + const { elevationClasses } = useElevation(props) + const { displayClasses, mobile } = useDisplay(props) + const { roundedClasses } = useRounded(props) + const router = useRouter() + const isActive = useProxiedModel(props, 'modelValue', null, v => !!v) + const { ssrBootStyles } = useSsrBoot() + const { scopeId } = useScopeId() + + const rootEl = ref() + const isHovering = shallowRef(false) + + const { runOpenDelay, runCloseDelay } = useDelay(props, value => { + isHovering.value = value + }) + + const width = computed(() => { + return (props.rail && props.expandOnHover && isHovering.value) + ? Number(props.width) + : Number(props.rail ? props.railWidth : props.width) + }) + const location = computed(() => { + return toPhysical(props.location, isRtl.value) as 'left' | 'right' | 'bottom' + }) + const isPersistent = computed(() => props.persistent) + const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary)) + const isSticky = computed(() => + props.sticky && + !isTemporary.value && + location.value !== 'bottom' + ) + + useToggleScope(() => props.expandOnHover && props.rail != null, () => { + watch(isHovering, val => emit('update:rail', !val)) + }) + + useToggleScope(() => !props.disableResizeWatcher, () => { + watch(isTemporary, val => !props.permanent && (nextTick(() => isActive.value = !val))) + }) + + useToggleScope(() => !props.disableRouteWatcher && !!router, () => { + watch(router!.currentRoute, () => isTemporary.value && (isActive.value = false)) + }) + + watch(() => props.permanent, val => { + if (val) isActive.value = true + }) + + if (props.modelValue == null && !isTemporary.value) { + isActive.value = props.permanent || !mobile.value + } + + const { isDragging, dragProgress } = useTouch({ + el: rootEl, + isActive, + isTemporary, + width, + touchless: toRef(props, 'touchless'), + position: location, + }) + + const layoutSize = computed(() => { + const size = isTemporary.value ? 0 + : props.rail && props.expandOnHover ? Number(props.railWidth) + : width.value + + return isDragging.value ? size * dragProgress.value : size + }) + const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value) + const { layoutItemStyles, layoutItemScrimStyles, layoutIsReady } = useLayoutItem({ + id: props.name, + order: computed(() => parseInt(props.order, 10)), + position: location, + layoutSize, + elementSize, + active: computed(() => isActive.value || isDragging.value), + disableTransitions: computed(() => isDragging.value), + absolute: computed(() => + // eslint-disable-next-line @typescript-eslint/no-use-before-define + props.absolute || (isSticky.value && typeof isStuck.value !== 'string') + ), + }) + + const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles }) + + const scrimColor = useBackgroundColor(computed(() => { + return typeof props.scrim === 'string' ? props.scrim : null + })) + const scrimStyles = computed(() => ({ + ...isDragging.value ? { + opacity: dragProgress.value * 0.2, + transition: 'none', + } : undefined, + ...layoutItemScrimStyles.value, + })) + + provideDefaults({ + VList: { + bgColor: 'transparent', + }, + }) + + useRender(() => { + const hasImage = (slots.image || props.image) + + return ( + <> + + { hasImage && ( +
    + { !slots.image ? ( + + ) : ( + + )} +
    + )} + + { slots.prepend && ( +
    + { slots.prepend?.() } +
    + )} + +
    + { slots.default?.() } +
    + + { slots.append && ( +
    + { slots.append?.() } +
    + )} +     + + + { isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && ( +
    { + if (isPersistent.value) return + isActive.value = false + }} + { ...scopeId } + /> + )} + + + ) + }) + + return layoutIsReady.then(() => ({ isStuck })) + }, +}) + +export type VNavigationDrawer = InstanceType diff --git a/packages/vuetify/src/components/VNavigationDrawer/__tests__/VNavigationDrawer.spec.cy.tsx b/packages/vuetify/src/components/VNavigationDrawer/__tests__/VNavigationDrawer.spec.cy.tsx new file mode 100644 index 0000000..b4e473f --- /dev/null +++ b/packages/vuetify/src/components/VNavigationDrawer/__tests__/VNavigationDrawer.spec.cy.tsx @@ -0,0 +1,179 @@ +/// + +// Components +import { VNavigationDrawer } from '..' +import { VLayout } from '@/components/VLayout' +import { VLocaleProvider } from '@/components/VLocaleProvider' +import { VMain } from '@/components/VMain' + +// Utilities +import { ref } from 'vue' + +describe('VNavigationDrawer', () => { + beforeEach(() => { + cy.viewport(1280, 768) + }) + + it('should open when changed to permanent on mobile', () => { + cy.viewport(400, 800) + .mount(({ permanent }: any) => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--temporary') + .setProps({ permanent: true }) + .get('.v-navigation-drawer').should('not.have.class', 'v-navigation-drawer--temporary') + }) + + it('should change width when using rail, expandOnHover, and hovering', () => { + cy.mount((props: any) => ( + + + + )) + + cy.setProps({ rail: true, expandOnHover: true }) + .get('.v-navigation-drawer').should('have.css', 'width', '56px') + .get('.v-navigation-drawer').trigger('mouseenter') + .get('.v-navigation-drawer').should('have.css', 'width', '256px') + .get('.v-navigation-drawer').trigger('mouseleave') + .get('.v-navigation-drawer').should('have.css', 'width', '56px') + }) + + it('should change width when using bound and unbound rail and expandOnHover', () => { + const rail = ref(true) + + cy.mount(() => ( + + + + + + )) + + cy.get('.v-navigation-drawer').should('have.css', 'width', '56px') + .get('.v-main').should('have.css', 'padding-left', '56px') + .get('.v-navigation-drawer').trigger('mouseenter') + .get('.v-navigation-drawer').should('have.css', 'width', '256px') + .get('.v-main').should('have.css', 'padding-left', '256px') + .get('.v-navigation-drawer').trigger('mouseleave') + .get('.v-navigation-drawer').should('have.css', 'width', '56px') + .get('.v-main').should('have.css', 'padding-left', '56px') + }) + + it('should hide drawer if window resizes below mobile breakpoint', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--active') + .viewport(400, 800) + .get('.v-navigation-drawer').should('not.have.class', 'v-navigation-drawer--active') + }) + + it('should not hide drawer if window resizes below mobile breakpoint and disable-resize-watcher is used', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--active') + .viewport(400, 800) + .get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--active') + }) + + it('should always show drawer if using permanent', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--active') + .viewport(400, 800) + .get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--active') + .get('.v-navigation-drawer').should('not.have.class', 'v-navigation-drawer--temporary') + }) + + it('should show temporary drawer', () => { + cy.mount(props => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--temporary') + .get('.v-navigation-drawer').should('not.have.class', 'v-navigation-drawer--active') + .setProps({ modelValue: true }) + .get('.v-navigation-drawer').should('have.class', 'v-navigation-drawer--active') + }) + + it('should allow custom widths', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.css', 'width', '300px') + }) + + it('should position drawer on the opposite side', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.css', 'right', '0px') + }) + + it('should position drawer on the bottom', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-navigation-drawer').should('have.css', 'bottom', '0px') + }) + + it('should position drawer scrim correctly', () => { + const visible = ref(false) + cy.mount((props: any) => ( + + + + )) + cy.get('.v-navigation-drawer__scrim').should('not.exist') + .then(() => { + visible.value = true + }) + .get('.v-navigation-drawer__scrim').should('be.visible') + .get('.v-navigation-drawer__scrim').should('have.css', 'top', '0px') + .get('.v-navigation-drawer__scrim').should('have.css', 'left', '0px') + }) + + it('should position drawer scrim correctly in rtl locale', () => { + const visible = ref(false) + cy.mount(() => ( + + + + + + )) + .get('.v-navigation-drawer__scrim').should('not.exist') + .then(() => { + visible.value = true + }) + .get('.v-navigation-drawer__scrim').should('be.visible') + .get('.v-navigation-drawer__scrim').should('have.css', 'top', '0px') + .get('.v-navigation-drawer__scrim').should('have.css', 'left', '0px') + }) +}) diff --git a/packages/vuetify/src/components/VNavigationDrawer/_variables.scss b/packages/vuetify/src/components/VNavigationDrawer/_variables.scss new file mode 100644 index 0000000..db41a0c --- /dev/null +++ b/packages/vuetify/src/components/VNavigationDrawer/_variables.scss @@ -0,0 +1,39 @@ +@use 'sass:map'; +@use '../../styles/settings'; + +// VNavigationDrawer +$navigation-drawer-background: rgb(var(--v-theme-surface)) !default; +$navigation-drawer-border-color: settings.$border-color-root !default; +$navigation-drawer-border-radius: map.get(settings.$rounded, '0') !default; +$navigation-drawer-border-style: settings.$border-style-root !default; +$navigation-drawer-border-thin-width: thin !default; +$navigation-drawer-border-width: 0 !default; +$navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$navigation-drawer-content-height: 100% !default; +$navigation-drawer-content-overflow-x: hidden !default; +$navigation-drawer-content-overflow-y: auto !default; +$navigation-drawer-elevation: 0 !default; +$navigation-drawer-height: 100% !default; +$navigation-drawer-img-height: inherit !default; +$navigation-drawer-img-object-fit: cover !default; +$navigation-drawer-img-width: inherit !default; +$navigation-drawer-overflow-scrolling: touch !default; +$navigation-drawer-rounded-border-radius: settings.$border-radius-root !default; +$navigation-drawer-temporary-elevation: 16 !default; +$navigation-drawer-transition-duration: 0.2s !default; +$navigation-drawer-transition-property: box-shadow, transform, visibility, width, height, left, right, top, bottom !default; +$navigation-drawer-transition-timing-function: settings.$standard-easing !default; +$navigation-drawer-scrim-opacity: .2 !default; + +// Lists +$navigation-drawer-border: ( + $navigation-drawer-border-color, + $navigation-drawer-border-style, + $navigation-drawer-border-width, + $navigation-drawer-border-thin-width +) !default; + +$navigation-drawer-theme: ( + $navigation-drawer-background, + $navigation-drawer-color +) !default; diff --git a/packages/vuetify/src/components/VNavigationDrawer/index.ts b/packages/vuetify/src/components/VNavigationDrawer/index.ts new file mode 100644 index 0000000..3197696 --- /dev/null +++ b/packages/vuetify/src/components/VNavigationDrawer/index.ts @@ -0,0 +1 @@ +export { VNavigationDrawer } from './VNavigationDrawer' diff --git a/packages/vuetify/src/components/VNavigationDrawer/sticky.ts b/packages/vuetify/src/components/VNavigationDrawer/sticky.ts new file mode 100644 index 0000000..df5ec59 --- /dev/null +++ b/packages/vuetify/src/components/VNavigationDrawer/sticky.ts @@ -0,0 +1,81 @@ +// Utilities +import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue' +import { convertToUnit } from '@/util' + +// Types +import type { CSSProperties, Ref } from 'vue' + +interface StickyProps { + rootEl: Ref + isSticky: Ref + layoutItemStyles: Ref +} + +export function useSticky ({ rootEl, isSticky, layoutItemStyles }: StickyProps) { + const isStuck = shallowRef(false) + const stuckPosition = shallowRef(0) + + const stickyStyles = computed(() => { + const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value + return [ + isSticky.value ? { top: 'auto', bottom: 'auto', height: undefined } : undefined, + isStuck.value + ? { [side]: convertToUnit(stuckPosition.value) } + : { top: layoutItemStyles.value.top }, + ] + }) + + onMounted(() => { + watch(isSticky, val => { + if (val) { + window.addEventListener('scroll', onScroll, { passive: true }) + } else { + window.removeEventListener('scroll', onScroll) + } + }, { immediate: true }) + }) + + onBeforeUnmount(() => { + window.removeEventListener('scroll', onScroll) + }) + + let lastScrollTop = 0 + function onScroll () { + const direction = lastScrollTop > window.scrollY ? 'up' : 'down' + const rect = rootEl.value!.getBoundingClientRect() + const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0) + const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop) + const bottom = + rect.height + + Math.max(stuckPosition.value, layoutTop) - + window.scrollY - + window.innerHeight + const bodyScroll = parseFloat(getComputedStyle(rootEl.value!).getPropertyValue('--v-body-scroll-y')) || 0 + + if (rect.height < window.innerHeight - layoutTop) { + isStuck.value = 'top' + stuckPosition.value = layoutTop + } else if ( + (direction === 'up' && isStuck.value === 'bottom') || + (direction === 'down' && isStuck.value === 'top') + ) { + stuckPosition.value = window.scrollY + rect.top - bodyScroll + isStuck.value = true + } else if (direction === 'down' && bottom <= 0) { + stuckPosition.value = 0 + isStuck.value = 'bottom' + } else if (direction === 'up' && top <= 0) { + if (!bodyScroll) { + stuckPosition.value = rect.top + top + isStuck.value = 'top' + } else if (isStuck.value !== 'top') { + stuckPosition.value = -top + bodyScroll + layoutTop + isStuck.value = 'top' + } + } + + lastScrollTop = window.scrollY + } + + return { isStuck, stickyStyles } +} diff --git a/packages/vuetify/src/components/VNavigationDrawer/touch.ts b/packages/vuetify/src/components/VNavigationDrawer/touch.ts new file mode 100644 index 0000000..f7f2a4e --- /dev/null +++ b/packages/vuetify/src/components/VNavigationDrawer/touch.ts @@ -0,0 +1,210 @@ +// Composables +import { useToggleScope } from '@/composables/toggleScope' +import { useVelocity } from '@/composables/touch' + +// Utilities +import { computed, onBeforeUnmount, onMounted, onScopeDispose, shallowRef, watchEffect } from 'vue' + +// Types +import type { Ref } from 'vue' + +export function useTouch ({ + el, + isActive, + isTemporary, + width, + touchless, + position, +}: { + el: Ref + isActive: Ref + isTemporary: Ref + width: Ref + touchless: Ref + position: Ref<'left' | 'right' | 'top' | 'bottom'> +}) { + onMounted(() => { + window.addEventListener('touchstart', onTouchstart, { passive: true }) + window.addEventListener('touchmove', onTouchmove, { passive: false }) + window.addEventListener('touchend', onTouchend, { passive: true }) + }) + + onBeforeUnmount(() => { + window.removeEventListener('touchstart', onTouchstart) + window.removeEventListener('touchmove', onTouchmove) + window.removeEventListener('touchend', onTouchend) + }) + + const isHorizontal = computed(() => ['left', 'right'].includes(position.value)) + + const { addMovement, endTouch, getVelocity } = useVelocity() + let maybeDragging = false + const isDragging = shallowRef(false) + const dragProgress = shallowRef(0) + const offset = shallowRef(0) + let start: [number, number] | undefined + + function getOffset (pos: number, active: boolean): number { + return ( + position.value === 'left' ? pos + : position.value === 'right' ? document.documentElement.clientWidth - pos + : position.value === 'top' ? pos + : position.value === 'bottom' ? document.documentElement.clientHeight - pos + : oops() + ) - (active ? width.value : 0) + } + + function getProgress (pos: number, limit = true): number { + const progress = ( + position.value === 'left' ? (pos - offset.value) / width.value + : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value + : position.value === 'top' ? (pos - offset.value) / width.value + : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value + : oops() + ) + return limit ? Math.max(0, Math.min(1, progress)) : progress + } + + function onTouchstart (e: TouchEvent) { + if (touchless.value) return + + const touchX = e.changedTouches[0].clientX + const touchY = e.changedTouches[0].clientY + + const touchZone = 25 + const inTouchZone: boolean = + position.value === 'left' ? touchX < touchZone + : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone + : position.value === 'top' ? touchY < touchZone + : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone + : oops() + + const inElement: boolean = isActive.value && ( + position.value === 'left' ? touchX < width.value + : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value + : position.value === 'top' ? touchY < width.value + : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value + : oops() + ) + + if ( + inTouchZone || + inElement || + (isActive.value && isTemporary.value) + ) { + start = [touchX, touchY] + + offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value) + dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY) + + maybeDragging = offset.value > -20 && offset.value < 80 + endTouch(e) + addMovement(e) + } + } + + function onTouchmove (e: TouchEvent) { + const touchX = e.changedTouches[0].clientX + const touchY = e.changedTouches[0].clientY + + if (maybeDragging) { + if (!e.cancelable) { + maybeDragging = false + return + } + + const dx = Math.abs(touchX - start![0]) + const dy = Math.abs(touchY - start![1]) + + const thresholdMet = isHorizontal.value + ? dx > dy && dx > 3 + : dy > dx && dy > 3 + + if (thresholdMet) { + isDragging.value = true + maybeDragging = false + } else if ((isHorizontal.value ? dy : dx) > 3) { + maybeDragging = false + } + } + + if (!isDragging.value) return + + e.preventDefault() + addMovement(e) + + const progress = getProgress(isHorizontal.value ? touchX : touchY, false) + dragProgress.value = Math.max(0, Math.min(1, progress)) + + if (progress > 1) { + offset.value = getOffset(isHorizontal.value ? touchX : touchY, true) + } else if (progress < 0) { + offset.value = getOffset(isHorizontal.value ? touchX : touchY, false) + } + } + + function onTouchend (e: TouchEvent) { + maybeDragging = false + + if (!isDragging.value) return + + addMovement(e) + + isDragging.value = false + + const velocity = getVelocity(e.changedTouches[0].identifier) + const vx = Math.abs(velocity.x) + const vy = Math.abs(velocity.y) + const thresholdMet = isHorizontal.value + ? vx > vy && vx > 400 + : vy > vx && vy > 3 + + if (thresholdMet) { + isActive.value = velocity.direction === ({ + left: 'right', + right: 'left', + top: 'down', + bottom: 'up', + }[position.value] || oops()) + } else { + isActive.value = dragProgress.value > 0.5 + } + } + + const dragStyles = computed(() => { + return isDragging.value ? { + transform: + position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` + : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` + : position.value === 'top' ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))` + : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` + : oops(), + transition: 'none', + } : undefined + }) + + useToggleScope(isDragging, () => { + const transform = el.value?.style.transform ?? null + const transition = el.value?.style.transition ?? null + + watchEffect(() => { + el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none') + el.value?.style.setProperty('transition', dragStyles.value?.transition || null) + }) + + onScopeDispose(() => { + el.value?.style.setProperty('transform', transform) + el.value?.style.setProperty('transition', transition) + }) + }) + + return { + isDragging, + dragProgress, + dragStyles, + } +} + +function oops (): never { + throw new Error() +} diff --git a/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx b/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx new file mode 100644 index 0000000..513c254 --- /dev/null +++ b/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx @@ -0,0 +1,17 @@ +// Composables +import { useHydration } from '@/composables/hydration' + +// Utilities +import { defineComponent } from '@/util' + +export const VNoSsr = defineComponent({ + name: 'VNoSsr', + + setup (_, { slots }) { + const show = useHydration() + + return () => show.value && slots.default?.() + }, +}) + +export type VNoSsr = InstanceType diff --git a/packages/vuetify/src/components/VNoSsr/index.ts b/packages/vuetify/src/components/VNoSsr/index.ts new file mode 100644 index 0000000..e89831c --- /dev/null +++ b/packages/vuetify/src/components/VNoSsr/index.ts @@ -0,0 +1 @@ +export { VNoSsr } from './VNoSsr' diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.sass b/packages/vuetify/src/components/VOtpInput/VOtpInput.sass new file mode 100644 index 0000000..8625374 --- /dev/null +++ b/packages/vuetify/src/components/VOtpInput/VOtpInput.sass @@ -0,0 +1,60 @@ +// Imports +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-otp-input + @include tools.rounded(4px) + + align-items: center + display: flex + justify-content: center + padding: $otp-input-padding + position: relative + + .v-field + height: 100% + + .v-otp-input__divider + margin: $otp-input-divider-margin + + .v-otp-input__content + align-items: center + display: flex + gap: $otp-input-content-gap + height: $otp-input-content-height + padding: $otp-input-content-padding + justify-content: center + max-width: $otp-input-content-max-width + position: relative + border-radius: inherit + + .v-otp-input--divided & + max-width: $otp-input-divided-content-max-width + + .v-otp-input__field + color: inherit + font-size: $otp-input-field-font-size + height: 100% + outline: none + text-align: center + width: 100% + + &[type=number]::-webkit-outer-spin-button, + &[type=number]::-webkit-inner-spin-button + -webkit-appearance: none + margin: 0 + + &[type=number] + -moz-appearance: textfield + + .v-otp-input__loader + align-items: center + display: flex + height: 100% + justify-content: center + width: 100% + + .v-progress-linear + position: absolute diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx new file mode 100644 index 0000000..f1b59a0 --- /dev/null +++ b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx @@ -0,0 +1,330 @@ +// Styles +import './VOtpInput.sass' + +// Components +import { makeVFieldProps, VField } from '@/components/VField/VField' +import { VOverlay } from '@/components/VOverlay/VOverlay' +import { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular' + +// Composables +import { provideDefaults } from '@/composables/defaults' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeFocusProps, useFocus } from '@/composables/focus' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, nextTick, ref, watch } from 'vue' +import { filterInputAttrs, focusChild, genericComponent, only, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +// Types +export type VOtpInputSlots = { + default: never + loader: never +} + +export const makeVOtpInputProps = propsFactory({ + autofocus: Boolean, + divider: String, + focusAll: Boolean, + label: { + type: String, + default: '$vuetify.input.otp', + }, + length: { + type: [Number, String], + default: 6, + }, + modelValue: { + type: [Number, String], + default: undefined, + }, + placeholder: String, + type: { + type: String as PropType<'text' | 'password' | 'number'>, + default: 'number', + }, + + ...makeDimensionProps(), + ...makeFocusProps(), + ...only(makeVFieldProps({ + variant: 'outlined' as const, + }), [ + 'baseColor', + 'bgColor', + 'class', + 'color', + 'disabled', + 'error', + 'loading', + 'rounded', + 'style', + 'theme', + 'variant', + ]), +}, 'VOtpInput') + +export const VOtpInput = genericComponent()({ + name: 'VOtpInput', + + props: makeVOtpInputProps(), + + emits: { + finish: (val: string) => true, + 'update:focused': (val: boolean) => true, + 'update:modelValue': (val: string) => true, + }, + + setup (props, { attrs, emit, slots }) { + const { dimensionStyles } = useDimension(props) + const { isFocused, focus, blur } = useFocus(props) + const model = useProxiedModel( + props, + 'modelValue', + '', + val => val == null ? [] : String(val).split(''), + val => val.join('') + ) + const { t } = useLocale() + + const length = computed(() => Number(props.length)) + const fields = computed(() => Array(length.value).fill(0)) + const focusIndex = ref(-1) + const contentRef = ref() + const inputRef = ref([]) + const current = computed(() => inputRef.value[focusIndex.value]) + + function onInput () { + // The maxlength attribute doesn't work for the number type input, so the text type is used. + // The following logic simulates the behavior of a number input. + if (isValidNumber(current.value.value)) { + current.value.value = '' + return + } + + const array = model.value.slice() + const value = current.value.value + + array[focusIndex.value] = value + + let target: any = null + + if (focusIndex.value > model.value.length) { + target = model.value.length + 1 + } else if (focusIndex.value + 1 !== length.value) { + target = 'next' + } + + model.value = array + + if (target) focusChild(contentRef.value!, target) + } + + function onKeydown (e: KeyboardEvent) { + const array = model.value.slice() + const index = focusIndex.value + let target: 'next' | 'prev' | 'first' | 'last' | number | null = null + + if (![ + 'ArrowLeft', + 'ArrowRight', + 'Backspace', + 'Delete', + ].includes(e.key)) return + + e.preventDefault() + + if (e.key === 'ArrowLeft') { + target = 'prev' + } else if (e.key === 'ArrowRight') { + target = 'next' + } else if (['Backspace', 'Delete'].includes(e.key)) { + array[focusIndex.value] = '' + + model.value = array + + if (focusIndex.value > 0 && e.key === 'Backspace') { + target = 'prev' + } else { + requestAnimationFrame(() => { + inputRef.value[index]?.select() + }) + } + } + + requestAnimationFrame(() => { + if (target != null) { + focusChild(contentRef.value!, target) + } + }) + } + + function onPaste (index: number, e: ClipboardEvent) { + e.preventDefault() + e.stopPropagation() + + const clipboardText = e?.clipboardData?.getData('Text') ?? '' + + if (isValidNumber(clipboardText)) return + + model.value = clipboardText.split('') + + inputRef.value?.[index].blur() + } + + function reset () { + model.value = [] + } + + function onFocus (e: FocusEvent, index: number) { + focus() + + focusIndex.value = index + } + + function onBlur () { + blur() + + focusIndex.value = -1 + } + + function isValidNumber (value: string) { + return props.type === 'number' && /[^0-9]/g.test(value) + } + + provideDefaults({ + VField: { + color: computed(() => props.color), + bgColor: computed(() => props.color), + baseColor: computed(() => props.baseColor), + disabled: computed(() => props.disabled), + error: computed(() => props.error), + variant: computed(() => props.variant), + }, + }, { scoped: true }) + + watch(model, val => { + if (val.length === length.value) emit('finish', val.join('')) + }, { deep: true }) + + watch(focusIndex, val => { + if (val < 0) return + + nextTick(() => { + inputRef.value[val]?.select() + }) + }) + + useRender(() => { + const [rootAttrs, inputAttrs] = filterInputAttrs(attrs) + + return ( +
    +
    + { fields.value.map((_, i) => ( + <> + { props.divider && i !== 0 && ( + { props.divider } + )} + + + {{ + ...slots, + loader: undefined, + default: () => { + return ( + inputRef.value[i] = val as HTMLInputElement } + aria-label={ t(props.label, i + 1) } + autofocus={ i === 0 && props.autofocus } + autocomplete="one-time-code" + class={[ + 'v-otp-input__field', + ]} + disabled={ props.disabled } + inputmode={ props.type === 'number' ? 'numeric' : 'text' } + min={ props.type === 'number' ? 0 : undefined } + maxlength="1" + placeholder={ props.placeholder } + type={ props.type === 'number' ? 'text' : props.type } + value={ model.value[i] } + onInput={ onInput } + onFocus={ e => onFocus(e, i) } + onBlur={ onBlur } + onKeydown={ onKeydown } + onPaste={ event => onPaste(i, event) } + /> + ) + }, + }} + + + ))} + + + + + { slots.loader?.() ?? ( + + )} + + + { slots.default?.() } +
    +
    + ) + }) + + return { + blur: () => { + inputRef.value?.some(input => input.blur()) + }, + focus: () => { + inputRef.value?.[0].focus() + }, + reset, + isFocused, + } + }, +}) + +export type VOtpInput = InstanceType diff --git a/packages/vuetify/src/components/VOtpInput/__tests__/VOtpInput.spec.cy.tsx b/packages/vuetify/src/components/VOtpInput/__tests__/VOtpInput.spec.cy.tsx new file mode 100644 index 0000000..387723e --- /dev/null +++ b/packages/vuetify/src/components/VOtpInput/__tests__/VOtpInput.spec.cy.tsx @@ -0,0 +1,74 @@ +/// + +// Components +import { VOtpInput } from '../VOtpInput' + +// Utilities +import { keyValues } from '@/util' + +describe('VOtpInput', () => { + it('enters value and moves to next input', () => { + cy.mount(() => ()) + .get('.v-otp-input input').eq(0) + .type('1') + .get('.v-otp-input input').eq(1) + .should('be.focused') + .type('2') + .get('.v-otp-input input').eq(2) + .should('be.focused') + .type('3') + .get('.v-otp-input input').eq(3) + .should('be.focused') + .type('4') + .get('.v-otp-input input').eq(4) + .should('be.focused') + .type('5') + .get('.v-otp-input input').eq(5) + .should('be.focused') + .type('6') + .should('be.focused') + }) + + it('enters value and moves to next input when focused index is not next', () => { + cy.mount(() => ()) + .get('.v-otp-input input').eq(0) + .type('1') + .get('.v-otp-input input').eq(1) + .should('be.focused') + .get('.v-otp-input input').eq(3) + .type('2') + .get('.v-otp-input input').eq(2) + .should('be.focused') + }) + + it('removes value and stays on current input when using delete', () => { + cy.mount(() => ()) + .get('.v-otp-input input').eq(0) + .type('1234') + .get('.v-otp-input input').eq(4) + .should('be.focused') + .trigger('keydown', { key: keyValues.left }) + .trigger('keydown', { key: keyValues.left }) + .get('.v-otp-input input').eq(2) + .should('be.focused') + .should('have.value', '3') + .trigger('keydown', { key: keyValues.delete }) + .should('have.value', '4') + }) + + it('removes value and goes back when using backspace', () => { + cy.mount(() => ()) + .get('.v-otp-input input').eq(0) + .type('1234') + .get('.v-otp-input input').eq(4) + .should('be.focused') + .trigger('keydown', { key: keyValues.backspace }) + .get('.v-otp-input input').eq(3) + .should('be.focused') + .should('have.value', 4) + .trigger('keydown', { key: keyValues.backspace }) + .get('.v-otp-input input').eq(2) + .should('be.focused') + .should('have.value', 3) + }) +}) diff --git a/packages/vuetify/src/components/VOtpInput/_variables.scss b/packages/vuetify/src/components/VOtpInput/_variables.scss new file mode 100644 index 0000000..c54243d --- /dev/null +++ b/packages/vuetify/src/components/VOtpInput/_variables.scss @@ -0,0 +1,11 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +$otp-input-content-gap: .5rem !default; +$otp-input-content-height: 64px !default; +$otp-input-content-max-width: 320px !default; +$otp-input-content-padding: .5rem !default; +$otp-input-divided-content-max-width: 360px !default; +$otp-input-divider-margin: 0 8px !default; +$otp-input-field-font-size: 1.25rem !default; +$otp-input-padding: .5rem 0 !default; diff --git a/packages/vuetify/src/components/VOtpInput/index.ts b/packages/vuetify/src/components/VOtpInput/index.ts new file mode 100644 index 0000000..dc63c58 --- /dev/null +++ b/packages/vuetify/src/components/VOtpInput/index.ts @@ -0,0 +1 @@ +export { VOtpInput } from './VOtpInput' diff --git a/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.sass b/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.sass new file mode 100644 index 0000000..7dd2e7b --- /dev/null +++ b/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.sass @@ -0,0 +1,133 @@ +@import './_variables.scss' + +// Theme ++theme(v-overflow-btn) using ($material) + &#{&} > .v-input__control > .v-input__slot + border-color: map-get($material, 'dividers') + + &:not(.v-input--is-focused):not(.v-input--has-state) + > .v-input__control > .v-input__slot:hover + background: map-get($material, 'cards') + + &.v-overflow-btn--segmented + .v-input__append-inner + border-left: thin solid map-get($material, 'dividers') + + +.v-autocomplete__content.v-menu__content + box-shadow: $overflow-menu-content-box-shadow + + .v-select-list + border-radius: $overflow-menu-content-select-list-border-radius + +.v-overflow-btn + margin-top: $overflow-margin-top + padding-top: 0 + + &:not(.v-overflow-btn--editable) > .v-input__control > .v-input__slot + cursor: pointer + + .v-input__slot + border-width: $overflow-input-slot-border-width + border-style: solid + + &:before + display: none + + .v-select__slot + height: $overflow-slot-height + + &.v-input--dense + .v-select__slot + height: $overflow-dense-slot-height + + input + cursor: pointer + margin-inline-start: $overflow-dense-input-margin-x + + .v-select__selection--comma:first-child + margin-inline-start: $overflow-selection-comma-margin-x + + .v-input__slot + transition: .3s map-get($transition, 'swing') + + &::before, + &::after + display: none + + .v-label + top: $overflow-label-top + margin-inline-start: $overflow-label-margin-x + + .v-input__append-inner + align-items: center + align-self: auto + flex-shrink: 0 + height: $overflow-append-inner-height + margin-top: 0 + padding: 0 4px + width: $overflow-append-inner-width + + .v-input__append-outer, + .v-input__prepend-outer + margin-bottom: $overflow-append-prepend-margin-bottom + margin-top: $overflow-append-prepend-margin-top + + .v-input__control::before + // TODO: move to mixin + height: 1px + top: -1px + content: '' + left: 0 + position: absolute + transition: $primary-transition + width: 100% + + &.v-input--is-focused, + &.v-select--is-menu-active + .v-input__slot + border-color: transparent !important + box-shadow: $overflow-focused-active-slot-box-shadow + + &.v-input--is-focused + .v-input__slot + border-radius: $overflow-focused-active-border-radius + + &.v-select--is-menu-active + .v-input__slot + border-radius: $overflow-active-slot-border-radius + + .v-select__selections + width: 0px + + &--segmented + .v-input__slot + border-width: $overflow-segmented-input-slot-border-width + + .v-select__selections + flex-wrap: nowrap + + .v-btn + border-radius: 0 + margin: 0 + height: $overflow-segmented-selections-btn-height + width: 100% + + // push past the input's padding + margin-inline-end: $overflow-segmented-selections-btn-margin-x + + &__content + justify-content: start + + &::before + background-color: transparent + + &--editable + .v-select__slot + input + cursor: text + padding: $overflow-editable-select-slot-padding + + .v-input__append-inner, + .v-input__append-inner * + cursor: pointer diff --git a/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.ts b/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.ts new file mode 100644 index 0000000..a417715 --- /dev/null +++ b/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.ts @@ -0,0 +1,112 @@ +// @ts-nocheck +/* eslint-disable */ + +// Styles +import './VOverflowBtn.sass' + +// Extensions +import VSelect from '../VSelect/VSelect' +import VAutocomplete from '../VAutocomplete' +import VTextField from '../VTextField/VTextField' + +// Components +import VBtn from '../VBtn' + +// Utilities +import { consoleWarn } from '../../util/console' + +/* @vue/component */ +export default VAutocomplete.extend({ + name: 'v-overflow-btn', + + props: { + editable: Boolean, + segmented: Boolean, + }, + + computed: { + classes (): object { + return { + ...VAutocomplete.options.computed.classes.call(this), + 'v-overflow-btn': true, + 'v-overflow-btn--segmented': this.segmented, + 'v-overflow-btn--editable': this.editable, + } + }, + isAnyValueAllowed (): boolean { + return this.editable || + VAutocomplete.options.computed.isAnyValueAllowed.call(this) + }, + isSingle (): true { + return true + }, + computedItems (): object[] { + return this.segmented ? this.allItems : this.filteredItems + }, + labelValue (): boolean { + return (this.isFocused && !this.persistentPlaceholder) || this.isLabelActive + }, + }, + + methods: { + genSelections () { + return this.editable + ? VAutocomplete.options.methods.genSelections.call(this) + : VSelect.options.methods.genSelections.call(this) // Override v-autocomplete's override + }, + genCommaSelection (item: any, index: number, last: boolean) { + return this.segmented + ? this.genSegmentedBtn(item) + : VSelect.options.methods.genCommaSelection.call(this, item, index, last) + }, + genInput () { + const input = VTextField.options.methods.genInput.call(this) + + input.data = input.data || {} + input.data.domProps!.value = this.editable ? this.internalSearch : '' + input.data.attrs!.readonly = !this.isAnyValueAllowed + + return input + }, + genLabel () { + if (this.editable && this.isFocused) return null + + const label = VTextField.options.methods.genLabel.call(this) + + if (!label) return label + + label.data = label.data || {} + + // Reset previously set styles from parent + label.data.style = {} + + return label + }, + genSegmentedBtn (item: any) { + const itemValue = this.getValue(item) + const itemObj = this.computedItems.find(i => this.getValue(i) === itemValue) || item + + if (!itemObj.text || !itemObj.callback) { + consoleWarn('When using "segmented" prop without a selection slot, items must contain both a text and callback property', this) + return null + } + + return this.$createElement(VBtn, { + props: { text: true }, + on: { + click (e: Event) { + e.stopPropagation() + itemObj.callback(e) + }, + }, + }, [itemObj.text]) + }, + updateValue (val: boolean) { + if (val) { + this.initialValue = this.lazyValue + } else if (this.initialValue !== this.lazyValue) { + this.$emit('change', this.lazyValue) + } + }, + }, +}) diff --git a/packages/vuetify/src/components/VOverflowBtn/__tests__/VOverflowBtn.spec.ts b/packages/vuetify/src/components/VOverflowBtn/__tests__/VOverflowBtn.spec.ts new file mode 100644 index 0000000..360e0b3 --- /dev/null +++ b/packages/vuetify/src/components/VOverflowBtn/__tests__/VOverflowBtn.spec.ts @@ -0,0 +1,132 @@ +// @ts-nocheck +/* eslint-disable */ + +// Components +// import VOverflowBtn from '../VOverflowBtn' + +// Utilities +import { + mount, + Wrapper, +} from '@vue/test-utils' +// import { ExtractVue } from '../../../util/mixins' + +describe.skip('VOverflowBtn.js', () => { + type Instance = ExtractVue + let mountFunction: (options?: object) => Wrapper + + beforeEach(() => { + document.body.setAttribute('data-app', 'true') + + mountFunction = (options = {}) => { + return mount(VOverflowBtn, { + ...options, + // https://github.com/vuejs/vue-test-utils/issues/1130 + sync: false, + mocks: { + $vuetify: { + lang: { + t: (val: string) => val, + }, + theme: { + dark: false, + }, + }, + }, + }) + } + }) + + const warning = 'items must contain both a text and callback property' + + it.skip('segmented - should warn when item has no callback', async () => { + const items = [ + { text: 'Hello' }, + { text: 'Hello' }, + ] + + const wrapper = mountFunction({ + propsData: { + segmented: true, + items, + }, + }) + + await wrapper.vm.$nextTick() + + // The error only happens + // when generating the button + // which only happens when + // we have a matching model + wrapper.setProps({ + items: [items[1]], + value: 'Hello', + }) + + await wrapper.vm.$nextTick() + + expect(warning).toHaveBeenTipped() + }) + + it('should use default autocomplete selections', async () => { + const wrapper = mountFunction({ + propsData: { + items: ['foo'], + multiple: true, + value: ['foo'], + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.setProps({ + items: [{ text: 'foo', value: 'foo', callback: () => { } }], + multiple: false, + segmented: true, + value: 'foo', + }) + + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should invoke item callback', () => { + const callback = jest.fn() + const wrapper = mountFunction({ + propsData: { + items: [{ + text: 'foo', + value: 'bar', + callback, + }], + segmented: true, + value: 'bar', + }, + }) + + const btn = wrapper.find('.v-btn') + + btn.trigger('click') + + expect(callback).toHaveBeenCalled() + }) + + it('should show label with persistentPlaceholder property set to true', async () => { + const wrapper = mountFunction({ + propsData: { + items: ['foo'], + label: 'Some label', + persistentPlaceholder: true, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + wrapper.find('input').trigger('click') + + await wrapper.vm.$nextTick() + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap b/packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap new file mode 100644 index 0000000..29a1569 --- /dev/null +++ b/packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap @@ -0,0 +1,197 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VOverflowBtn.js should show label with persistentPlaceholder property set to true 1`] = ` +
    +
    + +
    +
    + + +
    +
    +
    +
    +`; + +exports[`VOverflowBtn.js should show label with persistentPlaceholder property set to true 2`] = ` +
    +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +`; + +exports[`VOverflowBtn.js should use default autocomplete selections 1`] = ` +
    +
    + +
    +
    + + +
    +
    +
    +
    +`; + +exports[`VOverflowBtn.js should use default autocomplete selections 2`] = ` +
    +
    + +
    +
    + + +
    +
    +
    +
    +`; diff --git a/packages/vuetify/src/components/VOverflowBtn/_variables.scss b/packages/vuetify/src/components/VOverflowBtn/_variables.scss new file mode 100644 index 0000000..d0a38f8 --- /dev/null +++ b/packages/vuetify/src/components/VOverflowBtn/_variables.scss @@ -0,0 +1,24 @@ +@import '../../styles/styles.sass'; + +$overflow-active-slot-border-radius: $border-radius-root $border-radius-root 0 0 !default; +$overflow-append-inner-height: 48px !default; +$overflow-append-inner-width: 42px !default; +$overflow-append-prepend-margin-bottom: 12px !default; +$overflow-append-prepend-margin-top: 12px !default; +$overflow-dense-input-margin-x: 16px !default; +$overflow-dense-slot-height: 38px !default; +$overflow-focused-active-border-radius: $border-radius-root !default; +$overflow-focused-active-slot-box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28) !default; +$overflow-focused-active-slot-elevation: 2 !default; +$overflow-input-slot-border-width: 2px 0 !default; +$overflow-label-margin-x: 16px !default; +$overflow-label-top: calc(50% - 10px) !default; +$overflow-margin-top: 12px !default; +$overflow-menu-content-box-shadow: 0 4px 6px 0 rgba(32,33,36,0.28) !default; +$overflow-menu-content-select-list-border-radius: 0 0 $border-radius-root $border-radius-root !default; +$overflow-segmented-input-slot-border-width: thin 0 !default; +$overflow-segmented-selections-btn-height: 48px !default; +$overflow-segmented-selections-btn-margin-x: -16px !default; +$overflow-selection-comma-margin-x: 16px !default; +$overflow-slot-height: 48px !default; +$overflow-editable-select-slot-padding: 8px 16px !default; diff --git a/packages/vuetify/src/components/VOverflowBtn/index.ts b/packages/vuetify/src/components/VOverflowBtn/index.ts new file mode 100644 index 0000000..6a3b89e --- /dev/null +++ b/packages/vuetify/src/components/VOverflowBtn/index.ts @@ -0,0 +1,4 @@ +import VOverflowBtn from './VOverflowBtn' + +export { VOverflowBtn } +export default VOverflowBtn diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.sass b/packages/vuetify/src/components/VOverlay/VOverlay.sass new file mode 100644 index 0000000..7d8a1ce --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/VOverlay.sass @@ -0,0 +1,64 @@ +@use 'sass:selector' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Block + .v-overlay-container + contain: layout + left: 0 + pointer-events: none + position: absolute + top: 0 + display: contents + + .v-overlay-scroll-blocked + padding-inline-end: var(--v-scrollbar-offset) + + &:not(html) + overflow-y: hidden !important + + @at-root #{selector.append(html, &)} + position: fixed + top: var(--v-body-scroll-y) + left: var(--v-body-scroll-x) + width: 100% + height: 100% + + .v-overlay + border-radius: inherit + display: flex + left: 0 + pointer-events: none + position: fixed + top: 0 + bottom: 0 + right: 0 + + // Element + .v-overlay__content + outline: none + position: absolute + pointer-events: auto + contain: layout + + .v-overlay__scrim + pointer-events: auto + background: $overlay-scrim-background + border-radius: inherit + bottom: 0 + left: 0 + opacity: $overlay-opacity + position: fixed + right: 0 + top: 0 + + // Modifier + .v-overlay--absolute + position: absolute + + .v-overlay--contained .v-overlay__scrim + position: absolute + + .v-overlay--scroll-blocked + padding-inline-end: var(--v-scrollbar-offset) diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx new file mode 100644 index 0000000..14ec2c1 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx @@ -0,0 +1,364 @@ +// Styles +import './VOverlay.sass' + +// Composables +import { makeLocationStrategyProps, useLocationStrategies } from './locationStrategies' +import { makeScrollStrategyProps, useScrollStrategies } from './scrollStrategies' +import { makeActivatorProps, useActivator } from './useActivator' +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { useHydration } from '@/composables/hydration' +import { makeLazyProps, useLazy } from '@/composables/lazy' +import { useRtl } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' +import { useBackButton, useRouter } from '@/composables/router' +import { useScopeId } from '@/composables/scopeId' +import { useStack } from '@/composables/stack' +import { useTeleport } from '@/composables/teleport' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { useToggleScope } from '@/composables/toggleScope' +import { makeTransitionProps, MaybeTransition } from '@/composables/transition' + +// Directives +import { ClickOutside } from '@/directives/click-outside' + +// Utilities +import { + computed, + mergeProps, + onBeforeUnmount, + ref, + Teleport, + toRef, + Transition, + watch, +} from 'vue' +import { + animate, + convertToUnit, + genericComponent, + getScrollParent, + IN_BROWSER, + propsFactory, + standardEasing, + useRender, +} from '@/util' + +// Types +import type { PropType, Ref } from 'vue' +import type { BackgroundColorData } from '@/composables/color' +import type { TemplateRef } from '@/util' + +interface ScrimProps { + [key: string]: unknown + modelValue: boolean + color: BackgroundColorData +} +function Scrim (props: ScrimProps) { + const { modelValue, color, ...rest } = props + return ( + + { props.modelValue && ( +
    + )} + + ) +} + +export type OverlaySlots = { + default: { isActive: Ref } + activator: { isActive: boolean, props: Record, targetRef: TemplateRef } +} + +export const makeVOverlayProps = propsFactory({ + absolute: Boolean, + attach: [Boolean, String, Object] as PropType, + closeOnBack: { + type: Boolean, + default: true, + }, + contained: Boolean, + contentClass: null, + contentProps: null, + disabled: Boolean, + opacity: [Number, String], + noClickAnimation: Boolean, + modelValue: Boolean, + persistent: Boolean, + scrim: { + type: [Boolean, String], + default: true, + }, + zIndex: { + type: [Number, String], + default: 2000, + }, + + ...makeActivatorProps(), + ...makeComponentProps(), + ...makeDimensionProps(), + ...makeLazyProps(), + ...makeLocationStrategyProps(), + ...makeScrollStrategyProps(), + ...makeThemeProps(), + ...makeTransitionProps(), +}, 'VOverlay') + +export const VOverlay = genericComponent()({ + name: 'VOverlay', + + directives: { ClickOutside }, + + inheritAttrs: false, + + props: { + _disableGlobalStack: Boolean, + + ...makeVOverlayProps(), + }, + + emits: { + 'click:outside': (e: MouseEvent) => true, + 'update:modelValue': (value: boolean) => true, + afterEnter: () => true, + afterLeave: () => true, + }, + + setup (props, { slots, attrs, emit }) { + const model = useProxiedModel(props, 'modelValue') + const isActive = computed({ + get: () => model.value, + set: v => { + if (!(v && props.disabled)) model.value = v + }, + }) + const { themeClasses } = provideTheme(props) + const { rtlClasses, isRtl } = useRtl() + const { hasContent, onAfterLeave: _onAfterLeave } = useLazy(props, isActive) + const scrimColor = useBackgroundColor(computed(() => { + return typeof props.scrim === 'string' ? props.scrim : null + })) + const { globalTop, localTop, stackStyles } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack) + const { + activatorEl, activatorRef, + target, targetEl, targetRef, + activatorEvents, + contentEvents, + scrimEvents, + } = useActivator(props, { isActive, isTop: localTop }) + const { teleportTarget } = useTeleport(() => { + const target = props.attach || props.contained + if (target) return target + const rootNode = activatorEl?.value?.getRootNode() + if (rootNode instanceof ShadowRoot) return rootNode + return false + }) + const { dimensionStyles } = useDimension(props) + const isMounted = useHydration() + const { scopeId } = useScopeId() + + watch(() => props.disabled, v => { + if (v) isActive.value = false + }) + + const root = ref() + const scrimEl = ref() + const contentEl = ref() + const { contentStyles, updateLocation } = useLocationStrategies(props, { + isRtl, + contentEl, + target, + isActive, + }) + useScrollStrategies(props, { + root, + contentEl, + targetEl, + isActive, + updateLocation, + }) + + function onClickOutside (e: MouseEvent) { + emit('click:outside', e) + + if (!props.persistent) isActive.value = false + else animateClick() + } + + function closeConditional (e: Event) { + return isActive.value && globalTop.value && ( + // If using scrim, only close if clicking on it rather than anything opened on top + !props.scrim || e.target === scrimEl.value + ) + } + + IN_BROWSER && watch(isActive, val => { + if (val) { + window.addEventListener('keydown', onKeydown) + } else { + window.removeEventListener('keydown', onKeydown) + } + }, { immediate: true }) + + onBeforeUnmount(() => { + if (!IN_BROWSER) return + + window.removeEventListener('keydown', onKeydown) + }) + + function onKeydown (e: KeyboardEvent) { + if (e.key === 'Escape' && globalTop.value) { + if (!props.persistent) { + isActive.value = false + if (contentEl.value?.contains(document.activeElement)) { + activatorEl.value?.focus() + } + } else animateClick() + } + } + + const router = useRouter() + useToggleScope(() => props.closeOnBack, () => { + useBackButton(router, next => { + if (globalTop.value && isActive.value) { + next(false) + if (!props.persistent) isActive.value = false + else animateClick() + } else { + next() + } + }) + }) + + const top = ref() + watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => { + if (val) { + const scrollParent = getScrollParent(root.value) + if (scrollParent && scrollParent !== document.scrollingElement) { + top.value = scrollParent.scrollTop + } + } + }) + + // Add a quick "bounce" animation to the content + function animateClick () { + if (props.noClickAnimation) return + + contentEl.value && animate(contentEl.value, [ + { transformOrigin: 'center' }, + { transform: 'scale(1.03)' }, + { transformOrigin: 'center' }, + ], { + duration: 150, + easing: standardEasing, + }) + } + + function onAfterEnter () { + emit('afterEnter') + } + + function onAfterLeave () { + _onAfterLeave() + emit('afterLeave') + } + + useRender(() => ( + <> + { slots.activator?.({ + isActive: isActive.value, + targetRef, + props: mergeProps({ + ref: activatorRef, + }, activatorEvents.value, props.activatorProps), + })} + + { isMounted.value && hasContent.value && ( + +
    + + +
    [activatorEl.value] }} + class={[ + 'v-overlay__content', + props.contentClass, + ]} + style={[ + dimensionStyles.value, + contentStyles.value, + ]} + { ...contentEvents.value } + { ...props.contentProps } + > + { slots.default?.({ isActive }) } +
    +     +
    +     + )} + + )) + + return { + activatorEl, + scrimEl, + target, + animateClick, + contentEl, + globalTop, + localTop, + updateLocation, + } + }, +}) + +export type VOverlay = InstanceType diff --git a/packages/vuetify/src/components/VOverlay/__tests__/VOverlay.spec.cy.tsx b/packages/vuetify/src/components/VOverlay/__tests__/VOverlay.spec.cy.tsx new file mode 100644 index 0000000..83f6f78 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/__tests__/VOverlay.spec.cy.tsx @@ -0,0 +1,109 @@ +/// + +// Components +import { Application } from '../../../../cypress/templates' +import { VOverlay } from '../VOverlay' +import { VLayout } from '@/components/VLayout' +import { VMain } from '@/components/VMain' +import { VNavigationDrawer } from '@/components/VNavigationDrawer' + +// Utilities +import { ref } from 'vue' + +describe('VOverlay', () => { + it('without activator', () => { + const model = ref(false) + cy.mount(() => ( + + +
    Content
    +     +     + )) + .get('[data-test="content"]').should('not.exist') + // .setProps({ modelValue: true }) + .then(() => { + model.value = true + }) + .get('[data-test="content"]').should('be.visible') + .get('body').click() + .get('[data-test="content"]').should('not.exist') + .then(() => { + expect(model.value).to.be.false + }) + }) + + it('should use activator', () => { + cy.mount(() => ( + + + {{ + activator: ({ props }) =>
    Click me
    , + default: () =>
    Content
    , + }} +     +     + )) + .get('[data-test="content"]').should('not.exist') + .get('[data-test="activator"]').should('exist').click() + .get('[data-test="content"]').should('be.visible') + .get('body').click() + .get('[data-test="content"]').should('not.exist') + }) + + it('should render overlay on top of layout', () => { + cy.mount(() => ( + + + + + {{ + activator: ({ props }) =>
    Click me
    , + default: () =>
    Content
    , + }} +     +     +     + )) + .get('[data-test="content"]').should('not.exist') + .get('[data-test="activator"]').should('exist').click() + .get('[data-test="content"]').should('be.visible') + .get('[data-test="drawer"]').should('not.be.visible') + .get('body').click() + .get('[data-test="content"]').should('not.exist') + .get('[data-test="drawer"]').should('be.visible') + }) + + it('should render nested overlays', () => { + cy.mount(() => ( + + + {{ + activator: ({ props }) =>
    Click me
    , + default: () => ( +
    + + {{ + activator: ({ props }) =>
    Click me nested
    , + default: () =>
    Content
    , + }} +     +
    + ), + }} +     +     + )) + .get('[data-test="first-content"]').should('not.exist') + .get('[data-test="first-activator"]').should('exist').click() + .get('[data-test="first-content"]').should('be.visible') + .get('[data-test="second-activator"]').should('exist').click() + .get('[data-test="first-content"]').should('not.be.visible') + .get('[data-test="second-content"]').should('be.visible') + .get('body').click() + .get('[data-test="second-content"]').should('not.exist') + .get('[data-test="first-content"]').should('be.visible') + .get('body').click() + .get('[data-test="first-content"]').should('not.exist') + }) +}) diff --git a/packages/vuetify/src/components/VOverlay/_variables.scss b/packages/vuetify/src/components/VOverlay/_variables.scss new file mode 100644 index 0000000..d7be3b6 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/_variables.scss @@ -0,0 +1,3 @@ +// Defaults +$overlay-opacity: var(--v-overlay-opacity, 0.32) !default; +$overlay-scrim-background: rgb(var(--v-theme-on-surface)) !default; diff --git a/packages/vuetify/src/components/VOverlay/index.ts b/packages/vuetify/src/components/VOverlay/index.ts new file mode 100644 index 0000000..de39458 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/index.ts @@ -0,0 +1 @@ +export { VOverlay } from './VOverlay' diff --git a/packages/vuetify/src/components/VOverlay/locationStrategies.ts b/packages/vuetify/src/components/VOverlay/locationStrategies.ts new file mode 100644 index 0000000..f45a772 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/locationStrategies.ts @@ -0,0 +1,449 @@ +// Composables +import { useToggleScope } from '@/composables/toggleScope' + +// Utilities +import { computed, nextTick, onScopeDispose, ref, watch } from 'vue' +import { anchorToPoint, getOffset } from './util/point' +import { + clamp, + consoleError, + convertToUnit, + destructComputed, + flipAlign, + flipCorner, + flipSide, + getAxis, + getScrollParents, + IN_BROWSER, + isFixedPosition, + nullifyTransforms, + parseAnchor, + propsFactory, +} from '@/util' +import { Box, getOverflow, getTargetBox } from '@/util/box' + +// Types +import type { PropType, Ref } from 'vue' +import type { Anchor } from '@/util' + +export interface LocationStrategyData { + contentEl: Ref + target: Ref + isActive: Ref + isRtl: Ref +} + +type LocationStrategyFn = ( + data: LocationStrategyData, + props: StrategyProps, + contentStyles: Ref> +) => undefined | { updateLocation: (e?: Event) => void } + +const locationStrategies = { + static: staticLocationStrategy, // specific viewport position, usually centered + connected: connectedLocationStrategy, // connected to a certain element +} + +export interface StrategyProps { + locationStrategy: keyof typeof locationStrategies | LocationStrategyFn + location: Anchor + origin: Anchor | 'auto' | 'overlap' + offset?: number | string | number[] + maxHeight?: number | string + maxWidth?: number | string + minHeight?: number | string + minWidth?: number | string +} + +export const makeLocationStrategyProps = propsFactory({ + locationStrategy: { + type: [String, Function] as PropType, + default: 'static', + validator: (val: any) => typeof val === 'function' || val in locationStrategies, + }, + location: { + type: String as PropType, + default: 'bottom', + }, + origin: { + type: String as PropType, + default: 'auto', + }, + offset: [Number, String, Array] as PropType, +}, 'VOverlay-location-strategies') + +export function useLocationStrategies ( + props: StrategyProps, + data: LocationStrategyData +) { + const contentStyles = ref({}) + const updateLocation = ref<(e: Event) => void>() + + if (IN_BROWSER) { + useToggleScope(() => !!(data.isActive.value && props.locationStrategy), reset => { + watch(() => props.locationStrategy, reset) + onScopeDispose(() => { + window.removeEventListener('resize', onResize) + updateLocation.value = undefined + }) + + window.addEventListener('resize', onResize, { passive: true }) + + if (typeof props.locationStrategy === 'function') { + updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation + } else { + updateLocation.value = locationStrategies[props.locationStrategy](data, props, contentStyles)?.updateLocation + } + }) + } + + function onResize (e: Event) { + updateLocation.value?.(e) + } + + return { + contentStyles, + updateLocation, + } +} + +function staticLocationStrategy () { + // TODO +} + +/** Get size of element ignoring max-width/max-height */ +function getIntrinsicSize (el: HTMLElement, isRtl: boolean) { + // const scrollables = new Map() + // el.querySelectorAll('*').forEach(el => { + // const x = el.scrollLeft + // const y = el.scrollTop + // if (x || y) { + // scrollables.set(el, [x, y]) + // } + // }) + + // const initialMaxWidth = el.style.maxWidth + // const initialMaxHeight = el.style.maxHeight + // el.style.removeProperty('max-width') + // el.style.removeProperty('max-height') + + if (isRtl) { + el.style.removeProperty('left') + } else { + el.style.removeProperty('right') + } + + /* eslint-disable-next-line sonarjs/prefer-immediate-return */ + const contentBox = nullifyTransforms(el) + + if (isRtl) { + contentBox.x += parseFloat(el.style.right || 0) + } else { + contentBox.x -= parseFloat(el.style.left || 0) + } + contentBox.y -= parseFloat(el.style.top || 0) + + // el.style.maxWidth = initialMaxWidth + // el.style.maxHeight = initialMaxHeight + // scrollables.forEach((position, el) => { + // el.scrollTo(...position) + // }) + + return contentBox +} + +function connectedLocationStrategy (data: LocationStrategyData, props: StrategyProps, contentStyles: Ref>) { + const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value) + if (activatorFixed) { + Object.assign(contentStyles.value, { + position: 'fixed', + top: 0, + [data.isRtl.value ? 'right' : 'left']: 0, + }) + } + + const { preferredAnchor, preferredOrigin } = destructComputed(() => { + const parsedAnchor = parseAnchor(props.location, data.isRtl.value) + const parsedOrigin = + props.origin === 'overlap' ? parsedAnchor + : props.origin === 'auto' ? flipSide(parsedAnchor) + : parseAnchor(props.origin, data.isRtl.value) + + // Some combinations of props may produce an invalid origin + if (parsedAnchor.side === parsedOrigin.side && parsedAnchor.align === flipAlign(parsedOrigin).align) { + return { + preferredAnchor: flipCorner(parsedAnchor), + preferredOrigin: flipCorner(parsedOrigin), + } + } else { + return { + preferredAnchor: parsedAnchor, + preferredOrigin: parsedOrigin, + } + } + }) + + const [minWidth, minHeight, maxWidth, maxHeight] = + (['minWidth', 'minHeight', 'maxWidth', 'maxHeight'] as const).map(key => { + return computed(() => { + const val = parseFloat(props[key]!) + return isNaN(val) ? Infinity : val + }) + }) + + const offset = computed(() => { + if (Array.isArray(props.offset)) { + return props.offset + } + if (typeof props.offset === 'string') { + const offset = props.offset.split(' ').map(parseFloat) + if (offset.length < 2) offset.push(0) + return offset + } + return typeof props.offset === 'number' ? [props.offset, 0] : [0, 0] + }) + + let observe = false + const observer = new ResizeObserver(() => { + if (observe) updateLocation() + }) + + watch([data.target, data.contentEl], ([newTarget, newContentEl], [oldTarget, oldContentEl]) => { + if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget) + if (newTarget && !Array.isArray(newTarget)) observer.observe(newTarget) + + if (oldContentEl) observer.unobserve(oldContentEl) + if (newContentEl) observer.observe(newContentEl) + }, { + immediate: true, + }) + + onScopeDispose(() => { + observer.disconnect() + }) + + // eslint-disable-next-line max-statements + function updateLocation () { + observe = false + requestAnimationFrame(() => observe = true) + + if (!data.target.value || !data.contentEl.value) return + + const targetBox = getTargetBox(data.target.value) + const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value) + const scrollParents = getScrollParents(data.contentEl.value) + const viewportMargin = 12 + + if (!scrollParents.length) { + scrollParents.push(document.documentElement) + if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) { + contentBox.x -= parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-x') || 0) + contentBox.y -= parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-y') || 0) + } + } + + const viewport = scrollParents.reduce((box: Box | undefined, el) => { + const rect = el.getBoundingClientRect() + const scrollBox = new Box({ + x: el === document.documentElement ? 0 : rect.x, + y: el === document.documentElement ? 0 : rect.y, + width: el.clientWidth, + height: el.clientHeight, + }) + + if (box) { + return new Box({ + x: Math.max(box.left, scrollBox.left), + y: Math.max(box.top, scrollBox.top), + width: Math.min(box.right, scrollBox.right) - Math.max(box.left, scrollBox.left), + height: Math.min(box.bottom, scrollBox.bottom) - Math.max(box.top, scrollBox.top), + }) + } + return scrollBox + }, undefined!) + viewport.x += viewportMargin + viewport.y += viewportMargin + viewport.width -= viewportMargin * 2 + viewport.height -= viewportMargin * 2 + + let placement = { + anchor: preferredAnchor.value, + origin: preferredOrigin.value, + } + + function checkOverflow (_placement: typeof placement) { + const box = new Box(contentBox) + const targetPoint = anchorToPoint(_placement.anchor, targetBox) + const contentPoint = anchorToPoint(_placement.origin, box) + + let { x, y } = getOffset(targetPoint, contentPoint) + + switch (_placement.anchor.side) { + case 'top': y -= offset.value[0]; break + case 'bottom': y += offset.value[0]; break + case 'left': x -= offset.value[0]; break + case 'right': x += offset.value[0]; break + } + + switch (_placement.anchor.align) { + case 'top': y -= offset.value[1]; break + case 'bottom': y += offset.value[1]; break + case 'left': x -= offset.value[1]; break + case 'right': x += offset.value[1]; break + } + + box.x += x + box.y += y + + box.width = Math.min(box.width, maxWidth.value) + box.height = Math.min(box.height, maxHeight.value) + + const overflows = getOverflow(box, viewport) + + return { overflows, x, y } + } + + let x = 0; let y = 0 + const available = { x: 0, y: 0 } + const flipped = { x: false, y: false } + let resets = -1 + while (true) { + if (resets++ > 10) { + consoleError('Infinite loop detected in connectedLocationStrategy') + break + } + + const { x: _x, y: _y, overflows } = checkOverflow(placement) + + x += _x + y += _y + + contentBox.x += _x + contentBox.y += _y + + // flip + { + const axis = getAxis(placement.anchor) + const hasOverflowX = overflows.x.before || overflows.x.after + const hasOverflowY = overflows.y.before || overflows.y.after + + let reset = false + ;['x', 'y'].forEach(key => { + if ( + (key === 'x' && hasOverflowX && !flipped.x) || + (key === 'y' && hasOverflowY && !flipped.y) + ) { + const newPlacement = { anchor: { ...placement.anchor }, origin: { ...placement.origin } } + const flip = key === 'x' + ? axis === 'y' ? flipAlign : flipSide + : axis === 'y' ? flipSide : flipAlign + newPlacement.anchor = flip(newPlacement.anchor) + newPlacement.origin = flip(newPlacement.origin) + const { overflows: newOverflows } = checkOverflow(newPlacement) + if ( + (newOverflows[key].before <= overflows[key].before && + newOverflows[key].after <= overflows[key].after) || + (newOverflows[key].before + newOverflows[key].after < + (overflows[key].before + overflows[key].after) / 2) + ) { + placement = newPlacement + reset = flipped[key] = true + } + } + }) + if (reset) continue + } + + // shift + if (overflows.x.before) { + x += overflows.x.before + contentBox.x += overflows.x.before + } + if (overflows.x.after) { + x -= overflows.x.after + contentBox.x -= overflows.x.after + } + if (overflows.y.before) { + y += overflows.y.before + contentBox.y += overflows.y.before + } + if (overflows.y.after) { + y -= overflows.y.after + contentBox.y -= overflows.y.after + } + + // size + { + const overflows = getOverflow(contentBox, viewport) + available.x = viewport.width - overflows.x.before - overflows.x.after + available.y = viewport.height - overflows.y.before - overflows.y.after + + x += overflows.x.before + contentBox.x += overflows.x.before + y += overflows.y.before + contentBox.y += overflows.y.before + } + + break + } + + const axis = getAxis(placement.anchor) + + Object.assign(contentStyles.value, { + '--v-overlay-anchor-origin': `${placement.anchor.side} ${placement.anchor.align}`, + transformOrigin: `${placement.origin.side} ${placement.origin.align}`, + // transform: `translate(${pixelRound(x)}px, ${pixelRound(y)}px)`, + top: convertToUnit(pixelRound(y)), + left: data.isRtl.value ? undefined : convertToUnit(pixelRound(x)), + right: data.isRtl.value ? convertToUnit(pixelRound(-x)) : undefined, + minWidth: convertToUnit(axis === 'y' ? Math.min(minWidth.value, targetBox.width) : minWidth.value), + maxWidth: convertToUnit(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))), + maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value))), + }) + + return { + available, + contentBox, + } + } + + watch( + () => [ + preferredAnchor.value, + preferredOrigin.value, + props.offset, + props.minWidth, + props.minHeight, + props.maxWidth, + props.maxHeight, + ], + () => updateLocation(), + ) + + nextTick(() => { + const result = updateLocation() + + // TODO: overflowing content should only require a single updateLocation call + // Icky hack to make sure the content is positioned consistently + if (!result) return + const { available, contentBox } = result + if (contentBox.height > available.y) { + requestAnimationFrame(() => { + updateLocation() + requestAnimationFrame(() => { + updateLocation() + }) + }) + } + }) + + return { updateLocation } +} + +function pixelRound (val: number) { + return Math.round(val * devicePixelRatio) / devicePixelRatio +} + +function pixelCeil (val: number) { + return Math.ceil(val * devicePixelRatio) / devicePixelRatio +} diff --git a/packages/vuetify/src/components/VOverlay/requestNewFrame.ts b/packages/vuetify/src/components/VOverlay/requestNewFrame.ts new file mode 100644 index 0000000..5412939 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/requestNewFrame.ts @@ -0,0 +1,29 @@ +let clean = true +const frames = [] as any[] + +/** + * Schedule a task to run in an animation frame on its own + * This is useful for heavy tasks that may cause jank if all ran together + */ +export function requestNewFrame (cb: () => void) { + if (!clean || frames.length) { + frames.push(cb) + run() + } else { + clean = false + cb() + run() + } +} + +let raf = -1 +function run () { + cancelAnimationFrame(raf) + raf = requestAnimationFrame(() => { + const frame = frames.shift() + if (frame) frame() + + if (frames.length) run() + else clean = true + }) +} diff --git a/packages/vuetify/src/components/VOverlay/scrollStrategies.ts b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts new file mode 100644 index 0000000..9369a54 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/scrollStrategies.ts @@ -0,0 +1,176 @@ +// Utilities +import { effectScope, onScopeDispose, watchEffect } from 'vue' +import { requestNewFrame } from './requestNewFrame' +import { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER, propsFactory } from '@/util' + +// Types +import type { EffectScope, PropType, Ref } from 'vue' + +export interface ScrollStrategyData { + root: Ref + contentEl: Ref + targetEl: Ref + isActive: Ref + updateLocation: Ref<((e: Event) => void) | undefined> +} + +type ScrollStrategyFn = (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void + +const scrollStrategies = { + none: null, + close: closeScrollStrategy, + block: blockScrollStrategy, + reposition: repositionScrollStrategy, +} + +export interface StrategyProps { + scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFn + contained: boolean | undefined +} + +export const makeScrollStrategyProps = propsFactory({ + scrollStrategy: { + type: [String, Function] as PropType, + default: 'block', + validator: (val: any) => typeof val === 'function' || val in scrollStrategies, + }, +}, 'VOverlay-scroll-strategies') + +export function useScrollStrategies ( + props: StrategyProps, + data: ScrollStrategyData +) { + if (!IN_BROWSER) return + + let scope: EffectScope | undefined + watchEffect(async () => { + scope?.stop() + + if (!(data.isActive.value && props.scrollStrategy)) return + + scope = effectScope() + await new Promise(resolve => setTimeout(resolve)) + scope.active && scope.run(() => { + if (typeof props.scrollStrategy === 'function') { + props.scrollStrategy(data, props, scope!) + } else { + scrollStrategies[props.scrollStrategy]?.(data, props, scope!) + } + }) + }) + + onScopeDispose(() => { + scope?.stop() + }) +} + +function closeScrollStrategy (data: ScrollStrategyData) { + function onScroll (e: Event) { + data.isActive.value = false + } + + bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll) +} + +function blockScrollStrategy (data: ScrollStrategyData, props: StrategyProps) { + const offsetParent = data.root.value?.offsetParent + const scrollElements = [...new Set([ + ...getScrollParents(data.targetEl.value, props.contained ? offsetParent : undefined), + ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined), + ])].filter(el => !el.classList.contains('v-overlay-scroll-blocked')) + const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth + + const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement) + if (scrollableParent) { + data.root.value!.classList.add('v-overlay--scroll-blocked') + } + + scrollElements.forEach((el, i) => { + el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft)) + el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop)) + + if (el !== document.documentElement) { + el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth)) + } + + el.classList.add('v-overlay-scroll-blocked') + }) + + onScopeDispose(() => { + scrollElements.forEach((el, i) => { + const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x')) + const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y')) + + const scrollBehavior = el.style.scrollBehavior + + el.style.scrollBehavior = 'auto' + el.style.removeProperty('--v-body-scroll-x') + el.style.removeProperty('--v-body-scroll-y') + el.style.removeProperty('--v-scrollbar-offset') + el.classList.remove('v-overlay-scroll-blocked') + + el.scrollLeft = -x + el.scrollTop = -y + + el.style.scrollBehavior = scrollBehavior + }) + if (scrollableParent) { + data.root.value!.classList.remove('v-overlay--scroll-blocked') + } + }) +} + +function repositionScrollStrategy (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) { + let slow = false + let raf = -1 + let ric = -1 + + function update (e: Event) { + requestNewFrame(() => { + const start = performance.now() + data.updateLocation.value?.(e) + const time = performance.now() - start + slow = time / (1000 / 60) > 2 + }) + } + + ric = (typeof requestIdleCallback === 'undefined' ? (cb: Function) => cb() : requestIdleCallback)(() => { + scope.run(() => { + bindScroll(data.targetEl.value ?? data.contentEl.value, e => { + if (slow) { + // If the position calculation is slow, + // defer updates until scrolling is finished. + // Browsers usually fire one scroll event per frame so + // we just wait until we've got two frames without an event + cancelAnimationFrame(raf) + raf = requestAnimationFrame(() => { + raf = requestAnimationFrame(() => { + update(e) + }) + }) + } else { + update(e) + } + }) + }) + }) + + onScopeDispose(() => { + typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric) + cancelAnimationFrame(raf) + }) +} + +/** @private */ +function bindScroll (el: HTMLElement | undefined, onScroll: (e: Event) => void) { + const scrollElements = [document, ...getScrollParents(el)] + scrollElements.forEach(el => { + el.addEventListener('scroll', onScroll, { passive: true }) + }) + + onScopeDispose(() => { + scrollElements.forEach(el => { + el.removeEventListener('scroll', onScroll) + }) + }) +} diff --git a/packages/vuetify/src/components/VOverlay/useActivator.tsx b/packages/vuetify/src/components/VOverlay/useActivator.tsx new file mode 100644 index 0000000..0bf11e5 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/useActivator.tsx @@ -0,0 +1,341 @@ +// Components +import { VMenuSymbol } from '@/components/VMenu/shared' + +// Composables +import { makeDelayProps, useDelay } from '@/composables/delay' + +// Utilities +import { + computed, + effectScope, + inject, + mergeProps, + nextTick, + onScopeDispose, + ref, + watch, + watchEffect, +} from 'vue' +import { + bindProps, + getCurrentInstance, + IN_BROWSER, + matchesSelector, + propsFactory, + templateRef, + unbindProps, +} from '@/util' + +// Types +import type { + ComponentInternalInstance, + ComponentPublicInstance, + EffectScope, + PropType, + Ref, +} from 'vue' +import type { DelayProps } from '@/composables/delay' + +interface ActivatorProps extends DelayProps { + target: 'parent' | 'cursor' | (string & {}) | Element | ComponentPublicInstance | [x: number, y: number] | undefined + activator: 'parent' | (string & {}) | Element | ComponentPublicInstance | undefined + activatorProps: Record + + openOnClick: boolean | undefined + openOnHover: boolean + openOnFocus: boolean | undefined + + closeOnContentClick: boolean +} + +export const makeActivatorProps = propsFactory({ + target: [String, Object] as PropType, + activator: [String, Object] as PropType, + activatorProps: { + type: Object as PropType, + default: () => ({}), + }, + + openOnClick: { + type: Boolean, + default: undefined, + }, + openOnHover: Boolean, + openOnFocus: { + type: Boolean, + default: undefined, + }, + + closeOnContentClick: Boolean, + + ...makeDelayProps(), +}, 'VOverlay-activator') + +export function useActivator ( + props: ActivatorProps, + { isActive, isTop }: { isActive: Ref, isTop: Ref } +) { + const vm = getCurrentInstance('useActivator') + const activatorEl = ref() + + let isHovered = false + let isFocused = false + let firstEnter = true + + const openOnFocus = computed(() => props.openOnFocus || (props.openOnFocus == null && props.openOnHover)) + const openOnClick = computed(() => props.openOnClick || (props.openOnClick == null && !props.openOnHover && !openOnFocus.value)) + + const { runOpenDelay, runCloseDelay } = useDelay(props, value => { + if ( + value === ( + (props.openOnHover && isHovered) || + (openOnFocus.value && isFocused) + ) && !(props.openOnHover && isActive.value && !isTop.value) + ) { + if (isActive.value !== value) { + firstEnter = true + } + isActive.value = value + } + }) + + const cursorTarget = ref<[x: number, y: number]>() + const availableEvents = { + onClick: (e: MouseEvent) => { + e.stopPropagation() + activatorEl.value = (e.currentTarget || e.target) as HTMLElement + if (!isActive.value) { + cursorTarget.value = [e.clientX, e.clientY] + } + isActive.value = !isActive.value + }, + onMouseenter: (e: MouseEvent) => { + if (e.sourceCapabilities?.firesTouchEvents) return + + isHovered = true + activatorEl.value = (e.currentTarget || e.target) as HTMLElement + runOpenDelay() + }, + onMouseleave: (e: MouseEvent) => { + isHovered = false + runCloseDelay() + }, + onFocus: (e: FocusEvent) => { + if (matchesSelector(e.target as HTMLElement, ':focus-visible') === false) return + + isFocused = true + e.stopPropagation() + activatorEl.value = (e.currentTarget || e.target) as HTMLElement + + runOpenDelay() + }, + onBlur: (e: FocusEvent) => { + isFocused = false + e.stopPropagation() + + runCloseDelay() + }, + } + + const activatorEvents = computed(() => { + const events: Partial = {} + + if (openOnClick.value) { + events.onClick = availableEvents.onClick + } + if (props.openOnHover) { + events.onMouseenter = availableEvents.onMouseenter + events.onMouseleave = availableEvents.onMouseleave + } + if (openOnFocus.value) { + events.onFocus = availableEvents.onFocus + events.onBlur = availableEvents.onBlur + } + + return events + }) + + const contentEvents = computed(() => { + const events: Record = {} + + if (props.openOnHover) { + events.onMouseenter = () => { + isHovered = true + runOpenDelay() + } + events.onMouseleave = () => { + isHovered = false + runCloseDelay() + } + } + + if (openOnFocus.value) { + events.onFocusin = () => { + isFocused = true + runOpenDelay() + } + events.onFocusout = () => { + isFocused = false + runCloseDelay() + } + } + + if (props.closeOnContentClick) { + const menu = inject(VMenuSymbol, null) + events.onClick = () => { + isActive.value = false + menu?.closeParents() + } + } + + return events + }) + + const scrimEvents = computed(() => { + const events: Record = {} + + if (props.openOnHover) { + events.onMouseenter = () => { + if (firstEnter) { + isHovered = true + firstEnter = false + runOpenDelay() + } + } + events.onMouseleave = () => { + isHovered = false + runCloseDelay() + } + } + + return events + }) + + watch(isTop, val => { + if (val && ( + (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused)) || + (openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered)) + )) { + isActive.value = false + } + }) + + watch(isActive, val => { + if (!val) { + setTimeout(() => { + cursorTarget.value = undefined + }) + } + }, { flush: 'post' }) + + const activatorRef = templateRef() + watchEffect(() => { + if (!activatorRef.value) return + + nextTick(() => { + activatorEl.value = activatorRef.el + }) + }) + + const targetRef = templateRef() + const target = computed(() => { + if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value + if (targetRef.value) return targetRef.el + return getTarget(props.target, vm) || activatorEl.value + }) + const targetEl = computed(() => { + return Array.isArray(target.value) + ? undefined + : target.value + }) + + let scope: EffectScope + watch(() => !!props.activator, val => { + if (val && IN_BROWSER) { + scope = effectScope() + scope.run(() => { + _useActivator(props, vm, { activatorEl, activatorEvents }) + }) + } else if (scope) { + scope.stop() + } + }, { flush: 'post', immediate: true }) + + onScopeDispose(() => { + scope?.stop() + }) + + return { activatorEl, activatorRef, target, targetEl, targetRef, activatorEvents, contentEvents, scrimEvents } +} + +function _useActivator ( + props: ActivatorProps, + vm: ComponentInternalInstance, + { activatorEl, activatorEvents }: Pick, 'activatorEl' | 'activatorEvents'> +) { + watch(() => props.activator, (val, oldVal) => { + if (oldVal && val !== oldVal) { + const activator = getActivator(oldVal) + activator && unbindActivatorProps(activator) + } + if (val) { + nextTick(() => bindActivatorProps()) + } + }, { immediate: true }) + + watch(() => props.activatorProps, () => { + bindActivatorProps() + }) + + onScopeDispose(() => { + unbindActivatorProps() + }) + + function bindActivatorProps (el = getActivator(), _props = props.activatorProps) { + if (!el) return + + bindProps(el, mergeProps(activatorEvents.value, _props)) + } + + function unbindActivatorProps (el = getActivator(), _props = props.activatorProps) { + if (!el) return + + unbindProps(el, mergeProps(activatorEvents.value, _props)) + } + + function getActivator (selector = props.activator): HTMLElement | undefined { + const activator = getTarget(selector, vm) + + // The activator should only be a valid element (Ignore comments and text nodes) + activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined + + return activatorEl.value + } +} + +function getTarget ( + selector: T, + vm: ComponentInternalInstance +): HTMLElement | undefined | (T extends any[] ? [x: number, y: number] : never) { + if (!selector) return + + let target + if (selector === 'parent') { + let el = vm?.proxy?.$el?.parentNode + while (el?.hasAttribute('data-no-activator')) { + el = el.parentNode + } + target = el + } else if (typeof selector === 'string') { + // Selector + target = document.querySelector(selector) + } else if ('$el' in selector) { + // Component (ref) + target = selector.$el + } else { + // HTMLElement | Element | [x, y] + target = selector + } + + return target +} diff --git a/packages/vuetify/src/components/VOverlay/util/point.ts b/packages/vuetify/src/components/VOverlay/util/point.ts new file mode 100644 index 0000000..18a4cb1 --- /dev/null +++ b/packages/vuetify/src/components/VOverlay/util/point.ts @@ -0,0 +1,73 @@ +// Types +import type { ParsedAnchor } from '@/util' +import type { Box } from '@/util/box' + +type Point = { x: number, y: number } +declare class As { + private as: T +} +type ElementPoint = Point & As<'element'> +type ViewportPoint = Point & As<'viewport'> +type Offset = Point & As<'offset'> + +/** Convert a point in local space to viewport space */ +export function elementToViewport (point: ElementPoint, offset: Offset | Box) { + return { + x: point.x + offset.x, + y: point.y + offset.y, + } as ViewportPoint +} + +/** Convert a point in viewport space to local space */ +export function viewportToElement (point: ViewportPoint, offset: Offset | Box) { + return { + x: point.x - offset.x, + y: point.y - offset.y, + } as ElementPoint +} + +/** Get the difference between two points */ +export function getOffset (a: T, b: T) { + return { + x: a.x - b.x, + y: a.y - b.y, + } as Offset +} + +/** Convert an anchor object to a point in local space */ +export function anchorToPoint (anchor: ParsedAnchor, box: Box): ViewportPoint { + if (anchor.side === 'top' || anchor.side === 'bottom') { + const { side, align } = anchor + + const x: number = + align === 'left' ? 0 + : align === 'center' ? box.width / 2 + : align === 'right' ? box.width + : align + const y: number = + side === 'top' ? 0 + : side === 'bottom' ? box.height + : side + + return elementToViewport({ x, y } as ElementPoint, box) + } else if (anchor.side === 'left' || anchor.side === 'right') { + const { side, align } = anchor + + const x: number = + side === 'left' ? 0 + : side === 'right' ? box.width + : side + const y: number = + align === 'top' ? 0 + : align === 'center' ? box.height / 2 + : align === 'bottom' ? box.height + : align + + return elementToViewport({ x, y } as ElementPoint, box) + } + + return elementToViewport({ + x: box.width / 2, + y: box.height / 2, + } as ElementPoint, box) +} diff --git a/packages/vuetify/src/components/VPagination/VPagination.sass b/packages/vuetify/src/components/VPagination/VPagination.sass new file mode 100644 index 0000000..0669b56 --- /dev/null +++ b/packages/vuetify/src/components/VPagination/VPagination.sass @@ -0,0 +1,17 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-pagination + &__list + display: inline-flex + list-style-type: none + justify-content: center + width: 100% + + &__item, + &__first, + &__prev, + &__next, + &__last + margin: $pagination-item-margin diff --git a/packages/vuetify/src/components/VPagination/VPagination.tsx b/packages/vuetify/src/components/VPagination/VPagination.tsx new file mode 100644 index 0000000..f5ac0c1 --- /dev/null +++ b/packages/vuetify/src/components/VPagination/VPagination.tsx @@ -0,0 +1,402 @@ +// Styles +import './VPagination.sass' + +// Components +import { VBtn } from '../VBtn' + +// Composables +import { useDisplay } from '@/composables' +import { makeBorderProps } from '@/composables/border' +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps } from '@/composables/density' +import { makeElevationProps } from '@/composables/elevation' +import { IconValue } from '@/composables/icons' +import { useLocale, useRtl } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' +import { useRefs } from '@/composables/refs' +import { useResizeObserver } from '@/composables/resizeObserver' +import { makeRoundedProps } from '@/composables/rounded' +import { makeSizeProps } from '@/composables/size' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { makeVariantProps } from '@/composables/variant' + +// Utilities +import { computed, nextTick, shallowRef, toRef } from 'vue' +import { createRange, genericComponent, keyValues, propsFactory, useRender } from '@/util' + +// Types +import type { ComponentPublicInstance } from 'vue' + +type ItemSlot = { + isActive: boolean + key: string | number + page: string + props: Record +} + +type ControlSlot = { + icon: IconValue + onClick: (e: Event) => void + disabled: boolean + 'aria-label': string + 'aria-disabled': boolean +} + +export type VPaginationSlots = { + item: ItemSlot + first: ControlSlot + prev: ControlSlot + next: ControlSlot + last: ControlSlot +} + +export const makeVPaginationProps = propsFactory({ + activeColor: String, + start: { + type: [Number, String], + default: 1, + }, + modelValue: { + type: Number, + default: (props: any) => props.start as number, + }, + disabled: Boolean, + length: { + type: [Number, String], + default: 1, + validator: (val: number) => val % 1 === 0, + }, + totalVisible: [Number, String], + firstIcon: { + type: IconValue, + default: '$first', + }, + prevIcon: { + type: IconValue, + default: '$prev', + }, + nextIcon: { + type: IconValue, + default: '$next', + }, + lastIcon: { + type: IconValue, + default: '$last', + }, + ariaLabel: { + type: String, + default: '$vuetify.pagination.ariaLabel.root', + }, + pageAriaLabel: { + type: String, + default: '$vuetify.pagination.ariaLabel.page', + }, + currentPageAriaLabel: { + type: String, + default: '$vuetify.pagination.ariaLabel.currentPage', + }, + firstAriaLabel: { + type: String, + default: '$vuetify.pagination.ariaLabel.first', + }, + previousAriaLabel: { + type: String, + default: '$vuetify.pagination.ariaLabel.previous', + }, + nextAriaLabel: { + type: String, + default: '$vuetify.pagination.ariaLabel.next', + }, + lastAriaLabel: { + type: String, + default: '$vuetify.pagination.ariaLabel.last', + }, + ellipsis: { + type: String, + default: '...', + }, + showFirstLastPage: Boolean, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDensityProps(), + ...makeElevationProps(), + ...makeRoundedProps(), + ...makeSizeProps(), + ...makeTagProps({ tag: 'nav' }), + ...makeThemeProps(), + ...makeVariantProps({ variant: 'text' } as const), +}, 'VPagination') + +export const VPagination = genericComponent()({ + name: 'VPagination', + + props: makeVPaginationProps(), + + emits: { + 'update:modelValue': (value: number) => true, + first: (value: number) => true, + prev: (value: number) => true, + next: (value: number) => true, + last: (value: number) => true, + }, + + setup (props, { slots, emit }) { + const page = useProxiedModel(props, 'modelValue') + const { t, n } = useLocale() + const { isRtl } = useRtl() + const { themeClasses } = provideTheme(props) + const { width } = useDisplay() + const maxButtons = shallowRef(-1) + + provideDefaults(undefined, { scoped: true }) + + const { resizeRef } = useResizeObserver((entries: ResizeObserverEntry[]) => { + if (!entries.length) return + + const { target, contentRect } = entries[0] + + const firstItem = target.querySelector('.v-pagination__list > *') as HTMLElement + + if (!firstItem) return + + const totalWidth = contentRect.width + const itemWidth = + firstItem.offsetWidth + + parseFloat(getComputedStyle(firstItem).marginRight) * 2 + + maxButtons.value = getMax(totalWidth, itemWidth) + }) + + const length = computed(() => parseInt(props.length, 10)) + const start = computed(() => parseInt(props.start, 10)) + + const totalVisible = computed(() => { + if (props.totalVisible != null) return parseInt(props.totalVisible, 10) + else if (maxButtons.value >= 0) return maxButtons.value + return getMax(width.value, 58) + }) + + function getMax (totalWidth: number, itemWidth: number) { + const minButtons = props.showFirstLastPage ? 5 : 3 + return Math.max(0, Math.floor( + // Round to two decimal places to avoid floating point errors + +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2) + )) + } + + const range = computed(() => { + if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [] + + if (totalVisible.value <= 0) return [] + else if (totalVisible.value === 1) return [page.value] + + if (length.value <= totalVisible.value) { + return createRange(length.value, start.value) + } + + const even = totalVisible.value % 2 === 0 + const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2) + const left = even ? middle : middle + 1 + const right = length.value - middle + + if (left - page.value >= 0) { + return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value] + } else if (page.value - right >= (even ? 1 : 0)) { + const rangeLength = totalVisible.value - 1 + const rangeStart = length.value - rangeLength + start.value + return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)] + } else { + const rangeLength = Math.max(1, totalVisible.value - 3) + const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value + return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value] + } + }) + + // TODO: 'first' | 'prev' | 'next' | 'last' does not work here? + function setValue (e: Event, value: number, event?: any) { + e.preventDefault() + page.value = value + event && emit(event, value) + } + + const { refs, updateRef } = useRefs() + + provideDefaults({ + VPaginationBtn: { + color: toRef(props, 'color'), + border: toRef(props, 'border'), + density: toRef(props, 'density'), + size: toRef(props, 'size'), + variant: toRef(props, 'variant'), + rounded: toRef(props, 'rounded'), + elevation: toRef(props, 'elevation'), + }, + }) + + const items = computed(() => { + return range.value.map((item, index) => { + const ref = (e: any) => updateRef(e, index) + + if (typeof item === 'string') { + return { + isActive: false, + key: `ellipsis-${index}`, + page: item, + props: { + ref, + ellipsis: true, + icon: true, + disabled: true, + }, + } + } else { + const isActive = item === page.value + return { + isActive, + key: item, + page: n(item), + props: { + ref, + ellipsis: false, + icon: true, + disabled: !!props.disabled || +props.length < 2, + color: isActive ? props.activeColor : props.color, + 'aria-current': isActive, + 'aria-label': t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item), + onClick: (e: Event) => setValue(e, item), + }, + } + } + }) + }) + + const controls = computed(() => { + const prevDisabled = !!props.disabled || page.value <= start.value + const nextDisabled = !!props.disabled || page.value >= start.value + length.value - 1 + + return { + first: props.showFirstLastPage ? { + icon: isRtl.value ? props.lastIcon : props.firstIcon, + onClick: (e: Event) => setValue(e, start.value, 'first'), + disabled: prevDisabled, + 'aria-label': t(props.firstAriaLabel), + 'aria-disabled': prevDisabled, + } : undefined, + prev: { + icon: isRtl.value ? props.nextIcon : props.prevIcon, + onClick: (e: Event) => setValue(e, page.value - 1, 'prev'), + disabled: prevDisabled, + 'aria-label': t(props.previousAriaLabel), + 'aria-disabled': prevDisabled, + }, + next: { + icon: isRtl.value ? props.prevIcon : props.nextIcon, + onClick: (e: Event) => setValue(e, page.value + 1, 'next'), + disabled: nextDisabled, + 'aria-label': t(props.nextAriaLabel), + 'aria-disabled': nextDisabled, + }, + last: props.showFirstLastPage ? { + icon: isRtl.value ? props.firstIcon : props.lastIcon, + onClick: (e: Event) => setValue(e, start.value + length.value - 1, 'last'), + disabled: nextDisabled, + 'aria-label': t(props.lastAriaLabel), + 'aria-disabled': nextDisabled, + } : undefined, + } + }) + + function updateFocus () { + const currentIndex = page.value - start.value + refs.value[currentIndex]?.$el.focus() + } + + function onKeydown (e: KeyboardEvent) { + if (e.key === keyValues.left && !props.disabled && page.value > +props.start) { + page.value = page.value - 1 + nextTick(updateFocus) + } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) { + page.value = page.value + 1 + nextTick(updateFocus) + } + } + + useRender(() => ( + +
      + { props.showFirstLastPage && ( +
    • + { slots.first ? slots.first(controls.value.first!) : ( + + )} +
      • + )} + +
    • + { slots.prev ? slots.prev(controls.value.prev) : ( + + )} +
      • + + { items.value.map((item, index) => ( +
    • + { slots.item ? slots.item(item) : ( + { item.page } + )} +
      • + ))} + +
    • + { slots.next ? slots.next(controls.value.next) : ( + + )} +
      • + + { props.showFirstLastPage && ( +
    • + { slots.last ? slots.last(controls.value.last!) : ( + + )} +
      • + )} +
    +     + )) + + return {} + }, +}) + +export type VPagination = InstanceType diff --git a/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx b/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx new file mode 100644 index 0000000..7ce6887 --- /dev/null +++ b/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx @@ -0,0 +1,214 @@ +/// + +// Components +import { VPagination } from '..' +import { VLocaleProvider } from '@/components/VLocaleProvider' + +// Utilities +import { defineComponent, ref } from 'vue' +import { keyValues } from '@/util' + +describe('VPagination', () => { + it('should render set length', () => { + cy.mount(() => ( + + )) + + cy.get('.v-pagination__item').should('have.length', 3) + }) + + it('should react to mouse navigation', () => { + cy.mount(() => ( + + )) + + cy.get('.v-pagination__item').eq(1).find('.v-btn').trigger('click') + + cy.get('.v-pagination__item').eq(1).should('have.class', 'v-pagination__item--is-active') + + cy.get('.v-pagination__next').find('.v-btn').trigger('click') + + cy.get('.v-pagination__item').eq(2).should('have.class', 'v-pagination__item--is-active') + + cy.get('.v-pagination__prev').find('.v-btn').trigger('click') + cy.get('.v-pagination__prev').find('.v-btn').trigger('click') + + cy.get('.v-pagination__item').eq(0).should('have.class', 'v-pagination__item--is-active') + }) + + it('should react to keyboard navigation', () => { + cy.mount(defineComponent({ + setup () { + const model = ref(2) + return () => + }, + })) + + cy.get('.v-pagination__item').first().find('.v-btn').focus() + + cy.get('.v-pagination').trigger('keydown', { key: keyValues.left }) + + cy.get('.v-pagination__item').first().should('have.class', 'v-pagination__item--is-active') + + cy.get('.v-pagination').trigger('keydown', { key: keyValues.right }) + cy.get('.v-pagination').trigger('keydown', { key: keyValues.right }) + + cy.get('.v-pagination__item').last().should('have.class', 'v-pagination__item--is-active') + }) + + it('should render offset pages when using start prop', () => { + cy.mount(() => ( + + )) + + cy.get('.v-pagination__item .v-btn').eq(0).should('have.text', '3') + cy.get('.v-pagination__item .v-btn').eq(1).should('have.text', '4') + cy.get('.v-pagination__item .v-btn').eq(2).should('have.text', '5') + }) + + it('should render disabled buttons when length is zero', () => { + cy.mount(() => ( + + )) + + cy.get('.v-pagination__prev').find('.v-btn').should('have.attr', 'disabled') + cy.get('.v-pagination__next').find('.v-btn').should('have.attr', 'disabled') + }) + + it('should only render set number of visible items', () => { + cy.mount(() => ( + + )) + + // 5 buttons and 1 ellipsis + cy.get('.v-pagination__item').should('have.length', 6) + }) + + it('should limit items when not enough space', () => { + cy.viewport(500, 500) + + cy.mount(() => ( + + )) + + cy.get('.v-pagination__item').should('have.length', 6) + }) + + it('should render in RTL mode', () => { + cy.mount(() => ( + + + + )) + }) + + it('should use color props', () => { + cy.mount(() => ( + + )) + .get('.v-btn').eq(0).should('have.class', 'text-error') + .get('.v-btn').eq(1).should('have.class', 'text-success') + }) + + it('should work with 2 total visible items', () => { + cy.mount(() => ( + + )) + + cy.get('.v-pagination__item').should('have.length', 3) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '10') + + cy.get('.v-pagination__next').click() + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '2') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + + cy.get('.v-pagination__item').eq(4).click() + + cy.get('.v-pagination__item').should('have.length', 3) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '10') + + cy.get('.v-pagination__prev').click() + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '9') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + }) + + it('should work with even total visible items', () => { + cy.mount(() => ( + + )) + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(1).should('have.text', '2') + cy.get('.v-pagination__item').eq(2).should('have.text', '3') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + + cy.get('.v-pagination__next').click() + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(1).should('have.text', '2') + cy.get('.v-pagination__item').eq(2).should('have.text', '3') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + + cy.get('.v-pagination__item').eq(4).click() + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '8') + cy.get('.v-pagination__item').eq(3).should('have.text', '9') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + + cy.get('.v-pagination__prev').click() + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '8') + cy.get('.v-pagination__item').eq(3).should('have.text', '9') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + }) + + it('should work with odd total visible items', () => { + cy.mount(() => ( + + )) + + cy.get('.v-pagination__item').should('have.length', 4) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(1).should('have.text', '2') + cy.get('.v-pagination__item').eq(3).should('have.text', '10') + + cy.get('.v-pagination__next').click() + cy.get('.v-pagination__item').should('have.length', 4) + cy.get('.v-pagination__next').click() + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '3') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + + cy.get('.v-pagination__item').eq(4).click() + + cy.get('.v-pagination__item').should('have.length', 4) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '9') + cy.get('.v-pagination__item').eq(3).should('have.text', '10') + + cy.get('.v-pagination__prev').click() + cy.get('.v-pagination__item').should('have.length', 4) + cy.get('.v-pagination__prev').click() + + cy.get('.v-pagination__item').should('have.length', 5) + cy.get('.v-pagination__item').eq(0).should('have.text', '1') + cy.get('.v-pagination__item').eq(2).should('have.text', '8') + cy.get('.v-pagination__item').eq(4).should('have.text', '10') + }) +}) diff --git a/packages/vuetify/src/components/VPagination/_variables.scss b/packages/vuetify/src/components/VPagination/_variables.scss new file mode 100644 index 0000000..7dbddb7 --- /dev/null +++ b/packages/vuetify/src/components/VPagination/_variables.scss @@ -0,0 +1,2 @@ +// Defaults +$pagination-item-margin: .3rem !default; diff --git a/packages/vuetify/src/components/VPagination/index.ts b/packages/vuetify/src/components/VPagination/index.ts new file mode 100644 index 0000000..dd9102f --- /dev/null +++ b/packages/vuetify/src/components/VPagination/index.ts @@ -0,0 +1 @@ +export { VPagination } from './VPagination' diff --git a/packages/vuetify/src/components/VParallax/VParallax.sass b/packages/vuetify/src/components/VParallax/VParallax.sass new file mode 100644 index 0000000..68d41d6 --- /dev/null +++ b/packages/vuetify/src/components/VParallax/VParallax.sass @@ -0,0 +1,9 @@ +@use '../../styles/tools' + +@include tools.layer('components') + .v-parallax + position: relative + overflow: hidden + + &--active > .v-img__img + will-change: transform diff --git a/packages/vuetify/src/components/VParallax/VParallax.tsx b/packages/vuetify/src/components/VParallax/VParallax.tsx new file mode 100644 index 0000000..b7a58ce --- /dev/null +++ b/packages/vuetify/src/components/VParallax/VParallax.tsx @@ -0,0 +1,114 @@ +// Styles +import './VParallax.sass' + +// Components +import { VImg } from '@/components/VImg' + +// Composables +import { useDisplay } from '@/composables' +import { makeComponentProps } from '@/composables/component' +import { useIntersectionObserver } from '@/composables/intersectionObserver' +import { useResizeObserver } from '@/composables/resizeObserver' + +// Utilities +import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue' +import { clamp, genericComponent, getScrollParent, propsFactory, useRender } from '@/util' + +// Types +import type { VImgSlots } from '@/components/VImg/VImg' + +function floor (val: number) { + return Math.floor(Math.abs(val)) * Math.sign(val) +} + +export const makeVParallaxProps = propsFactory({ + scale: { + type: [Number, String], + default: 0.5, + }, + + ...makeComponentProps(), +}, 'VParallax') + +export const VParallax = genericComponent()({ + name: 'VParallax', + + props: makeVParallaxProps(), + + setup (props, { slots }) { + const { intersectionRef, isIntersecting } = useIntersectionObserver() + const { resizeRef, contentRect } = useResizeObserver() + const { height: displayHeight } = useDisplay() + + const root = ref() + + watchEffect(() => { + intersectionRef.value = resizeRef.value = root.value?.$el + }) + + let scrollParent: Element | Document + watch(isIntersecting, val => { + if (val) { + scrollParent = getScrollParent(intersectionRef.value) + scrollParent = scrollParent === document.scrollingElement ? document : scrollParent + scrollParent.addEventListener('scroll', onScroll, { passive: true }) + onScroll() + } else { + scrollParent.removeEventListener('scroll', onScroll) + } + }) + + onBeforeUnmount(() => { + scrollParent?.removeEventListener('scroll', onScroll) + }) + + watch(displayHeight, onScroll) + watch(() => contentRect.value?.height, onScroll) + + const scale = computed(() => { + return 1 - clamp(+props.scale) + }) + + let frame = -1 + function onScroll () { + if (!isIntersecting.value) return + + cancelAnimationFrame(frame) + frame = requestAnimationFrame(() => { + const el: HTMLElement | null = (root.value?.$el as Element).querySelector('.v-img__img') + if (!el) return + + const scrollHeight = scrollParent instanceof Document ? document.documentElement.clientHeight : scrollParent.clientHeight + const scrollPos = scrollParent instanceof Document ? window.scrollY : scrollParent.scrollTop + const top = intersectionRef.value!.getBoundingClientRect().top + scrollPos + const height = contentRect.value!.height + + const center = top + (height - scrollHeight) / 2 + const translate = floor((scrollPos - center) * scale.value) + const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height) + + el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`) + }) + } + + useRender(() => ( + + )) + + return {} + }, +}) + +export type VParallax = InstanceType diff --git a/packages/vuetify/src/components/VParallax/index.ts b/packages/vuetify/src/components/VParallax/index.ts new file mode 100644 index 0000000..483dd8b --- /dev/null +++ b/packages/vuetify/src/components/VParallax/index.ts @@ -0,0 +1 @@ +export { VParallax } from './VParallax' diff --git a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.sass b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.sass new file mode 100644 index 0000000..8cbb42a --- /dev/null +++ b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.sass @@ -0,0 +1,91 @@ +@use 'sass:list' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Elements + .v-progress-circular + align-items: center + display: inline-flex + justify-content: center + position: relative + vertical-align: middle + + > svg + width: 100% + height: 100% + margin: auto + position: absolute + top: 0 + bottom: 0 + left: 0 + right: 0 + z-index: 0 + + .v-progress-circular__content + align-items: center + display: flex + justify-content: center + + .v-progress-circular__underlay + color: $progress-circular-underlay-color + stroke: currentColor + z-index: 1 + + .v-progress-circular__overlay + stroke: currentColor + transition: $progress-circular-overlay-transition + z-index: 2 + + // Modifiers + .v-progress-circular + @each $name, $multiplier in $progress-circular-sizes + $size: $progress-circular-size + (settings.$size-scale * $multiplier) + + &--size-#{$name} + height: $size + width: $size + + .v-progress-circular--indeterminate + > svg + animation: $progress-circular-rotate-animation + transform-origin: center center + transition: $progress-circular-intermediate-svg-transition + + .v-progress-circular__overlay + animation: $progress-circular-rotate-dash, $progress-circular-rotate-animation + stroke-dasharray: 25, 200 + stroke-dashoffset: 0 + stroke-linecap: round + transform-origin: center center + transform: $progress-circular-overlay-transform + + .v-progress-circular--disable-shrink + > svg + animation-duration: list.nth($progress-circular-rotate-animation, 2) * .5 + + .v-progress-circular__overlay + animation: none + + .v-progress-circular--indeterminate:not(.v-progress-circular--visible) + > svg, + .v-progress-circular__overlay + animation-play-state: paused !important + + @keyframes progress-circular-dash + 0% + stroke-dasharray: 1, 200 + stroke-dashoffset: 0px + + 50% + stroke-dasharray: 100, 200 + stroke-dashoffset: -15px + + 100% + stroke-dasharray: 100, 200 + stroke-dashoffset: -124px + + @keyframes progress-circular-rotate + 100% + transform: rotate(270deg) diff --git a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx new file mode 100644 index 0000000..80892cb --- /dev/null +++ b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx @@ -0,0 +1,155 @@ +// Styles +import './VProgressCircular.sass' + +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { useIntersectionObserver } from '@/composables/intersectionObserver' +import { useResizeObserver } from '@/composables/resizeObserver' +import { makeSizeProps, useSize } from '@/composables/size' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, ref, toRef, watchEffect } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export const makeVProgressCircularProps = propsFactory({ + bgColor: String, + color: String, + indeterminate: [Boolean, String] as PropType, + modelValue: { + type: [Number, String], + default: 0, + }, + rotate: { + type: [Number, String], + default: 0, + }, + width: { + type: [Number, String], + default: 4, + }, + + ...makeComponentProps(), + ...makeSizeProps(), + ...makeTagProps({ tag: 'div' }), + ...makeThemeProps(), +}, 'VProgressCircular') + +type VProgressCircularSlots = { + default: { value: number } +} + +export const VProgressCircular = genericComponent()({ + name: 'VProgressCircular', + + props: makeVProgressCircularProps(), + + setup (props, { slots }) { + const MAGIC_RADIUS_CONSTANT = 20 + const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT + + const root = ref() + + const { themeClasses } = provideTheme(props) + const { sizeClasses, sizeStyles } = useSize(props) + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')) + const { textColorClasses: underlayColorClasses, textColorStyles: underlayColorStyles } = useTextColor(toRef(props, 'bgColor')) + const { intersectionRef, isIntersecting } = useIntersectionObserver() + const { resizeRef, contentRect } = useResizeObserver() + + const normalizedValue = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue)))) + const width = computed(() => Number(props.width)) + const size = computed(() => { + // Get size from element if size prop value is small, large etc + return sizeStyles.value + ? Number(props.size) + : contentRect.value + ? contentRect.value.width + : Math.max(width.value, 32) + }) + const diameter = computed(() => (MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value)) * 2) + const strokeWidth = computed(() => width.value / size.value * diameter.value) + const strokeDashOffset = computed(() => convertToUnit(((100 - normalizedValue.value) / 100) * CIRCUMFERENCE)) + + watchEffect(() => { + intersectionRef.value = root.value + resizeRef.value = root.value + }) + + useRender(() => ( + + + + + + + + { slots.default && ( +
    + { slots.default({ value: normalizedValue.value }) } +
    + )} +     + )) + + return {} + }, +}) + +export type VProgressCircular = InstanceType diff --git a/packages/vuetify/src/components/VProgressCircular/_variables.scss b/packages/vuetify/src/components/VProgressCircular/_variables.scss new file mode 100644 index 0000000..4bc1156 --- /dev/null +++ b/packages/vuetify/src/components/VProgressCircular/_variables.scss @@ -0,0 +1,17 @@ +// VProgressCircular +$progress-circular-intermediate-svg-transition: all 0.2s ease-in-out !default; +$progress-circular-overlay-transition: all 0.2s ease-in-out, stroke-width 0s !default; +$progress-circular-overlay-transform: rotate(calc(-90deg)) !default; +$progress-circular-rotate-animation: progress-circular-rotate 1.4s linear infinite !default; +$progress-circular-rotate-dash: progress-circular-dash 1.4s ease-in-out infinite !default; +$progress-circular-size: 32px !default; +$progress-circular-underlay-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default; + +// Lists +$progress-circular-sizes: ( + 'x-small': -2, + 'small': -1, + 'default': 0, + 'large': 2, + 'x-large': 4 +) !default; diff --git a/packages/vuetify/src/components/VProgressCircular/index.ts b/packages/vuetify/src/components/VProgressCircular/index.ts new file mode 100644 index 0000000..20ea4d6 --- /dev/null +++ b/packages/vuetify/src/components/VProgressCircular/index.ts @@ -0,0 +1 @@ +export { VProgressCircular } from './VProgressCircular' diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass new file mode 100644 index 0000000..4b5debf --- /dev/null +++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.sass @@ -0,0 +1,209 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Block + .v-progress-linear + background: transparent + overflow: hidden + position: relative + transition: $progress-linear-transition + width: 100% + + &--rounded + @include tools.rounded($progress-linear-border-radius) + + @media (forced-colors: active) + border: thin solid buttontext + + // Elements + .v-progress-linear__background, + .v-progress-linear__buffer + background: $progress-linear-background + bottom: 0 + left: 0 + opacity: $progress-linear-background-opacity + position: absolute + top: 0 + width: 100% + transition-property: width, left, right + transition: inherit + + @media (forced-colors: active) + .v-progress-linear__buffer + background-color: highlight + opacity: $progress-linear-stream-opacity + + .v-progress-linear__content + align-items: center + display: flex + height: 100% + justify-content: center + left: 0 + pointer-events: none + position: absolute + top: 0 + width: 100% + + .v-progress-linear__determinate, + .v-progress-linear__indeterminate + background: $progress-linear-background + + @media (forced-colors: active) + background-color: highlight + + .v-progress-linear__determinate + height: inherit + left: 0 + position: absolute + transition: inherit + transition-property: width, left, right + + .v-progress-linear__indeterminate + .long, .short + animation-play-state: paused + animation-duration: $progress-linear-indeterminate-animation-duration + animation-iteration-count: infinite + bottom: 0 + height: inherit + left: 0 + position: absolute + right: auto + top: 0 + width: auto + + .long + animation-name: indeterminate-ltr + + .short + animation-name: indeterminate-short-ltr + + .v-progress-linear__stream + animation: $progress-linear-stream-animation + animation-play-state: paused + bottom: 0 + left: auto + opacity: $progress-linear-stream-opacity + pointer-events: none + position: absolute + transition: inherit + transition-property: width, left, right + + // Modifiers + .v-progress-linear--reverse + .v-progress-linear__background, + .v-progress-linear__determinate, + .v-progress-linear__content + left: auto + right: 0 + + .v-progress-linear__indeterminate + .long, .short + left: auto + right: 0 + + .long + animation-name: indeterminate-rtl + + .short + animation-name: indeterminate-short-rtl + + .v-progress-linear__stream + right: auto + + .v-progress-linear--absolute, + .v-progress-linear--fixed + left: 0 + z-index: 1 + + .v-progress-linear--absolute + position: absolute + + .v-progress-linear--fixed + position: fixed + + .v-progress-linear--rounded + @include tools.rounded($progress-linear-border-radius) + + &.v-progress-linear--rounded-bar + .v-progress-linear__determinate, + .v-progress-linear__indeterminate + border-radius: inherit + + .v-progress-linear--striped + .v-progress-linear__determinate + animation: $progress-linear-striped-animation + background-image: $progress-linear-stripe-gradient + background-repeat: repeat + background-size: $progress-linear-striped-size + + .v-progress-linear--active + .v-progress-linear__indeterminate + .long, .short + animation-play-state: running + + .v-progress-linear__stream + animation-play-state: running + + .v-progress-linear--rounded-bar + .v-progress-linear__determinate, + .v-progress-linear__indeterminate, + .v-progress-linear__stream + .v-progress-linear__background + @include tools.rounded($progress-linear-border-radius) + + .v-progress-linear__determinate + border-start-start-radius: 0 + border-end-start-radius: 0 + + // Keyframes + @keyframes indeterminate-ltr + 0% + left: -90% + right: 100% + 60% + left: -90% + right: 100% + 100% + left: 100% + right: -35% + + @keyframes indeterminate-rtl + 0% + left: 100% + right: -90% + 60% + left: 100% + right: -90% + 100% + left: -35% + right: 100% + + @keyframes indeterminate-short-ltr + 0% + left: -200% + right: 100% + 60% + left: 107% + right: -8% + 100% + left: 107% + right: -8% + + @keyframes indeterminate-short-rtl + 0% + left: 100% + right: -200% + 60% + left: -8% + right: 107% + 100% + left: -8% + right: 107% + + @keyframes stream + to + transform: translateX(var(--v-progress-linear-stream-to)) + + @keyframes progress-linear-stripes + 0% + background-position-x: $progress-linear-striped-size diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx new file mode 100644 index 0000000..62a43b9 --- /dev/null +++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx @@ -0,0 +1,235 @@ +// Styles +import './VProgressLinear.sass' + +// Composables +import { useBackgroundColor, useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { useIntersectionObserver } from '@/composables/intersectionObserver' +import { useRtl } from '@/composables/locale' +import { makeLocationProps, useLocation } from '@/composables/location' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, Transition } from 'vue' +import { clamp, convertToUnit, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util' + +type VProgressLinearSlots = { + default: { value: number, buffer: number } +} + +export const makeVProgressLinearProps = propsFactory({ + absolute: Boolean, + active: { + type: Boolean, + default: true, + }, + bgColor: String, + bgOpacity: [Number, String], + bufferValue: { + type: [Number, String], + default: 0, + }, + bufferColor: String, + bufferOpacity: [Number, String], + clickable: Boolean, + color: String, + height: { + type: [Number, String], + default: 4, + }, + indeterminate: Boolean, + max: { + type: [Number, String], + default: 100, + }, + modelValue: { + type: [Number, String], + default: 0, + }, + opacity: [Number, String], + reverse: Boolean, + stream: Boolean, + striped: Boolean, + roundedBar: Boolean, + + ...makeComponentProps(), + ...makeLocationProps({ location: 'top' } as const), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), +}, 'VProgressLinear') + +export const VProgressLinear = genericComponent()({ + name: 'VProgressLinear', + + props: makeVProgressLinearProps(), + + emits: { + 'update:modelValue': (value: number) => true, + }, + + setup (props, { slots }) { + const progress = useProxiedModel(props, 'modelValue') + const { isRtl, rtlClasses } = useRtl() + const { themeClasses } = provideTheme(props) + const { locationStyles } = useLocation(props) + const { textColorClasses, textColorStyles } = useTextColor(props, 'color') + const { + backgroundColorClasses, + backgroundColorStyles, + } = useBackgroundColor(computed(() => props.bgColor || props.color)) + const { + backgroundColorClasses: bufferColorClasses, + backgroundColorStyles: bufferColorStyles, + } = useBackgroundColor(computed(() => props.bufferColor || props.bgColor || props.color)) + const { + backgroundColorClasses: barColorClasses, + backgroundColorStyles: barColorStyles, + } = useBackgroundColor(props, 'color') + const { roundedClasses } = useRounded(props) + const { intersectionRef, isIntersecting } = useIntersectionObserver() + + const max = computed(() => parseFloat(props.max)) + const height = computed(() => parseFloat(props.height)) + const normalizedBuffer = computed(() => clamp(parseFloat(props.bufferValue) / max.value * 100, 0, 100)) + const normalizedValue = computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100)) + const isReversed = computed(() => isRtl.value !== props.reverse) + const transition = computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition') + const isForcedColorsModeActive = IN_BROWSER && window.matchMedia?.('(forced-colors: active)').matches + + function handleClick (e: MouseEvent) { + if (!intersectionRef.value) return + + const { left, right, width } = intersectionRef.value.getBoundingClientRect() + const value = isReversed.value ? (width - e.clientX) + (right - width) : e.clientX - left + + progress.value = Math.round(value / width * max.value) + } + + useRender(() => ( + + { props.stream && ( +
    + )} + +
    + +
    + + + { !props.indeterminate ? ( +
    + ) : ( +
    + {['long', 'short'].map(bar => ( +
    + ))} +
    + )} + + + { slots.default && ( +
    + { slots.default({ value: normalizedValue.value, buffer: normalizedBuffer.value }) } +
    + )} + + )) + + return {} + }, +}) + +export type VProgressLinear = InstanceType diff --git a/packages/vuetify/src/components/VProgressLinear/__tests__/VProgressLinear.spec.cy.tsx b/packages/vuetify/src/components/VProgressLinear/__tests__/VProgressLinear.spec.cy.tsx new file mode 100644 index 0000000..f2f0891 --- /dev/null +++ b/packages/vuetify/src/components/VProgressLinear/__tests__/VProgressLinear.spec.cy.tsx @@ -0,0 +1,143 @@ +/// + +// Components +import { VProgressLinear } from '../VProgressLinear' +import { CenteredGrid } from '@/../cypress/templates' +import { VLocaleProvider } from '@/components/VLocaleProvider' + +// Utilities +import { defineComponent, ref } from 'vue' + +describe('VProgressLinear', () => { + it('supports modelValue prop', () => { + cy.mount(() => ( + + + + )) + .get('.v-progress-linear__determinate') + .should('have.css', 'width', '25px') + .should('have.css', 'left', '0px') + }) + + it('supports RTL mode', () => { + cy.mount(() => ( + + + + + + )) + .get('.v-progress-linear__determinate') + .should('have.css', 'width', '25px') + .should('have.css', 'right', '0px') + }) + + it('supports reverse prop', () => { + cy.mount(() => ( + + + + )) + .get('.v-progress-linear__determinate') + .should('have.css', 'width', '25px') + .should('have.css', 'right', '0px') + }) + + it('supports reverse prop and RTL mode together', () => { + cy.mount(() => ( + + + + + + )) + .get('.v-progress-linear__determinate') + .should('have.css', 'width', '25px') + .should('have.css', 'left', '0px') + }) + + it('supports color props', () => { + cy.mount(() => ( + + + + )) + .get('.v-progress-linear__determinate') + .should('have.class', 'bg-secondary') + .get('.v-progress-linear__background') + .should('have.class', 'bg-error') + }) + + it('supports indeterminate prop', () => { + cy.mount(() => ( + + + + )) + .get('.v-progress-linear__indeterminate') + .should('exist') + }) + + it('supports bufferValue prop', () => { + cy.mount(() => ( + + + + )) + .get('.v-progress-linear__buffer') + .should('have.css', 'width', '50px') + }) + + it('supports height prop', () => { + cy.mount(() => ( + + + + )) + .get('.v-progress-linear') + .should('have.css', 'height', '50px') + }) + + it('supports active prop', () => { + cy.mount(() => ( + + + + )) + .get('.v-progress-linear') + .should('have.css', 'height', '0px') + }) + + it('supports clickable prop', () => { + cy.mount(defineComponent({ + setup () { + const model = ref(0) + return () => ( + + + + ) + }, + })) + .get('.v-progress-linear') + .click('center') + .get('.v-progress-linear__determinate') + .should('have.css', 'width', '50px') + }) + + it('supports default slot', () => { + cy.mount(() => ( + + + {{ + default: (props: any) =>
    { props.value }%
    , + }} +     +     + )) + .get('.v-progress-linear__content') + .should('exist') + .should('have.text', '25%') + }) +}) diff --git a/packages/vuetify/src/components/VProgressLinear/_variables.scss b/packages/vuetify/src/components/VProgressLinear/_variables.scss new file mode 100644 index 0000000..51d1b5d --- /dev/null +++ b/packages/vuetify/src/components/VProgressLinear/_variables.scss @@ -0,0 +1,25 @@ +@use '../../styles/settings'; + +// VProgressLinear +$progress-linear-background: currentColor !default; +$progress-linear-background-background: $progress-linear-background !default; +$progress-linear-background-opacity: var(--v-border-opacity) !default; +$progress-linear-border-radius: map-get(settings.$rounded, 'pill') !default; +$progress-linear-stream-opacity: 0.3 !default; +$progress-linear-stripe-background-size: 40px 40px !default; +$progress-linear-stream-border-width: 4px !default; +$progress-linear-stripe-gradient: linear-gradient( + 135deg, + hsla(0, 0%, 100%, .25) 25%, + transparent 0, + transparent 50%, + hsla(0, 0%, 100%, .25) 0, + hsla(0, 0%, 100%, .25) 75%, + transparent 0, + transparent +) !default; +$progress-linear-indeterminate-animation-duration: 2.2s !default; +$progress-linear-stream-animation: stream .25s infinite linear !default; +$progress-linear-striped-animation: progress-linear-stripes 1s infinite linear !default; +$progress-linear-striped-size: var(--v-progress-linear-height) !default; +$progress-linear-transition: .2s settings.$standard-easing !default; diff --git a/packages/vuetify/src/components/VProgressLinear/index.ts b/packages/vuetify/src/components/VProgressLinear/index.ts new file mode 100644 index 0000000..9e3b045 --- /dev/null +++ b/packages/vuetify/src/components/VProgressLinear/index.ts @@ -0,0 +1 @@ +export { VProgressLinear } from './VProgressLinear' diff --git a/packages/vuetify/src/components/VRadio/VRadio.tsx b/packages/vuetify/src/components/VRadio/VRadio.tsx new file mode 100644 index 0000000..a1a6b82 --- /dev/null +++ b/packages/vuetify/src/components/VRadio/VRadio.tsx @@ -0,0 +1,44 @@ +// Components +import { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl' + +export const makeVRadioProps = propsFactory({ + ...makeVSelectionControlProps({ + falseIcon: '$radioOff', + trueIcon: '$radioOn', + }), +}, 'VRadio') + +export const VRadio = genericComponent()({ + name: 'VRadio', + + props: makeVRadioProps(), + + setup (props, { slots }) { + useRender(() => { + const controlProps = VSelectionControl.filterProps(props) + + return ( + + ) + }) + + return {} + }, +}) + +export type VRadio = InstanceType diff --git a/packages/vuetify/src/components/VRadio/index.ts b/packages/vuetify/src/components/VRadio/index.ts new file mode 100644 index 0000000..b383274 --- /dev/null +++ b/packages/vuetify/src/components/VRadio/index.ts @@ -0,0 +1 @@ +export { VRadio } from './VRadio' diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.sass b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.sass new file mode 100644 index 0000000..43ecd1c --- /dev/null +++ b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.sass @@ -0,0 +1,17 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-radio-group + > .v-input__control + flex-direction: column + + > .v-label + margin-inline-start: $radio-group-label-margin-inline-start + + + .v-selection-control-group + padding-inline-start: $radio-group-label-selection-group-padding-inline + margin-top: $radio-group-label-selection-group-margin-top + + .v-input__details + padding-inline: $radio-group-details-padding-inline diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx new file mode 100644 index 0000000..fe9af1f --- /dev/null +++ b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx @@ -0,0 +1,140 @@ +// Styles +import './VRadioGroup.sass' + +// Components +import { makeVInputProps, VInput } from '@/components/VInput/VInput' +import { VLabel } from '@/components/VLabel' +import { VSelectionControl } from '@/components/VSelectionControl' +import { makeSelectionControlGroupProps, VSelectionControlGroup } from '@/components/VSelectionControlGroup/VSelectionControlGroup' + +// Composables +import { IconValue } from '@/composables/icons' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed } from 'vue' +import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util' + +// Types +import type { VInputSlots } from '@/components/VInput/VInput' +import type { GenericProps } from '@/util' + +export type VRadioGroupSlots = Omit & { + default: never + label: { + label: string | undefined + props: Record + } +} + +export const makeVRadioGroupProps = propsFactory({ + height: { + type: [Number, String], + default: 'auto', + }, + + ...makeVInputProps(), + ...omit(makeSelectionControlGroupProps(), ['multiple']), + + trueIcon: { + type: IconValue, + default: '$radioOn', + }, + falseIcon: { + type: IconValue, + default: '$radioOff', + }, + type: { + type: String, + default: 'radio', + }, +}, 'VRadioGroup') + +export const VRadioGroup = genericComponent( + props: { + modelValue?: T | null + 'onUpdate:modelValue'?: (value: T | null) => void + }, + slots: VRadioGroupSlots, +) => GenericProps>()({ + name: 'VRadioGroup', + + inheritAttrs: false, + + props: makeVRadioGroupProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { attrs, slots }) { + const uid = getUid() + const id = computed(() => props.id || `radio-group-${uid}`) + const model = useProxiedModel(props, 'modelValue') + + useRender(() => { + const [rootAttrs, controlAttrs] = filterInputAttrs(attrs) + const inputProps = VInput.filterProps(props) + const controlProps = VSelectionControl.filterProps(props) + const label = slots.label + ? slots.label({ + label: props.label, + props: { for: id.value }, + }) + : props.label + + return ( + + {{ + ...slots, + default: ({ + id, + messagesId, + isDisabled, + isReadonly, + }) => ( + <> + { label && ( + + { label } + + )} + + + + ), + }} + + ) + }) + + return {} + }, +}) + +export type VRadioGroup = InstanceType diff --git a/packages/vuetify/src/components/VRadioGroup/_variables.scss b/packages/vuetify/src/components/VRadioGroup/_variables.scss new file mode 100644 index 0000000..7a524a1 --- /dev/null +++ b/packages/vuetify/src/components/VRadioGroup/_variables.scss @@ -0,0 +1,4 @@ +$radio-group-details-padding-inline: 16px !default; +$radio-group-label-margin-inline-start: 16px !default; +$radio-group-label-selection-group-margin-top: 8px !default; +$radio-group-label-selection-group-padding-inline: 6px !default; diff --git a/packages/vuetify/src/components/VRadioGroup/index.ts b/packages/vuetify/src/components/VRadioGroup/index.ts new file mode 100644 index 0000000..229bcb5 --- /dev/null +++ b/packages/vuetify/src/components/VRadioGroup/index.ts @@ -0,0 +1 @@ +export { VRadioGroup } from './VRadioGroup' diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx new file mode 100644 index 0000000..a3e4e0a --- /dev/null +++ b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx @@ -0,0 +1,280 @@ +// Styles +import '../VSlider/VSlider.sass' + +// Components +import { makeVInputProps, VInput } from '@/components/VInput/VInput' +import { VLabel } from '@/components/VLabel' +import { getOffset, makeSliderProps, useSlider, useSteps } from '@/components/VSlider/slider' +import { VSliderThumb } from '@/components/VSlider/VSliderThumb' +import { VSliderTrack } from '@/components/VSlider/VSliderTrack' + +// Composables +import { makeFocusProps, useFocus } from '@/composables/focus' +import { useRtl } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, ref } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType, WritableComputedRef } from 'vue' +import type { VSliderSlots } from '../VSlider/VSlider' + +export const makeVRangeSliderProps = propsFactory({ + ...makeFocusProps(), + ...makeVInputProps(), + ...makeSliderProps(), + + strict: Boolean, + modelValue: { + type: Array as PropType, + default: () => ([0, 0]), + }, +}, 'VRangeSlider') + +export const VRangeSlider = genericComponent()({ + name: 'VRangeSlider', + + props: makeVRangeSliderProps(), + + emits: { + 'update:focused': (value: boolean) => true, + 'update:modelValue': (value: [number, number]) => true, + end: (value: [number, number]) => true, + start: (value: [number, number]) => true, + }, + + setup (props, { slots, emit }) { + const startThumbRef = ref() + const stopThumbRef = ref() + const inputRef = ref() + const { rtlClasses } = useRtl() + + function getActiveThumb (e: MouseEvent | TouchEvent) { + if (!startThumbRef.value || !stopThumbRef.value) return + + const startOffset = getOffset(e, startThumbRef.value.$el, props.direction) + const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction) + + const a = Math.abs(startOffset) + const b = Math.abs(stopOffset) + + return (a < b || (a === b && startOffset < 0)) ? startThumbRef.value.$el : stopThumbRef.value.$el + } + + const steps = useSteps(props) + + const model = useProxiedModel( + props, + 'modelValue', + undefined, + arr => { + if (!arr?.length) return [0, 0] + + return arr.map(value => steps.roundValue(value)) + }, + ) as WritableComputedRef<[number, number]> & { readonly externalValue: number[] } + + const { + activeThumbRef, + hasLabels, + max, + min, + mousePressed, + onSliderMousedown, + onSliderTouchstart, + position, + trackContainerRef, + readonly, + } = useSlider({ + props, + steps, + onSliderStart: () => { + emit('start', model.value) + }, + onSliderEnd: ({ value }) => { + const newValue: [number, number] = activeThumbRef.value === startThumbRef.value?.$el + ? [value, model.value[1]] + : [model.value[0], value] + + if (!props.strict && newValue[0] < newValue[1]) { + model.value = newValue + } + + emit('end', model.value) + }, + onSliderMove: ({ value }) => { + const [start, stop] = model.value + + if (!props.strict && start === stop && start !== min.value) { + activeThumbRef.value = value > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el + activeThumbRef.value?.focus() + } + + if (activeThumbRef.value === startThumbRef.value?.$el) { + model.value = [Math.min(value, stop), stop] + } else { + model.value = [start, Math.max(start, value)] + } + }, + getActiveThumb, + }) + + const { isFocused, focus, blur } = useFocus(props) + const trackStart = computed(() => position(model.value[0])) + const trackStop = computed(() => position(model.value[1])) + + useRender(() => { + const inputProps = VInput.filterProps(props) + const hasPrepend = !!(props.label || slots.label || slots.prepend) + + return ( + + {{ + ...slots, + prepend: hasPrepend ? slotProps => ( + <> + { slots.label?.(slotProps) ?? ( + props.label + ? ( + + ) : undefined + )} + + { slots.prepend?.(slotProps) } + + ) : undefined, + default: ({ id, messagesId }) => ( +
    + + + + + + {{ 'tick-label': slots['tick-label'] }} + + + (model.value = [v, model.value[1]]) } + onFocus={ (e: FocusEvent) => { + focus() + activeThumbRef.value = startThumbRef.value?.$el + + // Make sure second thumb is focused if + // the thumbs are on top of each other + // and they are both at minimum value + // but only if focused from outside. + if ( + model.value[0] === model.value[1] && + model.value[1] === min.value && + e.relatedTarget !== stopThumbRef.value?.$el + ) { + startThumbRef.value?.$el.blur() + stopThumbRef.value?.$el.focus() + } + }} + onBlur={ () => { + blur() + activeThumbRef.value = undefined + }} + min={ min.value } + max={ model.value[1] } + position={ trackStart.value } + ripple={ props.ripple } + > + {{ 'thumb-label': slots['thumb-label'] }} + + + (model.value = [model.value[0], v]) } + onFocus={ (e: FocusEvent) => { + focus() + activeThumbRef.value = stopThumbRef.value?.$el + + // Make sure first thumb is focused if + // the thumbs are on top of each other + // and they are both at maximum value + // but only if focused from outside. + if ( + model.value[0] === model.value[1] && + model.value[0] === max.value && + e.relatedTarget !== startThumbRef.value?.$el + ) { + stopThumbRef.value?.$el.blur() + startThumbRef.value?.$el.focus() + } + }} + onBlur={ () => { + blur() + activeThumbRef.value = undefined + }} + min={ model.value[0] } + max={ max.value } + position={ trackStop.value } + ripple={ props.ripple } + > + {{ 'thumb-label': slots['thumb-label'] }} + +
    + ), + }} +     + ) + }) + + return {} + }, +}) + +export type VRangeSlider = InstanceType diff --git a/packages/vuetify/src/components/VRangeSlider/index.ts b/packages/vuetify/src/components/VRangeSlider/index.ts new file mode 100644 index 0000000..0337c29 --- /dev/null +++ b/packages/vuetify/src/components/VRangeSlider/index.ts @@ -0,0 +1 @@ +export { VRangeSlider } from './VRangeSlider' diff --git a/packages/vuetify/src/components/VRating/VRating.sass b/packages/vuetify/src/components/VRating/VRating.sass new file mode 100644 index 0000000..c4bfb87 --- /dev/null +++ b/packages/vuetify/src/components/VRating/VRating.sass @@ -0,0 +1,59 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Block + .v-rating + max-width: 100% + display: inline-flex + white-space: $rating-white-space + + &--readonly + pointer-events: none + + // Element + .v-rating__wrapper + align-items: $rating-item-align-items + display: inline-flex + flex-direction: column + + &--bottom + flex-direction: column-reverse + + .v-rating__item + display: inline-flex + position: relative + + label + cursor: pointer + + .v-btn--variant-plain + opacity: $rating-item-button-opacity + + .v-btn + transition-property: $rating-item-button-transition-property + + .v-icon + transition: inherit + transition-timing-function: $rating-item-transition-timing-function + + &:hover:not(.v-rating__item--focused) + .v-rating--hover & + .v-btn + transform: $rating-item-icon-transform + + &--half + overflow: hidden + position: absolute + clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%) + z-index: 1 + + .v-btn__overlay, + &:hover .v-btn__overlay + opacity: 0 + + .v-rating__hidden + height: 0 + opacity: 0 + position: absolute + width: 0 diff --git a/packages/vuetify/src/components/VRating/VRating.tsx b/packages/vuetify/src/components/VRating/VRating.tsx new file mode 100644 index 0000000..062c0b2 --- /dev/null +++ b/packages/vuetify/src/components/VRating/VRating.tsx @@ -0,0 +1,262 @@ +// Styles +import './VRating.sass' + +// Components +import { VBtn } from '@/components/VBtn' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps } from '@/composables/density' +import { IconValue } from '@/composables/icons' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeSizeProps } from '@/composables/size' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, shallowRef } from 'vue' +import { clamp, createRange, genericComponent, getUid, propsFactory, useRender } from '@/util' + +// Types +import type { Prop } from 'vue' +import type { Variant } from '@/composables/variant' + +type VRatingItemSlot = { + value: number + index: number + isFilled: boolean + isHovered: boolean + icon: IconValue + color?: string + props: Record + rating: number +} + +type VRatingItemLabelSlot = { + value: number + index: number + label?: string +} + +type VRatingSlots = { + item: VRatingItemSlot + 'item-label': VRatingItemLabelSlot +} + +export const makeVRatingProps = propsFactory({ + name: String, + itemAriaLabel: { + type: String, + default: '$vuetify.rating.ariaLabel.item', + }, + activeColor: String, + color: String, + clearable: Boolean, + disabled: Boolean, + emptyIcon: { + type: IconValue, + default: '$ratingEmpty', + }, + fullIcon: { + type: IconValue, + default: '$ratingFull', + }, + halfIncrements: Boolean, + hover: Boolean, + length: { + type: [Number, String], + default: 5, + }, + readonly: Boolean, + modelValue: { + type: [Number, String], + default: 0, + }, + itemLabels: Array as Prop, + itemLabelPosition: { + type: String, + default: 'top', + validator: (v: any) => ['top', 'bottom'].includes(v), + }, + ripple: Boolean, + + ...makeComponentProps(), + ...makeDensityProps(), + ...makeSizeProps(), + ...makeTagProps(), + ...makeThemeProps(), +}, 'VRating') + +export const VRating = genericComponent()({ + name: 'VRating', + + props: makeVRatingProps(), + + emits: { + 'update:modelValue': (value: number | string) => true, + }, + + setup (props, { slots }) { + const { t } = useLocale() + const { themeClasses } = provideTheme(props) + const rating = useProxiedModel(props, 'modelValue') + const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length)) + + const range = computed(() => createRange(Number(props.length), 1)) + const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v])) + const hoverIndex = shallowRef(-1) + + const itemState = computed(() => increments.value.map(value => { + const isHovering = props.hover && hoverIndex.value > -1 + const isFilled = normalizedValue.value >= value + const isHovered = hoverIndex.value >= value + const isFullIcon = isHovering ? isHovered : isFilled + const icon = isFullIcon ? props.fullIcon : props.emptyIcon + const activeColor = props.activeColor ?? props.color + const color = (isFilled || isHovered) ? activeColor : props.color + + return { isFilled, isHovered, icon, color } + })) + + const eventState = computed(() => [0, ...increments.value].map(value => { + function onMouseenter () { + hoverIndex.value = value + } + + function onMouseleave () { + hoverIndex.value = -1 + } + + function onClick () { + if (props.disabled || props.readonly) return + rating.value = normalizedValue.value === value && props.clearable ? 0 : value + } + + return { + onMouseenter: props.hover ? onMouseenter : undefined, + onMouseleave: props.hover ? onMouseleave : undefined, + onClick, + } + })) + + const name = computed(() => props.name ?? `v-rating-${getUid()}`) + + function VRatingItem ({ value, index, showStar = true }: { value: number, index: number, showStar?: boolean }) { + const { onMouseenter, onMouseleave, onClick } = eventState.value[index + 1] + const id = `${name.value}-${String(value).replace('.', '-')}` + const btnProps = { + color: itemState.value[index]?.color, + density: props.density, + disabled: props.disabled, + icon: itemState.value[index]?.icon, + ripple: props.ripple, + size: props.size, + variant: 'plain' as Variant, + } + + return ( + <> + + + + + ) + } + + function createLabel (labelProps: { value: number, index: number, label?: string }) { + if (slots['item-label']) return slots['item-label'](labelProps) + + if (labelProps.label) return { labelProps.label } + + return   + } + + useRender(() => { + const hasLabels = !!props.itemLabels?.length || slots['item-label'] + + return ( + + + + { range.value.map((value, i) => ( +
    + { + hasLabels && props.itemLabelPosition === 'top' + ? createLabel({ value, index: i, label: props.itemLabels?.[i] }) + : undefined + } +
    + { props.halfIncrements ? ( + <> + + + + ) : ( + + )} +
    + { + hasLabels && props.itemLabelPosition === 'bottom' + ? createLabel({ value, index: i, label: props.itemLabels?.[i] }) + : undefined + } +
    + ))} +     + ) + }) + + return {} + }, +}) + +export type VRating = InstanceType diff --git a/packages/vuetify/src/components/VRating/__tests__/VRating.spec.cy.tsx b/packages/vuetify/src/components/VRating/__tests__/VRating.spec.cy.tsx new file mode 100644 index 0000000..5985bb3 --- /dev/null +++ b/packages/vuetify/src/components/VRating/__tests__/VRating.spec.cy.tsx @@ -0,0 +1,175 @@ +/// + +// Components +import { Application } from '../../../../cypress/templates' +import { VRating } from '../VRating' +import { VBtn } from '@/components/VBtn' + +describe('VRating', () => { + it('should response to user interaction', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-rating__item .v-btn').eq(3).click() + .emitted(VRating, 'update:modelValue').should('deep.equal', [[4]]) + }) + + it('should respond to prop value changes', () => { + cy.mount(({ rating }: any) => ( + + + + )) + + cy.setProps({ rating: 4 }) + cy.get('.v-rating__item .v-icon').then(icons => { + icons.each((i, el) => { + expect(el.outerHTML).to.equal(icons[i < 4 ? 0 : 4].outerHTML) + }) + }) + }) + + it('should clear value if using clearable prop', () => { + cy.mount(({ clearable }: any) => ( + + + + )) + + cy.get('.v-rating__item .v-btn').eq(1).click() + .emitted(VRating, 'update:modelValue').should('deep.equal', [[2]]) + .get('.v-rating__item .v-btn').eq(1).click() + .emitted(VRating, 'update:modelValue').should('deep.equal', [[2]]) + .setProps({ clearable: true }) + .get('.v-rating__item .v-btn').eq(1).click() + .emitted(VRating, 'update:modelValue').should('deep.equal', [[2], [0]]) + }) + + it('should not react to events when readonly', done => { + cy.mount(() => ( + + + + )) + + cy.get('.v-rating__item .v-btn').eq(1).click({ timeout: 1000 }) + + // Use once() binding for just this fail + cy.once('fail', err => { + // Capturing the fail event swallows it and lets the test succeed + + // Now look for the expected messages + expect(err.message).to.include('`cy.click()` failed because this element') + expect(err.message).to.include('has CSS `pointer-events: none`') + + done() + }) + }) + + it('should change icon on hover', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-rating__item .v-btn').eq(2).realHover() + cy.get('.v-rating__item .v-icon').then(icons => { + icons.each((i, el) => { + expect(el.outerHTML).to.equal(icons[i < 3 ? 0 : 4].outerHTML) + }) + }) + }) + + it('should show item-labels', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-rating__wrapper > span').should('have.length', 5) + }) + + it('should support scoped item slot', () => { + cy.mount(() => ( + + + {{ + item: ({ value, rating }) => ( + { value } + ), + }} + + + )) + + cy.get('.v-btn.mx-1') + .eq(2) + .click() + .should('have.class', 'text-primary') + }) + + it('should support scoped item-label slot', () => { + cy.mount(() => ( + + + {{ + 'item-label': props =>
    { props.value }
    , + }} +     +     + )) + + cy.get('.v-rating__wrapper > .foo').should('have.length', 5) + }) + + it('should support half-increments', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-rating__item input').should('have.length', 10) + .get('.v-rating__item .v-rating__item--half').eq(3).click({ force: true }) + .emitted(VRating, 'update:modelValue').should('deep.equal', [[3.5]]) + }) + + it('should support half-increments and custom size', () => { + cy.mount(() => ( + + + + )) + + cy.get('.v-rating__item input').should('have.length', 10) + .get('.v-rating__item .v-rating__item--half').eq(3).click({ force: true }) + .emitted(VRating, 'update:modelValue').should('deep.equal', [[3.5]]) + }) + + it('should support tabbed navigation', () => { + cy.mount(() => ( + + + + )) + + cy.realPress('Tab') + .get('.v-btn').eq(0).focused() + .realPress('Space') + .realPress('Tab') + .get('.v-btn').eq(1).focused() + .realPress('Tab') + .get('.v-btn').eq(2).focused() + .realPress('Space') + .realPress(['Shift', 'Tab']) + .get('.v-btn').eq(1).focused() + .realPress('Space') + .emitted(VRating, 'update:modelValue') + .should('deep.equal', [[1], [3], [2]]) + }) +}) diff --git a/packages/vuetify/src/components/VRating/_variables.scss b/packages/vuetify/src/components/VRating/_variables.scss new file mode 100644 index 0000000..f96f0ba --- /dev/null +++ b/packages/vuetify/src/components/VRating/_variables.scss @@ -0,0 +1,10 @@ +@use '../../styles/settings'; + +// Defaults +$rating-item-focused-button-overlay-opacity: var(--v-hover-opacity) !default; +$rating-item-align-items: center !default; +$rating-item-button-opacity: 1 !default; +$rating-item-button-transition-property: transform !default; +$rating-item-icon-transform: scale(1.25) !default; +$rating-item-transition-timing-function: settings.$decelerated-easing !default; +$rating-white-space: nowrap !default; diff --git a/packages/vuetify/src/components/VRating/index.ts b/packages/vuetify/src/components/VRating/index.ts new file mode 100644 index 0000000..89cdb89 --- /dev/null +++ b/packages/vuetify/src/components/VRating/index.ts @@ -0,0 +1 @@ +export { VRating } from './VRating' diff --git a/packages/vuetify/src/components/VResponsive/VResponsive.sass b/packages/vuetify/src/components/VResponsive/VResponsive.sass new file mode 100644 index 0000000..b7218e2 --- /dev/null +++ b/packages/vuetify/src/components/VResponsive/VResponsive.sass @@ -0,0 +1,27 @@ +@use '../../styles/settings' +@use '../../styles/tools' + +@include tools.layer('components') + .v-responsive + display: flex + flex: 1 0 auto + max-height: 100% + max-width: 100% + overflow: hidden + position: relative + + &--inline + display: inline-flex + flex: 0 0 auto + + .v-responsive__content + flex: 1 0 0px + max-width: 100% + + .v-responsive__sizer ~ .v-responsive__content + margin-inline-start: -100% + + .v-responsive__sizer + flex: 1 0 0px + transition: padding-bottom 0.2s settings.$standard-easing + pointer-events: none diff --git a/packages/vuetify/src/components/VResponsive/VResponsive.tsx b/packages/vuetify/src/components/VResponsive/VResponsive.tsx new file mode 100644 index 0000000..f23f011 --- /dev/null +++ b/packages/vuetify/src/components/VResponsive/VResponsive.tsx @@ -0,0 +1,73 @@ +// Styles +import './VResponsive.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' + +// Utilities +import { computed } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export type VResponsiveSlots = { + default: never + additional: never +} + +export function useAspectStyles (props: { aspectRatio?: string | number }) { + return { + aspectStyles: computed(() => { + const ratio = Number(props.aspectRatio) + + return ratio + ? { paddingBottom: String(1 / ratio * 100) + '%' } + : undefined + }), + } +} + +export const makeVResponsiveProps = propsFactory({ + aspectRatio: [String, Number], + contentClass: null, + inline: Boolean, + + ...makeComponentProps(), + ...makeDimensionProps(), +}, 'VResponsive') + +export const VResponsive = genericComponent()({ + name: 'VResponsive', + + props: makeVResponsiveProps(), + + setup (props, { slots }) { + const { aspectStyles } = useAspectStyles(props) + const { dimensionStyles } = useDimension(props) + + useRender(() => ( +
    +
    + + { slots.additional?.() } + + { slots.default && ( +
    { slots.default() }
    + )} +
    + )) + + return {} + }, +}) + +export type VResponsive = InstanceType diff --git a/packages/vuetify/src/components/VResponsive/__tests__/VResponsive.spec.ts b/packages/vuetify/src/components/VResponsive/__tests__/VResponsive.spec.ts new file mode 100644 index 0000000..45210d6 --- /dev/null +++ b/packages/vuetify/src/components/VResponsive/__tests__/VResponsive.spec.ts @@ -0,0 +1,45 @@ +// Components +import { VResponsive } from '..' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { h } from 'vue' +import { createVuetify } from '@/framework' + +describe('VResponsive', () => { + const vuetify = createVuetify() + + function mountFunction (options = {}) { + return mount(VResponsive, { + global: { plugins: [vuetify] }, + ...options, + }) + } + + it('should force aspect ratio', () => { + const wrapper = mountFunction({ + propsData: { aspectRatio: 16 / 9 }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should render content', () => { + const wrapper = mountFunction({ + slots: { + default: () => h('div', ['content']), + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) + + it('should set height', () => { + const wrapper = mountFunction({ + propsData: { height: 100, maxHeight: 200 }, + }) + + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/packages/vuetify/src/components/VResponsive/__tests__/__snapshots__/VResponsive.spec.ts.snap b/packages/vuetify/src/components/VResponsive/__tests__/__snapshots__/VResponsive.spec.ts.snap new file mode 100644 index 0000000..a7163b6 --- /dev/null +++ b/packages/vuetify/src/components/VResponsive/__tests__/__snapshots__/VResponsive.spec.ts.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VResponsive should force aspect ratio 1`] = ` +
    +
    +
    +
    +`; + +exports[`VResponsive should render content 1`] = ` +
    +
    +
    +
    +
    + content +
    +
    +
    +`; + +exports[`VResponsive should set height 1`] = ` +
    +
    +
    +
    +`; diff --git a/packages/vuetify/src/components/VResponsive/index.ts b/packages/vuetify/src/components/VResponsive/index.ts new file mode 100644 index 0000000..13cde76 --- /dev/null +++ b/packages/vuetify/src/components/VResponsive/index.ts @@ -0,0 +1 @@ +export { VResponsive } from './VResponsive' diff --git a/packages/vuetify/src/components/VSelect/VSelect.sass b/packages/vuetify/src/components/VSelect/VSelect.sass new file mode 100644 index 0000000..6f0c795 --- /dev/null +++ b/packages/vuetify/src/components/VSelect/VSelect.sass @@ -0,0 +1,66 @@ +@use 'sass:selector' +@use 'sass:math' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-select + .v-field + .v-text-field__prefix, + .v-text-field__suffix, + .v-field__input, + &.v-field + cursor: pointer + + .v-field + .v-field__input + > input + align-self: flex-start + opacity: 1 + flex: 0 0 + position: absolute + width: 100% + transition: none + pointer-events: none + caret-color: transparent + + .v-field--dirty + .v-select__selection + margin-inline-end: 2px + + .v-select__selection-text + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + &__content + overflow: hidden + + @include tools.elevation($select-content-elevation) + @include tools.rounded($select-content-border-radius) + + &__selection + display: inline-flex + align-items: center + letter-spacing: inherit + line-height: inherit + max-width: 100% + + .v-select__selection + &:first-child + margin-inline-start: 0 + + &--selected + .v-field + .v-field__input + > input + opacity: 0 + + &__menu-icon + margin-inline-start: 4px + transition: $select-transition + + .v-select--active-menu & + opacity: var(--v-high-emphasis-opacity) + transform: rotate(180deg) diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx new file mode 100644 index 0000000..ef7ce95 --- /dev/null +++ b/packages/vuetify/src/components/VSelect/VSelect.tsx @@ -0,0 +1,562 @@ +// Styles +import './VSelect.sass' + +// Components +import { VDialogTransition } from '@/components/transitions' +import { VAvatar } from '@/components/VAvatar' +import { VCheckboxBtn } from '@/components/VCheckbox' +import { VChip } from '@/components/VChip' +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' +import { VList, VListItem } from '@/components/VList' +import { VMenu } from '@/components/VMenu' +import { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField' +import { VVirtualScroll } from '@/components/VVirtualScroll' + +// Composables +import { useScrolling } from './useScrolling' +import { useForm } from '@/composables/form' +import { forwardRefs } from '@/composables/forwardRefs' +import { IconValue } from '@/composables/icons' +import { makeItemsProps, useItems } from '@/composables/list-items' +import { useLocale } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeTransitionProps } from '@/composables/transition' + +// Utilities +import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue' +import { + ensureValidVNode, + genericComponent, + IN_BROWSER, + matchesSelector, + omit, + propsFactory, + useRender, + wrapInArray, +} from '@/util' + +// Types +import type { Component, PropType } from 'vue' +import type { VFieldSlots } from '@/components/VField/VField' +import type { VInputSlots } from '@/components/VInput/VInput' +import type { ListItem } from '@/composables/list-items' +import type { GenericProps, SelectItemKey } from '@/util' + +type Primitive = string | number | boolean | symbol + +type Val = [T] extends [Primitive] + ? T + : (ReturnObject extends true ? T : any) + +type Value = + Multiple extends true + ? readonly Val[] + : Val | null + +export const makeSelectProps = propsFactory({ + chips: Boolean, + closableChips: Boolean, + closeText: { + type: String, + default: '$vuetify.close', + }, + openText: { + type: String, + default: '$vuetify.open', + }, + eager: Boolean, + hideNoData: Boolean, + hideSelected: Boolean, + listProps: { + type: Object as PropType, + }, + menu: Boolean, + menuIcon: { + type: IconValue, + default: '$dropdown', + }, + menuProps: { + type: Object as PropType, + }, + multiple: Boolean, + noDataText: { + type: String, + default: '$vuetify.noDataText', + }, + openOnClear: Boolean, + itemColor: String, + + ...makeItemsProps({ itemChildren: false }), +}, 'Select') + +export const makeVSelectProps = propsFactory({ + ...makeSelectProps(), + ...omit(makeVTextFieldProps({ + modelValue: null, + role: 'combobox', + }), ['validationValue', 'dirty', 'appendInnerIcon']), + ...makeTransitionProps({ transition: { component: VDialogTransition as Component } }), +}, 'VSelect') + +type ItemType = T extends readonly (infer U)[] ? U : never + +export const VSelect = genericComponent, + ReturnObject extends boolean = false, + Multiple extends boolean = false, + V extends Value = Value +>( + props: { + items?: T + itemTitle?: SelectItemKey> + itemValue?: SelectItemKey> + itemProps?: SelectItemKey> + returnObject?: ReturnObject + multiple?: Multiple + modelValue?: V | null + 'onUpdate:modelValue'?: (value: V) => void + }, + slots: Omit & { + item: { item: ListItem, index: number, props: Record } + chip: { item: ListItem, index: number, props: Record } + selection: { item: ListItem, index: number } + 'prepend-item': never + 'append-item': never + 'no-data': never + } +) => GenericProps>()({ + name: 'VSelect', + + props: makeVSelectProps(), + + emits: { + 'update:focused': (focused: boolean) => true, + 'update:modelValue': (value: any) => true, + 'update:menu': (ue: boolean) => true, + }, + + setup (props, { slots }) { + const { t } = useLocale() + const vTextFieldRef = ref() + const vMenuRef = ref() + const vVirtualScrollRef = ref() + const _menu = useProxiedModel(props, 'menu') + const menu = computed({ + get: () => _menu.value, + set: v => { + if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return + _menu.value = v + }, + }) + const { items, transformIn, transformOut } = useItems(props) + const model = useProxiedModel( + props, + 'modelValue', + [], + v => transformIn(v === null ? [null] : wrapInArray(v)), + v => { + const transformed = transformOut(v) + return props.multiple ? transformed : (transformed[0] ?? null) + } + ) + const counterValue = computed(() => { + return typeof props.counterValue === 'function' ? props.counterValue(model.value) + : typeof props.counterValue === 'number' ? props.counterValue + : model.value.length + }) + const form = useForm() + const selectedValues = computed(() => model.value.map(selection => selection.value)) + const isFocused = shallowRef(false) + const label = computed(() => menu.value ? props.closeText : props.openText) + + let keyboardLookupPrefix = '' + let keyboardLookupLastTime: number + + const displayItems = computed(() => { + if (props.hideSelected) { + return items.value.filter(item => !model.value.some(s => props.valueComparator(s, item))) + } + return items.value + }) + + const menuDisabled = computed(() => ( + (props.hideNoData && !displayItems.value.length) || + props.readonly || form?.isReadonly.value + )) + + const computedMenuProps = computed(() => { + return { + ...props.menuProps, + activatorProps: { + ...(props.menuProps?.activatorProps || {}), + 'aria-haspopup': 'listbox', // Set aria-haspopup to 'listbox' + }, + } + }) + + const listRef = ref() + const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef) + function onClear (e: MouseEvent) { + if (props.openOnClear) { + menu.value = true + } + } + function onMousedownControl () { + if (menuDisabled.value) return + + menu.value = !menu.value + } + function onKeydown (e: KeyboardEvent) { + if (!e.key || props.readonly || form?.isReadonly.value) return + + if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) { + e.preventDefault() + } + + if (['Enter', 'ArrowDown', ' '].includes(e.key)) { + menu.value = true + } + + if (['Escape', 'Tab'].includes(e.key)) { + menu.value = false + } + + if (e.key === 'Home') { + listRef.value?.focus('first') + } else if (e.key === 'End') { + listRef.value?.focus('last') + } + + // html select hotkeys + const KEYBOARD_LOOKUP_THRESHOLD = 1000 // milliseconds + + function checkPrintable (e: KeyboardEvent) { + const isPrintableChar = e.key.length === 1 + const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey + return isPrintableChar && noModifier + } + + if (props.multiple || !checkPrintable(e)) return + + const now = performance.now() + if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) { + keyboardLookupPrefix = '' + } + keyboardLookupPrefix += e.key.toLowerCase() + keyboardLookupLastTime = now + + const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix)) + if (item !== undefined) { + model.value = [item] + const index = displayItems.value.indexOf(item) + IN_BROWSER && window.requestAnimationFrame(() => { + index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index) + }) + } + } + + /** @param set - null means toggle */ + function select (item: ListItem, set: boolean | null = true) { + if (item.props.disabled) return + + if (props.multiple) { + const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value)) + const add = set == null ? !~index : set + + if (~index) { + const value = add ? [...model.value, item] : [...model.value] + value.splice(index, 1) + model.value = value + } else if (add) { + model.value = [...model.value, item] + } + } else { + const add = set !== false + model.value = add ? [item] : [] + + nextTick(() => { + menu.value = false + }) + } + } + function onBlur (e: FocusEvent) { + if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement)) { + menu.value = false + } + } + function onAfterLeave () { + if (isFocused.value) { + vTextFieldRef.value?.focus() + } + } + function onFocusin (e: FocusEvent) { + isFocused.value = true + } + function onModelUpdate (v: any) { + if (v == null) model.value = [] + else if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) { + const item = items.value.find(item => item.title === v) + if (item) { + select(item) + } + } else if (vTextFieldRef.value) { + vTextFieldRef.value.value = '' + } + } + + watch(menu, () => { + if (!props.hideSelected && menu.value && model.value.length) { + const index = displayItems.value.findIndex( + item => model.value.some(s => props.valueComparator(s.value, item.value)) + ) + IN_BROWSER && window.requestAnimationFrame(() => { + index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index) + }) + } + }) + + watch(() => props.items, (newVal, oldVal) => { + if (menu.value) return + + if (isFocused.value && !oldVal.length && newVal.length) { + menu.value = true + } + }) + + useRender(() => { + const hasChips = !!(props.chips || slots.chip) + const hasList = !!( + (!props.hideNoData || displayItems.value.length) || + slots['prepend-item'] || + slots['append-item'] || + slots['no-data'] + ) + const isDirty = model.value.length > 0 + const textFieldProps = VTextField.filterProps(props) + + const placeholder = isDirty || ( + !isFocused.value && + props.label && + !props.persistentPlaceholder + ) ? undefined : props.placeholder + + return ( + v.props.value).join(', ') } + onUpdate:modelValue={ onModelUpdate } + v-model:focused={ isFocused.value } + validationValue={ model.externalValue } + counterValue={ counterValue.value } + dirty={ isDirty } + class={[ + 'v-select', + { + 'v-select--active-menu': menu.value, + 'v-select--chips': !!props.chips, + [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true, + 'v-select--selected': model.value.length, + 'v-select--selection-slot': !!slots.selection, + }, + props.class, + ]} + style={ props.style } + inputmode="none" + placeholder={ placeholder } + onClick:clear={ onClear } + onMousedown:control={ onMousedownControl } + onBlur={ onBlur } + onKeydown={ onKeydown } + aria-label={ t(label.value) } + title={ t(label.value) } + > + {{ + ...slots, + default: () => ( + <> + + { hasList && ( + e.preventDefault() } + onKeydown={ onListKeydown } + onFocusin={ onFocusin } + onScrollPassive={ onListScroll } + tabindex="-1" + aria-live="polite" + color={ props.itemColor ?? props.color } + { ...props.listProps } + > + { slots['prepend-item']?.() } + + { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? ( + + ))} + + + { ({ item, index, itemRef }) => { + const itemProps = mergeProps(item.props, { + ref: itemRef, + key: index, + onClick: () => select(item, null), + }) + + return slots.item?.({ + item, + index, + props: itemProps, + }) ?? ( + + {{ + prepend: ({ isSelected }) => ( + <> + { props.multiple && !props.hideSelected ? ( + + ) : undefined } + + { item.props.prependAvatar && ( + + )} + + { item.props.prependIcon && ( + + )} + + ), + }} + + ) + }} + + + { slots['append-item']?.() } + + )} + + + { model.value.map((item, index) => { + function onChipClose (e: Event) { + e.stopPropagation() + e.preventDefault() + + select(item, false) + } + + const slotProps = { + 'onClick:close': onChipClose, + onKeydown (e: KeyboardEvent) { + if (e.key !== 'Enter' && e.key !== ' ') return + + e.preventDefault() + e.stopPropagation() + + onChipClose(e) + }, + onMousedown (e: MouseEvent) { + e.preventDefault() + e.stopPropagation() + }, + modelValue: true, + 'onUpdate:modelValue': undefined, + } + + const hasSlot = hasChips ? !!slots.chip : !!slots.selection + const slotContent = hasSlot + ? ensureValidVNode( + hasChips + ? slots.chip!({ item, index, props: slotProps }) + : slots.selection!({ item, index }) + ) + : undefined + + if (hasSlot && !slotContent) return undefined + + return ( +
    + { hasChips ? ( + !slots.chip ? ( + + ) : ( + + { slotContent } + + ) + ) : ( + slotContent ?? ( + + { item.title } + { props.multiple && (index < model.value.length - 1) && ( + , + )} + + ) + )} +
    + ) + })} + + ), + 'append-inner': (...args) => ( + <> + { slots['append-inner']?.(...args) } + { props.menuIcon ? ( + + ) : undefined } + + ), + }} +     + ) + }) + + return forwardRefs({ + isFocused, + menu, + select, + }, vTextFieldRef) + }, +}) + +export type VSelect = InstanceType diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx new file mode 100644 index 0000000..fd60cd9 --- /dev/null +++ b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx @@ -0,0 +1,643 @@ +/// + +// Components +import { VSelect } from '../VSelect' +import { VForm } from '@/components/VForm' +import { VListItem } from '@/components/VList' + +// Utilities +import { cloneVNode, ref } from 'vue' +import { generate } from '../../../../cypress/templates' +import { keyValues } from '@/util' + +const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const +const densities = ['default', 'comfortable', 'compact'] as const +const items = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming'] as const + +const stories = Object.fromEntries(Object.entries({ + 'Default input': , + Disabled: , + Affixes: , + 'Prepend/append': , + 'Prepend/append inner': , + Placeholder: , +}).map(([k, v]) => [k, ( +
    + { variants.map(variant => ( + densities.map(density => ( +
    + { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) } + { cloneVNode(v, { variant, density, label: `with value`, modelValue: ['California'] }) } + { cloneVNode(v, { variant, density, label: `chips`, chips: true, modelValue: ['California'] }) } + {{ + selection: ({ item }) => { + return item.title + }, + }} + +
    + )) + )).flat()} +
    +)])) + +describe('VSelect', () => { + it('should render selection slot', () => { + const items = [ + { title: 'a' }, + { title: 'b' }, + { title: 'c' }, + ] + let model: { title: string }[] = [{ title: 'b' }] + + cy.mount(() => ( + model = val } + > + {{ + selection: ({ item, index }) => { + return item.raw.title.toUpperCase() + }, + }} + + )) + .get('.v-select__selection').eq(0).invoke('text').should('equal', 'B') + }) + + it('should render prepend-item slot', () => { + cy.mount(() => ( + + {{ + 'prepend-item': () => ( + + ), + }} + + )) + .get('.v-list-item').eq(0).invoke('text').should('equal', 'Foo') + }) + + it('should render append-item slot', () => { + cy.mount(() => ( + + {{ + 'append-item': () => ( + + ), + }} + + )) + .get('.v-list-item').last().invoke('text').should('equal', 'Foo') + }) + + it('should close only first chip', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = ['Item 1', 'Item 2', 'Item 3'] + + cy.mount(() => ( + + )) + .get('.v-chip__close') + .eq(0) + .click() + .get('input') + .get('.v-chip') + .should('have.length', 2) + }) + + describe('prefilled data', () => { + it('should work with array of strings when using multiple', () => { + const items = ref(['California', 'Colorado', 'Florida']) + + const selectedItems = ref(['California', 'Colorado']) + + cy.mount(() => ( + + )) + + cy.get('.v-select').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('.v-list-item input').eq(2).click().should(() => { + expect(selectedItems.value).to.deep.equal(['California', 'Colorado', 'Florida']) + }) + + cy + .get('.v-chip__close') + .eq(0) + .click() + .get('.v-chip') + .should('have.length', 2) + .should(() => expect(selectedItems.value).to.deep.equal(['Colorado', 'Florida'])) + }) + + it('should work with objects when using multiple', () => { + const items = ref([ + { + title: 'Item 1', + value: 'item1', + }, + { + title: 'Item 2', + value: 'item2', + }, + { + title: 'Item 3', + value: 'item3', + }, + ]) + + const selectedItems = ref( + [ + { + title: 'Item 1', + value: 'item1', + }, + { + title: 'Item 2', + value: 'item2', + }, + ] + ) + + cy.mount(() => ( + + )) + + cy.get('.v-select').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('.v-list-item input').eq(2).click().should(() => { + expect(selectedItems.value).to.deep.equal([ + { + title: 'Item 1', + value: 'item1', + }, + { + title: 'Item 2', + value: 'item2', + }, + { + title: 'Item 3', + value: 'item3', + }, + ]) + }) + + cy + .get('.v-chip__close') + .eq(0) + .click() + .get('.v-chip') + .should('have.length', 2) + .should(() => expect(selectedItems.value).to.deep.equal([ + { + title: 'Item 2', + value: 'item2', + }, + { + title: 'Item 3', + value: 'item3', + }, + ])) + }) + + it('should work with objects when using multiple and item-value', () => { + const items = ref([ + { + text: 'Item 1', + id: 'item1', + }, + { + text: 'Item 2', + id: 'item2', + }, + { + text: 'Item 3', + id: 'item3', + }, + ]) + + const selectedItems = ref([ + { + text: 'Item 1', + id: 'item1', + }, + { + text: 'Item 2', + id: 'item2', + }, + ]) + + cy.mount(() => ( + + )) + + cy.get('.v-select').click() + + cy.get('.v-list-item--active').should('have.length', 2) + cy.get('.v-field__input').should('include.text', 'Item 1') + cy.get('.v-field__input').should('include.text', 'Item 2') + + cy.get('.v-list-item--active input') + .eq(0) + .click() + .get('.v-field__input') + .should(() => expect(selectedItems.value).to.deep.equal([{ + text: 'Item 2', + id: 'item2', + }])) + }) + }) + + it('should not be clickable when in readonly', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = 'Item 1' + + cy.mount(() => ( + + )) + + cy.get('.v-select') + .click() + .get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + + cy + .get('.v-select input') + .focus() + .type('{downarrow}', { force: true }) + .get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + }) + + it('should not be clickable when in readonly form', () => { + const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'] + + const selectedItems = 'Item 1' + + cy.mount(() => ( + + + + )) + + cy.get('.v-select') + .click() + .get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + + cy + .get('.v-select input') + .focus() + .type('{downarrow}', { force: true }) + .get('.v-list-item').should('have.length', 0) + .get('.v-select--active-menu').should('have.length', 0) + }) + + // https://github.com/vuetifyjs/vuetify/issues/16442 + describe('null value', () => { + it('should allow null as legit itemValue', () => { + const items = [ + { name: 'Default Language', code: null }, + { code: 'en-US', name: 'English' }, + { code: 'de-DE', name: 'German' }, + ] + + const selectedItems = null + + cy.mount(() => ( + + )) + + cy.get('.v-select__selection').eq(0).invoke('text').should('equal', 'Default Language') + }) + it('should mark input as "not dirty" when the v-model is null, but null is not present in the items', () => { + const items = [ + { code: 'en-US', name: 'English' }, + { code: 'de-DE', name: 'German' }, + ] + + cy.mount(() => ( + + )) + + cy.get('.v-field').should('not.have.class', 'v-field--dirty') + }) + }) + + it('should conditionally show placeholder', () => { + cy.mount(props => ( + + )) + .get('.v-select input') + .should('have.attr', 'placeholder', 'Placeholder') + .setProps({ label: 'Label' }) + .get('.v-select input') + .should('not.have.attr', 'placeholder') + .get('.v-select input') + .focus() + .should('have.attr', 'placeholder', 'Placeholder') + .blur() + .setProps({ persistentPlaceholder: true }) + .get('.v-select input') + .should('have.attr', 'placeholder', 'Placeholder') + .setProps({ modelValue: 'Foobar' }) + .get('.v-select input') + .should('not.have.attr', 'placeholder') + .setProps({ multiple: true, modelValue: ['Foobar'] }) + .get('.v-select input') + .should('not.have.attr', 'placeholder') + }) + + // https://github.com/vuetifyjs/vuetify/issues/16210 + it('should return item object as the argument of item-title function', () => { + const items = [ + { id: 1, name: 'a' }, + { id: 2, name: 'b' }, + ] + + const selectedItems = ref(null) + + function itemTitleFunc (item: any) { + return 'Item: ' + JSON.stringify(item) + } + + const itemTitleFuncSpy = cy.spy(itemTitleFunc).as('itemTitleFunc') + + cy.mount(() => ( + + )) + + cy.get('.v-select').click() + + cy.get('.v-list-item').eq(0).click({ waitForAnimations: false }).should(() => { + expect(selectedItems.value).to.deep.equal(1) + }) + + cy.get('@itemTitleFunc') + .should('have.been.calledWith', { id: 1, name: 'a' }) + + cy.get('.v-select__selection-text').should('have.text', `Item: {"id":1,"name":"a"}`) + }) + + describe('hide-selected', () => { + it('should hide selected item(s)', () => { + const items = ref(['Item 1', + 'Item 2', + 'Item 3', + 'Item 4', + ]) + + const selectedItems = ref([ + 'Item 1', + 'Item 2', + ]) + + cy.mount(() => ( + + )) + + cy.get('.v-select').click() + + cy.get('.v-overlay__content .v-list-item').should('have.length', 2) + cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 3') + cy.get('.v-overlay__content .v-list-item .v-list-item-title').eq(1).should('have.text', 'Item 4') + }) + + // https://github.com/vuetifyjs/vuetify/issues/19806 + it('should hide selected item(s) with return-object', () => { + const selectedItem = ref({ text: 'Item 1', id: 'item1' }) + const items = ref([ + { + text: 'Item 1', + id: 'item1', + }, + { + text: 'Item 2', + id: 'item2', + }, + { + text: 'Item 3', + id: 'item3', + }, + ]) + cy.mount((props: any) => ( + + )).get('.v-select').click() + .get('.v-list-item--active').should('have.length', 0) + .get('.v-overlay__content .v-list-item').should('have.length', 2) + .get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 2') + .get('.v-overlay__content .v-list-item').eq(0).click({ waitForAnimations: false }).should(() => { + expect(selectedItem.value).to.deep.equal({ text: 'Item 2', id: 'item2' }) + }) + .get('.v-list-item--active').should('have.length', 0) + .get('.v-overlay__content .v-list-item').should('have.length', 2) + .get('.v-overlay__content .v-list-item .v-list-item-title').eq(0).should('have.text', 'Item 1') + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/16055 + it('should select item after typing its first few letters', () => { + const items = ref(['aaa', 'foo', 'faa']) + + const selectedItems = ref(undefined) + + cy.mount(() => ( + + )) + + cy.get('.v-select') + .click() + .get('.v-select input') + .focus() + .type('f', { force: true }) + .get('.v-list-item').should('have.length', 3) + .then(_ => { + expect(selectedItems.value).equal('foo') + }) + }) + + it('should keep TextField focused while selecting items from open menu', () => { + cy.mount(() => ( + + )) + + cy.get('.v-select') + .click() + + cy.get('.v-list') + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + .trigger('keydown', { key: keyValues.down, waitForAnimations: false }) + + cy.get('.v-field').should('have.class', 'v-field--focused') + }) + + it('should not open menu when closing a chip', () => { + cy + .mount(() => ( + + )) + .get('.v-select') + .should('not.have.class', 'v-select--active-menu') + .get('.v-chip__close').eq(1) + .click() + .get('.v-select') + .should('not.have.class', 'v-select--active-menu') + .get('.v-chip__close') + .click() + .get('.v-select') + .should('not.have.class', 'v-select--active-menu') + .click() + .should('have.class', 'v-select--active-menu') + .trigger('keydown', { key: keyValues.esc }) + .should('not.have.class', 'v-select--active-menu') + }) + + // https://github.com/vuetifyjs/vuetify/issues/19235 + it('should update v-model when click closable chip', () => { + const selectedItem = ref('abc') + + cy.mount(() => ( + + )) + + cy.get('.v-chip__close') + .click() + .then(_ => { + expect(selectedItem.value).equal(null) + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/19261 + it('should not toggle v-model to null when clicking already selected item in single selection mode', () => { + const selectedItem = ref('abc') + + cy.mount(() => ( + + )) + + cy.get('.v-select').click() + + cy.get('.v-list-item').should('have.length', 2) + cy.get('.v-list-item').eq(0).click({ waitForAnimations: false }).should(() => { + expect(selectedItem.value).equal('abc') + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/18556 + it('should show menu if focused and items are added', () => { + cy + .mount(props => ()) + .get('.v-select input') + .focus() + .get('.v-overlay') + .should('not.exist') + .setProps({ items: ['Foo', 'Bar'] }) + .get('.v-overlay') + .should('exist') + }) + + // https://github.com/vuetifyjs/vuetify/issues/19346 + it('should not show menu when focused and existing non-empty items are changed', () => { + cy + .mount((props: any) => ()) + .setProps({ items: ['Foo', 'Bar'] }) + .get('.v-select') + .click() + .get('.v-overlay') + .should('exist') + .get('.v-list-item').eq(1).click({ waitForAnimations: false }) + .setProps({ items: ['Foo', 'Bar', 'test', 'test 2'] }) + .get('.v-overlay') + .should('not.exist') + }) + + describe('Showcase', () => { + generate({ stories }) + }) +}) diff --git a/packages/vuetify/src/components/VSelect/_variables.scss b/packages/vuetify/src/components/VSelect/_variables.scss new file mode 100644 index 0000000..0106431 --- /dev/null +++ b/packages/vuetify/src/components/VSelect/_variables.scss @@ -0,0 +1,10 @@ +@use '../../styles/settings'; + +// Defaults +$select-content-border-radius: 4px !default; +$select-content-elevation: 4 !default; +$select-line-height: 1.75 !default; +$select-transition: .2s settings.$standard-easing !default; +$select-chips-control-min-height: null !default; +$select-chips-margin-top: null !default; +$select-chips-margin-bottom: null !default; diff --git a/packages/vuetify/src/components/VSelect/index.ts b/packages/vuetify/src/components/VSelect/index.ts new file mode 100644 index 0000000..5a89cd9 --- /dev/null +++ b/packages/vuetify/src/components/VSelect/index.ts @@ -0,0 +1 @@ +export { VSelect } from './VSelect' diff --git a/packages/vuetify/src/components/VSelect/useScrolling.ts b/packages/vuetify/src/components/VSelect/useScrolling.ts new file mode 100644 index 0000000..e6f5bb9 --- /dev/null +++ b/packages/vuetify/src/components/VSelect/useScrolling.ts @@ -0,0 +1,74 @@ +// Utilities +import { shallowRef, watch } from 'vue' + +// Types +import type { Ref } from 'vue' +import type { VList } from '@/components/VList' +import type { VTextField } from '@/components/VTextField' + +export function useScrolling (listRef: Ref, textFieldRef: Ref) { + const isScrolling = shallowRef(false) + let scrollTimeout: number + function onListScroll (e: Event) { + cancelAnimationFrame(scrollTimeout) + isScrolling.value = true + scrollTimeout = requestAnimationFrame(() => { + scrollTimeout = requestAnimationFrame(() => { + isScrolling.value = false + }) + }) + } + async function finishScrolling () { + await new Promise(resolve => requestAnimationFrame(resolve)) + await new Promise(resolve => requestAnimationFrame(resolve)) + await new Promise(resolve => requestAnimationFrame(resolve)) + await new Promise(resolve => { + if (isScrolling.value) { + const stop = watch(isScrolling, () => { + stop() + resolve() + }) + } else resolve() + }) + } + async function onListKeydown (e: KeyboardEvent) { + if (e.key === 'Tab') { + textFieldRef.value?.focus() + } + + if (!['PageDown', 'PageUp', 'Home', 'End'].includes(e.key)) return + const el: HTMLElement = listRef.value?.$el + if (!el) return + + if (e.key === 'Home' || e.key === 'End') { + el.scrollTo({ + top: e.key === 'Home' ? 0 : el.scrollHeight, + behavior: 'smooth', + }) + } + + await finishScrolling() + + const children = el.querySelectorAll(':scope > :not(.v-virtual-scroll__spacer)') + + if (e.key === 'PageDown' || e.key === 'Home') { + const top = el.getBoundingClientRect().top + for (const child of children) { + if (child.getBoundingClientRect().top >= top) { + (child as HTMLElement).focus() + break + } + } + } else { + const bottom = el.getBoundingClientRect().bottom + for (const child of [...children].reverse()) { + if (child.getBoundingClientRect().bottom <= bottom) { + (child as HTMLElement).focus() + break + } + } + } + } + + return { onListScroll, onListKeydown } +} diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass new file mode 100644 index 0000000..adcefd9 --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass @@ -0,0 +1,100 @@ +@use 'sass:map' +@use 'sass:list' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-selection-control + align-items: center + contain: layout + display: flex + flex: 1 0 + grid-area: control + position: relative + user-select: none + + .v-label + white-space: normal + word-break: break-word + height: 100% + + &--disabled + opacity: var(--v-disabled-opacity) + pointer-events: none + + &--error, + &--disabled + .v-label + opacity: 1 + + &--error:not(.v-selection-control--disabled) + .v-label + color: rgb(var(--v-theme-error)) + + &--inline + display: inline-flex + flex: 0 0 auto + min-width: 0 + max-width: 100% + + .v-label + width: auto + + @at-root + @include tools.density('v-selection-control', $selection-control-density) using ($modifier) + --v-selection-control-size: #{$selection-control-size + $modifier} + + .v-selection-control__wrapper + width: var(--v-selection-control-size) + height: var(--v-selection-control-size) + display: inline-flex + align-items: center + position: relative + justify-content: center + flex: none + + .v-selection-control__input + width: var(--v-selection-control-size) + height: var(--v-selection-control-size) + align-items: center + display: flex + flex: none + justify-content: center + position: relative + border-radius: 50% + + input + cursor: pointer + position: absolute + left: 0 + top: 0 + width: 100% + height: 100% + opacity: 0 + + &::before + @include tools.absolute(true) + border-radius: 100% + background-color: currentColor + opacity: 0 + pointer-events: none + + &:hover::before + opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier)) + + > .v-icon + opacity: var(--v-medium-emphasis-opacity) + + .v-selection-control--disabled &, + .v-selection-control--dirty &, + .v-selection-control--error & + > .v-icon + opacity: 1 + + .v-selection-control--error:not(.v-selection-control--disabled) & + > .v-icon + color: rgb(var(--v-theme-error)) + + .v-selection-control--focus-visible &::before + opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier)) diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx new file mode 100644 index 0000000..97d024d --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx @@ -0,0 +1,331 @@ +// Styles +import './VSelectionControl.sass' + +// Components +import { VIcon } from '@/components/VIcon' +import { VLabel } from '@/components/VLabel' +import { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup' + +// Composables +import { useBackgroundColor, useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { useDensity } from '@/composables/density' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Directives +import { Ripple } from '@/directives/ripple' + +// Utilities +import { computed, inject, nextTick, ref, shallowRef } from 'vue' +import { + filterInputAttrs, + genericComponent, + getUid, + matchesSelector, + propsFactory, + useRender, + wrapInArray, +} from '@/util' + +// Types +import type { CSSProperties, ExtractPropTypes, Ref, VNode, WritableComputedRef } from 'vue' +import type { IconValue } from '@/composables/icons' +import type { EventProp, GenericProps } from '@/util' + +export type SelectionControlSlot = { + model: WritableComputedRef + textColorClasses: Ref + textColorStyles: Ref + backgroundColorClasses: Ref + backgroundColorStyles: Ref + inputNode: VNode + icon: IconValue | undefined + props: { + onBlur: (e: Event) => void + onFocus: (e: FocusEvent) => void + id: string + } +} + +export type VSelectionControlSlots = { + default: { + backgroundColorClasses: Ref + backgroundColorStyles: Ref + } + label: { label: string | undefined, props: Record } + input: SelectionControlSlot +} + +export const makeVSelectionControlProps = propsFactory({ + label: String, + baseColor: String, + trueValue: null, + falseValue: null, + value: null, + + ...makeComponentProps(), + ...makeSelectionControlGroupProps(), +}, 'VSelectionControl') + +export function useSelectionControl ( + props: ExtractPropTypes> & { + 'onUpdate:modelValue': EventProp | undefined + } +) { + const group = inject(VSelectionControlGroupSymbol, undefined) + const { densityClasses } = useDensity(props) + const modelValue = useProxiedModel(props, 'modelValue') + const trueValue = computed(() => ( + props.trueValue !== undefined ? props.trueValue + : props.value !== undefined ? props.value + : true + )) + const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false) + const isMultiple = computed(() => ( + !!props.multiple || + (props.multiple == null && Array.isArray(modelValue.value)) + )) + const model = computed({ + get () { + const val = group ? group.modelValue.value : modelValue.value + + return isMultiple.value + ? wrapInArray(val).some((v: any) => props.valueComparator(v, trueValue.value)) + : props.valueComparator(val, trueValue.value) + }, + set (val: boolean) { + if (props.readonly) return + + const currentValue = val ? trueValue.value : falseValue.value + + let newVal = currentValue + + if (isMultiple.value) { + newVal = val + ? [...wrapInArray(modelValue.value), currentValue] + : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value)) + } + + if (group) { + group.modelValue.value = newVal + } else { + modelValue.value = newVal + } + }, + }) + const { textColorClasses, textColorStyles } = useTextColor(computed(() => { + if (props.error || props.disabled) return undefined + + return model.value ? props.color : props.baseColor + })) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => { + return ( + model.value && + !props.error && + !props.disabled + ) ? props.color : props.baseColor + })) + const icon = computed(() => model.value ? props.trueIcon : props.falseIcon) + + return { + group, + densityClasses, + trueValue, + falseValue, + model, + textColorClasses, + textColorStyles, + backgroundColorClasses, + backgroundColorStyles, + icon, + } +} + +export const VSelectionControl = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VSelectionControlSlots, +) => GenericProps>()({ + name: 'VSelectionControl', + + directives: { Ripple }, + + inheritAttrs: false, + + props: makeVSelectionControlProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { attrs, slots }) { + const { + group, + densityClasses, + icon, + model, + textColorClasses, + textColorStyles, + backgroundColorClasses, + backgroundColorStyles, + trueValue, + } = useSelectionControl(props) + const uid = getUid() + const isFocused = shallowRef(false) + const isFocusVisible = shallowRef(false) + const input = ref() + const id = computed(() => props.id || `input-${uid}`) + const isInteractive = computed(() => !props.disabled && !props.readonly) + + group?.onForceUpdate(() => { + if (input.value) { + input.value.checked = model.value + } + }) + + function onFocus (e: FocusEvent) { + if (!isInteractive.value) return + + isFocused.value = true + if (matchesSelector(e.target as HTMLElement, ':focus-visible') !== false) { + isFocusVisible.value = true + } + } + + function onBlur () { + isFocused.value = false + isFocusVisible.value = false + } + + function onClickLabel (e: Event) { + e.stopPropagation() + } + + function onInput (e: Event) { + if (!isInteractive.value) { + if (input.value) { + // model value is not updated when input is not interactive + // but the internal checked state of the input is still updated, + // so here it's value is restored + input.value.checked = model.value + } + + return + } + + if (props.readonly && group) { + nextTick(() => group.forceUpdate()) + } + model.value = (e.target as HTMLInputElement).checked + } + + useRender(() => { + const label = slots.label + ? slots.label({ + label: props.label, + props: { for: id.value }, + }) + : props.label + const [rootAttrs, inputAttrs] = filterInputAttrs(attrs) + + const inputNode = ( + + ) + + return ( +
    +
    + { slots.default?.({ + backgroundColorClasses, + backgroundColorStyles, + })} + +
    + { slots.input?.({ + model, + textColorClasses, + textColorStyles, + backgroundColorClasses, + backgroundColorStyles, + inputNode, + icon: icon.value, + props: { + onFocus, + onBlur, + id: id.value, + }, + } satisfies SelectionControlSlot) ?? ( + <> + { icon.value && } + + { inputNode } + + )} +
    +
    + + { label && ( + + { label } + + )} +
    + ) + }) + + return { + isFocused, + input, + } + }, +}) + +export type VSelectionControl = InstanceType diff --git a/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.cy.tsx b/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.cy.tsx new file mode 100644 index 0000000..953e901 --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.cy.tsx @@ -0,0 +1,30 @@ +/// + +import { VSelectionControl } from '../VSelectionControl' + +const colors = ['success', 'info', 'warning', 'error', 'invalid'] + +// Actual tests +describe('VSelectionControl', () => { + describe('color', () => { + it('supports default color props', () => { + cy.mount(() => ( + <> + { colors.map(color => ( + + ))} + + )) + .get('div.v-selection-control') + .should('have.length', colors.length) + .then(subjects => { + Array.from(subjects).forEach((subject, i) => { + expect(subject).to.contain(colors[i]) + }) + }) + }) + }) +}) diff --git a/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.tsx b/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.tsx new file mode 100644 index 0000000..33abc49 --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.tsx @@ -0,0 +1,70 @@ +// Components +import { makeVSelectionControlProps, useSelectionControl } from '../VSelectionControl' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { defineComponent, nextTick } from 'vue' +import { createVuetify } from '@/framework' + +describe('VSelectionControl', () => { + const vuetify = createVuetify() + + function mountFunction (options = {}) { + return mount(defineComponent({ + props: makeVSelectionControlProps(), + setup (props) { + return useSelectionControl(props as any) + }, + render: () => undefined, + }), { + global: { plugins: [vuetify] }, + ...options, + }) + } + + it('should use value', async () => { + const wrapper = mountFunction({ + props: { + value: 'foo', + }, + }) + expect(wrapper.vm.model).toBe(false) + wrapper.setProps({ modelValue: 'foo' }) + await nextTick() + expect(wrapper.vm.model).toBe(true) + }) + + it('should use trueValue', async () => { + const update = jest.fn() + const wrapper = mountFunction({ + props: { + trueValue: 'on', + falseValue: 'off', + modelValue: 'off', + 'onUpdate:modelValue': update, + }, + }) + expect(wrapper.vm.model).toBe(false) + wrapper.vm.model = true + expect(update).toHaveBeenCalledTimes(1) + expect(update).toHaveBeenCalledWith('on') + }) + + it('should use falseValue', async () => { + const update = jest.fn() + const wrapper = mountFunction({ + props: { + trueValue: 'on', + falseValue: 'off', + modelValue: 'on', + 'onUpdate:modelValue': update, + }, + }) + expect(wrapper.vm.model).toBe(true) + wrapper.vm.model = false + await nextTick() + expect(update).toHaveBeenCalledTimes(1) + expect(update).toHaveBeenCalledWith('off') + }) +}) diff --git a/packages/vuetify/src/components/VSelectionControl/_variables.scss b/packages/vuetify/src/components/VSelectionControl/_variables.scss new file mode 100644 index 0000000..bc664bb --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControl/_variables.scss @@ -0,0 +1,10 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VSelectionControl +$selection-control-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default; +$selection-control-error-color: rgb(var(--v-theme-error)) !default; +$selection-control-density: ('default': 0, 'comfortable': -1, 'compact': -3) !default; +$selection-control-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$selection-control-size: 40px !default; diff --git a/packages/vuetify/src/components/VSelectionControl/index.ts b/packages/vuetify/src/components/VSelectionControl/index.ts new file mode 100644 index 0000000..469450d --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControl/index.ts @@ -0,0 +1 @@ +export { VSelectionControl } from './VSelectionControl' diff --git a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.sass b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.sass new file mode 100644 index 0000000..1e73a42 --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.sass @@ -0,0 +1,12 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-selection-control-group + grid-area: $selection-control-group-grid-area + display: flex + flex-direction: column + + &--inline + flex-direction: row + flex-wrap: wrap diff --git a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx new file mode 100644 index 0000000..5617035 --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx @@ -0,0 +1,144 @@ +// Styles +import './VSelectionControlGroup.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps } from '@/composables/density' +import { IconValue } from '@/composables/icons' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeThemeProps } from '@/composables/theme' + +// Utilities +import { computed, onScopeDispose, provide, toRef } from 'vue' +import { deepEqual, genericComponent, getUid, propsFactory, useRender } from '@/util' + +// Types +import type { InjectionKey, PropType, Ref } from 'vue' +import type { RippleDirectiveBinding } from '@/directives/ripple' +import type { GenericProps } from '@/util' + +export interface VSelectionGroupContext { + modelValue: Ref + forceUpdate: () => void + onForceUpdate: (fn: () => void) => void +} + +export const VSelectionControlGroupSymbol: InjectionKey = Symbol.for('vuetify:selection-control-group') + +export const makeSelectionControlGroupProps = propsFactory({ + color: String, + disabled: { + type: Boolean as PropType, + default: null, + }, + defaultsTarget: String, + error: Boolean, + id: String, + inline: Boolean, + falseIcon: IconValue, + trueIcon: IconValue, + ripple: { + type: [Boolean, Object] as PropType, + default: true, + }, + multiple: { + type: Boolean as PropType, + default: null, + }, + name: String, + readonly: { + type: Boolean as PropType, + default: null, + }, + modelValue: null, + type: String, + valueComparator: { + type: Function as PropType, + default: deepEqual, + }, + + ...makeComponentProps(), + ...makeDensityProps(), + ...makeThemeProps(), +}, 'SelectionControlGroup') + +export const makeVSelectionControlGroupProps = propsFactory({ + ...makeSelectionControlGroupProps({ + defaultsTarget: 'VSelectionControl', + }), +}, 'VSelectionControlGroup') + +export const VSelectionControlGroup = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: { default: never }, +) => GenericProps>()({ + name: 'VSelectionControlGroup', + + props: makeVSelectionControlGroupProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { slots }) { + const modelValue = useProxiedModel(props, 'modelValue') + const uid = getUid() + const id = computed(() => props.id || `v-selection-control-group-${uid}`) + const name = computed(() => props.name || id.value) + + const updateHandlers = new Set<() => void>() + provide(VSelectionControlGroupSymbol, { + modelValue, + forceUpdate: () => { + updateHandlers.forEach(fn => fn()) + }, + onForceUpdate: cb => { + updateHandlers.add(cb) + onScopeDispose(() => { + updateHandlers.delete(cb) + }) + }, + }) + + provideDefaults({ + [props.defaultsTarget]: { + color: toRef(props, 'color'), + disabled: toRef(props, 'disabled'), + density: toRef(props, 'density'), + error: toRef(props, 'error'), + inline: toRef(props, 'inline'), + modelValue, + multiple: computed(() => !!props.multiple || (props.multiple == null && Array.isArray(modelValue.value))), + name, + falseIcon: toRef(props, 'falseIcon'), + trueIcon: toRef(props, 'trueIcon'), + readonly: toRef(props, 'readonly'), + ripple: toRef(props, 'ripple'), + type: toRef(props, 'type'), + valueComparator: toRef(props, 'valueComparator'), + }, + }) + + useRender(() => ( +
    + { slots.default?.() } +
    + )) + + return {} + }, +}) + +export type VSelectionControlGroup = InstanceType diff --git a/packages/vuetify/src/components/VSelectionControlGroup/_variables.scss b/packages/vuetify/src/components/VSelectionControlGroup/_variables.scss new file mode 100644 index 0000000..be60630 --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControlGroup/_variables.scss @@ -0,0 +1 @@ +$selection-control-group-grid-area: control !default; diff --git a/packages/vuetify/src/components/VSelectionControlGroup/index.ts b/packages/vuetify/src/components/VSelectionControlGroup/index.ts new file mode 100644 index 0000000..d2af198 --- /dev/null +++ b/packages/vuetify/src/components/VSelectionControlGroup/index.ts @@ -0,0 +1 @@ +export { VSelectionControlGroup } from './VSelectionControlGroup' diff --git a/packages/vuetify/src/components/VSheet/VSheet.sass b/packages/vuetify/src/components/VSheet/VSheet.sass new file mode 100644 index 0000000..dfb1197 --- /dev/null +++ b/packages/vuetify/src/components/VSheet/VSheet.sass @@ -0,0 +1,15 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-sheet + display: block + + @include tools.border($sheet-border...) + @include tools.elevation($sheet-elevation) + @include tools.position($sheet-positions) + @include tools.rounded($sheet-border-radius) + @include tools.theme($sheet-theme...) + + &--rounded + @include tools.rounded($sheet-rounded-border-radius) diff --git a/packages/vuetify/src/components/VSheet/VSheet.tsx b/packages/vuetify/src/components/VSheet/VSheet.tsx new file mode 100644 index 0000000..ae18403 --- /dev/null +++ b/packages/vuetify/src/components/VSheet/VSheet.tsx @@ -0,0 +1,75 @@ +// Styles +import './VSheet.sass' + +// Composables +import { makeBorderProps, useBorder } from '@/composables/border' +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeLocationProps, useLocation } from '@/composables/location' +import { makePositionProps, usePosition } from '@/composables/position' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVSheetProps = propsFactory({ + color: String, + + ...makeBorderProps(), + ...makeComponentProps(), + ...makeDimensionProps(), + ...makeElevationProps(), + ...makeLocationProps(), + ...makePositionProps(), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), +}, 'VSheet') + +export const VSheet = genericComponent()({ + name: 'VSheet', + + props: makeVSheetProps(), + + setup (props, { slots }) { + const { themeClasses } = provideTheme(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')) + const { borderClasses } = useBorder(props) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { locationStyles } = useLocation(props) + const { positionClasses } = usePosition(props) + const { roundedClasses } = useRounded(props) + + useRender(() => ( + + )) + + return {} + }, +}) + +export type VSheet = InstanceType diff --git a/packages/vuetify/src/components/VSheet/_variables.scss b/packages/vuetify/src/components/VSheet/_variables.scss new file mode 100644 index 0000000..a6ed9b2 --- /dev/null +++ b/packages/vuetify/src/components/VSheet/_variables.scss @@ -0,0 +1,26 @@ +@use '../../styles/settings'; + +// VSheet +$sheet-background: rgb(var(--v-theme-surface)) !default; +$sheet-border-color: settings.$border-color-root !default; +$sheet-border-radius: 0 !default; +$sheet-border-style: settings.$border-style-root !default; +$sheet-border-thin-width: thin !default; +$sheet-border-width: 0 !default; +$sheet-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$sheet-elevation: 0 !default; +$sheet-positions: absolute fixed relative sticky !default; +$sheet-rounded-border-radius: settings.$border-radius-root !default; + +// Lists +$sheet-border: ( + $sheet-border-color, + $sheet-border-style, + $sheet-border-width, + $sheet-border-thin-width +) !default; + +$sheet-theme: ( + $sheet-background, + $sheet-color +) !default; diff --git a/packages/vuetify/src/components/VSheet/index.ts b/packages/vuetify/src/components/VSheet/index.ts new file mode 100644 index 0000000..c3e6c41 --- /dev/null +++ b/packages/vuetify/src/components/VSheet/index.ts @@ -0,0 +1 @@ +export { VSheet } from './VSheet' diff --git a/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass new file mode 100644 index 0000000..6a7c29d --- /dev/null +++ b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass @@ -0,0 +1,229 @@ +// Imports +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-skeleton-loader + align-items: center + background: $skeleton-loader-background + border-radius: $skeleton-loader-border-radius + display: flex + flex-wrap: wrap + position: relative + vertical-align: top + + &__actions + justify-content: end + + .v-skeleton-loader__ossein + height: 100% + + .v-skeleton-loader__avatar, + .v-skeleton-loader__button, + .v-skeleton-loader__chip, + .v-skeleton-loader__divider, + .v-skeleton-loader__heading, + .v-skeleton-loader__image, + .v-skeleton-loader__ossein, + .v-skeleton-loader__text + background: $skeleton-loader-text-background + + .v-skeleton-loader__list-item, + .v-skeleton-loader__list-item-avatar, + .v-skeleton-loader__list-item-text, + .v-skeleton-loader__list-item-two-line, + .v-skeleton-loader__list-item-avatar-two-line, + .v-skeleton-loader__list-item-three-line, + .v-skeleton-loader__list-item-avatar-three-line + border-radius: $skeleton-loader-border-radius + + &__bone + align-items: center + border-radius: inherit + display: flex + flex: 1 1 100% + flex-wrap: wrap + overflow: hidden + position: relative + + &::after + @include tools.absolute(true) + + animation: $skeleton-loader-loading-animation + background: $skeleton-loader-bone-background + transform: $skeleton-loader-loading-transform + z-index: 1 + + &__avatar + border-radius: 50% + flex: 0 1 auto + margin: $skeleton-loader-avatar-margin + max-height: $skeleton-loader-avatar-height + min-height: $skeleton-loader-avatar-height + height: $skeleton-loader-avatar-height + max-width: $skeleton-loader-avatar-width + min-width: $skeleton-loader-avatar-width + width: $skeleton-loader-avatar-width + + + .v-skeleton-loader__bone + flex: 1 1 auto + margin-inline-start: 0 + + + .v-skeleton-loader__sentences, + + .v-skeleton-loader__paragraph + > .v-skeleton-loader__text + margin-inline-start: 0 + + &__button + border-radius: $skeleton-loader-button-border-radius + height: $skeleton-loader-button-height + margin: $skeleton-loader-gutter + max-width: $skeleton-loader-button-width + + + .v-skeleton-loader__bone + flex: 1 1 auto + margin-inline-start: 0 + + + .v-skeleton-loader__sentences, + + .v-skeleton-loader__paragraph + > .v-skeleton-loader__text + margin-inline-start: 0 + + &__chip + border-radius: $skeleton-loader-chip-border-radius + margin: $skeleton-loader-gutter + height: $skeleton-loader-chip-height + max-width: $skeleton-loader-chip-width + + + .v-skeleton-loader__bone + flex: 1 1 auto + margin-inline-start: 0 + + + .v-skeleton-loader__sentences, + + .v-skeleton-loader__paragraph + > .v-skeleton-loader__text + margin-inline-start: 0 + + &__date-picker + border-radius: $skeleton-loader-date-picker-border-radius + + .v-skeleton-loader__list-item:first-child + .v-skeleton-loader__text + max-width: $skeleton-loader-date-picker-text-max-width + width: $skeleton-loader-date-picker-text-width + + .v-skeleton-loader__heading + max-width: $skeleton-loader-date-picker-heading-max-width + width: $skeleton-loader-date-picker-heading-width + + &__date-picker-days + flex-wrap: wrap + margin: $skeleton-loader-gutter + + .v-skeleton-loader__avatar + border-radius: $skeleton-loader-border-radius + margin: $skeleton-loader-date-picker-days-margin + max-width: 100% + + &__date-picker-options + flex-wrap: nowrap + + .v-skeleton-loader__text + flex: 1 1 auto + + &__divider + border-radius: $skeleton-loader-divider-border-radius + height: $skeleton-loader-divider-height + + &__heading + border-radius: $skeleton-loader-heading-border-radius + margin: $skeleton-loader-gutter + height: $skeleton-loader-heading-height + + + .v-skeleton-loader__subtitle + margin-top: -$skeleton-loader-gutter + + &__image + height: $skeleton-loader-image-height + border-radius: 0 + + &__card + .v-skeleton-loader__image + border-radius: 0 + + &__list-item + margin: $skeleton-loader-gutter + + .v-skeleton-loader__text + margin: 0 + + &__table-thead + justify-content: space-between + + .v-skeleton-loader__heading + margin-top: $skeleton-loader-gutter + max-width: $skeleton-loader-gutter + + &__table-tfoot + flex-wrap: nowrap + + > .v-skeleton-loader__text.v-skeleton-loader__bone + margin-top: $skeleton-loader-gutter + + &__table-row + align-items: baseline + margin: $skeleton-loader-table-row-margin + justify-content: space-evenly + flex-wrap: nowrap + + > .v-skeleton-loader__text.v-skeleton-loader__bone + margin-inline: $skeleton-loader-table-row-text-margin + + + .v-skeleton-loader__divider + margin: 0 $skeleton-loader-gutter + + &__table-cell + align-items: center + display: flex + height: $skeleton-loader-table-cell-height + width: $skeleton-loader-table-cell-width + + .v-skeleton-loader__text + margin-bottom: 0 + + &__subtitle + max-width: $skeleton-loader-subtitle-max-width + + > .v-skeleton-loader__text + height: $skeleton-loader-subtitle-text-height + border-radius: $skeleton-loader-subtitle-text-border-radius + + &__text + border-radius: $skeleton-loader-text-border-radius + margin: $skeleton-loader-gutter + height: $skeleton-loader-text-height + + + .v-skeleton-loader__text + margin-top: $skeleton-loader-text-two-text-margin-top + max-width: $skeleton-loader-text-two-text-max-width + + + .v-skeleton-loader__text + max-width: $skeleton-loader-text-three-text-max-width + + &--boilerplate + .v-skeleton-loader__bone:after + display: none + + &--is-loading + overflow: hidden + + &--tile + border-radius: 0 + + .v-skeleton-loader__bone + border-radius: 0 + + @keyframes loading + 100% + transform: translateX(100%) diff --git a/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.tsx b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.tsx new file mode 100644 index 0000000..6d1616a --- /dev/null +++ b/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.tsx @@ -0,0 +1,176 @@ +// Styles +import './VSkeletonLoader.sass' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeDimensionProps, useDimension } from '@/composables/dimensions' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { useLocale } from '@/composables/locale' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, toRef } from 'vue' +import { genericComponent, propsFactory, useRender, wrapInArray } from '@/util' + +// Types +import type { PropType, VNode } from 'vue' + +type VSkeletonBone = T | VSkeletonBone[] + +export type VSkeletonBones = VSkeletonBone +export type VSkeletonLoaderType = keyof typeof rootTypes + +export const rootTypes = { + actions: 'button@2', + article: 'heading, paragraph', + avatar: 'avatar', + button: 'button', + card: 'image, heading', + 'card-avatar': 'image, list-item-avatar', + chip: 'chip', + 'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions', + 'date-picker-options': 'text, avatar@2', + 'date-picker-days': 'avatar@28', + divider: 'divider', + heading: 'heading', + image: 'image', + 'list-item': 'text', + 'list-item-avatar': 'avatar, text', + 'list-item-two-line': 'sentences', + 'list-item-avatar-two-line': 'avatar, sentences', + 'list-item-three-line': 'paragraph', + 'list-item-avatar-three-line': 'avatar, paragraph', + ossein: 'ossein', + paragraph: 'text@3', + sentences: 'text@2', + subtitle: 'text', + table: 'table-heading, table-thead, table-tbody, table-tfoot', + 'table-heading': 'chip, text', + 'table-thead': 'heading@6', + 'table-tbody': 'table-row-divider@6', + 'table-row-divider': 'table-row, divider', + 'table-row': 'text@6', + 'table-tfoot': 'text@2, avatar@2', + text: 'text', +} as const + +function genBone (type: string, children: VSkeletonBones = []) { + return ( +
    + { children } +
    + ) +} + +function genBones (bone: string) { + // e.g. 'text@3' + const [type, length] = bone.split('@') as [VSkeletonLoaderType, number] + + // Generate a length array based upon + // value after @ in the bone string + return Array.from({ length }).map(() => genStructure(type)) +} + +function genStructure (type?: string): VSkeletonBones { + let children: VSkeletonBones = [] + + if (!type) return children + + // TODO: figure out a better way to type this + const bone = (rootTypes as Record)[type] + + // End of recursion, do nothing + /* eslint-disable-next-line no-empty, brace-style */ + if (type === bone) {} + // Array of values - e.g. 'heading, paragraph, text@2' + else if (type.includes(',')) return mapBones(type) + // Array of values - e.g. 'paragraph@4' + else if (type.includes('@')) return genBones(type) + // Array of values - e.g. 'card@2' + else if (bone.includes(',')) children = mapBones(bone) + // Array of values - e.g. 'list-item@2' + else if (bone.includes('@')) children = genBones(bone) + // Single value - e.g. 'card-heading' + else if (bone) children.push(genStructure(bone)) + + return [genBone(type, children)] +} + +function mapBones (bones: string) { + // Remove spaces and return array of structures + return bones.replace(/\s/g, '').split(',').map(genStructure) +} + +export const makeVSkeletonLoaderProps = propsFactory({ + boilerplate: Boolean, + color: String, + loading: Boolean, + loadingText: { + type: String, + default: '$vuetify.loading', + }, + type: { + type: [String, Array] as PropType< + | VSkeletonLoaderType | (string & {}) + | ReadonlyArray + >, + default: 'ossein', + }, + + ...makeDimensionProps(), + ...makeElevationProps(), + ...makeThemeProps(), +}, 'VSkeletonLoader') + +export const VSkeletonLoader = genericComponent()({ + name: 'VSkeletonLoader', + + props: makeVSkeletonLoaderProps(), + + setup (props, { slots }) { + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')) + const { dimensionStyles } = useDimension(props) + const { elevationClasses } = useElevation(props) + const { themeClasses } = provideTheme(props) + const { t } = useLocale() + + const items = computed(() => genStructure(wrapInArray(props.type).join(','))) + + useRender(() => { + const isLoading = !slots.default || props.loading + + return ( +
    + { isLoading ? items.value : slots.default?.() } +
    + ) + }) + + return {} + }, +}) + +export type VSkeletonLoader = InstanceType diff --git a/packages/vuetify/src/components/VSkeletonLoader/_variables.scss b/packages/vuetify/src/components/VSkeletonLoader/_variables.scss new file mode 100644 index 0000000..f2f921c --- /dev/null +++ b/packages/vuetify/src/components/VSkeletonLoader/_variables.scss @@ -0,0 +1,44 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +$skeleton-loader-actions-button-margin: 12px !default; +$skeleton-loader-actions-padding: 16px 16px 8px !default; +$skeleton-loader-avatar-height: 48px !default; +$skeleton-loader-avatar-margin: 8px 16px !default; +$skeleton-loader-avatar-width: 48px !default; +$skeleton-loader-background: rgb(var(--v-theme-surface)) !default; +$skeleton-loader-bone-background: linear-gradient(90deg, rgba(var(--v-theme-surface), 0), rgba(var(--v-theme-surface), .3), rgba(var(--v-theme-surface), 0)) !default; +$skeleton-loader-border-radius: settings.$border-radius-root !default; +$skeleton-loader-button-border-radius: settings.$border-radius-root !default; +$skeleton-loader-button-height: 36px !default; +$skeleton-loader-button-width: 64px !default; +$skeleton-loader-chip-border-radius: 16px !default; +$skeleton-loader-chip-height: 32px !default; +$skeleton-loader-chip-width: 96px !default; +$skeleton-loader-date-picker-border-radius: inherit !default; +$skeleton-loader-date-picker-days-margin: 4px !default; +$skeleton-loader-date-picker-heading-max-width: 256px !default; +$skeleton-loader-date-picker-heading-width: 40% !default; +$skeleton-loader-date-picker-text-max-width: 88px !default; +$skeleton-loader-date-picker-text-width: 20% !default; +$skeleton-loader-divider-border-radius: 1px !default; +$skeleton-loader-divider-height: 2px !default; +$skeleton-loader-gutter: 16px !default; +$skeleton-loader-heading-border-radius: 12px !default; +$skeleton-loader-heading-height: 24px !default; +$skeleton-loader-image-height: 150px !default; +$skeleton-loader-loading-animation: loading 1.5s infinite !default; +$skeleton-loader-loading-transform: translateX(-100%) !default; +$skeleton-loader-subtitle-max-width: 70% !default; +$skeleton-loader-subtitle-text-border-radius: 8px !default; +$skeleton-loader-subtitle-text-height: 16px !default; +$skeleton-loader-table-cell-height: 48px !default; +$skeleton-loader-table-cell-width: 88px !default; +$skeleton-loader-table-row-margin: 0 8px !default; +$skeleton-loader-table-row-text-margin: 8px !default; +$skeleton-loader-text-background: rgba(var(--v-theme-on-surface), var(--v-border-opacity)) !default; +$skeleton-loader-text-border-radius: 6px !default; +$skeleton-loader-text-height: 12px !default; +$skeleton-loader-text-three-text-max-width: 70% !default; +$skeleton-loader-text-two-text-margin-top: -8px !default; +$skeleton-loader-text-two-text-max-width: 50% !default; diff --git a/packages/vuetify/src/components/VSkeletonLoader/index.ts b/packages/vuetify/src/components/VSkeletonLoader/index.ts new file mode 100644 index 0000000..c845f0a --- /dev/null +++ b/packages/vuetify/src/components/VSkeletonLoader/index.ts @@ -0,0 +1 @@ +export { VSkeletonLoader } from './VSkeletonLoader' diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.sass b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.sass new file mode 100644 index 0000000..3303413 --- /dev/null +++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.sass @@ -0,0 +1,61 @@ +@use 'sass:math' +@use 'sass:map' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Block + .v-slide-group + display: flex + overflow: hidden + + // Element + .v-slide-group__next, + .v-slide-group__prev + align-items: center + display: flex + flex: 0 1 $slide-group-prev-basis + justify-content: center + min-width: $slide-group-prev-basis + cursor: pointer + + &--disabled + pointer-events: none + opacity: var(--v-disabled-opacity) + + .v-slide-group__content + display: flex + flex: 1 0 auto + position: relative + transition: 0.2s all settings.$standard-easing + white-space: nowrap + + > * + white-space: initial + + .v-slide-group__container + contain: content + display: flex + flex: 1 1 auto + overflow-x: auto + overflow-y: hidden + + scrollbar-width: none + scrollbar-color: rgba(0, 0, 0, 0) + + &::-webkit-scrollbar + display: none + + // Modifiers + .v-slide-group--vertical + max-height: inherit + + &, + .v-slide-group__container, + .v-slide-group__content + flex-direction: column + + .v-slide-group__container + overflow-x: hidden + overflow-y: auto diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx new file mode 100644 index 0000000..d0f809b --- /dev/null +++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx @@ -0,0 +1,458 @@ +// Styles +import './VSlideGroup.sass' + +// Components +import { VFadeTransition } from '@/components/transitions' +import { VIcon } from '@/components/VIcon' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDisplayProps, useDisplay } from '@/composables/display' +import { useGoTo } from '@/composables/goto' +import { makeGroupProps, useGroup } from '@/composables/group' +import { IconValue } from '@/composables/icons' +import { useRtl } from '@/composables/locale' +import { useResizeObserver } from '@/composables/resizeObserver' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { computed, shallowRef, watch } from 'vue' +import { + calculateCenteredTarget, + calculateUpdatedTarget, + getClientSize, + getOffsetSize, + getScrollPosition, + getScrollSize, +} from './helpers' +import { focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util' + +// Types +import type { InjectionKey, PropType } from 'vue' +import type { GoToOptions } from '@/composables/goto' +import type { GroupProvide } from '@/composables/group' +import type { GenericProps } from '@/util' + +export const VSlideGroupSymbol: InjectionKey = Symbol.for('vuetify:v-slide-group') + +interface SlideGroupSlot { + next: GroupProvide['next'] + prev: GroupProvide['prev'] + select: GroupProvide['select'] + isSelected: GroupProvide['isSelected'] +} + +type VSlideGroupSlots = { + default: SlideGroupSlot + prev: SlideGroupSlot + next: SlideGroupSlot +} + +export const makeVSlideGroupProps = propsFactory({ + centerActive: Boolean, + direction: { + type: String as PropType<'horizontal' | 'vertical'>, + default: 'horizontal', + }, + symbol: { + type: null, + default: VSlideGroupSymbol, + }, + nextIcon: { + type: IconValue, + default: '$next', + }, + prevIcon: { + type: IconValue, + default: '$prev', + }, + showArrows: { + type: [Boolean, String], + validator: (v: any) => ( + typeof v === 'boolean' || [ + 'always', + 'desktop', + 'mobile', + ].includes(v) + ), + }, + + ...makeComponentProps(), + ...makeDisplayProps({ mobile: null }), + ...makeTagProps(), + ...makeGroupProps({ + selectedClass: 'v-slide-group-item--active', + }), +}, 'VSlideGroup') + +export const VSlideGroup = genericComponent( + props: { + modelValue?: T + 'onUpdate:modelValue'?: (value: T) => void + }, + slots: VSlideGroupSlots, +) => GenericProps>()({ + name: 'VSlideGroup', + + props: makeVSlideGroupProps(), + + emits: { + 'update:modelValue': (value: any) => true, + }, + + setup (props, { slots }) { + const { isRtl } = useRtl() + const { displayClasses, mobile } = useDisplay(props) + const group = useGroup(props, props.symbol) + const isOverflowing = shallowRef(false) + const scrollOffset = shallowRef(0) + const containerSize = shallowRef(0) + const contentSize = shallowRef(0) + const isHorizontal = computed(() => props.direction === 'horizontal') + + const { resizeRef: containerRef, contentRect: containerRect } = useResizeObserver() + const { resizeRef: contentRef, contentRect } = useResizeObserver() + + const goTo = useGoTo() + const goToOptions = computed>(() => { + return { + container: containerRef.el, + duration: 200, + easing: 'easeOutQuart', + } + }) + + const firstSelectedIndex = computed(() => { + if (!group.selected.value.length) return -1 + + return group.items.value.findIndex(item => item.id === group.selected.value[0]) + }) + + const lastSelectedIndex = computed(() => { + if (!group.selected.value.length) return -1 + + return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]) + }) + + if (IN_BROWSER) { + let frame = -1 + watch(() => [group.selected.value, containerRect.value, contentRect.value, isHorizontal.value], () => { + cancelAnimationFrame(frame) + frame = requestAnimationFrame(() => { + if (containerRect.value && contentRect.value) { + const sizeProperty = isHorizontal.value ? 'width' : 'height' + + containerSize.value = containerRect.value[sizeProperty] + contentSize.value = contentRect.value[sizeProperty] + + isOverflowing.value = containerSize.value + 1 < contentSize.value + } + + if (firstSelectedIndex.value >= 0 && contentRef.el) { + // TODO: Is this too naive? Should we store element references in group composable? + const selectedElement = contentRef.el.children[lastSelectedIndex.value] as HTMLElement + + scrollToChildren(selectedElement, props.centerActive) + } + }) + }) + } + + const isFocused = shallowRef(false) + + function scrollToChildren (children: HTMLElement, center?: boolean) { + let target = 0 + + if (center) { + target = calculateCenteredTarget({ + containerElement: containerRef.el!, + isHorizontal: isHorizontal.value, + selectedElement: children, + }) + } else { + target = calculateUpdatedTarget({ + containerElement: containerRef.el!, + isHorizontal: isHorizontal.value, + isRtl: isRtl.value, + selectedElement: children, + }) + } + + scrollToPosition(target) + } + + function scrollToPosition (newPosition: number) { + if (!IN_BROWSER || !containerRef.el) return + + const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el) + const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el) + const scrollSize = getScrollSize(isHorizontal.value, containerRef.el) + + if ( + scrollSize <= offsetSize || + // Prevent scrolling by only a couple of pixels, which doesn't look smooth + Math.abs(newPosition - scrollPosition) < 16 + ) return + + if (isHorizontal.value && isRtl.value && containerRef.el) { + const { scrollWidth, offsetWidth: containerWidth } = containerRef.el! + + newPosition = (scrollWidth - containerWidth) - newPosition + } + + if (isHorizontal.value) { + goTo.horizontal(newPosition, goToOptions.value) + } else { + goTo(newPosition, goToOptions.value) + } + } + + function onScroll (e: Event) { + const { scrollTop, scrollLeft } = e.target as HTMLElement + + scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop + } + + function onFocusin (e: FocusEvent) { + isFocused.value = true + + if (!isOverflowing.value || !contentRef.el) return + + // Focused element is likely to be the root of an item, so a + // breadth-first search will probably find it in the first iteration + for (const el of e.composedPath()) { + for (const item of contentRef.el.children) { + if (item === el) { + scrollToChildren(item as HTMLElement) + return + } + } + } + } + + function onFocusout (e: FocusEvent) { + isFocused.value = false + } + + // Affix clicks produce onFocus that we have to ignore to avoid extra scrollToChildren + let ignoreFocusEvent = false + function onFocus (e: FocusEvent) { + if ( + !ignoreFocusEvent && + !isFocused.value && + !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget as Node)) + ) focus() + + ignoreFocusEvent = false + } + + function onFocusAffixes () { + ignoreFocusEvent = true + } + + function onKeydown (e: KeyboardEvent) { + if (!contentRef.el) return + + function toFocus (location: Parameters[0]) { + e.preventDefault() + focus(location) + } + + if (isHorizontal.value) { + if (e.key === 'ArrowRight') { + toFocus(isRtl.value ? 'prev' : 'next') + } else if (e.key === 'ArrowLeft') { + toFocus(isRtl.value ? 'next' : 'prev') + } + } else { + if (e.key === 'ArrowDown') { + toFocus('next') + } else if (e.key === 'ArrowUp') { + toFocus('prev') + } + } + + if (e.key === 'Home') { + toFocus('first') + } else if (e.key === 'End') { + toFocus('last') + } + } + + function focus (location?: 'next' | 'prev' | 'first' | 'last') { + if (!contentRef.el) return + + let el: HTMLElement | undefined + + if (!location) { + const focusable = focusableChildren(contentRef.el) + el = focusable[0] + } else if (location === 'next') { + el = contentRef.el.querySelector(':focus')?.nextElementSibling as HTMLElement | undefined + + if (!el) return focus('first') + } else if (location === 'prev') { + el = contentRef.el.querySelector(':focus')?.previousElementSibling as HTMLElement | undefined + + if (!el) return focus('last') + } else if (location === 'first') { + el = (contentRef.el.firstElementChild as HTMLElement) + } else if (location === 'last') { + el = (contentRef.el.lastElementChild as HTMLElement) + } + + if (el) { + el.focus({ preventScroll: true }) + } + } + + function scrollTo (location: 'prev' | 'next') { + const direction = isHorizontal.value && isRtl.value ? -1 : 1 + + const offsetStep = (location === 'prev' ? -direction : direction) * containerSize.value + + let newPosition = scrollOffset.value + offsetStep + + // TODO: improve it + if (isHorizontal.value && isRtl.value && containerRef.el) { + const { scrollWidth, offsetWidth: containerWidth } = containerRef.el! + + newPosition += scrollWidth - containerWidth + } + + scrollToPosition(newPosition) + } + + const slotProps = computed(() => ({ + next: group.next, + prev: group.prev, + select: group.select, + isSelected: group.isSelected, + })) + + const hasAffixes = computed(() => { + switch (props.showArrows) { + // Always show arrows on desktop & mobile + case 'always': return true + + // Always show arrows on desktop + case 'desktop': return !mobile.value + + // Show arrows on mobile when overflowing. + // This matches the default 2.2 behavior + case true: return isOverflowing.value || Math.abs(scrollOffset.value) > 0 + + // Always show on mobile + case 'mobile': return ( + mobile.value || + (isOverflowing.value || Math.abs(scrollOffset.value) > 0) + ) + + // https://material.io/components/tabs#scrollable-tabs + // Always show arrows when + // overflowed on desktop + default: return ( + !mobile.value && + (isOverflowing.value || Math.abs(scrollOffset.value) > 0) + ) + } + }) + + const hasPrev = computed(() => { + // 1 pixel in reserve, may be lost after rounding + return Math.abs(scrollOffset.value) > 1 + }) + + const hasNext = computed(() => { + if (!containerRef.value) return false + + const scrollSize = getScrollSize(isHorizontal.value, containerRef.el) + const clientSize = getClientSize(isHorizontal.value, containerRef.el) + + const scrollSizeMax = scrollSize - clientSize + + // 1 pixel in reserve, may be lost after rounding + return scrollSizeMax - Math.abs(scrollOffset.value) > 1 + }) + + useRender(() => ( + + { hasAffixes.value && ( +
    hasPrev.value && scrollTo('prev') } + > + { slots.prev?.(slotProps.value) ?? ( + + + + )} +
    + )} + +
    +
    + { slots.default?.(slotProps.value) } +
    +
    + + { hasAffixes.value && ( +
    hasNext.value && scrollTo('next') } + > + { slots.next?.(slotProps.value) ?? ( + + + + )} +
    + )} +     + )) + + return { + selected: group.selected, + scrollTo, + scrollOffset, + focus, + } + }, +}) + +export type VSlideGroup = InstanceType diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroupItem.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroupItem.tsx new file mode 100644 index 0000000..61f50d7 --- /dev/null +++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroupItem.tsx @@ -0,0 +1,42 @@ +// Composables +import { makeGroupItemProps, useGroupItem } from '@/composables/group' + +// Utilities +import { VSlideGroupSymbol } from './VSlideGroup' +import { genericComponent } from '@/util' + +// Types +import type { UnwrapRef } from 'vue' +import type { GroupItemProvide } from '@/composables/group' + +type VSlideGroupItemSlots = { + default: { + isSelected: UnwrapRef + select: GroupItemProvide['select'] + toggle: GroupItemProvide['toggle'] + selectedClass: UnwrapRef + } +} + +export const VSlideGroupItem = genericComponent()({ + name: 'VSlideGroupItem', + + props: makeGroupItemProps(), + + emits: { + 'group:selected': (val: { value: boolean }) => true, + }, + + setup (props, { slots }) { + const slideGroupItem = useGroupItem(props, VSlideGroupSymbol) + + return () => slots.default?.({ + isSelected: slideGroupItem.isSelected.value, + select: slideGroupItem.select, + toggle: slideGroupItem.toggle, + selectedClass: slideGroupItem.selectedClass.value, + }) + }, +}) + +export type VSlideGroupItem = InstanceType diff --git a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx new file mode 100644 index 0000000..62bfd1a --- /dev/null +++ b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx @@ -0,0 +1,255 @@ +/* eslint-disable sonarjs/no-identical-functions */ +/// + +// Components +import { VSlideGroup, VSlideGroupItem } from '../' +import { Application, CenteredGrid } from '../../../../cypress/templates' +import { VCard } from '@/components/VCard' + +// Utilities +import { createRange } from '@/util' + +describe('VSlideGroup', () => { + it('should support default scoped slot with selection', () => { + cy.mount(() => ( + + + + { createRange(6).map(i => ( + + { props => ( + { i } + )} + + ))} + + + + )) + + cy.get('.v-card').eq(0).click().should('have.class', 'bg-primary') + + cy.get('.v-card').eq(3).click().should('have.class', 'bg-primary') + }) + + // TODO: fails in headless mode + it.skip('should disable affixes when appropriate', () => { + cy.mount(() => ( + + + + { createRange(6).map(i => ( + + { i } + + ))} + + + + )) + + cy.get('.v-slide-group__prev').should('exist').should('have.css', 'pointer-events', 'none') + + cy.get('.v-slide-group__next').should('exist').click().should('have.css', 'pointer-events', 'none') + + cy.get('.v-slide-group__prev').should('exist').should('not.have.css', 'pointer-events', 'none').click() + }) + + it('should accept scoped prev/next slots', () => { + cy.mount(() => ( + + + + {{ + prev: props =>
    prev
    , + next: props =>
    next
    , + default: () => createRange(6).map(i => ( + + { i } + + )), + }} +     +     +     + )) + + cy.get('.v-slide-group__next').should('exist').should('have.text', 'next').click() + // on CI pointer-events still with none, we just force the click to avoid CI issues + cy.get('.v-slide-group__prev').should('exist').should('have.text', 'prev').click({ force: true }) + }) + + it('should always showArrows', () => { + cy.mount(() => ( + + + + { createRange(6).map(i => ( + + { i } + + ))} + + + + )) + + cy.get('.v-slide-group__prev').should('exist') + cy.get('.v-slide-group__next').should('exist') + }) + + it('should show arrows on desktop only', () => { + cy.mount(() => ( + + + + { createRange(6).map(i => ( + + { i } + + ))} + + + + ), null, { + display: { + mobileBreakpoint: 'sm', + }, + }) + + cy.viewport(500, 600) + + cy.get('.v-slide-group__prev').should('not.exist') + cy.get('.v-slide-group__next').should('not.exist') + + cy.viewport(800, 600) + + cy.get('.v-slide-group__prev').should('exist') + cy.get('.v-slide-group__next').should('exist') + }) + + it('should show arrows on mobile only', () => { + cy.viewport(800, 600) + + cy.mount(() => ( + + + + { createRange(3).map(i => ( + + { i } + + ))} + + + + ), null, { + display: { + mobileBreakpoint: 'sm', + }, + }) + + cy.get('.v-slide-group__prev').should('not.exist') + cy.get('.v-slide-group__next').should('not.exist') + + cy.viewport(500, 400) + + cy.get('.v-slide-group__prev').should('exist') + cy.get('.v-slide-group__next').should('exist') + }) + + it('should show arrows when overflowed', () => { + cy.viewport(800, 200) + + cy.mount(() => ( + + + { createRange(6).map(i => ( + + { i } + + ))} + + + )) + + cy.get('.v-slide-group__prev').should('not.exist') + .get('.v-slide-group__next').should('not.exist') + + cy.viewport(400, 200) + + cy.get('.v-slide-group__prev').should('exist') + .get('.v-slide-group__next').should('exist') + }) + + it('should scroll active item into view', () => { + cy.mount(() => ( + + + + { createRange(10).map(i => ( + + { props => { i } } + + ))} + + + + )) + + cy.get('.v-card').eq(7).should('exist').should('be.visible').should('have.class', 'bg-primary') + }) + + it('supports native scroll', () => { + cy.viewport(1280, 768) + .mount(() => ( + + + + { createRange(8).map(i => ( + + { props => { i } } + + ))} + + + + )) + + cy.get('.v-slide-group__container').should('exist').scrollTo(450, 0, { ensureScrollable: true }) + + cy.get('.item-1').should('not.be.visible') + cy.get('.item-7').should('be.visible') + }) + + it('should support rtl', () => { + cy.mount(() => ( + + + + { createRange(8).map(i => ( + + { props => { i } } + + ))} + + + + )) + + cy.get('.item-7').should('exist').should('not.be.visible') + + cy.get('.v-slide-group__prev--disabled').should('exist') + cy.get('.v-slide-group__next--disabled').should('not.exist') + + cy.get('.v-slide-group__next').click().click() + + cy.get('.item-7').should('exist').should('be.visible') + }) +}) diff --git a/packages/vuetify/src/components/VSlideGroup/_variables.scss b/packages/vuetify/src/components/VSlideGroup/_variables.scss new file mode 100644 index 0000000..2d1b329 --- /dev/null +++ b/packages/vuetify/src/components/VSlideGroup/_variables.scss @@ -0,0 +1 @@ +$slide-group-prev-basis: 52px !default; diff --git a/packages/vuetify/src/components/VSlideGroup/helpers.ts b/packages/vuetify/src/components/VSlideGroup/helpers.ts new file mode 100644 index 0000000..7a4c43b --- /dev/null +++ b/packages/vuetify/src/components/VSlideGroup/helpers.ts @@ -0,0 +1,83 @@ +export function calculateUpdatedTarget ({ + selectedElement, + containerElement, + isRtl, + isHorizontal, +}: { + selectedElement: HTMLElement + containerElement: HTMLElement + isRtl: boolean + isHorizontal: boolean +}): number { + const containerSize = getOffsetSize(isHorizontal, containerElement) + const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement) + + const childrenSize = getOffsetSize(isHorizontal, selectedElement) + const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement) + + const additionalOffset = childrenSize * 0.4 + + if (scrollPosition > childrenStartPosition) { + return childrenStartPosition - additionalOffset + } else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) { + return childrenStartPosition - containerSize + childrenSize + additionalOffset + } + + return scrollPosition +} + +export function calculateCenteredTarget ({ + selectedElement, + containerElement, + isHorizontal, +}: { + selectedElement: HTMLElement + containerElement: HTMLElement + isHorizontal: boolean +}): number { + const containerOffsetSize = getOffsetSize(isHorizontal, containerElement) + const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement) + const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement) + + return childrenOffsetPosition - (containerOffsetSize / 2) + (childrenOffsetSize / 2) +} + +export function getScrollSize (isHorizontal: boolean, element?: HTMLElement) { + const key = isHorizontal ? 'scrollWidth' : 'scrollHeight' + return element?.[key] || 0 +} + +export function getClientSize (isHorizontal: boolean, element?: HTMLElement) { + const key = isHorizontal ? 'clientWidth' : 'clientHeight' + return element?.[key] || 0 +} + +export function getScrollPosition (isHorizontal: boolean, rtl: boolean, element?: HTMLElement) { + if (!element) { + return 0 + } + + const { + scrollLeft, + offsetWidth, + scrollWidth, + } = element + + if (isHorizontal) { + return rtl + ? scrollWidth - offsetWidth + scrollLeft + : scrollLeft + } + + return element.scrollTop +} + +export function getOffsetSize (isHorizontal: boolean, element?: HTMLElement) { + const key = isHorizontal ? 'offsetWidth' : 'offsetHeight' + return element?.[key] || 0 +} + +export function getOffsetPosition (isHorizontal: boolean, element?: HTMLElement) { + const key = isHorizontal ? 'offsetLeft' : 'offsetTop' + return element?.[key] || 0 +} diff --git a/packages/vuetify/src/components/VSlideGroup/index.ts b/packages/vuetify/src/components/VSlideGroup/index.ts new file mode 100644 index 0000000..a0d8b21 --- /dev/null +++ b/packages/vuetify/src/components/VSlideGroup/index.ts @@ -0,0 +1,2 @@ +export { VSlideGroup } from './VSlideGroup' +export { VSlideGroupItem } from './VSlideGroupItem' diff --git a/packages/vuetify/src/components/VSlider/VSlider.sass b/packages/vuetify/src/components/VSlider/VSlider.sass new file mode 100644 index 0000000..899ed1d --- /dev/null +++ b/packages/vuetify/src/components/VSlider/VSlider.sass @@ -0,0 +1,63 @@ +@use 'sass:map' +@use 'sass:selector' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Block + .v-slider + .v-slider__container + input + cursor: default + padding: 0 + width: 100% + display: none + + > .v-input__append, + > .v-input__prepend + padding: 0 + + // Elements + .v-slider__container + position: relative + min-height: inherit + width: 100% + height: 100% + display: flex + justify-content: center + align-items: center + cursor: pointer + + .v-input--disabled & + opacity: var(--v-disabled-opacity) + + .v-input--error:not(.v-input--disabled) & + color: rgb(var(--v-theme-error)) + + // Modifiers + .v-slider.v-input--horizontal + align-items: center + margin-inline: $slider-horizontal-start $slider-horizontal-end + + > .v-input__control + min-height: $slider-horizontal-min-height + display: flex + align-items: center + + .v-slider.v-input--vertical + justify-content: center + margin-top: $slider-vertical-margin-top + margin-bottom: $slider-vertical-margin-bottom + + > .v-input__control + min-height: $slider-vertical-min-height + + .v-slider.v-input--disabled + pointer-events: none + + .v-slider--has-labels > .v-input__control + margin-bottom: $slider-tick-label-margin-top * .5 + + .v-slider__label + margin-inline-end: $slider-label-margin-end diff --git a/packages/vuetify/src/components/VSlider/VSlider.tsx b/packages/vuetify/src/components/VSlider/VSlider.tsx new file mode 100644 index 0000000..6afaf9b --- /dev/null +++ b/packages/vuetify/src/components/VSlider/VSlider.tsx @@ -0,0 +1,186 @@ +// Styles +import './VSlider.sass' + +// Components +import { VSliderThumb } from './VSliderThumb' +import { VSliderTrack } from './VSliderTrack' +import { makeVInputProps, VInput } from '@/components/VInput/VInput' +import { VLabel } from '@/components/VLabel' + +// Composables +import { makeSliderProps, useSlider, useSteps } from './slider' +import { makeFocusProps, useFocus } from '@/composables/focus' +import { useRtl } from '@/composables/locale' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, ref } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { VSliderThumbSlots } from './VSliderThumb' +import type { VSliderTrackSlots } from './VSliderTrack' +import type { VInputSlot, VInputSlots } from '@/components/VInput/VInput' + +export type VSliderSlots = VInputSlots & VSliderThumbSlots & VSliderTrackSlots & { + label: VInputSlot +} + +export const makeVSliderProps = propsFactory({ + ...makeFocusProps(), + ...makeSliderProps(), + ...makeVInputProps(), + + modelValue: { + type: [Number, String], + default: 0, + }, +}, 'VSlider') + +export const VSlider = genericComponent()({ + name: 'VSlider', + + props: makeVSliderProps(), + + emits: { + 'update:focused': (value: boolean) => true, + 'update:modelValue': (v: number) => true, + start: (value: number) => true, + end: (value: number) => true, + }, + + setup (props, { slots, emit }) { + const thumbContainerRef = ref() + const { rtlClasses } = useRtl() + + const steps = useSteps(props) + + const model = useProxiedModel( + props, + 'modelValue', + undefined, + value => { + return steps.roundValue(value == null ? steps.min.value : value) + }, + ) + + const { + min, + max, + mousePressed, + roundValue, + onSliderMousedown, + onSliderTouchstart, + trackContainerRef, + position, + hasLabels, + readonly, + } = useSlider({ + props, + steps, + onSliderStart: () => { + emit('start', model.value) + }, + onSliderEnd: ({ value }) => { + const roundedValue = roundValue(value) + model.value = roundedValue + emit('end', roundedValue) + }, + onSliderMove: ({ value }) => model.value = roundValue(value), + getActiveThumb: () => thumbContainerRef.value?.$el, + }) + + const { isFocused, focus, blur } = useFocus(props) + const trackStop = computed(() => position(model.value)) + + useRender(() => { + const inputProps = VInput.filterProps(props) + const hasPrepend = !!(props.label || slots.label || slots.prepend) + + return ( + + {{ + ...slots, + prepend: hasPrepend ? slotProps => ( + <> + { slots.label?.(slotProps) ?? ( + props.label + ? ( + + ) : undefined + )} + + { slots.prepend?.(slotProps) } + + ) : undefined, + default: ({ id, messagesId }) => ( +
    + + + + {{ 'tick-label': slots['tick-label'] }} + + + (model.value = v) } + position={ trackStop.value } + elevation={ props.elevation } + onFocus={ focus } + onBlur={ blur } + ripple={ props.ripple } + name={ props.name } + > + {{ 'thumb-label': slots['thumb-label'] }} + +
    + ), + }} +     + ) + }) + + return {} + }, +}) + +export type VSlider = InstanceType diff --git a/packages/vuetify/src/components/VSlider/VSliderThumb.sass b/packages/vuetify/src/components/VSlider/VSliderThumb.sass new file mode 100644 index 0000000..2d9b5a1 --- /dev/null +++ b/packages/vuetify/src/components/VSlider/VSliderThumb.sass @@ -0,0 +1,158 @@ +@use 'sass:map' +@use 'sass:selector' +@use 'sass:math' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Theme + .v-slider-thumb + touch-action: none + color: rgb(var(--v-theme-surface-variant)) + + .v-input--error:not(.v-input--disabled) & + color: inherit + + .v-slider-thumb__label + background: rgba(var(--v-theme-surface-variant), .7) + color: rgb(var(--v-theme-on-surface-variant)) + + &::before + color: rgba(var(--v-theme-surface-variant), .7) + + // Block + .v-slider-thumb + outline: none + position: absolute + transition: $slider-transition + + .v-slider-thumb__surface + cursor: pointer + width: var(--v-slider-thumb-size) + height: var(--v-slider-thumb-size) + border-radius: $slider-thumb-border-radius + user-select: none + background-color: currentColor + + @media (forced-colors: active) + background-color: highlight + + &::before + transition: 0.3s settings.$standard-easing + content: '' + color: inherit + top: 0 + left: 0 + width: 100% + height: 100% + border-radius: $slider-thumb-border-radius + background: currentColor + position: absolute + pointer-events: none + opacity: 0 + + &::after + content: '' + width: $slider-thumb-touch-size + height: $slider-thumb-touch-size + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) + + .v-slider-thumb__label-container + position: absolute + transition: $slider-thumb-label-transition + + .v-slider-thumb__label + display: flex + align-items: center + justify-content: center + font-size: $slider-thumb-label-font-size + min-width: $slider-thumb-label-min-width + height: $slider-thumb-label-height + border-radius: $slider-thumb-label-border-radius + padding: $slider-thumb-label-padding + position: absolute + user-select: none + transition: $slider-thumb-label-transition + + &::before + content: '' + width: 0 + height: 0 + position: absolute + + .v-slider-thumb__ripple + position: absolute + left: calc(var(--v-slider-thumb-size) / -2) + top: calc(var(--v-slider-thumb-size) / -2) + width: calc(var(--v-slider-thumb-size) * 2) + height: calc(var(--v-slider-thumb-size) * 2) + background: inherit + + // Horizontal + .v-slider.v-input--horizontal + .v-slider-thumb + top: 50% + transform: translateY(-50%) + inset-inline-start: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2) + + .v-slider-thumb__label-container + left: calc(var(--v-slider-thumb-size) / 2) + top: 0 + + .v-slider-thumb__label + bottom: $slider-thumb-label-offset + + +tools.ltr() + transform: translateX(-50%) + +tools.rtl() + transform: translateX(50%) + + &::before + border-left: $slider-thumb-label-wedge-size solid transparent + border-right: $slider-thumb-label-wedge-size solid transparent + border-top: $slider-thumb-label-wedge-size solid currentColor + bottom: -$slider-thumb-label-wedge-size + + // Vertical + .v-slider.v-input--vertical + .v-slider-thumb + top: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2) + + .v-slider-thumb__label-container + top: calc(var(--v-slider-thumb-size) / 2) + right: 0 + + .v-slider-thumb__label + top: math.div($slider-thumb-label-height, -2) + left: $slider-thumb-label-offset + + &::before + border-right: $slider-thumb-label-wedge-size solid currentColor + border-top: $slider-thumb-label-wedge-size solid transparent + border-bottom: $slider-thumb-label-wedge-size solid transparent + left: -$slider-thumb-label-wedge-size + + // Modifiers + .v-slider-thumb--focused + .v-slider-thumb__surface::before + transform: scale(2) + opacity: $slider-thumb-focus-opacity + + .v-slider-thumb--pressed + transition: none + + .v-slider-thumb__surface::before + opacity: $slider-thumb-pressed-opacity + + @media (hover: hover) + .v-slider-thumb:hover + .v-slider-thumb__surface::before + transform: scale(2) + + .v-slider-thumb:hover:not(.v-slider-thumb--focused) + .v-slider-thumb__surface::before + opacity: $slider-thumb-hover-opacity diff --git a/packages/vuetify/src/components/VSlider/VSliderThumb.tsx b/packages/vuetify/src/components/VSlider/VSliderThumb.tsx new file mode 100644 index 0000000..5f48d3c --- /dev/null +++ b/packages/vuetify/src/components/VSlider/VSliderThumb.tsx @@ -0,0 +1,206 @@ +// Styles +import './VSliderThumb.sass' + +// Components +import { VSliderSymbol } from './slider' +import { VScaleTransition } from '../transitions' + +// Composables +import { useTextColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { useElevation } from '@/composables/elevation' +import { useRtl } from '@/composables/locale' + +// Directives +import Ripple from '@/directives/ripple' + +// Utilities +import { computed, inject } from 'vue' +import { convertToUnit, genericComponent, keyValues, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { RippleDirectiveBinding } from '@/directives/ripple' + +export type VSliderThumbSlots = { + 'thumb-label': { modelValue: number } +} + +export const makeVSliderThumbProps = propsFactory({ + focused: Boolean, + max: { + type: Number, + required: true, + }, + min: { + type: Number, + required: true, + }, + modelValue: { + type: Number, + required: true, + }, + position: { + type: Number, + required: true, + }, + ripple: { + type: [Boolean, Object] as PropType, + default: true, + }, + name: String, + + ...makeComponentProps(), +}, 'VSliderThumb') + +export const VSliderThumb = genericComponent()({ + name: 'VSliderThumb', + + directives: { Ripple }, + + props: makeVSliderThumbProps(), + + emits: { + 'update:modelValue': (v: number) => true, + }, + + setup (props, { slots, emit }) { + const slider = inject(VSliderSymbol) + const { isRtl, rtlClasses } = useRtl() + if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider') + + const { + thumbColor, + step, + disabled, + thumbSize, + thumbLabel, + direction, + isReversed, + vertical, + readonly, + elevation, + mousePressed, + decimals, + indexFromEnd, + } = slider + + const elevationProps = computed(() => !disabled.value ? elevation.value : undefined) + const { elevationClasses } = useElevation(elevationProps) + const { textColorClasses, textColorStyles } = useTextColor(thumbColor) + + const { pageup, pagedown, end, home, left, right, down, up } = keyValues + const relevantKeys = [pageup, pagedown, end, home, left, right, down, up] + + const multipliers = computed(() => { + if (step.value) return [1, 2, 3] + else return [1, 5, 10] + }) + + function parseKeydown (e: KeyboardEvent, value: number) { + if (!relevantKeys.includes(e.key)) return + + e.preventDefault() + + const _step = step.value || 0.1 + const steps = (props.max - props.min) / _step + if ([left, right, down, up].includes(e.key)) { + const increase = vertical.value + ? [isRtl.value ? left : right, isReversed.value ? down : up] + : indexFromEnd.value !== isRtl.value ? [left, up] : [right, up] + const direction = increase.includes(e.key) ? 1 : -1 + const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0) + + value = value + (direction * _step * multipliers.value[multiplier]) + } else if (e.key === home) { + value = props.min + } else if (e.key === end) { + value = props.max + } else { + const direction = e.key === pagedown ? 1 : -1 + value = value - (direction * _step * (steps > 100 ? steps / 10 : 10)) + } + + return Math.max(props.min, Math.min(props.max, value)) + } + + function onKeydown (e: KeyboardEvent) { + const newValue = parseKeydown(e, props.modelValue) + + newValue != null && emit('update:modelValue', newValue) + } + + useRender(() => { + const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%') + + return ( +
    +
    +
    + +
    +
    +
    + { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) } +
    +
    +
    +     +
    + ) + }) + + return {} + }, +}) + +export type VSliderThumb = InstanceType diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.sass b/packages/vuetify/src/components/VSlider/VSliderTrack.sass new file mode 100644 index 0000000..167b4a4 --- /dev/null +++ b/packages/vuetify/src/components/VSlider/VSliderTrack.sass @@ -0,0 +1,169 @@ +@use 'sass:map' +@use 'sass:selector' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + // Theme + .v-slider-track__background + background-color: rgb(var(--v-theme-surface-variant)) + + @media (forced-colors: active) + background-color: highlight + + .v-slider-track__fill + background-color: rgb(var(--v-theme-surface-variant)) + + @media (forced-colors: active) + background-color: highlight + + .v-slider-track__tick + background-color: rgb(var(--v-theme-surface-variant)) + + &--filled + background-color: $slider-tick-background + + // Elements + .v-slider-track + border-radius: $slider-track-border-radius + + @media (forced-colors: active) + border: thin solid buttontext + + .v-slider-track + &__background, &__fill + position: absolute + transition: $slider-transition + border-radius: inherit + + .v-slider--pressed & + transition: none + + .v-input--error:not(.v-input--disabled) & + background-color: currentColor + + .v-slider-track__ticks + height: 100% + width: 100% + position: relative + + .v-slider-track__tick + position: absolute + opacity: 0 + transition: 0.2s opacity settings.$standard-easing + border-radius: $slider-tick-border-radius + width: var(--v-slider-tick-size) + height: var(--v-slider-tick-size) + transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2)) + + &--first .v-slider-track__tick-label + @include tools.ltr() + transform: none + + @include tools.rtl() + transform: translateX(100%) + + &--last .v-slider-track__tick-label + @include tools.ltr() + transform: translateX(-100%) + + @include tools.rtl() + transform: none + + .v-slider-track__tick-label + position: absolute + user-select: none + white-space: nowrap + + // Horizontal + .v-slider.v-input--horizontal + .v-slider-track + display: flex + align-items: center + width: 100% + height: $slider-track-active-size + touch-action: pan-y + + &__background + height: var(--v-slider-track-size) + + &__fill + height: inherit + + .v-slider-track__tick + margin-top: calc(#{$slider-track-active-size} / 2) + + @include tools.rtl() + transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2)) + + .v-slider-track__tick-label + margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top}) + + @include tools.ltr() + transform: translateX(-50%) + + @include tools.rtl() + transform: translateX(50%) + + &--first + margin-inline-start: calc(var(--v-slider-tick-size) + 1px) + + .v-slider-track__tick-label + @include tools.ltr() + transform: translateX(0%) + + @include tools.rtl() + transform: translateX(0%) + + &--last + margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px) + + .v-slider-track__tick-label + @include tools.ltr() + transform: translateX(-100%) + + @include tools.rtl() + transform: translateX(100%) + + // Vertical + .v-slider.v-input--vertical + .v-slider-track + height: 100% + display: flex + justify-content: center + width: $slider-track-active-size + touch-action: pan-x + + &__background + width: var(--v-slider-track-size) + + &__fill + width: inherit + + .v-slider-track__ticks + height: 100% + + .v-slider-track__tick + margin-inline-start: calc(#{$slider-track-active-size} / 2) + transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2)) + + @include tools.rtl() + transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2)) + + &--first + bottom: calc(0% + var(--v-slider-tick-size) + 1px) + &--last + bottom: calc(100% - var(--v-slider-tick-size) - 1px) + + .v-slider-track__tick-label + margin-inline-start: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-start}) + transform: translateY(-50%) + + // Modifiers + .v-slider-track__ticks--always-show, .v-slider--focused + .v-slider-track__tick + opacity: 1 + + .v-slider-track__background--opacity + opacity: 0.38 diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.tsx b/packages/vuetify/src/components/VSlider/VSliderTrack.tsx new file mode 100644 index 0000000..8a4ce58 --- /dev/null +++ b/packages/vuetify/src/components/VSlider/VSliderTrack.tsx @@ -0,0 +1,187 @@ +// Styles +import './VSliderTrack.sass' + +// Components +import { VSliderSymbol } from './slider' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { useRounded } from '@/composables/rounded' + +// Utilities +import { computed, inject } from 'vue' +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { Tick } from './slider' + +export type VSliderTrackSlots = { + 'tick-label': { tick: Tick, index: number } +} + +export const makeVSliderTrackProps = propsFactory({ + start: { + type: Number, + required: true, + }, + stop: { + type: Number, + required: true, + }, + + ...makeComponentProps(), +}, 'VSliderTrack') + +export const VSliderTrack = genericComponent()({ + name: 'VSliderTrack', + + props: makeVSliderTrackProps(), + + emits: {}, + + setup (props, { slots }) { + const slider = inject(VSliderSymbol) + + if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider') + + const { + color, + parsedTicks, + rounded, + showTicks, + tickSize, + trackColor, + trackFillColor, + trackSize, + vertical, + min, + max, + indexFromEnd, + } = slider + + const { roundedClasses } = useRounded(rounded) + + const { + backgroundColorClasses: trackFillColorClasses, + backgroundColorStyles: trackFillColorStyles, + } = useBackgroundColor(trackFillColor) + + const { + backgroundColorClasses: trackColorClasses, + backgroundColorStyles: trackColorStyles, + } = useBackgroundColor(trackColor) + + const startDir = computed(() => `inset-${vertical.value ? 'block' : 'inline'}-${indexFromEnd.value ? 'end' : 'start'}`) + const endDir = computed(() => vertical.value ? 'height' : 'width') + + const backgroundStyles = computed(() => { + return { + [startDir.value]: '0%', + [endDir.value]: '100%', + } + }) + + const trackFillWidth = computed(() => props.stop - props.start) + + const trackFillStyles = computed(() => { + return { + [startDir.value]: convertToUnit(props.start, '%'), + [endDir.value]: convertToUnit(trackFillWidth.value, '%'), + } + }) + + const computedTicks = computed(() => { + if (!showTicks.value) return [] + + const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value + + return ticks.map((tick, index) => { + const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined + + return ( +
    = props.start && tick.position <= props.stop, + 'v-slider-track__tick--first': tick.value === min.value, + 'v-slider-track__tick--last': tick.value === max.value, + }, + ]} + style={{ [startDir.value]: directionValue }} + > + { + (tick.label || slots['tick-label']) && ( +
    + { slots['tick-label']?.({ tick, index }) ?? tick.label } +
    + ) + } +
    + ) + }) + }) + + useRender(() => { + return ( +
    +
    +
    + + { showTicks.value && ( +
    + { computedTicks.value } +
    + )} +
    + ) + }) + + return {} + }, +}) + +export type VSliderTrack = InstanceType diff --git a/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.cy.tsx b/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.cy.tsx new file mode 100644 index 0000000..6dd1cfc --- /dev/null +++ b/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.cy.tsx @@ -0,0 +1,257 @@ +/// + +// Components +import { VSlider } from '..' +import { Application, CenteredGrid } from '@/../cypress/templates' +import { VApp } from '@/components/VApp' + +describe('VSlider', () => { + it('should react to clicking on track', () => { + cy.mount(() => ( + + + + + + )) + + cy.get('.v-slider').click(100, 15) + .emitted(VSlider, 'update:modelValue') + .should('have.length', 1) + }) + + it('should allow user to drag thumb', () => { + // eslint-disable-next-line sonarjs/no-identical-functions + cy.mount(() => ( + + + + + + )) + + cy.get('.v-slider-thumb') + .swipe([100, 15], [200, 15]) + .emitted(VSlider, 'update:modelValue') + .should('have.length.gt', 0) + }) + + it('should allow user to interact using keyboard', () => { + cy.mount(() => ( + + + + + + )) + + cy.realPress('Tab') + + .realPress('ArrowRight') + .realPress('ArrowLeft') + + .realPress(['Control', 'ArrowRight']) + .realPress(['Control', 'ArrowLeft']) + + .realPress(['Shift', 'ArrowRight']) + .realPress(['Shift', 'ArrowLeft']) + + .realPress('PageUp') + .realPress('PageDown') + + .realPress('End') + .realPress('Home') + + .emitted(VSlider, 'update:modelValue') + .should('deep.equal', [ + [1], + [0], + [2], + [0], + [3], + [0], + [10], + [0], + [20], + [0], + ]) + }) + + it('should show thumb-label when focused', () => { + cy.mount(() => ( + + + + + + )) + + cy.get('.v-slider-thumb').focus() + .get('.v-slider-thumb__label').should('be.visible') + }) + + it('should always show thumb-label', () => { + cy.mount(() => ( + + + + + + )) + + cy.get('.v-slider-thumb__label').should('be.visible') + }) + + it('should respect step prop', () => { + cy.mount(() => ( + + + + + + )) + + cy.realPress('Tab') + .realPress('ArrowRight') + .emitted(VSlider, 'update:modelValue') + .should('deep.equal', [ + [2], + ]) + }) + + it('should show custom ticks', () => { + cy.mount(() => ( + + + + + + + + )) + + cy.get('.v-slider').eq(0).find('.v-slider-track__tick-label').invoke('text').should('equal', '02810') + .get('.v-slider').eq(1).find('.v-slider-track__tick-label').invoke('text').should('equal', 'abc') + }) + + it('should render icons', () => { + cy.mount(() => ( + + + + + + )) + + cy.get('.mdi-home').should('have.length', 2) + }) + + it('should render icons with actions', () => { + const onClickPrepend = cy.spy().as('onClickPrepend') + const onClickAppend = cy.spy().as('onClickAppend') + + cy.mount(() => ( + + + + + + )) + + cy.get('.mdi-magnify-minus-outline').click() + cy.get('.mdi-magnify-plus-outline').click() + + cy.get('@onClickPrepend').should('have.been.calledOnce') + cy.get('@onClickAppend').should('have.been.calledOnce') + }) + + it('should render vertical slider', () => { + cy.mount(() => ( + + + + + + )) + }) + + it('should show messages', () => { + cy.mount(() => ( + + + + + + )) + + cy.get('.v-messages__message').should('be.visible') + }) + + it('should not react to user input if disabled', () => { + cy.mount(() => ( + + + + + + )) + }) + + it('should emit start and end events', () => { + // eslint-disable-next-line sonarjs/no-identical-functions + cy.mount(() => ( + + + + + + )) + + cy.get('.v-slider-thumb').swipe([100, 15], [200, 15]) + + cy.vue().then(wrapper => { + const slider = wrapper.getComponent(VSlider) + const start = slider.emitted('start') + expect(start).to.have.length(1) + const end = slider.emitted('end') + expect(end).to.have.length(1) + }) + }) + + // https://github.com/vuetifyjs/vuetify/issues/16634 + it('should respect the decimals from both step and min', () => { + cy.mount(() => ( + + + + + + )) + + cy.get('.v-slider-thumb') + .trigger('mouseover') + .trigger('mousedown', { which: 1 }) + .trigger('mousemove', 35, 0, { force: true }) // move to second step + .trigger('mousemove', 190, 0, { force: true }) // move to fifth step + .trigger('mousemove', 360, 0, { force: true }) // move to the final step + .trigger('mouseup') + + cy.emitted(VSlider, 'update:modelValue') + .should('deep.equal', [ + [2.0011], + [6.0051], + [10], + ]) + }) +}) diff --git a/packages/vuetify/src/components/VSlider/_variables.scss b/packages/vuetify/src/components/VSlider/_variables.scss new file mode 100644 index 0000000..1e35bdb --- /dev/null +++ b/packages/vuetify/src/components/VSlider/_variables.scss @@ -0,0 +1,35 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +$slider-horizontal-start: 8px !default; +$slider-horizontal-min-height: 32px !default; +$slider-horizontal-end: 8px !default; +$slider-label-margin-end: 12px !default; +$slider-label-margin-start: 12px !default; +$slider-state-track-background-opacity: 0.4 !default; +$slider-thumb-hover-opacity: var(--v-hover-opacity) !default; +$slider-thumb-focus-opacity: var(--v-focus-opacity) !default; +$slider-thumb-pressed-opacity: var(--v-pressed-opacity) !default; +$slider-thumb-border-radius: 50% !default; +$slider-thumb-focused-size-increase: 24px !default; +$slider-thumb-label-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default; +$slider-thumb-label-border-radius: 4px !default; +$slider-thumb-label-height: 25px !default; +$slider-thumb-label-min-width: 35px !default; +$slider-thumb-label-wedge-size: 6px !default; +$slider-thumb-label-offset: calc(var(--v-slider-thumb-size) / 2) !default; +$slider-thumb-label-transition: .2s settings.$accelerated-easing !default; +$slider-thumb-label-padding: 6px !default; +$slider-thumb-touch-size: 42px !default; +$slider-tick-background: rgb(var(--v-theme-surface-light)) !default; +$slider-tick-border-radius: 2px !default; +$slider-tick-label-margin-top: 8px !default; +$slider-tick-label-margin-start: 12px !default; +$slider-track-border-radius: 6px !default; +$slider-track-active-size-offset: 2px !default; +$slider-transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1) !default; +$slider-vertical-margin-bottom: 12px !default; +$slider-vertical-margin-top: 12px !default; +$slider-vertical-min-height: 300px !default; + +$slider-track-active-size: calc(var(--v-slider-track-size) + #{$slider-track-active-size-offset}) !default; diff --git a/packages/vuetify/src/components/VSlider/index.ts b/packages/vuetify/src/components/VSlider/index.ts new file mode 100644 index 0000000..cc44fe4 --- /dev/null +++ b/packages/vuetify/src/components/VSlider/index.ts @@ -0,0 +1 @@ +export { VSlider } from './VSlider' diff --git a/packages/vuetify/src/components/VSlider/slider.ts b/packages/vuetify/src/components/VSlider/slider.ts new file mode 100644 index 0000000..56418e7 --- /dev/null +++ b/packages/vuetify/src/components/VSlider/slider.ts @@ -0,0 +1,360 @@ +/* eslint-disable max-statements */ +// Composables +import { makeElevationProps } from '@/composables/elevation' +import { useRtl } from '@/composables/locale' +import { makeRoundedProps } from '@/composables/rounded' + +// Utilities +import { computed, provide, ref, shallowRef, toRef } from 'vue' +import { clamp, createRange, getDecimals, propsFactory } from '@/util' + +// Types +import type { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue' +import type { VSliderTrack } from './VSliderTrack' + +export type Tick = { + value: number + position: number + label?: string +} + +type SliderProvide = { + activeThumbRef: Ref + color: Ref + decimals: Ref + direction: Ref<'vertical' | 'horizontal'> + disabled: Ref + elevation: Ref + min: Ref + max: Ref + mousePressed: Ref + numTicks: Ref + onSliderMousedown: (e: MouseEvent) => void + onSliderTouchstart: (e: TouchEvent) => void + parseMouseMove: (e: MouseEvent | TouchEvent) => number + position: (val: number) => number + readonly: Ref + rounded: Ref + roundValue: (value: number) => number + thumbLabel: Ref + showTicks: Ref + startOffset: Ref + step: Ref + thumbSize: Ref + thumbColor: Ref + trackColor: Ref + trackFillColor: Ref + trackSize: Ref + ticks: Ref | undefined> + tickSize: Ref + trackContainerRef: Ref + vertical: Ref + parsedTicks: Ref + hasLabels: Ref + isReversed: Ref + indexFromEnd: Ref +} + +export const VSliderSymbol: InjectionKey = Symbol.for('vuetify:v-slider') + +export function getOffset (e: MouseEvent | TouchEvent, el: HTMLElement, direction: string) { + const vertical = direction === 'vertical' + const rect = el.getBoundingClientRect() + const touch = 'touches' in e ? e.touches[0] : e + return vertical + ? touch.clientY - (rect.top + rect.height / 2) + : touch.clientX - (rect.left + rect.width / 2) +} + +function getPosition (e: MouseEvent | TouchEvent, position: 'clientX' | 'clientY'): number { + if ('touches' in e && e.touches.length) return e.touches[0][position] + else if ('changedTouches' in e && e.changedTouches.length) return e.changedTouches[0][position] + else return (e as MouseEvent)[position] +} + +export const makeSliderProps = propsFactory({ + disabled: { + type: Boolean as PropType, + default: null, + }, + error: Boolean, + readonly: { + type: Boolean as PropType, + default: null, + }, + max: { + type: [Number, String], + default: 100, + }, + min: { + type: [Number, String], + default: 0, + }, + step: { + type: [Number, String], + default: 0, + }, + thumbColor: String, + thumbLabel: { + type: [Boolean, String] as PropType, + default: undefined, + validator: (v: any) => typeof v === 'boolean' || v === 'always', + }, + thumbSize: { + type: [Number, String], + default: 20, + }, + showTicks: { + type: [Boolean, String] as PropType, + default: false, + validator: (v: any) => typeof v === 'boolean' || v === 'always', + }, + ticks: { + type: [Array, Object] as PropType>, + }, + tickSize: { + type: [Number, String], + default: 2, + }, + color: String, + trackColor: String, + trackFillColor: String, + trackSize: { + type: [Number, String], + default: 4, + }, + direction: { + type: String as PropType<'horizontal' | 'vertical'>, + default: 'horizontal', + validator: (v: any) => ['vertical', 'horizontal'].includes(v), + }, + reverse: Boolean, + + ...makeRoundedProps(), + ...makeElevationProps({ + elevation: 2, + }), + ripple: { + type: Boolean, + default: true, + }, +}, 'Slider') + +type SliderProps = ExtractPropTypes> + +type SliderData = { + value: number +} + +export const useSteps = (props: SliderProps) => { + const min = computed(() => parseFloat(props.min)) + const max = computed(() => parseFloat(props.max)) + const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0) + const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value))) + + function roundValue (value: string | number) { + value = parseFloat(value) + + if (step.value <= 0) return value + + const clamped = clamp(value, min.value, max.value) + const offset = min.value % step.value + const newValue = Math.round((clamped - offset) / step.value) * step.value + offset + + return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value)) + } + + return { min, max, step, decimals, roundValue } +} + +export const useSlider = ({ + props, + steps, + onSliderStart, + onSliderMove, + onSliderEnd, + getActiveThumb, +}: { + props: SliderProps + steps: ReturnType + onSliderEnd: (data: SliderData) => void + onSliderStart: (data: SliderData) => void + onSliderMove: (data: SliderData) => void + getActiveThumb: (e: MouseEvent | TouchEvent) => HTMLElement +}) => { + const { isRtl } = useRtl() + const isReversed = toRef(props, 'reverse') + const vertical = computed(() => props.direction === 'vertical') + const indexFromEnd = computed(() => vertical.value !== isReversed.value) + + const { min, max, step, decimals, roundValue } = steps + + const thumbSize = computed(() => parseInt(props.thumbSize, 10)) + const tickSize = computed(() => parseInt(props.tickSize, 10)) + const trackSize = computed(() => parseInt(props.trackSize, 10)) + const numTicks = computed(() => (max.value - min.value) / step.value) + const disabled = toRef(props, 'disabled') + + const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color) + const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color) + const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color) + + const mousePressed = shallowRef(false) + + const startOffset = shallowRef(0) + const trackContainerRef = ref() + const activeThumbRef = ref() + + function parseMouseMove (e: MouseEvent | TouchEvent): number { + const vertical = props.direction === 'vertical' + const start = vertical ? 'top' : 'left' + const length = vertical ? 'height' : 'width' + const position = vertical ? 'clientY' : 'clientX' + + const { + [start]: trackStart, + [length]: trackLength, + } = trackContainerRef.value?.$el.getBoundingClientRect() + const clickOffset = getPosition(e, position) + + // It is possible for left to be NaN, force to number + let clickPos = Math.min(Math.max((clickOffset - trackStart - startOffset.value) / trackLength, 0), 1) || 0 + + if (vertical ? indexFromEnd.value : indexFromEnd.value !== isRtl.value) clickPos = 1 - clickPos + + return roundValue(min.value + clickPos * (max.value - min.value)) + } + + const handleStop = (e: MouseEvent | TouchEvent) => { + onSliderEnd({ value: parseMouseMove(e) }) + + mousePressed.value = false + startOffset.value = 0 + } + + const handleStart = (e: MouseEvent | TouchEvent) => { + activeThumbRef.value = getActiveThumb(e) + + if (!activeThumbRef.value) return + + activeThumbRef.value.focus() + mousePressed.value = true + + if (activeThumbRef.value.contains(e.target as Node)) { + startOffset.value = getOffset(e, activeThumbRef.value, props.direction) + } else { + startOffset.value = 0 + onSliderMove({ value: parseMouseMove(e) }) + } + + onSliderStart({ value: parseMouseMove(e) }) + } + + const moveListenerOptions = { passive: true, capture: true } + + function onMouseMove (e: MouseEvent | TouchEvent) { + onSliderMove({ value: parseMouseMove(e) }) + } + + function onSliderMouseUp (e: MouseEvent) { + e.stopPropagation() + e.preventDefault() + + handleStop(e) + + window.removeEventListener('mousemove', onMouseMove, moveListenerOptions) + window.removeEventListener('mouseup', onSliderMouseUp) + } + + function onSliderTouchend (e: TouchEvent) { + handleStop(e) + + window.removeEventListener('touchmove', onMouseMove, moveListenerOptions) + e.target?.removeEventListener('touchend', onSliderTouchend as EventListener) + } + + function onSliderTouchstart (e: TouchEvent) { + handleStart(e) + + window.addEventListener('touchmove', onMouseMove, moveListenerOptions) + e.target?.addEventListener('touchend', onSliderTouchend as EventListener, { passive: false }) + } + + function onSliderMousedown (e: MouseEvent) { + e.preventDefault() + + handleStart(e) + + window.addEventListener('mousemove', onMouseMove, moveListenerOptions) + window.addEventListener('mouseup', onSliderMouseUp, { passive: false }) + } + + const position = (val: number) => { + const percentage = (val - min.value) / (max.value - min.value) * 100 + return clamp(isNaN(percentage) ? 0 : percentage, 0, 100) + } + + const showTicks = toRef(props, 'showTicks') + const parsedTicks = computed(() => { + if (!showTicks.value) return [] + + if (!props.ticks) { + return numTicks.value !== Infinity ? createRange(numTicks.value + 1).map(t => { + const value = min.value + (t * step.value) + return { + value, + position: position(value), + } + }) : [] + } + if (Array.isArray(props.ticks)) return props.ticks.map(t => ({ value: t, position: position(t), label: t.toString() })) + return Object.keys(props.ticks).map(key => ({ + value: parseFloat(key), + position: position(parseFloat(key)), + label: (props.ticks as Record)[key], + })) + }) + + const hasLabels = computed(() => parsedTicks.value.some(({ label }) => !!label)) + + const data: SliderProvide = { + activeThumbRef, + color: toRef(props, 'color'), + decimals, + disabled, + direction: toRef(props, 'direction'), + elevation: toRef(props, 'elevation'), + hasLabels, + isReversed, + indexFromEnd, + min, + max, + mousePressed, + numTicks, + onSliderMousedown, + onSliderTouchstart, + parsedTicks, + parseMouseMove, + position, + readonly: toRef(props, 'readonly'), + rounded: toRef(props, 'rounded'), + roundValue, + showTicks, + startOffset, + step, + thumbSize, + thumbColor, + thumbLabel: toRef(props, 'thumbLabel'), + ticks: toRef(props, 'ticks'), + tickSize, + trackColor, + trackContainerRef, + trackFillColor, + trackSize, + vertical, + } + + provide(VSliderSymbol, data) + + return data +} diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass new file mode 100644 index 0000000..68903fa --- /dev/null +++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass @@ -0,0 +1,107 @@ +@use '../../styles/tools' +@use '../../styles/settings' +@use './variables' as * + +@include tools.layer('components') + .v-snackbar + justify-content: center + z-index: $snackbar-z-index + margin: $snackbar-wrapper-margin + margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset)) + padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left) + + &:not(.v-snackbar--center):not(.v-snackbar--top) + align-items: flex-end + + &__wrapper + align-items: center + display: flex + max-width: $snackbar-wrapper-max-width + min-height: $snackbar-wrapper-min-height + min-width: $snackbar-wrapper-min-width + overflow: hidden + padding: $snackbar-wrapper-padding + + @include tools.rounded($snackbar-border-radius) + + @at-root .v-snackbar + @include tools.variant($snackbar-variants...) + + &__content + flex-grow: 1 + font-size: $snackbar-font-size + font-weight: $snackbar-font-weight + letter-spacing: $snackbar-letter-spacing + line-height: $snackbar-line-height + margin-right: auto + padding: $snackbar-content-padding + text-align: initial + + &__actions + align-items: center + align-self: center + display: flex + margin-inline-end: $snackbar-action-margin + + & > .v-btn + padding: $snackbar-btn-padding + min-width: auto + + &__timer + width: 100% + position: absolute + top: 0 + + .v-progress-linear + transition: .2s linear + + &--absolute + position: absolute + z-index: $snackbar-absolute-z-index + + &--multi-line &__wrapper + min-height: $snackbar-multi-line-wrapper-min-height + + &--vertical &__wrapper + flex-direction: column + + .v-snackbar__actions + align-self: flex-end + margin-bottom: $snackbar-vertical-action-margin-bottom + + &--center + align-items: center + justify-content: center + + &--top + align-items: flex-start + + &--bottom + align-items: flex-end + + &--left, + &--start + justify-content: flex-start + + &--right, + &--end + justify-content: flex-end + + .v-snackbar-transition + &-enter-active, + &-leave-active + transition-duration: .15s + transition-timing-function: settings.$decelerated-easing + + &-enter-active + transition-property: opacity, transform + + &-enter-from + opacity: 0 + transform: scale($snackbar-transition-scale) + + &-leave-active + transition-property: opacity + + &-leave-to + opacity: 0 diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx new file mode 100644 index 0000000..600414a --- /dev/null +++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx @@ -0,0 +1,281 @@ +// Styles +import './VSnackbar.sass' + +// Components +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { VOverlay } from '@/components/VOverlay' +import { makeVOverlayProps } from '@/components/VOverlay/VOverlay' +import { VProgressLinear } from '@/components/VProgressLinear' + +// Composables +import { useLayout } from '@/composables' +import { forwardRefs } from '@/composables/forwardRefs' +import { VuetifyLayoutKey } from '@/composables/layout' +import { makeLocationProps } from '@/composables/location' +import { makePositionProps, usePosition } from '@/composables/position' +import { useProxiedModel } from '@/composables/proxiedModel' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { useScopeId } from '@/composables/scopeId' +import { makeThemeProps, provideTheme } from '@/composables/theme' +import { useToggleScope } from '@/composables/toggleScope' +import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' + +// Utilities +import { computed, inject, mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch, watchEffect } from 'vue' +import { genericComponent, omit, propsFactory, refElement, useRender } from '@/util' + +// Types +import type { Ref } from 'vue' + +type VSnackbarSlots = { + activator: { isActive: boolean, props: Record } + default: never + actions: { isActive: Ref } + text: never +} + +function useCountdown (milliseconds: number) { + const time = shallowRef(milliseconds) + let timer = -1 + + function clear () { + clearInterval(timer) + } + + function reset () { + clear() + + nextTick(() => time.value = milliseconds) + } + + function start (el?: HTMLElement) { + const style = el ? getComputedStyle(el) : { transitionDuration: 0.2 } + const interval = parseFloat(style.transitionDuration) * 1000 || 200 + + clear() + + if (time.value <= 0) return + + const startTime = performance.now() + timer = window.setInterval(() => { + const elapsed = performance.now() - startTime + interval + time.value = Math.max(milliseconds - elapsed, 0) + + if (time.value <= 0) clear() + }, interval) + } + + onScopeDispose(clear) + + return { clear, time, start, reset } +} + +export const makeVSnackbarProps = propsFactory({ + multiLine: Boolean, + text: String, + timer: [Boolean, String], + timeout: { + type: [Number, String], + default: 5000, + }, + vertical: Boolean, + + ...makeLocationProps({ location: 'bottom' } as const), + ...makePositionProps(), + ...makeRoundedProps(), + ...makeVariantProps(), + ...makeThemeProps(), + ...omit(makeVOverlayProps({ + transition: 'v-snackbar-transition', + }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy']), +}, 'VSnackbar') + +export const VSnackbar = genericComponent()({ + name: 'VSnackbar', + + props: makeVSnackbarProps(), + + emits: { + 'update:modelValue': (v: boolean) => true, + }, + + setup (props, { slots }) { + const isActive = useProxiedModel(props, 'modelValue') + const { positionClasses } = usePosition(props) + const { scopeId } = useScopeId() + const { themeClasses } = provideTheme(props) + const { colorClasses, colorStyles, variantClasses } = useVariant(props) + const { roundedClasses } = useRounded(props) + const countdown = useCountdown(Number(props.timeout)) + + const overlay = ref() + const timerRef = ref() + const isHovering = shallowRef(false) + const startY = shallowRef(0) + const mainStyles = ref() + const hasLayout = inject(VuetifyLayoutKey, undefined) + + useToggleScope(() => !!hasLayout, () => { + const layout = useLayout() + + watchEffect(() => { + mainStyles.value = layout.mainStyles.value + }) + }) + + watch(isActive, startTimeout) + watch(() => props.timeout, startTimeout) + + onMounted(() => { + if (isActive.value) startTimeout() + }) + + let activeTimeout = -1 + function startTimeout () { + countdown.reset() + window.clearTimeout(activeTimeout) + const timeout = Number(props.timeout) + + if (!isActive.value || timeout === -1) return + + const element = refElement(timerRef.value) + + countdown.start(element) + + activeTimeout = window.setTimeout(() => { + isActive.value = false + }, timeout) + } + + function clearTimeout () { + countdown.reset() + window.clearTimeout(activeTimeout) + } + + function onPointerenter () { + isHovering.value = true + clearTimeout() + } + + function onPointerleave () { + isHovering.value = false + startTimeout() + } + + function onTouchstart (event: TouchEvent) { + startY.value = event.touches[0].clientY + } + + function onTouchend (event: TouchEvent) { + if (Math.abs(startY.value - event.changedTouches[0].clientY) > 50) { + isActive.value = false + } + } + + const locationClasses = computed(() => { + return props.location.split(' ').reduce((acc, loc) => { + acc[`v-snackbar--${loc}`] = true + + return acc + }, {} as Record) + }) + + useRender(() => { + const overlayProps = VOverlay.filterProps(props) + const hasContent = !!(slots.default || slots.text || props.text) + + return ( + + { genOverlays(false, 'v-snackbar') } + + { props.timer && !isHovering.value && ( +
    + +
    + )} + + { hasContent && ( +
    + { slots.text?.() ?? props.text } + + { slots.default?.() } +
    + )} + + { slots.actions && ( + +
    + { slots.actions({ isActive }) } +
    +     + )} +     + ) + }) + + return forwardRefs({}, overlay) + }, +}) + +export type VSnackbar = InstanceType diff --git a/packages/vuetify/src/components/VSnackbar/_variables.scss b/packages/vuetify/src/components/VSnackbar/_variables.scss new file mode 100644 index 0000000..8ff3608 --- /dev/null +++ b/packages/vuetify/src/components/VSnackbar/_variables.scss @@ -0,0 +1,35 @@ +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VSnackbar +$snackbar-absolute-z-index: 1 !default; +$snackbar-action-margin: 8px !default; +$snackbar-border-radius: settings.$border-radius-root !default; +$snackbar-plain-opacity: .62 !default; +$snackbar-btn-padding: 0 8px !default; +$snackbar-background: rgb(var(--v-theme-surface-variant)) !default; +$snackbar-color: rgb(var(--v-theme-on-surface-variant)) !default; +$snackbar-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default; +$snackbar-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default; +$snackbar-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default; +$snackbar-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default; +$snackbar-content-padding: 14px 16px !default; +$snackbar-elevation: 6 !default; +$snackbar-multi-line-wrapper-min-height: 68px !default; +$snackbar-transition-scale: .8 !default; +$snackbar-vertical-action-margin-bottom: 8px !default; +$snackbar-wrapper-margin: 8px !default; +$snackbar-wrapper-max-width: 672px !default; +$snackbar-wrapper-min-height: 48px !default; +$snackbar-wrapper-min-width: 344px !default; +$snackbar-wrapper-padding: 0 !default; +$snackbar-z-index: 10000 !default; + +// List +$snackbar-variants: ( + $snackbar-background, + $snackbar-color, + $snackbar-elevation, + $snackbar-plain-opacity, + 'v-snackbar' +) !default; diff --git a/packages/vuetify/src/components/VSnackbar/index.ts b/packages/vuetify/src/components/VSnackbar/index.ts new file mode 100644 index 0000000..3069d5b --- /dev/null +++ b/packages/vuetify/src/components/VSnackbar/index.ts @@ -0,0 +1 @@ +export { VSnackbar } from './VSnackbar' diff --git a/packages/vuetify/src/components/VSparkline/VBarline.tsx b/packages/vuetify/src/components/VSparkline/VBarline.tsx new file mode 100644 index 0000000..7d765de --- /dev/null +++ b/packages/vuetify/src/components/VSparkline/VBarline.tsx @@ -0,0 +1,224 @@ +// Utilities +import { computed } from 'vue' +import { makeLineProps } from './util/line' +import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util' + +// Types +export type VBarlineSlots = { + default: void + label: { index: number, value: string } +} + +export type SparklineItem = number | { value: number } + +export type SparklineText = { + x: number + value: string +} + +export interface Boundary { + minX: number + minY: number + maxX: number + maxY: number +} + +export interface Bar { + x: number + y: number + height: number + value: number +} + +export const makeVBarlineProps = propsFactory({ + autoLineWidth: Boolean, + + ...makeLineProps(), +}, 'VBarline') + +export const VBarline = genericComponent()({ + name: 'VBarline', + + props: makeVBarlineProps(), + + setup (props, { slots }) { + const uid = getUid() + const id = computed(() => props.id || `barline-${uid}`) + const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500) + + const hasLabels = computed(() => { + return Boolean( + props.showLabels || + props.labels.length > 0 || + !!slots?.label + ) + }) + + const lineWidth = computed(() => parseFloat(props.lineWidth) || 4) + + const totalWidth = computed(() => Math.max(props.modelValue.length * lineWidth.value, Number(props.width))) + + const boundary = computed(() => { + return { + minX: 0, + maxX: totalWidth.value, + minY: 0, + maxY: parseInt(props.height, 10), + } + }) + const items = computed(() => props.modelValue.map(item => getPropertyFromItem(item, props.itemValue, item))) + + function genBars ( + values: number[], + boundary: Boundary + ): Bar[] { + const { minX, maxX, minY, maxY } = boundary + const totalValues = values.length + let maxValue = props.max != null ? Number(props.max) : Math.max(...values) + let minValue = props.min != null ? Number(props.min) : Math.min(...values) + + if (minValue > 0 && props.min == null) minValue = 0 + if (maxValue < 0 && props.max == null) maxValue = 0 + + const gridX = maxX / totalValues + const gridY = (maxY - minY) / ((maxValue - minValue) || 1) + const horizonY = maxY - Math.abs(minValue * gridY) + + return values.map((value, index) => { + const height = Math.abs(gridY * value) + + return { + x: minX + index * gridX, + y: horizonY - height + + +(value < 0) * height, + height, + value, + } + }) + } + + const parsedLabels = computed(() => { + const labels = [] + const points = genBars(items.value, boundary.value) + const len = points.length + + for (let i = 0; labels.length < len; i++) { + const item = points[i] + let value = props.labels[i] + + if (!value) { + value = typeof item === 'object' + ? item.value + : item + } + + labels.push({ + x: item.x, + value: String(value), + }) + } + + return labels + }) + + const bars = computed(() => genBars(items.value, boundary.value)) + const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2) + + useRender(() => { + const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse() + return ( + + + + { + gradientData.map((color, index) => ( + + )) + } + + + + + { + bars.value.map(item => ( + + { props.autoDraw && ( + <> + + + + )} + + )) + } + + + { hasLabels.value && ( + + { + parsedLabels.value.map((item, i) => ( + + { slots.label?.({ index: i, value: item.value }) ?? item.value } + + )) + } + + )} + + + + + + ) + }) + }, +}) + +export type VBarline = InstanceType diff --git a/packages/vuetify/src/components/VSparkline/VSparkline.tsx b/packages/vuetify/src/components/VSparkline/VSparkline.tsx new file mode 100644 index 0000000..73e2ffb --- /dev/null +++ b/packages/vuetify/src/components/VSparkline/VSparkline.tsx @@ -0,0 +1,72 @@ +// Components +import { makeVBarlineProps, VBarline } from './VBarline' +import { makeVTrendlineProps, VTrendline } from './VTrendline' + +// Composables +import { useTextColor } from '@/composables/color' + +// Utilities +import { computed, toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +// Types + +export const makeVSparklineProps = propsFactory({ + type: { + type: String as PropType<'trend' | 'bar'>, + default: 'trend', + }, + + ...makeVBarlineProps(), + ...makeVTrendlineProps(), +}, 'VSparkline') + +export type VSparklineSlots = { + default: void + label: { index: number, value: string } +} + +export const VSparkline = genericComponent()({ + name: 'VSparkline', + + props: makeVSparklineProps(), + + setup (props, { slots }) { + const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')) + const hasLabels = computed(() => { + return Boolean( + props.showLabels || + props.labels.length > 0 || + !!slots?.label + ) + }) + const totalHeight = computed(() => { + let height = parseInt(props.height, 10) + + if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5 + + return height + }) + + useRender(() => { + const Tag = props.type === 'trend' ? VTrendline : VBarline + const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props) + + return ( + + ) + }) + }, +}) + +export type VSparkline = InstanceType diff --git a/packages/vuetify/src/components/VSparkline/VTrendline.tsx b/packages/vuetify/src/components/VSparkline/VTrendline.tsx new file mode 100644 index 0000000..4cee702 --- /dev/null +++ b/packages/vuetify/src/components/VSparkline/VTrendline.tsx @@ -0,0 +1,228 @@ +// Utilities +import { computed, nextTick, ref, watch } from 'vue' +import { makeLineProps } from './util/line' +import { genPath as _genPath } from './util/path' +import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util' + +// Types +export type VTrendlineSlots = { + default: void + label: { index: number, value: string } +} + +export type SparklineItem = number | { value: number } + +export type SparklineText = { + x: number + value: string +} + +export interface Boundary { + minX: number + minY: number + maxX: number + maxY: number +} + +export interface Point { + x: number + y: number + value: number +} + +export const makeVTrendlineProps = propsFactory({ + fill: Boolean, + + ...makeLineProps(), +}, 'VTrendline') + +export const VTrendline = genericComponent()({ + name: 'VTrendline', + + props: makeVTrendlineProps(), + + setup (props, { slots }) { + const uid = getUid() + const id = computed(() => props.id || `trendline-${uid}`) + const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000)) + + const lastLength = ref(0) + const path = ref(null) + + function genPoints ( + values: number[], + boundary: Boundary + ): Point[] { + const { minX, maxX, minY, maxY } = boundary + const totalValues = values.length + const maxValue = props.max != null ? Number(props.max) : Math.max(...values) + const minValue = props.min != null ? Number(props.min) : Math.min(...values) + + const gridX = (maxX - minX) / (totalValues - 1) + const gridY = (maxY - minY) / ((maxValue - minValue) || 1) + + return values.map((value, index) => { + return { + x: minX + index * gridX, + y: maxY - (value - minValue) * gridY, + value, + } + }) + } + const hasLabels = computed(() => { + return Boolean( + props.showLabels || + props.labels.length > 0 || + !!slots?.label + ) + }) + const lineWidth = computed(() => { + return parseFloat(props.lineWidth) || 4 + }) + const totalWidth = computed(() => Number(props.width)) + + const boundary = computed(() => { + const padding = Number(props.padding) + + return { + minX: padding, + maxX: totalWidth.value - padding, + minY: padding, + maxY: parseInt(props.height, 10) - padding, + } + }) + const items = computed(() => props.modelValue.map(item => getPropertyFromItem(item, props.itemValue, item))) + const parsedLabels = computed(() => { + const labels = [] + const points = genPoints(items.value, boundary.value) + const len = points.length + + for (let i = 0; labels.length < len; i++) { + const item = points[i] + let value = props.labels[i] + + if (!value) { + value = typeof item === 'object' + ? item.value + : item + } + + labels.push({ + x: item.x, + value: String(value), + }) + } + + return labels + }) + + watch(() => props.modelValue, async () => { + await nextTick() + + if (!props.autoDraw || !path.value) return + + const pathRef = path.value + const length = pathRef.getTotalLength() + + if (!props.fill) { + // Initial setup to "hide" the line by using the stroke dash array + pathRef.style.strokeDasharray = `${length}` + pathRef.style.strokeDashoffset = `${length}` + + // Force reflow to ensure the transition starts from this state + pathRef.getBoundingClientRect() + + // Animate the stroke dash offset to "draw" the line + pathRef.style.transition = `stroke-dashoffset ${autoDrawDuration.value}ms ${props.autoDrawEasing}` + pathRef.style.strokeDashoffset = '0' + } else { + // Your existing logic for filled paths remains the same + pathRef.style.transformOrigin = 'bottom center' + pathRef.style.transition = 'none' + pathRef.style.transform = `scaleY(0)` + pathRef.getBoundingClientRect() + pathRef.style.transition = `transform ${autoDrawDuration.value}ms ${props.autoDrawEasing}` + pathRef.style.transform = `scaleY(1)` + } + + lastLength.value = length + }, { immediate: true }) + + function genPath (fill: boolean) { + return _genPath( + genPoints(items.value, boundary.value), + props.smooth ? 8 : Number(props.smooth), + fill, + parseInt(props.height, 10) + ) + } + + useRender(() => { + const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse() + + return ( + + + + { + gradientData.map((color, index) => ( + + )) + } + + + + { hasLabels.value && ( + + { + parsedLabels.value.map((item, i) => ( + + { slots.label?.({ index: i, value: item.value }) ?? item.value } + + )) + } + + )} + + + + { props.fill && ( + + )} + + ) + }) + }, +}) + +export type VTrendline = InstanceType diff --git a/packages/vuetify/src/components/VSparkline/index.ts b/packages/vuetify/src/components/VSparkline/index.ts new file mode 100644 index 0000000..7793792 --- /dev/null +++ b/packages/vuetify/src/components/VSparkline/index.ts @@ -0,0 +1 @@ +export { VSparkline } from './VSparkline' diff --git a/packages/vuetify/src/components/VSparkline/util/line.ts b/packages/vuetify/src/components/VSparkline/util/line.ts new file mode 100644 index 0000000..04c6e26 --- /dev/null +++ b/packages/vuetify/src/components/VSparkline/util/line.ts @@ -0,0 +1,63 @@ +// Utilities +import { propsFactory } from '@/util' + +// Types +import type { PropType } from 'vue' + +export type SparklineItem = number | { value: number } + +export const makeLineProps = propsFactory({ + autoDraw: Boolean, + autoDrawDuration: [Number, String], + autoDrawEasing: { + type: String, + default: 'ease', + }, + color: String, + gradient: { + type: Array as PropType, + default: () => ([]), + }, + gradientDirection: { + type: String as PropType<'top' | 'bottom' | 'left' | 'right'>, + validator: (val: string) => ['top', 'bottom', 'left', 'right'].includes(val), + default: 'top', + }, + height: { + type: [String, Number], + default: 75, + }, + labels: { + type: Array as PropType, + default: () => ([]), + }, + labelSize: { + type: [Number, String], + default: 7, + }, + lineWidth: { + type: [String, Number], + default: 4, + }, + id: String, + itemValue: { + type: String, + default: 'value', + }, + modelValue: { + type: Array as PropType, + default: () => ([]), + }, + min: [String, Number], + max: [String, Number], + padding: { + type: [String, Number], + default: 8, + }, + showLabels: Boolean, + smooth: Boolean, + width: { + type: [Number, String], + default: 300, + }, +}, 'Line') diff --git a/packages/vuetify/src/components/VSparkline/util/path.ts b/packages/vuetify/src/components/VSparkline/util/path.ts new file mode 100644 index 0000000..369c0d5 --- /dev/null +++ b/packages/vuetify/src/components/VSparkline/util/path.ts @@ -0,0 +1,72 @@ +// @ts-nocheck +/* eslint-disable */ + +import { Point } from '../VSparkline' +// import { checkCollinear, getDistance, moveTo } from './math' + +/** + * From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18 + */ +export function genPath (points: Point[], radius: number, fill = false, height = 75) { + if (points.length === 0) return '' + const start = points.shift()! + const end = points[points.length - 1] + + return ( + (fill ? `M${start.x} ${height - start.x + 2} L${start.x} ${start.y}` : `M${start.x} ${start.y}`) + + points + .map((point, index) => { + const next = points[index + 1] + const prev = points[index - 1] || start + const isCollinear = next && checkCollinear(next, point, prev) + + if (!next || isCollinear) { + return `L${point.x} ${point.y}` + } + + const threshold = Math.min( + getDistance(prev, point), + getDistance(next, point) + ) + const isTooCloseForRadius = threshold / 2 < radius + const radiusForPoint = isTooCloseForRadius ? threshold / 2 : radius + + const before = moveTo(prev, point, radiusForPoint) + const after = moveTo(next, point, radiusForPoint) + + return `L${before.x} ${before.y}S${point.x} ${point.y} ${after.x} ${after.y}` + }) + .join('') + + (fill ? `L${end.x} ${height - start.x + 2} Z` : '') + ) +} + +function int (value: string | number): number { + return parseInt(value, 10) +} + +/** + * https://en.wikipedia.org/wiki/Collinearity + * x=(x1+x2)/2 + * y=(y1+y2)/2 + */ +export function checkCollinear (p0: Point, p1: Point, p2: Point): boolean { + return int(p0.x + p2.x) === int(2 * p1.x) && int(p0.y + p2.y) === int(2 * p1.y) +} + +export function getDistance (p1: Point, p2: Point): number { + return Math.sqrt( + Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + ) +} + +export function moveTo (to: Point, from: Point, radius: number) { + const vector = { x: to.x - from.x, y: to.y - from.y } + const length = Math.sqrt((vector.x * vector.x) + (vector.y * vector.y)) + const unitVector = { x: vector.x / length, y: vector.y / length } + + return { + x: from.x + unitVector.x * radius, + y: from.y + unitVector.y * radius, + } +} diff --git a/packages/vuetify/src/components/VSpeedDial/VSpeedDial.sass b/packages/vuetify/src/components/VSpeedDial/VSpeedDial.sass new file mode 100644 index 0000000..e2d8a38 --- /dev/null +++ b/packages/vuetify/src/components/VSpeedDial/VSpeedDial.sass @@ -0,0 +1,27 @@ +@use '../../styles/tools' + +@include tools.layer('components') + .v-speed-dial__content + gap: 8px + + &.v-overlay__content + &.v-speed-dial__content--end, + &.v-speed-dial__content--end-center, + &.v-speed-dial__content--right, + &.v-speed-dial__content--right-center + flex-direction: row + + &.v-speed-dial__content--left, + &.v-speed-dial__content--left-center, + &.v-speed-dial__content--start, + &.v-speed-dial__content--start-center + flex-direction: row-reverse + + &.v-speed-dial__content--top, + &.v-speed-dial__content--top-center + flex-direction: column-reverse + + > * + @for $i from 1 through 10 + &:nth-child(#{$i}) + transition-delay: 0.05s * ($i - 1) diff --git a/packages/vuetify/src/components/VSpeedDial/VSpeedDial.tsx b/packages/vuetify/src/components/VSpeedDial/VSpeedDial.tsx new file mode 100644 index 0000000..4cf7895 --- /dev/null +++ b/packages/vuetify/src/components/VSpeedDial/VSpeedDial.tsx @@ -0,0 +1,103 @@ +// Styles +import './VSpeedDial.sass' + +// Components +import { VDefaultsProvider } from '@/components/VDefaultsProvider' +import { makeVMenuProps, VMenu } from '@/components/VMenu/VMenu' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { useProxiedModel } from '@/composables/proxiedModel' +import { MaybeTransition } from '@/composables/transition' + +// Utilities +import { computed, ref } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { ComputedRef } from 'vue' +import type { OverlaySlots } from '@/components/VOverlay/VOverlay' +import type { Anchor } from '@/util' + +export const makeVSpeedDialProps = propsFactory({ + ...makeComponentProps(), + ...makeVMenuProps({ + offset: 8, + minWidth: 0, + openDelay: 0, + closeDelay: 100, + location: 'top center' as const, + transition: 'scale-transition', + }), +}, 'VSpeedDial') + +export const VSpeedDial = genericComponent()({ + name: 'VSpeedDial', + + props: makeVSpeedDialProps(), + + emits: { + 'update:modelValue': (value: boolean) => true, + }, + + setup (props, { slots }) { + const model = useProxiedModel(props, 'modelValue') + + const menuRef = ref() + + const location = computed(() => { + const [y, x = 'center'] = props.location.split(' ') + + return `${y} ${x}` + }) as ComputedRef + + const locationClasses = computed(() => ({ + [`v-speed-dial__content--${location.value.replace(' ', '-')}`]: true, + })) + + useRender(() => { + const menuProps = VMenu.filterProps(props) + + return ( + + {{ + ...slots, + default: slotProps => ( + + + { slots.default?.(slotProps) } + + + ), + }} + + ) + }) + + return {} + }, +}) + +export type VSpeedDial = InstanceType diff --git a/packages/vuetify/src/components/VSpeedDial/index.ts b/packages/vuetify/src/components/VSpeedDial/index.ts new file mode 100644 index 0000000..0856726 --- /dev/null +++ b/packages/vuetify/src/components/VSpeedDial/index.ts @@ -0,0 +1 @@ +export { VSpeedDial } from './VSpeedDial' diff --git a/packages/vuetify/src/components/VStepper/VStepper.sass b/packages/vuetify/src/components/VStepper/VStepper.sass new file mode 100644 index 0000000..fb72c89 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepper.sass @@ -0,0 +1,54 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-stepper.v-sheet + @include tools.elevation($stepper-elevation) + @include tools.rounded($stepper-border-radius) + + overflow: hidden + + &.v-stepper--flat + @include tools.elevation(0) + + .v-stepper-header + @include tools.elevation($stepper-header-elevation) + + align-items: center + display: flex + position: relative + overflow-x: auto + justify-content: space-between + z-index: 1 + + .v-divider + margin: $stepper-header-divider-margin + + &:last-child + margin-inline-end: 0 + + &:first-child + margin-inline-start: 0 + + .v-stepper--alt-labels & + height: auto + + .v-divider + align-self: flex-start + margin: $stepper-alt-labels-header-divider + + .v-stepper-window + margin: $stepper-window-margin + + .v-stepper-actions + display: flex + align-items: center + justify-content: space-between + padding: $stepper-actions-padding + + .v-stepper & + padding: $stepper-actions-stepper-padding + + .v-stepper-window-item & + padding: $stepper-actions-stepper-window-item-padding diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx new file mode 100644 index 0000000..bdd6718 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepper.tsx @@ -0,0 +1,216 @@ +// Styles +import './VStepper.sass' + +// Components +import { VStepperSymbol } from './shared' +import { makeVStepperActionsProps, VStepperActions } from './VStepperActions' +import { VStepperHeader } from './VStepperHeader' +import { VStepperItem } from './VStepperItem' +import { VStepperWindow } from './VStepperWindow' +import { VStepperWindowItem } from './VStepperWindowItem' +import { VDivider } from '@/components/VDivider' +import { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet' + +// Composables +import { provideDefaults } from '@/composables/defaults' +import { makeDisplayProps, useDisplay } from '@/composables/display' +import { makeGroupProps, useGroup } from '@/composables/group' + +// Utilities +import { computed, toRefs } from 'vue' +import { genericComponent, getPropertyFromItem, only, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { StepperItem, StepperItemSlot } from './VStepperItem' + +export type VStepperSlot = { + prev: () => void + next: () => void +} + +export type VStepperSlots = { + actions: VStepperSlot + default: VStepperSlot + header: StepperItem + 'header-item': StepperItemSlot + icon: StepperItemSlot + title: StepperItemSlot + subtitle: StepperItemSlot + item: StepperItem + prev: never + next: never +} & { + [key: `header-item.${string}`]: StepperItemSlot + [key: `item.${string}`]: StepperItem +} + +export const makeStepperProps = propsFactory({ + altLabels: Boolean, + bgColor: String, + completeIcon: String, + editIcon: String, + editable: Boolean, + errorIcon: String, + hideActions: Boolean, + items: { + type: Array as PropType, + default: () => ([]), + }, + itemTitle: { + type: String, + default: 'title', + }, + itemValue: { + type: String, + default: 'value', + }, + nonLinear: Boolean, + flat: Boolean, + + ...makeDisplayProps(), +}, 'Stepper') + +export const makeVStepperProps = propsFactory({ + ...makeStepperProps(), + ...makeGroupProps({ + mandatory: 'force' as const, + selectedClass: 'v-stepper-item--selected', + }), + ...makeVSheetProps(), + ...only(makeVStepperActionsProps(), ['prevText', 'nextText']), +}, 'VStepper') + +export const VStepper = genericComponent()({ + name: 'VStepper', + + props: makeVStepperProps(), + + emits: { + 'update:modelValue': (v: unknown) => true, + }, + + setup (props, { slots }) { + const { items: _items, next, prev, selected } = useGroup(props, VStepperSymbol) + const { displayClasses, mobile } = useDisplay(props) + const { completeIcon, editIcon, errorIcon, color, editable, prevText, nextText } = toRefs(props) + + const items = computed(() => props.items.map((item, index) => { + const title = getPropertyFromItem(item, props.itemTitle, item) + const value = getPropertyFromItem(item, props.itemValue, index + 1) + + return { + title, + value, + raw: item, + } + })) + const activeIndex = computed(() => { + return _items.value.findIndex(item => selected.value.includes(item.id)) + }) + const disabled = computed(() => { + if (props.disabled) return props.disabled + if (activeIndex.value === 0) return 'prev' + if (activeIndex.value === _items.value.length - 1) return 'next' + + return false + }) + + provideDefaults({ + VStepperItem: { + editable, + errorIcon, + completeIcon, + editIcon, + prevText, + nextText, + }, + VStepperActions: { + color, + disabled, + prevText, + nextText, + }, + }) + + useRender(() => { + const sheetProps = VSheet.filterProps(props) + + const hasHeader = !!(slots.header || props.items.length) + const hasWindow = props.items.length > 0 + const hasActions = !props.hideActions && !!(hasWindow || slots.actions) + + return ( + + { hasHeader && ( + + { items.value.map(({ raw, ...item }, index) => ( + <> + { !!index && () } + + + + ))} + + )} + + { hasWindow && ( + + { items.value.map(item => ( + slots[`item.${item.value}`]?.(item) ?? slots.item?.(item), + }} + /> + ))} + + )} + + { slots.default?.({ prev, next }) } + + { hasActions && ( + slots.actions?.({ next, prev }) ?? ( + + ) + )} + + ) + }) + + return { + prev, + next, + } + }, +}) + +export type VStepper = InstanceType diff --git a/packages/vuetify/src/components/VStepper/VStepperActions.tsx b/packages/vuetify/src/components/VStepper/VStepperActions.tsx new file mode 100644 index 0000000..4240e45 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepperActions.tsx @@ -0,0 +1,105 @@ +// Components +import { VBtn } from '@/components/VBtn/VBtn' +import { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider' + +// Composables +import { useLocale } from '@/composables/locale' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' + +export type VStepperActionsSlots = { + prev: { + props: { onClick: () => void } + } + next: { + props: { onClick: () => void } + } +} + +export const makeVStepperActionsProps = propsFactory({ + color: String, + disabled: { + type: [Boolean, String] as PropType, + default: false, + }, + prevText: { + type: String, + default: '$vuetify.stepper.prev', + }, + nextText: { + type: String, + default: '$vuetify.stepper.next', + }, +}, 'VStepperActions') + +export const VStepperActions = genericComponent()({ + name: 'VStepperActions', + + props: makeVStepperActionsProps(), + + emits: { + 'click:prev': () => true, + 'click:next': () => true, + }, + + setup (props, { emit, slots }) { + const { t } = useLocale() + function onClickPrev () { + emit('click:prev') + } + + function onClickNext () { + emit('click:next') + } + + useRender(() => { + const prevSlotProps = { + onClick: onClickPrev, + } + const nextSlotProps = { + onClick: onClickNext, + } + + return ( +
    + + { slots.prev?.({ props: prevSlotProps }) ?? ( + + )} + + + + { slots.next?.({ props: nextSlotProps }) ?? ( + + )} + +
    + ) + }) + + return {} + }, +}) + +export type VStepperActions = InstanceType diff --git a/packages/vuetify/src/components/VStepper/VStepperHeader.ts b/packages/vuetify/src/components/VStepper/VStepperHeader.ts new file mode 100644 index 0000000..d81b7a6 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepperHeader.ts @@ -0,0 +1,6 @@ +// Utilities +import { createSimpleFunctional } from '@/util' + +export const VStepperHeader = createSimpleFunctional('v-stepper-header') + +export type VStepperHeader = InstanceType diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass new file mode 100644 index 0000000..ad1a0e1 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepperItem.sass @@ -0,0 +1,94 @@ +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-stepper-item + align-items: center + align-self: stretch + display: inline-flex + flex: none + outline: none + opacity: $stepper-item-opacity + padding: $stepper-item-padding + position: relative + transition-duration: $stepper-item-transition-duration + transition-property: $stepper-item-transition-property + transition-timing-function: $stepper-item-transition-timing-function + + @include tools.states('.v-stepper-item__overlay') + + .v-stepper--non-linear & + opacity: var(--v-high-emphasis-opacity) + + &--selected + opacity: 1 + + &--error + color: rgb(var(--v-theme-error)) + + &--disabled + opacity: var(--v-medium-emphasis-opacity) + pointer-events: none + + .v-stepper--alt-labels & + flex-direction: column + justify-content: flex-start + align-items: center + flex-basis: $stepper-alt-labels-flex-basis + + .v-stepper-item__avatar.v-avatar + background: $stepper-item-avatar-background + color: $stepper-item-avatar-color + font-size: $stepper-item-avatar-font-size + margin-inline-end: $stepper-item-avatar-margin-inline-end + + .v-stepper--mobile & + margin-inline-end: 0 + + .v-icon + font-size: $stepper-item-avatar-icon-font-size + + .v-stepper-item--selected &, + .v-stepper-item--complete & + background: rgb(var(--v-theme-surface-variant)) + + .v-stepper-item--error & + background: rgb(var(--v-theme-error)) + + .v-stepper--alt-labels & + margin-bottom: $stepper-item-alt-labels-margin-bottom + margin-inline-end: 0 + + //.v-stepper-item__content + // .v-stepper--alt-labels & + // min-height: 28px + + .v-stepper-item__title + line-height: $stepper-item-title-line-height + + .v-stepper--mobile & + display: none + + .v-stepper-item__subtitle + font-size: $stepper-item-subtitle-font-size + text-align: left + line-height: $stepper-item-subtitle-line-height + opacity: $stepper-item-subtitle-opacity + + .v-stepper--alt-labels & + text-align: center + + .v-stepper--mobile & + display: none + + .v-stepper-item__overlay + background-color: currentColor + border-radius: inherit + opacity: 0 + transition: opacity .2s ease-in-out + + .v-stepper-item__overlay, + .v-stepper-item__underlay + @include tools.absolute() + pointer-events: none diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx new file mode 100644 index 0000000..7873532 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepperItem.tsx @@ -0,0 +1,194 @@ +// Styles +import './VStepperItem.sass' + +// Components +import { VAvatar } from '@/components/VAvatar/VAvatar' +import { VIcon } from '@/components/VIcon/VIcon' + +// Composables +import { makeGroupItemProps, useGroupItem } from '@/composables/group' +import { genOverlays } from '@/composables/variant' + +// Directives +import { Ripple } from '@/directives/ripple' + +// Utilities +import { computed } from 'vue' +import { VStepperSymbol } from './shared' +import { genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { RippleDirectiveBinding } from '@/directives/ripple' + +export type StepperItem = string | Record + +export type StepperItemSlot = { + canEdit: boolean + hasError: boolean + hasCompleted: boolean + title?: string | number + subtitle?: string | number + step: any +} + +export type VStepperItemSlots = { + default: StepperItemSlot + icon: StepperItemSlot + title: StepperItemSlot + subtitle: StepperItemSlot +} + +export type ValidationRule = () => string | boolean + +export const makeStepperItemProps = propsFactory({ + color: String, + title: String, + subtitle: String, + complete: Boolean, + completeIcon: { + type: String, + default: '$complete', + }, + editable: Boolean, + editIcon: { + type: String, + default: '$edit', + }, + error: Boolean, + errorIcon: { + type: String, + default: '$error', + }, + icon: String, + ripple: { + type: [Boolean, Object] as PropType, + default: true, + }, + rules: { + type: Array as PropType, + default: () => ([]), + }, +}, 'StepperItem') + +export const makeVStepperItemProps = propsFactory({ + ...makeStepperItemProps(), + ...makeGroupItemProps(), +}, 'VStepperItem') + +export const VStepperItem = genericComponent()({ + name: 'VStepperItem', + + directives: { Ripple }, + + props: makeVStepperItemProps(), + + emits: { + 'group:selected': (val: { value: boolean }) => true, + }, + + setup (props, { slots }) { + const group = useGroupItem(props, VStepperSymbol, true) + const step = computed(() => group?.value.value ?? props.value) + const isValid = computed(() => props.rules.every(handler => handler() === true)) + const isClickable = computed(() => !props.disabled && props.editable) + const canEdit = computed(() => !props.disabled && props.editable) + const hasError = computed(() => props.error || !isValid.value) + const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value)) + const icon = computed(() => { + if (hasError.value) return props.errorIcon + if (hasCompleted.value) return props.completeIcon + if (group.isSelected.value && props.editable) return props.editIcon + + return props.icon + }) + const slotProps = computed(() => ({ + canEdit: canEdit.value, + hasError: hasError.value, + hasCompleted: hasCompleted.value, + title: props.title, + subtitle: props.subtitle, + step: step.value, + value: props.value, + })) + + useRender(() => { + const hasColor = ( + !group || + group.isSelected.value || + hasCompleted.value || + canEdit.value + ) && ( + !hasError.value && + !props.disabled + ) + const hasTitle = !!(props.title != null || slots.title) + const hasSubtitle = !!(props.subtitle != null || slots.subtitle) + + function onClick () { + group?.toggle() + } + + return ( + + ) + }) + return {} + }, +}) + +export type VStepperItem = InstanceType diff --git a/packages/vuetify/src/components/VStepper/VStepperWindow.tsx b/packages/vuetify/src/components/VStepper/VStepperWindow.tsx new file mode 100644 index 0000000..146fec2 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepperWindow.tsx @@ -0,0 +1,68 @@ +// Components +import { VStepperSymbol } from './shared' +import { makeVWindowProps, VWindow } from '@/components/VWindow/VWindow' + +// Composables +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, inject } from 'vue' +import { genericComponent, omit, propsFactory, useRender } from '@/util' + +export const makeVStepperWindowProps = propsFactory({ + ...omit(makeVWindowProps(), ['continuous', 'nextIcon', 'prevIcon', 'showArrows', 'touch', 'mandatory']), +}, 'VStepperWindow') + +export const VStepperWindow = genericComponent()({ + name: 'VStepperWindow', + + props: makeVStepperWindowProps(), + + emits: { + 'update:modelValue': (v: unknown) => true, + }, + + setup (props, { slots }) { + const group = inject(VStepperSymbol, null) + const _model = useProxiedModel(props, 'modelValue') + + const model = computed({ + get () { + // Always return modelValue if defined + // or if not within a VStepper group + if (_model.value != null || !group) return _model.value + + // If inside of a VStepper, find the currently selected + // item by id. Item value may be assigned by its index + return group.items.value.find(item => group.selected.value.includes(item.id))?.value + }, + set (val) { + _model.value = val + }, + }) + + useRender(() => { + const windowProps = VWindow.filterProps(props) + + return ( + + ) + }) + + return {} + }, +}) + +export type VStepperWindow = InstanceType diff --git a/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx b/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx new file mode 100644 index 0000000..4adebda --- /dev/null +++ b/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx @@ -0,0 +1,38 @@ +// Components +import { makeVWindowItemProps, VWindowItem } from '@/components/VWindow/VWindowItem' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVStepperWindowItemProps = propsFactory({ + ...makeVWindowItemProps(), +}, 'VStepperWindowItem') + +export const VStepperWindowItem = genericComponent()({ + name: 'VStepperWindowItem', + + props: makeVStepperWindowItemProps(), + + setup (props, { slots }) { + useRender(() => { + const windowItemProps = VWindowItem.filterProps(props) + + return ( + + ) + }) + + return {} + }, +}) + +export type VStepperWindowItem = InstanceType diff --git a/packages/vuetify/src/components/VStepper/_variables.scss b/packages/vuetify/src/components/VStepper/_variables.scss new file mode 100644 index 0000000..1f07c67 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/_variables.scss @@ -0,0 +1,27 @@ +@use '../../styles/settings'; + +$stepper-actions-padding: 1rem !default; +$stepper-actions-stepper-padding: 0 1.5rem 1rem !default; +$stepper-actions-stepper-window-item-padding: 1.5rem 0 0 !default; +$stepper-alt-labels-flex-basis : 175px !default; +$stepper-alt-labels-header-divider: 35px -67px 0 !default; +$stepper-border-radius: 4px !default; +$stepper-elevation: 2 !default; +$stepper-item-opacity: var(--v-medium-emphasis-opacity) !default; +$stepper-item-padding: 1.5rem !default; +$stepper-item-transition-duration: .2s !default; +$stepper-item-transition-property: opacity !default; +$stepper-item-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default; +$stepper-header-divider-margin: 0 -16px !default; +$stepper-header-elevation: 2 !default; +$stepper-window-margin: 1.5rem !default; +$stepper-item-avatar-background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity)) !default; +$stepper-item-avatar-color: rgb(var(--v-theme-on-surface-variant)) !default; +$stepper-item-avatar-font-size: .75rem !default; +$stepper-item-avatar-margin-inline-end: 8px !default; +$stepper-item-avatar-icon-font-size: .875rem !default; +$stepper-item-alt-labels-margin-bottom: 16px !default; +$stepper-item-title-line-height: 1 !default; +$stepper-item-subtitle-font-size: .75rem !default; +$stepper-item-subtitle-line-height: 1 !default; +$stepper-item-subtitle-opacity: var(--v-medium-emphasis-opacity) !default; diff --git a/packages/vuetify/src/components/VStepper/index.ts b/packages/vuetify/src/components/VStepper/index.ts new file mode 100644 index 0000000..b0753fd --- /dev/null +++ b/packages/vuetify/src/components/VStepper/index.ts @@ -0,0 +1,6 @@ +export { VStepper } from './VStepper' +export { VStepperActions } from './VStepperActions' +export { VStepperHeader } from './VStepperHeader' +export { VStepperItem } from './VStepperItem' +export { VStepperWindow } from './VStepperWindow' +export { VStepperWindowItem } from './VStepperWindowItem' diff --git a/packages/vuetify/src/components/VStepper/shared.ts b/packages/vuetify/src/components/VStepper/shared.ts new file mode 100644 index 0000000..0612889 --- /dev/null +++ b/packages/vuetify/src/components/VStepper/shared.ts @@ -0,0 +1,5 @@ +// Types +import type { InjectionKey } from 'vue' +import type { GroupProvide } from '@/composables/group' + +export const VStepperSymbol: InjectionKey = Symbol.for('vuetify:v-stepper') diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.sass b/packages/vuetify/src/components/VSwitch/VSwitch.sass new file mode 100644 index 0000000..c9f8a7b --- /dev/null +++ b/packages/vuetify/src/components/VSwitch/VSwitch.sass @@ -0,0 +1,191 @@ +@use 'sass:selector' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-switch + .v-label + padding-inline-start: $switch-label-margin-inline-start + + .v-switch__loader + display: flex + + .v-progress-circular + color: $switch-loader-color + + .v-switch__track, + .v-switch__thumb + transition: none + + .v-selection-control--error:not(.v-selection-control--disabled) & + background-color: $switch-error-background-color + color: $switch-error-color + + .v-switch__track-true + margin-inline-end: auto + + .v-selection-control:not(.v-selection-control--dirty) & + opacity: 0 + + .v-switch__track-false + margin-inline-start: auto + + .v-selection-control--dirty & + opacity: 0 + + .v-switch__track + display: inline-flex + align-items: center + font-size: .5rem + padding: 0 5px + background-color: $switch-track-background + border-radius: $switch-track-radius + height: $switch-track-height + opacity: $switch-track-opacity + min-width: $switch-track-width + cursor: pointer + transition: $switch-track-transition + + .v-switch--inset & + border-radius: $switch-inset-track-border-radius + font-size: .75rem + height: $switch-inset-track-height + min-width: $switch-inset-track-width + + .v-switch__thumb + align-items: center + background-color: $switch-thumb-background + color: $switch-thumb-color + border-radius: $switch-thumb-radius + display: flex + font-size: .75rem + height: $switch-thumb-height + justify-content: center + width: $switch-thumb-width + pointer-events: none + transition: $switch-thumb-transition + position: relative + overflow: hidden + + .v-switch:not(.v-switch--inset) & + @include tools.elevation($switch-thumb-elevation) + + .v-switch.v-switch--flat:not(.v-switch--inset) & + background: $switch-thumb-flat-background + color: $switch-thumb-flat-color + + @include tools.elevation(0) + + .v-switch--inset & + height: $switch-inset-thumb-height + width: $switch-inset-thumb-width + transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height)) + + &--filled + transform: none + + .v-switch--inset .v-selection-control--dirty & + transform: none + transition: .15s .05s transform settings.$decelerated-easing + + .v-switch + $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset + + &.v-input + flex: $switch-flex + + .v-selection-control + min-height: var(--v-input-control-height) + + .v-selection-control__input + border-radius: 50% + transition: $switch-control-input-transition + +tools.ltr() + transform: translateX(-$switch-thumb-transform) + +tools.rtl() + transform: translateX($switch-thumb-transform) + position: absolute + + .v-icon + position: absolute + + .v-selection-control--dirty + .v-selection-control__input + +tools.ltr() + transform: translateX($switch-thumb-transform) + +tools.rtl() + transform: translateX(-$switch-thumb-transform) + + &.v-switch--indeterminate + .v-selection-control__input + transform: scale(.8) + .v-switch__thumb + transform: scale(.75) + box-shadow: none + + &.v-switch--inset + .v-selection-control__wrapper + width: auto + + &.v-input--vertical + .v-label + min-width: max-content + + .v-selection-control__wrapper + transform: $switch-thumb-vertical-transform + +@media (forced-colors: active) + .v-switch + .v-switch__loader + .v-progress-circular + color: currentColor + + .v-switch__thumb + background-color: buttontext + + .v-switch__track, + .v-switch__thumb + border: 1px solid + color: buttontext + + &:not(.v-switch--loading):not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__thumb + background-color: highlight + + &:not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__track + background-color: highlight + + .v-switch__track, + .v-switch__thumb + color: highlight + + &.v-switch--inset + .v-switch__track + border-width: 2px + + &:not(.v-switch--loading):not(.v-input--disabled) + .v-selection-control--dirty + .v-switch__thumb + background-color: highlighttext + color: highlighttext + + &.v-input--disabled + .v-switch__thumb + background-color: graytext + + .v-switch__track, + .v-switch__thumb + color: graytext + + &.v-switch--loading + .v-switch__thumb + background-color: canvas + + &.v-switch--inset, + &.v-switch--indeterminate + .v-switch__thumb + border-width: 0 diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx new file mode 100644 index 0000000..ec2abaf --- /dev/null +++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx @@ -0,0 +1,250 @@ +// Styles +import './VSwitch.sass' + +// Components +import { VScaleTransition } from '@/components/transitions' +import { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider' +import { VIcon } from '@/components/VIcon' +import { makeVInputProps, VInput } from '@/components/VInput/VInput' +import { VProgressCircular } from '@/components/VProgressCircular' +import { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl' + +// Composables +import { useFocus } from '@/composables/focus' +import { LoaderSlot, useLoader } from '@/composables/loader' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, ref } from 'vue' +import { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from '@/util' + +// Types +import type { ComputedRef, Ref } from 'vue' +import type { VInputSlots } from '@/components/VInput/VInput' +import type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl' +import type { IconValue } from '@/composables/icons' +import type { LoaderSlotProps } from '@/composables/loader' +import type { GenericProps } from '@/util' + +export type VSwitchSlot = { + model: Ref + isValid: ComputedRef +} + +export type VSwitchSlots = + & VInputSlots + & VSelectionControlSlots + & { + loader: LoaderSlotProps + thumb: { icon: IconValue | undefined } & VSwitchSlot + 'track-false': VSwitchSlot + 'track-true': VSwitchSlot + } + +export const makeVSwitchProps = propsFactory({ + indeterminate: Boolean, + inset: Boolean, + flat: Boolean, + loading: { + type: [Boolean, String], + default: false, + }, + + ...makeVInputProps(), + ...makeVSelectionControlProps(), +}, 'VSwitch') + +export const VSwitch = genericComponent( + props: { + modelValue?: T | null + 'onUpdate:modelValue'?: (value: T | null) => void + }, + slots: VSwitchSlots, +) => GenericProps>()({ + name: 'VSwitch', + + inheritAttrs: false, + + props: makeVSwitchProps(), + + emits: { + 'update:focused': (focused: boolean) => true, + 'update:modelValue': (value: any) => true, + 'update:indeterminate': (value: boolean) => true, + }, + + setup (props, { attrs, slots }) { + const indeterminate = useProxiedModel(props, 'indeterminate') + const model = useProxiedModel(props, 'modelValue') + const { loaderClasses } = useLoader(props) + const { isFocused, focus, blur } = useFocus(props) + const control = ref() + const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches + + const loaderColor = computed(() => { + return typeof props.loading === 'string' && props.loading !== '' + ? props.loading + : props.color + }) + + const uid = getUid() + const id = computed(() => props.id || `switch-${uid}`) + + function onChange () { + if (indeterminate.value) { + indeterminate.value = false + } + } + function onTrackClick (e: Event) { + e.stopPropagation() + e.preventDefault() + control.value?.input?.click() + } + + useRender(() => { + const [rootAttrs, controlAttrs] = filterInputAttrs(attrs) + const inputProps = VInput.filterProps(props) + const controlProps = VSelectionControl.filterProps(props) + + return ( + + {{ + ...slots, + default: ({ + id, + messagesId, + isDisabled, + isReadonly, + isValid, + }) => { + const slotProps = { + model, + isValid, + } + + return ( + + {{ + ...slots, + default: ({ backgroundColorClasses, backgroundColorStyles }) => ( +
    + { slots['track-true'] && ( +
    + { slots['track-true'](slotProps) } +
    + )} + + { slots['track-false'] && ( +
    + { slots['track-false'](slotProps) } +
    + )} +
    + ), + input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => ( + <> + { inputNode } +
    + { slots.thumb ? ( + + { slots.thumb({ ...slotProps, icon }) } + + ) : ( + + { !props.loading ? ( + (icon && ( + + ))) : ( + + { slotProps => ( + slots.loader + ? slots.loader(slotProps) + : ( + + ) + )} + + )} + + )} +
    + + ), + }} +     + ) + }, + }} +     + ) + }) + + return {} + }, +}) + +export type VSwitch = InstanceType diff --git a/packages/vuetify/src/components/VSwitch/__tests__/VSwitch.spec.cy.tsx b/packages/vuetify/src/components/VSwitch/__tests__/VSwitch.spec.cy.tsx new file mode 100644 index 0000000..5b9afbf --- /dev/null +++ b/packages/vuetify/src/components/VSwitch/__tests__/VSwitch.spec.cy.tsx @@ -0,0 +1,28 @@ +/// + +import { VSwitch } from '../VSwitch' +import { generate, gridOn } from '@/../cypress/templates' + +const contextColor = 'rgb(0, 0, 255)' +const color = 'rgb(255, 0, 0)' +const stories = { + 'Explicit color': gridOn([undefined], [true, false], (_, active) => ( +
    + +
    + )), + 'Inherited color': gridOn([undefined], [true, false], (_, active) => ( +
    + +
    + )), + 'No color': gridOn([undefined], [true, false], (_, active) => ( + + )), +} + +describe('VSwitch', () => { + describe('Showcase', () => { + generate({ stories, props: {}, component: VSwitch }) + }) +}) diff --git a/packages/vuetify/src/components/VSwitch/_variables.scss b/packages/vuetify/src/components/VSwitch/_variables.scss new file mode 100644 index 0000000..1eb8e10 --- /dev/null +++ b/packages/vuetify/src/components/VSwitch/_variables.scss @@ -0,0 +1,37 @@ +@use '../../styles/settings'; + +// VSwitch +$switch-flex: 0 1 auto !default; +$switch-control-input-transition: .2s transform settings.$standard-easing !default; +$switch-error-background-color: rgb(var(--v-theme-error)) !default; +$switch-error-color: rgb(var(--v-theme-on-error)) !default; + +$switch-inset-thumb-height: 24px !default; +$switch-inset-thumb-width: 24px !default; +$switch-inset-thumb-off-height: 16px !default; +$switch-inset-thumb-off-width: 16px !default; +$switch-inset-track-border-radius: 9999px !default; +$switch-inset-track-height: 32px !default; +$switch-inset-track-width: 52px !default; + +$switch-label-margin-inline-start: 10px !default; +$switch-loader-color: rgb(var(--v-theme-surface)) !default; + +$switch-thumb-background: rgb(var(--v-theme-surface-bright)) !default; +$switch-thumb-color: rgb(var(--v-theme-on-surface-bright)) !default; +$switch-thumb-flat-background: rgb(var(--v-theme-surface-variant)) !default; +$switch-thumb-flat-color: rgb(var(--v-theme-on-surface-variant)) !default; +$switch-thumb-elevation: 4 !default; +$switch-thumb-height: 20px !default; +$switch-thumb-width: 20px !default; +$switch-thumb-offset: 2px !default; +$switch-thumb-radius: 50% !default; +$switch-thumb-transition: .15s .05s transform settings.$decelerated-easing, .2s color settings.$standard-easing, .2s background-color settings.$standard-easing !default; +$switch-thumb-vertical-transform: rotate(-90deg) !default; + +$switch-track-background: rgb(var(--v-theme-surface-variant)) !default; +$switch-track-radius: 9999px !default; +$switch-track-width: 36px !default; +$switch-track-height: 14px !default; +$switch-track-opacity: .6 !default; +$switch-track-transition: .2s background-color settings.$standard-easing !default; diff --git a/packages/vuetify/src/components/VSwitch/index.ts b/packages/vuetify/src/components/VSwitch/index.ts new file mode 100644 index 0000000..d81ea7f --- /dev/null +++ b/packages/vuetify/src/components/VSwitch/index.ts @@ -0,0 +1 @@ +export { VSwitch } from './VSwitch' diff --git a/packages/vuetify/src/components/VSystemBar/VSystemBar.sass b/packages/vuetify/src/components/VSystemBar/VSystemBar.sass new file mode 100644 index 0000000..bf40285 --- /dev/null +++ b/packages/vuetify/src/components/VSystemBar/VSystemBar.sass @@ -0,0 +1,32 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-system-bar + align-items: center + display: flex + flex: $system-bar-flex + height: $system-bar-height + justify-content: $system-bar-justify-content + max-width: 100% + padding-inline: $system-bar-padding-x + position: relative + text-align: $system-bar-text-align + width: 100% + + .v-icon + opacity: $system-bar-icon-opacity + + @include tools.elevation($system-bar-elevation) + @include tools.position($system-bar-positions) + @include tools.theme($system-bar-theme...) + @include tools.typography($system-bar-typography...) + + &--rounded + @include tools.rounded($system-bar-border-radius) + + &--window + height: $system-bar-window-height + + &:not(.v-system-bar--absolute) + padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x}) diff --git a/packages/vuetify/src/components/VSystemBar/VSystemBar.tsx b/packages/vuetify/src/components/VSystemBar/VSystemBar.tsx new file mode 100644 index 0000000..944fb5e --- /dev/null +++ b/packages/vuetify/src/components/VSystemBar/VSystemBar.tsx @@ -0,0 +1,78 @@ +// Styles +import './VSystemBar.sass' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { makeComponentProps } from '@/composables/component' +import { makeElevationProps, useElevation } from '@/composables/elevation' +import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' +import { makeRoundedProps, useRounded } from '@/composables/rounded' +import { useSsrBoot } from '@/composables/ssrBoot' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { computed, shallowRef, toRef } from 'vue' +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVSystemBarProps = propsFactory({ + color: String, + height: [Number, String], + window: Boolean, + + ...makeComponentProps(), + ...makeElevationProps(), + ...makeLayoutItemProps(), + ...makeRoundedProps(), + ...makeTagProps(), + ...makeThemeProps(), +}, 'VSystemBar') + +export const VSystemBar = genericComponent()({ + name: 'VSystemBar', + + props: makeVSystemBarProps(), + + setup (props, { slots }) { + const { themeClasses } = provideTheme(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color')) + const { elevationClasses } = useElevation(props) + const { roundedClasses } = useRounded(props) + const { ssrBootStyles } = useSsrBoot() + const height = computed(() => props.height ?? (props.window ? 32 : 24)) + const { layoutItemStyles } = useLayoutItem({ + id: props.name, + order: computed(() => parseInt(props.order, 10)), + position: shallowRef('top'), + layoutSize: height, + elementSize: height, + active: computed(() => true), + absolute: toRef(props, 'absolute'), + }) + + useRender(() => ( + + )) + + return {} + }, +}) + +export type VSystemBar = InstanceType diff --git a/packages/vuetify/src/components/VSystemBar/__tests__/VSystemBar.spec.cy.tsx b/packages/vuetify/src/components/VSystemBar/__tests__/VSystemBar.spec.cy.tsx new file mode 100644 index 0000000..ae8be15 --- /dev/null +++ b/packages/vuetify/src/components/VSystemBar/__tests__/VSystemBar.spec.cy.tsx @@ -0,0 +1,21 @@ +/// + +// Components +import { VSystemBar } from '..' +import { VLayout } from '@/components/VLayout' + +// Tests +describe('VSystemBar', () => { + it('supports default themes', () => { + cy.mount((props: any) => ( + + Content + + )) + .get('.v-system-bar') + .should('have.class', 'v-theme--light') + .setProps({ theme: 'dark' }) + .get('.v-system-bar') + .should('have.class', 'v-theme--dark') + }) +}) diff --git a/packages/vuetify/src/components/VSystemBar/_variables.scss b/packages/vuetify/src/components/VSystemBar/_variables.scss new file mode 100644 index 0000000..63cb177 --- /dev/null +++ b/packages/vuetify/src/components/VSystemBar/_variables.scss @@ -0,0 +1,40 @@ +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VSystemBar +$system-bar-background: rgba(var(--v-theme-surface-light)) !default; +$system-bar-border-radius: map.get(settings.$rounded, 0) !default; +$system-bar-color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity)) !default; +$system-bar-elevation: 0 !default; +$system-bar-flex: 1 1 auto !default; +$system-bar-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default; +$system-bar-font-weight: tools.map-deep-get(settings.$typography, 'caption', 'weight') !default; +$system-bar-height: 24px !default; +$system-bar-icon-opacity: var(--v-medium-emphasis-opacity) !default; +$system-bar-justify-content: flex-end !default; +$system-bar-letter-spacing: tools.map-deep-get(settings.$typography, 'caption', 'letter-spacing') !default; +$system-bar-lights-out-background: rgba(var(--v-theme-background), 0.7) !default; +$system-bar-line-height: tools.map-deep-get(settings.$typography, 'caption', 'line-height') !default; +$system-bar-padding-x: 8px !default; +$system-bar-positions: absolute fixed !default; +$system-bar-text-align: end !default; +$system-bar-text-transform: tools.map-deep-get(settings.$typography, 'caption', 'text-transform') !default; +$system-bar-window-height: 32px !default; + +// Lists +$system-bar-theme: ( + $system-bar-background, + $system-bar-color +) !default; + +$system-bar-typography: ( + $system-bar-font-size, + $system-bar-font-weight, + $system-bar-letter-spacing, + $system-bar-line-height, + $system-bar-text-transform +) !default; + +// Deprecated +$system-bar-padding: 0 8px !default; diff --git a/packages/vuetify/src/components/VSystemBar/index.ts b/packages/vuetify/src/components/VSystemBar/index.ts new file mode 100644 index 0000000..f74ec73 --- /dev/null +++ b/packages/vuetify/src/components/VSystemBar/index.ts @@ -0,0 +1 @@ +export { VSystemBar } from './VSystemBar' diff --git a/packages/vuetify/src/components/VTable/VTable.sass b/packages/vuetify/src/components/VTable/VTable.sass new file mode 100644 index 0000000..f59fa48 --- /dev/null +++ b/packages/vuetify/src/components/VTable/VTable.sass @@ -0,0 +1,170 @@ +@use '../../styles/tools' +@use '../../styles/settings' +@use './variables' as * +@use './mixins' as * + +@include tools.layer('components') + // Theme + .v-table + @include tools.theme($table-theme...) + + font-size: $table-font-size + transition-duration: $table-transition-duration + transition-property: $table-transition-property + transition-timing-function: $table-transition-timing-function + + .v-table-divider + border-right: $table-border + + .v-table__wrapper + > table + > thead + > tr + > th + border-bottom: $table-border + + > tbody + > tr + &:not(:last-child) + > td, + > th + border-bottom: $table-border + + > tfoot + > tr + > td, + > th + border-top: $table-border + + + &.v-table--hover + > .v-table__wrapper + > table + > tbody + > tr + > td + position: relative + + &:hover > td::after + @include tools.absolute(true) + background: $table-hover-color + pointer-events: none + + &.v-table--fixed-header + > .v-table__wrapper + > table + > thead + > tr + > th + background: $table-background + box-shadow: inset 0 -1px 0 $table-border-color + z-index: 1 + + &.v-table--fixed-footer + > tfoot + > tr + > th, + > td + background: $table-background + box-shadow: inset 0 1px 0 $table-border-color + + // Block + .v-table + border-radius: inherit + // Do not inherit line-height + line-height: $table-line-height + max-width: 100% + display: flex + flex-direction: column + + > .v-table__wrapper + > table + width: 100% + border-spacing: 0 + + > tbody, + > thead, + > tfoot + > tr + > td, + > th + padding: $table-column-padding + transition-duration: $table-transition-duration + transition-property: $table-transition-property + transition-timing-function: $table-transition-timing-function + + > td + height: var(--v-table-row-height) + + > th + height: var(--v-table-header-height) + font-weight: $table-header-font-weight + user-select: none + text-align: start + + @at-root + @include tools.density('v-table', $table-density) using ($modifier) + --v-table-header-height: #{$table-header-height + $modifier} + --v-table-row-height: #{$table-row-height + $modifier} + + // Elements + .v-table__wrapper + border-radius: inherit + overflow: auto + flex: 1 1 auto + + // Modifiers + .v-table--has-top + > .v-table__wrapper + > table + > tbody + > tr + &:first-child + &:hover + > td + &:first-child + border-top-left-radius: 0 + + &:last-child + border-top-right-radius: 0 + + .v-table--has-bottom + > .v-table__wrapper + > table + > tbody + > tr + &:last-child + &:hover + > td + &:first-child + border-bottom-left-radius: 0 + + &:last-child + border-bottom-right-radius: 0 + + .v-table--fixed-height + > .v-table__wrapper + overflow-y: auto + + .v-table--fixed-header + > .v-table__wrapper + > table + > thead + position: sticky + top: 0 + z-index: 2 + > tr + > th + border-bottom: 0px !important + + .v-table--fixed-footer + > .v-table__wrapper + > table + > tfoot + > tr + position: sticky + bottom: 0 + z-index: 1 + > td, + > th + border-top: 0px !important diff --git a/packages/vuetify/src/components/VTable/VTable.tsx b/packages/vuetify/src/components/VTable/VTable.tsx new file mode 100644 index 0000000..273784f --- /dev/null +++ b/packages/vuetify/src/components/VTable/VTable.tsx @@ -0,0 +1,80 @@ +// Styles +import './VTable.sass' + +// Composables +import { makeComponentProps } from '@/composables/component' +import { makeDensityProps, useDensity } from '@/composables/density' +import { makeTagProps } from '@/composables/tag' +import { makeThemeProps, provideTheme } from '@/composables/theme' + +// Utilities +import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util' + +export type VTableSlots = { + default: never + top: never + bottom: never + wrapper: never +} + +export const makeVTableProps = propsFactory({ + fixedHeader: Boolean, + fixedFooter: Boolean, + height: [Number, String], + hover: Boolean, + + ...makeComponentProps(), + ...makeDensityProps(), + ...makeTagProps(), + ...makeThemeProps(), +}, 'VTable') + +export const VTable = genericComponent()({ + name: 'VTable', + + props: makeVTableProps(), + + setup (props, { slots, emit }) { + const { themeClasses } = provideTheme(props) + const { densityClasses } = useDensity(props) + + useRender(() => ( + + { slots.top?.() } + + { slots.default ? ( +
    + + { slots.default() } +
    +
    + ) : slots.wrapper?.()} + + { slots.bottom?.() } +     + )) + + return {} + }, +}) + +export type VTable = InstanceType diff --git a/packages/vuetify/src/components/VTable/_mixins.scss b/packages/vuetify/src/components/VTable/_mixins.scss new file mode 100644 index 0000000..57ce1d1 --- /dev/null +++ b/packages/vuetify/src/components/VTable/_mixins.scss @@ -0,0 +1,25 @@ +@use 'sass:map'; +@use './variables' as *; + +@mixin table-density ($densities) { + @each $density, $properties in $densities { + .v-table--density-#{$density} { + > .v-table__wrapper { + > table { + > tbody, + > thead, + > tfoot { + > tr { + > th { + height: map-get($properties, header) + } + > td { + height: map-get($properties, row) + } + } + } + } + } + } + } +} diff --git a/packages/vuetify/src/components/VTable/_variables.scss b/packages/vuetify/src/components/VTable/_variables.scss new file mode 100644 index 0000000..baff591 --- /dev/null +++ b/packages/vuetify/src/components/VTable/_variables.scss @@ -0,0 +1,29 @@ +@use 'sass:math'; +@use 'sass:map'; +@use '../../styles/settings'; +@use '../../styles/tools'; + +// VTable +$table-background: rgb(var(--v-theme-surface)) !default; +$table-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default; +$table-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default; +$table-header-height: 56px !default; +$table-header-font-weight: 500 !default; +$table-header-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default; +$table-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default; +$table-row-height: 52px !default; +$table-row-font-size: tools.map-deep-get(settings.$typography, 'subtitle-2', 'size') !default; +$table-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default; +$table-border: thin solid $table-border-color !default; +$table-hover-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default; +$table-line-height: 1.5 !default; +$table-column-padding: 0 16px !default; +$table-transition-duration: 0.28s !default; +$table-transition-property: box-shadow, opacity, background, height !default; +$table-transition-timing-function: settings.$standard-easing !default; + +// Lists +$table-theme: ( + $table-background, + $table-color, +) !default; diff --git a/packages/vuetify/src/components/VTable/index.ts b/packages/vuetify/src/components/VTable/index.ts new file mode 100644 index 0000000..f8d290d --- /dev/null +++ b/packages/vuetify/src/components/VTable/index.ts @@ -0,0 +1 @@ +export { VTable } from './VTable' diff --git a/packages/vuetify/src/components/VTabs/VTab.sass b/packages/vuetify/src/components/VTabs/VTab.sass new file mode 100644 index 0000000..61d2671 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/VTab.sass @@ -0,0 +1,34 @@ +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-tab + // override v-btn size specificity + &.v-tab.v-btn + height: var(--v-tabs-height) + border-radius: $tab-border-radius + min-width: $tab-min-width + + .v-slide-group--horizontal & + max-width: $tab-max-width + + .v-slide-group--vertical & + justify-content: start + + .v-tab__slider + position: absolute + bottom: 0 + left: 0 + height: $tab-slider-size + width: 100% + background: currentColor + pointer-events: none + opacity: 0 + + .v-tab--selected & + opacity: 1 + + .v-slide-group--vertical & + top: 0 + height: 100% + width: $tab-slider-size diff --git a/packages/vuetify/src/components/VTabs/VTab.tsx b/packages/vuetify/src/components/VTabs/VTab.tsx new file mode 100644 index 0000000..98e0bbf --- /dev/null +++ b/packages/vuetify/src/components/VTabs/VTab.tsx @@ -0,0 +1,153 @@ +// Styles +import './VTab.sass' + +// Components +import { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn' + +// Composables +import { useTextColor } from '@/composables/color' +import { forwardRefs } from '@/composables/forwardRefs' + +// Utilities +import { computed, ref } from 'vue' +import { VTabsSymbol } from './shared' +import { animate, genericComponent, omit, propsFactory, standardEasing, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VBtnSlots } from '@/components/VBtn/VBtn' + +export const makeVTabProps = propsFactory({ + fixed: Boolean, + + sliderColor: String, + hideSlider: Boolean, + + direction: { + type: String as PropType<'horizontal' | 'vertical'>, + default: 'horizontal', + }, + + ...omit(makeVBtnProps({ + selectedClass: 'v-tab--selected', + variant: 'text' as const, + }), [ + 'active', + 'block', + 'flat', + 'location', + 'position', + 'symbol', + ]), +}, 'VTab') + +export const VTab = genericComponent()({ + name: 'VTab', + + props: makeVTabProps(), + + setup (props, { slots, attrs }) { + const { textColorClasses: sliderColorClasses, textColorStyles: sliderColorStyles } = useTextColor(props, 'sliderColor') + + const rootEl = ref() + const sliderEl = ref() + + const isHorizontal = computed(() => props.direction === 'horizontal') + const isSelected = computed(() => rootEl.value?.group?.isSelected.value ?? false) + + function updateSlider ({ value }: { value: boolean }) { + if (value) { + const prevEl: HTMLElement | undefined = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider') + const nextEl = sliderEl.value + + if (!prevEl || !nextEl) return + + const color = getComputedStyle(prevEl).color + + const prevBox = prevEl.getBoundingClientRect() + const nextBox = nextEl.getBoundingClientRect() + + const xy = isHorizontal.value ? 'x' : 'y' + const XY = isHorizontal.value ? 'X' : 'Y' + const rightBottom = isHorizontal.value ? 'right' : 'bottom' + const widthHeight = isHorizontal.value ? 'width' : 'height' + + const prevPos = prevBox[xy] + const nextPos = nextBox[xy] + const delta = prevPos > nextPos + ? prevBox[rightBottom] - nextBox[rightBottom] + : prevBox[xy] - nextBox[xy] + const origin = + Math.sign(delta) > 0 ? (isHorizontal.value ? 'right' : 'bottom') + : Math.sign(delta) < 0 ? (isHorizontal.value ? 'left' : 'top') + : 'center' + const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight]) + const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0 + const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0 + + const sigma = 1.5 + animate(nextEl, { + backgroundColor: [color, 'currentcolor'], + transform: [ + `translate${XY}(${delta}px) scale${XY}(${initialScale})`, + `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`, + 'none', + ], + transformOrigin: Array(3).fill(origin), + }, { + duration: 225, + easing: standardEasing, + }) + } + } + + useRender(() => { + const btnProps = VBtn.filterProps(props) + + return ( + + {{ + ...slots, + default: () => ( + <> + { slots.default?.() ?? props.text } + + { !props.hideSlider && ( +
    + )} + + ), + }} + + ) + }) + + return forwardRefs({}, rootEl) + }, +}) + +export type VTab = InstanceType diff --git a/packages/vuetify/src/components/VTabs/VTabs.sass b/packages/vuetify/src/components/VTabs/VTabs.sass new file mode 100644 index 0000000..382dcc3 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/VTabs.sass @@ -0,0 +1,55 @@ +@use 'sass:math' +@use 'sass:map' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-tabs + display: flex + height: var(--v-tabs-height) + + @at-root + @include tools.density('v-tabs', $tabs-density) using ($modifier) + --v-tabs-height: #{$tabs-height + $modifier} + + &.v-tabs--stacked + --v-tabs-height: #{$tabs-stacked-height + $modifier} + + &.v-slide-group--vertical + height: auto + flex: none + --v-tabs-height: #{$tabs-height} + + .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) + .v-tab:first-child + margin-inline-start: $tab-align-tabs-title-margin + + .v-tabs--fixed-tabs, + .v-tabs--align-tabs-center + .v-slide-group__content > *:last-child + margin-inline-end: auto + + .v-slide-group__content > *:first-child + margin-inline-start: auto + + .v-tabs--grow + flex-grow: 1 + + .v-tab + flex: 1 0 auto + max-width: none + + .v-tabs--align-tabs-end + .v-tab:first-child + margin-inline-start: auto + + .v-tab:last-child + margin-inline-end: 0 + + @media #{map-get(settings.$display-breakpoints, 'md-and-down')} + .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) + .v-tab:first-child + margin-inline-start: 52px + .v-tab:last-child + margin-inline-end: 52px diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx new file mode 100644 index 0000000..c68aa64 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/VTabs.tsx @@ -0,0 +1,180 @@ +// Styles +import './VTabs.sass' + +// Components +import { VTab } from './VTab' +import { VTabsWindow } from './VTabsWindow' +import { VTabsWindowItem } from './VTabsWindowItem' +import { makeVSlideGroupProps, VSlideGroup } from '@/components/VSlideGroup/VSlideGroup' + +// Composables +import { useBackgroundColor } from '@/composables/color' +import { provideDefaults } from '@/composables/defaults' +import { makeDensityProps, useDensity } from '@/composables/density' +import { useProxiedModel } from '@/composables/proxiedModel' +import { useScopeId } from '@/composables/scopeId' +import { makeTagProps } from '@/composables/tag' + +// Utilities +import { computed, toRef } from 'vue' +import { convertToUnit, genericComponent, isObject, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import { VTabsSymbol } from './shared' + +export type TabItem = string | number | Record + +export type VTabsSlot = { + item: TabItem +} + +export type VTabsSlots = { + default: never + tab: VTabsSlot + item: VTabsSlot + window: never +} & { + [key: `tab.${string}`]: VTabsSlot + [key: `item.${string}`]: VTabsSlot +} + +function parseItems (items: readonly TabItem[] | undefined) { + if (!items) return [] + + return items.map(item => { + if (!isObject(item)) return { text: item, value: item } + + return item + }) +} + +export const makeVTabsProps = propsFactory({ + alignTabs: { + type: String as PropType<'start' | 'title' | 'center' | 'end'>, + default: 'start', + }, + color: String, + fixedTabs: Boolean, + items: { + type: Array as PropType, + default: () => ([]), + }, + stacked: Boolean, + bgColor: String, + grow: Boolean, + height: { + type: [Number, String], + default: undefined, + }, + hideSlider: Boolean, + sliderColor: String, + + ...makeVSlideGroupProps({ + mandatory: 'force' as const, + selectedClass: 'v-tab-item--selected', + }), + ...makeDensityProps(), + ...makeTagProps(), +}, 'VTabs') + +export const VTabs = genericComponent()({ + name: 'VTabs', + + props: makeVTabsProps(), + + emits: { + 'update:modelValue': (v: unknown) => true, + }, + + setup (props, { attrs, slots }) { + const model = useProxiedModel(props, 'modelValue') + const items = computed(() => parseItems(props.items)) + const { densityClasses } = useDensity(props) + const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor')) + const { scopeId } = useScopeId() + + provideDefaults({ + VTab: { + color: toRef(props, 'color'), + direction: toRef(props, 'direction'), + stacked: toRef(props, 'stacked'), + fixed: toRef(props, 'fixedTabs'), + sliderColor: toRef(props, 'sliderColor'), + hideSlider: toRef(props, 'hideSlider'), + }, + }) + + useRender(() => { + const slideGroupProps = VSlideGroup.filterProps(props) + const hasWindow = !!(slots.window || props.items.length > 0) + + return ( + <> + + { slots.default?.() ?? items.value.map(item => ( + slots.tab?.({ item }) ?? ( + slots[`tab.${item.value}`]?.({ item }) : undefined, + }} + /> + ) + ))} + + + { hasWindow && ( + + { items.value.map(item => slots.item?.({ item }) ?? ( + slots[`item.${item.value}`]?.({ item }), + }} + /> + ))} + + { slots.window?.() } + + )} + + ) + }) + + return {} + }, +}) + +export type VTabs = InstanceType diff --git a/packages/vuetify/src/components/VTabs/VTabsWindow.tsx b/packages/vuetify/src/components/VTabs/VTabsWindow.tsx new file mode 100644 index 0000000..df9fb72 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/VTabsWindow.tsx @@ -0,0 +1,70 @@ +// Components +import { makeVWindowProps, VWindow } from '@/components/VWindow/VWindow' + +// Composables +import { useProxiedModel } from '@/composables/proxiedModel' + +// Utilities +import { computed, inject } from 'vue' +import { genericComponent, omit, propsFactory, useRender } from '@/util' + +// Types +import { VTabsSymbol } from './shared' + +export const makeVTabsWindowProps = propsFactory({ + ...omit(makeVWindowProps(), ['continuous', 'nextIcon', 'prevIcon', 'showArrows', 'touch', 'mandatory']), +}, 'VTabsWindow') + +export const VTabsWindow = genericComponent()({ + name: 'VTabsWindow', + + props: makeVTabsWindowProps(), + + emits: { + 'update:modelValue': (v: unknown) => true, + }, + + setup (props, { slots }) { + const group = inject(VTabsSymbol, null) + const _model = useProxiedModel(props, 'modelValue') + + const model = computed({ + get () { + // Always return modelValue if defined + // or if not within a VTabs group + if (_model.value != null || !group) return _model.value + + // If inside of a VTabs, find the currently selected + // item by id. Item value may be assigned by its index + return group.items.value.find(item => group.selected.value.includes(item.id))?.value + }, + set (val) { + _model.value = val + }, + }) + + useRender(() => { + const windowProps = VWindow.filterProps(props) + + return ( + + ) + }) + + return {} + }, +}) + +export type VTabsWindow = InstanceType diff --git a/packages/vuetify/src/components/VTabs/VTabsWindowItem.tsx b/packages/vuetify/src/components/VTabs/VTabsWindowItem.tsx new file mode 100644 index 0000000..eebd106 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/VTabsWindowItem.tsx @@ -0,0 +1,38 @@ +// Components +import { makeVWindowItemProps, VWindowItem } from '@/components/VWindow/VWindowItem' + +// Utilities +import { genericComponent, propsFactory, useRender } from '@/util' + +export const makeVTabsWindowItemProps = propsFactory({ + ...makeVWindowItemProps(), +}, 'VTabsWindowItem') + +export const VTabsWindowItem = genericComponent()({ + name: 'VTabsWindowItem', + + props: makeVTabsWindowItemProps(), + + setup (props, { slots }) { + useRender(() => { + const windowItemProps = VWindowItem.filterProps(props) + + return ( + + ) + }) + + return {} + }, +}) + +export type VTabsWindowItem = InstanceType diff --git a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx new file mode 100644 index 0000000..9cdb3f2 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx @@ -0,0 +1,161 @@ +/// + +// Components +import { VTab, VTabs } from '../' + +// Utilities +import { ref } from 'vue' +import { createRouter, createWebHistory } from 'vue-router' + +describe('VTabs', () => { + it('should respond to clicks', () => { + cy.mount(() => ( + <> + + foo + bar + + + )) + + cy.get('.v-tab').eq(1).click() + .emitted(VTabs, 'update:modelValue') + .should('deep.equal', [ + ['foo'], // tabs will have initially set first tab as selected because of mandatory + ['bar'], + ]) + }) + + it('should render slider', () => { + cy.mount(() => ( + + foo + bar + + )) + + cy.get('.v-tab').eq(0).find('.v-tab__slider').should('exist') + .get('.v-tab').eq(1).click().find('.v-tab__slider').should('exist') + }) + + it('should hide slider', () => { + cy.mount(() => ( + + foo + bar + + )) + + cy.get('.v-tab').eq(0).find('.v-tab__slider').should('not.exist') + .get('.v-tab').eq(1).click().find('.v-tab__slider').should('not.exist') + }) + + it('should respond to v-model changes', () => { + cy.mount(({ modelValue }: { modelValue: string }) => ( + + foo + bar + + ), { + props: { + modelValue: 'foo', + }, + }) + + cy.get('.v-tab').eq(0).should('have.class', 'v-tab--selected') + .setProps({ modelValue: 'bar' }) + .get('.v-tab').eq(0).should('not.have.class', 'v-tab--selected') + .get('.v-tab').eq(1).should('have.class', 'v-tab--selected') + }) + + it('should react to router changes', () => { + const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + component: { template: 'Home' }, + }, + { + path: '/about', + component: { template: 'About' }, + }, + ], + }) + + cy.mount(() => ( + + foo + bar + + ), { + global: { + plugins: [router], + }, + }) + + cy.get('.v-tab').eq(1).click() + .then(() => { + expect(router.currentRoute.value.path).to.equal('/about') + }) + .get('.v-tabs') + .then(() => { + router.push('/') + }) + .get('.v-tab').eq(0).should('not.have.class', 'v-tab--selected') + .get('.v-tab').eq(1).should('have.class', 'v-tab--selected') + }) + + it('should render tabs vertically', () => { + cy.mount(() => ( + + foo + bar + + )) + + cy.get('.v-tabs').should('have.class', 'v-tabs--vertical') + .get('.v-tab').eq(1).click().should('have.class', 'v-tab--selected') + }) + + // https://github.com/vuetifyjs/vuetify/issues/15237 + it('should not change model value if tab items are hidden with v-show', () => { + const model = ref('B') + cy.mount(({ show = true }: { show?: boolean }) => ( +
    + model.value = v as string }> + A + B + C + +
    + )) + .get('.v-tabs').should('be.visible') + .then(() => { + expect(model.value).to.equal('B') + }) + .setProps({ show: false }) + .get('.v-tabs').should('not.be.visible') + .then(() => { + expect(model.value).to.equal('B') + }) + .setProps({ show: true }) + .get('.v-tabs').should('be.visible') + .then(() => { + expect(model.value).to.equal('B') + }) + }) + + it('should render tabs using items', () => { + const items = [ + { text: 'A', value: 1 }, + { text: 'B', value: 2 }, + { text: 'C', value: 3 }, + ] + cy.mount(() => ( + + )).get('.v-tab').eq(0).should('have.text', 'A') + .get('.v-tab').eq(1).should('have.text', 'B') + .get('.v-tab').eq(2).should('have.text', 'C') + }) +}) diff --git a/packages/vuetify/src/components/VTabs/_variables.scss b/packages/vuetify/src/components/VTabs/_variables.scss new file mode 100644 index 0000000..54c9da2 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/_variables.scss @@ -0,0 +1,14 @@ +@use 'sass:math'; +@use 'sass:map'; + +// VTabs +$tabs-density: ( 'default': 0, 'comfortable' : -1, 'compact': -3) !default; +$tabs-height: 48px !default; +$tabs-stacked-height: 72px !default; + +// VTab +$tab-align-tabs-title-margin: 42px !default; +$tab-border-radius: 0 !default; +$tab-max-width: 360px !default; +$tab-min-width: 90px !default; +$tab-slider-size: 2px !default; diff --git a/packages/vuetify/src/components/VTabs/index.ts b/packages/vuetify/src/components/VTabs/index.ts new file mode 100644 index 0000000..c137dab --- /dev/null +++ b/packages/vuetify/src/components/VTabs/index.ts @@ -0,0 +1,4 @@ +export { VTab } from './VTab' +export { VTabs } from './VTabs' +export { VTabsWindow } from './VTabsWindow' +export { VTabsWindowItem } from './VTabsWindowItem' diff --git a/packages/vuetify/src/components/VTabs/shared.ts b/packages/vuetify/src/components/VTabs/shared.ts new file mode 100644 index 0000000..34acf54 --- /dev/null +++ b/packages/vuetify/src/components/VTabs/shared.ts @@ -0,0 +1,5 @@ +// Types +import type { InjectionKey } from 'vue' +import type { GroupProvide } from '@/composables/group' + +export const VTabsSymbol: InjectionKey = Symbol.for('vuetify:v-tabs') diff --git a/packages/vuetify/src/components/VTextField/VTextField.sass b/packages/vuetify/src/components/VTextField/VTextField.sass new file mode 100644 index 0000000..f7a57b5 --- /dev/null +++ b/packages/vuetify/src/components/VTextField/VTextField.sass @@ -0,0 +1,76 @@ +@use 'sass:selector' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + /* region BLOCK */ + .v-text-field + input + color: inherit + opacity: 0 + flex: $text-field-input-flex + transition: $text-field-input-transition + min-width: 0 + + &:focus, + &:active + outline: none + + // Remove Firefox red outline + &:invalid + box-shadow: none + + .v-field + cursor: text + + .v-field__input + @at-root #{selector.append('.v-text-field--prefixed', &)} + --v-field-padding-start: #{$text-field-input-padding-start} + + @at-root #{selector.append('.v-text-field--suffixed', &)} + --v-field-padding-end: #{$text-field-input-padding-end} + + .v-input__details + padding-inline: $text-field-details-padding-inline + @at-root #{selector.append('.v-input--plain-underlined', &)} + padding-inline: 0 + + .v-field--no-label, + .v-field--active + input + opacity: 1 + + .v-field--single-line + input + transition: none + + /* endregion */ + /* region ELEMENTS */ + .v-text-field + &__prefix, + &__suffix + align-items: center + color: $text-field-affix-color + cursor: default + display: flex + opacity: 0 + transition: inherit + white-space: nowrap + min-height: $field-input-min-height + padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0)) + padding-bottom: var(--v-field-padding-bottom, 6px) + + .v-field--active & + opacity: 1 + + .v-field--disabled & + color: $text-field-disabled-affix-color + + &__prefix + padding-inline-start: var(--v-field-padding-start) + + &__suffix + padding-inline-end: var(--v-field-padding-end) + + /* endregion */ diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx new file mode 100644 index 0000000..3e83514 --- /dev/null +++ b/packages/vuetify/src/components/VTextField/VTextField.tsx @@ -0,0 +1,295 @@ +// Styles +import './VTextField.sass' + +// Components +import { VCounter } from '@/components/VCounter/VCounter' +import { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField' +import { makeVInputProps, VInput } from '@/components/VInput/VInput' + +// Composables +import { useFocus } from '@/composables/focus' +import { forwardRefs } from '@/composables/forwardRefs' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Directives +import Intersect from '@/directives/intersect' + +// Utilities +import { cloneVNode, computed, nextTick, ref } from 'vue' +import { callEvent, filterInputAttrs, genericComponent, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VCounterSlot } from '@/components/VCounter/VCounter' +import type { VFieldSlots } from '@/components/VField/VField' +import type { VInputSlots } from '@/components/VInput/VInput' + +const activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'] + +export const makeVTextFieldProps = propsFactory({ + autofocus: Boolean, + counter: [Boolean, Number, String], + counterValue: [Number, Function] as PropType number)>, + prefix: String, + placeholder: String, + persistentPlaceholder: Boolean, + persistentCounter: Boolean, + suffix: String, + role: String, + type: { + type: String, + default: 'text', + }, + modelModifiers: Object as PropType>, + + ...makeVInputProps(), + ...makeVFieldProps(), +}, 'VTextField') + +export type VTextFieldSlots = Omit & { + default: never + counter: VCounterSlot +} + +export const VTextField = genericComponent()({ + name: 'VTextField', + + directives: { Intersect }, + + inheritAttrs: false, + + props: makeVTextFieldProps(), + + emits: { + 'click:control': (e: MouseEvent) => true, + 'mousedown:control': (e: MouseEvent) => true, + 'update:focused': (focused: boolean) => true, + 'update:modelValue': (val: string) => true, + }, + + setup (props, { attrs, emit, slots }) { + const model = useProxiedModel(props, 'modelValue') + const { isFocused, focus, blur } = useFocus(props) + const counterValue = computed(() => { + return typeof props.counterValue === 'function' ? props.counterValue(model.value) + : typeof props.counterValue === 'number' ? props.counterValue + : (model.value ?? '').toString().length + }) + const max = computed(() => { + if (attrs.maxlength) return attrs.maxlength as unknown as undefined + + if ( + !props.counter || + (typeof props.counter !== 'number' && + typeof props.counter !== 'string') + ) return undefined + + return props.counter + }) + + const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant)) + + function onIntersect ( + isIntersecting: boolean, + entries: IntersectionObserverEntry[] + ) { + if (!props.autofocus || !isIntersecting) return + + (entries[0].target as HTMLInputElement)?.focus?.() + } + + const vInputRef = ref() + const vFieldRef = ref() + const inputRef = ref() + const isActive = computed(() => ( + activeTypes.includes(props.type) || + props.persistentPlaceholder || + isFocused.value || + props.active + )) + function onFocus () { + if (inputRef.value !== document.activeElement) { + inputRef.value?.focus() + } + + if (!isFocused.value) focus() + } + function onControlMousedown (e: MouseEvent) { + emit('mousedown:control', e) + + if (e.target === inputRef.value) return + + onFocus() + e.preventDefault() + } + function onControlClick (e: MouseEvent) { + onFocus() + + emit('click:control', e) + } + function onClear (e: MouseEvent) { + e.stopPropagation() + + onFocus() + + nextTick(() => { + model.value = null + + callEvent(props['onClick:clear'], e) + }) + } + function onInput (e: Event) { + const el = e.target as HTMLInputElement + model.value = el.value + if ( + props.modelModifiers?.trim && + ['text', 'search', 'password', 'tel', 'url'].includes(props.type) + ) { + const caretPosition = [el.selectionStart, el.selectionEnd] + nextTick(() => { + el.selectionStart = caretPosition[0] + el.selectionEnd = caretPosition[1] + }) + } + } + + useRender(() => { + const hasCounter = !!(slots.counter || (props.counter !== false && props.counter != null)) + const hasDetails = !!(hasCounter || slots.details) + const [rootAttrs, inputAttrs] = filterInputAttrs(attrs) + const { modelValue: _, ...inputProps } = VInput.filterProps(props) + const fieldProps = filterFieldProps(props) + + return ( + + {{ + ...slots, + default: ({ + id, + isDisabled, + isDirty, + isReadonly, + isValid, + }) => ( + + {{ + ...slots, + default: ({ + props: { class: fieldClass, ...slotProps }, + }) => { + const inputNode = ( + + ) + + return ( + <> + { props.prefix && ( + + + { props.prefix } + + + )} + + { slots.default ? ( +
    + { slots.default() } + { inputNode } +
    + ) : cloneVNode(inputNode, { class: fieldClass })} + + { props.suffix && ( + + + { props.suffix } + + + )} + + ) + }, + }} +     + ), + details: hasDetails ? slotProps => ( + <> + { slots.details?.(slotProps) } + + { hasCounter && ( + <> + + + + + )} + + ) : undefined, + }} +     + ) + }) + + return forwardRefs({}, vInputRef, vFieldRef, inputRef) + }, +}) + +export type VTextField = InstanceType diff --git a/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx new file mode 100644 index 0000000..0921161 --- /dev/null +++ b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx @@ -0,0 +1,95 @@ +/// + +import { VTextField } from '../VTextField' + +// Utilities +import { cloneVNode } from 'vue' +import { generate } from '../../../../cypress/templates' + +const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const +const densities = ['default', 'comfortable', 'compact'] as const + +const stories = Object.fromEntries(Object.entries({ + 'Default input': , + Disabled: , + Affixes: , + 'Prepend/append': , + 'Prepend/append inner': , + Placeholder: , +}).map(([k, v]) => [k, ( +
    + { variants.map(variant => ( + densities.map(density => ( +
    + { cloneVNode(v, { variant, density, label: `${variant} ${density}` }) } + { cloneVNode(v, { variant, density, label: `with value`, modelValue: 'Value' }) } +
    + )) + )).flat()} +
    +)])) + +describe('VTextField', () => { + it('validates input on mount', () => { + const rule = cy.spy(v => v?.length > 4 || 'Error!').as('rule') + + cy.mount(() => ( + + )) + + cy.get('.v-text-field').should('not.have.class', 'v-input--error') + cy.get('@rule').should('have.been.calledOnceWith', undefined) + cy.get('.v-text-field input').type('Hello') + cy.get('@rule').should('to.be.callCount', 6) + cy.get('.v-text-field').should('not.have.class', 'v-input--error') + }) + + it('does not validate on mount when using validate-on lazy', () => { + const rule = cy.spy(v => v?.length > 5 || 'Error!').as('rule') + + cy.mount(() => ( + + )) + + cy.get('.v-text-field').should('not.have.class', 'v-input--error') + cy.get('@rule').should('not.have.been.called') + cy.get('.v-text-field input').type('Hello') + cy.get('@rule').should('to.be.callCount', 5) + cy.get('.v-text-field').should('have.class', 'v-input--error') + cy.get('.v-messages').should('exist').invoke('text').should('equal', 'Error!') + }) + + it('handles multiple options in validate-on prop', () => { + const rule = cy.spy(v => v?.length > 5 || 'Error!').as('rule') + + cy.mount(() => ( + + )) + + cy.get('.v-text-field').should('not.have.class', 'v-input--error') + cy.get('@rule').should('not.have.been.called') + + cy.get('.v-text-field input').type('Hello') + + cy.get('.v-text-field').should('not.have.class', 'v-input--error') + cy.get('@rule').should('not.have.been.called') + + cy.get('.v-text-field input').blur() + + cy.get('@rule').should('have.been.calledOnce') + cy.get('.v-text-field').should('have.class', 'v-input--error') + cy.get('.v-messages').should('exist').invoke('text').should('equal', 'Error!') + }) + + // https://github.com/vuetifyjs/vuetify/issues/15231 + it('renders details if using hide-details="auto" and counter prop', () => { + cy.mount(() => ( + + )) + .get('.v-input__details').should('be.visible') + }) + + describe('Showcase', () => { + generate({ stories }) + }) +}) diff --git a/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.tsx b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.tsx new file mode 100644 index 0000000..7402048 --- /dev/null +++ b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.tsx @@ -0,0 +1,99 @@ +import { VTextField } from '../VTextField' + +// Utilities +import { describe, expect, it } from '@jest/globals' +import { mount } from '@vue/test-utils' +import { createVuetify } from '@/framework' + +describe('VTextField', () => { + const vuetify = createVuetify() + + function mountFunction (component: any, options = {}) { + return mount(component, { + global: { + plugins: [vuetify], + }, + ...options, + }) + } + + it('has affixed icons', () => { + const wrapper = mountFunction( + + ) + + let el = wrapper.find('.v-input__prepend .v-icon') + expect(el.attributes('aria-hidden')).toBe('true') + expect(el.attributes('aria-label')).toBeUndefined() + + el = wrapper.find('.v-field__prepend-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('true') + expect(el.attributes('aria-label')).toBeUndefined() + + el = wrapper.find('.v-field__append-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('true') + expect(el.attributes('aria-label')).toBeUndefined() + + el = wrapper.find('.v-input__append .v-icon') + expect(el.attributes('aria-hidden')).toBe('true') + expect(el.attributes('aria-label')).toBeUndefined() + }) + + it('has affixed icons with actions', () => { + const onClickPrepend = jest.fn() + const onClickPrependInner = jest.fn() + const onClickAppendInner = jest.fn() + const onClickAppend = jest.fn() + + const wrapper = mountFunction( + + ) + + expect(onClickPrepend).toHaveBeenCalledTimes(0) + expect(onClickPrependInner).toHaveBeenCalledTimes(0) + expect(onClickAppendInner).toHaveBeenCalledTimes(0) + expect(onClickAppend).toHaveBeenCalledTimes(0) + + let el = wrapper.find('.v-input__prepend .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickPrepend).toHaveBeenCalledTimes(1) + + el = wrapper.find('.v-field__prepend-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickPrependInner).toHaveBeenCalledTimes(1) + + el = wrapper.find('.v-field__append-inner .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickAppendInner).toHaveBeenCalledTimes(1) + + el = wrapper.find('.v-input__append .v-icon') + expect(el.attributes('aria-hidden')).toBe('false') + expect(el.attributes('aria-label')).toBeTruthy() + el.trigger('click') + expect(onClickAppend).toHaveBeenCalledTimes(1) + + expect(onClickPrepend).toHaveBeenCalledTimes(1) + expect(onClickPrependInner).toHaveBeenCalledTimes(1) + expect(onClickAppendInner).toHaveBeenCalledTimes(1) + }) +}) diff --git a/packages/vuetify/src/components/VTextField/_variables.scss b/packages/vuetify/src/components/VTextField/_variables.scss new file mode 100644 index 0000000..c1d3429 --- /dev/null +++ b/packages/vuetify/src/components/VTextField/_variables.scss @@ -0,0 +1,12 @@ +@forward '../VField/variables'; +@use '../../styles/settings'; + +// VTextField +$text-field-affix-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; +$text-field-border-radius: settings.$border-radius-root !default; +$text-field-details-padding-inline: 16px !default; +$text-field-disabled-affix-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default; +$text-field-input-flex: 1 !default; +$text-field-input-padding-end: 0 !default; +$text-field-input-padding-start: 6px !default; +$text-field-input-transition: .15s opacity settings.$standard-easing !default; diff --git a/packages/vuetify/src/components/VTextField/index.ts b/packages/vuetify/src/components/VTextField/index.ts new file mode 100644 index 0000000..178ebe4 --- /dev/null +++ b/packages/vuetify/src/components/VTextField/index.ts @@ -0,0 +1 @@ +export { VTextField } from './VTextField' diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.sass b/packages/vuetify/src/components/VTextarea/VTextarea.sass new file mode 100644 index 0000000..4f86f57 --- /dev/null +++ b/packages/vuetify/src/components/VTextarea/VTextarea.sass @@ -0,0 +1,54 @@ +@use 'sass:math' +@use 'sass:selector' +@use '../../styles/settings' +@use '../../styles/tools' +@use './variables' as * + +@include tools.layer('components') + .v-textarea + .v-field + --v-textarea-control-height: var(--v-input-control-height) + + .v-field__field + --v-input-control-height: var(--v-textarea-control-height) + + .v-field__input + $a: calc((var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0)) - 6px) + $b: calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px) + + flex: 1 1 auto + outline: none + -webkit-mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b) + mask-image: linear-gradient(to bottom, transparent, transparent $a, black $b) + + &.v-textarea__sizer + visibility: hidden + position: absolute + top: 0 + left: 0 + height: 0 !important + min-height: 0 !important + pointer-events: none + + &--no-resize + .v-field__input + resize: none + + .v-field--no-label, + .v-field--active + textarea + opacity: 1 + + textarea + opacity: 0 + flex: 1 + min-width: 0 + transition: .15s opacity settings.$standard-easing + + &:focus, + &:active + outline: none + + // Remove Firefox red outline + &:invalid + box-shadow: none diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx new file mode 100644 index 0000000..e675b3c --- /dev/null +++ b/packages/vuetify/src/components/VTextarea/VTextarea.tsx @@ -0,0 +1,346 @@ +// Styles +import './VTextarea.sass' +import '../VTextField/VTextField.sass' + +// Components +import { VCounter } from '@/components/VCounter/VCounter' +import { VField } from '@/components/VField' +import { filterFieldProps, makeVFieldProps } from '@/components/VField/VField' +import { makeVInputProps, VInput } from '@/components/VInput/VInput' + +// Composables +import { useFocus } from '@/composables/focus' +import { forwardRefs } from '@/composables/forwardRefs' +import { useProxiedModel } from '@/composables/proxiedModel' + +// Directives +import Intersect from '@/directives/intersect' + +// Utilities +import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch, watchEffect } from 'vue' +import { callEvent, clamp, convertToUnit, filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util' + +// Types +import type { PropType } from 'vue' +import type { VCounterSlot } from '@/components/VCounter/VCounter' +import type { VFieldSlots } from '@/components/VField/VField' +import type { VInputSlots } from '@/components/VInput/VInput' + +export const makeVTextareaProps = propsFactory({ + autoGrow: Boolean, + autofocus: Boolean, + counter: [Boolean, Number, String] as PropType, + counterValue: Function as PropType<(value: any) => number>, + prefix: String, + placeholder: String, + persistentPlaceholder: Boolean, + persistentCounter: Boolean, + noResize: Boolean, + rows: { + type: [Number, String], + default: 5, + validator: (v: any) => !isNaN(parseFloat(v)), + }, + maxRows: { + type: [Number, String], + validator: (v: any) => !isNaN(parseFloat(v)), + }, + suffix: String, + modelModifiers: Object as PropType>, + + ...omit(makeVInputProps(), ['centerAffix']), + ...omit(makeVFieldProps(), ['centerAffix']), +}, 'VTextarea') + +type VTextareaSlots = Omit & { + counter: VCounterSlot +} + +export const VTextarea = genericComponent()({ + name: 'VTextarea', + + directives: { Intersect }, + + inheritAttrs: false, + + props: makeVTextareaProps(), + + emits: { + 'click:control': (e: MouseEvent) => true, + 'mousedown:control': (e: MouseEvent) => true, + 'update:focused': (focused: boolean) => true, + 'update:modelValue': (val: string) => true, + }, + + setup (props, { attrs, emit, slots }) { + const model = useProxiedModel(props, 'modelValue') + const { isFocused, focus, blur } = useFocus(props) + const counterValue = computed(() => { + return typeof props.counterValue === 'function' + ? props.counterValue(model.value) + : (model.value || '').toString().length + }) + const max = computed(() => { + if (attrs.maxlength) return attrs.maxlength as string | number + + if ( + !props.counter || + (typeof props.counter !== 'number' && + typeof props.counter !== 'string') + ) return undefined + + return props.counter + }) + + function onIntersect ( + isIntersecting: boolean, + entries: IntersectionObserverEntry[] + ) { + if (!props.autofocus || !isIntersecting) return + + (entries[0].target as HTMLInputElement)?.focus?.() + } + + const vInputRef = ref() + const vFieldRef = ref() + const controlHeight = shallowRef('') + const textareaRef = ref() + const isActive = computed(() => ( + props.persistentPlaceholder || + isFocused.value || + props.active + )) + + function onFocus () { + if (textareaRef.value !== document.activeElement) { + textareaRef.value?.focus() + } + + if (!isFocused.value) focus() + } + function onControlClick (e: MouseEvent) { + onFocus() + + emit('click:control', e) + } + function onControlMousedown (e: MouseEvent) { + emit('mousedown:control', e) + } + function onClear (e: MouseEvent) { + e.stopPropagation() + + onFocus() + + nextTick(() => { + model.value = '' + + callEvent(props['onClick:clear'], e) + }) + } + function onInput (e: Event) { + const el = e.target as HTMLTextAreaElement + model.value = el.value + if (props.modelModifiers?.trim) { + const caretPosition = [el.selectionStart, el.selectionEnd] + nextTick(() => { + el.selectionStart = caretPosition[0] + el.selectionEnd = caretPosition[1] + }) + } + } + + const sizerRef = ref() + const rows = ref(+props.rows) + const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant)) + watchEffect(() => { + if (!props.autoGrow) rows.value = +props.rows + }) + function calculateInputHeight () { + if (!props.autoGrow) return + + nextTick(() => { + if (!sizerRef.value || !vFieldRef.value) return + + const style = getComputedStyle(sizerRef.value) + const fieldStyle = getComputedStyle(vFieldRef.value.$el) + + const padding = parseFloat(style.getPropertyValue('--v-field-padding-top')) + + parseFloat(style.getPropertyValue('--v-input-padding-top')) + + parseFloat(style.getPropertyValue('--v-field-padding-bottom')) + + const height = sizerRef.value.scrollHeight + const lineHeight = parseFloat(style.lineHeight) + const minHeight = Math.max( + parseFloat(props.rows) * lineHeight + padding, + parseFloat(fieldStyle.getPropertyValue('--v-input-control-height')) + ) + const maxHeight = parseFloat(props.maxRows!) * lineHeight + padding || Infinity + const newHeight = clamp(height ?? 0, minHeight, maxHeight) + rows.value = Math.floor((newHeight - padding) / lineHeight) + + controlHeight.value = convertToUnit(newHeight) + }) + } + + onMounted(calculateInputHeight) + watch(model, calculateInputHeight) + watch(() => props.rows, calculateInputHeight) + watch(() => props.maxRows, calculateInputHeight) + watch(() => props.density, calculateInputHeight) + + let observer: ResizeObserver | undefined + watch(sizerRef, val => { + if (val) { + observer = new ResizeObserver(calculateInputHeight) + observer.observe(sizerRef.value!) + } else { + observer?.disconnect() + } + }) + onBeforeUnmount(() => { + observer?.disconnect() + }) + + useRender(() => { + const hasCounter = !!(slots.counter || props.counter || props.counterValue) + const hasDetails = !!(hasCounter || slots.details) + const [rootAttrs, inputAttrs] = filterInputAttrs(attrs) + const { modelValue: _, ...inputProps } = VInput.filterProps(props) + const fieldProps = filterFieldProps(props) + + return ( + + {{ + ...slots, + default: ({ + id, + isDisabled, + isDirty, + isReadonly, + isValid, + }) => ( + + {{ + ...slots, + default: ({ + props: { class: fieldClass, ...slotProps }, + }) => ( + <> + { props.prefix && ( + + { props.prefix } + + )} + +