@onetype/framework 2.0.53 → 2.0.54

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

@@ -4,7 +4,7 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'form-tags',
 		icon: 'label',
 		name: 'Tags',
-		description: 'Tag input with free-text entry or predefined options.',
+		description: 'Premium tag input with autocomplete, color variants, max limit and keyboard navigation.',
 		category: 'Form',
 		author: 'OneType',
 		config: {
@@ -16,12 +16,11 @@ onetype.AddonReady('elements', (elements) =>
 				}
 			},
 			name: {
-				type: 'string',
-				value: ''
+				type: 'string'
 			},
 			placeholder: {
 				type: 'string',
-				value: 'Add tag...'
+				value: 'Add tag…'
 			},
 			options: {
 				type: 'array',
@@ -30,14 +29,27 @@ onetype.AddonReady('elements', (elements) =>
 					type: 'string'
 				}
 			},
+			max: {
+				type: 'number'
+			},
+			minLength: {
+				type: 'number'
+			},
+			restrict: {
+				type: 'boolean'
+			},
 			disabled: {
-				type: 'boolean',
-				value: false
+				type: 'boolean'
 			},
 			variant: {
 				type: 'array',
 				value: ['bg-2', 'border', 'size-m'],
-				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'transparent', 'border', 'size-s', 'size-m', 'size-l']
+				options: [
+					'bg-1', 'bg-2', 'bg-3', 'bg-4',
+					'transparent', 'border',
+					'color-brand', 'color-blue', 'color-red', 'color-orange', 'color-green',
+					'size-s', 'size-m', 'size-l'
+				]
 			},
 			_change: {
 				type: 'function'
@@ -47,35 +59,91 @@ onetype.AddonReady('elements', (elements) =>
 		{
 			this.query = '';
 			this.open = false;
+			this.activeIndex = 0;
+			this.shakeIndex = -1;
+
+			this.reachedMax = () =>
+			{
+				return this.max > 0 && this.value.length >= this.max;
+			};
 
 			this.filtered = () =>
 			{
-				if (!this.options.length)
+				if(!this.options || !this.options.length)
 				{
 					return [];
 				}
 
+				const query = this.query.toLowerCase();
+
 				return this.options.filter(option =>
-					!this.value.includes(option) &&
-					(!this.query || option.toLowerCase().includes(this.query.toLowerCase()))
-				);
+				{
+					if(this.value.includes(option))
+					{
+						return false;
+					}
+
+					if(!query)
+					{
+						return true;
+					}
+
+					return option.toLowerCase().includes(query);
+				});
 			};
 
 			this.add = (tag) =>
 			{
-				tag = tag.trim();
+				if(this.disabled)
+				{
+					return;
+				}
 
-				if (!tag || this.disabled || this.value.includes(tag))
+				tag = String(tag || '').trim();
+
+				if(!tag)
+				{
+					return;
+				}
+
+				if(this.minLength && tag.length < this.minLength)
+				{
+					return;
+				}
+
+				if(this.reachedMax())
 				{
 					return;
 				}
 
+				if(this.restrict && !this.options.includes(tag))
+				{
+					return;
+				}
+
+				const existing = this.value.indexOf(tag);
+
+				if(existing !== -1)
+				{
+					this.shakeIndex = existing;
+					this.Update();
+
+					setTimeout(() =>
+					{
+						this.shakeIndex = -1;
+						this.Update();
+					}, 400);
+
+					return;
+				}
+
 				this.value.push(tag);
 				this.query = '';
+				this.activeIndex = 0;
 				this.open = false;
 				this.Update();
 
-				if (this._change)
+				if(this._change)
 				{
 					this._change({ value: this.value });
 				}
@@ -83,7 +151,7 @@ onetype.AddonReady('elements', (elements) =>
 
 			this.remove = (index) =>
 			{
-				if (this.disabled)
+				if(this.disabled)
 				{
 					return;
 				}
@@ -91,7 +159,7 @@ onetype.AddonReady('elements', (elements) =>
 				this.value.splice(index, 1);
 				this.Update();
 
-				if (this._change)
+				if(this._change)
 				{
 					this._change({ value: this.value });
 				}
@@ -100,29 +168,78 @@ onetype.AddonReady('elements', (elements) =>
 			this.input = ({ value }) =>
 			{
 				this.query = value;
-				this.open = this.query.length > 0 && this.filtered().length > 0;
+				this.activeIndex = 0;
+
+				const filtered = this.filtered();
+				this.open = filtered.length > 0;
 				this.Update();
 			};
 
+			this.focus = () =>
+			{
+				const filtered = this.filtered();
+
+				if(filtered.length > 0)
+				{
+					this.open = true;
+					this.Update();
+				}
+			};
+
 			this.keydown = ({ event }) =>
 			{
-				if (event.key === 'Enter')
+				const filtered = this.filtered();
+
+				if(event.key === 'Enter')
 				{
 					event.preventDefault();
 
-					if (this.open && this.filtered().length)
+					if(this.open && filtered.length > 0)
 					{
-						this.add(this.filtered()[0]);
+						this.add(filtered[this.activeIndex] || filtered[0]);
 					}
-					else if (this.query.trim())
+					else if(this.query.trim() && !this.restrict)
 					{
 						this.add(this.query);
 					}
+
+					return;
 				}
 
-				if (event.key === 'Backspace' && !this.query && this.value.length)
+				if(event.key === 'Backspace' && !this.query && this.value.length)
 				{
 					this.remove(this.value.length - 1);
+					return;
+				}
+
+				if(event.key === 'ArrowDown')
+				{
+					event.preventDefault();
+
+					if(filtered.length > 0)
+					{
+						this.open = true;
+						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 === 'Escape')
+				{
+					this.open = false;
+					this.Update();
+					return;
 				}
 			};
 
@@ -137,27 +254,37 @@ onetype.AddonReady('elements', (elements) =>
 				this.Update();
 			};
 
-			return `
-				<div :class="'holder ' + variant.join(' ')" ot-click-outside="close">
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ') + (disabled ? ' disabled' : '')" ot-click-outside="close">
 					<input type="hidden" :name="name" :value="value.join(',')" />
-					<div class="tags">
-						<span ot-for="tag, index in value" class="tag">
+					<div class="field">
+						<span ot-for="tag, index in value" :class="'tag' + (shakeIndex === index ? ' shake' : '')">
 							<span class="text">{{ tag }}</span>
-							<i ot-if="!disabled" class="remove" ot-click="() => remove(index)">close</i>
+							<button ot-if="!disabled" type="button" class="remove" ot-click="() => remove(index)">
+								<i>close</i>
+							</button>
 						</span>
 						<input
+							ot-if="!reachedMax()"
 							class="input"
 							type="text"
 							:value="query"
 							:placeholder="value.length ? '' : placeholder"
 							:disabled="disabled"
 							autocomplete="off"
+							spellcheck="false"
 							ot-input="input"
 							ot-keydown="keydown"
+							ot-focus="focus"
 						/>
 					</div>
 					<div ot-if="open" class="dropdown">
-						<div ot-for="option in filtered()" class="option" ot-click="() => select(option)">{{ option }}</div>
+						<button
+							ot-for="option, index in filtered()"
+							type="button"
+							:class="'option' + (activeIndex === index ? ' active' : '')"
+							ot-click="() => select(option)"
+						>{{ option }}</button>
 					</div>
 				</div>
 			`;

package/addons/render/elements/front/items/self/form/textarea/textarea.css

@@ -10,13 +10,20 @@
 
 .e-5973ffcd > .holder
 {
+	position: relative;
 	display: flex;
+	flex-direction: column;
 	width: 100%;
 	padding: var(--ot-spacing-s) var(--ot-spacing-m);
-	border-radius: var(--ot-radius-m);
 	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
 	background: transparent;
-	transition: background 0.15s ease, border-color 0.15s ease;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-5973ffcd > .holder:focus-within
+{
+	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
 }
 
 /* Textarea */
@@ -24,57 +31,151 @@
 .e-5973ffcd > .holder > textarea
 {
 	width: 100%;
+	padding: 0;
 	background: transparent;
 	border: none;
 	outline: none;
-	resize: none;
 	color: var(--ot-text-1);
+	font-family: var(--ot-font-primary);
 	font-size: var(--ot-size-m);
-	font-family: inherit;
+	font-weight: 500;
 	line-height: 1.6;
-	padding: 0;
 }
 
 .e-5973ffcd > .holder > textarea::placeholder
 {
-	color: var(--ot-text-2);
+	color: var(--ot-text-3);
+	font-weight: 400;
 }
 
 .e-5973ffcd > .holder > textarea:disabled
+{
+	cursor: not-allowed;
+}
+
+/* Counter */
+
+.e-5973ffcd > .holder > .counter
+{
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	align-self: flex-end;
+	margin-top: var(--ot-spacing-x);
+	padding-top: var(--ot-spacing-x);
+	font-family: var(--ot-font-primary);
+	font-size: 10.5px;
+	font-weight: 500;
+	color: var(--ot-text-3);
+	font-variant-numeric: tabular-nums;
+	transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+	pointer-events: none;
+}
+
+.e-5973ffcd > .holder > .counter > .slash
 {
 	opacity: 0.5;
+}
+
+.e-5973ffcd > .holder > .counter > .full
+{
+	color: var(--ot-red);
+	font-weight: 600;
+}
+
+/* Disabled */
+
+.e-5973ffcd > .holder.disabled
+{
 	cursor: not-allowed;
+	opacity: 0.55;
 }
 
-/* Background variants */
+/* ===== BACKGROUND VARIANTS ===== */
 
-.e-5973ffcd > .holder.bg-1 { background: var(--ot-bg-1); }
-.e-5973ffcd > .holder.bg-1:hover { background: var(--ot-bg-1-hover); }
+.e-5973ffcd > .holder.bg-1
+{
+	background: var(--ot-bg-1);
+}
+.e-5973ffcd > .holder.bg-1:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-1-hover);
+}
+
+.e-5973ffcd > .holder.bg-2
+{
+	background: var(--ot-bg-2);
+}
+.e-5973ffcd > .holder.bg-2:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-2-hover);
+}
+
+.e-5973ffcd > .holder.bg-3
+{
+	background: var(--ot-bg-3);
+}
+.e-5973ffcd > .holder.bg-3:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-3-hover);
+}
+
+.e-5973ffcd > .holder.bg-4
+{
+	background: var(--ot-bg-4);
+}
+.e-5973ffcd > .holder.bg-4:hover:not(:focus-within):not(.disabled)
+{
+	background: var(--ot-bg-4-hover);
+}
+
+/* Transparent */
+
+.e-5973ffcd > .holder.transparent
+{
+	background: transparent;
+	padding: 0;
+}
+
+/* Border — per bg level */
+
+.e-5973ffcd > .holder.border { border-color: var(--ot-bg-2-border); }
 .e-5973ffcd > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
-.e-5973ffcd > .holder.bg-2 { background: var(--ot-bg-2); }
-.e-5973ffcd > .holder.bg-2:hover { background: var(--ot-bg-2-hover); }
 .e-5973ffcd > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
-.e-5973ffcd > .holder.bg-3 { background: var(--ot-bg-3); }
-.e-5973ffcd > .holder.bg-3:hover { background: var(--ot-bg-3-hover); }
 .e-5973ffcd > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
-.e-5973ffcd > .holder.bg-4 { background: var(--ot-bg-4); }
-.e-5973ffcd > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
 .e-5973ffcd > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
 
-/* Transparent variant */
+/* ===== SIZE VARIANTS ===== */
 
-.e-5973ffcd > .holder.transparent { background: transparent; padding: 0; }
+.e-5973ffcd > .holder.size-s
+{
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+}
+
+.e-5973ffcd > .holder.size-s > textarea
+{
+	font-size: var(--ot-size-s);
+	line-height: 1.5;
+}
 
-/* Border variant */
+.e-5973ffcd > .holder.size-m
+{
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+}
 
-.e-5973ffcd > .holder.border { border: 1px solid var(--ot-bg-2-border); }
-.e-5973ffcd > .holder.border:focus-within { border-color: var(--ot-brand); }
+.e-5973ffcd > .holder.size-m > textarea
+{
+	font-size: var(--ot-size-m);
+	line-height: 1.6;
+}
 
-/* Size variants */
+.e-5973ffcd > .holder.size-l
+{
+	padding: var(--ot-spacing-m) var(--ot-spacing-l);
+}
 
-.e-5973ffcd > .holder.size-s { padding: var(--ot-spacing-x) var(--ot-spacing-s); }
-.e-5973ffcd > .holder.size-s > textarea { font-size: var(--ot-size-s); }
-.e-5973ffcd > .holder.size-m { padding: var(--ot-spacing-s) var(--ot-spacing-m); }
-.e-5973ffcd > .holder.size-m > textarea { font-size: var(--ot-size-m); }
-.e-5973ffcd > .holder.size-l { padding: var(--ot-spacing-m) var(--ot-spacing-l); }
-.e-5973ffcd > .holder.size-l > textarea { font-size: var(--ot-size-m); }
+.e-5973ffcd > .holder.size-l > textarea
+{
+	font-size: var(--ot-size-m);
+	line-height: 1.7;
+}