@onetype/framework 2.0.52 → 2.0.54

package/addons/render/elements/front/items/self/form/select/select.js

@@ -4,21 +4,22 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'form-select',
 		icon: 'arrow_drop_down',
 		name: 'Select',
-		description: 'Custom dropdown select with search support.',
+		description: 'Premium custom dropdown select with search, keyboard navigation and clearable.',
 		category: 'Form',
 		author: 'OneType',
 		config: {
 			value: {
-				type: 'string',
-				value: ''
+				type: 'string|number'
 			},
 			name: {
-				type: 'string',
-				value: ''
+				type: 'string'
 			},
 			placeholder: {
 				type: 'string',
-				value: 'Select...'
+				value: 'Select…'
+			},
+			icon: {
+				type: 'string'
 			},
 			options: {
 				type: 'array',
@@ -26,19 +27,22 @@ onetype.AddonReady('elements', (elements) =>
 				each: {
 					type: 'object',
 					config: {
-						label: { type: 'string', value: '' },
-						value: { type: 'string', value: '' },
-						icon: { type: 'string', value: '' }
+						label: { type: 'string' },
+						value: { type: 'string' },
+						icon: { type: 'string' },
+						description: { type: 'string' },
+						disabled: { type: 'boolean' }
 					}
 				}
 			},
 			searchable: {
-				type: 'boolean',
-				value: false
+				type: 'boolean'
+			},
+			clearable: {
+				type: 'boolean'
 			},
 			disabled: {
-				type: 'boolean',
-				value: false
+				type: 'boolean'
 			},
 			variant: {
 				type: 'array',
@@ -54,6 +58,7 @@ onetype.AddonReady('elements', (elements) =>
 			this.open = false;
 			this.query = '';
 			this.style = '';
+			this.activeIndex = 0;
 
 			this.current = () =>
 			{
@@ -62,19 +67,19 @@ onetype.AddonReady('elements', (elements) =>
 
 			this.filtered = () =>
 			{
-				if (!this.query)
+				if(!this.query)
 				{
 					return this.options;
 				}
 
 				return this.options.filter(o =>
-					o.label.toLowerCase().includes(this.query.toLowerCase())
+					String(o.label || '').toLowerCase().includes(this.query.toLowerCase())
 				);
 			};
 
 			this.handleScroll = (event) =>
 			{
-				if (event.target.closest && event.target.closest('.dropdown'))
+				if(event.target.closest && event.target.closest('.dropdown'))
 				{
 					return;
 				}
@@ -82,22 +87,88 @@ onetype.AddonReady('elements', (elements) =>
 				this.close();
 			};
 
+			this.handleKey = (event) =>
+			{
+				if(!this.open)
+				{
+					return;
+				}
+
+				const filtered = this.filtered();
+
+				if(event.key === 'Escape')
+				{
+					event.preventDefault();
+					this.close();
+					return;
+				}
+
+				if(event.key === 'ArrowDown')
+				{
+					event.preventDefault();
+					this.activeIndex = Math.min(this.activeIndex + 1, filtered.length - 1);
+					this.Update();
+					return;
+				}
+
+				if(event.key === 'ArrowUp')
+				{
+					event.preventDefault();
+					this.activeIndex = Math.max(this.activeIndex - 1, 0);
+					this.Update();
+					return;
+				}
+
+				if(event.key === 'Home')
+				{
+					event.preventDefault();
+					this.activeIndex = 0;
+					this.Update();
+					return;
+				}
+
+				if(event.key === 'End')
+				{
+					event.preventDefault();
+					this.activeIndex = Math.max(filtered.length - 1, 0);
+					this.Update();
+					return;
+				}
+
+				if(event.key === 'Enter')
+				{
+					event.preventDefault();
+
+					if(filtered[this.activeIndex])
+					{
+						this.select(filtered[this.activeIndex]);
+					}
+
+					return;
+				}
+			};
+
 			this.close = () =>
 			{
 				this.open = false;
 				this.query = '';
+				this.activeIndex = 0;
+
 				window.removeEventListener('scroll', this.handleScroll, true);
 				window.removeEventListener('resize', this.close);
+				window.removeEventListener('keydown', this.handleKey);
+
+				this.Update();
 			};
 
 			this.toggle = (event) =>
 			{
-				if (this.disabled)
+				if(this.disabled)
 				{
 					return;
 				}
 
-				if (this.open)
+				if(this.open)
 				{
 					this.close();
 					return;
@@ -106,27 +177,61 @@ onetype.AddonReady('elements', (elements) =>
 				this.open = true;
 				this.query = '';
 
-				const rect = event.target.closest('.trigger').getBoundingClientRect();
-				this.style = 'top: ' + (rect.bottom + 4) + 'px; left: ' + rect.left + 'px; width: ' + rect.width + 'px;';
+				const filtered = this.filtered();
+				const currentIndex = filtered.findIndex(o => o.value === this.value);
+				this.activeIndex = currentIndex >= 0 ? currentIndex : 0;
 
 				window.addEventListener('scroll', this.handleScroll, true);
 				window.addEventListener('resize', this.close);
+				window.addEventListener('keydown', this.handleKey);
+
+				this.Update();
+
+				if(this.searchable)
+				{
+					setTimeout(() =>
+					{
+						const search = this.Element?.querySelector('.search > input');
+
+						if(search)
+						{
+							search.focus();
+						}
+					}, 10);
+				}
 			};
 
 			this.select = (option) =>
 			{
+				if(option.disabled)
+				{
+					return;
+				}
+
 				this.value = option.value;
 				this.close();
 
-				if (this._change)
+				if(this._change)
 				{
 					this._change({ value: this.value });
 				}
 			};
 
+			this.clear = () =>
+			{
+				this.value = '';
+
+				if(this._change)
+				{
+					this._change({ value: '' });
+				}
+			};
+
 			this.search = ({ value }) =>
 			{
 				this.query = value;
+				this.activeIndex = 0;
+				this.Update();
 			};
 
 			this.dismiss = () =>
@@ -134,24 +239,45 @@ onetype.AddonReady('elements', (elements) =>
 				this.close();
 			};
 
-			return `
-				<div :class="'holder ' + variant.join(' ') + (open ? ' open' : '')" ot-click-outside="dismiss">
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ') + (open ? ' open' : '') + (disabled ? ' disabled' : '')" ot-click-outside="dismiss">
 					<input type="hidden" :name="name" :value="value" />
 					<div class="trigger" ot-click="toggle">
-						<i ot-if="current() && current().icon" class="icon">{{ current().icon }}</i>
+						<i ot-if="icon" class="icon">{{ icon }}</i>
+						<i ot-if="!icon && current() && current().icon" class="icon">{{ current().icon }}</i>
 						<span ot-if="value" class="selected">{{ current() ? current().label : '' }}</span>
 						<span ot-if="!value" class="placeholder">{{ placeholder }}</span>
-						<i class="arrow">{{ open ? 'expand_less' : 'expand_more' }}</i>
+						<button
+							ot-if="clearable && value && !disabled"
+							type="button"
+							class="action"
+							ot-click.stop="clear"
+							:ot-tooltip="{ text: 'Clear', position: { x: 'center', y: 'top' } }"
+						>
+							<i>close</i>
+						</button>
+						<i class="arrow">expand_more</i>
 					</div>
-					<div ot-if="open" class="dropdown" :style="style">
+					<div ot-if="open" class="dropdown">
 						<div ot-if="searchable" class="search">
-							<input type="text" :value="query" placeholder="Search..." autocomplete="off" ot-input="search" />
+							<i>search</i>
+							<input type="text" :value="query" placeholder="Search…" autocomplete="off" ot-input="search" />
 						</div>
 						<div class="list">
-							<div ot-for="option in filtered()" :class="'option' + (option.value === value ? ' active' : '')" ot-click="() => select(option)">
+							<button
+								ot-for="option, index in filtered()"
+								type="button"
+								:class="'option' + (option.value === value ? ' selected' : '') + (activeIndex === index ? ' active' : '') + (option.disabled ? ' disabled' : '')"
+								ot-click="() => select(option)"
+							>
 								<i ot-if="option.icon" class="icon">{{ option.icon }}</i>
-								<span class="label">{{ option.label }}</span>
-							</div>
+								<span class="text">
+									<span class="label">{{ option.label }}</span>
+									<span ot-if="option.description" class="description">{{ option.description }}</span>
+								</span>
+								<i ot-if="option.value === value" class="check">check</i>
+							</button>
+							<div ot-if="filtered().length === 0" class="empty">No results</div>
 						</div>
 					</div>
 				</div>