mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +02:00
Rebase to master
This commit is contained in:
Josua Vogel
commit
bd77f3a90f
|
|
@ -3,6 +3,7 @@
|
|||
"plugins": ["@typescript-eslint", "prettier", "sort-class-members"],
|
||||
"extends": [
|
||||
"airbnb-base",
|
||||
"airbnb-typescript",
|
||||
"plugin:prettier/recommended",
|
||||
"plugin:compat/recommended",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
|
|
@ -61,7 +62,8 @@
|
|||
}
|
||||
],
|
||||
"lines-between-class-members": "off",
|
||||
"@typescript-eslint/no-namespace": "off"
|
||||
"@typescript-eslint/no-namespace": "off",
|
||||
"react/jsx-filename-extension": [0]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
|
|
@ -75,7 +77,16 @@
|
|||
"no-new": "off",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off"
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-unused-expressions": "off",
|
||||
"@typescript-eslint/naming-convention": [
|
||||
"error",
|
||||
{
|
||||
"selector": "default",
|
||||
"format": ["camelCase", "PascalCase", "UPPER_CASE"],
|
||||
"leadingUnderscore": "allow"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
|
|
@ -22,5 +22,7 @@
|
|||
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
|
||||
|
||||
- [ ] My code follows the code style of this project.
|
||||
- [ ] I have added new tests for the bug I fixed/the new feature I added.
|
||||
- [ ] I have modified existing tests for the bug I fixed/the new feature I added.
|
||||
- [ ] My change requires a change to the documentation.
|
||||
- [ ] I have updated the documentation accordingly.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 24 KiB |
BIN
.github/actions-scripts/__snapshots__/edge-win32.png
vendored
Normal file
BIN
.github/actions-scripts/__snapshots__/edge-win32.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 279 KiB |
12
.github/actions-scripts/puppeteer.js
vendored
12
.github/actions-scripts/puppeteer.js
vendored
|
|
@ -11,8 +11,11 @@ const server = require('../../server');
|
|||
async function test() {
|
||||
const browser = await puppeteer.launch();
|
||||
const page = await browser.newPage();
|
||||
const artifactsPath = 'screenshot';
|
||||
const snapshotName = `puppeteer-${process.platform}.png`;
|
||||
let error;
|
||||
let pixelDifference;
|
||||
let diff;
|
||||
|
||||
if (!server.listening) await once(server, 'listening');
|
||||
|
||||
|
|
@ -28,12 +31,11 @@ async function test() {
|
|||
waitUntil: 'networkidle2',
|
||||
});
|
||||
await page.setViewport({ width: 640, height: 1000 });
|
||||
await page.waitForTimeout(500); // Wait for resize to complete
|
||||
await page.click('label[for="choices-single-custom-templates"]');
|
||||
await page.keyboard.press('ArrowDown');
|
||||
await page.keyboard.press('ArrowDown');
|
||||
|
||||
const snapshotName = `puppeteer-${process.platform}.png`;
|
||||
const artifactsPath = 'screenshot';
|
||||
mkdirSync(artifactsPath, { recursive: true });
|
||||
const imageBuffer = await page.screenshot({
|
||||
path: path.join(artifactsPath, snapshotName),
|
||||
|
|
@ -46,7 +48,7 @@ async function test() {
|
|||
readFileSync(path.resolve(__dirname, `./__snapshots__/${snapshotName}`)),
|
||||
);
|
||||
const { width, height } = screenshot;
|
||||
const diff = new PNG({ width, height });
|
||||
diff = new PNG({ width, height });
|
||||
pixelDifference = pixelmatch(
|
||||
screenshot.data,
|
||||
snapshot.data,
|
||||
|
|
@ -57,11 +59,13 @@ async function test() {
|
|||
threshold: 0.6,
|
||||
},
|
||||
);
|
||||
writeFileSync(path.join(artifactsPath, 'diff.png'), PNG.sync.write(diff));
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
error = err;
|
||||
} finally {
|
||||
if (diff) {
|
||||
writeFileSync(path.join(artifactsPath, 'diff-' + snapshotName), PNG.sync.write(diff));
|
||||
}
|
||||
await Promise.all([
|
||||
browser.close(),
|
||||
new Promise(resolve => server.close(resolve)),
|
||||
|
|
|
|||
30
.github/workflows/browsers.yml
vendored
30
.github/workflows/browsers.yml
vendored
|
|
@ -18,14 +18,12 @@ jobs:
|
|||
fail-fast: false
|
||||
matrix:
|
||||
os: [windows-latest, macos-latest]
|
||||
browser: [ie, firefox, safari]
|
||||
browser: [edge, firefox, safari, chrome]
|
||||
exclude:
|
||||
# On Windows, run tests with only IE and Edge
|
||||
- os: windows-latest
|
||||
browser: safari
|
||||
# On macOS, run tests with only on safari
|
||||
- os: macos-latest
|
||||
browser: ie
|
||||
browser: edge
|
||||
- os: macos-latest
|
||||
browser: chrome
|
||||
# Safari workaround is not working in Catalina
|
||||
|
|
@ -38,15 +36,15 @@ jobs:
|
|||
GITHUB_CONTEXT: ${{ toJson(github) }}
|
||||
run: echo "$GITHUB_CONTEXT"
|
||||
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '12.x'
|
||||
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v1
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm
|
||||
key: ${{ runner.OS }}-build-${{ matrix.browser }}
|
||||
|
|
@ -75,17 +73,17 @@ jobs:
|
|||
if: matrix.browser == 'safari'
|
||||
|
||||
- run: |
|
||||
brew cask install firefox
|
||||
brew install --cask firefox
|
||||
brew install geckodriver
|
||||
if: matrix.browser == 'firefox' && matrix.os == 'macos-latest'
|
||||
|
||||
- run: echo "::add-path::$env:GeckoWebDriver"
|
||||
- run: echo "$env:GeckoWebDriver" >> $GITHUB_PATH
|
||||
if: matrix.browser == 'firefox' && matrix.os == 'windows-latest'
|
||||
|
||||
- run: echo "::add-path::$env:IEWebDriver"
|
||||
if: matrix.browser == 'ie' && matrix.os == 'windows-latest'
|
||||
- run: echo "$env:EdgeWebDriver" >> $GITHUB_PATH
|
||||
if: matrix.browser == 'edge' && matrix.os == 'windows-latest'
|
||||
|
||||
- run: echo "::add-path::$env:ChromeWebDriver"
|
||||
- run: echo "$env:ChromeWebDriver" >> $GITHUB_PATH
|
||||
if: matrix.browser == 'chrome' && matrix.os == 'windows-latest'
|
||||
|
||||
- run: npm i --no-optional --no-audit selenium-webdriver pixelmatch pngjs
|
||||
|
|
@ -95,7 +93,7 @@ jobs:
|
|||
PORT: 0
|
||||
NODE_ENV: production # prevent watching
|
||||
|
||||
- uses: actions/upload-artifact@master
|
||||
- uses: actions/upload-artifact@v2
|
||||
if: failure()
|
||||
with:
|
||||
name: screenshot-${{ matrix.browser }}-${{ matrix.os }}
|
||||
|
|
@ -104,11 +102,11 @@ jobs:
|
|||
puppeteer:
|
||||
runs-on: macos-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v1
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm
|
||||
key: ${{ runner.OS }}-build-puppeteer
|
||||
|
|
@ -126,7 +124,7 @@ jobs:
|
|||
PORT: 0
|
||||
NODE_ENV: production # prevent watching
|
||||
|
||||
- uses: actions/upload-artifact@master
|
||||
- uses: actions/upload-artifact@v2
|
||||
if: failure()
|
||||
with:
|
||||
name: screenshot-puppeteer-darwin
|
||||
|
|
|
|||
29
.github/workflows/build-and-test.yml
vendored
29
.github/workflows/build-and-test.yml
vendored
|
|
@ -9,12 +9,12 @@ jobs:
|
|||
build-and-test:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 10
|
||||
node-version: 12
|
||||
- name: Build and run all tests
|
||||
run: |
|
||||
npm ci
|
||||
|
|
@ -32,15 +32,20 @@ jobs:
|
|||
BUNDLESIZE_GITHUB_TOKEN: ${{secrets.BUNDLESIZE_GITHUB_TOKEN}}
|
||||
FORCE_COLOR: 2
|
||||
HUSKY_SKIP_INSTALL: true
|
||||
- name: Commit built files
|
||||
run: |
|
||||
git config --local user.email "action@github.com"
|
||||
git config --local user.name "GitHub Action"
|
||||
git commit -m "Update build files 🏗" -a || echo "No changes to commit" && exit 0
|
||||
- name: Push changes
|
||||
uses: ad-m/github-push-action@master
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
##
|
||||
## Disabling for now. There does not appear to be a secure way to do this
|
||||
## with protected branches. See discussion:
|
||||
## https://github.community/t/how-to-push-to-protected-branches-in-a-github-action/16101
|
||||
##
|
||||
# - name: Commit built files
|
||||
# run: |
|
||||
# git config --local user.email "action@github.com"
|
||||
# git config --local user.name "GitHub Action"
|
||||
# git commit -m "Update build files 🏗" -a || echo "No changes to commit" && exit 0
|
||||
# - name: Push changes
|
||||
# uses: ad-m/github-push-action@master
|
||||
# with:
|
||||
# github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Upload coverage to Codecov
|
||||
run: bash <(curl -s https://codecov.io/bash)
|
||||
|
|
|
|||
6
.github/workflows/bundlesize.yml
vendored
6
.github/workflows/bundlesize.yml
vendored
|
|
@ -12,13 +12,13 @@ jobs:
|
|||
measure:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 10
|
||||
node-version: 12
|
||||
|
||||
- name: Install dependencies and build
|
||||
run: |
|
||||
|
|
|
|||
32
.github/workflows/deploy-pages.yml
vendored
Normal file
32
.github/workflows/deploy-pages.yml
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
name: Deploy Pages
|
||||
|
||||
on:
|
||||
release:
|
||||
types: [published]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
deploy-gh-pages:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 12
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- name: Build
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
rm -rf public/test
|
||||
env:
|
||||
CYPRESS_INSTALL_BINARY: 0
|
||||
HUSKY_SKIP_INSTALL: true
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
PUBLISH_BRANCH: gh-pages
|
||||
PUBLISH_DIR: ./public
|
||||
34
.github/workflows/deployment.yml
vendored
34
.github/workflows/deployment.yml
vendored
|
|
@ -1,4 +1,4 @@
|
|||
name: Publish and deploy
|
||||
name: Publish to npm
|
||||
|
||||
on:
|
||||
release:
|
||||
|
|
@ -8,12 +8,12 @@ jobs:
|
|||
publish-npm:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 10
|
||||
node-version: 12
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- run: npm ci
|
||||
env:
|
||||
|
|
@ -22,29 +22,3 @@ jobs:
|
|||
- run: npm publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
||||
|
||||
deploy-gh-pages:
|
||||
needs: publish-npm
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
with:
|
||||
fetch-depth: 1
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 10
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- name: Build
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
rm -rf public/test
|
||||
env:
|
||||
CYPRESS_INSTALL_BINARY: 0
|
||||
HUSKY_SKIP_INSTALL: true
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v2.5.0
|
||||
env:
|
||||
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
|
||||
PUBLISH_BRANCH: gh-pages
|
||||
PUBLISH_DIR: ./public
|
||||
|
|
|
|||
8
.github/workflows/e2e-tests.yml
vendored
8
.github/workflows/e2e-tests.yml
vendored
|
|
@ -20,16 +20,16 @@ jobs:
|
|||
TERM: xterm-256color
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 12.x
|
||||
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v1
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm
|
||||
key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
|
||||
|
|
@ -46,7 +46,7 @@ jobs:
|
|||
env:
|
||||
CYPRESS_INSTALL_BINARY: 0
|
||||
- name: Cache Cypress cache
|
||||
uses: actions/cache@v1
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ${{ steps.cypress-info.outputs.cache }}
|
||||
key: ${{ runner.OS }}-cypress-${{ steps.cypress-info.outputs.version }}
|
||||
|
|
|
|||
29
.github/workflows/lint.yml
vendored
29
.github/workflows/lint.yml
vendored
|
|
@ -4,6 +4,7 @@ on:
|
|||
pull_request:
|
||||
paths:
|
||||
- 'src/scripts/**'
|
||||
- 'src/styles/**'
|
||||
- package-lock.json
|
||||
- '.browserslistrc'
|
||||
|
||||
|
|
@ -11,28 +12,30 @@ jobs:
|
|||
lint:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 10
|
||||
node-version: 12
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm install --no-optional --no-audit --ignore-scripts
|
||||
run: npm ci
|
||||
env:
|
||||
CYPRESS_INSTALL_BINARY: 0
|
||||
HUSKY_SKIP_INSTALL: true
|
||||
|
||||
- name: run eslint
|
||||
run: |
|
||||
CHANGED_TS=$(git --no-pager diff --name-only ..origin/master | grep '^src\/scripts\/.*\.ts$' | xargs ls -d 2>/dev/null | paste -sd " " -)
|
||||
if [[ -z $(sed -e 's/[[:space:]]*$//' <<<${CHANGED_TS}) ]]; then CHANGED_TS="src/scripts"; fi
|
||||
echo $CHANGED_TS
|
||||
node node_modules/eslint/bin/eslint.js $CHANGED_TS
|
||||
run: npm run lint:js
|
||||
|
||||
- name: Lint JS bundle
|
||||
run: |
|
||||
npm run js:build
|
||||
npx eslint --no-ignore ./public/assets/scripts/*.js
|
||||
## Can't use same eslint config for TypeScript and JavaScript
|
||||
## TypeScript rules cause rule definition not found errors
|
||||
## Can be re-enabled if this is resolved: https://github.com/eslint/eslint/issues/14851
|
||||
# - name: Lint JS bundle
|
||||
# run: |
|
||||
# npm run js:build
|
||||
# npx eslint --no-ignore ./public/assets/scripts/*.js
|
||||
|
||||
- name: run stylelint
|
||||
run: npm run lint:scss
|
||||
4
.github/workflows/polyfills-sync.yml
vendored
4
.github/workflows/polyfills-sync.yml
vendored
|
|
@ -11,11 +11,11 @@ jobs:
|
|||
sync:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 12
|
||||
|
||||
|
|
|
|||
6
.github/workflows/unit-tests.yml
vendored
6
.github/workflows/unit-tests.yml
vendored
|
|
@ -11,13 +11,13 @@ jobs:
|
|||
test-unit:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 1
|
||||
|
||||
- uses: actions/setup-node@v1
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 10
|
||||
node-version: 12
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm install --no-optional --no-audit --ignore-scripts
|
||||
|
|
|
|||
6
.stylelintrc.json
Normal file
6
.stylelintrc.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard-scss",
|
||||
"rules": {
|
||||
"declaration-block-no-redundant-longhand-properties": null
|
||||
}
|
||||
}
|
||||
8
.vscode/settings.json
vendored
8
.vscode/settings.json
vendored
|
|
@ -62,5 +62,11 @@
|
|||
],
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
}
|
||||
},
|
||||
"stylelint.validate": [
|
||||
"css",
|
||||
"less",
|
||||
"postcss",
|
||||
"scss"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
64
README.md
64
README.md
|
|
@ -1,14 +1,8 @@
|
|||
# Choices.js [](https://github.com/jshjohnson/Choices/actions) [](https://github.com/jshjohnson/Choices/actions) [](https://www.npmjs.com/package/choices.js)
|
||||
|
||||
---
|
||||
|
||||
### I'm looking for active maintainers for this project as I no longer have the time to support it. Please get in touch if you're interested 👍
|
||||
|
||||
---
|
||||
|
||||
A vanilla, lightweight (~19kb gzipped 🎉), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
|
||||
|
||||
[Demo](https://joshuajohnson.co.uk/Choices/)
|
||||
[Demo](https://choices-js.github.io/Choices/)
|
||||
|
||||
## TL;DR
|
||||
|
||||
|
|
@ -27,6 +21,19 @@ A vanilla, lightweight (~19kb gzipped 🎉), configurable select box/text input
|
|||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Installation](#installation)
|
||||
- [Setup](#setup)
|
||||
- [Terminology](#terminology)
|
||||
- [Input Types](#input-types)
|
||||
- [Configuration Options](#configuration-options)
|
||||
- [Callbacks](#callbacks)
|
||||
- [Events](#events)
|
||||
- [Methods](#methods)
|
||||
- [Development](#development)
|
||||
- [License](#license)
|
||||
|
||||
## Installation
|
||||
|
||||
With [NPM](https://www.npmjs.com/package/choices.js):
|
||||
|
|
@ -113,6 +120,7 @@ Or include Choices directly:
|
|||
removeItems: true,
|
||||
removeItemButton: false,
|
||||
editItems: false,
|
||||
allowHTML: true,
|
||||
duplicateItemsAllowed: true,
|
||||
delimiter: ',',
|
||||
paste: true,
|
||||
|
|
@ -174,9 +182,9 @@ Or include Choices directly:
|
|||
noChoices: 'has-no-choices'
|
||||
},
|
||||
// Choices uses the great Fuse library for searching. You
|
||||
// can find more options here: https://github.com/krisk/Fuse#options
|
||||
// can find more options here: https://fusejs.io/api/options.html
|
||||
fuseOptions: {
|
||||
include: 'score'
|
||||
includeScore: true
|
||||
},
|
||||
labelId: '',
|
||||
callbackOnInit: null,
|
||||
|
|
@ -192,13 +200,23 @@ Or include Choices directly:
|
|||
| Group | A group is a collection of choices. A group should be seen as equivalent to a `<optgroup></optgroup>` element within a select input. |
|
||||
| Item | An item is an inputted value (text input) or a selected choice (select element). In the context of a select element, an item is equivalent to a selected option element: `<option value="Hello" selected></option>` whereas in the context of a text input an item is equivalent to `<input type="text" value="Hello">` |
|
||||
|
||||
## Configuration options
|
||||
## Input Types
|
||||
|
||||
Choices works with the following input types, referenced in the documentation as noted.
|
||||
|
||||
| HTML Element | Documentation "Input Type" |
|
||||
| -------------------------------------------------------------------------------------------------------| -------------------------- |
|
||||
| [`<input type="text">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) | `text` |
|
||||
| [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) | `select-one` |
|
||||
| [`<select multiple>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple) | `select-multiple` |
|
||||
|
||||
## Configuration Options
|
||||
|
||||
### silent
|
||||
|
||||
**Type:** `Boolean` **Default:** `false`
|
||||
|
||||
**Input types affected:** `text`, `select-single`, `select-multiple`
|
||||
**Input types affected:** `text`, `select-one`, `select-multiple`
|
||||
|
||||
**Usage:** Optionally suppress console errors and warnings.
|
||||
|
||||
|
|
@ -309,6 +327,16 @@ Pass an array of objects:
|
|||
|
||||
**Usage:** Whether a user can edit items. An item's value can be edited by pressing the backspace.
|
||||
|
||||
### allowHTML
|
||||
|
||||
**Type:** `Boolean` **Default:** `true`
|
||||
|
||||
**Input types affected:** `text`, `select-one`, `select-multiple`
|
||||
|
||||
**Usage:** Whether HTML should be rendered in all Choices elements. If `false`, all elements (placeholder, items, etc.) will be treated as plain text. If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
|
||||
|
||||
**Deprecation Warning:** This will default to `false` in a future release.
|
||||
|
||||
### duplicateItemsAllowed
|
||||
|
||||
**Type:** `Boolean` **Default:** `true`
|
||||
|
|
@ -636,10 +664,12 @@ classNames: {
|
|||
|
||||
**Input types affected:** `text`, `select-one`, `select-multiple`
|
||||
|
||||
**Usage:** Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined [here](https://github.com/jshjohnson/Choices/blob/master/src/scripts/templates.js).
|
||||
**Usage:** Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined [here](https://github.com/Choices-js/Choices/blob/master/src/scripts/templates.ts).
|
||||
If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
|
||||
original template function.
|
||||
|
||||
Templates receive the full Choices config as the first argument to any template, which allows you to conditionally display things based on the options specified.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
|
|
@ -659,7 +689,7 @@ or more complex:
|
|||
const example = new Choices(element, {
|
||||
callbackOnCreateTemplates: function(template) {
|
||||
return {
|
||||
item: (classNames, data) => {
|
||||
item: ({ classNames }, data) => {
|
||||
return template(`
|
||||
<div class="${classNames.item} ${
|
||||
data.highlighted
|
||||
|
|
@ -674,7 +704,7 @@ const example = new Choices(element, {
|
|||
</div>
|
||||
`);
|
||||
},
|
||||
choice: (classNames, data) => {
|
||||
choice: ({ classNames }, data) => {
|
||||
return template(`
|
||||
<div class="${classNames.item} ${classNames.itemChoice} ${
|
||||
data.disabled ? classNames.itemDisabled : classNames.itemSelectable
|
||||
|
|
@ -1066,7 +1096,7 @@ example.setChoiceByValue('Two'); // Choice with value of 'Two' has now been sele
|
|||
## Browser compatibility
|
||||
|
||||
Choices is compiled using [Babel](https://babeljs.io/) targeting browsers [with more than 1% of global usage](https://github.com/jshjohnson/Choices/blob/master/.browserslistrc) and expecting that features [listed below](https://github.com/jshjohnson/Choices/blob/master/.eslintrc.json#L62) are available or polyfilled in browser.
|
||||
You may see exact list of target browsers by running `npx browserslist` withing this repository folder.
|
||||
You may see exact list of target browsers by running `npx browserslist` within this repository folder.
|
||||
If you need to support a browser that does not have one of the features listed below,
|
||||
I suggest including a polyfill from the very good [polyfill.io](https://polyfill.io/v3/):
|
||||
|
||||
|
|
@ -1113,6 +1143,10 @@ To setup a local environment: clone this repo, navigate into its directory in a
|
|||
| `npm run css:watch` | Watch SCSS files for changes. On a change, run build process |
|
||||
| `npm run css:build` | Compile, minify and prefix SCSS files to CSS |
|
||||
|
||||
### Interested in contributing?
|
||||
|
||||
We're always interested in having more active maintainers. Please get in touch if you're interested 👍
|
||||
|
||||
## License
|
||||
|
||||
MIT License
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
describe('Choices - select multiple', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/select-multiple');
|
||||
cy.visit('/select-multiple', {
|
||||
onBeforeLoad(win) {
|
||||
cy.stub(win.console, 'warn').as('consoleWarn');
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('scenarios', () => {
|
||||
|
|
@ -62,7 +66,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -72,7 +76,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -80,7 +84,7 @@ describe('Choices - select multiple', () => {
|
|||
it('updates the value of the original input', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input[hidden]')
|
||||
.should($select => {
|
||||
.should(($select) => {
|
||||
expect($select.val()).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -89,7 +93,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.each($choice => {
|
||||
.each(($choice) => {
|
||||
expect($choice.text().trim()).to.not.equal(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -114,7 +118,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal('No choices to choose from');
|
||||
});
|
||||
|
|
@ -130,7 +134,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.last()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
removedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -151,7 +155,7 @@ describe('Choices - select multiple', () => {
|
|||
it('updates the value of the original input', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input[hidden]')
|
||||
.should($select => {
|
||||
.should(($select) => {
|
||||
const val = $select.val() || [];
|
||||
expect(val).to.not.contain(removedChoiceText);
|
||||
});
|
||||
|
|
@ -171,7 +175,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 2');
|
||||
});
|
||||
});
|
||||
|
|
@ -187,7 +191,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 3');
|
||||
});
|
||||
});
|
||||
|
|
@ -202,7 +206,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal('No results found');
|
||||
});
|
||||
|
|
@ -346,10 +350,10 @@ describe('Choices - select multiple', () => {
|
|||
|
||||
describe('selection limit', () => {
|
||||
/*
|
||||
{
|
||||
maxItemCount: 5,
|
||||
}
|
||||
*/
|
||||
{
|
||||
maxItemCount: 5,
|
||||
}
|
||||
*/
|
||||
const selectionLimit = 5;
|
||||
|
||||
beforeEach(() => {
|
||||
|
|
@ -370,7 +374,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=selection-limit]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
`Only ${selectionLimit} values can be added`,
|
||||
|
|
@ -397,7 +401,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.last()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -407,7 +411,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.data('value')).to.equal(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
|
|
@ -418,7 +422,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text()).to.not.contain(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
|
|
@ -460,7 +464,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.not.contain(searchTerm);
|
||||
});
|
||||
});
|
||||
|
|
@ -478,7 +482,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.contain(searchTerm);
|
||||
});
|
||||
});
|
||||
|
|
@ -570,7 +574,7 @@ describe('Choices - select multiple', () => {
|
|||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__item')
|
||||
.then($choices => {
|
||||
.then(($choices) => {
|
||||
choicesCount = $choices.length;
|
||||
});
|
||||
|
||||
|
|
@ -582,19 +586,20 @@ describe('Choices - select multiple', () => {
|
|||
it('highlights first choice on dropdown open', () => {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
|
||||
it('scrolls to next choice on down arrow', () => {
|
||||
for (let index = 0; index < choicesCount; index++) {
|
||||
for (let index = 1; index <= choicesCount; index++) {
|
||||
cy.wait(100);
|
||||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
|
||||
.invoke('text')
|
||||
.then((text) => {
|
||||
expect(text.trim()).to.equal(`Choice ${index}`);
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
|
|
@ -617,8 +622,9 @@ describe('Choices - select multiple', () => {
|
|||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
expect($choice.text().trim()).to.equal(`Choice ${index}`);
|
||||
.invoke('text')
|
||||
.then((text) => {
|
||||
expect(text.trim()).to.equal(`Choice ${index}`);
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
|
|
@ -636,7 +642,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.then($group => {
|
||||
.then(($group) => {
|
||||
groupValue = $group.text().trim();
|
||||
});
|
||||
});
|
||||
|
|
@ -657,7 +663,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.should($group => {
|
||||
.should(($group) => {
|
||||
expect($group.text().trim()).to.not.equal(groupValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -688,7 +694,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.should($group => {
|
||||
.should(($group) => {
|
||||
expect($group.text().trim()).to.equal(groupValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -728,7 +734,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(city);
|
||||
});
|
||||
|
||||
|
|
@ -742,9 +748,7 @@ describe('Choices - select multiple', () => {
|
|||
|
||||
describe('non-string values', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=non-string-values]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=non-string-values]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('displays expected amount of choices in dropdown', () => {
|
||||
|
|
@ -760,7 +764,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
$selectedChoice = $choice;
|
||||
})
|
||||
.click();
|
||||
|
|
@ -768,7 +772,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=non-string-values]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item.text().trim()).to.equal($selectedChoice.text().trim());
|
||||
});
|
||||
});
|
||||
|
|
@ -778,7 +782,7 @@ describe('Choices - select multiple', () => {
|
|||
describe('selecting choice', () => {
|
||||
describe('on enter key', () => {
|
||||
it('selects choice', () => {
|
||||
cy.get('[data-test-hook=within-form] form').then($form => {
|
||||
cy.get('[data-test-hook=within-form] form').then(($form) => {
|
||||
$form.submit(() => {
|
||||
// this will fail the test if the form submits
|
||||
throw new Error('Form submitted');
|
||||
|
|
@ -793,7 +797,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=within-form]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain('Choice 1');
|
||||
});
|
||||
});
|
||||
|
|
@ -808,7 +812,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(
|
||||
dynamicallySelectedChoiceValue,
|
||||
);
|
||||
|
|
@ -819,7 +823,7 @@ describe('Choices - select multiple', () => {
|
|||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.each($choice => {
|
||||
.each(($choice) => {
|
||||
expect($choice.text().trim()).to.not.equal(
|
||||
dynamicallySelectedChoiceValue,
|
||||
);
|
||||
|
|
@ -829,7 +833,7 @@ describe('Choices - select multiple', () => {
|
|||
it('updates the value of the original input', () => {
|
||||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__input[hidden]')
|
||||
.should($select => {
|
||||
.should(($select) => {
|
||||
const val = $select.val() || [];
|
||||
expect(val).to.contain(dynamicallySelectedChoiceValue);
|
||||
});
|
||||
|
|
@ -846,7 +850,7 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('No results found');
|
||||
});
|
||||
});
|
||||
|
|
@ -860,10 +864,83 @@ describe('Choices - select multiple', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('label1');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('allow html', () => {
|
||||
describe('is undefined', () => {
|
||||
it('logs a deprecation warning', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'be.calledOnceWithExactly',
|
||||
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
|
||||
);
|
||||
});
|
||||
|
||||
it('does not show as text when selected', () => {
|
||||
cy.get('[data-test-hook=allowhtml-undefined]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
|
||||
it('does not show html as text in dropdown', () => {
|
||||
cy.get('[data-test-hook=allowhtml-undefined]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to true', () => {
|
||||
it('does not show as text when selected', () => {
|
||||
cy.get('[data-test-hook=allowhtml-true]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
|
||||
it('does not show html as text in dropdown', () => {
|
||||
cy.get('[data-test-hook=allowhtml-true]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to false', () => {
|
||||
it('shows html as text when selected', () => {
|
||||
cy.get('[data-test-hook=allowhtml-false]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('<b>Choice 1</b>');
|
||||
});
|
||||
});
|
||||
|
||||
it('shows html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-false]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('<b>Choice 2</b>');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
describe('Choices - select one', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/select-one');
|
||||
cy.visit('/select-one', {
|
||||
onBeforeLoad(win) {
|
||||
cy.stub(win.console, 'warn').as('consoleWarn');
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('scenarios', () => {
|
||||
|
|
@ -51,9 +55,7 @@ describe('Choices - select one', () => {
|
|||
describe('selecting choices', () => {
|
||||
beforeEach(() => {
|
||||
// open dropdown
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=basic]').find('.choices').click();
|
||||
});
|
||||
|
||||
const selectedChoiceText = 'Choice 1';
|
||||
|
|
@ -68,7 +70,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -84,7 +86,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -93,9 +95,7 @@ describe('Choices - select one', () => {
|
|||
describe('searching choices', () => {
|
||||
beforeEach(() => {
|
||||
// open dropdown
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=basic]').find('.choices').click();
|
||||
});
|
||||
|
||||
describe('on input', () => {
|
||||
|
|
@ -109,7 +109,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 2');
|
||||
});
|
||||
});
|
||||
|
|
@ -125,7 +125,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 3');
|
||||
});
|
||||
});
|
||||
|
|
@ -140,7 +140,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal('No results found');
|
||||
});
|
||||
|
|
@ -206,7 +206,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
removedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -229,7 +229,7 @@ describe('Choices - select one', () => {
|
|||
it('updates the value of the original input', () => {
|
||||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__input[hidden]')
|
||||
.should($select => {
|
||||
.should(($select) => {
|
||||
const val = $select.val() || [];
|
||||
|
||||
expect(val).to.not.contain(removedChoiceText);
|
||||
|
|
@ -248,7 +248,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
cy.get('[data-test-hook=disabled-choice]')
|
||||
.find('.choices__list--dropdown .choices__item--disabled')
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -258,7 +258,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text()).to.not.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -305,9 +305,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('on click', () => {
|
||||
it('does not open choice dropdown', () => {
|
||||
cy.get('[data-test-hook=disabled-via-attr]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=disabled-via-attr]').find('.choices').click();
|
||||
|
||||
cy.get('[data-test-hook=disabled-via-attr]')
|
||||
.find('.choices__list--dropdown')
|
||||
|
|
@ -335,7 +333,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.last()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
|
|
@ -345,7 +343,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.data('value')).to.equal(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
|
|
@ -356,7 +354,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text()).to.not.contain(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
|
|
@ -389,9 +387,7 @@ describe('Choices - select one', () => {
|
|||
const selectedChoiceText = 'Choice 3';
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=search-disabled]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=search-disabled]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('does not display a search input', () => {
|
||||
|
|
@ -410,7 +406,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=search-disabled]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
|
@ -442,7 +438,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.not.contain(searchTerm);
|
||||
});
|
||||
});
|
||||
|
|
@ -460,7 +456,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.contain(searchTerm);
|
||||
});
|
||||
});
|
||||
|
|
@ -476,7 +472,7 @@ describe('Choices - select one', () => {
|
|||
.children()
|
||||
.first()
|
||||
.should('have.class', 'choices__placeholder')
|
||||
.and($placeholder => {
|
||||
.and(($placeholder) => {
|
||||
expect($placeholder).to.contain('I am a placeholder');
|
||||
});
|
||||
});
|
||||
|
|
@ -524,7 +520,7 @@ describe('Choices - select one', () => {
|
|||
.children()
|
||||
.first()
|
||||
.should('have.class', 'choices__placeholder')
|
||||
.and($placeholder => {
|
||||
.and(($placeholder) => {
|
||||
expect($placeholder).to.contain('I am a placeholder');
|
||||
});
|
||||
});
|
||||
|
|
@ -577,7 +573,7 @@ describe('Choices - select one', () => {
|
|||
.should('have.length', 1)
|
||||
.first()
|
||||
.should('have.class', 'choices__placeholder')
|
||||
.and($placeholder => {
|
||||
.and(($placeholder) => {
|
||||
expect($placeholder).to.contain('Loading...');
|
||||
});
|
||||
});
|
||||
|
|
@ -620,19 +616,17 @@ describe('Choices - select one', () => {
|
|||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__item')
|
||||
.then($choices => {
|
||||
.then(($choices) => {
|
||||
choicesCount = $choices.length;
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=scrolling-dropdown]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('highlights first choice on dropdown open', () => {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
|
|
@ -641,7 +635,7 @@ describe('Choices - select one', () => {
|
|||
for (let index = 0; index < choicesCount; index++) {
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
|
||||
});
|
||||
|
||||
|
|
@ -665,7 +659,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(`Choice ${index}`);
|
||||
});
|
||||
|
||||
|
|
@ -684,7 +678,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.then($group => {
|
||||
.then(($group) => {
|
||||
groupValue = $group.text().trim();
|
||||
});
|
||||
});
|
||||
|
|
@ -705,7 +699,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.should($group => {
|
||||
.should(($group) => {
|
||||
expect($group.text().trim()).to.not.equal(groupValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -736,7 +730,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=groups]')
|
||||
.find('.choices__list--dropdown .choices__list .choices__group')
|
||||
.first()
|
||||
.should($group => {
|
||||
.should(($group) => {
|
||||
expect($group.text().trim()).to.equal(groupValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -806,9 +800,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('custom properties', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=custom-properties]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=custom-properties]').find('.choices').click();
|
||||
});
|
||||
|
||||
describe('on input', () => {
|
||||
|
|
@ -837,7 +829,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(city);
|
||||
});
|
||||
|
||||
|
|
@ -851,9 +843,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('non-string values', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=non-string-values]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=non-string-values]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('displays expected amount of choices in dropdown', () => {
|
||||
|
|
@ -869,7 +859,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
$selectedChoice = $choice;
|
||||
})
|
||||
.click();
|
||||
|
|
@ -877,7 +867,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=non-string-values]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item.text().trim()).to.equal($selectedChoice.text().trim());
|
||||
});
|
||||
});
|
||||
|
|
@ -887,7 +877,7 @@ describe('Choices - select one', () => {
|
|||
describe('selecting choice', () => {
|
||||
describe('on enter key', () => {
|
||||
it('does not submit form', () => {
|
||||
cy.get('[data-test-hook=within-form] form').then($form => {
|
||||
cy.get('[data-test-hook=within-form] form').then(($form) => {
|
||||
$form.submit(() => {
|
||||
// this will fail the test if the form submits
|
||||
throw new Error('Form submitted');
|
||||
|
|
@ -900,14 +890,12 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__input--cloned')
|
||||
.type('{enter}');
|
||||
|
||||
cy.get('[data-test-hook=within-form]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=within-form]').find('.choices').click();
|
||||
|
||||
cy.get('[data-test-hook=within-form]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
.should(($item) => {
|
||||
expect($item).to.contain('Choice 1');
|
||||
});
|
||||
});
|
||||
|
|
@ -922,7 +910,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(
|
||||
dynamicallySelectedChoiceValue,
|
||||
);
|
||||
|
|
@ -932,7 +920,7 @@ describe('Choices - select one', () => {
|
|||
it('does not remove choice from dropdown list', () => {
|
||||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.then($choicesList => {
|
||||
.then(($choicesList) => {
|
||||
expect($choicesList).to.contain(dynamicallySelectedChoiceValue);
|
||||
});
|
||||
});
|
||||
|
|
@ -940,7 +928,7 @@ describe('Choices - select one', () => {
|
|||
it('updates the value of the original input', () => {
|
||||
cy.get('[data-test-hook=set-choice-by-value]')
|
||||
.find('.choices__input[hidden]')
|
||||
.should($select => {
|
||||
.should(($select) => {
|
||||
const val = $select.val() || [];
|
||||
expect(val).to.contain(dynamicallySelectedChoiceValue);
|
||||
});
|
||||
|
|
@ -949,9 +937,7 @@ describe('Choices - select one', () => {
|
|||
|
||||
describe('searching by label only', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=search-by-label]')
|
||||
.find('.choices')
|
||||
.click();
|
||||
cy.get('[data-test-hook=search-by-label]').find('.choices').click();
|
||||
});
|
||||
|
||||
it('gets zero results when searching by value', () => {
|
||||
|
|
@ -963,7 +949,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('No results found');
|
||||
});
|
||||
});
|
||||
|
|
@ -977,7 +963,7 @@ describe('Choices - select one', () => {
|
|||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('label1');
|
||||
});
|
||||
});
|
||||
|
|
@ -998,7 +984,7 @@ describe('Choices - select one', () => {
|
|||
.children()
|
||||
.first()
|
||||
.should('have.class', 'choices__item--disabled')
|
||||
.then($choice => {
|
||||
.then(($choice) => {
|
||||
disabledValue = $choice.val();
|
||||
});
|
||||
});
|
||||
|
|
@ -1006,19 +992,64 @@ describe('Choices - select one', () => {
|
|||
it('selects the first enabled choice', () => {
|
||||
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
||||
.find('.choices__input[hidden]')
|
||||
.then($option => {
|
||||
.then(($option) => {
|
||||
expect($option.text().trim()).to.not.equal(disabledValue);
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
||||
.find('.choices__item.choices__item--selectable')
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.not.equal(disabledValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('allow html', () => {
|
||||
describe('is undefined', () => {
|
||||
it('logs a deprecation warning', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'be.calledOnceWithExactly',
|
||||
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
|
||||
);
|
||||
});
|
||||
|
||||
it('does not show html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-undefined]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to true', () => {
|
||||
it('does not show html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-true]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to false', () => {
|
||||
it('shows html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-false]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('<b>Choice 1</b>');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('re-initialising a choices instance', () => {
|
||||
it('preserves the choices list', () => {
|
||||
cy.get('[data-test-hook=new-destroy-init]')
|
||||
|
|
@ -1029,9 +1060,7 @@ describe('Choices - select one', () => {
|
|||
cy.get('[data-test-hook=new-destroy-init]')
|
||||
.find('button.destroy')
|
||||
.click();
|
||||
cy.get('[data-test-hook=new-destroy-init]')
|
||||
.find('button.init')
|
||||
.click();
|
||||
cy.get('[data-test-hook=new-destroy-init]').find('button.init').click();
|
||||
|
||||
cy.get('[data-test-hook=new-destroy-init]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
describe('Choices - text element', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/text');
|
||||
cy.visit('/text', {
|
||||
onBeforeLoad(win) {
|
||||
cy.stub(win.console, 'warn').as('consoleWarn');
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('scenarios', () => {
|
||||
|
|
@ -17,7 +21,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($el => {
|
||||
.should(($el) => {
|
||||
expect($el).to.contain(textInput);
|
||||
});
|
||||
});
|
||||
|
|
@ -42,7 +46,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
`Press Enter to add "${textInput}"`,
|
||||
|
|
@ -74,7 +78,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=edit-items]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.data('value')).to.equal(`${textInput}-edited`);
|
||||
});
|
||||
});
|
||||
|
|
@ -90,7 +94,7 @@ describe('Choices - text element', () => {
|
|||
it('highlights all items', () => {
|
||||
cy.get('[data-test-hook=edit-items]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.each($choice => {
|
||||
.each(($choice) => {
|
||||
expect($choice.hasClass('is-highlighted')).to.equal(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -124,7 +128,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__list--multiple')
|
||||
.children()
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(1);
|
||||
});
|
||||
|
||||
|
|
@ -137,7 +141,7 @@ describe('Choices - text element', () => {
|
|||
|
||||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(0);
|
||||
});
|
||||
});
|
||||
|
|
@ -152,7 +156,7 @@ describe('Choices - text element', () => {
|
|||
|
||||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__input[hidden]')
|
||||
.then($input => {
|
||||
.then(($input) => {
|
||||
expect($input.val()).to.not.contain(textInput);
|
||||
});
|
||||
});
|
||||
|
|
@ -175,7 +179,7 @@ describe('Choices - text element', () => {
|
|||
.find('.choices__list--multiple')
|
||||
.first()
|
||||
.children()
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -185,7 +189,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=unique-values]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
'Only unique values can be added',
|
||||
|
|
@ -212,7 +216,7 @@ describe('Choices - text element', () => {
|
|||
.find('.choices__list--multiple')
|
||||
.first()
|
||||
.children()
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(inputLimit);
|
||||
});
|
||||
});
|
||||
|
|
@ -222,7 +226,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=input-limit]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
`Only ${inputLimit} values can be added`,
|
||||
|
|
@ -245,7 +249,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=add-item-filter]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(input);
|
||||
});
|
||||
});
|
||||
|
|
@ -261,7 +265,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=add-item-filter]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
'Only values matching specific conditions can be added',
|
||||
|
|
@ -283,7 +287,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.data('value')).to.equal(`before-${textInput}-after`);
|
||||
});
|
||||
});
|
||||
|
|
@ -292,7 +296,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text()).to.not.contain(`before-${textInput}-after`);
|
||||
expect($choice.text()).to.contain(textInput);
|
||||
});
|
||||
|
|
@ -319,21 +323,21 @@ describe('Choices - text element', () => {
|
|||
it('pre-populates choices', () => {
|
||||
cy.get('[data-test-hook=prepopulated]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.should($choices => {
|
||||
.should(($choices) => {
|
||||
expect($choices.length).to.equal(2);
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=prepopulated]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Josh Johnson');
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=prepopulated]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Joe Bloggs');
|
||||
});
|
||||
});
|
||||
|
|
@ -355,11 +359,53 @@ describe('Choices - text element', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('allow html', () => {
|
||||
describe('is undefined', () => {
|
||||
it('logs a deprecation warning', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'be.calledOnceWithExactly',
|
||||
'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
|
||||
);
|
||||
});
|
||||
|
||||
it('does not show html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-undefined]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Mason Rogers');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to true', () => {
|
||||
it('does not show html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-true]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Mason Rogers');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to false', () => {
|
||||
it('shows html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-false]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('<b>Mason Rogers</b>');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('within form', () => {
|
||||
describe('inputting item', () => {
|
||||
describe('on enter key', () => {
|
||||
it('does not submit form', () => {
|
||||
cy.get('[data-test-hook=within-form] form').then($form => {
|
||||
cy.get('[data-test-hook=within-form] form').then(($form) => {
|
||||
$form.submit(() => {
|
||||
// this will fail the test if the form submits
|
||||
throw new Error('Form submitted');
|
||||
|
|
@ -374,7 +420,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=within-form]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($el => {
|
||||
.should(($el) => {
|
||||
expect($el).to.contain(textInput);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
16790
package-lock.json
generated
16790
package-lock.json
generated
File diff suppressed because it is too large
Load diff
119
package.json
119
package.json
|
|
@ -1,19 +1,21 @@
|
|||
{
|
||||
"name": "choices.js",
|
||||
"version": "9.0.1",
|
||||
"version": "10.0.0",
|
||||
"description": "A vanilla JS customisable text input/select box plugin",
|
||||
"main": "./public/assets/scripts/choices.js",
|
||||
"types": "./types/index.d.ts",
|
||||
"types": "./public/types/src/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "run-p js:watch css:watch",
|
||||
"build": "run-p js:build css:build",
|
||||
"lint": "eslint src/scripts/**/*.ts",
|
||||
"lint": "run-p lint:js lint:scss",
|
||||
"lint:js": "eslint src/scripts/**/*.ts",
|
||||
"lint:scss": "stylelint src/**/*.scss",
|
||||
"bundlesize": "bundlesize",
|
||||
"cypress:run": "cypress run",
|
||||
"cypress:run": "cypress run --browser chrome",
|
||||
"cypress:open": "cypress open",
|
||||
"cypress:ci": "cypress run --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
|
||||
"cypress:ci": "cypress run --browser chrome --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
|
||||
"test": "run-s test:unit test:e2e",
|
||||
"test:unit": "TS_NODE_TRANSPILE_ONLY=true NODE_ENV=test mocha",
|
||||
"test:unit": "cross-env TS_NODE_TRANSPILE_ONLY=true NODE_ENV=test mocha",
|
||||
"test:unit:watch": "npm run test:unit -- --watch --inspect=5556",
|
||||
"test:unit:coverage": "NODE_ENV=test nyc --reporter=lcov --reporter=text --reporter=text-summary mocha",
|
||||
"test:e2e": "run-p --race start cypress:run",
|
||||
|
|
@ -21,7 +23,7 @@
|
|||
"js:build": "webpack --config webpack.config.prod.js",
|
||||
"css:watch": "nodemon -e scss -x \"npm run css:build\"",
|
||||
"css:build": "run-s css:sass css:prefix css:min",
|
||||
"css:sass": "node-sass --output-style expanded --include-path scss src/styles/base.scss public/assets/styles/base.css && node-sass --output-style expanded --include-path scss src/styles/choices.scss public/assets/styles/choices.css",
|
||||
"css:sass": "sass -I scss src/styles/base.scss public/assets/styles/base.css && sass -I scss src/styles/choices.scss public/assets/styles/choices.css",
|
||||
"css:prefix": "postcss public/assets/styles/*.css --use autoprefixer --no-map --env prod --dir public/assets/styles",
|
||||
"css:min": "csso public/assets/styles/base.css --output public/assets/styles/base.min.css && csso public/assets/styles/choices.css --output public/assets/styles/choices.min.css",
|
||||
"deploy": "git subtree push --prefix public origin gh-pages",
|
||||
|
|
@ -36,6 +38,7 @@
|
|||
"files": [
|
||||
"public/assets/scripts",
|
||||
"public/assets/styles",
|
||||
"public/types",
|
||||
"src",
|
||||
"!src/**/*.test.js",
|
||||
"types"
|
||||
|
|
@ -53,56 +56,61 @@
|
|||
"js"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.6.4",
|
||||
"@babel/preset-env": "^7.6.3",
|
||||
"@babel/register": "^7.6.2",
|
||||
"@types/chai": "^4.2.7",
|
||||
"@types/mocha": "^5.2.7",
|
||||
"@types/sinon": "^7.5.1",
|
||||
"@types/sinon-chai": "^3.2.3",
|
||||
"@typescript-eslint/eslint-plugin": "^2.11.0",
|
||||
"@typescript-eslint/parser": "^2.11.0",
|
||||
"autoprefixer": "^9.6.5",
|
||||
"babel-loader": "^8.0.6",
|
||||
"bundlesize": "^0.18.0",
|
||||
"chai": "^4.2.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"@babel/core": "^7.16.7",
|
||||
"@babel/preset-env": "^7.16.8",
|
||||
"@babel/register": "^7.16.9",
|
||||
"@types/chai": "^4.3.0",
|
||||
"@types/mocha": "^9.0.0",
|
||||
"@types/sinon": "^10.0.6",
|
||||
"@types/sinon-chai": "^3.2.8",
|
||||
"@typescript-eslint/eslint-plugin": "^5.9.1",
|
||||
"@typescript-eslint/parser": "^5.9.1",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"babel-loader": "^8.2.3",
|
||||
"bundlesize": "^0.18.1",
|
||||
"chai": "^4.3.4",
|
||||
"cross-env": "^7.0.3",
|
||||
"csso-cli": "^3.0.0",
|
||||
"cypress": "3.6.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-airbnb-base": "^14.0.0",
|
||||
"eslint-config-prettier": "^6.5.0",
|
||||
"eslint-loader": "^3.0.2",
|
||||
"eslint-plugin-compat": "3.3.0",
|
||||
"eslint-plugin-cypress": "^2.8.1",
|
||||
"eslint-plugin-import": "^2.18.2",
|
||||
"eslint-plugin-prettier": "^3.1.1",
|
||||
"eslint-plugin-sort-class-members": "^1.6.0",
|
||||
"express": "^4.16.4",
|
||||
"husky": "^3.0.9",
|
||||
"jsdom": "^15.2.0",
|
||||
"lint-staged": "^9.4.2",
|
||||
"mocha": "^6.2.2",
|
||||
"node-sass": "^4.12.0",
|
||||
"nodemon": "^1.18.10",
|
||||
"cypress": "9.2.1",
|
||||
"eslint": "^8.6.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-config-airbnb-typescript": "^16.1.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-compat": "4.0.1",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"eslint-plugin-import": "^2.25.4",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-sort-class-members": "^1.14.1",
|
||||
"eslint-webpack-plugin": "^3.1.1",
|
||||
"express": "^4.17.2",
|
||||
"husky": "^7.0.4",
|
||||
"jsdom": "^19.0.0",
|
||||
"lint-staged": "^12.1.7",
|
||||
"mocha": "^9.1.3",
|
||||
"nodemon": "^2.0.15",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"nyc": "^14.1.1",
|
||||
"postcss-cli": "^6.1.3",
|
||||
"prettier": "^1.19.1",
|
||||
"sinon": "^7.5.0",
|
||||
"sinon-chai": "^3.3.0",
|
||||
"ts-loader": "^6.2.1",
|
||||
"ts-node": "^8.5.4",
|
||||
"typescript": "^3.7.3",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.9",
|
||||
"webpack-dev-middleware": "^3.7.2",
|
||||
"webpack-hot-middleware": "^2.25.0"
|
||||
"nyc": "^15.1.0",
|
||||
"postcss": "^8.4.5",
|
||||
"postcss-cli": "^9.1.0",
|
||||
"prettier": "^2.5.1",
|
||||
"sass": "^1.48.0",
|
||||
"sinon": "^12.0.1",
|
||||
"sinon-chai": "^3.7.0",
|
||||
"stylelint": "^14.2.0",
|
||||
"stylelint-config-standard": "^24.0.0",
|
||||
"stylelint-config-standard-scss": "^3.0.0",
|
||||
"ts-loader": "^9.2.6",
|
||||
"ts-node": "^10.4.0",
|
||||
"typescript": "^4.5.4",
|
||||
"webpack": "^5.66.0",
|
||||
"webpack-cli": "^4.9.1",
|
||||
"webpack-dev-middleware": "^5.3.0",
|
||||
"webpack-hot-middleware": "^2.25.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"deepmerge": "^4.2.0",
|
||||
"fuse.js": "^3.4.6",
|
||||
"redux": "^4.0.4"
|
||||
"deepmerge": "^4.2.2",
|
||||
"fuse.js": "^6.5.3",
|
||||
"redux": "^4.1.2"
|
||||
},
|
||||
"npmName": "choices.js",
|
||||
"npmFileMap": [
|
||||
|
|
@ -110,6 +118,7 @@
|
|||
"files": [
|
||||
"public/assets/scripts/*",
|
||||
"public/assets/styles/*",
|
||||
"public/types/*",
|
||||
"src/icons/*"
|
||||
]
|
||||
}
|
||||
|
|
@ -125,11 +134,11 @@
|
|||
"bundlesize": [
|
||||
{
|
||||
"path": "public/assets/scripts/choices.min.js",
|
||||
"maxSize": "20 kB"
|
||||
"maxSize": "25 kB"
|
||||
},
|
||||
{
|
||||
"path": "public/assets/styles/choices.min.css",
|
||||
"maxSize": "1.8 kB"
|
||||
"maxSize": "2.5 kB"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
13
public/assets/scripts/choices.min.js
vendored
13
public/assets/scripts/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +1,14 @@
|
|||
/*=============================================
|
||||
/* =============================================
|
||||
= Generic styling =
|
||||
=============================================*/
|
||||
============================================= */
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -21,10 +21,10 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -39,6 +39,7 @@ label {
|
|||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
@ -64,7 +65,7 @@ h6 {
|
|||
a,
|
||||
a:visited,
|
||||
a:focus {
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -78,8 +79,7 @@ a:focus {
|
|||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
|
|
@ -113,10 +113,6 @@ h6,
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
label + p {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
|
@ -127,7 +123,6 @@ label + p {
|
|||
max-width: 40em;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.container {
|
||||
padding: 0;
|
||||
|
|
@ -135,11 +130,10 @@ label + p {
|
|||
}
|
||||
|
||||
.section {
|
||||
background-color: #ffffff;
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section a,
|
||||
.section a:visited,
|
||||
.section a:focus {
|
||||
|
|
@ -151,7 +145,7 @@ label + p {
|
|||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.logo__img {
|
||||
.logo-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
|
|
@ -184,4 +178,4 @@ label + p {
|
|||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/*===== End of Section comment block ======*/
|
||||
/* ===== End of Section comment block ====== */
|
||||
|
|
|
|||
1
public/assets/styles/base.css.map
Normal file
1
public/assets/styles/base.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/styles/base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAYA;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAtFiB;;;AAyFnB;AAAA;EAEE,WA1FoB;;;AA6FtB;AAAA;EAEE,WA9FoB;;;AAiGtB;AAAA;EAEE,WAlGoB;;;AAqGtB;AAAA;EAEE,WAtGoB;;;AAyGtB;AAAA;EAEE,WA1GoB;;;AA6GtB;AAAA;EAEE,WA9GoB;;;AAiHtB;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAIJ;EACE;EACA,SAxIiB;EAyIjB;;AAEA;AAAA;AAAA;EAGE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,eArKiB;;;AAwKnB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,eArLiB;;;AAwLnB","file":"base.css"}
|
||||
2
public/assets/styles/base.min.css
vendored
2
public/assets/styles/base.min.css
vendored
|
|
@ -1 +1 @@
|
|||
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}
|
||||
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}
|
||||
|
|
@ -1,61 +1,51 @@
|
|||
/*===============================
|
||||
/* ===============================
|
||||
= Choices =
|
||||
===============================*/
|
||||
=============================== */
|
||||
.choices {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.choices:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.choices:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.choices.is-open {
|
||||
overflow: initial;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.choices.is-disabled .choices__inner,
|
||||
.choices.is-disabled .choices__input {
|
||||
background-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.choices.is-disabled .choices__item {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.choices [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'] {
|
||||
.choices[data-type*=select-one] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'] .choices__inner {
|
||||
.choices[data-type*=select-one] .choices__inner {
|
||||
padding-bottom: 7.5px;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'] .choices__input {
|
||||
.choices[data-type*=select-one] .choices__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'] .choices__button {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
.choices[data-type*=select-one] .choices__button {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
padding: 0;
|
||||
background-size: 8px;
|
||||
position: absolute;
|
||||
|
|
@ -68,25 +58,21 @@
|
|||
border-radius: 10em;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
|
||||
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'] .choices__button:focus {
|
||||
box-shadow: 0px 0px 0px 2px #00bcd4;
|
||||
.choices[data-type*=select-one] .choices__button:focus {
|
||||
box-shadow: 0 0 0 2px #00bcd4;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
|
||||
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one']:after {
|
||||
content: '';
|
||||
.choices[data-type*=select-one]::after {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-color: #333333 transparent transparent transparent;
|
||||
border-color: #333 transparent transparent transparent;
|
||||
border-width: 5px;
|
||||
position: absolute;
|
||||
right: 11.5px;
|
||||
|
|
@ -94,31 +80,27 @@
|
|||
margin-top: -2.5px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'].is-open:after {
|
||||
border-color: transparent transparent #333333 transparent;
|
||||
.choices[data-type*=select-one].is-open::after {
|
||||
border-color: transparent transparent #333 transparent;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'][dir='rtl']:after {
|
||||
.choices[data-type*=select-one][dir=rtl]::after {
|
||||
left: 11.5px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-one'][dir='rtl'] .choices__button {
|
||||
.choices[data-type*=select-one][dir=rtl] .choices__button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 25px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-multiple'] .choices__inner,
|
||||
.choices[data-type*='text'] .choices__inner {
|
||||
.choices[data-type*=select-multiple] .choices__inner,
|
||||
.choices[data-type*=text] .choices__inner {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-multiple'] .choices__button,
|
||||
.choices[data-type*='text'] .choices__button {
|
||||
.choices[data-type*=select-multiple] .choices__button,
|
||||
.choices[data-type*=text] .choices__button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
|
|
@ -127,17 +109,16 @@
|
|||
margin-left: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid #008fa1;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
background-size: 8px;
|
||||
width: 8px;
|
||||
line-height: 1;
|
||||
opacity: 0.75;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
|
||||
.choices[data-type*='text'] .choices__button:hover,
|
||||
.choices[data-type*='text'] .choices__button:focus {
|
||||
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
|
||||
.choices[data-type*=text] .choices__button:hover,
|
||||
.choices[data-type*=text] .choices__button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -147,22 +128,18 @@
|
|||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 7.5px 7.5px 3.75px;
|
||||
border: 1px solid #dddddd;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.is-focused .choices__inner,
|
||||
.is-open .choices__inner {
|
||||
.is-focused .choices__inner, .is-open .choices__inner {
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
|
||||
.is-open .choices__inner {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
}
|
||||
|
||||
.is-flipped.is-open .choices__inner {
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
}
|
||||
|
|
@ -172,18 +149,15 @@
|
|||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[dir='rtl'] .choices__list--single {
|
||||
[dir=rtl] .choices__list--single {
|
||||
padding-right: 4px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.choices__list--single .choices__item {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -191,7 +165,6 @@
|
|||
.choices__list--multiple {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
@ -203,37 +176,33 @@
|
|||
margin-bottom: 3.75px;
|
||||
background-color: #00bcd4;
|
||||
border: 1px solid #00a5bb;
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item[data-deletable] {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .choices__list--multiple .choices__item {
|
||||
[dir=rtl] .choices__list--multiple .choices__item {
|
||||
margin-right: 0;
|
||||
margin-left: 3.75px;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: #00a5bb;
|
||||
border: 1px solid #008fa1;
|
||||
}
|
||||
|
||||
.is-disabled .choices__list--multiple .choices__item {
|
||||
background-color: #aaaaaa;
|
||||
border: 1px solid #919191;
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
.choices__list--dropdown, .choices__list[aria-expanded] {
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
border-bottom-left-radius: 2.5px;
|
||||
|
|
@ -242,46 +211,39 @@
|
|||
word-break: break-all;
|
||||
will-change: visibility;
|
||||
}
|
||||
|
||||
.choices__list--dropdown.is-active {
|
||||
.is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.is-open .choices__list--dropdown {
|
||||
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
|
||||
.is-flipped .choices__list--dropdown {
|
||||
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__list {
|
||||
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
|
||||
position: relative;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__item {
|
||||
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .choices__list--dropdown .choices__item {
|
||||
[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.choices__list--dropdown .choices__item--selectable {
|
||||
.choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable:after {
|
||||
.choices__list--dropdown .choices__item--selectable::after, .choices__list[aria-expanded] .choices__item--selectable::after {
|
||||
content: attr(data-select-text);
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
|
|
@ -290,22 +252,20 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
[dir='rtl'] .choices__list--dropdown .choices__item--selectable {
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable {
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
[dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -320,7 +280,6 @@
|
|||
.choices__item--disabled {
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -336,15 +295,13 @@
|
|||
.choices__button {
|
||||
text-indent: -9999px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices__button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -360,12 +317,10 @@
|
|||
max-width: 100%;
|
||||
padding: 4px 0 4px 2px;
|
||||
}
|
||||
|
||||
.choices__input:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .choices__input {
|
||||
[dir=rtl] .choices__input {
|
||||
padding-right: 2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -374,4 +329,4 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*===== End of Choices ======*/
|
||||
/* ===== End of Choices ====== */
|
||||
|
|
|
|||
1
public/assets/styles/choices.css.map
Normal file
1
public/assets/styles/choices.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AA2BA;EACE;EACA;EACA,eApBkB;EAqBlB,WAxBqB;;AA0BrB;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;AAAA;EAEE,kBAlCsB;EAmCtB;EACA;;AAEF;EACE;;AAIJ;EACE;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE,kBApDyB;EAqDzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAOJ;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA,aA5HoB;EA6HpB;EACA;EACA,kBA9HiB;EA+HjB,iBAjIuB;EAkIvB,OAlIuB;EAmIvB;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;;AAKN;EACE;EACA;EACA;EACA,kBA1JiB;EA2JjB;EACA;EACA,eA/JsB;EAgKtB,WAnKqB;EAoKrB;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA,eA9MyB;EA+MzB;EACA,WAnNmB;EAoNnB;EACA;EACA;EACA,kBA9MoB;EA+MpB;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA,SApOgB;EAqOhB;EACA;EACA,kBAjP0B;EAkP1B;EACA;EACA;EACA,2BAzPsB;EA0PtB,4BA1PsB;EA2PtB;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA,WA3RmB;;AA6RnB;EACE;;AAIF;EADF;IAEI;;EAEA;IACE;IACA,WAtSe;IAuSf;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAKN;EACE;;AAEA;EACE;;;AAUR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WAxVqB;EAyVrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA,kBA3WiB;EA4WjB,WAjXqB;EAkXrB;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
|
||||
2
public/assets/styles/choices.min.css
vendored
2
public/assets/styles/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -74,7 +74,7 @@
|
|||
<img
|
||||
src="assets/images/logo.svg"
|
||||
alt="Choices.js logo"
|
||||
class="logo__img hidden-ie"
|
||||
class="logo-img hidden-ie"
|
||||
/>
|
||||
<h1 class="visible-ie">Choices.js</h1>
|
||||
</a>
|
||||
|
|
@ -540,6 +540,7 @@
|
|||
for (i = 0; i < genericExamples.length; ++i) {
|
||||
var element = genericExamples[i];
|
||||
new Choices(element, {
|
||||
allowHTML: true,
|
||||
placeholderValue: 'This is a placeholder set in the config',
|
||||
searchPlaceholderValue: 'This is a search placeholder',
|
||||
});
|
||||
|
|
@ -548,6 +549,7 @@
|
|||
var textRemove = new Choices(
|
||||
document.getElementById('choices-text-remove-button'),
|
||||
{
|
||||
allowHTML: true,
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
|
|
@ -556,12 +558,14 @@
|
|||
);
|
||||
|
||||
var textUniqueVals = new Choices('#choices-text-unique-values', {
|
||||
allowHTML: true,
|
||||
paste: false,
|
||||
duplicateItemsAllowed: false,
|
||||
editItems: true,
|
||||
});
|
||||
|
||||
var texti18n = new Choices('#choices-text-i18n', {
|
||||
allowHTML: true,
|
||||
paste: false,
|
||||
duplicateItemsAllowed: false,
|
||||
editItems: true,
|
||||
|
|
@ -578,6 +582,7 @@
|
|||
});
|
||||
|
||||
var textEmailFilter = new Choices('#choices-text-email-filter', {
|
||||
allowHTML: true,
|
||||
editItems: true,
|
||||
addItemFilter: function(value) {
|
||||
if (!value) {
|
||||
|
|
@ -591,6 +596,7 @@
|
|||
}).setValue(['joe@bloggs.com']);
|
||||
|
||||
var textDisabled = new Choices('#choices-text-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
removeItems: false,
|
||||
}).disable();
|
||||
|
|
@ -598,12 +604,14 @@
|
|||
var textPrependAppendVal = new Choices(
|
||||
'#choices-text-prepend-append-value',
|
||||
{
|
||||
allowHTML: true,
|
||||
prependValue: 'item-',
|
||||
appendValue: '-' + Date.now(),
|
||||
}
|
||||
).removeActiveItems();
|
||||
|
||||
var textPresetVal = new Choices('#choices-text-preset-values', {
|
||||
allowHTML: true,
|
||||
items: [
|
||||
'Josh Johnson',
|
||||
{
|
||||
|
|
@ -617,10 +625,12 @@
|
|||
});
|
||||
|
||||
var multipleDefault = new Choices(
|
||||
document.getElementById('choices-multiple-groups')
|
||||
document.getElementById('choices-multiple-groups'),
|
||||
{ allowHTML: true }
|
||||
);
|
||||
|
||||
var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
|
||||
allowHTML: false,
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
maxItemCount: 5,
|
||||
|
|
@ -641,12 +651,14 @@
|
|||
var multipleCancelButton = new Choices(
|
||||
'#choices-multiple-remove-button',
|
||||
{
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
}
|
||||
);
|
||||
|
||||
/* Use label on event */
|
||||
var choicesSelect = new Choices('#choices-multiple-labels', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{ value: 'One', label: 'Label One' },
|
||||
|
|
@ -681,6 +693,7 @@
|
|||
);
|
||||
|
||||
var singleFetch = new Choices('#choices-single-remote-fetch', {
|
||||
allowHTML: false,
|
||||
searchPlaceholderValue: 'Search for an Arctic Monkeys record',
|
||||
})
|
||||
.setChoices(function() {
|
||||
|
|
@ -701,6 +714,7 @@
|
|||
});
|
||||
|
||||
var singleXhrRemove = new Choices('#choices-single-remove-xhr', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
searchPlaceholderValue: "Search for a Smiths' record",
|
||||
}).setChoices(function(callback) {
|
||||
|
|
@ -718,6 +732,7 @@
|
|||
});
|
||||
|
||||
var singleNoSearch = new Choices('#choices-single-no-search', {
|
||||
allowHTML: true,
|
||||
searchEnabled: false,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
|
|
@ -737,6 +752,7 @@
|
|||
);
|
||||
|
||||
var singlePresetOpts = new Choices('#choices-single-preset-options', {
|
||||
allowHTML: true,
|
||||
placeholder: true,
|
||||
}).setChoices(
|
||||
[
|
||||
|
|
@ -766,6 +782,7 @@
|
|||
);
|
||||
|
||||
var singleSelectedOpt = new Choices('#choices-single-selected-option', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties.description'],
|
||||
choices: [
|
||||
{ value: 'One', label: 'Label One', selected: true },
|
||||
|
|
@ -783,18 +800,21 @@
|
|||
var customChoicesPropertiesViaDataAttributes = new Choices(
|
||||
'#choices-with-custom-props-via-html',
|
||||
{
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties'],
|
||||
}
|
||||
);
|
||||
|
||||
var singleNoSorting = new Choices('#choices-single-no-sorting', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
labelId: 'choices-single-no-sorting-label',
|
||||
});
|
||||
|
||||
var cities = new Choices(document.getElementById('cities'));
|
||||
var cities = new Choices(document.getElementById('cities'), { allowHTML: true });
|
||||
var tubeStations = new Choices(
|
||||
document.getElementById('tube-stations')
|
||||
document.getElementById('tube-stations'),
|
||||
{ allowHTML: true }
|
||||
).disable();
|
||||
|
||||
cities.passedElement.element.addEventListener('change', function(e) {
|
||||
|
|
@ -808,11 +828,12 @@
|
|||
var customTemplates = new Choices(
|
||||
document.getElementById('choices-single-custom-templates'),
|
||||
{
|
||||
allowHTML: true,
|
||||
callbackOnCreateTemplates: function(strToEl) {
|
||||
var classNames = this.config.classNames;
|
||||
var itemSelectText = this.config.itemSelectText;
|
||||
return {
|
||||
item: function(classNames, data) {
|
||||
item: function({ classNames }, data) {
|
||||
return strToEl(
|
||||
'\
|
||||
<div\
|
||||
|
|
@ -846,7 +867,7 @@
|
|||
'
|
||||
);
|
||||
},
|
||||
choice: function(classNames, data) {
|
||||
choice: function({ classNames }, data) {
|
||||
return strToEl(
|
||||
'\
|
||||
<div\
|
||||
|
|
@ -896,9 +917,12 @@
|
|||
}
|
||||
);
|
||||
|
||||
var resetSimple = new Choices(document.getElementById('reset-simple'));
|
||||
var resetSimple = new Choices(document.getElementById('reset-simple'), {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
var resetMultiple = new Choices('#reset-multiple', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -345,11 +345,43 @@
|
|||
<option value="value2">label2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-undefined">
|
||||
<label for="choices-allowhtml-undefined">HTML allowed by default</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-undefined"
|
||||
id="choices-allowhtml-undefined"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-true">
|
||||
<label for="choices-allowhtml-true">HTML allowed</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-true"
|
||||
id="choices-allowhtml-true"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-false">
|
||||
<label for="choices-allowhtml-false">HTML disabled</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-false"
|
||||
id="choices-allowhtml-false"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const choicesBasic = new Choices('#choices-basic');
|
||||
const choicesBasic = new Choices('#choices-basic', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector('button.disable')
|
||||
|
|
@ -364,39 +396,54 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-choice');
|
||||
new Choices('#choices-disabled-choice', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-add-items-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-via-attr');
|
||||
new Choices('#choices-disabled-via-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-selection-limit', {
|
||||
allowHTML: true,
|
||||
maxItemCount: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
allowHTML: true,
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
|
||||
new Choices('#choices-render-choice-limit', {
|
||||
allowHTML: true,
|
||||
renderChoiceLimit: 1,
|
||||
});
|
||||
|
||||
new Choices('#choices-search-floor', {
|
||||
allowHTML: true,
|
||||
searchFloor: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-value');
|
||||
new Choices('#choices-placeholder-via-option-value', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-attr');
|
||||
new Choices('#choices-placeholder-via-option-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-remote-data', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
}).setChoices(async () => {
|
||||
const data = await fetch('/data');
|
||||
|
|
@ -404,12 +451,16 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-scrolling-dropdown', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-groups');
|
||||
new Choices('#choices-groups', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-custom-properties', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties.country'],
|
||||
choices: [
|
||||
{
|
||||
|
|
@ -440,6 +491,7 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-non-string-values', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -466,13 +518,83 @@
|
|||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-within-form');
|
||||
new Choices('#choices-within-form', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-set-choice-by-value').setChoiceByValue(
|
||||
'Choice 2',
|
||||
);
|
||||
new Choices('#choices-set-choice-by-value', {
|
||||
allowHTML: true,
|
||||
}).setChoiceByValue('Choice 2');
|
||||
|
||||
new Choices('#choices-search-by-label', { searchFields: ['label'] });
|
||||
new Choices('#choices-search-by-label', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label']
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-undefined', {
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '<b>Choice 2</b>',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Choice 3',
|
||||
value: 'Choice 3',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-true', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '<b>Choice 2</b>',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Choice 3',
|
||||
value: 'Choice 3',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-false', {
|
||||
allowHTML: false,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '<b>Choice 2</b>',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Choice 3',
|
||||
value: 'Choice 3',
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -354,6 +354,33 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-undefined">
|
||||
<label for="choices-allowhtml-undefined">HTML allowed by default</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-undefined"
|
||||
id="choices-allowhtml-undefined"
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-true">
|
||||
<label for="choices-allowhtml-true">HTML allowed</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-true"
|
||||
id="choices-allowhtml-true"
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-false">
|
||||
<label for="choices-allowhtml-false">HTML disabled</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-false"
|
||||
id="choices-allowhtml-false"
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="new-destroy-init">
|
||||
<label for="choices-new-destroy-init">New, Destroy, Init</label>
|
||||
<select
|
||||
|
|
@ -372,7 +399,9 @@
|
|||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const choicesBasic = new Choices('#choices-basic');
|
||||
const choicesBasic = new Choices('#choices-basic', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector('button.disable')
|
||||
|
|
@ -387,14 +416,17 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-choice', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-choice-via-options', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{
|
||||
|
|
@ -418,33 +450,45 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-add-items-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-via-attr');
|
||||
new Choices('#choices-disabled-via-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
allowHTML: true,
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
|
||||
new Choices('#choices-render-choice-limit', {
|
||||
allowHTML: true,
|
||||
renderChoiceLimit: 1,
|
||||
});
|
||||
|
||||
new Choices('#choices-search-disabled', {
|
||||
allowHTML: true,
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-search-floor', {
|
||||
allowHTML: true,
|
||||
searchFloor: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-value');
|
||||
new Choices('#choices-placeholder-via-option-value', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-attr');
|
||||
new Choices('#choices-placeholder-via-option-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-remote-data', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
}).setChoices(async () => {
|
||||
const res = await fetch('/data');
|
||||
|
|
@ -452,13 +496,20 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-scrolling-dropdown', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-groups');
|
||||
new Choices('#choices-groups', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
const parent = new Choices('#choices-parent');
|
||||
const child = new Choices('#choices-child').disable();
|
||||
const parent = new Choices('#choices-parent', {
|
||||
allowHTML: true,
|
||||
});
|
||||
const child = new Choices('#choices-child', {
|
||||
allowHTML: true,
|
||||
}).disable();
|
||||
|
||||
parent.passedElement.element.addEventListener('change', event => {
|
||||
if (event.detail.value === 'Parent choice 2') {
|
||||
|
|
@ -469,6 +520,7 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-custom-properties', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties.country'],
|
||||
choices: [
|
||||
{
|
||||
|
|
@ -499,6 +551,7 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-non-string-values', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -525,15 +578,69 @@
|
|||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-within-form');
|
||||
new Choices('#choices-within-form', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-set-choice-by-value').setChoiceByValue(
|
||||
'Choice 2',
|
||||
);
|
||||
new Choices('#choices-set-choice-by-value', {
|
||||
allowHTML: true,
|
||||
}).setChoiceByValue('Choice 2');
|
||||
|
||||
new Choices('#choices-search-by-label', { searchFields: ['label'] });
|
||||
new Choices('#choices-search-by-label', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label']
|
||||
});
|
||||
|
||||
const newDestroyInitChoices = new Choices('#choices-new-destroy-init');
|
||||
new Choices('#choices-allowhtml-undefined', {
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Choice 2',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-true', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Choice 2',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-false', {
|
||||
allowHTML: false,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Choice 2',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const newDestroyInitChoices = new Choices('#choices-new-destroy-init', {
|
||||
allowHTML: true,
|
||||
});
|
||||
document
|
||||
.querySelector('button.destroy')
|
||||
.addEventListener('click', () => {
|
||||
|
|
|
|||
|
|
@ -76,6 +76,21 @@
|
|||
<input class="form-control" id="choices-unique-values" type="text" />
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-undefined">
|
||||
<label for="allowhtml-undefined">HTML allowed by default</label>
|
||||
<input class="form-control" id="allowhtml-undefined" type="text" />
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-true">
|
||||
<label for="allowhtml-true">HTML allowed</label>
|
||||
<input class="form-control" id="allowhtml-true" type="text" />
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-false">
|
||||
<label for="allowhtml-false">HTML disabled</label>
|
||||
<input class="form-control" id="allowhtml-false" type="text" />
|
||||
</div>
|
||||
|
||||
<div data-test-hook="input-limit">
|
||||
<label for="choices-input-limit">Input limit</label>
|
||||
<input class="form-control" id="choices-input-limit" type="text" />
|
||||
|
|
@ -134,25 +149,52 @@
|
|||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
new Choices('#choices-basic');
|
||||
new Choices('#choices-basic', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-edit-items', {
|
||||
allowHTML: true,
|
||||
editItems: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-unique-values', {
|
||||
allowHTML: true,
|
||||
duplicateItemsAllowed: false,
|
||||
});
|
||||
|
||||
new Choices('#allowhtml-undefined', {
|
||||
items: [
|
||||
'<b>Mason Rogers</b>'
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#allowhtml-true', {
|
||||
allowHTML: true,
|
||||
items: [
|
||||
'<b>Mason Rogers</b>'
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#allowhtml-false', {
|
||||
allowHTML: false,
|
||||
items: [
|
||||
'<b>Mason Rogers</b>'
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-input-limit', {
|
||||
allowHTML: true,
|
||||
maxItemCount: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-add-item-filter', {
|
||||
allowHTML: true,
|
||||
addItems: true,
|
||||
addItemFilter: value => {
|
||||
const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
|
|
@ -162,17 +204,22 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-adding-items-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-via-attr');
|
||||
new Choices('#choices-disabled-via-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
allowHTML: true,
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
|
||||
new Choices('#choices-prepopulated', {
|
||||
allowHTML: true,
|
||||
items: [
|
||||
'Josh Johnson',
|
||||
{
|
||||
|
|
@ -186,11 +233,14 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-placeholder', {
|
||||
allowHTML: true,
|
||||
placeholder: true,
|
||||
placeholderValue: 'I am a placeholder',
|
||||
});
|
||||
|
||||
new Choices('#choices-within-form');
|
||||
new Choices('#choices-within-form', {
|
||||
allowHTML: true,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
1
public/types/cypress/integration/select-multiple.spec.d.ts
vendored
Normal file
1
public/types/cypress/integration/select-multiple.spec.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
//# sourceMappingURL=select-multiple.spec.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"select-multiple.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/integration/select-multiple.spec.ts"],"names":[],"mappings":""}
|
||||
1
public/types/cypress/integration/select-one.spec.d.ts
vendored
Normal file
1
public/types/cypress/integration/select-one.spec.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
//# sourceMappingURL=select-one.spec.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"select-one.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/integration/select-one.spec.ts"],"names":[],"mappings":""}
|
||||
1
public/types/cypress/integration/text.spec.d.ts
vendored
Normal file
1
public/types/cypress/integration/text.spec.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
//# sourceMappingURL=text.spec.d.ts.map
|
||||
1
public/types/cypress/integration/text.spec.d.ts.map
Normal file
1
public/types/cypress/integration/text.spec.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"text.spec.d.ts","sourceRoot":"","sources":["../../../../cypress/integration/text.spec.ts"],"names":[],"mappings":""}
|
||||
7
public/types/src/index.d.ts
vendored
Normal file
7
public/types/src/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Choices from './scripts/choices';
|
||||
export * from './scripts/interfaces';
|
||||
export * from './scripts/constants';
|
||||
export * from './scripts/defaults';
|
||||
export { default as templates } from './scripts/templates';
|
||||
export default Choices;
|
||||
//# sourceMappingURL=index.d.ts.map
|
||||
1
public/types/src/index.d.ts.map
Normal file
1
public/types/src/index.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAExC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE3D,eAAe,OAAO,CAAC"}
|
||||
44
public/types/src/scripts/actions/choices.d.ts
vendored
Normal file
44
public/types/src/scripts/actions/choices.d.ts
vendored
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { ACTION_TYPES } from '../constants';
|
||||
import { Choice } from '../interfaces/choice';
|
||||
export interface AddChoiceAction {
|
||||
type: typeof ACTION_TYPES.ADD_CHOICE;
|
||||
id: number;
|
||||
value: string;
|
||||
label: string;
|
||||
groupId: number;
|
||||
disabled: boolean;
|
||||
elementId: number;
|
||||
customProperties: object;
|
||||
placeholder: boolean;
|
||||
keyCode: number;
|
||||
}
|
||||
export interface Result<T> {
|
||||
item: T;
|
||||
score: number;
|
||||
}
|
||||
export interface FilterChoicesAction {
|
||||
type: typeof ACTION_TYPES.FILTER_CHOICES;
|
||||
results: Result<Choice>[];
|
||||
}
|
||||
export interface ActivateChoicesAction {
|
||||
type: typeof ACTION_TYPES.ACTIVATE_CHOICES;
|
||||
active: boolean;
|
||||
}
|
||||
export interface ClearChoicesAction {
|
||||
type: typeof ACTION_TYPES.CLEAR_CHOICES;
|
||||
}
|
||||
export declare const addChoice: ({ value, label, id, groupId, disabled, elementId, customProperties, placeholder, keyCode, }: {
|
||||
value: any;
|
||||
label: any;
|
||||
id: any;
|
||||
groupId: any;
|
||||
disabled: any;
|
||||
elementId: any;
|
||||
customProperties: any;
|
||||
placeholder: any;
|
||||
keyCode: any;
|
||||
}) => AddChoiceAction;
|
||||
export declare const filterChoices: (results: Result<Choice>[]) => FilterChoicesAction;
|
||||
export declare const activateChoices: (active?: boolean) => ActivateChoicesAction;
|
||||
export declare const clearChoices: () => ClearChoicesAction;
|
||||
//# sourceMappingURL=choices.d.ts.map
|
||||
1
public/types/src/scripts/actions/choices.d.ts.map
Normal file
1
public/types/src/scripts/actions/choices.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"choices.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/choices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,YAAY,CAAC,UAAU,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,YAAY,CAAC,cAAc,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,YAAY,CAAC,gBAAgB,CAAC;IAC3C,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,YAAY,CAAC,aAAa,CAAC;CACzC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;MAUlB,eAWF,CAAC;AAEH,eAAO,MAAM,aAAa,YACf,OAAO,MAAM,CAAC,EAAE,KACxB,mBAGD,CAAC;AAEH,eAAO,MAAM,eAAe,wBAAoB,qBAG9C,CAAC;AAEH,eAAO,MAAM,YAAY,QAAO,kBAE9B,CAAC"}
|
||||
2
public/types/src/scripts/actions/choices.test.d.ts
vendored
Normal file
2
public/types/src/scripts/actions/choices.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=choices.test.d.ts.map
|
||||
1
public/types/src/scripts/actions/choices.test.d.ts.map
Normal file
1
public/types/src/scripts/actions/choices.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"choices.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/choices.test.ts"],"names":[],"mappings":""}
|
||||
15
public/types/src/scripts/actions/groups.d.ts
vendored
Normal file
15
public/types/src/scripts/actions/groups.d.ts
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { ACTION_TYPES } from '../constants';
|
||||
export interface AddGroupAction {
|
||||
type: typeof ACTION_TYPES.ADD_GROUP;
|
||||
id: number;
|
||||
value: string;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
}
|
||||
export declare const addGroup: ({ value, id, active, disabled, }: {
|
||||
id: number;
|
||||
value: string;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
}) => AddGroupAction;
|
||||
//# sourceMappingURL=groups.d.ts.map
|
||||
1
public/types/src/scripts/actions/groups.d.ts.map
Normal file
1
public/types/src/scripts/actions/groups.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"groups.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,YAAY,CAAC,SAAS,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ;QAMf,MAAM;WACH,MAAM;YACL,OAAO;cACL,OAAO;MACf,cAMF,CAAC"}
|
||||
2
public/types/src/scripts/actions/groups.test.d.ts
vendored
Normal file
2
public/types/src/scripts/actions/groups.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=groups.test.d.ts.map
|
||||
1
public/types/src/scripts/actions/groups.test.d.ts.map
Normal file
1
public/types/src/scripts/actions/groups.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"groups.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/groups.test.ts"],"names":[],"mappings":""}
|
||||
35
public/types/src/scripts/actions/items.d.ts
vendored
Normal file
35
public/types/src/scripts/actions/items.d.ts
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { ACTION_TYPES } from '../constants';
|
||||
export interface AddItemAction {
|
||||
type: typeof ACTION_TYPES.ADD_ITEM;
|
||||
id: number;
|
||||
value: string;
|
||||
label: string;
|
||||
choiceId: number;
|
||||
groupId: number;
|
||||
customProperties: object;
|
||||
placeholder: boolean;
|
||||
keyCode: number;
|
||||
}
|
||||
export interface RemoveItemAction {
|
||||
type: typeof ACTION_TYPES.REMOVE_ITEM;
|
||||
id: number;
|
||||
choiceId: number;
|
||||
}
|
||||
export interface HighlightItemAction {
|
||||
type: typeof ACTION_TYPES.HIGHLIGHT_ITEM;
|
||||
id: number;
|
||||
highlighted: boolean;
|
||||
}
|
||||
export declare const addItem: ({ value, label, id, choiceId, groupId, customProperties, placeholder, keyCode, }: {
|
||||
id: number;
|
||||
value: string;
|
||||
label: string;
|
||||
choiceId: number;
|
||||
groupId: number;
|
||||
customProperties: object;
|
||||
placeholder: boolean;
|
||||
keyCode: number;
|
||||
}) => AddItemAction;
|
||||
export declare const removeItem: (id: number, choiceId: number) => RemoveItemAction;
|
||||
export declare const highlightItem: (id: number, highlighted: boolean) => HighlightItemAction;
|
||||
//# sourceMappingURL=items.d.ts.map
|
||||
1
public/types/src/scripts/actions/items.d.ts.map
Normal file
1
public/types/src/scripts/actions/items.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/items.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,YAAY,CAAC,WAAW,CAAC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,YAAY,CAAC,cAAc,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,OAAO;QAUd,MAAM;WACH,MAAM;WACN,MAAM;cACH,MAAM;aACP,MAAM;sBACG,MAAM;iBACX,OAAO;aACX,MAAM;MACb,aAUF,CAAC;AAEH,eAAO,MAAM,UAAU,OAAQ,MAAM,YAAY,MAAM,KAAG,gBAIxD,CAAC;AAEH,eAAO,MAAM,aAAa,OACpB,MAAM,eACG,OAAO,KACnB,mBAID,CAAC"}
|
||||
2
public/types/src/scripts/actions/items.test.d.ts
vendored
Normal file
2
public/types/src/scripts/actions/items.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=items.test.d.ts.map
|
||||
1
public/types/src/scripts/actions/items.test.d.ts.map
Normal file
1
public/types/src/scripts/actions/items.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"items.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/items.test.ts"],"names":[],"mappings":""}
|
||||
17
public/types/src/scripts/actions/misc.d.ts
vendored
Normal file
17
public/types/src/scripts/actions/misc.d.ts
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { ACTION_TYPES } from '../constants';
|
||||
import { State } from '../interfaces/state';
|
||||
export interface ClearAllAction {
|
||||
type: typeof ACTION_TYPES.CLEAR_ALL;
|
||||
}
|
||||
export interface ResetToAction {
|
||||
type: typeof ACTION_TYPES.RESET_TO;
|
||||
state: State;
|
||||
}
|
||||
export interface SetIsLoadingAction {
|
||||
type: typeof ACTION_TYPES.SET_IS_LOADING;
|
||||
isLoading: boolean;
|
||||
}
|
||||
export declare const clearAll: () => ClearAllAction;
|
||||
export declare const resetTo: (state: State) => ResetToAction;
|
||||
export declare const setIsLoading: (isLoading: boolean) => SetIsLoadingAction;
|
||||
//# sourceMappingURL=misc.d.ts.map
|
||||
1
public/types/src/scripts/actions/misc.d.ts.map
Normal file
1
public/types/src/scripts/actions/misc.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,YAAY,CAAC,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,YAAY,CAAC,QAAQ,CAAC;IACnC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,YAAY,CAAC,cAAc,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,QAAO,cAE1B,CAAC;AAEH,eAAO,MAAM,OAAO,UAAW,KAAK,KAAG,aAGrC,CAAC;AAEH,eAAO,MAAM,YAAY,cAAe,OAAO,KAAG,kBAGhD,CAAC"}
|
||||
2
public/types/src/scripts/actions/misc.test.d.ts
vendored
Normal file
2
public/types/src/scripts/actions/misc.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=misc.test.d.ts.map
|
||||
1
public/types/src/scripts/actions/misc.test.d.ts.map
Normal file
1
public/types/src/scripts/actions/misc.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"misc.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/actions/misc.test.ts"],"names":[],"mappings":""}
|
||||
218
public/types/src/scripts/choices.d.ts
vendored
Normal file
218
public/types/src/scripts/choices.d.ts
vendored
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
import { Container, Dropdown, Input, List, WrappedInput, WrappedSelect } from './components';
|
||||
import { Choice } from './interfaces/choice';
|
||||
import { Group } from './interfaces/group';
|
||||
import { Item } from './interfaces/item';
|
||||
import { Notice } from './interfaces/notice';
|
||||
import { Options } from './interfaces/options';
|
||||
import { State } from './interfaces/state';
|
||||
import Store from './store/store';
|
||||
import templates from './templates';
|
||||
/**
|
||||
* Choices
|
||||
* @author Josh Johnson<josh@joshuajohnson.co.uk>
|
||||
*/
|
||||
declare class Choices implements Choices {
|
||||
static get defaults(): {
|
||||
options: Partial<Options>;
|
||||
templates: typeof templates;
|
||||
};
|
||||
initialised: boolean;
|
||||
config: Options;
|
||||
passedElement: WrappedInput | WrappedSelect;
|
||||
containerOuter: Container;
|
||||
containerInner: Container;
|
||||
choiceList: List;
|
||||
itemList: List;
|
||||
input: Input;
|
||||
dropdown: Dropdown;
|
||||
_isTextElement: boolean;
|
||||
_isSelectOneElement: boolean;
|
||||
_isSelectMultipleElement: boolean;
|
||||
_isSelectElement: boolean;
|
||||
_store: Store;
|
||||
_templates: typeof templates;
|
||||
_initialState: State;
|
||||
_currentState: State;
|
||||
_prevState: State;
|
||||
_currentValue: string;
|
||||
_canSearch: boolean;
|
||||
_isScrollingOnIe: boolean;
|
||||
_highlightPosition: number;
|
||||
_wasTap: boolean;
|
||||
_isSearching: boolean;
|
||||
_placeholderValue: string | null;
|
||||
_baseId: string;
|
||||
_direction: HTMLElement['dir'];
|
||||
_idNames: {
|
||||
itemChoice: string;
|
||||
};
|
||||
_presetGroups: Group[] | HTMLOptGroupElement[] | Element[];
|
||||
_presetOptions: Item[] | HTMLOptionElement[];
|
||||
_presetChoices: Partial<Choice>[];
|
||||
_presetItems: Item[] | string[];
|
||||
constructor(element?: string | Element | HTMLInputElement | HTMLSelectElement, userConfig?: Partial<Options>);
|
||||
init(): void;
|
||||
destroy(): void;
|
||||
enable(): this;
|
||||
disable(): this;
|
||||
highlightItem(item: Item, runEvent?: boolean): this;
|
||||
unhighlightItem(item: Item): this;
|
||||
highlightAll(): this;
|
||||
unhighlightAll(): this;
|
||||
removeActiveItemsByValue(value: string): this;
|
||||
removeActiveItems(excludedId: number): this;
|
||||
removeHighlightedItems(runEvent?: boolean): this;
|
||||
showDropdown(preventInputFocus?: boolean): this;
|
||||
hideDropdown(preventInputBlur?: boolean): this;
|
||||
getValue(valueOnly?: boolean): string[] | Item[] | Item | string;
|
||||
setValue(items: string[] | Item[]): this;
|
||||
setChoiceByValue(value: string): this;
|
||||
/**
|
||||
* Set choices of select input via an array of objects (or function that returns array of object or promise of it),
|
||||
* a value field name and a label field name.
|
||||
* This behaves the same as passing items via the choices option but can be called after initialising Choices.
|
||||
* This can also be used to add groups of choices (see example 2); Optionally pass a true `replaceChoices` value to remove any existing choices.
|
||||
* Optionally pass a `customProperties` object to add additional data to your choices (useful when searching/filtering etc).
|
||||
*
|
||||
* **Input types affected:** select-one, select-multiple
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* const example = new Choices(element);
|
||||
*
|
||||
* example.setChoices([
|
||||
* {value: 'One', label: 'Label One', disabled: true},
|
||||
* {value: 'Two', label: 'Label Two', selected: true},
|
||||
* {value: 'Three', label: 'Label Three'},
|
||||
* ], 'value', 'label', false);
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* const example = new Choices(element);
|
||||
*
|
||||
* example.setChoices(async () => {
|
||||
* try {
|
||||
* const items = await fetch('/items');
|
||||
* return items.json()
|
||||
* } catch(err) {
|
||||
* console.error(err)
|
||||
* }
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* const example = new Choices(element);
|
||||
*
|
||||
* example.setChoices([{
|
||||
* label: 'Group one',
|
||||
* id: 1,
|
||||
* disabled: false,
|
||||
* choices: [
|
||||
* {value: 'Child One', label: 'Child One', selected: true},
|
||||
* {value: 'Child Two', label: 'Child Two', disabled: true},
|
||||
* {value: 'Child Three', label: 'Child Three'},
|
||||
* ]
|
||||
* },
|
||||
* {
|
||||
* label: 'Group two',
|
||||
* id: 2,
|
||||
* disabled: false,
|
||||
* choices: [
|
||||
* {value: 'Child Four', label: 'Child Four', disabled: true},
|
||||
* {value: 'Child Five', label: 'Child Five'},
|
||||
* {value: 'Child Six', label: 'Child Six', customProperties: {
|
||||
* description: 'Custom description about child six',
|
||||
* random: 'Another random custom property'
|
||||
* }},
|
||||
* ]
|
||||
* }], 'value', 'label', false);
|
||||
* ```
|
||||
*/
|
||||
setChoices(choicesArrayOrFetcher?: Choice[] | Group[] | ((instance: Choices) => Choice[] | Promise<Choice[]>), value?: string, label?: string, replaceChoices?: boolean): this | Promise<this>;
|
||||
clearChoices(): this;
|
||||
clearStore(): this;
|
||||
clearInput(): this;
|
||||
_render(): void;
|
||||
_renderChoices(): void;
|
||||
_renderItems(): void;
|
||||
_createGroupsFragment(groups: Group[], choices: Choice[], fragment?: DocumentFragment): DocumentFragment;
|
||||
_createChoicesFragment(choices: Choice[], fragment?: DocumentFragment, withinGroup?: boolean): DocumentFragment;
|
||||
_createItemsFragment(items: Item[], fragment?: DocumentFragment): DocumentFragment;
|
||||
_triggerChange(value: any): void;
|
||||
_selectPlaceholderChoice(placeholderChoice: Choice): void;
|
||||
_handleButtonAction(activeItems?: Item[], element?: HTMLElement): void;
|
||||
_handleItemAction(activeItems?: Item[], element?: HTMLElement, hasShiftKey?: boolean): void;
|
||||
_handleChoiceAction(activeItems?: Item[], element?: HTMLElement): void;
|
||||
_handleBackspace(activeItems?: Item[]): void;
|
||||
_startLoading(): void;
|
||||
_stopLoading(): void;
|
||||
_handleLoadingState(setLoading?: boolean): void;
|
||||
_handleSearch(value: string): void;
|
||||
_canAddItem(activeItems: Item[], value: string): Notice;
|
||||
_searchChoices(value: string): number;
|
||||
_addEventListeners(): void;
|
||||
_removeEventListeners(): void;
|
||||
_onKeyDown(event: KeyboardEvent): void;
|
||||
_onKeyUp({ target, keyCode, }: Pick<KeyboardEvent, 'target' | 'keyCode'>): void;
|
||||
_onSelectKey(event: KeyboardEvent, hasItems: boolean): void;
|
||||
_onEnterKey(event: KeyboardEvent, activeItems: Item[], hasActiveDropdown: boolean): void;
|
||||
_onEscapeKey(hasActiveDropdown: boolean): void;
|
||||
_onDirectionKey(event: KeyboardEvent, hasActiveDropdown: boolean): void;
|
||||
_onDeleteKey(event: KeyboardEvent, activeItems: Item[], hasFocusedInput: boolean): void;
|
||||
_onTouchMove(): void;
|
||||
_onTouchEnd(event: TouchEvent): void;
|
||||
/**
|
||||
* Handles mousedown event in capture mode for containetOuter.element
|
||||
*/
|
||||
_onMouseDown(event: MouseEvent): void;
|
||||
/**
|
||||
* Handles mouseover event over this.dropdown
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
_onMouseOver({ target }: Pick<MouseEvent, 'target'>): void;
|
||||
_onClick({ target }: Pick<MouseEvent, 'target'>): void;
|
||||
_onFocus({ target }: Pick<FocusEvent, 'target'>): void;
|
||||
_onBlur({ target }: Pick<FocusEvent, 'target'>): void;
|
||||
_onFormReset(): void;
|
||||
_highlightChoice(el?: HTMLElement | null): void;
|
||||
_addItem({ value, label, choiceId, groupId, customProperties, placeholder, keyCode, }: {
|
||||
value: string;
|
||||
label?: string | null;
|
||||
choiceId?: number;
|
||||
groupId?: number;
|
||||
customProperties?: object;
|
||||
placeholder?: boolean;
|
||||
keyCode?: number;
|
||||
}): void;
|
||||
_removeItem(item: Item): void;
|
||||
_addChoice({ value, label, isSelected, isDisabled, groupId, customProperties, placeholder, keyCode, }: {
|
||||
value: string;
|
||||
label?: string | null;
|
||||
isSelected?: boolean;
|
||||
isDisabled?: boolean;
|
||||
groupId?: number;
|
||||
customProperties?: Record<string, any>;
|
||||
placeholder?: boolean;
|
||||
keyCode?: number;
|
||||
}): void;
|
||||
_addGroup({ group, id, valueKey, labelKey }: {
|
||||
group: any;
|
||||
id: any;
|
||||
valueKey?: string | undefined;
|
||||
labelKey?: string | undefined;
|
||||
}): void;
|
||||
_getTemplate(template: string, ...args: any): any;
|
||||
_createTemplates(): void;
|
||||
_createElements(): void;
|
||||
_createStructure(): void;
|
||||
_addPredefinedGroups(groups: Group[] | HTMLOptGroupElement[] | Element[]): void;
|
||||
_addPredefinedChoices(choices: Partial<Choice>[]): void;
|
||||
_addPredefinedItems(items: Item[] | string[]): void;
|
||||
_setChoiceOrItem(item: any): void;
|
||||
_findAndSelectChoiceByValue(value: string): void;
|
||||
_generatePlaceholderValue(): string | null;
|
||||
}
|
||||
export default Choices;
|
||||
//# sourceMappingURL=choices.d.ts.map
|
||||
1
public/types/src/scripts/choices.d.ts.map
Normal file
1
public/types/src/scripts/choices.d.ts.map
Normal file
File diff suppressed because one or more lines are too long
2
public/types/src/scripts/choices.test.d.ts
vendored
Normal file
2
public/types/src/scripts/choices.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=choices.test.d.ts.map
|
||||
1
public/types/src/scripts/choices.test.d.ts.map
Normal file
1
public/types/src/scripts/choices.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"choices.test.d.ts","sourceRoot":"","sources":["../../../../src/scripts/choices.test.ts"],"names":[],"mappings":""}
|
||||
43
public/types/src/scripts/components/container.d.ts
vendored
Normal file
43
public/types/src/scripts/components/container.d.ts
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { ClassNames } from '../interfaces/class-names';
|
||||
import { PositionOptionsType } from '../interfaces/position-options-type';
|
||||
import { PassedElementType } from '../interfaces/passed-element-type';
|
||||
export default class Container {
|
||||
element: HTMLElement;
|
||||
type: PassedElementType;
|
||||
classNames: ClassNames;
|
||||
position: PositionOptionsType;
|
||||
isOpen: boolean;
|
||||
isFlipped: boolean;
|
||||
isFocussed: boolean;
|
||||
isDisabled: boolean;
|
||||
isLoading: boolean;
|
||||
constructor({ element, type, classNames, position, }: {
|
||||
element: HTMLElement;
|
||||
type: PassedElementType;
|
||||
classNames: ClassNames;
|
||||
position: PositionOptionsType;
|
||||
});
|
||||
addEventListeners(): void;
|
||||
removeEventListeners(): void;
|
||||
/**
|
||||
* Determine whether container should be flipped based on passed
|
||||
* dropdown position
|
||||
*/
|
||||
shouldFlip(dropdownPos: number): boolean;
|
||||
setActiveDescendant(activeDescendantID: string): void;
|
||||
removeActiveDescendant(): void;
|
||||
open(dropdownPos: number): void;
|
||||
close(): void;
|
||||
focus(): void;
|
||||
addFocusState(): void;
|
||||
removeFocusState(): void;
|
||||
enable(): void;
|
||||
disable(): void;
|
||||
wrap(element: HTMLSelectElement | HTMLInputElement | HTMLElement): void;
|
||||
unwrap(element: HTMLElement): void;
|
||||
addLoadingState(): void;
|
||||
removeLoadingState(): void;
|
||||
_onFocus(): void;
|
||||
_onBlur(): void;
|
||||
}
|
||||
//# sourceMappingURL=container.d.ts.map
|
||||
1
public/types/src/scripts/components/container.d.ts.map
Normal file
1
public/types/src/scripts/components/container.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/container.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,mBAAmB,CAAC;IAE9B,MAAM,EAAE,OAAO,CAAC;IAEhB,SAAS,EAAE,OAAO,CAAC;IAEnB,UAAU,EAAE,OAAO,CAAC;IAEpB,UAAU,EAAE,OAAO,CAAC;IAEpB,SAAS,EAAE,OAAO,CAAC;gBAEP,EACV,OAAO,EACP,IAAI,EACJ,UAAU,EACV,QAAQ,GACT,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;QACvB,QAAQ,EAAE,mBAAmB,CAAC;KAC/B;IAcD,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;OAGG;IACH,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO;IAkBxC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI;IAIrD,sBAAsB,IAAI,IAAI;IAI9B,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAW/B,KAAK,IAAI,IAAI;IAab,KAAK,IAAI,IAAI;IAMb,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;IAIxB,MAAM,IAAI,IAAI;IASd,OAAO,IAAI,IAAI;IASf,IAAI,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAIvE,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IASlC,eAAe,IAAI,IAAI;IAMvB,kBAAkB,IAAI,IAAI;IAM1B,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;CAGhB"}
|
||||
2
public/types/src/scripts/components/container.test.d.ts
vendored
Normal file
2
public/types/src/scripts/components/container.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=container.test.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"container.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/container.test.ts"],"names":[],"mappings":""}
|
||||
27
public/types/src/scripts/components/dropdown.d.ts
vendored
Normal file
27
public/types/src/scripts/components/dropdown.d.ts
vendored
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { ClassNames } from '../interfaces/class-names';
|
||||
import { PassedElementType } from '../interfaces/passed-element-type';
|
||||
export default class Dropdown {
|
||||
element: HTMLElement;
|
||||
type: PassedElementType;
|
||||
classNames: ClassNames;
|
||||
isActive: boolean;
|
||||
constructor({ element, type, classNames, }: {
|
||||
element: HTMLElement;
|
||||
type: PassedElementType;
|
||||
classNames: ClassNames;
|
||||
});
|
||||
/**
|
||||
* Bottom position of dropdown in viewport coordinates
|
||||
*/
|
||||
get distanceFromTopWindow(): number;
|
||||
getChild(selector: string): HTMLElement | null;
|
||||
/**
|
||||
* Show dropdown to user by adding active state class
|
||||
*/
|
||||
show(): this;
|
||||
/**
|
||||
* Hide dropdown from user
|
||||
*/
|
||||
hide(): this;
|
||||
}
|
||||
//# sourceMappingURL=dropdown.d.ts.map
|
||||
1
public/types/src/scripts/components/dropdown.d.ts.map
Normal file
1
public/types/src/scripts/components/dropdown.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC3B,OAAO,EAAE,WAAW,CAAC;IAErB,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;gBAEN,EACV,OAAO,EACP,IAAI,EACJ,UAAU,GACX,EAAE;QACD,OAAO,EAAE,WAAW,CAAC;QACrB,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;KACxB;IAOD;;OAEG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI9C;;OAEG;IACH,IAAI,IAAI,IAAI;IAQZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAOb"}
|
||||
2
public/types/src/scripts/components/dropdown.test.d.ts
vendored
Normal file
2
public/types/src/scripts/components/dropdown.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=dropdown.test.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"dropdown.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/dropdown.test.ts"],"names":[],"mappings":""}
|
||||
8
public/types/src/scripts/components/index.d.ts
vendored
Normal file
8
public/types/src/scripts/components/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import Dropdown from './dropdown';
|
||||
import Container from './container';
|
||||
import Input from './input';
|
||||
import List from './list';
|
||||
import WrappedInput from './wrapped-input';
|
||||
import WrappedSelect from './wrapped-select';
|
||||
export { Dropdown, Container, Input, List, WrappedInput, WrappedSelect };
|
||||
//# sourceMappingURL=index.d.ts.map
|
||||
1
public/types/src/scripts/components/index.d.ts.map
Normal file
1
public/types/src/scripts/components/index.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
||||
39
public/types/src/scripts/components/input.d.ts
vendored
Normal file
39
public/types/src/scripts/components/input.d.ts
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { ClassNames } from '../interfaces/class-names';
|
||||
import { PassedElementType } from '../interfaces/passed-element-type';
|
||||
export default class Input {
|
||||
element: HTMLInputElement;
|
||||
type: PassedElementType;
|
||||
classNames: ClassNames;
|
||||
preventPaste: boolean;
|
||||
isFocussed: boolean;
|
||||
isDisabled: boolean;
|
||||
constructor({ element, type, classNames, preventPaste, }: {
|
||||
element: HTMLInputElement;
|
||||
type: PassedElementType;
|
||||
classNames: ClassNames;
|
||||
preventPaste: boolean;
|
||||
});
|
||||
set placeholder(placeholder: string);
|
||||
get value(): string;
|
||||
set value(value: string);
|
||||
get rawValue(): string;
|
||||
addEventListeners(): void;
|
||||
removeEventListeners(): void;
|
||||
enable(): void;
|
||||
disable(): void;
|
||||
focus(): void;
|
||||
blur(): void;
|
||||
clear(setWidth?: boolean): this;
|
||||
/**
|
||||
* Set the correct input width based on placeholder
|
||||
* value or input value
|
||||
*/
|
||||
setWidth(): void;
|
||||
setActiveDescendant(activeDescendantID: string): void;
|
||||
removeActiveDescendant(): void;
|
||||
_onInput(): void;
|
||||
_onPaste(event: ClipboardEvent): void;
|
||||
_onFocus(): void;
|
||||
_onBlur(): void;
|
||||
}
|
||||
//# sourceMappingURL=input.d.ts.map
|
||||
1
public/types/src/scripts/components/input.d.ts.map
Normal file
1
public/types/src/scripts/components/input.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,KAAK;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAE1B,IAAI,EAAE,iBAAiB,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,YAAY,EAAE,OAAO,CAAC;IAEtB,UAAU,EAAE,OAAO,CAAC;IAEpB,UAAU,EAAE,OAAO,CAAC;gBAER,EACV,OAAO,EACP,IAAI,EACJ,UAAU,EACV,YAAY,GACb,EAAE;QACD,OAAO,EAAE,gBAAgB,CAAC;QAC1B,IAAI,EAAE,iBAAiB,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;KACvB;IAcD,IAAI,WAAW,CAAC,WAAW,EAAE,MAAM,EAElC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAO5B,MAAM,IAAI,IAAI;IAKd,OAAO,IAAI,IAAI;IAKf,KAAK,IAAI,IAAI;IAMb,IAAI,IAAI,IAAI;IAMZ,KAAK,CAAC,QAAQ,UAAO,GAAG,IAAI;IAY5B;;;OAGG;IACH,QAAQ,IAAI,IAAI;IAOhB,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI;IAIrD,sBAAsB,IAAI,IAAI;IAI9B,QAAQ,IAAI,IAAI;IAMhB,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMrC,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;CAGhB"}
|
||||
2
public/types/src/scripts/components/input.test.d.ts
vendored
Normal file
2
public/types/src/scripts/components/input.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=input.test.d.ts.map
|
||||
1
public/types/src/scripts/components/input.test.d.ts.map
Normal file
1
public/types/src/scripts/components/input.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"input.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/input.test.ts"],"names":[],"mappings":""}
|
||||
18
public/types/src/scripts/components/list.d.ts
vendored
Normal file
18
public/types/src/scripts/components/list.d.ts
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export default class List {
|
||||
element: HTMLElement;
|
||||
scrollPos: number;
|
||||
height: number;
|
||||
constructor({ element }: {
|
||||
element: HTMLElement;
|
||||
});
|
||||
clear(): void;
|
||||
append(node: Element | DocumentFragment): void;
|
||||
getChild(selector: string): HTMLElement | null;
|
||||
hasChildren(): boolean;
|
||||
scrollToTop(): void;
|
||||
scrollToChildElement(element: HTMLElement, direction: 1 | -1): void;
|
||||
_scrollDown(scrollPos: number, strength: number, destination: number): void;
|
||||
_scrollUp(scrollPos: number, strength: number, destination: number): void;
|
||||
_animateScroll(destination: number, direction: number): void;
|
||||
}
|
||||
//# sourceMappingURL=list.d.ts.map
|
||||
1
public/types/src/scripts/components/list.d.ts.map
Normal file
1
public/types/src/scripts/components/list.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/list.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,IAAI;IACvB,OAAO,EAAE,WAAW,CAAC;IAErB,SAAS,EAAE,MAAM,CAAC;IAElB,MAAM,EAAE,MAAM,CAAC;gBAEH,EAAE,OAAO,EAAE,EAAE;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE;IAMjD,KAAK,IAAI,IAAI;IAIb,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAAI;IAI9C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI9C,WAAW,IAAI,OAAO;IAItB,WAAW,IAAI,IAAI;IAInB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IAwBnE,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAO3E,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;IAOzE,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;CAyB7D"}
|
||||
2
public/types/src/scripts/components/list.test.d.ts
vendored
Normal file
2
public/types/src/scripts/components/list.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=list.test.d.ts.map
|
||||
1
public/types/src/scripts/components/list.test.d.ts.map
Normal file
1
public/types/src/scripts/components/list.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"list.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/list.test.ts"],"names":[],"mappings":""}
|
||||
21
public/types/src/scripts/components/wrapped-element.d.ts
vendored
Normal file
21
public/types/src/scripts/components/wrapped-element.d.ts
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { ClassNames } from '../interfaces/class-names';
|
||||
import { EventType } from '../interfaces/event-type';
|
||||
export default class WrappedElement {
|
||||
element: HTMLInputElement | HTMLSelectElement;
|
||||
classNames: ClassNames;
|
||||
isDisabled: boolean;
|
||||
constructor({ element, classNames }: {
|
||||
element: any;
|
||||
classNames: any;
|
||||
});
|
||||
get isActive(): boolean;
|
||||
get dir(): string;
|
||||
get value(): string;
|
||||
set value(value: string);
|
||||
conceal(): void;
|
||||
reveal(): void;
|
||||
enable(): void;
|
||||
disable(): void;
|
||||
triggerEvent(eventType: EventType, data?: object): void;
|
||||
}
|
||||
//# sourceMappingURL=wrapped-element.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"wrapped-element.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,MAAM,CAAC,OAAO,OAAO,cAAc;IACjC,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAE9C,UAAU,EAAE,UAAU,CAAC;IAEvB,UAAU,EAAE,OAAO,CAAC;gBAER,EAAE,OAAO,EAAE,UAAU,EAAE;;;KAAA;IAcnC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,OAAO,IAAI,IAAI;IAkBf,MAAM,IAAI,IAAI;IAsBd,MAAM,IAAI,IAAI;IAMd,OAAO,IAAI,IAAI;IAMf,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI;CAGxD"}
|
||||
2
public/types/src/scripts/components/wrapped-element.test.d.ts
vendored
Normal file
2
public/types/src/scripts/components/wrapped-element.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=wrapped-element.test.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"wrapped-element.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-element.test.ts"],"names":[],"mappings":""}
|
||||
14
public/types/src/scripts/components/wrapped-input.d.ts
vendored
Normal file
14
public/types/src/scripts/components/wrapped-input.d.ts
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { ClassNames } from '../interfaces/class-names';
|
||||
import WrappedElement from './wrapped-element';
|
||||
export default class WrappedInput extends WrappedElement {
|
||||
element: HTMLInputElement;
|
||||
delimiter: string;
|
||||
constructor({ element, classNames, delimiter, }: {
|
||||
element: HTMLInputElement;
|
||||
classNames: ClassNames;
|
||||
delimiter: string;
|
||||
});
|
||||
get value(): string;
|
||||
set value(value: string);
|
||||
}
|
||||
//# sourceMappingURL=wrapped-input.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"wrapped-input.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,cAAc;IACtD,OAAO,EAAE,gBAAgB,CAAC;IAE1B,SAAS,EAAE,MAAM,CAAC;gBAEN,EACV,OAAO,EACP,UAAU,EACV,SAAS,GACV,EAAE;QACD,OAAO,EAAE,gBAAgB,CAAC;QAC1B,UAAU,EAAE,UAAU,CAAC;QACvB,SAAS,EAAE,MAAM,CAAC;KACnB;IAKD,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;CACF"}
|
||||
2
public/types/src/scripts/components/wrapped-input.test.d.ts
vendored
Normal file
2
public/types/src/scripts/components/wrapped-input.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=wrapped-input.test.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"wrapped-input.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-input.test.ts"],"names":[],"mappings":""}
|
||||
19
public/types/src/scripts/components/wrapped-select.d.ts
vendored
Normal file
19
public/types/src/scripts/components/wrapped-select.d.ts
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { ClassNames } from '../interfaces/class-names';
|
||||
import { Item } from '../interfaces/item';
|
||||
import WrappedElement from './wrapped-element';
|
||||
export default class WrappedSelect extends WrappedElement {
|
||||
element: HTMLSelectElement;
|
||||
classNames: ClassNames;
|
||||
template: (data: object) => HTMLOptionElement;
|
||||
constructor({ element, classNames, template, }: {
|
||||
element: HTMLSelectElement;
|
||||
classNames: ClassNames;
|
||||
template: (data: object) => HTMLOptionElement;
|
||||
});
|
||||
get placeholderOption(): HTMLOptionElement | null;
|
||||
get optionGroups(): Element[];
|
||||
get options(): Item[] | HTMLOptionElement[];
|
||||
set options(options: Item[] | HTMLOptionElement[]);
|
||||
appendDocFragment(fragment: DocumentFragment): void;
|
||||
}
|
||||
//# sourceMappingURL=wrapped-select.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"wrapped-select.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,cAAc;IACvD,OAAO,EAAE,iBAAiB,CAAC;IAE3B,UAAU,EAAE,UAAU,CAAC;IAEvB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,iBAAiB,CAAC;gBAElC,EACV,OAAO,EACP,UAAU,EACV,QAAQ,GACT,EAAE;QACD,OAAO,EAAE,iBAAiB,CAAC;QAC3B,UAAU,EAAE,UAAU,CAAC;QACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,iBAAiB,CAAC;KAC/C;IAKD,IAAI,iBAAiB,IAAI,iBAAiB,GAAG,IAAI,CAMhD;IAED,IAAI,YAAY,IAAI,OAAO,EAAE,CAE5B;IAED,IAAI,OAAO,IAAI,IAAI,EAAE,GAAG,iBAAiB,EAAE,CAE1C;IAED,IAAI,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,GAAG,iBAAiB,EAAE,EAahD;IAED,iBAAiB,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI;CAIpD"}
|
||||
2
public/types/src/scripts/components/wrapped-select.test.d.ts
vendored
Normal file
2
public/types/src/scripts/components/wrapped-select.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=wrapped-select.test.d.ts.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"wrapped-select.test.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/components/wrapped-select.test.ts"],"names":[],"mappings":""}
|
||||
11
public/types/src/scripts/constants.d.ts
vendored
Normal file
11
public/types/src/scripts/constants.d.ts
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { ActionType } from './interfaces/action-type';
|
||||
import { EventType } from './interfaces/event-type';
|
||||
import { KeyCodeMap } from './interfaces/keycode-map';
|
||||
export declare const EVENTS: Record<EventType, EventType>;
|
||||
export declare const ACTION_TYPES: Record<ActionType, ActionType>;
|
||||
export declare const KEY_CODES: KeyCodeMap;
|
||||
export declare const TEXT_TYPE: HTMLInputElement['type'];
|
||||
export declare const SELECT_ONE_TYPE: HTMLSelectElement['type'];
|
||||
export declare const SELECT_MULTIPLE_TYPE: HTMLSelectElement['type'];
|
||||
export declare const SCROLLING_SPEED = 4;
|
||||
//# sourceMappingURL=constants.d.ts.map
|
||||
1
public/types/src/scripts/constants.d.ts.map
Normal file
1
public/types/src/scripts/constants.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/scripts/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,CAW/C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,UAAU,CAYvD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,UAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,gBAAgB,CAAC,MAAM,CAAU,CAAC;AAC1D,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,MAAM,CAAgB,CAAC;AACvE,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,MAAM,CACxC,CAAC;AAEpB,eAAO,MAAM,eAAe,IAAI,CAAC"}
|
||||
2
public/types/src/scripts/constants.test.d.ts
vendored
Normal file
2
public/types/src/scripts/constants.test.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export {};
|
||||
//# sourceMappingURL=constants.test.d.ts.map
|
||||
1
public/types/src/scripts/constants.test.d.ts.map
Normal file
1
public/types/src/scripts/constants.test.d.ts.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"constants.test.d.ts","sourceRoot":"","sources":["../../../../src/scripts/constants.test.ts"],"names":[],"mappings":""}
|
||||
5
public/types/src/scripts/defaults.d.ts
vendored
Normal file
5
public/types/src/scripts/defaults.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { ClassNames } from './interfaces/class-names';
|
||||
import { Options } from './interfaces/options';
|
||||
export declare const DEFAULT_CLASSNAMES: ClassNames;
|
||||
export declare const DEFAULT_CONFIG: Options;
|
||||
//# sourceMappingURL=defaults.d.ts.map
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue