diff --git a/.eslintrc.json b/.eslintrc.json index 30cc18632f..2ded3d17cb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,70 +1,70 @@ { - "root": true, - "ignorePatterns": ["**/*"], - "plugins": ["@nrwl/nx", "ban", "unused-imports"], - "overrides": [ - { - "files": ["*.spec.ts", "ui.test.ts"], - "rules": { - "ban/ban": [ - 2, - { - "name": ["describe", "only"], - "message": "don't focus tests" - }, - { - "name": "fdescribe", - "message": "don't focus tests" - }, - { - "name": ["it", "only"], - "message": "don't focus tests" - }, - { - "name": "fit", - "message": "don't focus tests" - }, - { - "name": ["test", "only"], - "message": "don't focus tests" - }, - { - "name": "ftest", - "message": "don't focus tests" - } - ] - } - }, - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": { - "@nrwl/nx/enforce-module-boundaries": [ - "error", - { - "enforceBuildableLibDependency": true, - "allow": [], - "depConstraints": [ - { - "sourceTag": "*", - "onlyDependOnLibsWithTags": ["*"] - } - ] - } - ] - } - }, - { - "files": ["*.ts", "*.tsx"], - "extends": ["plugin:@nrwl/nx/typescript"], - "rules": { - "no-console": 2, - "unused-imports/no-unused-imports": "error" - } - }, - { - "files": ["*.js", "*.jsx"], - "extends": ["plugin:@nrwl/nx/javascript"], - "rules": {} - } - ] + "root": true, + "ignorePatterns": ["**/*"], + "plugins": ["@nrwl/nx", "ban", "unused-imports"], + "overrides": [ + { + "files": ["*.spec.ts", "ui.test.ts"], + "rules": { + "ban/ban": [ + 2, + { + "name": ["describe", "only"], + "message": "don't focus tests" + }, + { + "name": "fdescribe", + "message": "don't focus tests" + }, + { + "name": ["it", "only"], + "message": "don't focus tests" + }, + { + "name": "fit", + "message": "don't focus tests" + }, + { + "name": ["test", "only"], + "message": "don't focus tests" + }, + { + "name": "ftest", + "message": "don't focus tests" + } + ] + } + }, + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": { + "@nrwl/nx/enforce-module-boundaries": [ + "error", + { + "enforceBuildableLibDependency": true, + "allow": [], + "depConstraints": [ + { + "sourceTag": "*", + "onlyDependOnLibsWithTags": ["*"] + } + ] + } + ] + } + }, + { + "files": ["*.ts", "*.tsx"], + "extends": ["plugin:@nrwl/nx/typescript"], + "rules": { + "no-console": 2, + "unused-imports/no-unused-imports": "error" + } + }, + { + "files": ["*.js", "*.jsx"], + "extends": ["plugin:@nrwl/nx/javascript"], + "rules": {} + } + ] } diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 2d264d1113..74bdbf041a 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -1,6 +1,5 @@ name: Bug report 🐛 -description: - Something isn't working as expected? Here is the right place to report. +description: Something isn't working as expected? Here is the right place to report. title: '[YOUR TITLE]: Brief description' assignees: - yonatankra, rachelbt, rinaok, yinonov, olaf-k @@ -16,21 +15,21 @@ body: id: description attributes: label: Description - description: "What did you expect to happen? What happened instead?" + description: 'What did you expect to happen? What happened instead?' validations: required: true - type: textarea id: components attributes: label: Component(s) impacted - description: "Component(s) impacted? Please include screenshots, or code and relevant URLs." + description: 'Component(s) impacted? Please include screenshots, or code and relevant URLs.' validations: required: true - type: dropdown id: browser attributes: label: Browser - description: "What browser(s) are you working in?" + description: 'What browser(s) are you working in?' multiple: true options: - Chrome @@ -41,7 +40,7 @@ body: id: version attributes: label: Vivid Web Components version - description: "What version of Vivid Web Components are you using?" + description: 'What version of Vivid Web Components are you using?' placeholder: e.g. v2.2.8 validations: required: true @@ -60,15 +59,14 @@ body: id: application attributes: label: Application/website - description: "What application/website do you work on?" + description: 'What application/website do you work on?' validations: required: true - type: input id: example-url attributes: label: CodeSandbox example - description: - 'Use the + description: 'Use the [codesandbox examples](https://codesandbox.io/s/amazing-haslett-tnzsn) to help re-create the issue.' validations: @@ -76,11 +74,11 @@ body: - type: textarea id: reproduce attributes: - label: "Steps to reproduce the issue (if applicable)" + label: 'Steps to reproduce the issue (if applicable)' - type: textarea id: release-date attributes: - label: "Release date (if applicable)" + label: 'Release date (if applicable)' validations: required: false - type: checkboxes @@ -89,11 +87,9 @@ body: label: Code of Conduct description: Please confirm the following options: - - label: - I agree to follow this project's [Code of + - label: I agree to follow this project's [Code of Conduct](https://github.com/vonage/vivid-3/blob/main/.github/CODE_OF_CONDUCT.md) required: true - - label: - I checked the [current + - label: I checked the [current issues](https://github.com/vonage/vivid-3/issues) for duplicate issues diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index ae9197ea5b..f77229ec9e 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -1,6 +1,5 @@ name: Feature Request 💡 -description: - Suggest a new idea for the project. +description: Suggest a new idea for the project. title: '[YOUR TITLE]: Brief description' assignees: - yonatankra, rachelbt, rinaok, yinonov, olaf-k @@ -13,21 +12,21 @@ body: id: problem attributes: label: The problem - description: "Provide a clear and concise description of what the problem this new feature is trying to solve. (For example, I find it frustrating when...)" + description: 'Provide a clear and concise description of what the problem this new feature is trying to solve. (For example, I find it frustrating when...)' validations: required: true - type: textarea id: solution attributes: label: The solution - description: "Provide a clear and concise description of what you would like to happen instead." + description: 'Provide a clear and concise description of what you would like to happen instead.' validations: required: true - type: input id: application attributes: label: Application/website - description: "What application/website do you work on?" + description: 'What application/website do you work on?' validations: required: true - type: dropdown @@ -43,7 +42,7 @@ body: - type: textarea id: time-frame attributes: - label: "What time frame would this ideally be needed by (if applicable)" + label: 'What time frame would this ideally be needed by (if applicable)' validations: required: false - type: textarea diff --git a/.github/workflows/_deploy-deno.yml b/.github/workflows/_deploy-deno.yml index 246ab5591d..86db5e4e11 100644 --- a/.github/workflows/_deploy-deno.yml +++ b/.github/workflows/_deploy-deno.yml @@ -14,7 +14,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '16' + node-version: 20 cache: 'npm' - uses: actions/cache@v3 @@ -39,4 +39,4 @@ jobs: with: project: vivid root: dist/apps/docs - entrypoint: https://deno.land/std@0.135.0/http/file_server.ts + entrypoint: https://deno.land/std@0.217.0/http/file_server.ts diff --git a/.github/workflows/_lighthouse.yml b/.github/workflows/_lighthouse.yml index 0d99a2ed55..99b951dd5a 100644 --- a/.github/workflows/_lighthouse.yml +++ b/.github/workflows/_lighthouse.yml @@ -9,8 +9,8 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: "16" - cache: "npm" + node-version: 20 + cache: 'npm' - name: Install Dependencies run: npm ci @@ -22,6 +22,6 @@ jobs: - uses: treosh/lighthouse-ci-action@v9 with: # no urls needed, since it uses local folder to scan .html files - configPath: "./lighthouserc.json" + configPath: './lighthouserc.json' uploadArtifacts: true # save results as an action artifacts temporaryPublicStorage: true # upload lighthouse report to the temporary storage diff --git a/.github/workflows/_lint.yml b/.github/workflows/_lint.yml index cec4008b7d..d31cb3612d 100644 --- a/.github/workflows/_lint.yml +++ b/.github/workflows/_lint.yml @@ -9,7 +9,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '16' + node-version: 20 cache: 'npm' - uses: actions/cache@v3 id: cache @@ -21,4 +21,8 @@ jobs: if: steps.cache.outputs.cache-hit != 'true' run: npm ci --only=dev - - run: npm run nx run-many -- --target=stylelint --all && npm run nx run-many -- --target=lint --all + - name: Lint + run: npm run nx run-many -- --target=stylelint --all && npm run nx run-many -- --target=lint --all + + - name: Check Formatting + run: npm run nx format:check -- --all diff --git a/.github/workflows/_unit-test.yml b/.github/workflows/_unit-test.yml index 4c19cd608a..5d53f14b21 100644 --- a/.github/workflows/_unit-test.yml +++ b/.github/workflows/_unit-test.yml @@ -15,36 +15,36 @@ on: jobs: test: - name: "Unit Tests" - runs-on: ${{ inputs.os }} - steps: - - uses: actions/checkout@v3 - - - uses: actions/setup-node@v3 - with: - node-version: '16' - cache: 'npm' - - - uses: actions/cache@v3 - id: cache - with: - path: node_modules/ - key: ${{ runner.os }}-${{ hashFiles('package-lock.json') }} - - - name: Install Dependencies - if: steps.cache.outputs.cache-hit != 'true' - run: npm ci --only=dev - - - run: npm run nx run-many -- --target=test --all --coverage --coverageReporters=lcov - id: test - - - run: node ./tools/coverageMerger.js - - - uses: actions/upload-artifact@v2 - if: ${{ inputs.report_coverage }} - with: - name: coverage - path: ./coverage - - - run: exit 0 - if: ${{ steps.test.outcome == 'success' }} + name: 'Unit Tests' + runs-on: ${{ inputs.os }} + steps: + - uses: actions/checkout@v3 + + - uses: actions/setup-node@v3 + with: + node-version: 20 + cache: 'npm' + + - uses: actions/cache@v3 + id: cache + with: + path: node_modules/ + key: ${{ runner.os }}-${{ hashFiles('package-lock.json') }} + + - name: Install Dependencies + if: steps.cache.outputs.cache-hit != 'true' + run: npm ci --only=dev + + - run: npm run nx run-many -- --target=test --all --coverage --coverageReporters=lcov + id: test + + - run: node ./tools/coverageMerger.js + + - uses: actions/upload-artifact@v2 + if: ${{ inputs.report_coverage }} + with: + name: coverage + path: ./coverage + + - run: exit 0 + if: ${{ steps.test.outcome == 'success' }} diff --git a/.github/workflows/_upload-coverage.yml b/.github/workflows/_upload-coverage.yml index 05f145134f..4d967d60fa 100644 --- a/.github/workflows/_upload-coverage.yml +++ b/.github/workflows/_upload-coverage.yml @@ -11,7 +11,7 @@ on: jobs: test: - name: "Upload coverage" + name: 'Upload coverage' runs-on: ${{ inputs.os }} steps: - uses: actions/checkout@v3 @@ -31,4 +31,3 @@ jobs: flags: unittests name: codecov-umbrella verbose: true - diff --git a/.github/workflows/_visual-regression.yml b/.github/workflows/_visual-regression.yml index 486581e732..ada3d1bdc0 100644 --- a/.github/workflows/_visual-regression.yml +++ b/.github/workflows/_visual-regression.yml @@ -14,7 +14,7 @@ jobs: - uses: actions/setup-node@v3 with: - node-version: '16' + node-version: 20 cache: 'npm' - uses: actions/cache@v3 @@ -34,9 +34,13 @@ jobs: key: ${{ runner.os }}-dist-${{ hashFiles('libs/**/*.*') }} - run: scripts/visual-tests/run.tests.sh + env: + # Fix Firefox crash in GitHub Actions + # Details: https://github.com/microsoft/playwright/issues/6500#issuecomment-838515115 + HOME: /root + - uses: actions/upload-artifact@v3 if: always() with: name: visual-regression-artifact path: test-results/ - diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 2654d5b753..f3943dc648 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -9,14 +9,14 @@ # the `language` matrix defined below to confirm you have the correct set of # supported CodeQL languages. # -name: "CodeQL" +name: 'CodeQL' on: push: - branches: [ main ] + branches: [main] pull_request: # The branches below must be a subset of the branches above - branches: [ main ] + branches: [main] types: - opened - synchronize @@ -38,39 +38,39 @@ jobs: strategy: fail-fast: false matrix: - language: [ 'javascript' ] + language: ['javascript'] # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] # Learn more about CodeQL language support at https://git.io/codeql-language-support steps: - - name: Checkout repository - uses: actions/checkout@v3 + - name: Checkout repository + uses: actions/checkout@v3 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v1 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - # queries: ./path/to/local/query, your-org/your-repo/queries@main + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + # queries: ./path/to/local/query, your-org/your-repo/queries@main - # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). - # If this step fails, then you should remove it and run the build manually (see below) - - name: Autobuild - uses: github/codeql-action/autobuild@v1 + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v1 - # ℹī¸ Command-line programs to run using the OS shell. - # 📚 https://git.io/JvXDl + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl - # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines - # and modify them (or add more) to build your code if your project - # uses a compiled language + # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language - #- run: | - # make bootstrap - # make release + #- run: | + # make bootstrap + # make release - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v1 + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/.github/workflows/lint-pr-title.yml b/.github/workflows/lint-pr-title.yml index b6fda7aae1..69961f6004 100644 --- a/.github/workflows/lint-pr-title.yml +++ b/.github/workflows/lint-pr-title.yml @@ -3,7 +3,8 @@ name: 'Lint PR Title' on: pull_request: types: ['opened', 'edited', 'reopened', 'synchronize', 'ready_for_review'] - branches-ignore: ['dependabot/npm_and_yarn/**', 'release-please--branches--main--**'] + branches-ignore: + ['dependabot/npm_and_yarn/**', 'release-please--branches--main--**'] jobs: lint-pr-title: @@ -16,4 +17,4 @@ jobs: subjectPattern: ^.*VIV-\d+.*$ subjectPatternError: The PR title's description "{subject}" must contain a reference to the corresponding Jira ticket (VIV-xxx). env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/pre-release.yml b/.github/workflows/pre-release.yml index 27f93983c7..f9202e5878 100644 --- a/.github/workflows/pre-release.yml +++ b/.github/workflows/pre-release.yml @@ -27,7 +27,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 20 registry-url: 'https://registry.npmjs.org' - name: set-vivid-version @@ -61,7 +61,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 20 registry-url: 'https://registry.npmjs.org' - name: Download Build @@ -86,7 +86,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 20 registry-url: 'https://registry.npmjs.org' - name: Download Build diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 7fabe77a0d..6e2b796df6 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -25,8 +25,8 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: "16" - cache: "npm" + node-version: 20 + cache: 'npm' - uses: actions/cache@v3 id: cache diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml index 900475511a..c1fbefd8d8 100644 --- a/.github/workflows/release-please.yml +++ b/.github/workflows/release-please.yml @@ -58,7 +58,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 20 registry-url: 'https://registry.npmjs.org' - name: build @@ -81,7 +81,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 20 registry-url: 'https://registry.npmjs.org' - name: Download Build @@ -107,7 +107,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 20 registry-url: 'https://registry.npmjs.org' - name: Download Build diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml index 830a72288c..55bc433de4 100644 --- a/.github/workflows/stale.yml +++ b/.github/workflows/stale.yml @@ -1,7 +1,7 @@ name: Close inactive issues on: schedule: - - cron: "30 1 * * *" + - cron: '30 1 * * *' jobs: close-issues: @@ -14,9 +14,9 @@ jobs: with: days-before-issue-stale: 30 days-before-issue-close: 14 - stale-issue-label: "stale" - stale-issue-message: "This issue is stale because it has been open for 30 days with no activity." - close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale." + stale-issue-label: 'stale' + stale-issue-message: 'This issue is stale because it has been open for 30 days with no activity.' + close-issue-message: 'This issue was closed because it has been inactive for 14 days since being marked as stale.' days-before-pr-stale: -1 days-before-pr-close: -1 exempt-issue-labels: 'Question,Enhancement,work-in-progress,Backlog' diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000000..9a2a0e219c --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v20 diff --git a/.prettierignore b/.prettierignore index d0b804da2a..3cf5f91bbf 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,3 +2,15 @@ /dist /coverage + +package-lock.json + +# Not yet formatted file types: +**/*.js +**/*.mjs +**/*.cjs +**/*.ts +**/*.mts +**/*.cts +**/*.vue +**/*.md diff --git a/.prettierrc b/.prettierrc index 544138be45..62532247f3 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,3 @@ { - "singleQuote": true + "singleQuote": true } diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 3d1d22abd8..bf12d960e4 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "libs/components": "3.50.0", - "libs/vue-wrappers": "3.50.0" + "libs/components": "3.51.0", + "libs/vue-wrappers": "3.51.0" } diff --git a/.stylelintrc.json b/.stylelintrc.json index 0a19041bc4..f23156e89f 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,30 +1,14 @@ { - "ignoreFiles": [ - "**/*" - ], + "ignoreFiles": ["**/*"], "overrides": [ { - "files": [ - "**/*.scss" - ], - "plugins": [ - "stylelint-no-unsupported-browser-features" - ], + "files": ["**/*.scss"], + "plugins": ["stylelint-no-unsupported-browser-features"], "extends": [ "stylelint-config-standard-scss", - "stylelint-config-idiomatic-order", - "stylelint-config-prettier" + "stylelint-config-idiomatic-order" ], "rules": { - "string-quotes": "double", - "indentation": "tab", - "plugin/no-unsupported-browser-features": [ - true, - { - "ignore": ["rem", "multicolumn", "css3-cursors", "css-touch-action"], - "severity": "warning" - } - ], "order/properties-alphabetical-order": null, "selector-max-id": null, "selector-class-pattern": null, @@ -32,14 +16,14 @@ "selector-max-compound-selectors": null, "no-duplicate-selectors": true, "declaration-block-no-duplicate-properties": true, - "function-parentheses-space-inside": null, "rule-empty-line-before": null, "value-keyword-case": [ "lower", { "camelCaseSvgKeywords": true } - ] + ], + "scss/operator-no-newline-after": null } } ] diff --git a/apps/docs/_data/components.json b/apps/docs/_data/components.json index e3a2932b97..bcceac7c3e 100644 --- a/apps/docs/_data/components.json +++ b/apps/docs/_data/components.json @@ -2,9 +2,7 @@ { "title": "Accordion", "markdown": "./libs/components/src/lib/accordion/README.md", - "children": [ - "Accordion Item" - ] + "children": ["Accordion Item"] }, { "title": "Accordion Item", @@ -26,9 +24,7 @@ { "title": "Breadcrumb", "markdown": "./libs/components/src/lib/breadcrumb/README.md", - "children": [ - "Breadcrumb Item" - ] + "children": ["Breadcrumb Item"] }, { "title": "Breadcrumb Item", @@ -42,9 +38,7 @@ { "title": "Calendar", "markdown": "./libs/components/src/lib/calendar/README.md", - "children": [ - "Calendar Event" - ] + "children": ["Calendar Event"] }, { "title": "Calendar Event", @@ -54,9 +48,7 @@ { "title": "Date Picker", "markdown": "./libs/components/src/lib/date-picker/README.md", - "children": [ - "Date Range Picker" - ] + "children": ["Date Range Picker"] }, { "title": "Date Range Picker", @@ -78,10 +70,7 @@ { "title": "Nav", "markdown": "./libs/components/src/lib/nav/README.md", - "children": [ - "Nav Item", - "Nav Disclosure" - ] + "children": ["Nav Item", "Nav Disclosure"] }, { "title": "Nav Item", @@ -148,9 +137,7 @@ { "title": "Menu", "markdown": "./libs/components/src/lib/menu/README.md", - "children": [ - "Menu Item" - ] + "children": ["Menu Item"] }, { "title": "Menu Item", @@ -168,9 +155,7 @@ { "title": "Radio Group", "markdown": "./libs/components/src/lib/radio-group/README.md", - "children": [ - "Radio" - ] + "children": ["Radio"] }, { "title": "Radio", @@ -192,9 +177,7 @@ { "title": "Tabs", "markdown": "./libs/components/src/lib/tabs/README.md", - "children": [ - "Tab" - ] + "children": ["Tab"] }, { "title": "Tab", @@ -240,9 +223,7 @@ { "title": "Tree View", "markdown": "./libs/components/src/lib/tree-view/README.md", - "children": [ - "Tree Item" - ] + "children": ["Tree Item"] }, { "title": "Tree Item", @@ -252,9 +233,7 @@ { "title": "Tag Group", "markdown": "./libs/components/src/lib/tag-group/README.md", - "children": [ - "Tag" - ] + "children": ["Tag"] }, { "title": "Tag", @@ -273,6 +252,11 @@ "title": "File Picker", "markdown": "./libs/components/src/lib/file-picker/README.md" }, + { + "title": "Range Slider", + "status": "alpha", + "markdown": "./libs/components/src/lib/range-slider/README.md" + }, { "title": "Split Button", "markdown": "./libs/components/src/lib/split-button/README.md" diff --git a/apps/docs/_data/designs.json b/apps/docs/_data/designs.json index a25dbc65f9..85b6b6f85c 100644 --- a/apps/docs/_data/designs.json +++ b/apps/docs/_data/designs.json @@ -1,28 +1,28 @@ [ - { - "title": "Guidelines", - "markdown": "./docs/design/guidelines.md" - }, - { - "title": "Color", - "markdown": "./docs/design/color.md" - }, - { - "title": "Typography", - "markdown": "./docs/design/typography.md" - }, - { - "title": "Appearance", - "markdown": "./docs/design/appearance.md", - "status": "underlying" - }, - { - "title": "Sizing", - "markdown": "./docs/design/sizing.md" - }, - { - "title": "Customization", - "markdown": "./docs/design/customization.md", - "status": "underlying" - } + { + "title": "Guidelines", + "markdown": "./docs/design/guidelines.md" + }, + { + "title": "Color", + "markdown": "./docs/design/color.md" + }, + { + "title": "Typography", + "markdown": "./docs/design/typography.md" + }, + { + "title": "Appearance", + "markdown": "./docs/design/appearance.md", + "status": "underlying" + }, + { + "title": "Sizing", + "markdown": "./docs/design/sizing.md" + }, + { + "title": "Customization", + "markdown": "./docs/design/customization.md", + "status": "underlying" + } ] diff --git a/apps/docs/_data/roadmaps.json b/apps/docs/_data/roadmaps.json new file mode 100644 index 0000000000..b501e96896 --- /dev/null +++ b/apps/docs/_data/roadmaps.json @@ -0,0 +1,6 @@ +[ + { + "title": "Roadmap", + "markdown": "./docs/roadmap/roadmap.md" + } +] diff --git a/apps/docs/_includes/navigation.njk b/apps/docs/_includes/navigation.njk index c24eed74af..c6a87fef48 100644 --- a/apps/docs/_includes/navigation.njk +++ b/apps/docs/_includes/navigation.njk @@ -20,14 +20,14 @@ {% endif %} {% endfor %} - - {% for item in guides %} - - {% endfor %} + + {% for item in guides %} + + {% endfor %} {% for item in designs | publicPageFilter %} - + {% if (item.status) == "underlying" %} {% endif %} @@ -39,6 +39,9 @@ + + + {% for item in components | publicPageFilter | sort(false, false, 'title') %} {% if item.children %} @@ -52,13 +55,13 @@ {% if (item.status) == "underlying" %} {% endif %} - + {% for child in item.children %} - + {% endfor %} {% elif item.parent == null %} - + {% if (item.status) == "alpha" %} {% endif %} diff --git a/apps/docs/_layouts/base.njk b/apps/docs/_layouts/base.njk index ef3ddde138..4b3025c1be 100644 --- a/apps/docs/_layouts/base.njk +++ b/apps/docs/_layouts/base.njk @@ -76,11 +76,12 @@ {% block header %}{% endblock %} + - + @@ -92,21 +93,21 @@ - - + + - + {% include "navigation.njk" %} -
+
{% block banner %}{% endblock %}
diff --git a/apps/docs/assets/bundled-scripts/icons-gallery.js b/apps/docs/assets/bundled-scripts/icons-gallery.js index 04fd516a12..c8a9d3af7b 100644 --- a/apps/docs/assets/bundled-scripts/icons-gallery.js +++ b/apps/docs/assets/bundled-scripts/icons-gallery.js @@ -6,9 +6,7 @@ let jsonData; let index = 0; let numShown = NUM_TO_SHOW; -fetchJSONData(); - -async function fetchJSONData() { +export async function initIconsGallery() { try { const response = await fetch(`${BASE_URL}/v${ICON_SET_VERSION}/manifest.json`); jsonData = await response.json(); @@ -44,6 +42,7 @@ function addOption(categoryName) { function showIcons(data) { index = 0; + let last; while (last = iconsLayout.lastChild) iconsLayout.removeChild(last); while (index < data.length) { addIcon(data[index].id); @@ -145,4 +144,41 @@ function filterIconsByTag(iconsArray) { window.showMore = showMore; window.onClickFilter = onClickFilter; +customElements.define('vivid-icons-gallery', class VividIconsGallery extends HTMLElement { + constructor() { + super(); + this.innerHTML = ` +
+ + + + + + + +
+ + Filter By Style: + + + + + Filter By Color: + + + +
+ + +
+ +
+ +
`; + } + + connectedCallback() { + initIconsGallery(); + } +}); diff --git a/apps/docs/assets/bundled-scripts/live-sample.js b/apps/docs/assets/bundled-scripts/live-sample.js index 1199f0688b..79d4b42b1c 100644 --- a/apps/docs/assets/bundled-scripts/live-sample.js +++ b/apps/docs/assets/bundled-scripts/live-sample.js @@ -5,12 +5,6 @@ import { html } from "@codemirror/lang-html" import { Compartment } from '@codemirror/state' import { oneDark } from '@codemirror/theme-one-dark' -window.onload = () => { - addSamplesEditors(); - addButtonsHandlers(); - addLocaleSwitcher(); -}; - const samplesEditors = new Map(); const theme = new Compartment(); @@ -159,3 +153,20 @@ function switchLocale(event) { iframe.contentWindow.setLocale(iframe.contentWindow.locales[select.value]); iframe.contentWindow.document.documentElement.lang = select.value; } + +function cleanupEditors() { + for (const { view } of samplesEditors.values()) { + view.destroy(); + } + samplesEditors.clear(); +} + +function setupLiveSamples() { + cleanupEditors(); + addSamplesEditors(); + addButtonsHandlers(); + addLocaleSwitcher(); +} + +window.addEventListener('load', setupLiveSamples); +window.addEventListener('htmx:afterSwap', setupLiveSamples); diff --git a/apps/docs/assets/bundled-scripts/turbolinks.js b/apps/docs/assets/bundled-scripts/turbolinks.js new file mode 100644 index 0000000000..89e79ddbe8 --- /dev/null +++ b/apps/docs/assets/bundled-scripts/turbolinks.js @@ -0,0 +1,31 @@ +import 'htmx.org'; + +window.addEventListener('DOMContentLoaded', () => { + const navItems = document.querySelectorAll('vwc-nav-item'); + for (const navItem of navItems) { + navItem.setAttribute('hx-get', navItem.href); + navItem.setAttribute('hx-push-url', 'true'); + navItem.addEventListener('click', (e) => { e.preventDefault() }); + window.htmx.process(navItem); + } +}); + +const handleLocationChange = () => { + for (const el of document.querySelectorAll('vwc-nav-item[aria-current="page"], vwc-nav-disclosure[aria-current="page"]')) { + el.removeAttribute('aria-current'); + } + + let current = document.querySelector(` + vwc-nav-item[href="${location.pathname}"], + vwc-nav-item[href="${location.pathname.replace(/\/$/, '')}"] + `); + while (current) { + if (current.tagName === 'VWC-NAV-ITEM' || current.tagName === 'VWC-NAV-DISCLOSURE') { + current.setAttribute('aria-current', 'page'); + } + current = current.parentElement; + } +} + +window.addEventListener("popstate", handleLocationChange); +window.addEventListener("htmx:pushedIntoHistory", handleLocationChange); diff --git a/apps/docs/assets/scripts/main.js b/apps/docs/assets/scripts/main.js index 8f3ac3aef5..6115bcad32 100644 --- a/apps/docs/assets/scripts/main.js +++ b/apps/docs/assets/scripts/main.js @@ -24,16 +24,12 @@ const codeBlockButtonClick = (button) => { button.ariaExpanded = details.open; }; -const onloadIframe = (iFrame) => { - const toggle = document.querySelector('vwc-button#dark-mode-toggle'); - const menu = document.querySelector('vwc-menu#dark-mode-menu'); - - setCurrentIframeTheme(toggle, iFrame); - menu.addEventListener('click', () => { - setCurrentIframeTheme(toggle, iFrame); - }); - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setCurrentIframeTheme(toggle, iFrame)); +const getCurrentTheme = () => + document.querySelector('vwc-button#dark-mode-toggle').icon === 'dark-mode-solid' ? 'dark' : 'light'; +const onloadIframe = (iFrame) => { + iFrame.setAttribute('data-vivid-iframe', ''); + setCurrentIframeTheme(getCurrentTheme(), iFrame); autoResize(iFrame); }; @@ -51,16 +47,30 @@ const autoResize = (iFrame) => { }).observe(iFrame.contentWindow.document.documentElement); }; -const setCurrentIframeTheme = (toggle, iFrame) => { +const setCurrentIframeTheme = (displayMode, iFrame) => { const iframeHead = iFrame.contentWindow.document.head; - const displayMode = toggle.icon === "dark-mode-solid" ? 'dark' : 'light'; - const theme = ``; + const theme = ``; const themeLink = iframeHead.querySelector('#theme-link'); - if (themeLink) { - themeLink.outerHTML = theme; - } else { - iframeHead.insertAdjacentHTML("beforeend", theme); - } + if (!themeLink) { + iframeHead.insertAdjacentHTML("beforeend", theme); + } else if (themeLink.dataset.theme !== displayMode) { + themeLink.outerHTML = theme; + } +} + +const updateThemeOfAllIframes = () => { + const newTheme = getCurrentTheme(); + for (const iframe of document.querySelectorAll('[data-vivid-iframe]')) { + setCurrentIframeTheme(newTheme, iframe); + } +} + +const setupIframeThemeUpdates = () => { + document + .querySelector('vwc-menu#dark-mode-menu') + .addEventListener('change', updateThemeOfAllIframes); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeOfAllIframes); } +window.addEventListener('load', setupIframeThemeUpdates); diff --git a/apps/docs/assets/scripts/scroll-handler.js b/apps/docs/assets/scripts/scroll-handler.js index 64f3fb9200..edc3c1f667 100644 --- a/apps/docs/assets/scripts/scroll-handler.js +++ b/apps/docs/assets/scripts/scroll-handler.js @@ -11,19 +11,6 @@ const onScroll = () => { const isWindowScrolled = window.scrollY > 0; const isSideDrawerScrolled = getSideDrawerBase().scrollTop > 0; updateHeaderElevationShadow(isWindowScrolled || isSideDrawerScrolled); - // save sideDrawer's scroll in sessionStorage - if (getSideDrawerBase().scrollTop) { - sessionStorage.setItem("scroll", getSideDrawerBase().scrollTop); - } -} - -const setScrollFromSessionStorage = () => { - // set sideDrawer's scroll from sessionStorage - if (getSideDrawerBase().offsetHeight > 0) { - getSideDrawerBase().scrollTop = sessionStorage.getItem('scroll') ?? 0; - } else { - requestAnimationFrame(setScrollFromSessionStorage); - } } (() => { @@ -31,7 +18,6 @@ const setScrollFromSessionStorage = () => { window.addEventListener('scroll', onScroll); customElements.whenDefined('vwc-side-drawer').then(() => { - setScrollFromSessionStorage(); getSideDrawerBase().addEventListener('scroll', onScroll); }); })(); diff --git a/apps/docs/assets/styles/icons-gallery.css b/apps/docs/assets/styles/icons-gallery.css index 27cbca1bda..fb28f56f10 100644 --- a/apps/docs/assets/styles/icons-gallery.css +++ b/apps/docs/assets/styles/icons-gallery.css @@ -1,58 +1,58 @@ -.div-wrapper{ - max-width: 1200px; - margin-top: 64px; +.div-wrapper { + max-width: 1200px; + margin-top: 64px; } #iconsLayout { - --layout-column-gap: 16px; - --layout-row-gap: 16px; - --layout-grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + --layout-column-gap: 16px; + --layout-row-gap: 16px; + --layout-grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } #iconDiv { - background-color: var(--vvd-color-neutral-50); - cursor: pointer; - border-radius: 6px; - aspect-ratio: 1; - display: flex; - flex-direction: column; - align-items: center; - padding: 16px; + background-color: var(--vvd-color-neutral-50); + cursor: pointer; + border-radius: 6px; + aspect-ratio: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 16px; - &:hover{ - background-color: var(--vvd-color-neutral-100); - } + &:hover { + background-color: var(--vvd-color-neutral-100); + } } -#iconSpan{ - padding: 16px; +#iconSpan { + padding: 16px; } -#nameSpan{ - text-align: center; +#nameSpan { + text-align: center; } -.button-wrapper{ - text-align: center; - margin-block: 32px; +.button-wrapper { + text-align: center; + margin-block: 32px; } #copyAlert { - --alert-min-inline-size: auto; - pointer-events: none; + --alert-min-inline-size: auto; + pointer-events: none; } -article p{ - max-inline-size: 1200px; +article p { + max-inline-size: 1200px; } .tag-wrapper { - display: flex; - flex-wrap: wrap; - margin-block: 32px; - row-gap: 16px; + display: flex; + flex-wrap: wrap; + margin-block: 32px; + row-gap: 16px; } .tag-group { - margin-inline-end: 50px; + margin-inline-end: 50px; } diff --git a/apps/docs/assets/styles/iframe.css b/apps/docs/assets/styles/iframe.css index 721c1a77b7..4ca1d3f576 100644 --- a/apps/docs/assets/styles/iframe.css +++ b/apps/docs/assets/styles/iframe.css @@ -1,32 +1,45 @@ /* #region reset */ -h1, h2, h3, h4, h5, h6, p { - margin: unset; +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: unset; } strong { - font-weight: unset; + font-weight: unset; } /* #endregion reset */ body { - margin: 0; + margin: 0; } body::before { - position: fixed; - inset: 0; - content: ''; - background-color: inherit; - background-image: linear-gradient(45deg, var(--vvd-color-neutral-50) 25%,transparent 25%),linear-gradient(135deg, var(--vvd-color-neutral-50) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--vvd-color-neutral-50) 75%), linear-gradient(135deg, transparent 75%, var(--vvd-color-neutral-50) 75%); - background-size: 20px 20px; - background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px; - opacity: 0.5; - z-index: -1; + position: fixed; + inset: 0; + content: ''; + background-color: inherit; + background-image: linear-gradient( + 45deg, + var(--vvd-color-neutral-50) 25%, + transparent 25% + ), + linear-gradient(135deg, var(--vvd-color-neutral-50) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, var(--vvd-color-neutral-50) 75%), + linear-gradient(135deg, transparent 75%, var(--vvd-color-neutral-50) 75%); + background-size: 20px 20px; + background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px; + opacity: 0.5; + z-index: -1; } .center { - display: flex; - place-items: center; - place-content: center; - block-size: 100vh; + display: flex; + place-items: center; + place-content: center; + block-size: 100vh; } diff --git a/apps/docs/assets/styles/main.css b/apps/docs/assets/styles/main.css index 11ef009bb3..e83a50b6f1 100644 --- a/apps/docs/assets/styles/main.css +++ b/apps/docs/assets/styles/main.css @@ -7,17 +7,17 @@ h4, h5, h6, p { - margin: unset; + margin: unset; } code { - background-color: var(--vvd-color-neutral-50); - border-radius: 4px; - padding: 0px 6px; + background-color: var(--vvd-color-neutral-50); + border-radius: 4px; + padding: 0px 6px; } strong { - font-weight: unset; + font-weight: unset; } /* #endregion reset */ @@ -25,38 +25,38 @@ strong { /* #region document */ html { - scroll-padding-top: var(--vvd-header-block-size, 64px); + scroll-padding-top: var(--vvd-header-block-size, 64px); } body { - margin: 0; + margin: 0; } a { - color: var(--vvd-color-cta-600); + color: var(--vvd-color-cta-600); } a:hover { - color: var(--vvd-color-cta-700); + color: var(--vvd-color-cta-700); } a:visited { - color: var(--vvd-color-information-600); + color: var(--vvd-color-information-600); } a:visited:hover { - color: var(--vvd-color-information-700); + color: var(--vvd-color-information-700); } a:active { - color: var(--vvd-color-cta-800); + color: var(--vvd-color-cta-800); } a:active:visited { - color: var(--vvd-color-information-800); + color: var(--vvd-color-information-800); } img { - inline-size: auto; - max-inline-size: 100%; - block-size: auto; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; } /* #endregion document */ @@ -64,36 +64,38 @@ img { /* #region side drawer */ vwc-side-drawer:not(:defined) { - display: none; + display: none; } vwc-side-drawer[open] { - --header-inset-inline-start: var(--side-drawer-app-content-offset); + --header-inset-inline-start: var(--side-drawer-app-content-offset); } vwc-side-drawer:not([open]) { - --header-inset-inline-start: 0; + --header-inset-inline-start: 0; } vwc-side-drawer::part(base) { - inline-size: 280px; - inset-block-start: calc(var(--vvd-header-block-size) + env(safe-area-inset-top)); - inset-block-end: env(safe-area-inset-bottom); - background-color: var(--vvd-color-neutral-50); - box-sizing: border-box; + inline-size: 280px; + inset-block-start: calc( + var(--vvd-header-block-size) + env(safe-area-inset-top) + ); + inset-block-end: env(safe-area-inset-bottom); + background-color: var(--vvd-color-neutral-50); + box-sizing: border-box; } @supports (overscroll-behavior: none) { - vwc-side-drawer::part(base) { - overscroll-behavior: none; - } + vwc-side-drawer::part(base) { + overscroll-behavior: none; + } } vwc-side-drawer > main { - /* prevents banner from topping the stacking context in a modal side-drawer open state */ - z-index: 0; - position: relative; - margin-top: var(--vvd-header-block-size); + /* prevents banner from topping the stacking context in a modal side-drawer open state */ + z-index: 0; + position: relative; + margin-top: var(--vvd-header-block-size); } /* #endregion side drawer */ @@ -101,49 +103,49 @@ vwc-side-drawer > main { /* #region header */ vwc-header:not(:defined) { - display: none; + display: none; } vwc-header::part(base) { - position: fixed; - top: 0; - inline-size: 100%; - inset-inline: var(--header-inset-inline-start) 0; - z-index: 2; + position: fixed; + top: 0; + inline-size: 100%; + inset-inline: var(--header-inset-inline-start) 0; + z-index: 2; } vwc-header { - --header-bg-color: var(--vvd-color-neutral-800); + --header-bg-color: var(--vvd-color-neutral-800); } .header-content-wrapper { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .header-content-wrapper > * { - flex-shrink: 0; + flex-shrink: 0; } .menu-button { - margin-inline-end: 8px; + margin-inline-end: 8px; } .logo-wrapper { - display: flex; - align-items: center; - column-gap: 8px; - text-decoration: none; - font: var(--vvd-typography-base-extended-bold); + display: flex; + align-items: center; + column-gap: 8px; + text-decoration: none; + font: var(--vvd-typography-base-extended-bold); } .logo-wrapper .text { - color: var(--vvd-color-neutral-800); + color: var(--vvd-color-neutral-800); } vwc-nav-item > vwc-badge { - margin-inline-start: auto; + margin-inline-start: auto; } /* #endregion header */ @@ -157,116 +159,126 @@ article h5, article h6, article p, article ul { - max-inline-size: 80ch; + max-inline-size: 80ch; } .vvd-root p:empty { - margin: 0; + margin: 0; } article > pre, article > .cbd-container { - margin-block: 12px; - box-sizing: border-box; - max-inline-size: calc(100vw - 32px); + margin-block: 12px; + box-sizing: border-box; + max-inline-size: calc(100vw - 32px); } @media (min-width: 1200px) { - article > pre, - article > .cbd-container { - max-inline-size: 1000px; - } + article > pre, + article > .cbd-container { + max-inline-size: 1000px; + } } article.article > h1 { - display: flex; - flex-direction: column; - justify-content: start; - color: var(--vvd-color-neutral-800); - padding-block: 40px; - border-bottom: 1px solid var(--vvd-color-neutral-200); - text-align: left; - font-weight: 600; - max-inline-size: 1000px; - background-image: linear-gradient(to left,rgba(255,0,0,0), var(--vvd-color-cta-50), rgba(255,0,0,0)); + display: flex; + flex-direction: column; + justify-content: start; + color: var(--vvd-color-neutral-800); + padding-block: 40px; + border-bottom: 1px solid var(--vvd-color-neutral-200); + text-align: left; + font-weight: 600; + max-inline-size: 1000px; + background-image: linear-gradient( + to left, + rgba(255, 0, 0, 0), + var(--vvd-color-cta-50), + rgba(255, 0, 0, 0) + ); } @media (min-width: 960px) { - article.article > h1 { - margin-block-start: 0; - } + article.article > h1 { + margin-block-start: 0; + } } @media (max-width: 959px) { - article.article > h1 { - padding-inline: 16px; - border-radius: 8px; - } + article.article > h1 { + padding-inline: 16px; + border-radius: 8px; + } } .heading-wrapper { - position: relative; - padding-inline-start: 20px; - margin-inline-start: -20px; + position: relative; + padding-inline-start: 20px; + margin-inline-start: -20px; } .heading-wrapper > .anchor { - color: var(--vvd-color-neutral-600); - position: absolute; - inset: 50% auto auto 0; - transform: translateY(-50%); + color: var(--vvd-color-neutral-600); + position: absolute; + inset: 50% auto auto 0; + transform: translateY(-50%); } .heading-wrapper:not(:hover) > .anchor { - display: none; + display: none; } .heading-wrapper > h2 { - text-align: left; - background-image: linear-gradient(to left,rgba(255,0,0,0), var(--vvd-color-cta-50), rgba(255,0,0,0)); + text-align: left; + background-image: linear-gradient( + to left, + rgba(255, 0, 0, 0), + var(--vvd-color-cta-50), + rgba(255, 0, 0, 0) + ); } .article { - padding-inline: 16px; - word-break: break-word; + padding-inline: 16px; + word-break: break-word; } @media (min-width: 1200px) { - .article { - padding-inline: 124px; - max-inline-size: 1000px; - } + .article { + padding-inline: 124px; + max-inline-size: 1000px; + } } .banner { - position: sticky; - top: var(--vvd-header-block-size); - z-index: 1; + position: sticky; + top: var(--vvd-header-block-size); + z-index: 1; } /* #endregion article */ /* #region footer */ .footer { - padding-inline: 16px; - padding-block: 32px; - display: flex; - flex-direction: column; - gap: 16px; - max-inline-size: 1000px; + padding-inline: 16px; + padding-block: 32px; + display: flex; + flex-direction: column; + gap: 16px; + max-inline-size: 1000px; } @media (min-width: 1200px) { - .footer { - padding-inline: 124px; - } + .footer { + padding-inline: 124px; + } } .footer a { - display: inline-flex; - align-items: center; - gap: 8px; - align-self: flex-start; + display: inline-flex; + align-items: center; + gap: 8px; + align-self: flex-start; } /* #endregion footer */ @@ -274,55 +286,55 @@ article.article > h1 { /* #region code fence demo */ .cbd-iframe-container { - position: relative; + position: relative; } .cbd-demo { - overflow: hidden; - border: none; - width: 100%; - block-size: 30px; - border-radius: 6px 6px 0 0; + overflow: hidden; + border: none; + width: 100%; + block-size: 30px; + border-radius: 6px 6px 0 0; } .cbd-actions { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .cbd-locale-switcher { - margin: 8px; + margin: 8px; } .cbd-details > summary { - display: none; + display: none; } .cbd-code-block { - border-top: 1px solid var(--vvd-color-neutral-100); + border-top: 1px solid var(--vvd-color-neutral-100); } .cbd-code-block > pre { - margin: 0; - border-radius: 0; + margin: 0; + border-radius: 0; } .cbd-variables, .cbd-variables th, .cbd-variables td { - padding: 8px; + padding: 8px; } .cbd-variables__color { - display: flex; - gap: 8px; + display: flex; + gap: 8px; } .cbd-variables__color-square { - width: 1em; - height: 1em; - border: 1px solid var(--vvd-color-neutral-100); + width: 1em; + height: 1em; + border: 1px solid var(--vvd-color-neutral-100); } /* #endregion code fence demo */ @@ -330,30 +342,30 @@ article.article > h1 { /* #region highlight js */ .hljs { - background-color: var(--vvd-color-neutral-50); - color: var(--vvd-color-neutral-900); - padding: 8px; - border-radius: 6px; - font-size: 1rem; - overflow-x: auto; + background-color: var(--vvd-color-neutral-50); + color: var(--vvd-color-neutral-900); + padding: 8px; + border-radius: 6px; + font-size: 1rem; + overflow-x: auto; } .hljs.preview { - overflow-x: auto; + overflow-x: auto; } .hljs-string, .hljs-section, .hljs-selector-class, .hljs-template-variable, .hljs-deletion { - color: var(--vvd-color-alert-600); + color: var(--vvd-color-alert-600); } .hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag { - color: var(--vvd-color-success-600); + color: var(--vvd-color-success-600); } .hljs-attr, @@ -366,7 +378,7 @@ article.article > h1 { .hljs-selector-class, .hljs-selector-id, .hljs-variable { - color: var(--vvd-color-information-600); + color: var(--vvd-color-information-600); } .hljs-doctag, @@ -376,138 +388,167 @@ article.article > h1 { .hljs-template-variable, .hljs-type, .hljs-variable.language_ { - color: var(--vvd-color-alert-600); + color: var(--vvd-color-alert-600); } .hljs-code, .hljs-comment, .hljs-formula { - color: var(--vvd-color-neutral-600); + color: var(--vvd-color-neutral-600); } /* #endregion highlight js */ .hidden { - display: none; + display: none; } .components-filter { - padding-inline: 8px; - padding-block: 16px; - margin-block-start: 8px; - border-bottom: 1px solid var(--vvd-color-neutral-200); - border-top: 1px solid var(--vvd-color-neutral-200); - position: sticky; - top: 0; - background-color: var(--vvd-color-neutral-50); - z-index: 1; + padding-inline: 8px; + padding-block: 16px; + margin-block-start: 8px; + border-bottom: 1px solid var(--vvd-color-neutral-200); + border-top: 1px solid var(--vvd-color-neutral-200); + position: sticky; + top: 0; + background-color: var(--vvd-color-neutral-50); + z-index: 1; } .side-nav { - position: relative; + position: relative; +} + +.side-nav vwc-nav-disclosure { + --vvd-nav-disclosure-accent-faint: color-mix( + in srgb, + var(--vvd-color-canvas-text), + transparent 90% + ); +} +.side-nav vwc-nav-item { + --vvd-nav-item-accent-faint: color-mix( + in srgb, + var(--vvd-color-canvas-text), + transparent 90% + ); } /* #startregion table */ .table-wrapper { - filter: var(--vvd-shadow-surface-2dp); - background: var(--vvd-color-surface-2dp); - border-radius: 6px; - padding: 8px; - box-sizing: border-box; - display: inline-flex; + filter: var(--vvd-shadow-surface-2dp); + background: var(--vvd-color-surface-2dp); + border-radius: 6px; + padding: 8px; + box-sizing: border-box; + display: inline-flex; } @media (max-width: 768px) { - .table-wrapper { - overflow: auto; - max-width: calc(100vw - 32px); - } + .table-wrapper { + overflow: auto; + max-width: calc(100vw - 32px); + } } table { - padding: 8px; - margin: 8px; - border-radius: 6px; - border-collapse: collapse; + padding: 8px; + margin: 8px; + border-radius: 6px; + border-collapse: collapse; } thead > tr { - border-bottom: 1px solid var(--vvd-color-neutral-900); + border-bottom: 1px solid var(--vvd-color-neutral-900); } tbody > tr { - border-bottom: 1px solid var(--vvd-color-neutral-100); + border-bottom: 1px solid var(--vvd-color-neutral-100); } td, th { - max-inline-size: 80ch; - padding: 8px 16px; - word-break: normal; - text-align: left; + max-inline-size: 80ch; + padding: 8px 16px; + word-break: normal; + text-align: left; } /* #endregion table */ .welcome { - padding: 44px; - background-image: linear-gradient(to left,rgba(255,0,0,0), var(--vvd-color-neutral-100), rgba(255,0,0,0)); - display: flex; - gap: 32px; - align-items: center; - border-bottom: 1px solid var(--vvd-color-neutral-200); - max-inline-size: 1200px; + padding: 44px; + background-image: linear-gradient( + to left, + rgba(255, 0, 0, 0), + var(--vvd-color-neutral-100), + rgba(255, 0, 0, 0) + ); + display: flex; + gap: 32px; + align-items: center; + border-bottom: 1px solid var(--vvd-color-neutral-200); + max-inline-size: 1200px; } @media (min-width: 960px) { - .welcome { - margin-inline: -64px; - } + .welcome { + margin-inline: -64px; + } } @media (max-width: 960px) { - .welcome { - margin-inline: -32px; - } + .welcome { + margin-inline: 0; + padding-inline: 16px; + flex-direction: column; + } } @media (min-width: 1360px) { - .welcome { - flex-direction: row-reverse; - } + .welcome { + flex-direction: row-reverse; + } } .welcome__hero { - max-width: 600px; - display: flex; - gap: 32px; - flex-direction: column; + max-width: 600px; + display: flex; + gap: 32px; + flex-direction: column; } .welcome h1 { - margin-block-end: 16px !important; + margin-block-end: 16px !important; } .welcome__getting-started { - margin-block-start: 16px; - display: flex; - align-items: center; - column-gap: 16px; - flex-wrap: wrap; + margin-block-start: 16px; + display: flex; + align-items: center; + column-gap: 16px; + flex-wrap: wrap; } .welcome__buttons { - display: flex; - gap: 8px; + display: flex; + gap: 8px; +} + +@media (max-width: 420px) { + .welcome__buttons { + flex-direction: column-reverse; + inline-size: 100%; + } } .welcome-media { - inline-size: 100%; - block-size: auto; + inline-size: 100%; + block-size: auto; } a:focus-visible { - outline: 2px solid var(--vvd-color-canvas-text); - outline-offset: 1px; - border-radius: 2px; + outline: 2px solid var(--vvd-color-canvas-text); + outline-offset: 1px; + border-radius: 2px; } diff --git a/apps/docs/code-example-preview/createCodeExample.js b/apps/docs/code-example-preview/createCodeExample.js index b3043e06bd..07559d09a4 100644 --- a/apps/docs/code-example-preview/createCodeExample.js +++ b/apps/docs/code-example-preview/createCodeExample.js @@ -66,9 +66,15 @@ const renderiFrame = (
${localeSwitcher}
- - - + + + + + + + + +
@@ -78,9 +84,6 @@ const renderiFrame = (
- - - `; } diff --git a/apps/docs/pages/component-pages.njk b/apps/docs/pages/component-pages.njk index 13360426f1..bcc2d219c8 100644 --- a/apps/docs/pages/component-pages.njk +++ b/apps/docs/pages/component-pages.njk @@ -15,7 +15,7 @@ permalink: "components/{{ component | pageSlug }}/" {% block banner %} {% if (component.status == "alpha") %} - + {% endif %} {% if (component.status == "underlying") %} diff --git a/apps/docs/pages/roadmap.njk b/apps/docs/pages/roadmap.njk new file mode 100644 index 0000000000..76ef94bc74 --- /dev/null +++ b/apps/docs/pages/roadmap.njk @@ -0,0 +1,14 @@ +--- +tags: roadmaps +pagination: + data: roadmaps + size: 1 + alias: roadmap +permalink: "roadmaps/{{ roadmap | pageSlug }}/" +--- + +{% extends '../_layouts/base.njk' %} + +{% block content %} + {% renderFile roadmap.markdown, { components: components } %} +{% endblock %} diff --git a/apps/docs/rollup.config.js b/apps/docs/rollup.config.js index d88e640bb4..d7f6215e54 100644 --- a/apps/docs/rollup.config.js +++ b/apps/docs/rollup.config.js @@ -84,12 +84,14 @@ const DIRS = [ './dist/apps/docs/assets/scripts/', './dist/apps/docs/assets/scripts/', './dist/apps/docs/assets/scripts/', + './dist/apps/docs/assets/scripts/', './dist/apps/docs', ]; export default [ './apps/docs/assets/bundled-scripts/live-sample.js', './apps/docs/assets/bundled-scripts/cache-assets.js', './apps/docs/assets/bundled-scripts/icons-gallery.js', + './apps/docs/assets/bundled-scripts/turbolinks.js', 'vivid-components', './apps/docs/assets/bundled-scripts/sw.js', ].map((input, index) => { diff --git a/apps/nx-vivid-e2e/tsconfig.json b/apps/nx-vivid-e2e/tsconfig.json index b9c9d95376..efebd6f0b3 100644 --- a/apps/nx-vivid-e2e/tsconfig.json +++ b/apps/nx-vivid-e2e/tsconfig.json @@ -1,10 +1,10 @@ { - "extends": "../../tsconfig.base.json", - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.spec.json" - } - ] + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.spec.json" + } + ] } diff --git a/apps/nx-vivid-e2e/tsconfig.spec.json b/apps/nx-vivid-e2e/tsconfig.spec.json index 546f12877f..5454f842cd 100644 --- a/apps/nx-vivid-e2e/tsconfig.spec.json +++ b/apps/nx-vivid-e2e/tsconfig.spec.json @@ -1,9 +1,9 @@ { - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] } diff --git a/apps/vue-docs/.eslintrc.json b/apps/vue-docs/.eslintrc.json index fbcc917c22..77e5c9a41d 100644 --- a/apps/vue-docs/.eslintrc.json +++ b/apps/vue-docs/.eslintrc.json @@ -1,8 +1,5 @@ { - "extends": [ - "../../.eslintrc.json", - "plugin:vue/vue3-recommended" - ], + "extends": ["../../.eslintrc.json", "plugin:vue/vue3-recommended"], "parser": "vue-eslint-parser", "parserOptions": { "parser": "@typescript-eslint/parser" @@ -12,7 +9,7 @@ "typescript": {} } }, - "ignorePatterns": ["!**/*"], + "ignorePatterns": ["!**/*"], "overrides": [ { "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], @@ -35,19 +32,26 @@ "rules": { "vue/multi-word-component-names": 0, "vue/no-multiple-template-root": 0, - "vue/component-name-in-template-casing": ["error", "PascalCase" , { - "registeredComponentsOnly": false, - "ignores": [] - }], - "vue/html-self-closing": ["error", { - "html": { - "void": "always", - "normal": "always", - "component": "always" - }, - "svg": "always", - "math": "always" - }], + "vue/component-name-in-template-casing": [ + "error", + "PascalCase", + { + "registeredComponentsOnly": false, + "ignores": [] + } + ], + "vue/html-self-closing": [ + "error", + { + "html": { + "void": "always", + "normal": "always", + "component": "always" + }, + "svg": "always", + "math": "always" + } + ], "vue/no-deprecated-slot-attribute": "off", "vue/max-attributes-per-line": "off", "vue/singleline-html-element-content-newline": "off" diff --git a/apps/vue-docs/docs/.vitepress/theme/custom.css b/apps/vue-docs/docs/.vitepress/theme/custom.css index dafff305d7..01abc8e119 100644 --- a/apps/vue-docs/docs/.vitepress/theme/custom.css +++ b/apps/vue-docs/docs/.vitepress/theme/custom.css @@ -1,9 +1,7 @@ - - :root { - --vp-c-brand: #9941ff; - --vp-c-brand-light: #b27bf2; - --vp-c-brand-lighter: #cba1fa; - --vp-c-brand-dark: #871eff; - --vp-c-brand-darker: #6405d1; -} \ No newline at end of file + --vp-c-brand: #9941ff; + --vp-c-brand-light: #b27bf2; + --vp-c-brand-lighter: #cba1fa; + --vp-c-brand-dark: #871eff; + --vp-c-brand-darker: #6405d1; +} diff --git a/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue b/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue index 6e41a9db14..2f1851b9ff 100644 --- a/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue +++ b/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue @@ -1,7 +1,5 @@ diff --git a/apps/vue-docs/docs/examples/components/range-slider/RangeSliderExample.vue b/apps/vue-docs/docs/examples/components/range-slider/RangeSliderExample.vue new file mode 100644 index 0000000000..c0432a48a2 --- /dev/null +++ b/apps/vue-docs/docs/examples/components/range-slider/RangeSliderExample.vue @@ -0,0 +1,19 @@ + + + diff --git a/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue b/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue index 32d8f1d002..9304de9e7f 100644 --- a/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue +++ b/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue @@ -1,5 +1,10 @@