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

package/src/types/core.ts

@@ -0,0 +1,68 @@
+
+import type TomSelect from '../tom-select.ts';
+import { escape_html } from '../utils.ts';
+
+
+export interface TomInput extends HTMLElement{
+	tomselect				?: TomSelect;
+	disabled				: boolean;
+	readOnly				?: boolean;
+	required				: boolean;
+	value					: string;
+	type					: string;
+	validity				: ValidityState;
+}
+
+export type TomArgObject = {
+	silent?: boolean,
+}
+
+export type TomOption = {[key:string]:any}
+
+export type TomOptions = {[key: string]: TomOption };
+
+export type TomCreateFilter = (input:string) => boolean;
+
+export type TomCreateCallback = (data?:TomOption)=>void;
+
+export type TomCreate = (input:string,create:TomCreateCallback) => boolean;
+
+export type TomCreateOptgroup = (create:TomCreateCallback) => TomOption;
+
+export interface TomItem extends HTMLElement{
+	dataset:{
+		value: string;
+	}
+}
+
+export type TomLoadCallback = TomSelect['loadCallback'];
+
+
+export type TomTemplate = (data:TomOption, escape:typeof escape_html) => string|HTMLElement;
+export type TomTemplateNull = (data:TomOption, escape:typeof escape_html) => null|string|HTMLElement;
+
+export type TomTemplates = {
+	'dropdown'			: TomTemplate,
+	'optgroup'			: TomTemplate,
+	'optgroup_header'	: TomTemplate,
+	'option'			: TomTemplate,
+	'item'				: TomTemplate,
+	'option_create'		: TomTemplate,
+	'no_results'		: TomTemplate,
+	'loading'			: TomTemplate,
+	'not_loading'		: TomTemplateNull,
+	'loading_more'		: TomTemplateNull,
+	'no_more_results'	: TomTemplateNull,
+}
+
+export type TomTemplateNames = keyof TomTemplates;
+
+export type TomClearFilter = (option:TomOption,value:string) => boolean;
+
+// https://stackoverflow.com/questions/41980195/recursive-partialt-in-typescript
+export type RecursivePartial<T> = {
+  [P in keyof T]?:
+    T[P] extends (infer U)[] ? RecursivePartial<U>[] :
+    T[P] extends object | undefined ? RecursivePartial<T[P]> :
+    T[P];
+};

package/src/types/index.ts

@@ -0,0 +1,3 @@
+
+export * from './core.ts';
+export * from './settings.ts';

package/src/types/settings.ts

@@ -0,0 +1,98 @@
+
+import { TomCreateOptgroup, TomCreateFilter, TomCreate, TomLoadCallback, TomTemplates, TomOption } from './index.ts';
+
+import { TPluginItem, TPluginHash } from '../contrib/microplugin.ts';
+import { type Sort as SifterSort, type SortFn as SifterSortFn } from '@orchidjs/sifter';
+
+
+
+export type TomSettings = {
+	options					?: any[],
+	optgroups				?: any[],
+	items					?: string[],
+
+	plugins					: string[]|TPluginItem[]|TPluginHash,
+	delimiter				: string,
+	splitOn					: RegExp|string, // regexp or string for splitting up values from a paste command
+	persist					: boolean,
+	diacritics				: boolean,
+	create					: boolean|TomCreate,
+	createOnBlur			: boolean,
+	createFilter			: RegExp|string|TomCreateFilter,
+	highlight				: boolean,
+	openOnFocus				: boolean,
+	shouldOpen				: boolean,
+	maxOptions				: null|number,
+	maxItems				: null|number,
+	hideSelected			: boolean,
+	duplicates				: boolean,
+	addPrecedence			: boolean,
+	selectOnTab				: boolean,
+	preload					: boolean|string,
+	allowEmptyOption		: boolean,
+	closeAfterSelect		: boolean,
+	clearAfterSelect		: boolean,
+	refreshThrottle			: number,
+
+	loadThrottle			: number,
+	loadingClass			: string,
+
+	dataAttr				: string, //'data-data',
+	optgroupField			: string,
+	valueField				: string,
+	labelField				: string,
+	disabledField			: string,
+	optgroupLabelField		: string,
+	optgroupValueField		: string,
+	lockOptgroupOrder		: boolean,
+	optionGroupRegister		: TomCreateOptgroup,
+
+	sortField				: string|SifterSort[]|SifterSortFn,
+	searchField				: string[],
+	searchConjunction		: string,
+	nesting					: boolean,
+
+	mode					: string,
+	wrapperClass			: string,
+	controlClass			: string,
+	dropdownClass			: string,
+	dropdownContentClass	: string,
+	itemClass				: string,
+	optionClass				: string,
+
+	dropdownParent			: string,
+	controlInput			: null|string|HTMLInputElement,
+
+	copyClassesToDropdown	: boolean,
+
+	placeholder				: string,
+	hidePlaceholder			: boolean,
+
+	load					: (value:string, callback:TomLoadCallback) => void,
+	score					?: (query:string) => () => any,
+	shouldLoad				: (query:string) => boolean,
+	onInitialize			: () => void,
+	onChange				: (value:string|number) => void,
+	onItemAdd				: (value:string|number,item:HTMLDivElement) => void,
+	onItemRemove			: (value:string|number,item:HTMLDivElement) => void,
+	onClear					: () => void,
+	onOptionAdd				: (value:string|number,data:TomOption) => void,
+	onOptionRemove			: (value:string|number) => void,
+	onOptionClear			: () => void,
+	onOptionGroupAdd		: (value:string|number,data:TomOption) => void,
+	onOptionGroupRemove		: (value:string|number) => void,
+	onOptionGroupClear		: () => void,
+	onDropdownOpen			: (dropdown:HTMLDivElement) => void,
+	onDropdownClose			: (dropdown:HTMLDivElement) => void,
+	onType					: (str:string) => void,
+	onLoad					: (options:TomOption[],optgroups:TomOption[]) => void,
+	onFocus					: () => void,
+	onBlur					: () => void,
+	onDelete				: (values:string[], evt:KeyboardEvent|MouseEvent) => boolean,
+
+	render					: TomTemplates,
+
+	// virtual scroll plugin
+	firstUrl				: (query:string)=>any
+	shouldLoadMore			: () => boolean,
+};

package/src/utils.ts

@@ -0,0 +1,230 @@
+
+import type TomSelect from './tom-select.ts';
+import { TomLoadCallback } from './types/index.ts';
+
+
+/**
+ * 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'
+ *
+ */
+export const hash_key = (value:undefined|null|boolean|string|number):string|null => {
+	if (typeof value === 'undefined' || value === null) return null;
+	return get_hash(value);
+};
+
+export const get_hash = (value:boolean|string|number):string => {
+	if (typeof value === 'boolean') return value ? '1' : '0';
+	return value + '';
+};
+
+/**
+ * Escapes a string for use within HTML.
+ *
+ */
+export const escape_html = (str:string):string => {
+	return (str + '')
+		.replace(/&/g, '&')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+};
+
+
+/**
+ * use setTimeout if timeout > 0 
+ */
+export const timeout = (fn:()=>void,timeout:number): number | null => {
+	if( timeout > 0 ){
+		return window.setTimeout(fn,timeout);
+	}
+
+	fn.call(null);
+	return null;
+}
+
+/**
+ * Debounce the user provided load function
+ *
+ */
+export const loadDebounce = (fn:(value:string,callback:TomLoadCallback) => void,delay:number) => {
+	var timeout: null|ReturnType<typeof setTimeout>;
+	return function(this:TomSelect, value:string,callback:TomLoadCallback) {
+		var self = this;
+
+		if( timeout ){
+			self.loading = Math.max(self.loading - 1, 0);
+			clearTimeout(timeout);
+		}
+		timeout = setTimeout(function() {
+			timeout = null;
+			self.loadedSearches[value] = true;
+			fn.call(self, value, callback);
+
+		}, delay);
+	};
+};
+
+
+/**
+ * Debounce all fired events types listed in `types`
+ * while executing the provided `fn`.
+ *
+ */
+export const debounce_events = ( self:TomSelect, types:string[], fn:() => void ) => {
+	var type:string;
+	var trigger = self.trigger;
+	var event_args:{ [key: string]: any } = {};
+
+	// override trigger method
+	self.trigger = function(){
+		var type = arguments[0];
+		if (types.indexOf(type) !== -1) {
+			event_args[type] = arguments;
+		} else {
+			return trigger.apply(self, arguments);
+		}
+	};
+
+	// invoke provided function
+	fn.apply(self, []);
+	self.trigger = trigger;
+
+	// trigger queued events
+	for( type of types ){
+		if( type in event_args ){
+			trigger.apply(self, event_args[type]);
+		}
+	}
+};
+
+
+/**
+ * Determines the current selection within a text input control.
+ * Returns an object containing:
+ *   - start
+ *   - length
+ *
+ * Note: "selectionStart, selectionEnd ... apply only to inputs of types text, search, URL, tel and password"
+ * 	- https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+ */
+export const getSelection = (input:HTMLInputElement):{ start: number; length: number } => {
+	return {
+		start	: input.selectionStart || 0,
+		length	: (input.selectionEnd||0) - (input.selectionStart||0),
+	};
+};
+
+
+/**
+ * Prevent default
+ *
+ */
+export const preventDefault = (evt?:Event, stop:boolean=false):void => {
+	if( evt ){
+		evt.preventDefault();
+		if( stop ){
+			evt.stopPropagation();
+		}
+	}
+}
+
+
+/**
+ * Add event helper
+ *
+ */
+export const addEvent = (target:EventTarget, type:string, callback:EventListenerOrEventListenerObject, options?:object):void => {
+	target.addEventListener(type,callback,options);
+};
+
+
+/**
+ * Return true if the requested key is down
+ * Will return false if more than one control character is pressed ( when [ctrl+shift+a] != [ctrl+a] )
+ * The current evt may not always set ( eg calling advanceSelection() )
+ *
+ */
+export const isKeyDown = ( key_name:keyof (KeyboardEvent|MouseEvent), evt?:KeyboardEvent|MouseEvent ) => {
+
+	if( !evt ){
+		return false;
+	}
+
+	if( !evt[key_name] ){
+		return false;
+	}
+
+	var count = (evt.altKey?1:0) + (evt.ctrlKey?1:0) + (evt.shiftKey?1:0) + (evt.metaKey?1:0);
+
+	if( count === 1 ){
+		return true;
+	}
+
+	return false;
+};
+
+
+/**
+ * Get the id of an element
+ * If the id attribute is not set, set the attribute with the given id
+ *
+ */
+export const getId = (el:Element,id:string) => {
+	const existing_id = el.getAttribute('id');
+	if( existing_id ){
+		return existing_id;
+	}
+
+	el.setAttribute('id',id);
+	return id;
+};
+
+
+/**
+ * Returns a string with backslashes added before characters that need to be escaped.
+ */
+export const addSlashes = (str:string):string => {
+	return str.replace(/[\\"']/g, '\\$&');
+};
+
+/**
+ *
+ */
+export const append = ( parent:Element|DocumentFragment, node: string|Node|null|undefined ):void =>{
+	if( node ) parent.append(node);
+};
+
+/**
+ * Iterates over arrays and hashes.
+ *
+ * ```
+ * iterate(this.items, function(item, id) {
+ *    // invoked for each item
+ * });
+ * ```
+ *
+ */
+export const iterate = (object:[]|{[key:string]:any}, callback:(value:any,key:any)=>any) => {
+
+	if ( Array.isArray(object)) {
+		object.forEach(callback);
+
+	}else{
+
+		for (var key in object) {
+			if (object.hasOwnProperty(key)) {
+				callback(object[key], key);
+			}
+		}
+	}
+};

package/src/vanilla.ts

@@ -0,0 +1,210 @@
+
+import { iterate } from './utils.ts';
+
+/**
+ * Return a dom element from either a dom query string, jQuery object, a dom element or html string
+ * https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
+ *
+ * param query should be {}
+ */
+export const getDom = ( query:any ):HTMLElement => {
+
+	if( query.jquery ){
+		return query[0];
+	}
+
+	if( query instanceof HTMLElement ){
+		return query;
+	}
+
+	if( isHtmlString(query) ){
+		var tpl = document.createElement('template');
+		tpl.innerHTML = query.trim(); // Never return a text node of whitespace as the result
+		return tpl.content.firstChild as HTMLElement;
+	}
+
+	return document.querySelector(query);
+};
+
+export const isHtmlString = (arg:any): boolean => {
+	if( typeof arg === 'string' && arg.indexOf('<') > -1 ){
+		return true;
+	}
+	return false;
+}
+
+export const escapeQuery = (query:string):string => {
+	return query.replace(/['"\\]/g, '\\$&');
+}
+
+/**
+ * Dispatch an event
+ *
+ */
+export const triggerEvent = ( dom_el:HTMLElement, event_name:string ):void => {
+	var event = document.createEvent('HTMLEvents');
+	event.initEvent(event_name, true, false);
+	dom_el.dispatchEvent(event)
+};
+
+/**
+ * Apply CSS rules to a dom element
+ *
+ */
+export const applyCSS = ( dom_el:HTMLElement, css:{ [key: string]: string|number }):void => {
+	Object.assign(dom_el.style, css);
+}
+
+
+/**
+ * Add css classes
+ *
+ */
+export const addClasses = ( elmts:HTMLElement|HTMLElement[], ...classes:string[]|string[][] ) => {
+
+	var norm_classes 	= classesArray(classes);
+	elmts				= castAsArray(elmts);
+
+	elmts.map( el => {
+		norm_classes.map( cls => {
+			el.classList.add( cls );
+		});
+	});
+}
+
+/**
+ * Remove css classes
+ *
+ */
+ export const removeClasses = ( elmts:HTMLElement|HTMLElement[], ...classes:string[]|string[][] ) => {
+
+ 	var norm_classes 	= classesArray(classes);
+	elmts				= castAsArray(elmts);
+
+	elmts.map( el => {
+		norm_classes.map(cls => {
+	 		el.classList.remove( cls );
+		});
+ 	});
+ }
+
+
+/**
+ * Return arguments
+ *
+ */
+export const classesArray = (args:string[]|string[][]):string[] => {
+	var classes:string[] = [];
+	iterate( args, (_classes) =>{
+		if( typeof _classes === 'string' ){
+			_classes = _classes.trim().split(/[\t\n\f\r\s]/);
+		}
+		if( Array.isArray(_classes) ){
+			classes = classes.concat(_classes);
+		}
+	});
+
+	return classes.filter(Boolean);
+}
+
+
+/**
+ * Create an array from arg if it's not already an array
+ *
+ */
+export const castAsArray = (arg:any):Array<any> => {
+	if( !Array.isArray(arg) ){
+ 		arg = [arg];
+ 	}
+	return arg;
+}
+
+
+/**
+ * Get the closest node to the evt.target matching the selector
+ * Stops at wrapper
+ *
+ */
+export const parentMatch = ( target:null|HTMLElement, selector:string, wrapper?:HTMLElement ):HTMLElement|void => {
+
+	if( wrapper && !wrapper.contains(target) ){
+		return;
+	}
+
+	while( target && target.matches ){
+
+		if( target.matches(selector) ){
+			return target;
+		}
+
+		target = target.parentNode as HTMLElement;
+	}
+}
+
+
+/**
+ * Get the first or last item from an array
+ *
+ * > 0 - right (last)
+ * <= 0 - left (first)
+ *
+ */
+export const getTail = ( list:Array<any>|NodeList, direction:number=0 ):any => {
+
+	if( direction > 0 ){
+		return list[list.length-1];
+	}
+
+	return list[0];
+}
+
+/**
+ * Return true if an object is empty
+ *
+ */
+export const isEmptyObject = (obj:object):boolean => {
+	return (Object.keys(obj).length === 0);
+}
+
+
+/**
+ * Get the index of an element amongst sibling nodes of the same type
+ *
+ */
+export const nodeIndex = ( el:null|Element, amongst?:string ):number => {
+	if (!el) return -1;
+
+	amongst = amongst || el.nodeName;
+
+	var i = 0;
+	while( el = el.previousElementSibling ){
+
+		if( el.matches(amongst) ){
+			i++;
+		}
+	}
+	return i;
+}
+
+
+/**
+ * Set attributes of an element
+ *
+ */
+export const setAttr = (el:Element,attrs:{ [key: string]: null|string|number }) => {
+	iterate( attrs,(val,attr) => {
+		if( val == null ){
+			el.removeAttribute(attr as string);
+		}else{
+			el.setAttribute(attr as string, ''+val);
+		}
+	});
+}
+
+
+/**
+ * Replace a node
+ */
+export const replaceNode = ( existing:Node, replacement:Node ) => {
+	if( existing.parentNode ) existing.parentNode.replaceChild(replacement, existing);
+}