├── .browserslistrc ├── .circleci └── config.yml ├── .editorconfig ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENCE ├── README.md ├── babel.config.js ├── dist ├── demo.html ├── vue-tour.common.js ├── vue-tour.common.js.map ├── vue-tour.css ├── vue-tour.umd.js ├── vue-tour.umd.js.map ├── vue-tour.umd.min.js └── vue-tour.umd.min.js.map ├── jest.config.js ├── package-lock.json ├── package.json ├── public ├── assets │ └── logo.png ├── css │ └── app.css ├── favicon.ico └── index.html ├── screenshot.gif ├── src ├── components │ ├── VStep.vue │ └── VTour.vue ├── main.js └── shared │ └── constants.js ├── tests └── unit │ ├── VStep.spec.js │ └── VTour.spec.js └── types ├── index.d.ts └── vue.d.ts /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | 7 | defaults: &defaults 8 | docker: 9 | - image: circleci/node:10.16.3 10 | working_directory: ~/vue-tour 11 | 12 | jobs: 13 | build: 14 | <<: *defaults 15 | steps: 16 | - checkout 17 | 18 | # install Cypress dependencies 19 | - run: sudo apt-get update && sudo apt-get install -y libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 xvfb 20 | 21 | # Download and cache dependencies 22 | - restore_cache: 23 | keys: 24 | - v1-dependencies-{{ checksum "package.json" }} 25 | # fallback to using the latest cache if no exact match is found 26 | - v1-dependencies- 27 | 28 | - run: npm ci 29 | 30 | - save_cache: 31 | paths: 32 | - node_modules 33 | key: v1-dependencies-{{ checksum "package.json" }} 34 | 35 | # run unit tests! 36 | - run: npm run test:unit 37 | - run: npm run build 38 | 39 | - run: git worktree add ../vue-tour-landing origin/landing 40 | 41 | # Download and cache dependencies 42 | # - restore_cache: 43 | # keys: 44 | # - v1-dependencies-{{ checksum "../vue-tour-landing/package.json" }} 45 | # # fallback to using the latest cache if no exact match is found 46 | # - v1-dependencies- 47 | 48 | - run: 49 | command: npm ci 50 | working_directory: ~/vue-tour-landing 51 | 52 | # - save_cache: 53 | # paths: 54 | # - ../vue-tour-landing/node_modules 55 | # - /home/circleci/.cache/Cypress 56 | # key: v1-dependencies-{{ checksum "../vue-tour-landing/package.json" }} 57 | 58 | # run e2e tests! 59 | - run: 60 | command: npm run test:e2e -- --headless 61 | working_directory: ~/vue-tour-landing 62 | 63 | - persist_to_workspace: 64 | root: ~/ 65 | paths: 66 | - vue-tour 67 | - vue-tour-landing 68 | 69 | publish: 70 | <<: *defaults 71 | steps: 72 | - attach_workspace: 73 | at: ~/ 74 | 75 | - add_ssh_keys: 76 | fingerprints: 77 | - "eb:09:ae:75:b5:8e:66:63:27:9a:c0:cb:64:6e:79:d5" 78 | 79 | # generate a new landing build and commit it to the gh-pages branch 80 | - run: 81 | command: npm run build 82 | working_directory: ~/vue-tour-landing 83 | 84 | - run: 85 | command: cp -R ./dist ../ 86 | working_directory: ~/vue-tour-landing 87 | 88 | - run: 89 | command: | 90 | ssh-keyscan github.com >> ~/.ssh/known_hosts 91 | git checkout --track origin/gh-pages 92 | rm -rf * 93 | cp -R ../dist/. ./ 94 | git config user.email "mathieumorainville@hotmail.com" 95 | git config user.name "Mathieu Morainville" 96 | git status 97 | git add . 98 | git commit -m "chore(ci): generate a new build" 99 | git push origin gh-pages 100 | working_directory: ~/vue-tour-landing 101 | 102 | # we could use standard-version here to generating a changelog, bump the version with a tag and commit it 103 | 104 | - run: 105 | name: Authenticate with registry 106 | command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc 107 | when: always 108 | 109 | - run: 110 | name: Publish package 111 | command: cat .npmrc 112 | # command: npm publish 113 | 114 | # use workflows to publish only on tagged commits (see: https://circleci.com/blog/publishing-npm-packages-using-circleci-2-0/) 115 | workflows: 116 | version: 2 117 | build-publish: 118 | jobs: 119 | - build: 120 | filters: 121 | branches: 122 | only: 123 | - master 124 | - staging 125 | - publish: 126 | requires: 127 | - build 128 | filters: 129 | tags: 130 | only: /^v.*/ 131 | branches: 132 | only: 133 | - master 134 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | }, 17 | overrides: [ 18 | { 19 | files: [ 20 | '**/__tests__/*.{j,t}s?(x)', 21 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 22 | ], 23 | env: { 24 | jest: true 25 | } 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Additional context** 32 | Add any other context about the problem here. 33 | 34 | You can also use this CodePen as a starter point to reproduce your issue: https://codepen.io/Eligius/pen/wvMXrVY. 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | yarn.lock 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | 23 | .npmrc 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | # [2.0.0](https://github.com/pulsardev/vue-tour/compare/v1.6.0...v2.0.0) (2021-03-28) 6 | 7 | 8 | ### Bug Fixes 9 | 10 | * change offset and shadow ([6359b43](https://github.com/pulsardev/vue-tour/commit/6359b43)) 11 | * fix the arrow position ([4a2297b](https://github.com/pulsardev/vue-tour/commit/4a2297b)) 12 | 13 | 14 | ### Features 15 | 16 | * update Popper.js to v2.x ([5d8f790](https://github.com/pulsardev/vue-tour/pull/177/commits/5d8f790)) 17 | 18 | 19 | ### BREAKING CHANGES 20 | 21 | * **Popper.js:** as Popper.js has been updated, all custom Popper.js options passed in step params must be changed to their Popper.js v2.x equivalent. 22 | * **options:** all custom options are now in camelCase. If you customized highlight classes, you should change the options' keys to camelCase. See ([9041d2f](https://github.com/pulsardev/vue-tour/commit/9041d2f)) for the complete change. 23 | 24 | ## [1.6.0](https://github.com/pulsardev/vue-tour/compare/v1.5.0...v1.6.0) (2021-03-27) 25 | 26 | 27 | ### Bug Fixes 28 | 29 | * move the keyup listener before the return ([f42f637](https://github.com/pulsardev/vue-tour/commit/f42f637)) 30 | 31 | 32 | ### Features 33 | 34 | * add sticky step ([1777d08](https://github.com/pulsardev/vue-tour/commit/1777d08)) 35 | 36 | ## [1.5.0](https://github.com/pulsardev/vue-tour/compare/v1.4.0...v1.5.0) (2020-07-10) 37 | 38 | 39 | ### Features 40 | 41 | * **before:** adds support for rejecting promises from the before method along with supporting unit tests ([bfee650](https://github.com/pulsardev/vue-tour/commit/bfee65028af3bb7af38257af2196272d00237df1)) 42 | * **tour:** added promises for start, next, and prev so that users of the component may do async operations to get the UI in a good state ([3af3496](https://github.com/pulsardev/vue-tour/commit/3af3496c8c32ebc27461df62ada62b0263670db3)) 43 | 44 | ## [1.4.0](https://github.com/pulsardev/vue-tour/compare/v1.3.1...v1.4.0) (2020-05-30) 45 | 46 | 47 | ### Features 48 | 49 | * enable specific navigation keys ([89ff650](https://github.com/pulsardev/vue-tour/commit/89ff650ffbde5c4a87614bcb31f774231f336a2e)) 50 | 51 | ### [1.3.1](https://github.com/pulsardev/vue-tour/compare/v1.3.0...v1.3.1) (2020-05-08) 52 | 53 | 54 | ### Features 55 | 56 | * provide types for typescript ([eee7fef](https://github.com/pulsardev/vue-tour/commit/eee7fef6d7ae549b28a7b640bafdda621814f147)) 57 | 58 | ## [1.3.0](https://github.com/pulsardev/vue-tour/compare/v1.2.0...v1.3.0) (2020-02-06) 59 | 60 | 61 | ### Features 62 | 63 | * add example step title and link to placement options ([4cd8ccc](https://github.com/pulsardev/vue-tour/commit/4cd8ccc0794f739cee2ef3d8141ad291ee92faa2)) 64 | * add options.debug flag for console output ([effbd1d](https://github.com/pulsardev/vue-tour/commit/effbd1dd18708a610670765bdad2416af9e18d7d)), closes [#101](https://github.com/pulsardev/vue-tour/issues/101) 65 | * **buttons:** support global and per step button configuration ([86fd9b8](https://github.com/pulsardev/vue-tour/commit/86fd9b813fa6416f2c99b45a3f781384361eb162)) 66 | * add BEM compliant class names to step buttons ([34b9625](https://github.com/pulsardev/vue-tour/commit/34b96254c501ac0f243d243fd837b4e9eadb261a)) 67 | * add highlight ([e6a2a2d](https://github.com/pulsardev/vue-tour/commit/e6a2a2d4da7d146340e22e750efb811a214b8d33)) 68 | * **highlight:** add the possibility to highlight elements during the tour ([f828b12](https://github.com/pulsardev/vue-tour/commit/f828b1210257aaf6a39b0151022701c0b1332cac)) 69 | * add enabledButtons new props (all true by default) which can ([1354557](https://github.com/pulsardev/vue-tour/commit/13545575e78327e40e20af9fab7fc9889e8061c6)) 70 | 71 | 72 | ### Bug Fixes 73 | 74 | * pass a copy of the enabledButtons configuration object ([9fb0ec9](https://github.com/pulsardev/vue-tour/commit/9fb0ec92f1176905edf7cca36f18eda0894ffb70)) 75 | 76 | ## [1.2.0](https://github.com/pulsardev/vue-tour/compare/v1.1.0...v1.2.0) (2019-12-29) 77 | 78 | 79 | ### Features 80 | 81 | * **highlight:** add the possibility to highlight elements during the tour ([317ff35](https://github.com/pulsardev/vue-tour/commit/317ff359ff2be18a2f8d8ffe3a3c5be93e458175)) 82 | * add highlight ([5363d42](https://github.com/pulsardev/vue-tour/commit/5363d42fc6c1b7eca23b8c6e4c33d3108184924f)) 83 | 84 | 85 | # [1.1.0](https://github.com/pulsardev/vue-tour/compare/v1.0.1...v1.1.0) (2018-10-16) 86 | 87 | 88 | ### Bug Fixes 89 | 90 | * bump the circleci node version to allow the tests to run ([aeeb2f3](https://github.com/pulsardev/vue-tour/commit/aeeb2f3)) 91 | * Changed [@click](https://github.com/click) on Steps to [@click](https://github.com/click).prevent ([d2b7a11](https://github.com/pulsardev/vue-tour/commit/d2b7a11)) 92 | * destructuration doesn't work, the parameter(s) has to be passed directly ([bccf4ee](https://github.com/pulsardev/vue-tour/commit/bccf4ee)) 93 | * resolve vulnerabilities reported by npm ([38cb274](https://github.com/pulsardev/vue-tour/commit/38cb274)) 94 | 95 | 96 | ### Features 97 | 98 | * add a new step to show off the target handling in corners ([16fd73f](https://github.com/pulsardev/vue-tour/commit/16fd73f)) 99 | * add optional starting step to VTour ([13d6996](https://github.com/pulsardev/vue-tour/commit/13d6996)) 100 | * add options to change navigation buttons text ([f1a4302](https://github.com/pulsardev/vue-tour/commit/f1a4302)) 101 | * use jump.js for more options per step ([64eb8d1](https://github.com/pulsardev/vue-tour/commit/64eb8d1)) 102 | * **scroll:** use jump.js to scroll only when scroll options are defined ([97667bd](https://github.com/pulsardev/vue-tour/commit/97667bd)) 103 | * **steps:** add the possibility to change the text of the buttons through the tour options ([2ead09e](https://github.com/pulsardev/vue-tour/commit/2ead09e)) 104 | 105 | 106 | 107 | 108 | ## [1.0.1](https://github.com/pulsardev/vue-tour/compare/v1.0.0...v1.0.1) (2018-03-16) 109 | 110 | 111 | ### Bug Fixes 112 | 113 | * bump the vue-tour version in the demo ([1c7a9eb](https://github.com/pulsardev/vue-tour/commit/1c7a9eb)) 114 | 115 | 116 | 117 | 118 | # [1.0.0](https://github.com/pulsardev/vue-tour/compare/v1.0.0-beta.0...v1.0.0) (2018-03-16) 119 | 120 | 121 | ### Bug Fixes 122 | 123 | * add default props to prevent error when the property is not passed ([3405237](https://github.com/pulsardev/vue-tour/commit/3405237)) 124 | * prevent the tour of starting again when using arrow keys ([d7e8d42](https://github.com/pulsardev/vue-tour/commit/d7e8d42)) 125 | * remove the side-effects by removing only our event listener ([3b9e389](https://github.com/pulsardev/vue-tour/commit/3b9e389)) 126 | 127 | 128 | ### Features 129 | 130 | * add a GitHub button on the demo and scroll back to the top ([94adbdd](https://github.com/pulsardev/vue-tour/commit/94adbdd)) 131 | * add a header slot in VStep ([8cd3883](https://github.com/pulsardev/vue-tour/commit/8cd3883)) 132 | * add custom callback management ([83481b1](https://github.com/pulsardev/vue-tour/commit/83481b1)) 133 | * add support for Popper's parameters ([4328c37](https://github.com/pulsardev/vue-tour/commit/4328c37)) 134 | * handle keyboard events + support a config prop + min and max props ([bba1ed6](https://github.com/pulsardev/vue-tour/commit/bba1ed6)) 135 | * initial constant file ([623e962](https://github.com/pulsardev/vue-tour/commit/623e962)) 136 | * prevent dismissing the tour using the keyboard ([bd73513](https://github.com/pulsardev/vue-tour/commit/bd73513)) 137 | * prevent dismissing the tour when using previousStep on the first step ([fa93aac](https://github.com/pulsardev/vue-tour/commit/fa93aac)) 138 | * use isFinished in previous/nextStep + reset isFinished when starting the tour ([b70c371](https://github.com/pulsardev/vue-tour/commit/b70c371)) 139 | 140 | 141 | 142 | 143 | # 1.0.0-beta.0 (2018-02-22) 144 | 145 | 146 | ### Bug Fixes 147 | 148 | * attempt to fix the demo ([da58bfc](https://github.com/pulsardev/vue-tour/commit/da58bfc)) 149 | * change the CircleCI configuration ([fd0f90e](https://github.com/pulsardev/vue-tour/commit/fd0f90e)) 150 | * change the PayPal link ([07658ce](https://github.com/pulsardev/vue-tour/commit/07658ce)) 151 | * fix tests and improve error handling ([a53b281](https://github.com/pulsardev/vue-tour/commit/a53b281)) 152 | * make the project build ([e0d3df4](https://github.com/pulsardev/vue-tour/commit/e0d3df4)) 153 | * prepare the build for a deployment on GitHub Pages ([e20cb1d](https://github.com/pulsardev/vue-tour/commit/e20cb1d)) 154 | * **ci:** change the environment for Cypress ([ef5a537](https://github.com/pulsardev/vue-tour/commit/ef5a537)) 155 | * **ci:** install dependencies as root ([e8c8e67](https://github.com/pulsardev/vue-tour/commit/e8c8e67)) 156 | * **ci:** revert the environment and install Cypress' dependencies ([80832c9](https://github.com/pulsardev/vue-tour/commit/80832c9)) 157 | * **ci:** run the webserver and start the e2e tests manually ([5ea7219](https://github.com/pulsardev/vue-tour/commit/5ea7219)) 158 | 159 | 160 | ### Features 161 | 162 | * add a minimal demo file to quickly test the build ([225a2e0](https://github.com/pulsardev/vue-tour/commit/225a2e0)) 163 | * change the build command to package the code as a library ([d875f43](https://github.com/pulsardev/vue-tour/commit/d875f43)) 164 | * change the text of the landing and the default style of steps ([48fb1b9](https://github.com/pulsardev/vue-tour/commit/48fb1b9)) 165 | * improve the layout of the demo ([0489c20](https://github.com/pulsardev/vue-tour/commit/0489c20)) 166 | * install the plugin automatically if Vue has been added to the global scope ([4f469c6](https://github.com/pulsardev/vue-tour/commit/4f469c6)) 167 | * minor variable declaration improvement ([262374f](https://github.com/pulsardev/vue-tour/commit/262374f)) 168 | * **ci:** copy and move folders to be ready for deployment ([ea8b089](https://github.com/pulsardev/vue-tour/commit/ea8b089)) 169 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Table of Contents 4 | 5 | - [Developing Vue Tour](#developing-vue-tour) 6 | - [Generating a Changelog](#generating-a-changelog) 7 | - [Git Commit Guidelines](#git-commit-guidelines) 8 | 9 | ## Developing Vue Tour 10 | 11 | Vue Tour is a library which means that in order to be tested it has to be used in a project. 12 | For this you have two options: 13 | - Use `public/index.html` but then you're limited to a built version 14 | - Use the `landing` branch as a git worktree: 15 | ``` 16 | git worktree add ../vue-tour-landing landing 17 | ``` 18 | 19 | ### Pull Requests 20 | 21 | All pull request must target `staging`. 22 | 23 | 24 | ### Merging PRs 25 | 26 | If a PR has a lot of conflicts and you want to make sure it's working or you want to cherry-pick some commits, you can checkout the PR branch locally: 27 | ``` 28 | git fetch origin pull/:ID/head:pr/:ID 29 | ``` 30 | Where `:ID` is the ID of the PR. The previous command will create a new branch `pr/:ID` containing the changes and commits of the PR. 31 | 32 | ### New release 33 | 34 | Go on `staging` branch. 35 | 36 | ``` 37 | git checkout staging 38 | ``` 39 | 40 | Check result of Standard Version. 41 | 42 | ``` 43 | standard-version --dry-run 44 | ``` 45 | 46 | For a better control of the version number, use `--release-as`. corresponds to semver levels: major, minor or patch. 47 | 48 | ``` 49 | standard-version --release-as --dry-run 50 | ``` 51 | 52 | If result is ok, run command without `--dry-run` flag. 53 | 54 | ``` 55 | standard-version --release-as 56 | ``` 57 | 58 | Push version on `staging`. 59 | 60 | ``` 61 | git push --follow-tags origin staging 62 | ``` 63 | 64 | Do a Pull Request from `staging` to `master`. 65 | 66 | Once merged, publish on NPM from `master`. 67 | 68 | ``` 69 | git checkout master 70 | npm publish 71 | ``` 72 | 73 | ## Generating a Changelog 74 | 75 | By using "standard" guidelines we are able to automatically generate a changelog from our git commit messages. 76 | The tool used to do that is [standard-version](https://github.com/conventional-changelog/standard-version). 77 | 78 | Here is an excerpt from their documentation. 79 | 80 | ### First Release 81 | 82 | To generate your changelog for your first release, simply do: 83 | 84 | ```sh 85 | # npm run script 86 | npm run release -- --first-release 87 | # or global bin 88 | standard-version --first-release 89 | ``` 90 | 91 | This will tag a release **without bumping the version in package.json (_et al._)**. 92 | 93 | When ready, push the git tag and `npm publish` your first release. \o/ 94 | 95 | ### Release as a pre-release 96 | 97 | Use the flag `--prerelease` to generate pre-releases: 98 | 99 | Suppose the last version of your code is `1.0.0`, and your code to be committed has patched changes. Run: 100 | 101 | ```bash 102 | # npm run script 103 | npm run release -- --prerelease 104 | ``` 105 | you will get version `1.0.1-0`. 106 | 107 | If you want to name the pre-release, you specify the name via `--prerelease `. 108 | 109 | For example, suppose your pre-release should contain the `alpha` prefix: 110 | 111 | ```bash 112 | # npm run script 113 | npm run release -- --prerelease alpha 114 | ``` 115 | 116 | this will tag the version `1.0.1-alpha.0` 117 | 118 | ### Release as a target type imperatively like `npm version` 119 | 120 | To forgo the automated version bump use `--release-as` with the argument `major`, `minor` or `patch`: 121 | 122 | Suppose the last version of your code is `1.0.0`, you've only landed `fix:` commits, but 123 | you would like your next release to be a `minor`. Simply do: 124 | 125 | ```bash 126 | # npm run script 127 | npm run release -- --release-as minor 128 | # Or 129 | npm run release -- --release-as 1.1.0 130 | ``` 131 | 132 | you will get version `1.1.0` rather than the auto generated version `1.0.1`. 133 | 134 | > **NOTE:** you can combine `--release-as` and `--prerelease` to generate a release. This is useful when publishing experimental feature(s). 135 | 136 | ## Git Commit Guidelines 137 | 138 | We use the Git Commit Guidelines that Google uses for AngularJS to format our git commit messages. Here is an excerpt of those guidelines. 139 | 140 | We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. 141 | 142 | ### Commit Message Format 143 | Each commit message consists of a **header**, a **body** and a **footer**. The header has a special 144 | format that includes a **type**, a **scope** and a **subject**: 145 | 146 | ``` 147 | (): 148 | 149 | 150 | 151 |