@drecchia/tom-select 2.5.2-virtual-scroll.0

package/src/plugins/virtual_scroll/plugin.ts

@@ -0,0 +1,219 @@
+/**
+ * Plugin: "restore_on_backspace" (Tom Select)
+ * Copyright (c) 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.
+ *
+ */
+
+import type TomSelect from '../../tom-select.ts';
+import { TomOption } from '../../types/index.ts';
+import { addClasses } from '../../vanilla.ts';
+
+export default function(this:TomSelect) {
+	const self							= this;
+	const orig_canLoad					= self.canLoad;
+	const orig_clearActiveOption		= self.clearActiveOption;
+	const orig_loadCallback				= self.loadCallback;
+
+	var pagination:{[key:string]:any}	= {};
+	var dropdown_content:HTMLElement;
+	var loading_more					= false;
+	var load_more_opt:HTMLElement;
+	var default_values: string[]		= [];
+
+	if( !self.settings.shouldLoadMore ){
+
+		// return true if additional results should be loaded
+		self.settings.shouldLoadMore = ():boolean=>{
+
+			const scroll_percent = dropdown_content.clientHeight / (dropdown_content.scrollHeight - dropdown_content.scrollTop);
+			if( scroll_percent > 0.9 ){
+				return true;
+			}
+
+			if( self.activeOption ){
+				var selectable	= self.selectable();
+				var index		= Array.from(selectable).indexOf(self.activeOption);
+				if( index >= (selectable.length-2) ){
+					return true;
+				}
+			}
+
+			return false;
+		}
+	}
+
+
+	if( !self.settings.firstUrl ){
+		throw 'virtual_scroll plugin requires a firstUrl() method';
+	}
+
+
+	// in order for virtual scrolling to work,
+	// options need to be ordered the same way they're returned from the remote data source
+	self.settings.sortField			= [{field:'$order'},{field:'$score'}];
+
+
+	// can we load more results for given query?
+	const canLoadMore = (query:string):boolean => {
+
+		if( typeof self.settings.maxOptions === 'number' && dropdown_content.children.length >= self.settings.maxOptions ){
+			return false;
+		}
+
+		if( (query in pagination) && pagination[query] ){
+			return true;
+		}
+
+		return false;
+	};
+
+	const clearFilter = (option:TomOption, value:string):boolean => {
+		if( self.items.indexOf(value) >= 0 || default_values.indexOf(value) >= 0 ){
+			return true;
+		}
+		return false;
+	};
+
+
+	// set the next url that will be
+	self.setNextUrl = (value:string,next_url:any):void => {
+		pagination[value] = next_url;
+	};
+
+	// getUrl() to be used in settings.load()
+	self.getUrl = (query:string):any =>{
+
+		if( query in pagination ){
+			const next_url = pagination[query];
+			pagination[query] = false;
+			return next_url;
+		}
+
+		// if the user goes back to a previous query
+		// we need to load the first page again
+		self.clearPagination();
+
+		return self.settings.firstUrl.call(self,query);
+	};
+
+	// clear pagination
+	self.clearPagination = ():void =>{
+		pagination = {};
+	};
+
+	// don't clear the active option (and cause unwanted dropdown scroll)
+	// while loading more results
+	self.hook('instead','clearActiveOption',()=>{
+
+		if( loading_more ){
+			return;
+		}
+
+		return orig_clearActiveOption.call(self);
+	});
+
+	// override the canLoad method
+	self.hook('instead','canLoad',(query:string)=>{
+
+		// first time the query has been seen
+		if( !(query in pagination) ){
+			return orig_canLoad.call(self,query);
+		}
+
+		return canLoadMore(query);
+	});
+
+
+	// wrap the load
+	self.hook('instead','loadCallback',( options:TomOption[], optgroups:TomOption[])=>{
+
+		if( !loading_more ){
+			self.clearOptions(clearFilter);
+		}else if( load_more_opt ){
+			const first_option = options[0];
+			if( first_option !== undefined ){
+				load_more_opt.dataset.value		= first_option[self.settings.valueField];
+			}
+		}
+
+		orig_loadCallback.call( self, options, optgroups);
+
+		loading_more = false;
+	});
+
+
+	// add templates to dropdown
+	//	loading_more if we have another url in the queue
+	//	no_more_results if we don't have another url in the queue
+	self.hook('after','refreshOptions',()=>{
+
+		const query		= self.lastValue;
+		var option;
+
+		if( canLoadMore(query) ){
+
+			option = self.render('loading_more',{query:query});
+			if( option ){
+				option.setAttribute('data-selectable',''); // so that navigating dropdown with [down] keypresses can navigate to this node
+				load_more_opt = option;
+			}
+
+		}else if( (query in pagination) && !dropdown_content.querySelector('.no-results') ){
+			option = self.render('no_more_results',{query:query});
+		}
+
+		if( option ){
+			addClasses(option,self.settings.optionClass);
+			dropdown_content.append( option );
+		}
+
+	});
+
+
+	// add scroll listener and default templates
+	self.on('initialize',()=>{
+		default_values = Object.keys(self.options);
+		dropdown_content = self.dropdown_content;
+
+		// default templates
+		self.settings.render = Object.assign({}, {
+			loading_more:() => {
+				return `<div class="loading-more-results">Loading more results ... </div>`;
+			},
+			no_more_results:() =>{
+				return `<div class="no-more-results">No more results</div>`;
+			}
+		},self.settings.render);
+
+
+		// watch dropdown content scroll position
+		dropdown_content.addEventListener('scroll',()=>{
+
+			if( !self.settings.shouldLoadMore.call(self) ){
+				return;
+			}
+
+			// !important: this will get checked again in load() but we still need to check here otherwise loading_more will be set to true
+			if( !canLoadMore(self.lastValue) ){
+				return;
+			}
+
+			// don't call load() too much
+			if( loading_more ) return;
+
+
+			loading_more = true;
+			self.load.call(self,self.lastValue);
+		});
+	});
+
+};

package/src/scss/-tom-select.bootstrap4.scss

@@ -0,0 +1,4 @@
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import 'tom-select.bootstrap4';

package/src/scss/-tom-select.bootstrap5.scss

@@ -0,0 +1,4 @@
+@import "../../node_modules/bootstrap5/scss/functions";
+@import "../../node_modules/bootstrap5/scss/variables";
+@import "../../node_modules/bootstrap5/scss/mixins";
+@import 'tom-select.bootstrap5';

package/src/scss/_dropdown.scss

@@ -0,0 +1,99 @@
+.#{$select-ns}-dropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	z-index: 10;
+	border: $select-dropdown-border;
+	background: $select-color-dropdown;
+	margin: 0.25rem 0 0;
+	border-top: 0 none;
+	box-sizing: border-box;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 10%);
+	border-radius: 0 0 $select-border-radius $select-border-radius;
+
+	[data-selectable] {
+		cursor: pointer;
+		overflow: hidden;
+
+		.highlight {
+			background: $select-color-highlight;
+			border-radius: 1px;
+		}
+	}
+
+	.option,
+	.optgroup-header,
+	.no-results,
+	.create {
+		padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
+	}
+
+	.option, [data-disabled], [data-disabled] [data-selectable].option {
+		cursor: inherit;
+		opacity: 0.5;
+	}
+
+	[data-selectable].option {
+		opacity: 1;
+		cursor: pointer;
+	}
+
+	.optgroup:first-child .optgroup-header {
+		border-top: 0 none;
+	}
+
+	.optgroup-header {
+		color: $select-color-optgroup-text;
+		background: $select-color-optgroup;
+		cursor: default;
+	}
+
+	.active {
+		background-color: $select-color-dropdown-item-active;
+		color: $select-color-dropdown-item-active-text;
+
+		&.create {
+			color: $select-color-dropdown-item-create-active-text;
+		}
+	}
+
+	.create {
+		color: $select-color-dropdown-item-create-text;
+	}
+
+	.spinner{
+		display: inline-block;
+		width: $select-spinner-size;
+		height: $select-spinner-size;
+		margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
+
+
+		&::after {
+			content: " ";
+			display: block;
+			width: $select-spinner-size * .8;
+			height: $select-spinner-size * .8;
+			margin: $select-spinner-size * .1;
+			border-radius: 50%;
+			border: $select-spinner-border-size solid $select-spinner-border-color;
+			border-color: $select-spinner-border-color transparent $select-spinner-border-color transparent;
+			animation: lds-dual-ring 1.2s linear infinite;
+		}
+		@keyframes lds-dual-ring {
+			0% {
+				transform: rotate(0deg);
+			}
+
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	}
+}
+
+.#{$select-ns}-dropdown-content {
+	overflow: hidden auto;
+	max-height: $select-max-height-dropdown;
+	scroll-behavior: smooth;
+}

package/src/scss/_items.scss

@@ -0,0 +1,114 @@
+.#{$select-ns}-control {
+	border: $select-border;
+	padding: $select-padding-y $select-padding-x;
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+	box-sizing: border-box;
+	box-shadow: $select-shadow-input;
+	border-radius: $select-border-radius;
+	display: flex;
+	flex-wrap: wrap;
+
+	.#{$select-ns}-wrapper.multi.has-items & {
+		$padding-x: $select-padding-x;
+		$padding-top: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-width-item-border});
+		$padding-bottom: calc( #{$select-padding-y} - #{$select-padding-item-y} - #{$select-margin-item-y} - #{$select-width-item-border});
+
+		padding: $padding-top $padding-x $padding-bottom;
+	}
+
+	.full & {
+		background-color: $select-color-input-full;
+	}
+
+	.disabled &,
+	.disabled & * {
+		cursor: default !important;
+	}
+
+	.focus & {
+		box-shadow: $select-shadow-input-focus;
+	}
+
+	> * {
+		vertical-align: baseline;
+		display: inline-block;
+	}
+
+	.#{$select-ns}-wrapper.multi & > div {
+		cursor: pointer;
+		margin: 0 $select-margin-item-x $select-margin-item-y 0;
+		padding: $select-padding-item-y $select-padding-item-x;
+		background: $select-color-item;
+		color: $select-color-item-text;
+		border: $select-width-item-border solid $select-color-item-border;
+		overflow: auto;
+
+		&.active {
+			background: $select-color-item-active;
+			color: $select-color-item-active-text;
+			border: $select-width-item-border solid $select-color-item-active-border;
+		}
+	}
+
+	.#{$select-ns}-wrapper.multi.disabled & > div {
+		&, &.active {
+			color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
+			background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
+			border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+		}
+	}
+
+	> input {
+		flex: 1 1 auto;
+		min-width: 7rem;
+		display: inline-block !important;
+		padding: 0 !important;
+		min-height: 0 !important;
+		max-height: none !important;
+		max-width: 100% !important;
+		margin: 0 !important;
+		text-indent: 0 !important;
+		border: 0 none !important;
+		background: none !important;
+		line-height: inherit !important;
+		user-select: auto !important;
+		box-shadow: none !important;
+
+		&::-ms-clear {
+			display: none;
+		}
+
+		&:focus { outline: none !important; }
+	}
+
+	.has-items & > input{
+		margin: $select-caret-margin !important;
+	}
+
+	&.rtl {
+		text-align: right;
+		&.single .#{$select-ns}-control:after {
+			left: $select-arrow-offset;
+			right: auto;
+		}
+		.#{$select-ns}-control > input {
+			margin: $select-caret-margin-rtl !important;
+		}
+	}
+
+	.disabled & {
+		opacity: $select-opacity-disabled;
+		background-color: $select-color-disabled;
+	}
+
+	// hide input, while retaining its focus, and maintain layout so users can still click on the space to bring the display back
+	// visibility:hidden can prevent the input from receiving focus
+	.input-hidden & > input {
+		opacity: 0;
+		position: absolute;
+		left: -10000px;
+	}
+}

package/src/scss/tom-select.bootstrap4.scss

@@ -0,0 +1,218 @@
+/**
+ * Tom Select Bootstrap 4
+ */
+
+// Import Bootstrap 4 functions and variables
+$state-valid: map-get($form-validation-states,'valid') !default;
+$state-invalid: map-get($form-validation-states,'invalid') !default;
+$enable-shadows: true !default;
+$select-font-family: inherit !default;
+$select-font-size: inherit !default;
+$select-line-height: $input-btn-line-height !default; // formerly line-height-computed
+
+$select-color-text: gray("800") !default; // $gray-800
+$select-color-highlight: rgba(255, 237, 40, 40%) !default;
+$select-color-input: $input-bg !default;
+$select-color-input-full: $input-bg !default;
+$select-color-input-error: map-get($state-invalid,'color') !default;
+$select-color-input-error-focus: darken($select-color-input-error, 10%) !default;
+$select-color-disabled: $input-disabled-bg !default;
+$select-color-item: #efefef !default;
+$select-color-item-border: $border-color !default;
+$select-color-item-active: $component-active-bg !default;
+$select-color-item-active-text: #fff !default;
+$select-color-item-active-border: rgba(0, 0, 0, 0%) !default;
+$select-color-optgroup: $dropdown-bg !default;
+$select-color-optgroup-text: $dropdown-header-color !default;
+$select-color-optgroup-border: $dropdown-divider-bg !default;
+$select-color-dropdown: $dropdown-bg !default;
+$select-color-dropdown-border-top: mix($input-border-color, $input-bg, 80%) !default;
+$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
+$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
+$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+$select-opacity-disabled: 0.5 !default;
+$select-border: 1px solid $input-border-color !default;
+$select-border-radius: $input-border-radius !default;
+$select-width-item-border: 0 !default;
+$select-padding-x: $input-btn-padding-x !default;
+$select-padding-y: $input-btn-padding-y !default;
+$select-padding-dropdown-item-x: $input-btn-padding-x !default;
+$select-padding-dropdown-item-y: 3px !default;
+$select-padding-item-x: 5px !default;
+$select-padding-item-y: 1px !default;
+$select-margin-item-x: 3px !default;
+$select-margin-item-y: 3px !default;
+$select-arrow-size: 5px !default;
+$select-arrow-color: $select-color-text !default;
+$select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
+
+@import "tom-select";
+@include ts-caret;
+
+.#{$select-ns}-wrapper.form-control,
+.#{$select-ns}-wrapper.form-select {
+	padding:0 !important;
+}
+
+.#{$select-ns}-dropdown,
+.#{$select-ns}-dropdown.form-control {
+	height: auto;
+	padding: 0;
+	z-index: $zindex-dropdown;
+	background: $select-color-dropdown;
+	border: 1px solid $dropdown-border-color; // $dropdown-fallback-border
+	border-radius: $border-radius;
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 17.5%);
+}
+
+.#{$select-ns}-dropdown {
+	.optgroup-header {
+		font-size: $font-size-sm;
+		line-height: $line-height-base;
+	}
+
+	.optgroup:first-child::before {
+		display: none;
+	}
+
+	.optgroup::before {
+		content: ' ';
+		display: block;
+		height: 0;
+		margin: $dropdown-divider-margin-y 0;
+		overflow: hidden;
+		border-top: 1px solid $dropdown-divider-bg;
+		margin-left: $select-padding-dropdown-item-x * -1;
+		margin-right: $select-padding-dropdown-item-x * -1;
+	}
+
+	.create {
+		padding-left: $select-padding-dropdown-item-x;
+	}
+}
+
+.#{$select-ns}-dropdown-content {
+	padding: 5px 0;
+}
+
+.#{$select-ns}-control {
+	min-height: $input-height;
+	@include box-shadow($input-box-shadow);
+	@include transition($input-transition);
+
+	display:flex;
+	align-items: center;
+
+	.focus & {
+		border-color: $input-focus-border-color;
+		outline: 0;
+		@if $enable-shadows {
+			box-shadow: $input-box-shadow, $input-focus-box-shadow;
+		} @else {
+			box-shadow: $input-focus-box-shadow;
+		}
+	}
+	
+	input::placeholder {
+		color: #a7aeb8;
+		opacity: 1;
+	}
+}
+
+.is-invalid .#{$select-ns}-control,
+.was-validated .invalid .#{$select-ns}-control{
+	border-color: $select-color-input-error;
+
+	.focus & {
+		border-color: $select-color-input-error-focus;
+		box-shadow: 0 0 0 $input-focus-width rgba($select-color-input-error, .25);
+	}
+}
+
+.is-valid .#{$select-ns}-control {
+	$_color: map-get($state-valid,'color');
+
+	border-color: $_color;
+
+	.focus & {
+		border-color: $_color;
+		box-shadow: 0 0 0 $input-focus-width rgba($_color, .25);
+	}
+}
+
+.#{$select-ns}-wrapper {
+	.input-group-sm > &,
+	&.form-control-sm {
+
+		.#{$select-ns}-control {
+			min-height: $input-height-sm;
+			padding: 0 .75rem;
+
+			// padding: $input-padding-y-sm $input-padding-x-sm;
+			@include border-radius($input-border-radius-sm);
+			@include font-size($input-font-size-sm);
+		}
+
+		&.has-items .#{$select-ns}-control {
+			min-height: $input-height-sm !important;
+			font-size: $input-font-size-sm;
+			padding-bottom: 0;
+		}
+	}
+
+	.input-group-sm > &.multi.has-items,
+	&.form-control-sm.multi.has-items {
+		.#{$select-ns}-control {
+			// padding-top = ($input-height-sm - border-width - item-height) / 2;
+			// item-height = ($select-line-height * $input-font-size-sm) + ($select-padding-item-y * 2)
+			$border-and-padding: add($input-border-width,$select-padding-item-y) * 2;
+			$ts-select-padding-sm: calc( (#{$input-height-sm} - (#{$select-line-height} * #{$input-font-size-sm}) - #{$border-and-padding})/2);
+
+			padding-top: $ts-select-padding-sm !important;
+		}
+	}
+
+	&.multi {
+		&.has-items .#{$select-ns}-control {
+			padding-left: calc(#{$select-padding-x} - #{$select-padding-item-x});
+
+			--ts-pr-min: calc(#{$select-padding-x} - #{$select-padding-item-x});
+		}
+		.#{$select-ns}-control > div {
+			border-radius: calc(#{$select-border-radius} - 1px);
+		}
+	}
+
+	.input-group-lg > & >,
+	&.form-control-lg {
+	.#{$select-ns}-control {
+			min-height: $input-height-lg;
+			@include border-radius($input-border-radius-lg);
+			@include font-size($input-font-size-lg);
+		}
+	}
+}
+
+.form-control.#{$select-ns}-wrapper {
+	padding: 0;
+	height: auto;
+	border: none;
+	background: none;
+	border-radius: 0;
+}
+
+.input-group {
+	& > .#{$select-ns}-wrapper {
+		flex-grow: 1;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:nth-child(2)) > .#{$select-ns}-control {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	& > .#{$select-ns}-wrapper:not(:last-child) > .#{$select-ns}-control {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}