diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..17bf4c2 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,12 @@ +## Pull Requests + +Looks like you want to help out on vue-select.. awesome! Here's a few things to keep in mind when contributing. + +- Vue Select uses semantic release to automate the release process. This means that good commit + messages are critical. If you're unfamiliar with [conventional changelog](https://github.com/ajoslin/conventional-changelog) you can run `yarn commit` to generate a commit message. +- It's almost always better to ask before you jump into a PR if you want to add new functionality +. It's not fun for anyone when you spend time on something that doesn't end up in the component. +- If your PR fixes or references an open issue, be sure to reference it in your message. +- If you're adding new functionality, make sure your code has good test coverage. + +:tada: Thanks for contributing, and an even bigger thanks for reading these guidelines! diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..b7a1ebc --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,28 @@ +name: Release +on: + push: + branches: + - master +jobs: + release: + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 12 + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Test with Coverage + run: yarn test + + - name: Build + run: yarn build + + - name: Release + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + run: npx semantic-release diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..874868b --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,38 @@ +name: Test & Build +on: [pull_request] +jobs: + test: + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 12 + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Test with Coverage + run: yarn test --coverage --coverageReporters=lcov + + - name: Report Coverage + uses: coverallsapp/github-action@master + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + + build: + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v1 + - uses: actions/setup-node@v1 + with: + node-version: 12 + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build + run: yarn build + + - name: Bundlewatch + run: npx bundlewatch diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 690e9ff..0000000 --- a/.travis.yml +++ /dev/null @@ -1,9 +0,0 @@ -language: node_js -cache: yarn - -node_js: - - "8" - -script: - - yarn test --coverage --coverageReporters=text-lcov | coveralls - - yarn build && bundlewatch --max-size 20kb ./dist/!(*.map) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index e705d1f..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,10 +0,0 @@ -## Pull Requests - -Looks like you want to help out on vue-select.. awesome! Here's a few things to keep in mind when contributing. - -1. If your PR contains multiple commits, try to keep those commits succinct, with descriptive messages. This makes it easier to understand your thought process. -2. **Don't run the build** before submitting. The build is only run and committed immediately before a new release. -3. If your PR fixes or references an open issue, be sure to reference it in your message. -4. If you're adding new functionality, make sure your code has good test coverage. - -:tada: Thanks for contributing, and an even bigger thanks for reading these guidelines! diff --git a/docs/.vuepress/components/BetterNoOptions.vue b/docs/.vuepress/components/BetterNoOptions.vue new file mode 100644 index 0000000..e1d429b --- /dev/null +++ b/docs/.vuepress/components/BetterNoOptions.vue @@ -0,0 +1,16 @@ + + + diff --git a/docs/api/props.md b/docs/api/props.md index 2ae8284..e54126f 100644 --- a/docs/api/props.md +++ b/docs/api/props.md @@ -120,6 +120,19 @@ clearSearchOnSelect: { }, ``` +## clearSearchOnBlur + +Enables/disables clearing the search text when the search input is blurred. + +```js +clearSearchOnBlur: { + type: Function, + default: function ({ clearSearchOnSelect, multiple }) { + return clearSearchOnSelect && !multiple + } +}, +``` + ## closeOnSelect Close a dropdown when an option is chosen. Set to false to keep the dropdown diff --git a/docs/api/slots.md b/docs/api/slots.md index 1f3a94f..68e74a2 100644 --- a/docs/api/slots.md +++ b/docs/api/slots.md @@ -7,13 +7,16 @@ Slots can be used to change the look and feel of the UI, or to simply swap out t ### `selected-option` -#### Scope: +#### Scope: - `option {Object}` - A selected option ```html - - {{ getOptionLabel(option) }} + + {{ getOptionLabel(option) }} ``` @@ -27,16 +30,32 @@ Slots can be used to change the look and feel of the UI, or to simply swap out t - `multiple {Boolean}` - If the component supports the selection of multiple values ```html - - - - {{ getOptionLabel(option) }} - - - + + + + {{ getOptionLabel(option) }} + + + ``` @@ -44,9 +63,29 @@ Slots can be used to change the look and feel of the UI, or to simply swap out t ### `spinner` +#### Scope: + +- `loading {Boolean}` - if the component is in a loading state + ```html - - + + + +``` + +### `open-indicator` + +```js +attributes : { + 'ref': 'openIndicator', + 'role': 'presentation', + 'class': 'vs__open-indicator', +} +``` + +```vue + + ``` @@ -54,12 +93,26 @@ Slots can be used to change the look and feel of the UI, or to simply swap out t ### `option` -#### Scope: - - `option {Object}` - The currently iterated option from `filteredOptions` ```html - - {{ getOptionLabel(option) }} + + {{ getOptionLabel(option) }} + +``` + +### `no-options` + +The no options slot is displayed in the dropdown when `filteredOptions.length === 0`. + +- `search {String}` - the current search text +- `searching {Boolean}` - if the component has search text + +```vue + + Sorry, no matching options. ``` diff --git a/docs/guide/slots.md b/docs/guide/slots.md index 7bfe9b1..62d7392 100644 --- a/docs/guide/slots.md +++ b/docs/guide/slots.md @@ -1,22 +1,32 @@ ::: tip 🚧 This section of the guide is a work in progress! Check back soon for an update. -Vue Select currently offers quite a few scoped slots, and you can check out the +Vue Select currently offers quite a few scoped slots, and you can check out the [API Docs for Slots](../api/slots.md) in the meantime while a good guide is put together. ::: -#### Scoped Slot `option` +### Scoped Slot `option` vue-select provides the scoped `option` slot in order to create custom dropdown templates. ```html - - -``` + + +``` Using the `option` slot with props `"option"` provides the current option variable to the template. + +### Improving the default `no-options` text + +The `no-options` slot is displayed in the dropdown when `filteredOptions === 0`. By default, it +displays _Sorry, no matching options_. You can add more contextual information by using the slot +in your own apps. + + + +<<< @/.vuepress/components/BetterNoOptions.vue diff --git a/package.json b/package.json index 3ee8cfb..75f34f3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-select", - "version": "3.4.0", + "version": "3.6.0", "description": "Everything you wish the HTML