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

package/src/plugins/clear_button/plugin.ts

@@ -0,0 +1,54 @@
+/**
+ * Plugin: "dropdown_header" (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 { getDom } from '../../vanilla.ts';
+import { CBOptions } from './types.ts';
+
+export default function(this:TomSelect, userOptions:CBOptions) {
+	const self = this;
+
+	const options = Object.assign({
+		className: 'clear-button',
+		title: 'Clear All',
+		role: 'button',
+		tabindex: 0,
+		html: (data:CBOptions) => {
+
+		return `<div class="${data.className}" title="${data.title}" role="${data.role}" tabindex="${data.tabindex}">&times;</div>`;
+		}
+	}, userOptions);
+
+	self.on('initialize',()=>{
+		var button = getDom(options.html(options));
+		button.addEventListener('click',(evt)=>{
+
+			if( self.isLocked ) return;
+
+			self.clear();
+
+			if( self.settings.mode === 'single' && self.settings.allowEmptyOption ){
+				self.addItem('');
+			}
+			
+			self.refreshOptions(false);
+
+			evt.preventDefault();
+			evt.stopPropagation();
+		});
+		self.control.appendChild(button);
+	});
+
+};

package/src/plugins/clear_button/types.ts

@@ -0,0 +1,8 @@
+
+export type CBOptions = {
+	className	?:string,
+	title		?:string,
+	role		?:string,
+	tabindex	?:number
+	html		?: (data:CBOptions) => string,
+}

package/src/plugins/drag_drop/plugin.scss

@@ -0,0 +1,10 @@
+.#{$select-ns}-wrapper.plugin-drag_drop {
+	.ts-dragging{
+		color:transparent !important;
+	}
+		
+	.ts-dragging > * {
+		visibility:hidden !important;
+	}
+
+}

package/src/plugins/drag_drop/plugin.ts

@@ -0,0 +1,143 @@
+/**
+ * Plugin: "drag_drop" (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, TomItem } from '../../types/index.ts';
+import { escape_html, preventDefault, addEvent } from '../../utils.ts';
+import { getDom, setAttr } from '../../vanilla.ts';
+
+
+const insertAfter = (referenceNode:Element, newNode:Element) => {
+	referenceNode.parentNode?.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+const insertBefore = (referenceNode:Element, newNode:Element) => {
+	referenceNode.parentNode?.insertBefore(newNode, referenceNode);
+}
+
+const isBefore = (referenceNode:Element|undefined|null, newNode:Element|undefined|null) =>{
+	
+	do{
+		newNode = newNode?.previousElementSibling;
+
+		if( referenceNode == newNode ){
+			return true;
+		}
+
+	}while( newNode && newNode.previousElementSibling );
+
+	return false;
+}
+
+export default function(this:TomSelect) {
+	var self = this;
+	if (self.settings.mode !== 'multi') return;
+
+	var orig_lock		= self.lock;
+	var orig_unlock		= self.unlock;
+	let sortable = true;
+		let drag_item:TomItem|undefined;
+
+
+	/**
+	 * Add draggable attribute to item
+	 */
+	self.hook('after','setupTemplates',() => {
+
+		var orig_render_item = self.settings.render.item;
+
+		self.settings.render.item = (data:TomOption, escape:typeof escape_html) => {
+			const item = getDom(orig_render_item.call(self, data, escape)) as TomItem;
+			setAttr(item,{'draggable':'true'});
+
+
+			// prevent doc_mousedown (see tom-select.ts)
+			const mousedown = (evt:Event) => {
+				if( !sortable ) preventDefault(evt);
+				evt.stopPropagation();
+			}
+
+			const dragStart = (evt:Event) => {
+				drag_item = item;
+				
+				setTimeout(() => {
+					item.classList.add('ts-dragging');
+				}, 0);
+				
+			}
+
+			const dragOver = (evt:Event) =>{
+				evt.preventDefault();
+				item.classList.add('ts-drag-over');
+				moveitem(item,drag_item);
+			}
+
+			const dragLeave = () => {
+				item.classList.remove('ts-drag-over');
+			}
+
+			const moveitem = (targetitem:TomItem, dragitem:TomItem|undefined) => {
+				if( dragitem === undefined ) return;
+				
+				if( isBefore(dragitem,item) ){
+					insertAfter(targetitem,dragitem);
+				}else{
+					insertBefore(targetitem,dragitem);
+				}
+			}
+
+			const dragend = () => {
+				document.querySelectorAll('.ts-drag-over').forEach(el=> el.classList.remove('ts-drag-over'));
+				drag_item?.classList.remove('ts-dragging');
+				drag_item = undefined;
+
+				var values:string[] = [];
+				self.control.querySelectorAll(`[data-value]`).forEach((el:Element)=> {
+					if( (<HTMLOptionElement>el).dataset.value ){
+						let value = (<HTMLOptionElement>el).dataset.value;
+						if( value ){
+							values.push(value);
+						}
+					}
+				});
+
+				self.setValue(values);
+			}	
+
+
+			addEvent(item,'mousedown', mousedown);
+			addEvent(item,'dragstart', dragStart);
+			addEvent(item,'dragenter', dragOver)
+			addEvent(item,'dragover', dragOver);
+			addEvent(item,'dragleave', dragLeave);
+			addEvent(item,'dragend', dragend);
+				
+			return item;
+		}	
+	});
+
+
+
+	self.hook('instead','lock',()=>{
+		sortable = false;
+		return orig_lock.call(self);
+	});
+
+	self.hook('instead','unlock',()=>{
+		sortable = true;
+		return orig_unlock.call(self);
+	});
+
+};

package/src/plugins/dropdown_header/plugin.scss

@@ -0,0 +1,24 @@
+.#{$select-ns}-wrapper{
+	.dropdown-header {
+		position: relative;
+		padding: ($select-padding-dropdown-item-y * 2) $select-padding-dropdown-item-x;
+		border-bottom: 1px solid $select-color-border;
+		background: color-mix($select-color-dropdown, $select-color-border, 85%);
+		border-radius: $select-border-radius $select-border-radius 0 0;
+	}
+
+	.dropdown-header-close {
+		position: absolute;
+		right: $select-padding-dropdown-item-x;
+		top: 50%;
+		color: $select-color-text;
+		opacity: 0.4;
+		margin-top: -12px;
+		line-height: 20px;
+		font-size: 20px !important;
+	}
+
+	.dropdown-header-close:hover {
+		color: darken($select-color-text, 25%);
+	}
+}

package/src/plugins/dropdown_header/plugin.ts

@@ -0,0 +1,57 @@
+/**
+ * Plugin: "dropdown_header" (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 { getDom } from '../../vanilla.ts';
+import { preventDefault } from '../../utils.ts';
+import { DHOptions } from './types.ts';
+
+export default function(this:TomSelect, userOptions:DHOptions) {
+	const self = this;
+
+	const options = Object.assign({
+		title         : 'Untitled',
+		headerClass   : 'dropdown-header',
+		titleRowClass : 'dropdown-header-title',
+		labelClass    : 'dropdown-header-label',
+		closeClass    : 'dropdown-header-close',
+
+		html: (data:DHOptions) => {
+			return (
+				'<div class="' + data.headerClass + '">' +
+					'<div class="' + data.titleRowClass + '">' +
+						'<span class="' + data.labelClass + '">' + data.title + '</span>' +
+						'<a class="' + data.closeClass + '">&times;</a>' +
+					'</div>' +
+				'</div>'
+			);
+		}
+	}, userOptions);
+
+	self.on('initialize',()=>{
+		var header = getDom(options.html(options));
+
+		var close_link = header.querySelector('.'+options.closeClass);
+		if( close_link ){
+			close_link.addEventListener('click',(evt)=>{
+				preventDefault(evt,true);
+				self.close();
+			});
+		}
+
+		self.dropdown.insertBefore(header, self.dropdown.firstChild);
+	});
+
+};

package/src/plugins/dropdown_header/types.ts

@@ -0,0 +1,9 @@
+
+export type DHOptions = {
+	title			?: string,
+	headerClass		?: string,
+	titleRowClass	?: string,
+	labelClass		?: string,
+	closeClass		?: string,
+	html			?: (data:DHOptions) => string,
+};

package/src/plugins/dropdown_input/plugin.scss

@@ -0,0 +1,43 @@
+.plugin-dropdown_input{
+
+	&.focus.dropdown-active .#{$select-ns}-control{
+		box-shadow: none;
+		border: $select-border;
+		@if variable-exists(input-box-shadow) {
+			box-shadow: $input-box-shadow;
+		}
+	}
+
+	.dropdown-input {
+		border: 1px solid $select-color-border;
+		border-width: 0 0 1px;
+		display: block;
+		padding: $select-padding-y $select-padding-x;
+		box-shadow: $select-shadow-input;
+		width: 100%;
+		background: transparent;
+	}
+
+	&.focus .#{$select-ns}-dropdown .dropdown-input{
+		@if variable-exists(input-focus-border-color) {
+			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;
+			}
+		}
+	}
+
+	.items-placeholder{
+		border: 0 none !important;
+		box-shadow: none !important;
+		width: 100%;
+	}
+
+	&.has-items .items-placeholder,
+	&.dropdown-active .items-placeholder{
+		display: none !important;
+	}
+}

package/src/plugins/dropdown_input/plugin.ts

@@ -0,0 +1,97 @@
+/**
+ * Plugin: "dropdown_input" (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 * as constants from '../../constants.ts';
+import { getDom, addClasses } from '../../vanilla.ts';
+import { addEvent, preventDefault } from '../../utils.ts';
+
+
+export default function(this:TomSelect) {
+	const self = this;
+
+	self.settings.shouldOpen = true; // make sure the input is shown even if there are no options to display in the dropdown
+
+	self.hook('before','setup',()=>{
+		self.focus_node		= self.control;
+
+		addClasses( self.control_input, 'dropdown-input');
+
+	 	const div = getDom('<div class="dropdown-input-wrap">');
+		div.append(self.control_input);
+		self.dropdown.insertBefore(div, self.dropdown.firstChild);
+
+		// set a placeholder in the select control
+		const placeholder = getDom('<input class="items-placeholder" tabindex="-1" />') as HTMLInputElement;
+		placeholder.placeholder = self.settings.placeholder ||'';
+		self.control.append(placeholder);
+		/**
+		 * TomSelect renders a custom control with a focusable <input class="items-placeholder">.
+		 * The source <select>'s aria-label is not automatically propagated to that input,
+		 * which triggers "Missing form label" accessibility warnings.
+		 * This helper copies the label from the <select> onto the generated input.
+		 */
+		const label = self.input?.getAttribute('aria-label');
+		if (!label) return;
+		placeholder.setAttribute('aria-label', label);
+	});
+
+	self.on('initialize',()=>{
+		// set tabIndex on control to -1, otherwise [shift+tab] will put focus right back on control_input
+		self.control_input.addEventListener('keydown',(evt:KeyboardEvent) =>{
+		//addEvent(self.control_input,'keydown' as const,(evt:KeyboardEvent) =>{
+			switch( evt.keyCode ){
+				case constants.KEY_ESC:
+					if (self.isOpen) {
+						preventDefault(evt,true);
+						self.close();
+					}
+					self.clearActiveItems();
+				return;
+				case constants.KEY_TAB:
+					self.focus_node.tabIndex = -1;
+				break;
+			}
+			return self.onKeyDown.call(self,evt);
+		});
+
+		self.on('blur',()=>{
+			self.focus_node.tabIndex = self.isDisabled ? -1 : self.tabIndex;
+		});
+
+
+		// give the control_input focus when the dropdown is open
+		self.on('dropdown_open',() =>{
+			self.control_input.focus();
+		});
+
+		// prevent onBlur from closing when focus is on the control_input
+		const orig_onBlur = self.onBlur;
+		self.hook('instead','onBlur',(evt?:FocusEvent)=>{
+			if( evt && evt.relatedTarget == self.control_input ) return;
+			return orig_onBlur.call(self);
+		});
+
+		addEvent(self.control_input,'blur', () => self.onBlur() );
+
+		// return focus to control to allow further keyboard input
+		self.hook('before','close',() =>{
+
+			if( !self.isOpen ) return;
+			self.focus_node.focus({preventScroll: true});
+		});
+
+	});
+};

package/src/plugins/input_autogrow/plugin.scss

@@ -0,0 +1,15 @@
+.#{$select-ns}-wrapper.plugin-input_autogrow{
+
+	&.has-items .#{$select-ns}-control > input {
+		min-width: 0;
+	}
+	
+	&.has-items.focus .#{$select-ns}-control > input {
+		flex: none;
+		min-width: 4px;
+
+		&::placeholder {
+			color:transparent;
+		}
+	}
+}

package/src/plugins/input_autogrow/plugin.ts

@@ -0,0 +1,56 @@
+/**
+ * Plugin: "input_autogrow" (Tom Select)
+ *
+ * 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 { addEvent } from '../../utils.ts';
+
+export default function(this:TomSelect) {
+	var self					= this;
+
+	self.on('initialize',()=>{
+
+
+		var test_input				= document.createElement('span');
+		var control					= self.control_input;
+		test_input.style.cssText	= 'position:absolute; top:-99999px; left:-99999px; width:auto; padding:0; white-space:pre; ';
+
+		self.wrapper.appendChild(test_input);
+
+
+		var transfer_styles			= [ 'letterSpacing', 'fontSize', 'fontFamily', 'fontWeight', 'textTransform' ];
+
+		for( const style_name of transfer_styles ){
+			// @ts-ignore TS7015 https://stackoverflow.com/a/50506154/697576
+			test_input.style[style_name] = control.style[style_name];
+		}
+
+
+		/**
+		 * Set the control width
+		 *
+		 */
+		var resize = ()=>{
+			test_input.textContent	= control.value;
+			control.style.width		= test_input.clientWidth+'px';
+		};
+
+		resize();
+		self.on('update item_add item_remove',resize);
+		addEvent(control,'input', resize );
+		addEvent(control,'keyup', resize );
+		addEvent(control,'blur', resize );
+		addEvent(control,'update', resize );
+	});
+
+};