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

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

@@ -0,0 +1,270 @@
+/**
+ * Tom Select Bootstrap 5
+ */
+
+// Import Bootstrap 5 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;
+$select-color-highlight: rgba(255, 237, 40, 40%) !default;
+$select-color-input: $input-bg !default;
+$select-color-input-full: $input-bg !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: color-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: 1 !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-padding-x !default;
+$select-padding-y: $input-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";
+
+@mixin ts-form-validation-state-selector($state) {
+	$state-map: map-get($form-validation-states,$state);
+
+	.#{$select-ns}-wrapper.is-#{$state},
+	.was-validated .#{$state},
+	.was-validated :#{$state} + .#{$select-ns}-wrapper {
+		$color: map-get($state-map,'color');
+		$icon: map-get($state-map,'icon');
+
+		border-color: $color;
+
+		&:not(.single) {
+			background-image: escape-svg($icon);
+			background-position: right $input-height-inner-quarter center;
+			background-size: $input-height-inner-half $input-height-inner-half;
+			background-repeat: no-repeat;
+		}
+
+		&.single {
+			background-image: escape-svg($form-select-indicator), escape-svg($icon);
+			background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+			background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+			background-repeat: no-repeat;
+		}
+
+		&.focus .#{$select-ns}-control {
+			border-color: $color;
+			box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity);
+		}
+	}
+}
+
+
+.#{$select-ns}-dropdown,
+.#{$select-ns}-dropdown.form-control,
+.#{$select-ns}-dropdown.form-select {
+	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 {
+	@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;
+		}
+	}
+
+	.item {
+		display:	flex;
+		align-items: center;
+	}
+	
+	input::placeholder {
+		color: var(--bs-secondary-color, #a7aeb8);
+		opacity: 1;
+	}
+}
+
+@include ts-form-validation-state-selector('invalid');
+@include ts-form-validation-state-selector('valid');
+
+.#{$select-ns}-wrapper {
+	min-height: $input-height;
+	display:flex;
+	
+	.input-group-sm > &,
+	&.form-select-sm,
+	&.form-control-sm {
+		min-height: $input-height-sm;
+
+		.#{$select-ns}-control {
+			@include border-radius($input-border-radius-sm);
+			@include font-size($input-font-size-sm);
+		}
+
+		&.has-items .#{$select-ns}-control {
+			font-size: $input-font-size-sm;
+		}
+	}
+
+	.input-group-sm > &.multi.has-items,
+	&.form-select-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: calc(($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,
+	&.form-select-lg {
+		min-height: $input-height-lg;
+		.#{$select-ns}-control{
+			@include border-radius($input-border-radius-lg);
+			@include font-size($input-font-size-lg);
+		}
+	}
+
+	&:not(.form-control, .form-select) {
+		padding: 0;
+		border: none;
+		height: auto;
+		box-shadow: none;
+		background: none;
+
+		&.single .#{$select-ns}-control {
+			background-image: escape-svg($form-select-indicator);
+			background-repeat: no-repeat;
+			background-position: $form-select-bg-position;
+			background-size: $form-select-bg-size;
+		}
+	}
+
+	&.form-select,
+	&.single {
+		--ts-pr-caret: #{$form-select-indicator-padding};
+	}
+
+	&.form-control, 
+	&.form-select {
+		padding:0 !important;
+		height: auto;
+		box-shadow: none;
+		display: flex;
+
+		.#{$select-ns}-control,
+		&.single.input-active .#{$select-ns}-control {
+			border:		none !important;
+		}
+
+		&:not(.disabled) .#{$select-ns}-control,
+		&:not(.disabled).single.input-active .#{$select-ns}-control {
+			background: transparent !important; // let the background of .form-select show through
+		}
+	}
+}
+
+.input-group{
+	& > .#{$select-ns}-wrapper {
+		flex-grow: 1;
+		width: 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;
+	}
+}
+
+.form-select {
+	.#{$select-ns}-dropdown,
+	.#{$select-ns}-control,
+	.#{$select-ns}-control input {
+		color: $form-select-color;
+	}
+}

package/dist/scss/tom-select.default.scss

@@ -0,0 +1,89 @@
+$select-color-item:					#1da7ee;
+$select-color-item-text:			#fff;
+$select-color-item-active-text:		#fff;
+$select-color-item-border:			#0073bb;
+$select-color-item-active:			#92c836;
+$select-color-item-active-border:	#00578d;
+$select-width-item-border:			1px;
+$select-shadow-input:				inset 0 1px 1px rgba(0, 0, 0, 10%) !default;
+$select-shadow-input-focus:			inset 0 1px 2px rgba(0, 0, 0, 15%) !default;
+
+@import "tom-select";
+@include ts-caret;
+
+.#{$select-ns}-wrapper {
+	display:flex;
+	min-height:$select-line-height + ($select-padding-y*2) + ($select-border-width *2);
+
+	&.multi {
+		&.has-items .#{$select-ns}-control {
+			$padding-x: $select-padding-x - 3px;
+
+			padding-left: $padding-x;
+
+			--ts-pr-min: #{$padding-x};
+		}
+
+		.#{$select-ns}-control {
+			[data-value] {
+				text-shadow: 0 1px 0 rgba(0, 51, 83, 30%);
+				border-radius: 3px;
+				@include selectize-vertical-gradient(#1da7ee, #178ee9);
+
+				box-shadow: 0 1px 0 rgba(0, 0, 0, 20%),inset 0 1px rgba(255, 255, 255, 3%);
+
+				&.active {
+					@include selectize-vertical-gradient(#008fd8, #0075cf);
+				}
+			}
+		}
+
+		&.disabled .#{$select-ns}-control [data-value] {
+			color: #999;
+			text-shadow: none;
+			background: none;
+			box-shadow: none;
+
+			&, .remove {
+				border-color: #e6e6e6;
+			}
+
+			.remove {
+				background: none;
+			}
+		}
+	}
+
+	&.single {
+		.#{$select-ns}-control {
+			box-shadow: 0 1px 0 rgba(0, 0, 0, 5%), inset 0 1px 0 rgba(255, 255, 255, 80%);
+			@include selectize-vertical-gradient(#fefefe, #f2f2f2);
+		}
+	}
+}
+
+.#{$select-ns}-wrapper.single .#{$select-ns}-control, .#{$select-ns}-dropdown.single {
+	border-color: #b8b8b8;
+}
+
+.#{$select-ns}-control {
+	.dropdown-active & {
+		border-radius: $select-border-radius $select-border-radius 0 0;
+	}
+}
+
+.#{$select-ns}-dropdown {
+	.optgroup-header {
+		padding-top: $select-padding-dropdown-item-y + 2px;
+		font-weight: bold;
+		font-size: 0.85em;
+	}
+
+	.optgroup {
+		border-top: 1px solid $select-color-dropdown-border-top;
+
+		&:first-child {
+			border-top: 0 none;
+		}
+	}
+}

package/dist/scss/tom-select.scss

@@ -0,0 +1,179 @@
+/**
+ * tom-select.css (v2.5.2-virtual-scroll.1)
+ * 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.
+ *
+ */
+
+// base styles
+$select-ns:										'ts' !default;
+$select-font-family:							inherit !default;
+$select-font-size:								13px !default;
+$select-line-height:							18px !default;
+$select-color-text:								#303030 !default;
+$select-color-border:							#d0d0d0 !default;
+$select-color-highlight:						rgba(125, 168, 208, 20%) !default;
+$select-color-input:							#fff !default;
+$select-color-input-full:						$select-color-input !default;
+$select-color-disabled:							#fafafa !default;
+$select-color-item:								#f2f2f2 !default;
+$select-color-item-text:						$select-color-text !default;
+$select-color-item-border:						#d0d0d0 !default;
+$select-color-item-active:						#e8e8e8 !default;
+$select-color-item-active-text:					$select-color-text !default;
+$select-color-item-active-border:				#cacaca !default;
+$select-color-dropdown:							#fff !default;
+$select-color-dropdown-border:					$select-color-border !default;
+$select-color-dropdown-border-top:				#f0f0f0 !default;
+$select-color-dropdown-item-active:				#f5fafd !default;
+$select-color-dropdown-item-active-text:		#495c68 !default;
+$select-color-dropdown-item-create-text:		rgba(red($select-color-text), green($select-color-text), blue($select-color-text), 50%) !default;
+$select-color-dropdown-item-create-active-text:	$select-color-dropdown-item-active-text !default;
+$select-color-optgroup:							$select-color-dropdown !default;
+$select-color-optgroup-text:					$select-color-text !default;
+$select-lighten-disabled-item:					30% !default;
+$select-lighten-disabled-item-text:				30% !default;
+$select-lighten-disabled-item-border:			30% !default;
+$select-opacity-disabled:						0.5 !default;
+$select-shadow-input:							none !default;
+$select-shadow-input-focus:						none !default;
+$select-border-width:							1px !default;
+$select-border:									$select-border-width solid $select-color-border !default;
+$select-dropdown-border:						1px solid $select-color-dropdown-border !default;
+$select-border-radius:							3px !default;
+$select-width-item-border:						0px !default;
+$select-max-height-dropdown:					200px !default;
+$select-padding-x:								8px !default;
+$select-padding-y:								8px !default;
+$select-padding-item-x:							6px !default;
+$select-padding-item-y:							2px !default;
+$select-padding-dropdown-item-x:				$select-padding-x !default;
+$select-padding-dropdown-item-y:				5px !default;
+$select-margin-item-x:							3px !default;
+$select-margin-item-y:							3px !default;
+$select-arrow-size:								5px !default;
+$select-arrow-color:							#808080 !default;
+$select-arrow-offset:							15px !default;
+$select-caret-margin:							0px 4px !default;
+$select-caret-margin-rtl:						0px 4px 0px -2px !default;
+$select-spinner-size:							30px !default;
+$select-spinner-border-size:					5px !default;
+$select-spinner-border-color:					$select-color-border !default;
+
+@import 'items';
+@import 'dropdown';
+
+@import "./plugins/drag_drop.scss";
+@import "./plugins/checkbox_options.scss";
+@import "./plugins/clear_button.scss";
+@import "./plugins/dropdown_header.scss";
+@import "./plugins/dropdown_input.scss";
+@import "./plugins/input_autogrow.scss";
+@import "./plugins/optgroup_columns.scss";
+@import "./plugins/remove_button.scss";
+
+:root {
+	--ts-pr-clear-button: 0px;
+	--ts-pr-caret: 0px;
+	--ts-pr-min: .75rem;
+}
+
+@mixin selectize-vertical-gradient($color-top, $color-bottom) {
+    background-color: color-mix($color-top, $color-bottom, 60%);
+    background-image: linear-gradient(to bottom, $color-top, $color-bottom);
+    background-repeat: repeat-x;
+}
+
+.#{$select-ns}-wrapper.single {
+	.#{$select-ns}-control {
+		&, input {
+			cursor: pointer;
+		}
+	}
+}
+
+.#{$select-ns}-control:not(.rtl) {
+	padding-right:	max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important;
+}
+
+.#{$select-ns}-control.rtl {
+	padding-left:	max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var(--ts-pr-caret)) ) !important;
+}
+
+@mixin ts-caret() {
+	.#{$select-ns}-wrapper.single {
+		.#{$select-ns}-control {
+			--ts-pr-caret: 2rem;
+
+			&::after {
+				content: ' ';
+				display: block;
+				position: absolute;
+				top: 50%;
+				margin-top: round(-0.5 * $select-arrow-size);
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: $select-arrow-size $select-arrow-size 0 $select-arrow-size;
+				border-color: $select-arrow-color transparent transparent transparent;
+			}
+			
+			&:not(.rtl)::after {
+				right: $select-arrow-offset;
+			}
+			
+			&.rtl::after {
+				left: $select-arrow-offset;
+			}
+		}
+
+		&.dropdown-active .#{$select-ns}-control::after {
+			margin-top: $select-arrow-size * -0.8;
+			border-width: 0 $select-arrow-size $select-arrow-size $select-arrow-size;
+			border-color: transparent transparent $select-arrow-color transparent;
+		}
+
+		&.input-active .#{$select-ns}-control,
+		&.input-active .#{$select-ns}-control input {
+			cursor: text;
+		}
+	}
+}
+
+.#{$select-ns}-wrapper {
+	position: relative;
+}
+
+.#{$select-ns}-dropdown,
+.#{$select-ns}-control,
+.#{$select-ns}-control input {
+	color: $select-color-text;
+	font-family: $select-font-family;
+	font-size: $select-font-size;
+	line-height: $select-line-height;
+}
+
+.#{$select-ns}-control,
+.#{$select-ns}-wrapper.single.input-active .#{$select-ns}-control {
+	background: $select-color-input;
+	cursor: text;
+}
+
+.ts-hidden-accessible {
+	border: 0 !important;
+	clip: rect(0 0 0 0) !important;
+	clip-path: inset(50%) !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+	white-space: nowrap !important;
+}

package/package.json

@@ -42,7 +42,7 @@
 	},
 	"description": "Tom Select is a versatile and dynamic <select> UI control. Forked from Selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, etc.",
 	"homepage": "https://tom-select.js.org",
-	"version": "2.5.2-virtual-scroll.0",
+	"version": "2.5.2-virtual-scroll.1",
 	"files": [
 		"/dist",
 		"/src"
@@ -55,7 +55,7 @@
 	"license": "Apache-2.0",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/drecchia/tom-select.git"
+		"url": "https://github.com/orchidjs/tom-select.git"
 	},
 	"devDependencies": {
 		"@11ty/eleventy": "^3.0.0",

package/src/plugins/local_virtual_scroll/plugin.ts

@@ -17,6 +17,7 @@
 
 import type TomSelect from '../../tom-select.ts';
 import type { LVSOptions, FlatItem } from './types.ts';
+import { highlight, removeHighlight } from '../../contrib/highlight.ts';
 
 export default function (this: TomSelect, userOptions: LVSOptions) {
 	const self = this;
@@ -133,6 +134,19 @@ export default function (this: TomSelect, userOptions: LVSOptions) {
 		return self.getOption(item.id, true) as HTMLElement;
 	};
 
+	// ─── Re-apply search highlights to an element ─────────────────────────
+
+	const applyHighlights = (el: HTMLElement) => {
+		if (!self.settings.highlight) return;
+		removeHighlight(el);
+		const results = self.currentResults;
+		if (results && results.query.length && results.tokens.length) {
+			for (const tok of results.tokens) {
+				if (tok.regex) highlight(el, tok.regex);
+			}
+		}
+	};
+
 	// ─── Helpers ─────────────────────────────────────────────────────────
 
 	const measureHeight = (elements: HTMLElement[]): number =>
@@ -183,6 +197,7 @@ export default function (this: TomSelect, userOptions: LVSOptions) {
 		const to = Math.min(flat_list.length, visible_end + page_size * pages);
 		const new_els = renderRange(from, to);
 		for (const el of new_els) dropdown_content.append(el);
+		for (const el of new_els) applyHighlights(el);
 		visible_end = to;
 
 		// Recycle items from top to stay within max_dom
@@ -214,6 +229,7 @@ export default function (this: TomSelect, userOptions: LVSOptions) {
 		const first_child = dropdown_content.firstChild;
 		for (const el of new_els)
 			dropdown_content.insertBefore(el, first_child);
+		for (const el of new_els) applyHighlights(el);
 
 		// Compensate scrollTop so existing content stays in place
 		setScrollTop(dropdown_content.scrollTop + measureHeight(new_els));
@@ -272,6 +288,9 @@ export default function (this: TomSelect, userOptions: LVSOptions) {
 			dropdown_content.innerHTML = '';
 			const first_page = renderRange(0, visible_end);
 			for (const el of first_page) dropdown_content.append(el);
+			// Re-apply highlights: the core applied them before we cleared the DOM,
+			// and items from optgroup expansion never went through the core highlight pass.
+			applyHighlights(dropdown_content);
 		}
 
 		updateSentinel();