From 8d805f6158088ff68f69190cc21998f5452e0a64 Mon Sep 17 00:00:00 2001 From: Ris Adams <5329119+risadams@users.noreply.github.com> Date: Sat, 26 Nov 2022 13:29:21 -0500 Subject: [PATCH] Docs reset (#1921) * Prepping Documentation Reset * New docs site example working with theme switching * Dropped Legacy styles * stubbing jsdoc gen * adding localhost ssl certs * Restoring demo pages * Updated Contributors guide * adding temp doc pages * Adding auto-generation from JSDOC * fix: remove whitespace/line break and reindent into codeblock * fix: do not generate empty api doc * add category.json file for api docs * add comments for api docs * regen api docs * Correcting typos * Adding start:windows script * fix: reorganise and split on 4 main pages (#1920) * Watch support working for docs, more docs cleanup * Corrected test file ordering * test framework dep updates * Linting and deployment prep * adding more example * New Examples. prepping tag manager * commenting out todo links Co-authored-by: WINKLER Fabien Co-authored-by: Fabienwnklr <49644785+fabienwnklr@users.noreply.github.com> --- CONTRIBUTING.md | 139 + Makefile | 1 + README.md | 3 +- dist/css/selectize.legacy.css | 20 - dist/js/selectize.js | 308 +- dist/js/selectize.min.js | 2 +- dist/less/selectize.legacy.less | 59 - dist/lib/bootstrap2/accordion.less | 0 dist/lib/bootstrap2/alerts.less | 0 dist/lib/bootstrap2/bootstrap.less | 0 dist/lib/bootstrap2/breadcrumbs.less | 0 dist/lib/bootstrap2/button-groups.less | 0 dist/lib/bootstrap2/buttons.less | 0 dist/lib/bootstrap2/carousel.less | 0 dist/lib/bootstrap2/close.less | 0 dist/lib/bootstrap2/code.less | 0 dist/lib/bootstrap2/component-animations.less | 0 dist/lib/bootstrap2/dropdowns.less | 0 dist/lib/bootstrap2/forms.less | 0 dist/lib/bootstrap2/grid.less | 0 dist/lib/bootstrap2/hero-unit.less | 0 dist/lib/bootstrap2/labels-badges.less | 0 dist/lib/bootstrap2/layouts.less | 0 dist/lib/bootstrap2/media.less | 0 dist/lib/bootstrap2/mixins.less | 0 dist/lib/bootstrap2/modals.less | 0 dist/lib/bootstrap2/navbar.less | 0 dist/lib/bootstrap2/navs.less | 0 dist/lib/bootstrap2/pager.less | 0 dist/lib/bootstrap2/pagination.less | 0 dist/lib/bootstrap2/popovers.less | 0 dist/lib/bootstrap2/progress-bars.less | 0 dist/lib/bootstrap2/reset.less | 0 .../lib/bootstrap2/responsive-1200px-min.less | 0 dist/lib/bootstrap2/responsive-767px-max.less | 0 .../bootstrap2/responsive-768px-979px.less | 0 dist/lib/bootstrap2/responsive-navbar.less | 0 dist/lib/bootstrap2/responsive-utilities.less | 0 dist/lib/bootstrap2/responsive.less | 0 dist/lib/bootstrap2/scaffolding.less | 0 dist/lib/bootstrap2/sprites.less | 0 dist/lib/bootstrap2/tables.less | 0 dist/lib/bootstrap2/tests/buttons.html | 0 dist/lib/bootstrap2/tests/css-tests.css | 0 dist/lib/bootstrap2/tests/css-tests.html | 0 .../bootstrap2/tests/forms-responsive.html | 0 dist/lib/bootstrap2/tests/forms.html | 0 .../bootstrap2/tests/navbar-fixed-top.html | 0 .../bootstrap2/tests/navbar-static-top.html | 0 dist/lib/bootstrap2/tests/navbar.html | 0 dist/lib/bootstrap2/thumbnails.less | 0 dist/lib/bootstrap2/tooltip.less | 0 dist/lib/bootstrap2/type.less | 0 dist/lib/bootstrap2/utilities.less | 0 dist/lib/bootstrap2/variables.less | 0 dist/lib/bootstrap2/wells.less | 0 dist/lib/bootstrap5/_carousel.scss | 3 - dist/lib/bootstrap5/_functions.scss | 2 +- dist/lib/bootstrap5/bootstrap-utilities.scss | 3 + dist/lib/bootstrap5/mixins/_banner.scss | 2 +- docs/.gitignore | 20 + docs/.ssl/loopback_website.crt | 20 + docs/.ssl/loopback_website.key | 27 + docs/README.md | 41 + docs/api.md | 276 - docs/babel.config.js | 3 + docs/docs/API/clear_button Plugin.mdx | 38 + docs/docs/API/constants.mdx | 89 + docs/docs/API/dropdown_header Plugin.mdx | 42 + docs/docs/API/highlight.mdx | 15 + docs/docs/API/microevent.mdx | 29 + docs/docs/API/microplugin.mdx | 87 + docs/docs/API/optgroup_columns Plugin.mdx | 31 + docs/docs/API/remove_button Plugin.mdx | 20 + docs/docs/API/restore_on_backspace Plugin.mdx | 17 + docs/docs/API/selectize.mdx | 819 + docs/docs/API/sifter.mdx | 198 + docs/docs/API/tag_limit Plugin.mdx | 16 + docs/docs/API/utils.mdx | 205 + docs/docs/api.mdx | 19 + docs/docs/code-of-conduct.mdx | 132 + docs/docs/contribute.mdx | 180 + docs/docs/demos/api.mdx | 9 + docs/docs/demos/basic.mdx | 9 + docs/docs/demos/confirm.mdx | 9 + docs/docs/demos/diacritics.mdx | 9 + docs/docs/demos/dynamic-option-groups.mdx | 9 + docs/docs/demos/dynamic-options.mdx | 9 + docs/docs/demos/email.mdx | 9 + docs/docs/demos/events.mdx | 9 + docs/docs/demos/lock.mdx | 9 + docs/docs/demos/max-items.mdx | 9 + docs/docs/demos/normalize.mdx | 9 + docs/docs/demos/opt-groups.mdx | 9 + docs/docs/demos/performance.mdx | 9 + docs/docs/demos/required.mdx | 9 + docs/docs/demos/rtl.mdx | 9 + docs/docs/demos/tagging.mdx | 9 + docs/docs/events.mdx | 28 + docs/docs/glossary.mdx | 20 + docs/docs/intro.mdx | 59 + docs/docs/license.mdx | 260 + docs/docs/plugins.mdx | 92 + docs/docs/plugins/clear-button.mdx | 9 + docs/docs/plugins/drag-drop.mdx | 9 + docs/docs/plugins/opt-group-col.mdx | 9 + docs/docs/plugins/remove-button.mdx | 9 + docs/docs/plugins/restore-backspace.mdx | 9 + docs/{usage.md => docs/usage.mdx} | 31 +- docs/docusaurus.config.js | 205 + docs/events.md | 114 - docs/package-lock.json | 21869 ++++++++++++++++ docs/package.json | 53 + docs/plugins.md | 101 - docs/postcss.config.js | 10 + docs/selectize-logo.png | Bin 1057 -> 0 bytes docs/selectize-wordmark.png | Bin 4378 -> 0 bytes docs/sidebars.js | 110 + docs/src/components/Button.jsx | 20 + docs/src/components/Examples/Api.js | 138 + docs/src/components/Examples/Basic.js | 49 + docs/src/components/Examples/ConfirmDelete.js | 49 + docs/src/components/Examples/Diacritics.js | 61 + docs/src/components/Examples/DynamicOpt.js | 54 + .../components/Examples/DynamicOptGroups.js | 108 + docs/src/components/Examples/EmailContact.css | 17 + docs/src/components/Examples/EmailContact.js | 209 + docs/src/components/Examples/Events.js | 134 + docs/src/components/Examples/Lock.js | 100 + docs/src/components/Examples/MaxItems.js | 56 + docs/src/components/Examples/Normalize.js | 51 + docs/src/components/Examples/OptGroups.js | 65 + docs/src/components/Examples/Performance.js | 153 + .../components/Examples/Plugins/ClearBtn.js | 58 + .../components/Examples/Plugins/DragDrop.js | 56 + .../Examples/Plugins/OptGroupCol.js | 116 + .../components/Examples/Plugins/RemoveBtn.js | 76 + .../Examples/Plugins/RestoreBacspace.js | 76 + docs/src/components/Examples/Required.js | 70 + docs/src/components/Examples/Rtl.js | 68 + docs/src/components/Examples/Tagging.js | 57 + docs/src/components/Hero.jsx | 139 + docs/src/components/HeroBackground.jsx | 187 + docs/src/components/HomepageFeatures/index.js | 108 + docs/src/components/Icon.jsx | 77 + docs/src/components/Theming/ThemeChanger.js | 59 + docs/src/css/custom.css | 61 + docs/src/fonts/Inter-italic.var.woff2 | Bin 0 -> 245036 bytes docs/src/fonts/Inter-roman.var.woff2 | Bin 0 -> 227180 bytes docs/src/fonts/lexend.txt | 93 + docs/src/fonts/lexend.woff2 | Bin 0 -> 71760 bytes docs/src/images/blur-cyan.png | Bin 0 -> 218615 bytes docs/src/images/blur-indigo.png | Bin 0 -> 224214 bytes docs/src/pages/index.js | 18 + docs/static/.nojekyll | 0 docs/static/CNAME | 1 + docs/static/ads.txt | 1 + docs/static/css/selectize.bootstrap2.css | 20 + docs/static/css/selectize.bootstrap3.css | 20 + docs/static/css/selectize.bootstrap4.css | 20 + docs/static/css/selectize.bootstrap5.css | 20 + docs/static/css/selectize.css | 20 + docs/static/css/selectize.default.css | 20 + docs/static/img/favicon.ico | Bin 0 -> 15086 bytes docs/static/img/logo.svg | 1 + docs/static/js/selectize.js | 4687 ++++ docs/static/js/selectize.min.js | 32 + docs/tailwind.config.js | 21 + examples/api.html | 91 - examples/basic.html | 605 - examples/cities.html | 145 - examples/confirm.html | 41 - examples/contacts.html | 155 - examples/create-filter.html | 65 - examples/css/normalize.css | 375 - examples/css/stylesheet.css | 132 - examples/customization.html | 82 - examples/dynamic.html | 48 - examples/events.html | 109 - examples/github.html | 153 - examples/images/bg.png | Bin 7475 -> 0 bytes examples/images/check@2x.png | Bin 6177 -> 0 bytes examples/images/repo-forked.png | Bin 3427 -> 0 bytes examples/images/repo-source.png | Bin 3410 -> 0 bytes examples/images/spinner.gif | Bin 3208 -> 0 bytes examples/js/es5.js | 17 - examples/js/index.js | 52 - examples/js/jquery.min.js | 3 - examples/js/jqueryui.js | 15003 ----------- examples/lock.html | 66 - examples/movies.html | 164 - examples/optgroups.html | 254 - examples/performance.html | 105 - examples/plugins.html | 183 - examples/required.html | 54 - examples/rtl.html | 56 - gulpfile.js | 72 +- karma.conf.js | 2 +- lib/bootstrap2/accordion.less | 0 lib/bootstrap2/alerts.less | 0 lib/bootstrap2/bootstrap.less | 0 lib/bootstrap2/breadcrumbs.less | 0 lib/bootstrap2/button-groups.less | 0 lib/bootstrap2/buttons.less | 0 lib/bootstrap2/carousel.less | 0 lib/bootstrap2/close.less | 0 lib/bootstrap2/code.less | 0 lib/bootstrap2/component-animations.less | 0 lib/bootstrap2/dropdowns.less | 0 lib/bootstrap2/forms.less | 0 lib/bootstrap2/grid.less | 0 lib/bootstrap2/hero-unit.less | 0 lib/bootstrap2/labels-badges.less | 0 lib/bootstrap2/layouts.less | 0 lib/bootstrap2/media.less | 0 lib/bootstrap2/mixins.less | 0 lib/bootstrap2/modals.less | 0 lib/bootstrap2/navbar.less | 0 lib/bootstrap2/navs.less | 0 lib/bootstrap2/pager.less | 0 lib/bootstrap2/pagination.less | 0 lib/bootstrap2/popovers.less | 0 lib/bootstrap2/progress-bars.less | 0 lib/bootstrap2/reset.less | 0 lib/bootstrap2/responsive-1200px-min.less | 0 lib/bootstrap2/responsive-767px-max.less | 0 lib/bootstrap2/responsive-768px-979px.less | 0 lib/bootstrap2/responsive-navbar.less | 0 lib/bootstrap2/responsive-utilities.less | 0 lib/bootstrap2/responsive.less | 0 lib/bootstrap2/scaffolding.less | 0 lib/bootstrap2/sprites.less | 0 lib/bootstrap2/tables.less | 0 lib/bootstrap2/tests/buttons.html | 0 lib/bootstrap2/tests/css-tests.css | 0 lib/bootstrap2/tests/css-tests.html | 0 lib/bootstrap2/tests/forms-responsive.html | 0 lib/bootstrap2/tests/forms.html | 0 lib/bootstrap2/tests/navbar-fixed-top.html | 0 lib/bootstrap2/tests/navbar-static-top.html | 0 lib/bootstrap2/tests/navbar.html | 0 lib/bootstrap2/thumbnails.less | 0 lib/bootstrap2/tooltip.less | 0 lib/bootstrap2/type.less | 0 lib/bootstrap2/utilities.less | 0 lib/bootstrap2/variables.less | 0 lib/bootstrap2/wells.less | 0 lib/bootstrap5/_carousel.scss | 3 - lib/bootstrap5/_functions.scss | 2 +- lib/bootstrap5/bootstrap-utilities.scss | 3 + lib/bootstrap5/mixins/_banner.scss | 2 +- package-lock.json | 9635 ++----- package.json | 19 +- src/constants.js | 107 +- src/contrib/microplugin.js | 43 +- src/contrib/sifter.js | 10 +- src/less/selectize.legacy.less | 59 - src/plugins/clear_button/plugin.js | 27 + src/plugins/dropdown_header/plugin.js | 31 + src/plugins/optgroup_columns/plugin.js | 20 + src/plugins/remove_button/plugin.js | 8 + src/plugins/restore_on_backspace/plugin.js | 5 + src/plugins/tag_limit/plugin.js | 4 + src/selectize.js | 16 +- src/utils.js | 37 +- 265 files changed, 34973 insertions(+), 26543 deletions(-) delete mode 100644 dist/css/selectize.legacy.css delete mode 100644 dist/less/selectize.legacy.less mode change 100644 => 100755 dist/lib/bootstrap2/accordion.less mode change 100644 => 100755 dist/lib/bootstrap2/alerts.less mode change 100644 => 100755 dist/lib/bootstrap2/bootstrap.less mode change 100644 => 100755 dist/lib/bootstrap2/breadcrumbs.less mode change 100644 => 100755 dist/lib/bootstrap2/button-groups.less mode change 100644 => 100755 dist/lib/bootstrap2/buttons.less mode change 100644 => 100755 dist/lib/bootstrap2/carousel.less mode change 100644 => 100755 dist/lib/bootstrap2/close.less mode change 100644 => 100755 dist/lib/bootstrap2/code.less mode change 100644 => 100755 dist/lib/bootstrap2/component-animations.less mode change 100644 => 100755 dist/lib/bootstrap2/dropdowns.less mode change 100644 => 100755 dist/lib/bootstrap2/forms.less mode change 100644 => 100755 dist/lib/bootstrap2/grid.less mode change 100644 => 100755 dist/lib/bootstrap2/hero-unit.less mode change 100644 => 100755 dist/lib/bootstrap2/labels-badges.less mode change 100644 => 100755 dist/lib/bootstrap2/layouts.less mode change 100644 => 100755 dist/lib/bootstrap2/media.less mode change 100644 => 100755 dist/lib/bootstrap2/mixins.less mode change 100644 => 100755 dist/lib/bootstrap2/modals.less mode change 100644 => 100755 dist/lib/bootstrap2/navbar.less mode change 100644 => 100755 dist/lib/bootstrap2/navs.less mode change 100644 => 100755 dist/lib/bootstrap2/pager.less mode change 100644 => 100755 dist/lib/bootstrap2/pagination.less mode change 100644 => 100755 dist/lib/bootstrap2/popovers.less mode change 100644 => 100755 dist/lib/bootstrap2/progress-bars.less mode change 100644 => 100755 dist/lib/bootstrap2/reset.less mode change 100644 => 100755 dist/lib/bootstrap2/responsive-1200px-min.less mode change 100644 => 100755 dist/lib/bootstrap2/responsive-767px-max.less mode change 100644 => 100755 dist/lib/bootstrap2/responsive-768px-979px.less mode change 100644 => 100755 dist/lib/bootstrap2/responsive-navbar.less mode change 100644 => 100755 dist/lib/bootstrap2/responsive-utilities.less mode change 100644 => 100755 dist/lib/bootstrap2/responsive.less mode change 100644 => 100755 dist/lib/bootstrap2/scaffolding.less mode change 100644 => 100755 dist/lib/bootstrap2/sprites.less mode change 100644 => 100755 dist/lib/bootstrap2/tables.less mode change 100644 => 100755 dist/lib/bootstrap2/tests/buttons.html mode change 100644 => 100755 dist/lib/bootstrap2/tests/css-tests.css mode change 100644 => 100755 dist/lib/bootstrap2/tests/css-tests.html mode change 100644 => 100755 dist/lib/bootstrap2/tests/forms-responsive.html mode change 100644 => 100755 dist/lib/bootstrap2/tests/forms.html mode change 100644 => 100755 dist/lib/bootstrap2/tests/navbar-fixed-top.html mode change 100644 => 100755 dist/lib/bootstrap2/tests/navbar-static-top.html mode change 100644 => 100755 dist/lib/bootstrap2/tests/navbar.html mode change 100644 => 100755 dist/lib/bootstrap2/thumbnails.less mode change 100644 => 100755 dist/lib/bootstrap2/tooltip.less mode change 100644 => 100755 dist/lib/bootstrap2/type.less mode change 100644 => 100755 dist/lib/bootstrap2/utilities.less mode change 100644 => 100755 dist/lib/bootstrap2/variables.less mode change 100644 => 100755 dist/lib/bootstrap2/wells.less create mode 100644 docs/.gitignore create mode 100644 docs/.ssl/loopback_website.crt create mode 100644 docs/.ssl/loopback_website.key create mode 100644 docs/README.md delete mode 100644 docs/api.md create mode 100644 docs/babel.config.js create mode 100644 docs/docs/API/clear_button Plugin.mdx create mode 100644 docs/docs/API/constants.mdx create mode 100644 docs/docs/API/dropdown_header Plugin.mdx create mode 100644 docs/docs/API/highlight.mdx create mode 100644 docs/docs/API/microevent.mdx create mode 100644 docs/docs/API/microplugin.mdx create mode 100644 docs/docs/API/optgroup_columns Plugin.mdx create mode 100644 docs/docs/API/remove_button Plugin.mdx create mode 100644 docs/docs/API/restore_on_backspace Plugin.mdx create mode 100644 docs/docs/API/selectize.mdx create mode 100644 docs/docs/API/sifter.mdx create mode 100644 docs/docs/API/tag_limit Plugin.mdx create mode 100644 docs/docs/API/utils.mdx create mode 100644 docs/docs/api.mdx create mode 100644 docs/docs/code-of-conduct.mdx create mode 100644 docs/docs/contribute.mdx create mode 100644 docs/docs/demos/api.mdx create mode 100644 docs/docs/demos/basic.mdx create mode 100644 docs/docs/demos/confirm.mdx create mode 100644 docs/docs/demos/diacritics.mdx create mode 100644 docs/docs/demos/dynamic-option-groups.mdx create mode 100644 docs/docs/demos/dynamic-options.mdx create mode 100644 docs/docs/demos/email.mdx create mode 100644 docs/docs/demos/events.mdx create mode 100644 docs/docs/demos/lock.mdx create mode 100644 docs/docs/demos/max-items.mdx create mode 100644 docs/docs/demos/normalize.mdx create mode 100644 docs/docs/demos/opt-groups.mdx create mode 100644 docs/docs/demos/performance.mdx create mode 100644 docs/docs/demos/required.mdx create mode 100644 docs/docs/demos/rtl.mdx create mode 100644 docs/docs/demos/tagging.mdx create mode 100644 docs/docs/events.mdx create mode 100644 docs/docs/glossary.mdx create mode 100644 docs/docs/intro.mdx create mode 100644 docs/docs/license.mdx create mode 100644 docs/docs/plugins.mdx create mode 100644 docs/docs/plugins/clear-button.mdx create mode 100644 docs/docs/plugins/drag-drop.mdx create mode 100644 docs/docs/plugins/opt-group-col.mdx create mode 100644 docs/docs/plugins/remove-button.mdx create mode 100644 docs/docs/plugins/restore-backspace.mdx rename docs/{usage.md => docs/usage.mdx} (94%) create mode 100644 docs/docusaurus.config.js delete mode 100644 docs/events.md create mode 100644 docs/package-lock.json create mode 100644 docs/package.json delete mode 100644 docs/plugins.md create mode 100644 docs/postcss.config.js delete mode 100644 docs/selectize-logo.png delete mode 100644 docs/selectize-wordmark.png create mode 100644 docs/sidebars.js create mode 100644 docs/src/components/Button.jsx create mode 100644 docs/src/components/Examples/Api.js create mode 100644 docs/src/components/Examples/Basic.js create mode 100644 docs/src/components/Examples/ConfirmDelete.js create mode 100644 docs/src/components/Examples/Diacritics.js create mode 100644 docs/src/components/Examples/DynamicOpt.js create mode 100644 docs/src/components/Examples/DynamicOptGroups.js create mode 100644 docs/src/components/Examples/EmailContact.css create mode 100644 docs/src/components/Examples/EmailContact.js create mode 100644 docs/src/components/Examples/Events.js create mode 100644 docs/src/components/Examples/Lock.js create mode 100644 docs/src/components/Examples/MaxItems.js create mode 100644 docs/src/components/Examples/Normalize.js create mode 100644 docs/src/components/Examples/OptGroups.js create mode 100644 docs/src/components/Examples/Performance.js create mode 100644 docs/src/components/Examples/Plugins/ClearBtn.js create mode 100644 docs/src/components/Examples/Plugins/DragDrop.js create mode 100644 docs/src/components/Examples/Plugins/OptGroupCol.js create mode 100644 docs/src/components/Examples/Plugins/RemoveBtn.js create mode 100644 docs/src/components/Examples/Plugins/RestoreBacspace.js create mode 100644 docs/src/components/Examples/Required.js create mode 100644 docs/src/components/Examples/Rtl.js create mode 100644 docs/src/components/Examples/Tagging.js create mode 100644 docs/src/components/Hero.jsx create mode 100644 docs/src/components/HeroBackground.jsx create mode 100644 docs/src/components/HomepageFeatures/index.js create mode 100644 docs/src/components/Icon.jsx create mode 100644 docs/src/components/Theming/ThemeChanger.js create mode 100644 docs/src/css/custom.css create mode 100644 docs/src/fonts/Inter-italic.var.woff2 create mode 100644 docs/src/fonts/Inter-roman.var.woff2 create mode 100644 docs/src/fonts/lexend.txt create mode 100644 docs/src/fonts/lexend.woff2 create mode 100644 docs/src/images/blur-cyan.png create mode 100644 docs/src/images/blur-indigo.png create mode 100644 docs/src/pages/index.js create mode 100644 docs/static/.nojekyll create mode 100644 docs/static/CNAME create mode 100644 docs/static/ads.txt create mode 100644 docs/static/css/selectize.bootstrap2.css create mode 100644 docs/static/css/selectize.bootstrap3.css create mode 100644 docs/static/css/selectize.bootstrap4.css create mode 100644 docs/static/css/selectize.bootstrap5.css create mode 100644 docs/static/css/selectize.css create mode 100644 docs/static/css/selectize.default.css create mode 100644 docs/static/img/favicon.ico create mode 100644 docs/static/img/logo.svg create mode 100644 docs/static/js/selectize.js create mode 100644 docs/static/js/selectize.min.js create mode 100644 docs/tailwind.config.js delete mode 100644 examples/api.html delete mode 100644 examples/basic.html delete mode 100644 examples/cities.html delete mode 100644 examples/confirm.html delete mode 100644 examples/contacts.html delete mode 100644 examples/create-filter.html delete mode 100644 examples/css/normalize.css delete mode 100644 examples/css/stylesheet.css delete mode 100644 examples/customization.html delete mode 100644 examples/dynamic.html delete mode 100644 examples/events.html delete mode 100644 examples/github.html delete mode 100644 examples/images/bg.png delete mode 100644 examples/images/check@2x.png delete mode 100644 examples/images/repo-forked.png delete mode 100644 examples/images/repo-source.png delete mode 100644 examples/images/spinner.gif delete mode 100644 examples/js/es5.js delete mode 100644 examples/js/index.js delete mode 100644 examples/js/jquery.min.js delete mode 100644 examples/js/jqueryui.js delete mode 100644 examples/lock.html delete mode 100644 examples/movies.html delete mode 100644 examples/optgroups.html delete mode 100644 examples/performance.html delete mode 100644 examples/plugins.html delete mode 100644 examples/required.html delete mode 100644 examples/rtl.html mode change 100644 => 100755 lib/bootstrap2/accordion.less mode change 100644 => 100755 lib/bootstrap2/alerts.less mode change 100644 => 100755 lib/bootstrap2/bootstrap.less mode change 100644 => 100755 lib/bootstrap2/breadcrumbs.less mode change 100644 => 100755 lib/bootstrap2/button-groups.less mode change 100644 => 100755 lib/bootstrap2/buttons.less mode change 100644 => 100755 lib/bootstrap2/carousel.less mode change 100644 => 100755 lib/bootstrap2/close.less mode change 100644 => 100755 lib/bootstrap2/code.less mode change 100644 => 100755 lib/bootstrap2/component-animations.less mode change 100644 => 100755 lib/bootstrap2/dropdowns.less mode change 100644 => 100755 lib/bootstrap2/forms.less mode change 100644 => 100755 lib/bootstrap2/grid.less mode change 100644 => 100755 lib/bootstrap2/hero-unit.less mode change 100644 => 100755 lib/bootstrap2/labels-badges.less mode change 100644 => 100755 lib/bootstrap2/layouts.less mode change 100644 => 100755 lib/bootstrap2/media.less mode change 100644 => 100755 lib/bootstrap2/mixins.less mode change 100644 => 100755 lib/bootstrap2/modals.less mode change 100644 => 100755 lib/bootstrap2/navbar.less mode change 100644 => 100755 lib/bootstrap2/navs.less mode change 100644 => 100755 lib/bootstrap2/pager.less mode change 100644 => 100755 lib/bootstrap2/pagination.less mode change 100644 => 100755 lib/bootstrap2/popovers.less mode change 100644 => 100755 lib/bootstrap2/progress-bars.less mode change 100644 => 100755 lib/bootstrap2/reset.less mode change 100644 => 100755 lib/bootstrap2/responsive-1200px-min.less mode change 100644 => 100755 lib/bootstrap2/responsive-767px-max.less mode change 100644 => 100755 lib/bootstrap2/responsive-768px-979px.less mode change 100644 => 100755 lib/bootstrap2/responsive-navbar.less mode change 100644 => 100755 lib/bootstrap2/responsive-utilities.less mode change 100644 => 100755 lib/bootstrap2/responsive.less mode change 100644 => 100755 lib/bootstrap2/scaffolding.less mode change 100644 => 100755 lib/bootstrap2/sprites.less mode change 100644 => 100755 lib/bootstrap2/tables.less mode change 100644 => 100755 lib/bootstrap2/tests/buttons.html mode change 100644 => 100755 lib/bootstrap2/tests/css-tests.css mode change 100644 => 100755 lib/bootstrap2/tests/css-tests.html mode change 100644 => 100755 lib/bootstrap2/tests/forms-responsive.html mode change 100644 => 100755 lib/bootstrap2/tests/forms.html mode change 100644 => 100755 lib/bootstrap2/tests/navbar-fixed-top.html mode change 100644 => 100755 lib/bootstrap2/tests/navbar-static-top.html mode change 100644 => 100755 lib/bootstrap2/tests/navbar.html mode change 100644 => 100755 lib/bootstrap2/thumbnails.less mode change 100644 => 100755 lib/bootstrap2/tooltip.less mode change 100644 => 100755 lib/bootstrap2/type.less mode change 100644 => 100755 lib/bootstrap2/utilities.less mode change 100644 => 100755 lib/bootstrap2/variables.less mode change 100644 => 100755 lib/bootstrap2/wells.less delete mode 100644 src/less/selectize.legacy.less diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8b1378917..a78365a0c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1 +1,140 @@ +# Contributing to Selectize +First off, thanks for taking the time to contribute! ❤️ + +All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉 + +> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about: +> +> - Star the project +> - Sponsor the project and/or individual contributors +> - Tweet about it +> - Refer this project in your project's readme +> - Mention the project at local meetups and tell your friends/colleagues + +## Table of Contents + +- [Code of Conduct](#code-of-conduct) +- [I Have a Question](#i-have-a-question) +- [I Want To Contribute](#i-want-to-contribute) +- [Reporting Bugs](#reporting-bugs) +- [Suggesting Enhancements](#suggesting-enhancements) +- [Your First Code Contribution](#your-first-code-contribution) +- [Improving The Documentation](#improving-the-documentation) +- [Commit Messages](#commit-messages) + +## Code of Conduct + +This project and everyone participating in it is governed by the +[Selectize Code of Conduct](CODE_OF_CONDUCT.md). +By participating, you are expected to uphold this code. Please report unacceptable behavior +to the [maintainers](selectize@risadams.com). + +## I Have a Question + +> If you want to ask a question, we assume that you have read the available [Documentation](https://selectize.dev). + +Before you ask a question, it is best to search for existing [Issues](https://github.com/selectize/selectize.js/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first. + +If you then still feel the need to ask a question and need clarification, we recommend the following: + +- Open an [Issue](https://github.com/selectize/selectize.js/issues/new). +- Provide as much context as you can about what you're running into. +- Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. + +We will then take care of the issue as soon as possible. + +## I Want To Contribute + +> ### Legal Notice +> +> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. + +### Reporting Bugs + +#### Before Submitting a Bug Report + +A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible. + +- Make sure that you are using the latest version. +- Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://selectize.dev). If you are looking for support, you might want to check [this section](#i-have-a-question)). +- To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/selectize/selectize.jsissues?q=label%3Abug). +- Make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue. +- Collect information about the bug: + - Stack trace (Traceback) + - OS, Platform and Version (Windows, Linux, macOS, x86, ARM) + - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant. +- Possibly your input and the output +- Can you reliably reproduce the issue? And can you also reproduce it with older versions? + +#### How Do I Submit a Good Bug Report? + +> You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to . + +We use GitHub issues to track bugs and errors. If you run into an issue with the project: + +- Open an [Issue](https://github.com/selectize/selectize.js/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.) +- Explain the behavior you would expect and the actual behavior. +- Please provide as much context as possible and describe the _reproduction steps_ that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case. +- Provide the information you collected in the previous section. + +Once it's filed: + +- The project team will label the issue accordingly. +- A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. +- If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution). + +### Suggesting Enhancements + +This section guides you through submitting an enhancement suggestion for Selectize, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions. + +#### Before Submitting an Enhancement + +- Make sure that you are using the latest version. +- Read the [documentation](https://selectize.dev) carefully and find out if the functionality is already covered, maybe by an individual configuration. +- Perform a [search](https://github.com/selectize/selectize.js/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one. +- Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library. + +#### How Do I Submit a Good Enhancement Suggestion? + +Enhancement suggestions are tracked as [GitHub issues](https://github.com/selectize/selectize.js/issues). + +- Use a **clear and descriptive title** for the issue to identify the suggestion. +- Provide a **step-by-step description of the suggested enhancement** in as many details as possible. +- **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point, you can also tell which alternatives do not work for you. +- You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part to which the suggestion is related. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. +- **Explain why this enhancement would be useful** to most Selectize users. You may also want to point out the other projects that solved it better and which could serve as inspiration. + +### Your First Code Contribution + +#### Build from source + +Compile Javascript, SCSS and LESS in the `/src` directory to JavaScript and CSS in the `/build` directory. + +Running `make` will build the project, run all tests, and update the distribution files in `/dist`. + +#### Local Environment + +Running `npm start` on your repo will start a web server allowing you to view a local copy of this documentation, where you can test your changes against our example pages. + +If you are adding a new plugin, you should also add a corresponding example page to the `/docs/docs/plugins` directory. + +You can then run the examples at `http://localhost:4000/`. + +### Improving The Documentation + +### Commit Messages + +Commit messages should be concise and descriptive and whenever possible reference the issue that they are addressing. They should follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification. + +### Pull Requests + +If you're motivated to fix a bug or to develop a new feature, we'd love to see your code. When submitting pull requests, please remember the following: + +- Make sure tests pass: Run `npm test` to make sure your changes don't break existing functionality +- Do not make changes to files in `/dist`. Limiting your edits to files in `/src` directories keeps the size of your pull request down and makes it easier for us to evaluate. We'll update the `/dist` folder after your pull request is approved. +- Add tests: In the best-case scenario, you are also adding tests to back up your changes, but don't sweat it if you don't. We can discuss them at a later date. +- Squash your commits together in one or a few complete, logical commits, + with a concise and descriptive message. One commit means one + feature/bugfix/thing that has changed, or a diff bringing the code one + step forward to a better, working state. diff --git a/Makefile b/Makefile index b8b901ddf..596e1d2b8 100644 --- a/Makefile +++ b/Makefile @@ -11,6 +11,7 @@ compile: ## compile the project, update package versions if specified, installs rm -rf dist $(GULP) loadDependencies npm run build + $(GULP) docs release: ## make release version=x.x.x -- commit, tag, and npm publish the specified version ifeq ($(strip $(version)),) @echo "\033[31mERROR:\033[0;39m No version provided." diff --git a/README.md b/README.md index 8bf0e1874..3d822544d 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,6 @@ Selectize is available at [cdnjs](https://cdnjs.com/libraries/selectize.js). - [**css/**](dist/css) - [selectize.css](dist/css/selectize.css) — Core styles - [selectize.default.css](dist/css/selectize.default.css) — Default theme (with core styles) - - [selectize.default.css](dist/css/selectize.legacy.css) — Default Legacy theme (with core styles) - [selectize.bootstrap2.css](dist/css/selectize.bootstrap2.css) - Bootstrap 2 theme - [selectize.bootstrap3.css](dist/css/selectize.bootstrap3.css) - Bootstrap 3 theme - [selectize.bootstrap4.css](dist/css/selectize.bootstrap4.css) - Bootstrap 4 theme @@ -135,7 +134,7 @@ To run Selectize locally: npm start ``` -You can then run the examples at `http://localhost:4000/`. +You can then run the examples at `https://loopback.website:4000/`. ## License diff --git a/dist/css/selectize.legacy.css b/dist/css/selectize.legacy.css deleted file mode 100644 index ebbdf4efa..000000000 --- a/dist/css/selectize.legacy.css +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Selectize (v0.15.2) - * https://selectize.dev - * - * Copyright (c) 2013-2015 Brian Reavis & contributors - * Copyright (c) 2020-2022 Selectize Team & contributors - * - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this - * file except in compliance with the License. You may obtain a copy of the License at: - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF - * ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - * - * @author Brian Reavis - * @author Ris Adams - */ -.selectize-control{position:relative}.selectize-dropdown,.selectize-input,.selectize-input input{color:#303030;font-family:inherit;font-size:13px;line-height:18px;-webkit-font-smoothing:inherit}.selectize-input,.selectize-control.single .selectize-input.input-active{background:#fff;cursor:text;display:inline-block}.selectize-input{border:1px solid #d0d0d0;padding:8px 8px;display:inline-block;width:100%;overflow:hidden;position:relative;z-index:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.selectize-control.multi .selectize-input.has-items{padding:6px 8px 3px}.selectize-input.full{background-color:#fff}.selectize-input.disabled,.selectize-input.disabled *{cursor:default !important}.selectize-input.focus{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);box-shadow:inset 0 1px 2px rgba(0,0,0,0.15)}.selectize-input.dropdown-active{-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}.selectize-input>*{vertical-align:baseline;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline}.selectize-control.multi .selectize-input>div{cursor:pointer;margin:0 3px 3px 0;padding:2px 6px;background:#f2f2f2;color:#303030;border:0 solid #d0d0d0}.selectize-control.multi .selectize-input>div.active{background:#e8e8e8;color:#303030;border:0 solid #cacaca}.selectize-control.multi .selectize-input.disabled>div,.selectize-control.multi .selectize-input.disabled>div.active{color:#7d7d7d;background:#fff;border:0 solid #fff}.selectize-input>input{display:inline-block !important;padding:0 !important;min-height:0 !important;max-height:none !important;max-width:100% !important;margin:0 2px 0 0 !important;text-indent:0 !important;border:0 none !important;background:none !important;line-height:inherit !important;-webkit-user-select:auto !important;-webkit-box-shadow:none !important;box-shadow:none !important}.selectize-input>input::-ms-clear{display:none}.selectize-input>input:focus{outline:none !important}.selectize-input>input[placeholder]{box-sizing:initial}.selectize-input::after{content:' ';display:block;clear:left}.selectize-input.dropdown-active::before{content:' ';display:block;position:absolute;background:#f0f0f0;height:1px;bottom:0;left:0;right:0}.selectize-dropdown{position:absolute;z-index:10;border:1px solid #d0d0d0;background:#fff;margin:-1px 0 0 0;border-top:0 none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}.selectize-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.selectize-dropdown [data-selectable] .highlight{background:rgba(125,168,208,0.2);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.selectize-dropdown .option,.selectize-dropdown .optgroup-header{padding:5px 8px}.selectize-dropdown .option,.selectize-dropdown [data-disabled],.selectize-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.selectize-dropdown [data-selectable].option{opacity:1}.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}.selectize-dropdown .optgroup-header{color:#303030;background:#fff;cursor:default}.selectize-dropdown .active{background-color:#f5fafd;color:#495c68}.selectize-dropdown .active.create{color:#495c68}.selectize-dropdown .create{color:rgba(48,48,48,0.5)}.selectize-dropdown-content{overflow-y:auto;overflow-x:hidden;max-height:200px;-webkit-overflow-scrolling:touch}.selectize-control.single .selectize-input,.selectize-control.single .selectize-input input{cursor:pointer}.selectize-control.single .selectize-input.input-active,.selectize-control.single .selectize-input.input-active input{cursor:text}.selectize-control.single .selectize-input:after{content:' ';display:block;position:absolute;top:50%;right:15px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#808080 transparent transparent transparent}.selectize-control.single .selectize-input.dropdown-active:after{margin-top:-4px;border-width:0 5px 5px 5px;border-color:transparent transparent #808080 transparent}.selectize-control.rtl.single .selectize-input:after{left:15px;right:auto}.selectize-control.rtl .selectize-input>input{margin:0 4px 0 -2px !important}.selectize-control .selectize-input.disabled{opacity:.5;background-color:#fafafa}.selectize-dropdown.plugin-auto_position.selectize-position-top{border-top:1px solid #d0d0d0;border-bottom:0 none;border-radius:3px 3px 0 0}.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active{border-radius:0 0 3px 3px;border-top:0 none}.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before{top:0;bottom:unset}.selectize-control.plugin-clear_button .clear{text-decoration:none;display:flex;position:absolute;height:100%;width:25px;top:0;right:calc(8px - 6px);color:rgba(0,0,0);opacity:.4;font-weight:bold;border:0;cursor:pointer;z-index:1;font-size:21px;justify-content:center;align-items:center}.selectize-control.plugin-clear_button .clear:hover{opacity:1}.selectize-control.plugin-clear_button.single .clear{right:calc(8px - 6px + 1.5rem)}.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{visibility:visible !important;background:#f2f2f2 !important;background:rgba(0,0,0,0.06) !important;border:0 none !important;-webkit-box-shadow:inset 0 0 12px 4px #fff;box-shadow:inset 0 0 12px 4px #fff}.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:'!';visibility:hidden}.selectize-control.plugin-drag_drop .ui-sortable-helper{-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);box-shadow:0 2px 5px rgba(0,0,0,0.2)}.selectize-dropdown-header{position:relative;padding:5px 8px;border-bottom:1px solid #d0d0d0;background:#f8f8f8;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}.selectize-dropdown-header-close{position:absolute;right:8px;top:50%;color:#303030;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px !important;text-decoration:none}.selectize-dropdown-header-close:hover{color:#000}.selectize-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}.selectize-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.selectize-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}.selectize-control.plugin-remove_button [data-value]{position:relative;padding-right:24px !important}.selectize-control.plugin-remove_button [data-value] .remove{z-index:1;position:absolute;top:0;right:0;bottom:0;width:17px;text-align:center;font-weight:bold;font-size:12px;color:inherit;text-decoration:none;vertical-align:middle;display:inline-block;padding:2px 0 0 0;border-left:1px solid #d0d0d0;-webkit-border-radius:0 2px 2px 0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.selectize-control.plugin-remove_button [data-value] .remove:hover{background:rgba(0,0,0,0.05)}.selectize-control.plugin-remove_button [data-value].active .remove{border-left-color:#cacaca}.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover{background:0}.selectize-control.plugin-remove_button .disabled [data-value] .remove{border-left-color:#fff}.selectize-control.plugin-remove_button .remove-single{position:absolute;right:0;top:0;font-size:23px} \ No newline at end of file diff --git a/dist/js/selectize.js b/dist/js/selectize.js index b3ec2dd2c..454e0663e 100644 --- a/dist/js/selectize.js +++ b/dist/js/selectize.js @@ -152,24 +152,34 @@ MicroEvent.mixin = function (destObject) { * @author Ris Adams */ +/** + * Keep code modularized & extensible. + * MicroPlugin is a lightweight drop-in plugin architecture for your JavaScript library. + * Plugins can declare dependencies to other plugins and can be initialized with options (in a variety of formats). + * + * @class MicroPlugin + * @constructor + * @param {array|object} items + * @param {object} items + */ var MicroPlugin = {}; MicroPlugin.mixin = function (Interface) { + + /** + * @memberof MicroPlugin + */ Interface.plugins = {}; /** * Initializes the listed plugins (with options). * Acceptable formats: * - * List (without options): - * ['a', 'b', 'c'] - * - * List (with options): - * [{'name': 'a', options: {}}, {'name': 'b', options: {}}] - * - * Hash (with options): - * {'a': { ... }, 'b': { ... }, 'c': { ... }} + * - List (without options): - `['a', 'b', 'c']` + * - List (with options): - `[{'name': 'a', options: {}}, {'name': 'b', options: {}}]` + * - Hash (with options): - `{'a': { ... }, 'b': { ... }, 'c': { ... }}` * * @param {mixed} plugins + * @memberof MicroPlugin */ Interface.prototype.initializePlugins = function (plugins) { var i, n, key; @@ -183,7 +193,7 @@ MicroPlugin.mixin = function (Interface) { loaded: {} }; - if (utils.isArray(plugins)) { + if (isArray(plugins)) { for (i = 0, n = plugins.length; i < n; i++) { if (typeof plugins[i] === 'string') { queue.push(plugins[i]); @@ -206,6 +216,12 @@ MicroPlugin.mixin = function (Interface) { } }; + + /** Loads a plugin. + * @param {string} name - The name of the plugin to load. + * + * @memberof MicroPlugin + */ Interface.prototype.loadPlugin = function (name) { var self = this; var plugins = self.plugins; @@ -224,6 +240,7 @@ MicroPlugin.mixin = function (Interface) { * Initializes a plugin. * * @param {string} name + * @memberof MicroPlugin */ Interface.prototype.require = function (name) { var self = this; @@ -244,6 +261,8 @@ MicroPlugin.mixin = function (Interface) { * * @param {string} name * @param {function} fn + * + * @memberof MicroPlugin */ Interface.define = function (name, fn) { Interface.plugins[name] = { @@ -253,12 +272,6 @@ MicroPlugin.mixin = function (Interface) { }; }; -var utils = { - isArray: Array.isArray || function (vArg) { - return Object.prototype.toString.call(vArg) === '[object Array]'; - } -}; - /** * sifter.js @@ -279,9 +292,13 @@ var utils = { */ /** - * Textually searches arrays and hashes of objects - * by property (or multiple properties). Designed - * specifically for autocomplete. + * Sifter is a client and server-side library (via UMD) for textually searching arrays and hashes of objects by property – or multiple properties. It's designed specifically for autocomplete. The process is three-step: score, filter, sort. + * - **Supports díåcritîçs.** - For example, if searching for "montana" and an item in the set has a value of "montaña", it will still be matched. Sorting will also play nicely with diacritics + * - **Smart scoring.** - Items are scored / sorted intelligently depending on where a match is found in the string (how close to the beginning) and what percentage of the string matches. + * - **Multi-field sorting**. - When scores aren't enough to go by – like when getting results for an empty query – it can sort by one or more fields. For example, sort by a person's first name and last name without actually merging the properties to a single string. + * - **Nested properties.** - Allows to search and sort on nested properties so you can perform search on complex objects without flattening them simply by using dot-notation to reference fields (ie. nested.property). + * + * @class Sifter * * @constructor * @param {array|object} items @@ -744,37 +761,86 @@ var asciifold = (function () { }; })(); -function uaDetect(platform, re) { - if (navigator.userAgentData) { - return platform === navigator.userAgentData.platform; - } - - return re.test(navigator.userAgent); -} - -var IS_MAC = uaDetect("macOS", /Mac/); - -var KEY_A = 65; -var KEY_COMMA = 188; -var KEY_RETURN = 13; -var KEY_ESC = 27; -var KEY_LEFT = 37; -var KEY_UP = 38; -var KEY_P = 80; -var KEY_RIGHT = 39; -var KEY_DOWN = 40; -var KEY_N = 78; +/** + * @var {boolean} IS_MAC Check if device is a Mac + */ +var IS_MAC = uaDetect("macOS", /Mac/); +/** + * @var {number} KEY_A + */ +var KEY_A = 65; +/** + * @var {number} KEY_COMMA + */ +var KEY_COMMA = 188; +/** + * @var {number} KEY_RETURN + */ +var KEY_RETURN = 13; +/** + * @var {number} KEY_ESC + */ +var KEY_ESC = 27; +/** + * @var {number} KEY_LEFT + */ +var KEY_LEFT = 37; +/** + * @var {number} KEY_UP + */ +var KEY_UP = 38; +/** + * @var {number} KEY_P + */ +var KEY_P = 80; +/** + * @var {number} KEY_RIGHT + */ +var KEY_RIGHT = 39; +/** + * @var {number} KEY_DOWN + */ +var KEY_DOWN = 40; +/** + * @var {number} KEY_N + */ +var KEY_N = 78; +/** + * @var {number} KEY_BACKSPACE + */ var KEY_BACKSPACE = 8; -var KEY_DELETE = 46; -var KEY_SHIFT = 16; -var KEY_CMD = IS_MAC ? 91 : 17; -var KEY_CTRL = IS_MAC ? 18 : 17; -var KEY_TAB = 9; - -var TAG_SELECT = 1; -var TAG_INPUT = 2; +/** + * @var {number} KEY_DELETE + */ +var KEY_DELETE = 46; +/** + * @var {number} KEY_SHIFT + */ +var KEY_SHIFT = 16; +/** + * @var {number} KEY_CMD + */ +var KEY_CMD = IS_MAC ? 91 : 17; +/** + * @var {number} KEY_CTRL + */ +var KEY_CTRL = IS_MAC ? 18 : 17; +/** + * @var {number} KEY_TAB + */ +var KEY_TAB = 9; +/** + * @var {number} TAG_SELECT + */ +var TAG_SELECT = 1; +/** + * @var {number} TAG_INPUT + */ +var TAG_INPUT = 2; -// for now, android support in general is too spotty to support validity +/** + * @var {number} SUPPORTS_VALIDITY_API Check if device support validity api, for now, android support in general is too spotty to support validity + */ var SUPPORTS_VALIDITY_API = !uaDetect("Android", /android/i) && !!document.createElement('input').validity; /** @@ -787,6 +853,18 @@ var isset = function (object) { return typeof object !== 'undefined'; }; +/** + * This is a polyfill for the Array.isArray function. + * Determines whether the passed obect is an Array. + * + * @param {object} vArg + * @returns {Boolean} returns true if the passed object is an Array. + * + */ +var isArray = Array.isArray || function (vArg) { + return Object.prototype.toString.call(vArg) === '[object Array]'; +} + /** * Converts a scalar to its best string representation * for hash keys and HTML attribute values. @@ -888,7 +966,7 @@ var once = function (fn) { * every `delay` milliseconds (invoked on the falling edge). * * @param {function} fn - * @param {int} delay + * @param {number} delay * @returns {function} */ var debounce = function (fn, delay) { @@ -1011,7 +1089,7 @@ var transferStyles = function ($from, $to, properties) { * * @param {string} str * @param {object} $parent - * @returns {int} + * @returns {number} */ var measureString = function (str, $parent) { if (!str) { @@ -1140,19 +1218,36 @@ var logError = function (message, options) { }; /** + * Determines whether or not the `data` argument is a valid JSON string. * - * @param {any} data Data to testing + * @param {String} data Data to test * @returns {Boolean} true if is an JSON object */ var isJSON = function (data) { try { - JSON.parse(str); + JSON.parse(data); } catch (e) { return false; } return true; }; +/** + * If the browser supports the User-Agent Client Hint, then return the platform name, otherwise return + * the result of a regular expression test on the user agent string + * + * @param platform - The platform you want to detect. + * @param re - A regular expression that matches the user agent string. + * @returns {Boolean} A boolean value. + */ +function uaDetect(platform, re) { + if (navigator.userAgentData) { + return platform === navigator.userAgentData.platform; + } + + return re.test(navigator.userAgent); +} + var Selectize = function($input, settings) { var key, i, n, dir, input, self = this; input = $input[0]; @@ -1616,7 +1711,7 @@ $.extend(Selectize.prototype, { }, /** - * Triggered on paste. + * Triggered on `` paste. * * @param {object} e * @returns {boolean} @@ -1649,7 +1744,7 @@ $.extend(Selectize.prototype, { }, /** - * Triggered on keypress. + * Triggered on `` keypress. * * @param {object} e * @returns {boolean} @@ -1665,7 +1760,7 @@ $.extend(Selectize.prototype, { }, /** - * Triggered on keydown. + * Triggered on `` keydown. * * @param {object} e * @returns {boolean} @@ -1756,7 +1851,7 @@ $.extend(Selectize.prototype, { }, /** - * Triggered on input. + * Triggered on `` input. * * @param {object} e * @returns {boolean} @@ -1793,7 +1888,7 @@ $.extend(Selectize.prototype, { }, /** - * Triggered on focus. + * Triggered on `` focus. * * @param {FocusEvent} e (optional) * @returns {boolean} @@ -1824,7 +1919,7 @@ $.extend(Selectize.prototype, { }, /** - * Triggered on blur. + * Triggered on `` blur. * * @param {object} e * @param {Element} dest @@ -1987,7 +2082,7 @@ $.extend(Selectize.prototype, { /** * Returns the value of the control. If multiple items - * can be selected (e.g. )`, this returns * an array. If only one item can be selected, this * returns a string. * @@ -3032,7 +3127,7 @@ $.extend(Selectize.prototype, { }, /** - * Refreshes the original + * Refreshes the original `` * element to reflect the current state. */ updateOriginalInput: function(opts) { @@ -3997,6 +4092,33 @@ Selectize.define("autofill_disable", function (options) { * @author Fabien Winkler */ +/** + * @author [Fabien Winkler](https://github.com/fabienwnklr) + * @typedef {object} options Object of options available for "clear_button" plugin + * @param {string} [title=Clear] Title for the clear button + * @param {string} [className=clear] Class name for the clear button + * @param {string} [label=×] [props=data] Label for the clear button + * @param {function} [html] Method used for rendering + * + * @example + * ```js + * $('select').selectize({ + * plugins: [ + * { + * clear_button: { + * title: 'Custom title', + * className: 'custom-class', + * label: 'custom label', + * html: (data) => { + * return ( + * `${data.label}`; + * } + * } + * } + * ] + * }); + * ``` + */ Selectize.define("clear_button", function (options) { var self = this; @@ -4141,6 +4263,37 @@ Selectize.define('drag_drop', function(options) { * @author Brian Reavis */ +/** + * @author [Brian Reavis](https://github.com/brianreavis) + * @typedef {Object} options Available options for dropdown_header plugin + * @param {string} [title=Untitled] Title of dropdown_header + * @param {string} [headerClass=selectize-dropdown-header] Class of dropdown_header + * @param {string} [titleRowClass=selectize-dropdown-header-title] Class for title row + * @param {string} [labelClass=selectize-dropdown-header-label] Class for label + * @param {string} [closeClass=selectize-dropdown-header-close] Class for dropdown_header close button + * @param {function} [html] Method for custom rendering of dropdown_header + * + * @example + * ```js + * $('select').selectize({ + * plugins: [ + * { + * dropdown_header: { + * title: 'Custom title', + * headerClass: 'custom-header-class', + * labelClass: 'custom-label-class', + * closeClass: 'custom-close-class', + * html: (data) => { + * // data contain all options values + * return ( + * `${data.title}`; + * } + * } + * } + * ] + * }); + * ``` + */ Selectize.define('dropdown_header', function(options) { var self = this; @@ -4194,6 +4347,26 @@ Selectize.define('dropdown_header', function(options) { * @author Simon Hewitt */ +/** + * @author [Simon Hewitt](https://github.com/sjhewitt) + * @typedef {Object} options Available options for optgroup_columns plugin + * @param {boolean} [equalizeWidth=true] + * @param {boolean} [equalizeHeight=true] + * + * @example + * ```js + * $('select').selectize({ + * plugins: [ + * { + * optgroup_columns: { + * equalizeWidth: false, + * equalizeHeight: false, + * } + * } + * ] + * }); + * ``` + */ Selectize.define('optgroup_columns', function(options) { var self = this; @@ -4304,6 +4477,14 @@ Selectize.define('optgroup_columns', function(options) { * @author Brian Reavis */ +/** + * @author [Brian Reavis](https://github.com/brianreavis) + * @typedef {Object} options Object of options available for "remove_button" plugin + * @param {string} [label=×] The label value for remove button + * @param {string} [title=Remove] The Title value for remove button + * @param {string} [className=remove] Class name for remove button + * @param {boolean} [append=true] Append remove button to item + */ Selectize.define('remove_button', function (options) { if (this.settings.mode === 'single') return; @@ -4381,6 +4562,11 @@ Selectize.define('remove_button', function (options) { * @author Brian Reavis */ +/** + * @author [Brian Reavis](htts://github.com/brianreavis) + * @typedef {Object} options Object of options available on restore_on_backspace plugin + * @param {string} text Text to set on restore + */ Selectize.define('restore_on_backspace', function(options) { var self = this; @@ -4451,6 +4637,10 @@ Selectize.define('select_on_focus', function(options) { }); +/** + * @typedef {Object} options Object of available options for tag_limit plugin + * @param {number} tagLimit Number of limit tag to display + */ Selectize.define('tag_limit', function (options) { const self = this options.tagLimit = options.tagLimit diff --git a/dist/js/selectize.min.js b/dist/js/selectize.min.js index 49b789882..6d2b78b5f 100644 --- a/dist/js/selectize.min.js +++ b/dist/js/selectize.min.js @@ -27,6 +27,6 @@ } }(this, function ($) { 'use strict'; -var highlight=function(t,e){var r,a;if("string"!=typeof e||e.length)return r="string"==typeof e?new RegExp(e,"i"):e,a=function(t){var e=0;if(3===t.nodeType){var n,i,o=t.data.search(r);0<=o&&0/g,">").replace(/"/g,""")},escape_replace=function(t){return(t+"").replace(/\$/g,"$$$$")},hook={before:function(t,e,n){var i=t[e];t[e]=function(){return n.apply(t,arguments),i.apply(t,arguments)}},after:function(e,t,n){var i=e[t];e[t]=function(){var t=i.apply(e,arguments);return n.apply(e,arguments),t}}},once=function(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}},debounce=function(n,i){var o;return function(){var t=this,e=arguments;window.clearTimeout(o),o=window.setTimeout(function(){n.apply(t,e)},i)}},debounce_events=function(e,n,t){var i,o=e.trigger,s={};for(i in e.trigger=function(){var t=arguments[0];if(-1===n.indexOf(t))return o.apply(e,arguments);s[t]=arguments},t.apply(e,[]),e.trigger=o,s)s.hasOwnProperty(i)&&o.apply(e,s[i])},watchChildEvent=function(n,t,e,i){n.on(t,e,function(t){for(var e=t.target;e&&e.parentNode!==n[0];)e=e.parentNode;return t.currentTarget=e,i.apply(this,[t])})},getInputSelection=function(t){var e,n,i={};return void 0===t?console.warn("WARN getInputSelection cannot locate input control"):"selectionStart"in t?(i.start=t.selectionStart,i.length=t.selectionEnd-i.start):document.selection&&(t.focus(),e=document.selection.createRange(),n=document.selection.createRange().text.length,e.moveStart("character",-t.value.length),i.start=e.text.length-n,i.length=n),i},transferStyles=function(t,e,n){var i,o,s={};if(n)for(i=0,o=n.length;i").css({position:"absolute",width:"auto",padding:0,whiteSpace:"pre"}),$("
").css({position:"absolute",width:0,height:0,overflow:"hidden"}).append(Selectize.$testInput).appendTo("body")),Selectize.$testInput.text(t),transferStyles(e,Selectize.$testInput,["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"]),Selectize.$testInput.width()):0},autoGrow=function(s){function t(t,e){var n,i,o;e=e||{},(t=t||window.event||{}).metaKey||t.altKey||!e.force&&!1===s.data("grow")||(e=s.val(),t.type&&"keydown"===t.type.toLowerCase()&&(n=48<=(i=t.keyCode)&&i<=57||65<=i&&i<=90||96<=i&&i<=111||186<=i&&i<=222||32===i,i===KEY_DELETE||i===KEY_BACKSPACE?(o=getInputSelection(s[0])).length?e=e.substring(0,o.start)+e.substring(o.start+o.length):i===KEY_BACKSPACE&&o.start?e=e.substring(0,o.start-1)+e.substring(o.start+1):i===KEY_DELETE&&void 0!==o.start&&(e=e.substring(0,o.start)+e.substring(o.start+1)):n&&(i=t.shiftKey,o=String.fromCharCode(t.keyCode),e+=o=i?o.toUpperCase():o.toLowerCase())),t=(n=s.attr("placeholder"))?measureString(n,s)+4:0,(i=Math.max(measureString(e,s),t)+4)===r)||(r=i,s.width(i),s.triggerHandler("resize"))}var r=null;s.on("keydown keyup update blur",t),t()},domToString=function(t){var e=document.createElement("div");return e.appendChild(t.cloneNode(!0)),e.innerHTML},logError=function(t,e){e=e||{};console.error("Selectize: "+t),e.explanation&&(console.group&&console.group(),console.error(e.explanation),console.group)&&console.groupEnd()},isJSON=function(t){try{JSON.parse(str)}catch(t){return!1}return!0},Selectize=function(t,e){var n,i,o=this,s=t[0],r=(s.selectize=o,window.getComputedStyle&&window.getComputedStyle(s,null));if(r=(r?r.getPropertyValue("direction"):s.currentStyle&&s.currentStyle.direction)||t.parents("[dir]:first").attr("dir")||"",$.extend(o,{order:0,settings:e,$input:t,tabIndex:t.attr("tabindex")||"",tagType:"select"===s.tagName.toLowerCase()?TAG_SELECT:TAG_INPUT,rtl:/rtl/i.test(r),eventNS:".selectize"+ ++Selectize.count,highlightedValue:null,isBlurring:!1,isOpen:!1,isDisabled:!1,isRequired:t.is("[required]"),isInvalid:!1,isLocked:!1,isFocused:!1,isInputHidden:!1,isSetup:!1,isShiftDown:!1,isCmdDown:!1,isCtrlDown:!1,ignoreFocus:!1,ignoreBlur:!1,ignoreHover:!1,hasOptions:!1,currentResults:null,lastValue:"",lastValidValue:"",lastOpenTarget:!1,caretPos:0,loading:0,loadedSearches:{},isDropdownClosing:!1,$activeOption:null,$activeItems:[],optgroups:{},options:{},userOptions:{},items:[],renderCache:{},onSearchChange:null===e.loadThrottle?o.onSearchChange:debounce(o.onSearchChange,e.loadThrottle)}),o.sifter=new Sifter(this.options,{diacritics:e.diacritics}),o.settings.options){for(n=0,i=o.settings.options.length;n").addClass(t.wrapperClass).addClass(a+" selectize-control").addClass(r),p=$("
").addClass(t.inputClass+" selectize-input items").appendTo(l),c=$('').appendTo(p).attr("tabindex",s.is(":disabled")?"-1":e.tabIndex),u=$(t.dropdownParent||l),r=$("
").addClass(t.dropdownClass).addClass(r+" selectize-dropdown").hide().appendTo(u),u=$("
").addClass(t.dropdownContentClass+" selectize-dropdown-content").attr("tabindex","-1").appendTo(r),d=((d=s.attr("id"))&&(c.attr("id",d+"-selectized"),$("label[for='"+d+"']").attr("for",d+"-selectized")),e.settings.copyClassesToDropdown&&r.addClass(a),l.css({width:s[0].style.width}),e.plugins.names.length&&(d="plugin-"+e.plugins.names.join(" plugin-"),l.addClass(d),r.addClass(d)),(null===t.maxItems||1[data-selectable]",function(t){t.stopImmediatePropagation()}),r.on("mouseenter","[data-selectable]",function(){return e.onOptionHover.apply(e,arguments)}),r.on("mouseup click","[data-selectable]",function(){return e.onOptionSelect.apply(e,arguments)}),watchChildEvent(p,"mouseup","*:not(input)",function(){return e.onItemSelect.apply(e,arguments)}),autoGrow(c),p.on({mousedown:function(){return e.onMouseDown.apply(e,arguments)},click:function(){return e.onClick.apply(e,arguments)}}),c.on({mousedown:function(t){""===e.$control_input.val()&&!e.settings.openOnFocus||t.stopPropagation()},keydown:function(){return e.onKeyDown.apply(e,arguments)},keypress:function(){return e.onKeyPress.apply(e,arguments)},input:function(){return e.onInput.apply(e,arguments)},resize:function(){e.positionDropdown.apply(e,[])},focus:function(){return e.ignoreBlur=!1,e.onFocus.apply(e,arguments)},paste:function(){return e.onPaste.apply(e,arguments)}}),o.on("keydown"+n,function(t){e.isCmdDown=t[IS_MAC?"metaKey":"ctrlKey"],e.isCtrlDown=t[IS_MAC?"altKey":"ctrlKey"],e.isShiftDown=t.shiftKey}),o.on("keyup"+n,function(t){t.keyCode===KEY_CTRL&&(e.isCtrlDown=!1),t.keyCode===KEY_SHIFT&&(e.isShiftDown=!1),t.keyCode===KEY_CMD&&(e.isCmdDown=!1)}),o.on("mousedown"+n,function(t){if(e.isFocused){if(t.target===e.$dropdown[0]||t.target.parentNode===e.$dropdown[0])return!1;e.$dropdown.has(t.target).length||t.target===e.$control[0]||e.blur(t.target)}}),i.on(["scroll"+n,"resize"+n].join(" "),function(){e.isOpen&&e.positionDropdown.apply(e,arguments)}),i.on("mousemove"+n,function(){e.ignoreHover=e.settings.ignoreHover}),$("
")),a=s.children().detach();s.replaceWith(d),d.replaceWith(s),this.revertSettings={$children:a,tabindex:s.attr("tabindex")},s.attr("tabindex",-1).hide().after(e.$wrapper),Array.isArray(t.items)&&(e.lastValidValue=t.items,e.setValue(t.items),delete t.items),SUPPORTS_VALIDITY_API&&s.on("invalid"+n,function(t){t.preventDefault(),e.isInvalid=!0,e.refreshState()}),e.updateOriginalInput(),e.refreshItems(),e.refreshState(),e.updatePlaceholder(),e.isSetup=!0,s.is(":disabled")&&e.disable(),e.on("change",this.onChange),s.data("selectize",e),s.addClass("selectized"),e.trigger("initialize"),!0===t.preload&&e.onSearchChange("")},setupTemplates:function(){var t=this,i=t.settings.labelField,o=t.settings.valueField,n=t.settings.optgroupLabelField;t.settings.render=$.extend({},{optgroup:function(t){return'
'+t.html+"
"},optgroup_header:function(t,e){return'
'+e(t[n])+"
"},option:function(t,e){var n=t.classes?" "+t.classes:"";return n+=""===t[o]?" selectize-dropdown-emptyoptionlabel":"","'+e(t[i])+"
"},item:function(t,e){return'
'+e(t[i])+"
"},option_create:function(t,e){return'
Add '+e(t.input)+"…
"}},t.settings.render)},setupCallbacks:function(){var t,e,n={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur",dropdown_item_activate:"onDropdownItemActivate",dropdown_item_deactivate:"onDropdownItemDeactivate"};for(t in n)n.hasOwnProperty(t)&&(e=this.settings[n[t]])&&this.on(t,e)},onClick:function(t){this.isDropdownClosing||this.isFocused&&this.isOpen||(this.focus(),t.preventDefault())},onMouseDown:function(t){var e=this,n=t.isDefaultPrevented();$(t.target);if(e.isFocused||n||window.setTimeout(function(){e.focus()},0),t.target!==e.$control_input[0]||""===e.$control_input.val())return"single"===e.settings.mode?e.isOpen?e.close():e.open():(n||e.setActiveItem(null),e.settings.openOnFocus||(e.isOpen&&t.target===e.lastOpenTarget?(e.close(),e.lastOpenTarget=!1):(e.isOpen||(e.refreshOptions(),e.open()),e.lastOpenTarget=t.target))),!1},onChange:function(){""!==this.getValue()&&(this.lastValidValue=this.getValue()),this.$input.trigger("input"),this.$input.trigger("change")},onPaste:function(t){var o=this;o.isFull()||o.isInputHidden||o.isLocked?t.preventDefault():o.settings.splitOn&&setTimeout(function(){var t=o.$control_input.val();if(t.match(o.settings.splitOn))for(var e=t.trim().split(o.settings.splitOn),n=0,i=e.length;n=this.settings.maxItems},updateOriginalInput:function(t){var e,n,i,o,s,r,a=this;t=t||{},a.tagType===TAG_SELECT?(o=a.$input.find("option"),e=[],n=[],i=[],r=[],o.get().forEach(function(t){e.push(t.value)}),a.items.forEach(function(t){s=a.options[t][a.settings.labelField]||"",r.push(t),-1==e.indexOf(t)&&n.push('")}),i=e.filter(function(t){return r.indexOf(t)<0}).map(function(t){return'option[value="'+t+'"]'}),e.length-i.length+n.length!==0||a.$input.attr("multiple")||n.push(''),a.$input.find(i.join(", ")).remove(),a.$input.append(n.join(""))):(a.$input.val(a.getValue()),a.$input.attr("value",a.$input.val())),a.isSetup&&!t.silent&&a.trigger("change",a.$input.val())},updatePlaceholder:function(){var t;this.settings.placeholder&&(t=this.$control_input,this.items.length?t.removeAttr("placeholder"):t.attr("placeholder",this.settings.placeholder),t.triggerHandler("update",{force:!0}))},open:function(){var t=this;t.isLocked||t.isOpen||"multi"===t.settings.mode&&t.isFull()||(t.focus(),t.isOpen=!0,t.refreshState(),t.$dropdown.css({visibility:"hidden",display:"block"}),t.setupDropdownHeight(),t.positionDropdown(),t.$dropdown.css({visibility:"visible"}),t.trigger("dropdown_open",t.$dropdown))},close:function(){var t=this,e=t.isOpen;"single"===t.settings.mode&&t.items.length&&(t.hideInput(),t.isBlurring)&&t.$control_input[0].blur(),t.isOpen=!1,t.$dropdown.hide(),t.setActiveOption(null),t.refreshState(),e&&t.trigger("dropdown_close",t.$dropdown)},positionDropdown:function(){var t=this.$control,e="body"===this.settings.dropdownParent?t.offset():t.position(),t=(e.top+=t.outerHeight(!0),t[0].getBoundingClientRect().width);this.settings.minWidth&&this.settings.minWidth>t&&(t=this.settings.minWidth),this.$dropdown.css({width:t,top:e.top,left:e.left})},setupDropdownHeight:function(){if("object"==typeof this.settings.dropdownSize&&"auto"!==this.settings.dropdownSize.sizeType){var t=this.settings.dropdownSize.sizeValue;if("numberItems"===this.settings.dropdownSize.sizeType){for(var e=this.$dropdown_content.find("*").not(".optgroup, .highlight").not(this.settings.ignoreOnDropwdownHeight),n=0,i=0,o=0,s=0,r=0;r'+i+""+l)),{placeholder:n,options:[],optgroups:[],items:[]});if("select"===e)u(t,i);else{var o,s,r,a,l=t,p=i,n=l.attr(m);if(n)for(p.options=JSON.parse(n),o=0,s=p.options.length;owindow.innerHeight?o.top:o.bottom,i={width:t.outerWidth(),left:e.left};n===o.top?(n={bottom:e.top,top:"unset"},"body"===this.settings.dropdownParent&&(n.top=e.top-this.$dropdown.outerHeight(!0)-t.outerHeight(!0),n.bottom="unset"),Object.assign(i,n),this.$dropdown.addClass("selectize-position-top"),this.$control.addClass("selectize-position-top")):(Object.assign(i,{top:e.top,bottom:"unset"}),this.$dropdown.removeClass("selectize-position-top"),this.$control.removeClass("selectize-position-top")),this.$dropdown.css(i)}}),Selectize.define("auto_select_on_type",function(t){var n,i=this;i.onBlur=(n=i.onBlur,function(t){var e=i.getFirstItemMatchedByTextContent(i.lastValue,!0);return void 0!==e.attr("data-value")&&i.getValue()!==e.attr("data-value")&&i.setValue(e.attr("data-value")),n.apply(this,arguments)})}),Selectize.define("autofill_disable",function(t){var e,n=this;n.setup=(e=n.setup,function(){e.apply(n,arguments),n.$control_input.attr({autocomplete:"new-password",autofill:"no"})})}),Selectize.define("clear_button",function(e){var t,n=this;e=$.extend({title:"Clear",className:"clear",label:"×",html:function(t){return' '+t.label+""}},e),n.setup=(t=n.setup,function(){t.apply(n,arguments),n.$button_clear=$(e.html(e)),"single"===n.settings.mode&&n.$wrapper.addClass("single"),n.$wrapper.append(n.$button_clear),""!==n.getValue()&&0!==n.getValue().length||n.$wrapper.find("."+e.className).css("display","none"),n.on("change",function(){""===n.getValue()||0===n.getValue().length?n.$wrapper.find("."+e.className).css("display","none"):n.$wrapper.find("."+e.className).css("display","")}),n.$wrapper.on("click","."+e.className,function(t){t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation(),n.isLocked||(n.clear(),n.$wrapper.find("."+e.className).css("display","none"))})})}),Selectize.define("drag_drop",function(t){if(!$.fn.sortable)throw new Error('The "drag_drop" plugin requires jQuery UI "sortable".');var i,e,n,o;"multi"===this.settings.mode&&((i=this).lock=(e=i.lock,function(){var t=i.$control.data("sortable");return t&&t.disable(),e.apply(i,arguments)}),i.unlock=(n=i.unlock,function(){var t=i.$control.data("sortable");return t&&t.enable(),n.apply(i,arguments)}),i.setup=(o=i.setup,function(){o.apply(this,arguments);var n=i.$control.sortable({items:"[data-value]",forcePlaceholderSize:!0,disabled:i.isLocked,start:function(t,e){e.placeholder.css("width",e.helper.css("width")),n.addClass("dragging")},stop:function(){n.removeClass("dragging");var t=i.$activeItems?i.$activeItems.slice():null,e=[];n.children("[data-value]").each(function(){e.push($(this).attr("data-value"))}),i.isFocused=!1,i.setValue(e),i.isFocused=!0,i.setActiveItem(t),i.positionDropdown()}})}))}),Selectize.define("dropdown_header",function(t){var e,n=this;t=$.extend({title:"Untitled",headerClass:"selectize-dropdown-header",titleRowClass:"selectize-dropdown-header-title",labelClass:"selectize-dropdown-header-label",closeClass:"selectize-dropdown-header-close",html:function(t){return'
'+t.title+'×
'}},t),n.setup=(e=n.setup,function(){e.apply(n,arguments),n.$dropdown_header=$(t.html(t)),n.$dropdown.prepend(n.$dropdown_header),n.$dropdown_header.find("."+t.closeClass).on("click",function(){n.close()})})}),Selectize.define("optgroup_columns",function(r){function t(){var t,e,n,i,o=$("[data-group]",a.$dropdown_content),s=o.length;if(s&&a.$dropdown_content.width()){if(r.equalizeHeight){for(t=e=0;t
',t=t.firstChild,n.body.appendChild(t),e=l.width=t.offsetWidth-t.clientWidth,n.body.removeChild(t)),e});(r.equalizeHeight||r.equalizeWidth)&&(hook.after(this,"positionDropdown",t),hook.after(this,"refreshOptions",t))}),Selectize.define("remove_button",function(t){var s,e,n,i,r;"single"!==this.settings.mode&&(t=$.extend({label:"×",title:"Remove",className:"remove",append:!0},t),i=s=this,r=''+e.label+"",s.setup=(n=i.setup,function(){var o;e.append&&(o=i.settings.render.item,i.settings.render.item=function(t){return e=o.apply(s,arguments),n=r,i=e.search(/(<\/[^>]+>\s*)$/),e.substring(0,i)+n+e.substring(i);var e,n,i}),n.apply(s,arguments),s.$control.on("click","."+e.className,function(t){if(t.preventDefault(),!i.isLocked)return t=$(t.currentTarget).parent(),i.setActiveItem(t),i.deleteSelection()&&i.setCaret(i.items.length),!1})}))}),Selectize.define("restore_on_backspace",function(n){var i,t=this;n.text=n.text||function(t){return t[this.settings.labelField]},this.onKeyDown=(i=t.onKeyDown,function(t){var e;if(!(t.keyCode===KEY_BACKSPACE&&""===this.$control_input.val()&&!this.$activeItems.length&&0<=(e=this.caretPos-1)&&e"+(e.length-n)+""))}}}(),this.onFocus=function(){const e=t.onFocus;return function(t){e.apply(this,t),t&&((t=this.$control).find(".item").show(),t.find("span").remove())}}()}); +var highlight=function(t,e){var r,a;if("string"!=typeof e||e.length)return r="string"==typeof e?new RegExp(e,"i"):e,a=function(t){var e=0;if(3===t.nodeType){var n,i,o=t.data.search(r);0<=o&&0/g,">").replace(/"/g,""")},escape_replace=function(t){return(t+"").replace(/\$/g,"$$$$")},hook={before:function(t,e,n){var i=t[e];t[e]=function(){return n.apply(t,arguments),i.apply(t,arguments)}},after:function(e,t,n){var i=e[t];e[t]=function(){var t=i.apply(e,arguments);return n.apply(e,arguments),t}}},once=function(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}},debounce=function(n,i){var o;return function(){var t=this,e=arguments;window.clearTimeout(o),o=window.setTimeout(function(){n.apply(t,e)},i)}},debounce_events=function(e,n,t){var i,o=e.trigger,s={};for(i in e.trigger=function(){var t=arguments[0];if(-1===n.indexOf(t))return o.apply(e,arguments);s[t]=arguments},t.apply(e,[]),e.trigger=o,s)s.hasOwnProperty(i)&&o.apply(e,s[i])},watchChildEvent=function(n,t,e,i){n.on(t,e,function(t){for(var e=t.target;e&&e.parentNode!==n[0];)e=e.parentNode;return t.currentTarget=e,i.apply(this,[t])})},getInputSelection=function(t){var e,n,i={};return void 0===t?console.warn("WARN getInputSelection cannot locate input control"):"selectionStart"in t?(i.start=t.selectionStart,i.length=t.selectionEnd-i.start):document.selection&&(t.focus(),e=document.selection.createRange(),n=document.selection.createRange().text.length,e.moveStart("character",-t.value.length),i.start=e.text.length-n,i.length=n),i},transferStyles=function(t,e,n){var i,o,s={};if(n)for(i=0,o=n.length;i").css({position:"absolute",width:"auto",padding:0,whiteSpace:"pre"}),$("
").css({position:"absolute",width:0,height:0,overflow:"hidden"}).append(Selectize.$testInput).appendTo("body")),Selectize.$testInput.text(t),transferStyles(e,Selectize.$testInput,["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"]),Selectize.$testInput.width()):0},autoGrow=function(s){function t(t,e){var n,i,o;e=e||{},(t=t||window.event||{}).metaKey||t.altKey||!e.force&&!1===s.data("grow")||(e=s.val(),t.type&&"keydown"===t.type.toLowerCase()&&(n=48<=(i=t.keyCode)&&i<=57||65<=i&&i<=90||96<=i&&i<=111||186<=i&&i<=222||32===i,i===KEY_DELETE||i===KEY_BACKSPACE?(o=getInputSelection(s[0])).length?e=e.substring(0,o.start)+e.substring(o.start+o.length):i===KEY_BACKSPACE&&o.start?e=e.substring(0,o.start-1)+e.substring(o.start+1):i===KEY_DELETE&&void 0!==o.start&&(e=e.substring(0,o.start)+e.substring(o.start+1)):n&&(i=t.shiftKey,o=String.fromCharCode(t.keyCode),e+=o=i?o.toUpperCase():o.toLowerCase())),t=(n=s.attr("placeholder"))?measureString(n,s)+4:0,(i=Math.max(measureString(e,s),t)+4)===r)||(r=i,s.width(i),s.triggerHandler("resize"))}var r=null;s.on("keydown keyup update blur",t),t()},domToString=function(t){var e=document.createElement("div");return e.appendChild(t.cloneNode(!0)),e.innerHTML},logError=function(t,e){e=e||{};console.error("Selectize: "+t),e.explanation&&(console.group&&console.group(),console.error(e.explanation),console.group)&&console.groupEnd()},isJSON=function(t){try{JSON.parse(t)}catch(t){return!1}return!0};function uaDetect(t,e){return navigator.userAgentData?t===navigator.userAgentData.platform:e.test(navigator.userAgent)}var Selectize=function(t,e){var n,i,o=this,s=t[0],r=(s.selectize=o,window.getComputedStyle&&window.getComputedStyle(s,null));if(r=(r?r.getPropertyValue("direction"):s.currentStyle&&s.currentStyle.direction)||t.parents("[dir]:first").attr("dir")||"",$.extend(o,{order:0,settings:e,$input:t,tabIndex:t.attr("tabindex")||"",tagType:"select"===s.tagName.toLowerCase()?TAG_SELECT:TAG_INPUT,rtl:/rtl/i.test(r),eventNS:".selectize"+ ++Selectize.count,highlightedValue:null,isBlurring:!1,isOpen:!1,isDisabled:!1,isRequired:t.is("[required]"),isInvalid:!1,isLocked:!1,isFocused:!1,isInputHidden:!1,isSetup:!1,isShiftDown:!1,isCmdDown:!1,isCtrlDown:!1,ignoreFocus:!1,ignoreBlur:!1,ignoreHover:!1,hasOptions:!1,currentResults:null,lastValue:"",lastValidValue:"",lastOpenTarget:!1,caretPos:0,loading:0,loadedSearches:{},isDropdownClosing:!1,$activeOption:null,$activeItems:[],optgroups:{},options:{},userOptions:{},items:[],renderCache:{},onSearchChange:null===e.loadThrottle?o.onSearchChange:debounce(o.onSearchChange,e.loadThrottle)}),o.sifter=new Sifter(this.options,{diacritics:e.diacritics}),o.settings.options){for(n=0,i=o.settings.options.length;n").addClass(t.wrapperClass).addClass(a+" selectize-control").addClass(r),p=$("
").addClass(t.inputClass+" selectize-input items").appendTo(l),c=$('').appendTo(p).attr("tabindex",s.is(":disabled")?"-1":e.tabIndex),u=$(t.dropdownParent||l),r=$("
").addClass(t.dropdownClass).addClass(r+" selectize-dropdown").hide().appendTo(u),u=$("
").addClass(t.dropdownContentClass+" selectize-dropdown-content").attr("tabindex","-1").appendTo(r),d=((d=s.attr("id"))&&(c.attr("id",d+"-selectized"),$("label[for='"+d+"']").attr("for",d+"-selectized")),e.settings.copyClassesToDropdown&&r.addClass(a),l.css({width:s[0].style.width}),e.plugins.names.length&&(d="plugin-"+e.plugins.names.join(" plugin-"),l.addClass(d),r.addClass(d)),(null===t.maxItems||1[data-selectable]",function(t){t.stopImmediatePropagation()}),r.on("mouseenter","[data-selectable]",function(){return e.onOptionHover.apply(e,arguments)}),r.on("mouseup click","[data-selectable]",function(){return e.onOptionSelect.apply(e,arguments)}),watchChildEvent(p,"mouseup","*:not(input)",function(){return e.onItemSelect.apply(e,arguments)}),autoGrow(c),p.on({mousedown:function(){return e.onMouseDown.apply(e,arguments)},click:function(){return e.onClick.apply(e,arguments)}}),c.on({mousedown:function(t){""===e.$control_input.val()&&!e.settings.openOnFocus||t.stopPropagation()},keydown:function(){return e.onKeyDown.apply(e,arguments)},keypress:function(){return e.onKeyPress.apply(e,arguments)},input:function(){return e.onInput.apply(e,arguments)},resize:function(){e.positionDropdown.apply(e,[])},focus:function(){return e.ignoreBlur=!1,e.onFocus.apply(e,arguments)},paste:function(){return e.onPaste.apply(e,arguments)}}),o.on("keydown"+n,function(t){e.isCmdDown=t[IS_MAC?"metaKey":"ctrlKey"],e.isCtrlDown=t[IS_MAC?"altKey":"ctrlKey"],e.isShiftDown=t.shiftKey}),o.on("keyup"+n,function(t){t.keyCode===KEY_CTRL&&(e.isCtrlDown=!1),t.keyCode===KEY_SHIFT&&(e.isShiftDown=!1),t.keyCode===KEY_CMD&&(e.isCmdDown=!1)}),o.on("mousedown"+n,function(t){if(e.isFocused){if(t.target===e.$dropdown[0]||t.target.parentNode===e.$dropdown[0])return!1;e.$dropdown.has(t.target).length||t.target===e.$control[0]||e.blur(t.target)}}),i.on(["scroll"+n,"resize"+n].join(" "),function(){e.isOpen&&e.positionDropdown.apply(e,arguments)}),i.on("mousemove"+n,function(){e.ignoreHover=e.settings.ignoreHover}),$("
")),a=s.children().detach();s.replaceWith(d),d.replaceWith(s),this.revertSettings={$children:a,tabindex:s.attr("tabindex")},s.attr("tabindex",-1).hide().after(e.$wrapper),Array.isArray(t.items)&&(e.lastValidValue=t.items,e.setValue(t.items),delete t.items),SUPPORTS_VALIDITY_API&&s.on("invalid"+n,function(t){t.preventDefault(),e.isInvalid=!0,e.refreshState()}),e.updateOriginalInput(),e.refreshItems(),e.refreshState(),e.updatePlaceholder(),e.isSetup=!0,s.is(":disabled")&&e.disable(),e.on("change",this.onChange),s.data("selectize",e),s.addClass("selectized"),e.trigger("initialize"),!0===t.preload&&e.onSearchChange("")},setupTemplates:function(){var t=this,i=t.settings.labelField,o=t.settings.valueField,n=t.settings.optgroupLabelField;t.settings.render=$.extend({},{optgroup:function(t){return'
'+t.html+"
"},optgroup_header:function(t,e){return'
'+e(t[n])+"
"},option:function(t,e){var n=t.classes?" "+t.classes:"";return n+=""===t[o]?" selectize-dropdown-emptyoptionlabel":"","'+e(t[i])+"
"},item:function(t,e){return'
'+e(t[i])+"
"},option_create:function(t,e){return'
Add '+e(t.input)+"…
"}},t.settings.render)},setupCallbacks:function(){var t,e,n={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur",dropdown_item_activate:"onDropdownItemActivate",dropdown_item_deactivate:"onDropdownItemDeactivate"};for(t in n)n.hasOwnProperty(t)&&(e=this.settings[n[t]])&&this.on(t,e)},onClick:function(t){this.isDropdownClosing||this.isFocused&&this.isOpen||(this.focus(),t.preventDefault())},onMouseDown:function(t){var e=this,n=t.isDefaultPrevented();$(t.target);if(e.isFocused||n||window.setTimeout(function(){e.focus()},0),t.target!==e.$control_input[0]||""===e.$control_input.val())return"single"===e.settings.mode?e.isOpen?e.close():e.open():(n||e.setActiveItem(null),e.settings.openOnFocus||(e.isOpen&&t.target===e.lastOpenTarget?(e.close(),e.lastOpenTarget=!1):(e.isOpen||(e.refreshOptions(),e.open()),e.lastOpenTarget=t.target))),!1},onChange:function(){""!==this.getValue()&&(this.lastValidValue=this.getValue()),this.$input.trigger("input"),this.$input.trigger("change")},onPaste:function(t){var o=this;o.isFull()||o.isInputHidden||o.isLocked?t.preventDefault():o.settings.splitOn&&setTimeout(function(){var t=o.$control_input.val();if(t.match(o.settings.splitOn))for(var e=t.trim().split(o.settings.splitOn),n=0,i=e.length;n=this.settings.maxItems},updateOriginalInput:function(t){var e,n,i,o,s,r,a=this;t=t||{},a.tagType===TAG_SELECT?(o=a.$input.find("option"),e=[],n=[],i=[],r=[],o.get().forEach(function(t){e.push(t.value)}),a.items.forEach(function(t){s=a.options[t][a.settings.labelField]||"",r.push(t),-1==e.indexOf(t)&&n.push('")}),i=e.filter(function(t){return r.indexOf(t)<0}).map(function(t){return'option[value="'+t+'"]'}),e.length-i.length+n.length!==0||a.$input.attr("multiple")||n.push(''),a.$input.find(i.join(", ")).remove(),a.$input.append(n.join(""))):(a.$input.val(a.getValue()),a.$input.attr("value",a.$input.val())),a.isSetup&&!t.silent&&a.trigger("change",a.$input.val())},updatePlaceholder:function(){var t;this.settings.placeholder&&(t=this.$control_input,this.items.length?t.removeAttr("placeholder"):t.attr("placeholder",this.settings.placeholder),t.triggerHandler("update",{force:!0}))},open:function(){var t=this;t.isLocked||t.isOpen||"multi"===t.settings.mode&&t.isFull()||(t.focus(),t.isOpen=!0,t.refreshState(),t.$dropdown.css({visibility:"hidden",display:"block"}),t.setupDropdownHeight(),t.positionDropdown(),t.$dropdown.css({visibility:"visible"}),t.trigger("dropdown_open",t.$dropdown))},close:function(){var t=this,e=t.isOpen;"single"===t.settings.mode&&t.items.length&&(t.hideInput(),t.isBlurring)&&t.$control_input[0].blur(),t.isOpen=!1,t.$dropdown.hide(),t.setActiveOption(null),t.refreshState(),e&&t.trigger("dropdown_close",t.$dropdown)},positionDropdown:function(){var t=this.$control,e="body"===this.settings.dropdownParent?t.offset():t.position(),t=(e.top+=t.outerHeight(!0),t[0].getBoundingClientRect().width);this.settings.minWidth&&this.settings.minWidth>t&&(t=this.settings.minWidth),this.$dropdown.css({width:t,top:e.top,left:e.left})},setupDropdownHeight:function(){if("object"==typeof this.settings.dropdownSize&&"auto"!==this.settings.dropdownSize.sizeType){var t=this.settings.dropdownSize.sizeValue;if("numberItems"===this.settings.dropdownSize.sizeType){for(var e=this.$dropdown_content.find("*").not(".optgroup, .highlight").not(this.settings.ignoreOnDropwdownHeight),n=0,i=0,o=0,s=0,r=0;r'+i+""+l)),{placeholder:n,options:[],optgroups:[],items:[]});if("select"===e)u(t,i);else{var o,s,r,a,l=t,p=i,n=l.attr(m);if(n)for(p.options=JSON.parse(n),o=0,s=p.options.length;owindow.innerHeight?o.top:o.bottom,i={width:t.outerWidth(),left:e.left};n===o.top?(n={bottom:e.top,top:"unset"},"body"===this.settings.dropdownParent&&(n.top=e.top-this.$dropdown.outerHeight(!0)-t.outerHeight(!0),n.bottom="unset"),Object.assign(i,n),this.$dropdown.addClass("selectize-position-top"),this.$control.addClass("selectize-position-top")):(Object.assign(i,{top:e.top,bottom:"unset"}),this.$dropdown.removeClass("selectize-position-top"),this.$control.removeClass("selectize-position-top")),this.$dropdown.css(i)}}),Selectize.define("auto_select_on_type",function(t){var n,i=this;i.onBlur=(n=i.onBlur,function(t){var e=i.getFirstItemMatchedByTextContent(i.lastValue,!0);return void 0!==e.attr("data-value")&&i.getValue()!==e.attr("data-value")&&i.setValue(e.attr("data-value")),n.apply(this,arguments)})}),Selectize.define("autofill_disable",function(t){var e,n=this;n.setup=(e=n.setup,function(){e.apply(n,arguments),n.$control_input.attr({autocomplete:"new-password",autofill:"no"})})}),Selectize.define("clear_button",function(e){var t,n=this;e=$.extend({title:"Clear",className:"clear",label:"×",html:function(t){return' '+t.label+""}},e),n.setup=(t=n.setup,function(){t.apply(n,arguments),n.$button_clear=$(e.html(e)),"single"===n.settings.mode&&n.$wrapper.addClass("single"),n.$wrapper.append(n.$button_clear),""!==n.getValue()&&0!==n.getValue().length||n.$wrapper.find("."+e.className).css("display","none"),n.on("change",function(){""===n.getValue()||0===n.getValue().length?n.$wrapper.find("."+e.className).css("display","none"):n.$wrapper.find("."+e.className).css("display","")}),n.$wrapper.on("click","."+e.className,function(t){t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation(),n.isLocked||(n.clear(),n.$wrapper.find("."+e.className).css("display","none"))})})}),Selectize.define("drag_drop",function(t){if(!$.fn.sortable)throw new Error('The "drag_drop" plugin requires jQuery UI "sortable".');var i,e,n,o;"multi"===this.settings.mode&&((i=this).lock=(e=i.lock,function(){var t=i.$control.data("sortable");return t&&t.disable(),e.apply(i,arguments)}),i.unlock=(n=i.unlock,function(){var t=i.$control.data("sortable");return t&&t.enable(),n.apply(i,arguments)}),i.setup=(o=i.setup,function(){o.apply(this,arguments);var n=i.$control.sortable({items:"[data-value]",forcePlaceholderSize:!0,disabled:i.isLocked,start:function(t,e){e.placeholder.css("width",e.helper.css("width")),n.addClass("dragging")},stop:function(){n.removeClass("dragging");var t=i.$activeItems?i.$activeItems.slice():null,e=[];n.children("[data-value]").each(function(){e.push($(this).attr("data-value"))}),i.isFocused=!1,i.setValue(e),i.isFocused=!0,i.setActiveItem(t),i.positionDropdown()}})}))}),Selectize.define("dropdown_header",function(t){var e,n=this;t=$.extend({title:"Untitled",headerClass:"selectize-dropdown-header",titleRowClass:"selectize-dropdown-header-title",labelClass:"selectize-dropdown-header-label",closeClass:"selectize-dropdown-header-close",html:function(t){return'
'+t.title+'×
'}},t),n.setup=(e=n.setup,function(){e.apply(n,arguments),n.$dropdown_header=$(t.html(t)),n.$dropdown.prepend(n.$dropdown_header),n.$dropdown_header.find("."+t.closeClass).on("click",function(){n.close()})})}),Selectize.define("optgroup_columns",function(r){function t(){var t,e,n,i,o=$("[data-group]",a.$dropdown_content),s=o.length;if(s&&a.$dropdown_content.width()){if(r.equalizeHeight){for(t=e=0;t
',t=t.firstChild,n.body.appendChild(t),e=l.width=t.offsetWidth-t.clientWidth,n.body.removeChild(t)),e});(r.equalizeHeight||r.equalizeWidth)&&(hook.after(this,"positionDropdown",t),hook.after(this,"refreshOptions",t))}),Selectize.define("remove_button",function(t){var s,e,n,i,r;"single"!==this.settings.mode&&(t=$.extend({label:"×",title:"Remove",className:"remove",append:!0},t),i=s=this,r=''+e.label+"",s.setup=(n=i.setup,function(){var o;e.append&&(o=i.settings.render.item,i.settings.render.item=function(t){return e=o.apply(s,arguments),n=r,i=e.search(/(<\/[^>]+>\s*)$/),e.substring(0,i)+n+e.substring(i);var e,n,i}),n.apply(s,arguments),s.$control.on("click","."+e.className,function(t){if(t.preventDefault(),!i.isLocked)return t=$(t.currentTarget).parent(),i.setActiveItem(t),i.deleteSelection()&&i.setCaret(i.items.length),!1})}))}),Selectize.define("restore_on_backspace",function(n){var i,t=this;n.text=n.text||function(t){return t[this.settings.labelField]},this.onKeyDown=(i=t.onKeyDown,function(t){var e;if(!(t.keyCode===KEY_BACKSPACE&&""===this.$control_input.val()&&!this.$activeItems.length&&0<=(e=this.caretPos-1)&&e"+(e.length-n)+""))}}}(),this.onFocus=function(){const e=t.onFocus;return function(t){e.apply(this,t),t&&((t=this.$control).find(".item").show(),t.find("span").remove())}}()}); return Selectize; })); diff --git a/dist/less/selectize.legacy.less b/dist/less/selectize.legacy.less deleted file mode 100644 index 5749bfcf3..000000000 --- a/dist/less/selectize.legacy.less +++ /dev/null @@ -1,59 +0,0 @@ -@import "selectize"; - -@selectize-font-size: 13px; -@selectize-line-height: 20px; - -@selectize-color-input-full: #f2f2f2; -@selectize-color-item: #b8e76f; -@selectize-color-item-text: #3d5d18; -@selectize-color-item-border: #74b21e; -@selectize-color-item-active: #92c836; -@selectize-color-item-active-border: #6f9839; -@selectize-color-highlight: rgba(255,237,40,0.4); -@selectize-color-dropdown-item-active: #fffceb; -@selectize-color-dropdown-item-active-text: @selectize-color-text; -@selectize-color-optgroup: #f8f8f8; -@selectize-color-optgroup-text: @selectize-color-text; -@selectize-width-item-border: 1px; - -@selectize-padding-x: 10px; -@selectize-padding-y: 10px; -@selectize-padding-item-x: 5px; -@selectize-padding-item-y: 1px; -@selectize-padding-dropdown-item-x: 10px; -@selectize-padding-dropdown-item-y: 7px; -@selectize-margin-item-x: 4px; -@selectize-margin-item-y: 4px; - -.selectize-control { - &.multi { - .selectize-input [data-value] { - text-shadow: 0 1px 0 rgba(255,255,255,0.1); - .selectize-border-radius(3px); - .selectize-vertical-gradient(#b8e76f, #a9e25c); - .selectize-box-shadow(0 1px 1px rgba(0,0,0,0.1)); - &.active { - .selectize-vertical-gradient(#92c836, #7abc2c); - } - } - } - &.single { - .selectize-input { - .selectize-box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 0 #e0e0e0, 0 3px 0 #c8c8c8, 0 4px 1px rgba(0,0,0,0.1)"); - .selectize-vertical-gradient(#f5f5f5, #efefef); - } - } -} - -.selectize-control.single .selectize-input, .selectize-dropdown.single { - border-color: #b8b8b8; -} - -.selectize-dropdown { - .optgroup-header { - font-weight: bold; - font-size: 0.8em; - border-bottom: 1px solid @selectize-color-dropdown-border-top; - border-top: 1px solid @selectize-color-dropdown-border-top; - } -} diff --git a/dist/lib/bootstrap2/accordion.less b/dist/lib/bootstrap2/accordion.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/alerts.less b/dist/lib/bootstrap2/alerts.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/bootstrap.less b/dist/lib/bootstrap2/bootstrap.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/breadcrumbs.less b/dist/lib/bootstrap2/breadcrumbs.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/button-groups.less b/dist/lib/bootstrap2/button-groups.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/buttons.less b/dist/lib/bootstrap2/buttons.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/carousel.less b/dist/lib/bootstrap2/carousel.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/close.less b/dist/lib/bootstrap2/close.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/code.less b/dist/lib/bootstrap2/code.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/component-animations.less b/dist/lib/bootstrap2/component-animations.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/dropdowns.less b/dist/lib/bootstrap2/dropdowns.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/forms.less b/dist/lib/bootstrap2/forms.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/grid.less b/dist/lib/bootstrap2/grid.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/hero-unit.less b/dist/lib/bootstrap2/hero-unit.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/labels-badges.less b/dist/lib/bootstrap2/labels-badges.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/layouts.less b/dist/lib/bootstrap2/layouts.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/media.less b/dist/lib/bootstrap2/media.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/mixins.less b/dist/lib/bootstrap2/mixins.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/modals.less b/dist/lib/bootstrap2/modals.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/navbar.less b/dist/lib/bootstrap2/navbar.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/navs.less b/dist/lib/bootstrap2/navs.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/pager.less b/dist/lib/bootstrap2/pager.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/pagination.less b/dist/lib/bootstrap2/pagination.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/popovers.less b/dist/lib/bootstrap2/popovers.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/progress-bars.less b/dist/lib/bootstrap2/progress-bars.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/reset.less b/dist/lib/bootstrap2/reset.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/responsive-1200px-min.less b/dist/lib/bootstrap2/responsive-1200px-min.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/responsive-767px-max.less b/dist/lib/bootstrap2/responsive-767px-max.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/responsive-768px-979px.less b/dist/lib/bootstrap2/responsive-768px-979px.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/responsive-navbar.less b/dist/lib/bootstrap2/responsive-navbar.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/responsive-utilities.less b/dist/lib/bootstrap2/responsive-utilities.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/responsive.less b/dist/lib/bootstrap2/responsive.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/scaffolding.less b/dist/lib/bootstrap2/scaffolding.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/sprites.less b/dist/lib/bootstrap2/sprites.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tables.less b/dist/lib/bootstrap2/tables.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/buttons.html b/dist/lib/bootstrap2/tests/buttons.html old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/css-tests.css b/dist/lib/bootstrap2/tests/css-tests.css old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/css-tests.html b/dist/lib/bootstrap2/tests/css-tests.html old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/forms-responsive.html b/dist/lib/bootstrap2/tests/forms-responsive.html old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/forms.html b/dist/lib/bootstrap2/tests/forms.html old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/navbar-fixed-top.html b/dist/lib/bootstrap2/tests/navbar-fixed-top.html old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/navbar-static-top.html b/dist/lib/bootstrap2/tests/navbar-static-top.html old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tests/navbar.html b/dist/lib/bootstrap2/tests/navbar.html old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/thumbnails.less b/dist/lib/bootstrap2/thumbnails.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/tooltip.less b/dist/lib/bootstrap2/tooltip.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/type.less b/dist/lib/bootstrap2/type.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/utilities.less b/dist/lib/bootstrap2/utilities.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/variables.less b/dist/lib/bootstrap2/variables.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap2/wells.less b/dist/lib/bootstrap2/wells.less old mode 100644 new mode 100755 diff --git a/dist/lib/bootstrap5/_carousel.scss b/dist/lib/bootstrap5/_carousel.scss index 3d8fb15a0..858b83634 100644 --- a/dist/lib/bootstrap5/_carousel.scss +++ b/dist/lib/bootstrap5/_carousel.scss @@ -42,7 +42,6 @@ display: block; } -/* rtl:begin:ignore */ .carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { transform: translateX(100%); @@ -53,8 +52,6 @@ transform: translateX(-100%); } -/* rtl:end:ignore */ - // // Alternate transitions diff --git a/dist/lib/bootstrap5/_functions.scss b/dist/lib/bootstrap5/_functions.scss index 969a4b08b..26c953bae 100644 --- a/dist/lib/bootstrap5/_functions.scss +++ b/dist/lib/bootstrap5/_functions.scss @@ -198,7 +198,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 // Return opaque color // opaque(#fff, rgba(0, 0, 0, .5)) => #808080 @function opaque($background, $foreground) { - @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100); + @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%); } // scss-docs-start color-functions diff --git a/dist/lib/bootstrap5/bootstrap-utilities.scss b/dist/lib/bootstrap5/bootstrap-utilities.scss index c940676ac..2b3dbc5fe 100644 --- a/dist/lib/bootstrap5/bootstrap-utilities.scss +++ b/dist/lib/bootstrap5/bootstrap-utilities.scss @@ -8,6 +8,9 @@ @import "mixins"; @import "utilities"; +// Layout & components +@import "root"; + // Helpers @import "helpers"; diff --git a/dist/lib/bootstrap5/mixins/_banner.scss b/dist/lib/bootstrap5/mixins/_banner.scss index 8dacb037c..97ec9d1ee 100644 --- a/dist/lib/bootstrap5/mixins/_banner.scss +++ b/dist/lib/bootstrap5/mixins/_banner.scss @@ -1,6 +1,6 @@ @mixin bsBanner($file) { /*! - * Bootstrap #{$file} v5.2.2 (https://getbootstrap.com/) + * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/) * Copyright 2011-2022 The Bootstrap Authors * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 000000000..b2d6de306 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,20 @@ +# Dependencies +/node_modules + +# Production +/build + +# Generated files +.docusaurus +.cache-loader + +# Misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/docs/.ssl/loopback_website.crt b/docs/.ssl/loopback_website.crt new file mode 100644 index 000000000..16a21772b --- /dev/null +++ b/docs/.ssl/loopback_website.crt @@ -0,0 +1,20 @@ +-----BEGIN CERTIFICATE----- +MIIDWjCCAkKgAwIBAgIJAIETdtjPHOAJMA0GCSqGSIb3DQEBCwUAMEMxCzAJBgNV +BAYTAlVTMQswCQYDVQQIDAJQQTETMBEGA1UEBwwKUGl0dHNidXJnaDESMBAGA1UE +CwwJQXJjaGl0ZWNoMB4XDTE3MDYwMTExMzkxN1oXDTI3MDUzMDExMzkxN1owQzEL +MAkGA1UEBhMCVVMxCzAJBgNVBAgMAlBBMRMwEQYDVQQHDApQaXR0c2J1cmdoMRIw +EAYDVQQLDAlBcmNoaXRlY2gwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIB +AQCzOW7y3/95mqLavJqFLpaiXeSdKV391ZviICdfngHzSzgUJirew8vaEFitX7CI +b8D0Wc5OWKwotJgjramZQdlK9FM6bFYIGVzyYBOhjle24BH+P6H6CTOoyCNZB1+2 +iqmUQ7r36Koq8hyzNJRgoShNyLxHZbsiFWLXWlkdQ4mapTf/9dwEV0mszcSEDviC +6AOyuLZ0Ynlck3dlC9lCXd/+ngyn1VmyO+2+X41ZU+jODhUak6okMHTGoxo/fCmY +fGrj9gOJ62VhKxrpnYnLcvPDIOMy3Uh56uEexIB/nNY4CrqGDY7u/GhC9zs9KilE +B9lLLFOGuwcSOPWodomi64nbAgMBAAGjUTBPMAkGA1UdEwQCMAAwCwYDVR0PBAQD +AgXgMDUGA1UdEQQuMCyCEioubG9vcGJhY2sud2Vic2l0ZYIQbG9vcGJhY2sud2Vi +c2l0ZYcEfwAAATANBgkqhkiG9w0BAQsFAAOCAQEAE25dLxblB0aqUP2AvuOj2Mnb +LfMjfZvQoVXRWPjOfqF9xzIwzAvmKk2vnktWEYrulJO4XVAyH9Z/ilrqoULoDOL8 +GLjAJXdxQhxC9JWRzWYURMpF2Jmeqh6r8xsEEwqa3JXNhTfc8WpSFqbD2bIuaHQt +CSkdP7XJHNzGDjL4gYCapjhLN27EkAMmpfk5vVPaf1K+AiWXxwxb3fo6B5w2+6Fn +JAEH0t6l4Fl5U84er/MkubJ9X/jOA8ATQYjzSqfghr7MTJxM6Tj8AonazyN6m0Zy +a+2C4UGWpNECmSnsUUfMXjx2wbe2VLb2me3BuyExMwospSj0pVamrnV+obiqQQ== +-----END CERTIFICATE----- diff --git a/docs/.ssl/loopback_website.key b/docs/.ssl/loopback_website.key new file mode 100644 index 000000000..d5f7dd86e --- /dev/null +++ b/docs/.ssl/loopback_website.key @@ -0,0 +1,27 @@ +-----BEGIN RSA PRIVATE KEY----- +MIIEpAIBAAKCAQEAszlu8t//eZqi2ryahS6Wol3knSld/dWb4iAnX54B80s4FCYq +3sPL2hBYrV+wiG/A9FnOTlisKLSYI62pmUHZSvRTOmxWCBlc8mAToY5XtuAR/j+h ++gkzqMgjWQdftoqplEO69+iqKvIcszSUYKEoTci8R2W7IhVi11pZHUOJmqU3//Xc +BFdJrM3EhA74gugDsri2dGJ5XJN3ZQvZQl3f/p4Mp9VZsjvtvl+NWVPozg4VGpOq +JDB0xqMaP3wpmHxq4/YDietlYSsa6Z2Jy3LzwyDjMt1IeerhHsSAf5zWOAq6hg2O +7vxoQvc7PSopRAfZSyxThrsHEjj1qHaJouuJ2wIDAQABAoIBAAzYS+xaQ3waqhtV +MxnieedPJWhiI5tiqNZvCYNf1rHyLSW8iowGqmCJlWFvnz5YDBM3MIMK9ePA9bpw +4tvaDVHC6wgf5ZaVAsVYP2/vvLednYyEUP6TlEE/ftENpz10+KxookjMQw3q5kWt +ugim5DWW8m+Hif7qW3glwIdJZN5RZFq/dzu0R1yIRpj384+ENNGQlLGLwhAwpeew +IlO8eUXpxfHMPJpQs0Q2SxcHiwnJBFVnpmP4LoNJzil3icwkxoh0afjau6/lGZ+T +zPE7XA5elfJnbLjqaZHajiTrSzvOxUnvjBTNwwkpG9URMpylIdomzvRONr9PIz7j +uAGrnmkCgYEA18M2CxCgXoetbSRqPS2AY7G1wbCFV8cXJEevFrsTTfA4HSPk8UBZ +V2L0QojNDGL5yV9uDxVCBmLU9G0Aaq3Di9ilw4uLq8n+wunpNJ5b8u6hkYK9kt1i +sLzlB+ohtMEOcQoBMdOyClSXyIkEf5wT2e+YGfVe//3m/ZdN+ibRkXcCgYEA1KXX +MvBcqH+Q/d3Xm84yI7ID3luFSzoZnWJAeNkAgCiApldmfm8WxPY7NEmLDdWhH/E2 +8uIZTHalWuSmMGjBjgpV1yuEs/FHL3deoDmN96JD5MqzdbctMn5RDh0rVIdIGGS6 +4YeKsGXxu/IrdR+1umVodAsOI+IFMt/H4MgnQ70CgYEAsEF/B4D4kOBjMxKZWwqt +pENLCEQMWc2AwRlyFa6TMYr4PA3Te6UmlrV2dlfMsb608OTtQpMKEa9w6Y+V1I/I +e5hqqZh4a8iiPlXZNSvcT1LTV8wm0y/Y7CoTKuj/yeofwwX6PdsCyV+bcq1DqH82 +1ETeyu3gQl0G8shEYgKOFjcCgYAXX/N74fgNfZhOj6g3tD7Gtba/JohMcKKILliv +8AqiC9G4dzsJAuUZ2YdAhCUI7Ea94CIOKNRnF1Ot3hx2jc1Y88Hj2SDJNuiASzrX +mfwFEI0uBSoc8nnBZyk5x/MPY5+FLu1sBR41rb8YzdIBGe88AhGtT9nKD/pKUVcD +Wn0WcQKBgQCOvBEgg+6CDk+VFJZYwUP7OwQBgEmpaV+1Qxaw6KfM/MsLrpAhQPe+ +C7QFTZMfg5+tIxeLnMY27y7MWcYJGPY543OUQb7emI2ppVT7cnb2+k9Uvd5tDSBG +Lc9VaV32JmMa5TBYY0QPJV87OHNs3p2DCD04j3O2lzldReOTFLPPLg== +-----END RSA PRIVATE KEY----- diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..aaba2fa1e --- /dev/null +++ b/docs/README.md @@ -0,0 +1,41 @@ +# Website + +This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. + +### Installation + +``` +$ yarn +``` + +### Local Development + +``` +$ yarn start +``` + +This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. + +### Build + +``` +$ yarn build +``` + +This command generates static content into the `build` directory and can be served using any static contents hosting service. + +### Deployment + +Using SSH: + +``` +$ USE_SSH=true yarn deploy +``` + +Not using SSH: + +``` +$ GIT_USER= yarn deploy +``` + +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/docs/api.md b/docs/api.md deleted file mode 100644 index 0a17e5548..000000000 --- a/docs/api.md +++ /dev/null @@ -1,276 +0,0 @@ -## Selectize API - -Selectize controls can be controlled programmatically via the methods described in this section. -When initializing the control, the `selectize` property is -added on the original <select> / <input> element—this -property points to the underlying Selectize instance. - -```js -// initialize the Selectize control -var $select = $('select').selectize(options); - -// fetch the instance -var selectize = $select[0].selectize; -``` - -#### Related Topics - -- [Event Documentation](events.md) -- [Developing Plugins](plugins.md) - -### Properties - - - - - - - - - - - - - - - - - -
Properties
PropertyDescription
optionsAn object containing the entire pool of options. The object is keyed by each object's value.
itemsAn array of selected values.
- -### Methods - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Options
MethodDescription
addOption(data)Adds an available option, or array of options. If it already exists, nothing will happen. Note: this does not refresh the options list dropdown (use refreshOptions() for that).
updateOption(value, data)Updates an option available for selection. If it is visible in the selected items or options dropdown, it will be re-rendered automatically.
removeOption(value)Removes the option identified by the given value.
clearOptions(silent)Removes all options from the control, and resets/clears all selected items. If silent is truthy, no change event will be fired on the original input.
getOption(value)Retrieves the jQuery element for the option identified by the given value.
getAdjacentOption(value, direction)Retrieves the jQuery element for the previous or next option, relative to the currently highlighted option. The direction argument should be 1 for "next" or -1 for "previous".
refreshOptions(triggerDropdown)Refreshes the list of available options shown in the autocomplete dropdown menu.
Items
MethodDescription
clear(silent)Resets / clears all selected items from the control. If silent is truthy, no change event will be fired on the original input.
getItem(value)Returns the jQuery element of the item matching the given value.
addItem(value, silent)"Selects" an item. Adds it to the list at the current caret position. If silent is truthy, no change event will be fired on the original input.
removeItem(value, silent)Removes the selected item matching the provided value. If silent is truthy, no change event will be fired on the original input.
createItem(value, [triggerDropdown], [callback])Invokes the create method provided in the Selectize settings that should provide the data for the new item, given the user input. Once this completes, it will be added to the item list.
refreshItems()Re-renders the selected item lists.
Optgroups
MethodDescription
addOptionGroup(id, data)Registers a new optgroup for options to be bucketed into. The id argument refers to a value of the property in option identified by the optgroupField setting.
removeOptionGroup(id)Removes a single option group.
clearOptionGroups()Removes all existing option groups.
Events
MethodDescription
on(event, handler)Adds an event listener.
off(event, handler)Removes an event listener.
off(event)Removes all event listeners.
trigger(event, ...)Triggers event listeners.
Dropdown
MethodDescription
open()Shows the autocomplete dropdown containing the available options.
close()Closes the autocomplete dropdown menu.
positionDropdown()Calculates and applies the appropriate position of the dropdown.
Other
MethodDescription
destroy()Destroys the control and unbinds event listeners so that it can be garbage collected.
load(fn)Loads options by invoking the provided function. The function should accept one argument (callback) and invoke the callback with the results once they are available.
focus()Brings the control into focus.
blur()Forces the control out of focus.
lock()Disables user input on the control (note: the control can still receive focus).
unlock()Re-enables user input on the control.
disable()Disables user input on the control completely. While disabled, it cannot receive focus.
enable()Enables the control so that it can respond to focus and user input.
getValue()Returns the value of the control. If multiple items can be selected with a "select" input tag (e.g. <select multiple>), this returns an array. Otherwise, returns a string (separated by delimiter if "multiple").
setValue(value, silent)Resets the selected items to the given value.
setCaret(index)Moves the caret to the specified position (index being the index in the list of selected items).
isFull()Returns whether or not the user can select more items.
clearCache(template)Clears the render cache. Takes an optional template argument (e.g. option , item) to clear only that cache.
updatePlaceholder()When the `settings.placeholder` value is changed, the new placeholder will be displayed.
setTextboxValue(str)Sets the value of the input field.
- -### Related Objects - -#### Search - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OptionDescriptionType
optionsOriginal search options.object
queryThe raw user input.string
tokensAn array containing parsed search tokens. A token is an object containing two properties: string and regex .array
totalThe total number of results.int
itemsA list of matched results. Each result is an object containing two properties: score and id .array
diff --git a/docs/babel.config.js b/docs/babel.config.js new file mode 100644 index 000000000..e00595dae --- /dev/null +++ b/docs/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], +}; diff --git a/docs/docs/API/clear_button Plugin.mdx b/docs/docs/API/clear_button Plugin.mdx new file mode 100644 index 000000000..d0f1bdbfe --- /dev/null +++ b/docs/docs/API/clear_button Plugin.mdx @@ -0,0 +1,38 @@ +--- +title: clear_button Plugin +description: API Reference for clear_button Plugin +--- +# API Documentation for clear_button Plugin + + +## options : object +Object of options available for "clear_button" plugin + +**Kind**: global typedef +**Author**: [Fabien Winkler](https://github.com/fabienwnklr) + +| Param | Type | Default | Description | +| --- | --- | --- | --- | +| [title] | string | "Clear" | Title for the clear button | +| [className] | string | "clear" | Class name for the clear button | +| [label] | string | "×" | [props=data] Label for the clear button | +| [html] | function | | Method used for rendering | + +**Example** +```js +$('select').selectize({ + plugins: [ + { + clear_button: { + title: 'Custom title', + className: 'custom-class', + label: 'custom label', + html: (data) => { + return ( + `${data.label}`; + } + } + } + ] +}); +``` diff --git a/docs/docs/API/constants.mdx b/docs/docs/API/constants.mdx new file mode 100644 index 000000000..4f47ce43d --- /dev/null +++ b/docs/docs/API/constants.mdx @@ -0,0 +1,89 @@ +--- +title: constants +description: API Reference for constants +--- +# API Documentation for constants + + +## IS\_MAC : boolean +Check if device is a Mac + +**Kind**: global variable + + +## KEY\_A : number +**Kind**: global variable + + +## KEY\_COMMA : number +**Kind**: global variable + + +## KEY\_RETURN : number +**Kind**: global variable + + +## KEY\_ESC : number +**Kind**: global variable + + +## KEY\_LEFT : number +**Kind**: global variable + + +## KEY\_UP : number +**Kind**: global variable + + +## KEY\_P : number +**Kind**: global variable + + +## KEY\_RIGHT : number +**Kind**: global variable + + +## KEY\_DOWN : number +**Kind**: global variable + + +## KEY\_N : number +**Kind**: global variable + + +## KEY\_BACKSPACE : number +**Kind**: global variable + + +## KEY\_DELETE : number +**Kind**: global variable + + +## KEY\_SHIFT : number +**Kind**: global variable + + +## KEY\_CMD : number +**Kind**: global variable + + +## KEY\_CTRL : number +**Kind**: global variable + + +## KEY\_TAB : number +**Kind**: global variable + + +## TAG\_SELECT : number +**Kind**: global variable + + +## TAG\_INPUT : number +**Kind**: global variable + + +## SUPPORTS\_VALIDITY\_API : number +Check if device support validity api, for now, android support in general is too spotty to support validity + +**Kind**: global variable diff --git a/docs/docs/API/dropdown_header Plugin.mdx b/docs/docs/API/dropdown_header Plugin.mdx new file mode 100644 index 000000000..016cc3347 --- /dev/null +++ b/docs/docs/API/dropdown_header Plugin.mdx @@ -0,0 +1,42 @@ +--- +title: dropdown_header Plugin +description: API Reference for dropdown_header Plugin +--- +# API Documentation for dropdown_header Plugin + + +## options : Object +Available options for dropdown_header plugin + +**Kind**: global typedef +**Author**: [Brian Reavis](https://github.com/brianreavis) + +| Param | Type | Default | Description | +| --- | --- | --- | --- | +| [title] | string | "Untitled" | Title of dropdown_header | +| [headerClass] | string | "selectize-dropdown-header" | Class of dropdown_header | +| [titleRowClass] | string | "selectize-dropdown-header-title" | Class for title row | +| [labelClass] | string | "selectize-dropdown-header-label" | Class for label | +| [closeClass] | string | "selectize-dropdown-header-close" | Class for dropdown_header close button | +| [html] | function | | Method for custom rendering of dropdown_header | + +**Example** +```js +$('select').selectize({ + plugins: [ + { + dropdown_header: { + title: 'Custom title', + headerClass: 'custom-header-class', + labelClass: 'custom-label-class', + closeClass: 'custom-close-class', + html: (data) => { + // data contain all options values + return ( + `${data.title}`; + } + } + } + ] +}); +``` diff --git a/docs/docs/API/highlight.mdx b/docs/docs/API/highlight.mdx new file mode 100644 index 000000000..7af38ae1e --- /dev/null +++ b/docs/docs/API/highlight.mdx @@ -0,0 +1,15 @@ +--- +title: highlight +description: API Reference for highlight +--- +# API Documentation for highlight + + +## highlight() +highlight v3 | MIT license | Johann Burkard +Highlights arbitrary terms in a node. + +- Modified by Marshal 2011-6-24 (added regex) +- Modified by Brian Reavis 2012-8-27 (cleanup) + +**Kind**: global function diff --git a/docs/docs/API/microevent.mdx b/docs/docs/API/microevent.mdx new file mode 100644 index 000000000..9cc80e8fd --- /dev/null +++ b/docs/docs/API/microevent.mdx @@ -0,0 +1,29 @@ +--- +title: microevent +description: API Reference for microevent +--- +# API Documentation for microevent + + +## MicroEvent() +MicroEvent - to make any js object an event emitter + +- pure javascript - server compatible, browser compatible +- don't rely on the browser doms +- super simple - you get it immediately, no mystery, no magic involved + +**Kind**: global function +**Author**: Jerome Etienne (https://github.com/jeromeetienne) + + +### MicroEvent.mixin(the) +Mixin will delegate all MicroEvent.js function in the destination object. + +- MicroEvent.mixin(Foobar) will make Foobar able to use MicroEvent + +**Kind**: static method of [MicroEvent](#MicroEvent) + +| Param | Type | Description | +| --- | --- | --- | +| the | object | object which will support MicroEvent | + diff --git a/docs/docs/API/microplugin.mdx b/docs/docs/API/microplugin.mdx new file mode 100644 index 000000000..96d8ef869 --- /dev/null +++ b/docs/docs/API/microplugin.mdx @@ -0,0 +1,87 @@ +--- +title: microplugin +description: API Reference for microplugin +--- +# API Documentation for microplugin + + +## MicroPlugin +MicroPlugin + +**Kind**: global class + +* [MicroPlugin](#MicroPlugin) + * [new MicroPlugin(items, items)](#new_MicroPlugin_new) + * [.Interface.plugins](#MicroPlugin.Interface.plugins) + * [.Interface#initializePlugins(plugins)](#MicroPlugin.Interface+initializePlugins) + * [.Interface#loadPlugin(name)](#MicroPlugin.Interface+loadPlugin) + * [.Interface#require(name)](#MicroPlugin.Interface+require) + * [.Interface.define(name, fn)](#MicroPlugin.Interface.define) + + + +### new MicroPlugin(items, items) +Keep code modularized & extensible. +MicroPlugin is a lightweight drop-in plugin architecture for your JavaScript library. + Plugins can declare dependencies to other plugins and can be initialized with options (in a variety of formats). + + +| Param | Type | +| --- | --- | +| items | array \| object | +| items | object | + + + +### MicroPlugin.Interface.plugins +**Kind**: static property of [MicroPlugin](#MicroPlugin) + + +### MicroPlugin.Interface#initializePlugins(plugins) +Initializes the listed plugins (with options). +Acceptable formats: + +- List (without options): - `['a', 'b', 'c']` +- List (with options): - `[{'name': 'a', options: {}}, {'name': 'b', options: {}}]` +- Hash (with options): - `{'a': { ... }, 'b': { ... }, 'c': { ... }}` + +**Kind**: static method of [MicroPlugin](#MicroPlugin) + +| Param | Type | +| --- | --- | +| plugins | mixed | + + + +### MicroPlugin.Interface#loadPlugin(name) +Loads a plugin. + +**Kind**: static method of [MicroPlugin](#MicroPlugin) + +| Param | Type | Description | +| --- | --- | --- | +| name | string | The name of the plugin to load. | + + + +### MicroPlugin.Interface#require(name) +Initializes a plugin. + +**Kind**: static method of [MicroPlugin](#MicroPlugin) + +| Param | Type | +| --- | --- | +| name | string | + + + +### MicroPlugin.Interface.define(name, fn) +Registers a plugin. + +**Kind**: static method of [MicroPlugin](#MicroPlugin) + +| Param | Type | +| --- | --- | +| name | string | +| fn | function | + diff --git a/docs/docs/API/optgroup_columns Plugin.mdx b/docs/docs/API/optgroup_columns Plugin.mdx new file mode 100644 index 000000000..4b2b74e18 --- /dev/null +++ b/docs/docs/API/optgroup_columns Plugin.mdx @@ -0,0 +1,31 @@ +--- +title: optgroup_columns Plugin +description: API Reference for optgroup_columns Plugin +--- +# API Documentation for optgroup_columns Plugin + + +## options : Object +Available options for optgroup_columns plugin + +**Kind**: global typedef +**Author**: [Simon Hewitt](https://github.com/sjhewitt) + +| Param | Type | Default | +| --- | --- | --- | +| [equalizeWidth] | boolean | true | +| [equalizeHeight] | boolean | true | + +**Example** +```js +$('select').selectize({ + plugins: [ + { + optgroup_columns: { + equalizeWidth: false, + equalizeHeight: false, + } + } + ] +}); +``` diff --git a/docs/docs/API/remove_button Plugin.mdx b/docs/docs/API/remove_button Plugin.mdx new file mode 100644 index 000000000..eed379e49 --- /dev/null +++ b/docs/docs/API/remove_button Plugin.mdx @@ -0,0 +1,20 @@ +--- +title: remove_button Plugin +description: API Reference for remove_button Plugin +--- +# API Documentation for remove_button Plugin + + +## options : Object +Object of options available for "remove_button" plugin + +**Kind**: global typedef +**Author**: [Brian Reavis](https://github.com/brianreavis) + +| Param | Type | Default | Description | +| --- | --- | --- | --- | +| [label] | string | "&#xd7;" | The label value for remove button | +| [title] | string | "Remove" | The Title value for remove button | +| [className] | string | "remove" | Class name for remove button | +| [append] | boolean | true | Append remove button to item | + diff --git a/docs/docs/API/restore_on_backspace Plugin.mdx b/docs/docs/API/restore_on_backspace Plugin.mdx new file mode 100644 index 000000000..ff1efbc5f --- /dev/null +++ b/docs/docs/API/restore_on_backspace Plugin.mdx @@ -0,0 +1,17 @@ +--- +title: restore_on_backspace Plugin +description: API Reference for restore_on_backspace Plugin +--- +# API Documentation for restore_on_backspace Plugin + + +## options : Object +Object of options available on restore_on_backspace plugin + +**Kind**: global typedef +**Author**: [Brian Reavis](htts://github.com/brianreavis) + +| Param | Type | Description | +| --- | --- | --- | +| text | string | Text to set on restore | + diff --git a/docs/docs/API/selectize.mdx b/docs/docs/API/selectize.mdx new file mode 100644 index 000000000..1899c0967 --- /dev/null +++ b/docs/docs/API/selectize.mdx @@ -0,0 +1,819 @@ +--- +title: selectize +description: API Reference for selectize +--- +# API Documentation for selectize + + +## setup() +Creates all elements and sets up event bindings. + +**Kind**: global function + + +## setupTemplates() +Sets up default rendering functions. + +**Kind**: global function + + +## setupCallbacks() +Maps fired events to callbacks provided +in the settings used when creating the control. + +**Kind**: global function + + +## onClick(e) ⇒ boolean +Triggered when the main control element +has a click event. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | PointerEvent | + + + +## onMouseDown(e) ⇒ boolean +Triggered when the main control element +has a mouse down event. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## onChange() +Triggered when the value of the control has been changed. +This should propagate the event to the original DOM +input / select element. + +**Kind**: global function + + +## onPaste(e) ⇒ boolean +Triggered on `` paste. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## onKeyPress(e) ⇒ boolean +Triggered on `` keypress. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## onKeyDown(e) ⇒ boolean +Triggered on `` keydown. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## onInput(e) ⇒ boolean +Triggered on `` input. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## onSearchChange(value) +Invokes the user-provide option provider / loader. + +Note: this function is debounced in the Selectize +constructor (by `settings.loadThrottle` milliseconds) + +**Kind**: global function + +| Param | Type | +| --- | --- | +| value | string | + + + +## onFocus(e) ⇒ boolean +Triggered on `` focus. + +**Kind**: global function + +| Param | Type | Description | +| --- | --- | --- | +| e | FocusEvent | (optional) | + + + +## onBlur(e, dest) +Triggered on `` blur. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | +| dest | Element | + + + +## onOptionHover(e) ⇒ boolean +Triggered when the user rolls over +an option in the autocomplete dropdown menu. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## onOptionSelect(e) ⇒ boolean +Triggered when the user clicks on an option +in the autocomplete dropdown menu. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## onItemSelect(e) ⇒ boolean +Triggered when the user clicks on an item +that has been selected. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| e | object | + + + +## load(fn) +Invokes the provided method that provides +results to a callback---which are then added +as options to the control. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| fn | function | + + + +## getTextboxValue() ⇒ string +Gets the value of input field of the control. + +**Kind**: global function +**Returns**: string - value + + +## setTextboxValue(value) +Sets the input field of the control to the specified value. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| value | string | + + + +## getValue() ⇒ mixed +Returns the value of the control. If multiple items +can be selected `(e.g. ` or `` +element to reflect the current state. + +**Kind**: global function + + +## updatePlaceholder() +Shows/hide the input placeholder depending +on if there items in the list already. + +**Kind**: global function + + +## open() +Shows the autocomplete dropdown containing +the available options. + +**Kind**: global function + + +## close() +Closes the autocomplete dropdown menu. + +**Kind**: global function + + +## positionDropdown() +Calculates and applies the appropriate +position of the dropdown. + +**Kind**: global function + + +## clear(silent) +Resets / clears all selected items +from the control. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| silent | boolean | + + + +## insertAtCaret($el) +A helper method for inserting an element +at the current caret position. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| $el | object | + + + +### insertAtCaret~target : HTMLElement +**Kind**: inner property of [insertAtCaret](#insertAtCaret) + + +## deleteSelection(e) ⇒ boolean +Removes the current selected item(s). + +**Kind**: global function + +| Param | Type | Description | +| --- | --- | --- | +| e | object | (optional) | + + + +## advanceSelection(direction, e) +Selects the previous / next item (depending +on the `direction` argument). + +> 0 - right +< 0 - left + +**Kind**: global function + +| Param | Type | Description | +| --- | --- | --- | +| direction | int | | +| e | object | (optional) | + + + +## advanceCaret(direction, e) +Moves the caret left / right. + +**Kind**: global function + +| Param | Type | Description | +| --- | --- | --- | +| direction | int | | +| e | object | (optional) | + + + +## setCaret(i) +Moves the caret to the specified index. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| i | int | + + + +## lock() +Disables user input on the control. Used while +items are being asynchronously created. + +**Kind**: global function + + +## unlock() +Re-enables user input on the control. + +**Kind**: global function + + +## disable() +Disables user input on the control completely. +While disabled, it cannot receive focus. + +**Kind**: global function + + +## enable() +Enables the control so that it can respond +to focus and user input. + +**Kind**: global function + + +## destroy() +Completely destroys the control and +unbinds all event listeners so that it can +be garbage collected. + +**Kind**: global function + + +## render(templateName, data) ⇒ string +A helper method for rendering "item" and +"option" templates, given the data. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| templateName | string | +| data | object | + + + +## clearCache(templateName) +Clears the render cache for a template. If +no template is given, clears all render +caches. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| templateName | string | + + + +## canCreate(input) ⇒ boolean +Determines whether or not to display the +create item prompt, given a user input. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| input | string | + diff --git a/docs/docs/API/sifter.mdx b/docs/docs/API/sifter.mdx new file mode 100644 index 000000000..fbe5c4259 --- /dev/null +++ b/docs/docs/API/sifter.mdx @@ -0,0 +1,198 @@ +--- +title: sifter +description: API Reference for sifter +--- +# API Documentation for sifter + + +## Sifter +Sifter + +**Kind**: global class + +* [Sifter](#Sifter) + * [new Sifter(items, items)](#new_Sifter_new) + * [.tokenize(query)](#Sifter+tokenize) ⇒ array + * [.iterator(object)](#Sifter+iterator) + * [.getScoreFunction(search, options)](#Sifter+getScoreFunction) ⇒ function + * [~scoreObject](#Sifter+getScoreFunction..scoreObject) ⇒ number + * [~scoreValue(value, token)](#Sifter+getScoreFunction..scoreValue) ⇒ number + * [.getSortFunction(search, options)](#Sifter+getSortFunction) ⇒ + * [~get_field(name, result)](#Sifter+getSortFunction..get_field) ⇒ mixed + * [.prepareSearch(query, options)](#Sifter+prepareSearch) ⇒ object + * [.search(query, options)](#Sifter+search) ⇒ object + + + +### new Sifter(items, items) +Sifter is a client and server-side library (via UMD) for textually searching arrays and hashes of objects by property – or multiple properties. It's designed specifically for autocomplete. The process is three-step: score, filter, sort. + - **Supports díåcritîçs.** - For example, if searching for "montana" and an item in the set has a value of "montaña", it will still be matched. Sorting will also play nicely with diacritics + - **Smart scoring.** - Items are scored / sorted intelligently depending on where a match is found in the string (how close to the beginning) and what percentage of the string matches. + - **Multi-field sorting**. - When scores aren't enough to go by – like when getting results for an empty query – it can sort by one or more fields. For example, sort by a person's first name and last name without actually merging the properties to a single string. + - **Nested properties.** - Allows to search and sort on nested properties so you can perform search on complex objects without flattening them simply by using dot-notation to reference fields (ie. nested.property). + + +| Param | Type | +| --- | --- | +| items | array \| object | +| items | object | + + + +### sifter.tokenize(query) ⇒ array +Splits a search string into an array of individual +regexps to be used to match results. + +**Kind**: instance method of [Sifter](#Sifter) + +| Param | Type | +| --- | --- | +| query | string | + + + +### sifter.iterator(object) +Iterates over arrays and hashes. + +``` +this.iterator(this.items, function(item, id) { + // invoked for each item +}); +``` + +**Kind**: instance method of [Sifter](#Sifter) + +| Param | Type | +| --- | --- | +| object | array \| object | + + + +### sifter.getScoreFunction(search, options) ⇒ function +Returns a function to be used to score individual results. + +Good matches will have a higher score than poor matches. +If an item is not a match, 0 will be returned by the function. + +**Kind**: instance method of [Sifter](#Sifter) + +| Param | Type | Description | +| --- | --- | --- | +| search | object \| string | | +| options | object | (optional) | + + +* [.getScoreFunction(search, options)](#Sifter+getScoreFunction) ⇒ function + * [~scoreObject](#Sifter+getScoreFunction..scoreObject) ⇒ number + * [~scoreValue(value, token)](#Sifter+getScoreFunction..scoreValue) ⇒ number + + + +#### getScoreFunction~scoreObject ⇒ number +Calculates the score of an object +against the search query. + +**Kind**: inner property of [getScoreFunction](#Sifter+getScoreFunction) + +| Param | Type | +| --- | --- | +| token | object | +| data | object | + + + +#### getScoreFunction~scoreValue(value, token) ⇒ number +Calculates how close of a match the +given value is against a search token. + +**Kind**: inner method of [getScoreFunction](#Sifter+getScoreFunction) + +| Param | Type | +| --- | --- | +| value | mixed | +| token | object | + + + +### sifter.getSortFunction(search, options) ⇒ +Returns a function that can be used to compare two +results, for sorting purposes. If no sorting should +be performed, `null` will be returned. + +**Kind**: instance method of [Sifter](#Sifter) +**Returns**: function(a,b) + +| Param | Type | +| --- | --- | +| search | string \| object | +| options | object | + + + +#### getSortFunction~get\_field(name, result) ⇒ mixed +Fetches the specified sort field value +from a search result item. + +**Kind**: inner method of [getSortFunction](#Sifter+getSortFunction) + +| Param | Type | +| --- | --- | +| name | string | +| result | object | + + + +### sifter.prepareSearch(query, options) ⇒ object +Parses a search query and returns an object +with tokens and fields ready to be populated +with results. + +**Kind**: instance method of [Sifter](#Sifter) + +| Param | Type | +| --- | --- | +| query | string | +| options | object | + + + +### sifter.search(query, options) ⇒ object +Searches through all items and returns a sorted array of matches. + +The `options` parameter can contain: + + - fields {string|array} + - sort {array} + - score {function} + - filter {bool} + - limit {integer} + +Returns an object containing: + + - options {object} + - query {string} + - tokens {array} + - total {int} + - items {array} + +**Kind**: instance method of [Sifter](#Sifter) + +| Param | Type | +| --- | --- | +| query | string | +| options | object | + + + +## getattr(obj, name, nesting) ⇒ Object +A property getter resolving dot-notation + +**Kind**: global function +**Returns**: Object - The resolved property value + +| Param | Type | Description | +| --- | --- | --- | +| obj | Object | The root object to fetch property on | +| name | String | The optionally dotted property name to fetch | +| nesting | Boolean | Handle nesting or not | + diff --git a/docs/docs/API/tag_limit Plugin.mdx b/docs/docs/API/tag_limit Plugin.mdx new file mode 100644 index 000000000..f130fbe8c --- /dev/null +++ b/docs/docs/API/tag_limit Plugin.mdx @@ -0,0 +1,16 @@ +--- +title: tag_limit Plugin +description: API Reference for tag_limit Plugin +--- +# API Documentation for tag_limit Plugin + + +## options : Object +Object of available options for tag_limit plugin + +**Kind**: global typedef + +| Param | Type | Description | +| --- | --- | --- | +| tagLimit | number | Number of limit tag to display | + diff --git a/docs/docs/API/utils.mdx b/docs/docs/API/utils.mdx new file mode 100644 index 000000000..2ea0f9998 --- /dev/null +++ b/docs/docs/API/utils.mdx @@ -0,0 +1,205 @@ +--- +title: utils +description: API Reference for utils +--- +# API Documentation for utils + + +## isArray ⇒ Boolean +This is a polyfill for the Array.isArray function. +Determines whether the passed obect is an Array. + +**Kind**: global variable +**Returns**: Boolean - returns true if the passed object is an Array. + +| Param | Type | +| --- | --- | +| vArg | object | + + + +## isset(object) ⇒ boolean +Determines if the provided value has been defined. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| object | mixed | + + + +## hash\_key(value) ⇒ string \| null +Converts a scalar to its best string representation +for hash keys and HTML attribute values. + +Transformations: + 'str' -> 'str' + null -> '' + undefined -> '' + true -> '1' + false -> '0' + 0 -> '0' + 1 -> '1' + +**Kind**: global function + +| Param | Type | +| --- | --- | +| value | string | + + + +## escape\_html(str) ⇒ string +Escapes a string for use within HTML. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| str | string | + + + +## escape\_replace(str) ⇒ string +Escapes "$" characters in replacement strings. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| str | string | + + + +## once(fn) ⇒ function +Wraps `fn` so that it can only be invoked once. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| fn | function | + + + +## debounce(fn, delay) ⇒ function +Wraps `fn` so that it can only be called once +every `delay` milliseconds (invoked on the falling edge). + +**Kind**: global function + +| Param | Type | +| --- | --- | +| fn | function | +| delay | number | + + + +## debounce\_events(self, types, fn) +Debounce all fired events types listed in `types` +while executing the provided `fn`. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| self | object | +| types | array | +| fn | function | + + + +## watchChildEvent($parent, event, selector, fn) +A workaround for http://bugs.jquery.com/ticket/6696 + +**Kind**: global function + +| Param | Type | Description | +| --- | --- | --- | +| $parent | object | Parent element to listen on. | +| event | string | Event name. | +| selector | string | Descendant selector to filter by. | +| fn | function | Event handler. | + + + +## getInputSelection(input) ⇒ object +Determines the current selection within a text input control. +Returns an object containing: + - start + - length + +**Kind**: global function + +| Param | Type | +| --- | --- | +| input | object | + + + +## transferStyles($from, $to, properties) +Copies CSS properties from one element to another. + +**Kind**: global function + +| Param | Type | +| --- | --- | +| $from | object | +| $to | object | +| properties | array | + + + +## measureString(str, $parent) ⇒ number +Measures the width of a string within a +parent element (in pixels). + +**Kind**: global function + +| Param | Type | +| --- | --- | +| str | string | +| $parent | object | + + + +## autoGrow($input) +Sets up an input to grow horizontally as the user +types. If the value is changed manually, you can +trigger the "update" handler to resize: + +$input.trigger('update'); + +**Kind**: global function + +| Param | Type | +| --- | --- | +| $input | object | + + + +## isJSON(data) ⇒ Boolean +Determines whether or not the `data` argument is a valid JSON string. + +**Kind**: global function +**Returns**: Boolean - true if is an JSON object + +| Param | Type | Description | +| --- | --- | --- | +| data | String | Data to test | + + + +## uaDetect(platform, re) ⇒ Boolean +If the browser supports the User-Agent Client Hint, then return the platform name, otherwise return +the result of a regular expression test on the user agent string + +**Kind**: global function +**Returns**: Boolean - A boolean value. + +| Param | Description | +| --- | --- | +| platform | The platform you want to detect. | +| re | A regular expression that matches the user agent string. | + diff --git a/docs/docs/api.mdx b/docs/docs/api.mdx new file mode 100644 index 000000000..9bc90ac6c --- /dev/null +++ b/docs/docs/api.mdx @@ -0,0 +1,19 @@ +--- +title: API Methods +description: api reference +displayed_sidebar: apiSidebar +--- + +# API Methods + +Selectize controls can be controlled programmatically via the methods described in this section. When initializing the control, the selectize property is added on the original `` element—this property points to the underlying Selectize instance. + +```javascript +// initialize the Selectize control +var $select = $("select").selectize(options); +``` + +```javascript +// fetch the instance +var selectize = $select[0].selectize; +``` diff --git a/docs/docs/code-of-conduct.mdx b/docs/docs/code-of-conduct.mdx new file mode 100644 index 000000000..09990df6c --- /dev/null +++ b/docs/docs/code-of-conduct.mdx @@ -0,0 +1,132 @@ +--- +title: Code of conduct +--- + +# Contributor Covenant Code of Conduct + +## Our Pledge + +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone, regardless of age, body +size, visible or invisible disability, ethnicity, sex characteristics, gender +identity and expression, level of experience, education, socio-economic status, +nationality, personal appearance, race, religion, or sexual identity +and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, +diverse, inclusive, and healthy community. + +## Our Standards + +Examples of behavior that contributes to a positive environment for our +community include: + +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +- Focusing on what is best not just for us as individuals, but for the + overall community + +Examples of unacceptable behavior include: + +- The use of sexualized language or imagery, and sexual attention or + advances of any kind +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email + address, without their explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Enforcement Responsibilities + +Community leaders are responsible for clarifying and enforcing our standards of +acceptable behavior and will take appropriate and fair corrective action in +response to any behavior that they deem inappropriate, threatening, offensive, +or harmful. + +Community leaders have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, and will communicate reasons for moderation +decisions when appropriate. + +## Scope + +This Code of Conduct applies within all community spaces, and also applies when +an individual is officially representing the community in public spaces. +Examples of representing our community include using an official e-mail address, +posting via an official social media account, or acting as an appointed +representative at an online or offline event. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported to the community leaders responsible for enforcement at +https://keybase.io/team/selectize. +All complaints will be reviewed and investigated promptly and fairly. + +All community leaders are obligated to respect the privacy and security of the +reporter of any incident. + +## Enforcement Guidelines + +Community leaders will follow these Community Impact Guidelines in determining +the consequences for any action they deem in violation of this Code of Conduct: + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed +unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing +clarity around the nature of the violation and an explanation of why the +behavior was inappropriate. A public apology may be requested. + +### 2. Warning + +**Community Impact**: A violation through a single incident or series +of actions. + +**Consequence**: A warning with consequences for continued behavior. No +interaction with the people involved, including unsolicited interaction with +those enforcing the Code of Conduct, for a specified period of time. This +includes avoiding interactions in community spaces as well as external channels +like social media. Violating these terms may lead to a temporary or +permanent ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including +sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public +communication with the community for a specified period of time. No public or +private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. +Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community +standards, including sustained inappropriate behavior, harassment of an +individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within +the community. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 2.0, available at +https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. + +Community Impact Guidelines were inspired by [Mozilla's code of conduct +enforcement ladder](https://github.com/mozilla/diversity). + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see the FAQ at +https://www.contributor-covenant.org/faq. Translations are available at +https://www.contributor-covenant.org/translations. diff --git a/docs/docs/contribute.mdx b/docs/docs/contribute.mdx new file mode 100644 index 000000000..ed7bca57b --- /dev/null +++ b/docs/docs/contribute.mdx @@ -0,0 +1,180 @@ +--- +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Contributing to Selectize + +First off, thanks for taking the time to contribute! ❤️ + +All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉 + +> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about: +> +> - Star the project +> - Sponsor the project and/or individual contributors +> - Tweet about it +> - Refer this project in your project's readme +> - Mention the project at local meetups and tell your friends/colleagues + +## Code of Conduct + +This project and everyone participating in it is governed by the +[Contributor Code of Conduct](/docs/code-of-conduct). +By participating, you are expected to uphold this code. Please report unacceptable behavior +to the [maintainers](mailto:selectize@risadams.com). + +## I Have a Question + +> If you want to ask a question, we assume that you have read the available [Documentation](https://selectize.dev). + +Before you ask a question, it is best to search for existing [Issues](https://github.com/selectize/selectize.js/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first. + +If you then still feel the need to ask a question and need clarification, we recommend the following: + +- Open an [Issue](https://github.com/selectize/selectize.js/issues/new). +- Provide as much context as you can about what you're running into. +- Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. + +We will then take care of the issue as soon as possible. + +## I Want To Contribute + +> ### Legal Notice +> +> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. + +### Reporting Bugs + +#### Before Submitting a Bug Report + +A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible. + +- Make sure that you are using the latest version. +- Determine if your bug is a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://selectize.dev). If you are looking for support, you might want to check [this section](#i-have-a-question)). +- To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/selectize/selectize.jsissues?q=label%3Abug). +- Make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue. +- Collect information about the bug: + - Stack trace (Traceback) + - OS, Platform and Version (Windows, Linux, macOS, x86, ARM) + - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant. +- Possibly your input and the output +- Can you reliably reproduce the issue? And can you also reproduce it with older versions? + +#### How Do I Submit a Good Bug Report? + +> You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to . + +We use GitHub issues to track bugs and errors. If you run into an issue with the project: + +- Open an [Issue](https://github.com/selectize/selectize.js/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.) +- Explain the behavior you would expect and the actual behavior. +- Please provide as much context as possible and describe the _reproduction steps_ that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case. +- Provide the information you collected in the previous section. + +Once it's filed: + +- The project team will label the issue accordingly. +- A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. +- If the team can reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution). + +### Suggesting Enhancements + +This section guides you through submitting an enhancement suggestion for Selectize, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions. + +#### Before Submitting an Enhancement + +- Make sure that you are using the latest version. +- Read the [documentation](https://selectize.dev) carefully and find out if the functionality is already covered, maybe by an individual configuration. +- Perform a [search](https://github.com/selectize/selectize.js/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one. +- Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library. + +#### How Do I Submit a Good Enhancement Suggestion? + +Enhancement suggestions are tracked as [GitHub issues](https://github.com/selectize/selectize.js/issues). + +- Use a **clear and descriptive title** for the issue to identify the suggestion. +- Provide a **step-by-step description of the suggested enhancement** in as many details as possible. +- **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point, you can also tell which alternatives do not work for you. +- You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part to which the suggestion is related. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. +- **Explain why this enhancement would be useful** to most Selectize users. You may also want to point out the other projects that solved it better and which could serve as inspiration. + +### Your First Code Contribution + +#### Build from source + +Compile Javascript, SCSS and LESS in the `/src` directory to JavaScript and CSS in the `/build` directory. + +Running `make` will build the project, run all tests, and update the distribution files in `/dist`. + + + + +```bash +npm run build + +# Or to specify one or more specific browsers +BROWSERS=Firefox,Chrome,Safari npm test +``` + + + + +```bash +yarn build +``` + + + + +#### Functional and Unit Tests + +Please ensure all the tests pass: + + + + +```bash +npm run test +``` + + + + +```bash +yarn test +``` + + + + +#### Local Environment + +Running `npm start` on your repo will start a web server allowing you to view a local copy of this documentation, where you can test your changes against our example pages. + +If you are adding a new plugin, you should also add a corresponding example page to the `/docs/docs/plugins` directory. + +You can then run the examples at `https://loopback.website:4000/`. + +### Improving The Documentation + +If you are a new contributor and want to help improve the documentation, you can edit the documentation files in the `/docs` directory. + +We are actively looking for additional help in building new examples or providing translations of the documentation. + +### Commit Messages + +Commit messages should be concise and descriptive and whenever possible reference the issue that they are addressing. They should follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification. + +### Pull Requests + +If you're motivated to fix a bug or to develop a new feature, we'd love to see your code. When submitting pull requests, please remember the following: + +- Make sure tests pass: Run `npm test` to make sure your changes don't break existing functionality +- Do not make changes to files in `/dist`. Limiting your edits to files in `/src` directories keeps the size of your pull request down and makes it easier for us to evaluate. We'll update the `/dist` folder after your pull request is approved. +- Add tests: In the best-case scenario, you are also adding tests to back up your changes, but don't sweat it if you don't. We can discuss them at a later date. +- Squash your commits together in one or a few complete, logical commits, + with a concise and descriptive message. One commit means one + feature/bugfix/thing that has changed, or a diff bringing the code one + step forward to a better, working state. diff --git a/docs/docs/demos/api.mdx b/docs/docs/demos/api.mdx new file mode 100644 index 000000000..a06e4edaf --- /dev/null +++ b/docs/docs/demos/api.mdx @@ -0,0 +1,9 @@ +--- +id: api +title: Using the API +description: Examples of using the API to control selectize +--- + +import Api from "@site/src/components/Examples/Api"; + + diff --git a/docs/docs/demos/basic.mdx b/docs/docs/demos/basic.mdx new file mode 100644 index 000000000..bed3a78f6 --- /dev/null +++ b/docs/docs/demos/basic.mdx @@ -0,0 +1,9 @@ +--- +id: single-item-select +title: Single item select +description: The most vanilla of examples. +--- + +import Basic from "@site/src/components/Examples/Basic"; + + diff --git a/docs/docs/demos/confirm.mdx b/docs/docs/demos/confirm.mdx new file mode 100644 index 000000000..3e15e34a0 --- /dev/null +++ b/docs/docs/demos/confirm.mdx @@ -0,0 +1,9 @@ +--- +id: confirm +title: Confirm Delete +description: Examples of how to use delete confirmation dialogs. +--- + +import ConfirmDelete from "@site/src/components/Examples/ConfirmDelete"; + + diff --git a/docs/docs/demos/diacritics.mdx b/docs/docs/demos/diacritics.mdx new file mode 100644 index 000000000..3b90d208e --- /dev/null +++ b/docs/docs/demos/diacritics.mdx @@ -0,0 +1,9 @@ +--- +id: diacritics +title: Diacritics +description: Selectize can handle diacritics. Try typing "côte d'ivoire" or "são +--- + +import Diacritics from '@site/src/components/Examples/Diacritics'; + + diff --git a/docs/docs/demos/dynamic-option-groups.mdx b/docs/docs/demos/dynamic-option-groups.mdx new file mode 100644 index 000000000..fd083bfcb --- /dev/null +++ b/docs/docs/demos/dynamic-option-groups.mdx @@ -0,0 +1,9 @@ +--- +id: dynamic-option-groups +title: Dynamic Option Groups +description: Selectize provides the ability to create option groups dynamically. +--- + +import DynamicOptGroups from "@site/src/components/Examples/DynamicOptGroups"; + + diff --git a/docs/docs/demos/dynamic-options.mdx b/docs/docs/demos/dynamic-options.mdx new file mode 100644 index 000000000..b266dceaa --- /dev/null +++ b/docs/docs/demos/dynamic-options.mdx @@ -0,0 +1,9 @@ +--- +id: dynamic-options +title: Dynamic Options +description: Selectize provides the ability to create options dynamically. +--- + +import DynamicOpt from "@site/src/components/Examples/DynamicOpt"; + + diff --git a/docs/docs/demos/email.mdx b/docs/docs/demos/email.mdx new file mode 100644 index 000000000..87d34843d --- /dev/null +++ b/docs/docs/demos/email.mdx @@ -0,0 +1,9 @@ +--- +id: email-contact +title: Custom Rendering and Validation +description: This demonstrates two main things, (1) custom item and option rendering, and (2) item creation on-the-fly. Try typing a valid and invalid email address. +--- + +import EmailContact from '@site/src/components/Examples/EmailContact'; + + diff --git a/docs/docs/demos/events.mdx b/docs/docs/demos/events.mdx new file mode 100644 index 000000000..a81ddd12d --- /dev/null +++ b/docs/docs/demos/events.mdx @@ -0,0 +1,9 @@ +--- +id: events +title: Using Events +description: Examples of using selectize events +--- + +import Events from "@site/src/components/Examples/Events"; + + diff --git a/docs/docs/demos/lock.mdx b/docs/docs/demos/lock.mdx new file mode 100644 index 000000000..a096f83e2 --- /dev/null +++ b/docs/docs/demos/lock.mdx @@ -0,0 +1,9 @@ +--- +id: lock +title: Control Locking +description: Selectize controls can be locked to prevent user interaction. +--- + +import Lock from "@site/src/components/Examples/Lock"; + + diff --git a/docs/docs/demos/max-items.mdx b/docs/docs/demos/max-items.mdx new file mode 100644 index 000000000..df3793c10 --- /dev/null +++ b/docs/docs/demos/max-items.mdx @@ -0,0 +1,9 @@ +--- +id: max-items +title: Maximum number of items +description: This example only allows 3 items. Select one more item and the control will be disabled until one or more are deleted. +--- + +import MaxItems from "@site/src/components/Examples/MaxItems"; + + diff --git a/docs/docs/demos/normalize.mdx b/docs/docs/demos/normalize.mdx new file mode 100644 index 000000000..b35141347 --- /dev/null +++ b/docs/docs/demos/normalize.mdx @@ -0,0 +1,9 @@ +--- +id: normalize +title: Normalize Options +description: Normalize string sended for search with any accent +--- + +import Normalize from "@site/src/components/Examples/Normalize"; + + diff --git a/docs/docs/demos/opt-groups.mdx b/docs/docs/demos/opt-groups.mdx new file mode 100644 index 000000000..0f9ef8d84 --- /dev/null +++ b/docs/docs/demos/opt-groups.mdx @@ -0,0 +1,9 @@ +--- +id: opt-groups +title: Option Groups +description: Selectize provides the ability to group options together within the dropdown menu. +--- + +import OptGroups from '@site/src/components/Examples/OptGroups'; + + diff --git a/docs/docs/demos/performance.mdx b/docs/docs/demos/performance.mdx new file mode 100644 index 000000000..26e856c9a --- /dev/null +++ b/docs/docs/demos/performance.mdx @@ -0,0 +1,9 @@ +--- +id: performance +title: Performance and Scalability +description: Examples of selectize performance and scalability. +--- + +import Performance from "@site/src/components/Examples/Performance"; + + diff --git a/docs/docs/demos/required.mdx b/docs/docs/demos/required.mdx new file mode 100644 index 000000000..115c4cbd9 --- /dev/null +++ b/docs/docs/demos/required.mdx @@ -0,0 +1,9 @@ +--- +id: required +title: Required Elements +description: Examples of using a required element with selectize +--- + +import Required from "@site/src/components/Examples/Required"; + + diff --git a/docs/docs/demos/rtl.mdx b/docs/docs/demos/rtl.mdx new file mode 100644 index 000000000..599abf537 --- /dev/null +++ b/docs/docs/demos/rtl.mdx @@ -0,0 +1,9 @@ +--- +id: rtl +title: Right-to-left Support +description: Examples of using the RTL support in selectize +--- + +import Rtl from "@site/src/components/Examples/Rtl"; + + diff --git a/docs/docs/demos/tagging.mdx b/docs/docs/demos/tagging.mdx new file mode 100644 index 000000000..178b548ee --- /dev/null +++ b/docs/docs/demos/tagging.mdx @@ -0,0 +1,9 @@ +--- +id: tagging +title: Tagging +description: Add and remove items in any order without touching your mouse. Use your left/right arrow keys to move the caret (ibeam) between items. This example is instantiated from a element (note that the value is represented as a string). +--- + +import Tagging from '@site/src/components/Examples/Tagging'; + + diff --git a/docs/docs/events.mdx b/docs/docs/events.mdx new file mode 100644 index 000000000..a3d085be8 --- /dev/null +++ b/docs/docs/events.mdx @@ -0,0 +1,28 @@ +--- +title: Events +description: event reference +--- + +In the usage documentation, a few callbacks are listed that allow you to listen for certain events. Callbacks aren't always ideal though; specifically when you wish to have multiple handlers. + +| Event | Params | Description | +| ----------------- | ------------ | ------------------------------------------------------------------------------------------------------------ | +| "initialize" | | Invoked once the control is completely initialized. | +| "change" | value | Invoked when the value of the control changes. | +| "focus" | | Invoked when the control gains focus. | +| "blur" | | Invoked when the control loses focus. | +| "item_add" | value, item | Invoked when an item is added (i.e., when an option is selected) | +| "item_remove" | value, $item | Invoked when an item is deselected. | +| "item_select" | item | Invoked when an item is selected. | +| "clear" | | Invoked when the control is manually cleared via the clear() method. | +| "option_add" | value, data | Invoked when a new option is added to the available options list. | +| "option_remove" | value | Invoked when an option is removed from the available options. | +| "option_clear" | | Invoked when all options are removed from the control. | +| "optgroup_add" | id, data | Invoked when a new option is added to the available options list. | +| "optgroup_remove" | id | Invoked when an option group is removed. | +| "optgroup_clear" | | Invoked when all option groups are removed. | +| "dropdown_open" | dropdown | Invoked when the dropdown opens. | +| "dropdown_close" | dropdown | Invoked when the dropdown closes. | +| "type" | str | Invoked when the user types while filtering options. | +| "load" | data | Invoked when new options have been loaded and added to the control (via the load option or load API method). | +| "destroy" | | Invoked right before the control is destroyed. | diff --git a/docs/docs/glossary.mdx b/docs/docs/glossary.mdx new file mode 100644 index 000000000..9ad049182 --- /dev/null +++ b/docs/docs/glossary.mdx @@ -0,0 +1,20 @@ +--- +--- + +# Glossary + +## Config/configuration + +The settings of Selectize, provided during initialization. + +## Settings + +the current settings of Selectize, which may be updated. Accessible with the setting property of the Selectize object. + +## Options + +the list of objects to display. Each object must have a property with a unique value to identify the option; the property name is defined by the valueField setting. Option objects must also have a property with the label to display (as a tag, in the drop-down, etc.); the property name is defined by the labelField setting. The options can have other properties, ignored, unless referenced by other settings, like sortField or searchField. + +## Items + +The list of selected options. Or more exactly, the list of the values of the selected options. diff --git a/docs/docs/intro.mdx b/docs/docs/intro.mdx new file mode 100644 index 000000000..9c8084e25 --- /dev/null +++ b/docs/docs/intro.mdx @@ -0,0 +1,59 @@ +--- +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Getting Started with Selectize + +Selectize is a JavaScript library that provides a rich user experience for selecting items from a list. It supports single and multi-value selections, searching, tagging, remote data sets, and infinite scrolling. + +## Installation + +### What you'll need + +Selectize requires jQuery. We also include styles for bootstrap, but also provide raw Less and Sass files for you to customize with any framework you like. + +If you want to use the Drag & Drop plugin, you'll need jQuery UI. + +### Install with npm / yarn + + + + +```bash +npm i @selectize/selectize +``` + + + + +```bash +yarn add @selectize/selectize +``` + + + + +### Install with cdn + +The fastest way to add Selectize into your project is to just include the js and css from jsDelivr. + +```html + + +``` + +## Usage + +In its simplest form, Selectize can be initialized on an existing ` +
+ +
+ + + + + + + +
+
+ + + {``} + + + {`var $select = $('#select-tools').selectize({ + maxItems: null, + valueField: 'id', + labelField: 'title', + searchField: 'title', + options: [ + {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'}, + {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'}, + {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'} + ], + create: false +}); + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +var control = $select[0].selectize; + +$('#button-clear').on('click', function() { + control.clear(); +}); + +$('#button-clearoptions').on('click', function() { + control.clearOptions(); +}); + +$('#button-addoption').on('click', function() { + control.addOption({ + id: 4, + title: 'Something New', + url: 'http://google.com' + }); +}); + +$('#button-additem').on('click', function() { + control.addItem(2); +}); + +$('#button-maxitems2').on('click', function() { + control.setMaxItems(2); +}); + +$('#button-maxitems100').on('click', function() { + control.setMaxItems(100); +}); + +$('#button-setvalue').on('click', function() { + control.setValue([2, 3]); +}); + `} + + + ); +} diff --git a/docs/src/components/Examples/Basic.js b/docs/src/components/Examples/Basic.js new file mode 100644 index 000000000..1f795eae5 --- /dev/null +++ b/docs/src/components/Examples/Basic.js @@ -0,0 +1,49 @@ + +import React, { useEffect } from "react"; +import CodeBlock from "@theme/CodeBlock"; +import ThemeChanger from "../Theming/ThemeChanger"; + +export default function Basics() { + useEffect(() => { + $("#normalize").selectize(); + }); + + return ( + <> +
+ +

The most vanilla of examples.

+ +
+ + + {``} + + + {"$('#normalize').selectize();"} + + + ); +} diff --git a/docs/src/components/Examples/ConfirmDelete.js b/docs/src/components/Examples/ConfirmDelete.js new file mode 100644 index 000000000..75a00c4e2 --- /dev/null +++ b/docs/src/components/Examples/ConfirmDelete.js @@ -0,0 +1,49 @@ + +import React, { useEffect } from "react"; +import CodeBlock from "@theme/CodeBlock"; +import ThemeChanger from "../Theming/ThemeChanger"; + +export default function ConfirmDelete() { + useEffect(() => { + $('#input-tags').selectize({ + delimiter: ',', + persist: false, + onDelete: function (values) { + return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?'); + } + }); + }); + + return ( + <> +
+ +

Using the Confirm Delete dialog

+
+ + +
+
+ + + {`
+ + +
`} + + + {`$('#input-tags').selectize({ + delimiter: ',', + persist: false, + onDelete: function(values) { + return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?'); + } +});`} + + + ); +} diff --git a/docs/src/components/Examples/Diacritics.js b/docs/src/components/Examples/Diacritics.js new file mode 100644 index 000000000..a3a29542c --- /dev/null +++ b/docs/src/components/Examples/Diacritics.js @@ -0,0 +1,61 @@ +import React, { useEffect } from "react"; +import CodeBlock from "@theme/CodeBlock"; +import ThemeChanger from "../Theming/ThemeChanger"; + +export default function Diacritics() { + useEffect(() => { + $("#diacritics").selectize({ + delimiter: ",", + persist: false, + maxItems: null, + create: function (input) { + return { + value: input, + text: input, + }; + }, + }); + }); + + return ( +
+
+ +

+ Selectize can handle diacritics. Try typing "côte d'ivoire" or "são +

+ + +
+ + + {``} + + + {`$("#diacritics").selectize({ + delimiter: ",", + persist: false, + maxItems: null, + create: function (input) { + return { + value: input, + text: input, + }; + } +});`} + +
+ ); +} diff --git a/docs/src/components/Examples/DynamicOpt.js b/docs/src/components/Examples/DynamicOpt.js new file mode 100644 index 000000000..1c25e0f26 --- /dev/null +++ b/docs/src/components/Examples/DynamicOpt.js @@ -0,0 +1,54 @@ + +import React, { useEffect } from "react"; +import CodeBlock from "@theme/CodeBlock"; +import ThemeChanger from "../Theming/ThemeChanger"; + +export default function DynamicOpt() { + useEffect(() => { + $('#select-tools').selectize({ + maxItems: null, + valueField: 'id', + labelField: 'title', + searchField: 'title', + options: [ + { id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers' }, + { id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart' }, + { id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape' } + ], + create: false + }); + }); + + return ( + <> +
+ +

Using Dynamic Options.

+

The options are created straight from an array.

+ +
+ + + {``} + + + {`$('#select-tools').selectize({ + maxItems: null, + valueField: 'id', + labelField: 'title', + searchField: 'title', + options: [ + {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'}, + {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'}, + {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'} + ], + create: false +});`} + + + ); +} diff --git a/docs/src/components/Examples/DynamicOptGroups.js b/docs/src/components/Examples/DynamicOptGroups.js new file mode 100644 index 000000000..061624b71 --- /dev/null +++ b/docs/src/components/Examples/DynamicOptGroups.js @@ -0,0 +1,108 @@ +import React, { useEffect } from "react"; +import CodeBlock from "@theme/CodeBlock"; +import ThemeChanger from "../Theming/ThemeChanger"; + +export default function OptGroups() { + useEffect(() => { + $('#select-console').selectize({ + options: [ + { manufacturer: 'nintendo', value: "nes", name: "Nintendo Entertainment System" }, + { manufacturer: 'nintendo', value: "snes", name: "Super Nintendo Entertainment System" }, + { manufacturer: 'nintendo', value: "n64", name: "Nintendo 64" }, + { manufacturer: 'nintendo', value: "gamecube", name: "GameCube" }, + { manufacturer: 'nintendo', value: "wii", name: "Wii" }, + { manufacturer: 'microsoft', value: 'xss', name: 'Xbox Series S' }, + { manufacturer: 'nintendo', value: "wiiu", name: "Wii U" }, + { manufacturer: 'nintendo', value: "switch", name: "Switch" }, + { manufacturer: 'sony', value: 'ps1', name: 'PlayStation' }, + { manufacturer: 'sony', value: 'ps2', name: 'PlayStation 2' }, + { manufacturer: 'sony', value: 'ps3', name: 'PlayStation 3' }, + { manufacturer: 'sony', value: 'ps4', name: 'PlayStation 4' }, + { manufacturer: 'sony', value: 'ps5', name: 'PlayStation 5' }, + { manufacturer: 'microsoft', value: 'xbox', name: 'Xbox' }, + { manufacturer: 'microsoft', value: '360', name: 'Xbox 360' }, + { manufacturer: 'microsoft', value: 'xbone', name: 'Xbox One' }, + { manufacturer: 'microsoft', value: 'xsx', name: 'Xbox Series X' } + ], + optionGroupRegister: function (optgroup) { + var capitalised = optgroup.charAt(0).toUpperCase() + optgroup.substring(1); + var group = { + label: 'Manufacturer: ' + capitalised + }; + + group[this.settings.optgroupValueField] = optgroup; + + return group; + }, + optgroupField: 'manufacturer', + labelField: 'name', + searchField: ['name'], + sortField: 'name' + }); + }); + + return ( +
+
+ +

+ Selectize provides the ability to group options together within the dropdown menu. +

+
+ + +
+
+ + + {`
+ + +
+ `} + + + {`$('#select-console').selectize({ +options: [ + { manufacturer: 'nintendo', value: "nes", name: "Nintendo Entertainment System" }, + { manufacturer: 'nintendo', value: "snes", name: "Super Nintendo Entertainment System" }, + { manufacturer: 'nintendo', value: "n64", name: "Nintendo 64" }, + { manufacturer: 'nintendo', value: "gamecube", name: "GameCube" }, + { manufacturer: 'nintendo', value: "wii", name: "Wii" }, + { manufacturer: 'microsoft', value: 'xss', name: 'Xbox Series S' }, + { manufacturer: 'nintendo', value: "wiiu", name: "Wii U" }, + { manufacturer: 'nintendo', value: "switch", name: "Switch" }, + { manufacturer: 'sony', value: 'ps1', name: 'PlayStation' }, + { manufacturer: 'sony', value: 'ps2', name: 'PlayStation 2' }, + { manufacturer: 'sony', value: 'ps3', name: 'PlayStation 3' }, + { manufacturer: 'sony', value: 'ps4', name: 'PlayStation 4' }, + { manufacturer: 'sony', value: 'ps5', name: 'PlayStation 5' }, + { manufacturer: 'microsoft', value: 'xbox', name: 'Xbox' }, + { manufacturer: 'microsoft', value: '360', name: 'Xbox 360' }, + { manufacturer: 'microsoft', value: 'xbone', name: 'Xbox One' }, + { manufacturer: 'microsoft', value: 'xsx', name: 'Xbox Series X' } +], +optionGroupRegister: function (optgroup) { + var capitalised = optgroup.charAt(0).toUpperCase() + optgroup.substring(1); + var group = { + label: 'Manufacturer: ' + capitalised + }; + + group[this.settings.optgroupValueField] = optgroup; + + return group; +}, +optgroupField: 'manufacturer', +labelField: 'name', +searchField: ['name'], +sortField: 'name' +}); + `} + +
+ ); +} diff --git a/docs/src/components/Examples/EmailContact.css b/docs/src/components/Examples/EmailContact.css new file mode 100644 index 000000000..7065d7d98 --- /dev/null +++ b/docs/src/components/Examples/EmailContact.css @@ -0,0 +1,17 @@ +.selectize-control.contacts .selectize-input > div .email { + opacity: 0.8; +} +.selectize-control.contacts .selectize-input > div .name + .email { + margin-left: 5px; +} +.selectize-control.contacts .selectize-input > div .email:before { + content: "<"; +} +.selectize-control.contacts .selectize-input > div .email:after { + content: ">"; +} +.selectize-control.contacts .selectize-dropdown .caption { + font-size: 12px; + display: block; + color: #a0a0a0; +} diff --git a/docs/src/components/Examples/EmailContact.js b/docs/src/components/Examples/EmailContact.js new file mode 100644 index 000000000..939462f8c --- /dev/null +++ b/docs/src/components/Examples/EmailContact.js @@ -0,0 +1,209 @@ + +import React, { useEffect } from "react"; +import CodeBlock from "@theme/CodeBlock"; +import ThemeChanger from "../Theming/ThemeChanger"; +import './EmailContact.css' + +export default function EmailContact() { + useEffect(() => { + const REGEX_EMAIL = + "([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@" + + "(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)"; + + $("#select-to").selectize({ + persist: false, + maxItems: null, + valueField: "email", + labelField: "name", + searchField: ["name", "email"], + options: [ + { email: "selectize@risadams.com", name: "Ris Adams" }, + { email: "brian@thirdroute.com", name: "Brian Reavis" }, + { email: "nikola@tesla.com", name: "Nikola Tesla" }, + { email: "someone@gmail.com" }, + ], + render: { + item: function (item, escape) { + return ( + "
" + + (item.name + ? '' + escape(item.name) + "" + : "") + + (item.email + ? '" + : "") + + "
" + ); + }, + option: function (item, escape) { + var label = item.name || item.email; + var caption = item.name ? item.email : null; + return ( + "
" + + '' + + escape(label) + + "" + + (caption + ? '' + escape(caption) + "" + : "") + + "
" + ); + }, + }, + createFilter: function (input) { + var match, regex; + + // email@address.com + regex = new RegExp("^" + REGEX_EMAIL + "$", "i"); + match = input.match(regex); + if (match) return !this.options.hasOwnProperty(match[0]); + + // name + regex = new RegExp("^([^<]*)<" + REGEX_EMAIL + ">$", "i"); + match = input.match(regex); + if (match) return !this.options.hasOwnProperty(match[2]); + + return false; + }, + create: function (input) { + if (new RegExp("^" + REGEX_EMAIL + "$", "i").test(input)) { + return { email: input }; + } + var match = input.match( + new RegExp("^([^<]*)<" + REGEX_EMAIL + ">$", "i") + ); + if (match) { + return { + email: match[2], + name: $.trim(match[1]), + }; + } + alert("Invalid email address."); + return false; + }, + }); + }); + + return ( +
+ +

+ This demonstrates two main things: (1) custom item and option rendering, + and (2) item creation on-the-fly. Try typing a valid and invalid email + address. +

+
+ +
+ + + {``} + + + {`const REGEX_EMAIL = "([a-z0-9!#$%&'*+/=?^_\`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_\`{|}~-]+)*@" + "(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)"; + +$("#select-to").selectize({ + persist: false, + maxItems: null, + valueField: "email", + labelField: "name", + searchField: ["name", "email"], + options: [ + { email: "brian@thirdroute.com", name: "Brian Reavis" }, + { email: "nikola@tesla.com", name: "Nikola Tesla" }, + { email: "someone@gmail.com" }, + ], + render: { + item: function (item, escape) { + return ( + "
" + + (item.name + ? '' + escape(item.name) + "" + : "") + + (item.email + ? '" + : "") + + "
" + ); + }, + option: function (item, escape) { + var label = item.name || item.email; + var caption = item.name ? item.email : null; + return ( + "
" + + '' + + escape(label) + + "" + + (caption + ? '' + escape(caption) + "" + : "") + + "
" + ); + }, + }, + createFilter: function (input) { + var match, regex; + + // email@address.com + regex = new RegExp("^" + REGEX_EMAIL + "$", "i"); + match = input.match(regex); + if (match) return !this.options.hasOwnProperty(match[0]); + + // name + regex = new RegExp("^([^<]*)<" + REGEX_EMAIL + ">$", "i"); + match = input.match(regex); + if (match) return !this.options.hasOwnProperty(match[2]); + + return false; + }, + create: function (input) { + if (new RegExp("^" + REGEX_EMAIL + "$", "i").test(input)) { + return { email: input }; + } + var match = input.match( + new RegExp("^([^<]*)<" + REGEX_EMAIL + ">$", "i") + ); + if (match) { + return { + email: match[2], + name: $.trim(match[1]), + }; + } + alert("Invalid email address."); + return false; + }, +}); + `} + + + {`.selectize-control.contacts .selectize-input > div .email { + opacity: 0.8; +} +.selectize-control.contacts .selectize-input > div .name + .email { + margin-left: 5px; +} +.selectize-control.contacts .selectize-input > div .email:before { + content: "<"; +} +.selectize-control.contacts .selectize-input > div .email:after { + content: ">"; +} +.selectize-control.contacts .selectize-dropdown .caption { + font-size: 12px; + display: block; + color: #a0a0a0; +} + + `} + +
+ ); +} diff --git a/docs/src/components/Examples/Events.js b/docs/src/components/Examples/Events.js new file mode 100644 index 000000000..a123cc2a4 --- /dev/null +++ b/docs/src/components/Examples/Events.js @@ -0,0 +1,134 @@ + +import React, { useEffect } from "react"; +import CodeBlock from "@theme/CodeBlock"; +import ThemeChanger from "../Theming/ThemeChanger"; + +export default function Events() { + useEffect(() => { + var eventHandler = function (name) { + return function () { + console.log(name, arguments); + $('#log').append('
' + name + '
'); + }; + }; + $('#select-state').selectize({ + create: true, + onChange: eventHandler('onChange'), + onItemAdd: eventHandler('onItemAdd'), + onItemRemove: eventHandler('onItemRemove'), + onOptionAdd: eventHandler('onOptionAdd'), + onOptionRemove: eventHandler('onOptionRemove'), + onDropdownOpen: eventHandler('onDropdownOpen'), + onDropdownClose: eventHandler('onDropdownClose'), + onFocus: eventHandler('onFocus'), + onBlur: eventHandler('onBlur'), + onInitialize: eventHandler('onInitialize'), + }); + }); + + return ( + <> +
+ +

Using Events

+

Check out the console for more details about each event.

+
+ + +
+

Event Log

+ 

+      

+
+      
+        {`

+  
+  
+
`}
+      
+      
+        {`var eventHandler = function(name) {
+  return function() {
+    console.log(name, arguments);
+    $('#log').append('
' + name + '
');
+  };
+};
+var $select = $('#select-state').selectize({
+  create          : true,
+  onChange        : eventHandler('onChange'),
+  onItemAdd       : eventHandler('onItemAdd'),
+  onItemRemove    : eventHandler('onItemRemove'),
+  onOptionAdd     : eventHandler('onOptionAdd'),
+  onOptionRemove  : eventHandler('onOptionRemove'),
+  onDropdownOpen  : eventHandler('onDropdownOpen'),
+  onDropdownClose : eventHandler('onDropdownClose'),
+  onFocus         : eventHandler('onFocus'),
+  onBlur          : eventHandler('onBlur'),
+  onInitialize    : eventHandler('onInitialize'),
+});`}
+      
+    
+  );
+}
diff --git a/docs/src/components/Examples/Lock.js b/docs/src/components/Examples/Lock.js
new file mode 100644
index 000000000..c1f681873
--- /dev/null
+++ b/docs/src/components/Examples/Lock.js
@@ -0,0 +1,100 @@
+
+import React, { useEffect } from "react";
+import CodeBlock from "@theme/CodeBlock";
+import ThemeChanger from "../Theming/ThemeChanger";
+
+export default function Lock() {
+  useEffect(() => {
+    $('select').selectize({ create: true });
+    $('#select-locked-empty')[0].selectize.lock();
+    $('#select-locked-single')[0].selectize.lock();
+    $('#select-locked')[0].selectize.lock();
+  });
+
+  return (
+    <>
+      

+        
+        
Control Locking.

+        
Selectize controls can be locked to prevent user interaction.

+        

+          
+          
+        

+        

+          
+          
+        

+        

+          
+          
+        

+        

+          
+          
+        

+      

+
+      
+        {`

+  
+  
+

+

+  
+  
+

+

+  
+  
+

+

+  
+  
+
`}
+      
+      
+        {`$('select').selectize({create: true});
+$('#select-locked-empty')[0].selectize.lock();
+$('#select-locked-single')[0].selectize.lock();
+$('#select-locked')[0].selectize.lock();`}
+      
+    
+  );
+}
diff --git a/docs/src/components/Examples/MaxItems.js b/docs/src/components/Examples/MaxItems.js
new file mode 100644
index 000000000..96ba06716
--- /dev/null
+++ b/docs/src/components/Examples/MaxItems.js
@@ -0,0 +1,56 @@
+import React, { useEffect } from "react";
+import CodeBlock from "@theme/CodeBlock";
+import ThemeChanger from "../Theming/ThemeChanger";
+
+export default function MaxItems() {
+  useEffect(() => {
+    $("select").selectize({
+      maxItems: 3,
+    });
+  });
+
+  return (
+    

+      

+        
+        

+          This example only allows 3 items. Select one more item and the control
+          will be disabled until one or more are deleted.
+        

+
+        
+      

+
+      
+        {`
+        `}
+      
+      
+        {"$('select').selectize({ maxItems: 3 })"}
+      
+
+    

+  );
+}
diff --git a/docs/src/components/Examples/Normalize.js b/docs/src/components/Examples/Normalize.js
new file mode 100644
index 000000000..0bea38e46
--- /dev/null
+++ b/docs/src/components/Examples/Normalize.js
@@ -0,0 +1,51 @@
+import React, { useEffect } from "react";
+import CodeBlock from "@theme/CodeBlock";
+import ThemeChanger from "../Theming/ThemeChanger";
+
+export default function Normalize() {
+  useEffect(() => {
+    $("#normalize").selectize({ normalize: true });
+  });
+
+  return (
+    

+      

+        
+        
Normalize string sent for search with any accent:

+        
+          "à", "è", "ì", "ò", "ù", "À", "È", "Ì", "Ò", "Ù", "á", "é", "í", "ó",
+          
"ú", "ý", "Á", "É", "Í", "Ó", "Ú", "Ý", "â", "ê", "î", "ô", "û", "Â",
+          
"Ê", "Î", "Ô", "Û", "ã", "ñ", "õ", "Õ", "Ã", "Ñ", "ä", "ë", "ï", "ö",
+          
"ü", "ÿ", "Ä", "Ë", "Ï", "Ö", "Ü", "Ÿ", "ç", "Ç", "å", "Å"
+        

+        
+      

+
+      
+        {`
+        `}
+      
+      
+        {"$('#normalize').selectize({ normalize: true });"}
+      
+    

+  );
+}
diff --git a/docs/src/components/Examples/OptGroups.js b/docs/src/components/Examples/OptGroups.js
new file mode 100644
index 000000000..d737dec98
--- /dev/null
+++ b/docs/src/components/Examples/OptGroups.js
@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import CodeBlock from "@theme/CodeBlock";
+import ThemeChanger from "../Theming/ThemeChanger";
+
+export default function OptGroups() {
+  useEffect(() => {
+    $("#select-gear").selectize({
+      sortField: "text",
+    });
+  });
+
+  return (
+    

+      

+        
+        

+          Selectize provides the ability to group options together within the dropdown menu.
+        

+        
+      

+
+      
+        {`
+        `}
+      
+      
+        {"$('#select-gear').selectize({ sortField: 'text' })"}
+      
+    

+  );
+}
diff --git a/docs/src/components/Examples/Performance.js b/docs/src/components/Examples/Performance.js
new file mode 100644
index 000000000..f44e4c676
--- /dev/null
+++ b/docs/src/components/Examples/Performance.js
@@ -0,0 +1,153 @@
+
+import React, { useEffect } from "react";
+import CodeBlock from "@theme/CodeBlock";
+import ThemeChanger from "../Theming/ThemeChanger";
+
+export default function Performance() {
+  useEffect(() => {
+    var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV';
+    var children = [];
+    var options = [];
+    for (var i = 0; i < 25000; i++) {
+      var title = [];
+      for (var j = 0; j < 8; j++) {
+        title.push(letters.charAt(Math.round((letters.length - 1) * Math.random())));
+      }
+      options.push({
+        id: i,
+        title: title.join('')
+      });
+    }
+
+    $('#select-junk').selectize({
+      maxItems: null,
+      maxOptions: 100,
+      valueField: 'id',
+      labelField: 'title',
+      searchField: 'title',
+      sortField: 'title',
+      options: options,
+      create: false
+    });
+
+    $('#select-children-load').click(function () {
+      for (var i = 0; i < 12000; i++) {
+        var title = [];
+
+        for (var j = 0; j < 8; j++) {
+          title.push(letters.charAt(Math.round((letters.length - 1) * Math.random())));
+        }
+
+        title = title.join('');
+
+        var node = $('