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

package/src/contrib/microplugin.ts

@@ -0,0 +1,137 @@
+/**
+ * microplugin.js
+ * Copyright (c) 2013 Brian Reavis & 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 <brian@thirdroute.com>
+ */
+
+type TSettings = {
+	[key:string]:any
+}
+
+type TPlugins = {
+	names: string[],
+	settings: TSettings,
+	requested: {[key:string]:boolean},
+	loaded: {[key:string]:any}
+};
+
+export type TPluginItem = {name:string,options:{}};
+export type TPluginHash = {[key:string]:{}};
+
+
+
+
+export default function MicroPlugin(Interface: any ){
+
+	Interface.plugins = {};
+
+	return class extends Interface{
+
+		public plugins:TPlugins = {
+			names     : [],
+			settings  : {},
+			requested : {},
+			loaded    : {}
+		};
+
+		/**
+		 * Registers a plugin.
+		 *
+		 * @param {function} fn
+		 */
+		static define(name:string, fn:(this:any,settings:TSettings)=>any){
+			Interface.plugins[name] = {
+				'name' : name,
+				'fn'   : fn
+			};
+		}
+
+
+		/**
+		 * 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': { ... }}
+		 *
+		 * @param {array|object} plugins
+		 */
+		initializePlugins(plugins:string[]|TPluginItem[]|TPluginHash) {
+			var key, name;
+			const self  = this;
+			const queue:string[] = [];
+
+			if (Array.isArray(plugins)) {
+				plugins.forEach((plugin:string|TPluginItem)=>{
+					if (typeof plugin === 'string') {
+						queue.push(plugin);
+					} else {
+						self.plugins.settings[plugin.name] = plugin.options;
+						queue.push(plugin.name);
+					}
+				});
+			} else if (plugins) {
+				for (key in plugins) {
+					if (plugins.hasOwnProperty(key)) {
+						self.plugins.settings[key] = plugins[key];
+						queue.push(key);
+					}
+				}
+			}
+
+			while( name = queue.shift() ){
+				self.require(name);
+			}
+		}
+
+		loadPlugin(name:string) {
+			var self    = this;
+			var plugins = self.plugins;
+			var plugin  = Interface.plugins[name];
+
+			if (!Interface.plugins.hasOwnProperty(name)) {
+				throw new Error('Unable to find "' +  name + '" plugin');
+			}
+
+			plugins.requested[name] = true;
+			plugins.loaded[name] = plugin.fn.apply(self, [self.plugins.settings[name] || {}]);
+			plugins.names.push(name);
+		}
+
+		/**
+		 * Initializes a plugin.
+		 *
+		 */
+		require(name:string) {
+			var self = this;
+			var plugins = self.plugins;
+
+			if (!self.plugins.loaded.hasOwnProperty(name)) {
+				if (plugins.requested[name]) {
+					throw new Error('Plugin has circular dependency ("' + name + '")');
+				}
+				self.loadPlugin(name);
+			}
+
+			return plugins.loaded[name];
+		}
+
+	};
+
+}

package/src/defaults.ts

@@ -0,0 +1,95 @@
+
+export default {
+	options: [],
+	optgroups: [],
+
+	plugins: [],
+	delimiter: ',',
+	splitOn: null, // regexp or string for splitting up values from a paste command
+	persist: true,
+	diacritics: true,
+	create: null,
+	createOnBlur: false,
+	createFilter: null,
+	clearAfterSelect: false,
+	highlight: true,
+	openOnFocus: true,
+	shouldOpen: null,
+	maxOptions: 50,
+	maxItems: null,
+	hideSelected: null,
+	duplicates: false,
+	addPrecedence: false,
+	selectOnTab: false,
+	preload: null,
+	allowEmptyOption: false,
+	//closeAfterSelect: false,
+	refreshThrottle: 300,
+
+
+	loadThrottle: 300,
+	loadingClass: 'loading',
+
+	dataAttr: null, //'data-data',
+	optgroupField: 'optgroup',
+	valueField: 'value',
+	labelField: 'text',
+	disabledField: 'disabled',
+	optgroupLabelField: 'label',
+	optgroupValueField: 'value',
+	lockOptgroupOrder: false,
+
+	sortField: '$order',
+	searchField: ['text'],
+	searchConjunction: 'and',
+
+	mode: null,
+	wrapperClass: 'ts-wrapper',
+	controlClass: 'ts-control',
+	dropdownClass: 'ts-dropdown',
+	dropdownContentClass: 'ts-dropdown-content',
+	itemClass: 'item',
+	optionClass: 'option',
+
+	dropdownParent: null,
+	controlInput: '<input type="text" autocomplete="off" size="1" />',
+
+	copyClassesToDropdown: false,
+
+	placeholder: null,
+	hidePlaceholder: null,
+
+	shouldLoad: function(query:string):boolean{
+		return query.length > 0;
+	},
+
+	/*
+	load                 : null, // function(query, callback) { ... }
+	score                : null, // function(search) { ... }
+	onInitialize         : null, // function() { ... }
+	onChange             : null, // function(value) { ... }
+	onItemAdd            : null, // function(value, $item) { ... }
+	onItemRemove         : null, // function(value) { ... }
+	onClear              : null, // function() { ... }
+	onOptionAdd          : null, // function(value, data) { ... }
+	onOptionRemove       : null, // function(value) { ... }
+	onOptionClear        : null, // function() { ... }
+	onOptionGroupAdd     : null, // function(id, data) { ... }
+	onOptionGroupRemove  : null, // function(id) { ... }
+	onOptionGroupClear   : null, // function() { ... }
+	onDropdownOpen       : null, // function(dropdown) { ... }
+	onDropdownClose      : null, // function(dropdown) { ... }
+	onType               : null, // function(str) { ... }
+	onDelete             : null, // function(values) { ... }
+	*/
+
+	render: {
+		/*
+		item: null,
+		optgroup: null,
+		optgroup_header: null,
+		option: null,
+		option_create: null
+		*/
+	}
+};

package/src/getSettings.ts

@@ -0,0 +1,176 @@
+import defaults from './defaults.ts';
+import { hash_key, iterate } from './utils.ts';
+import { TomOption, TomSettings, RecursivePartial } from './types/index.ts';
+import { TomInput } from './types/index.ts';
+
+
+export default function getSettings( input:TomInput, settings_user:RecursivePartial<TomSettings>):TomSettings{
+	var settings:TomSettings	= Object.assign({}, defaults, settings_user);
+
+	var attr_data				= settings.dataAttr;
+	var field_label				= settings.labelField;
+	var field_value				= settings.valueField;
+	var field_disabled			= settings.disabledField;
+	var field_optgroup			= settings.optgroupField;
+	var field_optgroup_label	= settings.optgroupLabelField;
+	var field_optgroup_value	= settings.optgroupValueField;
+
+	var tag_name				= input.tagName.toLowerCase();
+	var placeholder				= input.getAttribute('placeholder') || input.getAttribute('data-placeholder');
+
+	if (!placeholder && !settings.allowEmptyOption) {
+		let option		= input.querySelector('option[value=""]');
+		if( option ){
+			placeholder = option.textContent;
+		}
+
+	}
+
+	var settings_element:{
+		placeholder	: null|string,
+		options		: TomOption[],
+		optgroups	: TomOption[],
+		items		: string[],
+		maxItems	: null|number,
+	} = {
+		placeholder	: placeholder,
+		options		: [],
+		optgroups	: [],
+		items		: [],
+		maxItems	: null,
+	};
+
+
+	/**
+	 * Initialize from a <select> element.
+	 *
+	 */
+	var init_select = () => {
+		var tagName;
+		var options = settings_element.options;
+		var optionsMap:{[key:string]:any} = {};
+		var group_count = 1;
+		let $order = 0;
+
+		var readData = (el:HTMLElement):TomOption => {
+
+			var data	= Object.assign({},el.dataset); // get plain object from DOMStringMap
+			var json	= attr_data && data[attr_data];
+
+			if( typeof json === 'string' && json.length ){
+				data = Object.assign(data,JSON.parse(json));
+			}
+
+			return data;
+		};
+
+		var addOption = (option:HTMLOptionElement, group?:string) => {
+
+			var value = hash_key(option.value);
+			if ( value == null ) return;
+			if ( !value && !settings.allowEmptyOption) return;
+
+			// if the option already exists, it's probably been
+			// duplicated in another optgroup. in this case, push
+			// the current group to the "optgroup" property on the
+			// existing option so that it's rendered in both places.
+			if (optionsMap.hasOwnProperty(value)) {
+				if (group) {
+					var arr = optionsMap[value][field_optgroup];
+					if (!arr) {
+						optionsMap[value][field_optgroup] = group;
+					} else if (!Array.isArray(arr)) {
+						optionsMap[value][field_optgroup] = [arr, group];
+					} else {
+						arr.push(group);
+					}
+				}
+
+			}else{
+
+				var option_data             = readData(option);
+				option_data[field_label]    = option_data[field_label] || option.textContent;
+				option_data[field_value]    = option_data[field_value] || value;
+				option_data[field_disabled] = option_data[field_disabled] || option.disabled;
+				option_data[field_optgroup] = option_data[field_optgroup] || group;
+				option_data.$option			= option;
+				option_data.$order			= option_data.$order || ++$order;
+
+				optionsMap[value] = option_data;
+				options.push(option_data);
+			}
+
+			if( option.selected ){
+				settings_element.items.push(value);
+			}
+		};
+
+		var addGroup = ( optgroup:HTMLOptGroupElement ) => {
+			var id:string, optgroup_data
+
+			optgroup_data							= readData(optgroup);
+			optgroup_data[field_optgroup_label]		= optgroup_data[field_optgroup_label] || optgroup.getAttribute('label') || '';
+			optgroup_data[field_optgroup_value]		= optgroup_data[field_optgroup_value] || group_count++;
+			optgroup_data[field_disabled]			= optgroup_data[field_disabled] || optgroup.disabled;
+			optgroup_data.$order					= optgroup_data.$order || ++$order;
+
+			settings_element.optgroups.push(optgroup_data);
+
+			id = optgroup_data[field_optgroup_value];
+
+			iterate(optgroup.children, (option)=>{
+				addOption(option as HTMLOptionElement, id);
+			});
+
+		};
+
+		settings_element.maxItems = input.hasAttribute('multiple') ? null : 1;
+
+		iterate(input.children,(child)=>{
+			tagName = child.tagName.toLowerCase();
+			if (tagName === 'optgroup') {
+				addGroup(child as HTMLOptGroupElement);
+			} else if (tagName === 'option') {
+				addOption(child as HTMLOptionElement);
+			}
+		});
+
+	};
+
+
+	/**
+	 * Initialize from a <input type="text"> element.
+	 *
+	 */
+	var init_textbox = () => {
+		const data_raw = input.getAttribute(attr_data);
+
+		if (!data_raw) {
+			var value = input.value.trim() || '';
+			if (!settings.allowEmptyOption && !value.length) return;
+			const values = value.split(settings.delimiter);
+
+			iterate( values, (value) => {
+				const option:TomOption = {};
+				option[field_label] = value;
+				option[field_value] = value;
+				settings_element.options.push(option);
+			});
+			settings_element.items = values;
+		} else {
+			settings_element.options = JSON.parse(data_raw);
+			iterate( settings_element.options, (opt) => {
+				settings_element.items.push(opt[field_value]);
+			});
+		}
+	};
+
+
+	if (tag_name === 'select') {
+		init_select();
+	} else {
+		init_textbox();
+	}
+
+	return Object.assign( {}, defaults, settings_element, settings_user) as TomSettings;
+};

package/src/plugins/caret_position/plugin.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 { nodeIndex, removeClasses } from '../../vanilla.ts';
+
+
+export default function(this:TomSelect) {
+	var self = this;
+
+	/**
+	 * Moves the caret to the specified index.
+	 *
+	 * The input must be moved by leaving it in place and moving the
+	 * siblings, due to the fact that focus cannot be restored once lost
+	 * on mobile webkit devices
+	 *
+	 */
+	self.hook('instead','setCaret',(new_pos:number) => {
+
+		if( self.settings.mode === 'single' || !self.control.contains(self.control_input) ) {
+			new_pos = self.items.length;
+		} else {
+			new_pos = Math.max(0, Math.min(self.items.length, new_pos));
+
+			if( new_pos != self.caretPos && !self.isPending ){
+
+				self.controlChildren().forEach((child,j) => {
+					if( j < new_pos ){
+						self.control_input.insertAdjacentElement('beforebegin', child );
+					} else {
+						self.control.appendChild( child );
+					}
+				});
+			}
+		}
+
+		self.caretPos = new_pos;
+	});
+
+	self.hook('instead','moveCaret',(direction:number) => {
+
+		if( !self.isFocused ) return;
+
+		// move caret before or after selected items
+		const last_active		= self.getLastActive(direction);
+		if( last_active ){
+			const idx = nodeIndex(last_active);
+			self.setCaret(direction > 0 ? idx + 1: idx);
+			self.setActiveItem();
+			removeClasses(last_active as HTMLElement,'last-active');
+
+		// move caret left or right of current position
+		}else{
+			self.setCaret(self.caretPos + direction);
+
+		}
+
+	});
+
+};

package/src/plugins/change_listener/plugin.ts

@@ -0,0 +1,23 @@
+/**
+ * Plugin: "change_listener" (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 { addEvent } from '../../utils.ts';
+
+export default function(this:TomSelect) {
+	addEvent(this.input,'change',()=>{
+		this.sync();
+	});
+};

package/src/plugins/checkbox_options/plugin.scss

@@ -0,0 +1,11 @@
+.plugin-checkbox_options:not(.rtl) {
+	.option input {
+		margin-right: 0.5rem;
+	}
+}
+
+.plugin-checkbox_options.rtl {
+	.option input {
+		margin-left: 0.5rem;
+	}
+}

package/src/plugins/checkbox_options/plugin.ts

@@ -0,0 +1,130 @@
+/**
+ * Plugin: "checkbox_options" (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 { TomTemplate } from '../../types/index.ts';
+import { preventDefault, hash_key } from '../../utils.ts';
+import { getDom } from '../../vanilla.ts';
+import { CBOptions } from './types.ts';
+
+
+export default function(this:TomSelect, userOptions:CBOptions) {
+	var self = this;
+	var orig_onOptionSelect = self.onOptionSelect;
+
+	self.settings.hideSelected = false;
+
+	const cbOptions : CBOptions = Object.assign({
+		// so that the user may add different ones as well
+		className             : "tomselect-checkbox",
+
+		// the following default to the historic plugin's values
+		checkedClassNames     : undefined,
+		uncheckedClassNames   : undefined,
+	}, userOptions);
+
+
+	var UpdateChecked = function(checkbox:HTMLInputElement, toCheck : boolean) {
+		if( toCheck ){
+			checkbox.checked = true;
+			if (cbOptions.uncheckedClassNames) {
+				checkbox.classList.remove(...cbOptions.uncheckedClassNames);
+			}
+			if (cbOptions.checkedClassNames) {
+				checkbox.classList.add(...cbOptions.checkedClassNames);
+			}
+		}else{
+			checkbox.checked = false;
+			if (cbOptions.checkedClassNames) {
+				checkbox.classList.remove(...cbOptions.checkedClassNames);
+			}
+			if (cbOptions.uncheckedClassNames) {
+				checkbox.classList.add(...cbOptions.uncheckedClassNames);
+			}
+		}
+	}
+
+	// update the checkbox for an option
+	var UpdateCheckbox = function(option:HTMLElement){
+		setTimeout(()=>{
+			var checkbox = option.querySelector('input.' + cbOptions.className);
+			if( checkbox instanceof HTMLInputElement ){
+				UpdateChecked(checkbox, option.classList.contains('selected'));
+			}
+		},1);
+	};
+
+	// add checkbox to option template
+	self.hook('after','setupTemplates',() => {
+
+		var orig_render_option = self.settings.render.option;
+
+		self.settings.render.option = ((data, escape_html) => {
+			var rendered = getDom(orig_render_option.call(self, data, escape_html));
+			var checkbox = document.createElement('input');
+			if (cbOptions.className) {
+				checkbox.classList.add(cbOptions.className);
+			}
+			checkbox.addEventListener('click',function(evt){
+				preventDefault(evt);
+			});
+
+			checkbox.type = 'checkbox';
+			const hashed = hash_key(data[self.settings.valueField]);
+
+			UpdateChecked(checkbox, !!(hashed && self.items.indexOf(hashed) > -1) );
+
+			rendered.prepend(checkbox);
+			return rendered;
+		}) satisfies TomTemplate;
+	});
+
+	// uncheck when item removed
+	self.on('item_remove',(value:string) => {
+		var option = self.getOption(value);
+
+		if( option ){ // if dropdown hasn't been opened yet, the option won't exist
+			option.classList.remove('selected'); // selected class won't be removed yet
+			UpdateCheckbox(option);
+		}
+	});
+
+	// check when item added
+	self.on('item_add',(value:string) => {
+		var option = self.getOption(value);
+
+		if( option ){ // if dropdown hasn't been opened yet, the option won't exist
+			UpdateCheckbox(option);
+		}
+	});
+
+
+	// remove items when selected option is clicked
+	self.hook('instead','onOptionSelect',( evt:KeyboardEvent, option:HTMLElement )=>{
+
+		if( option.classList.contains('selected') ){
+			option.classList.remove('selected')
+			self.removeItem(option.dataset.value);
+			self.refreshOptions();
+			preventDefault(evt,true);
+			return;
+        }
+
+		orig_onOptionSelect.call(self, evt, option);
+
+		UpdateCheckbox(option);
+	});
+
+};

package/src/plugins/checkbox_options/types.ts

@@ -0,0 +1,15 @@
+
+export type CBOptions = {
+	/**
+	 * a unique class name for the checkbox to find the input
+	 */
+	className           ?: string;
+	/**
+	 * class name to add if checkbox is checked and remove otherwise
+	 */
+	checkedClassNames   ?: string[],
+	/**
+	 * class name to add if checkbox was not checked and remove otherwise
+	 */
+	uncheckedClassNames ?: string[],
+};

package/src/plugins/clear_button/plugin.scss

@@ -0,0 +1,33 @@
+/* stylelint-disable function-name-case */
+
+.plugin-clear_button {
+	--ts-pr-clear-button: 1em;
+
+	.clear-button{
+		opacity: 0;
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		right: calc(#{$select-padding-x} - #{$select-padding-item-x});
+		margin-right: 0 !important;
+		background: transparent !important;
+		transition: opacity 0.5s;
+		cursor: pointer;
+	}
+
+	&.form-select .clear-button,
+	&.single .clear-button {
+
+		@if variable-exists(select-padding-dropdown-item-x) {
+			right: Max(var(--ts-pr-caret), #{$select-padding-dropdown-item-x});
+		}
+		@else{
+			right: Max(var(--ts-pr-caret), calc(#{$select-padding-x} - #{$select-padding-item-x}));
+		}
+	}
+
+	&.focus.has-items .clear-button,
+	&:not(.disabled):hover.has-items .clear-button{
+		opacity: 1;
+	}
+}