@onetype/framework 2.0.41 → 2.0.43

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

@@ -0,0 +1,123 @@
+/* Root */
+
+.e-162fca34
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-162fca34 > .holder
+{
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
+
+/* Track */
+
+.e-162fca34 > .holder > .track
+{
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 6px;
+	background: var(--ot-bg-3);
+	border-radius: var(--ot-radius-s);
+	pointer-events: none;
+}
+
+.e-162fca34 > .holder > .track > .fill
+{
+	height: 100%;
+	border-radius: var(--ot-radius-s);
+	transition: width 0.15s ease-out;
+}
+
+/* Input */
+
+.e-162fca34 > .holder > input
+{
+	position: relative;
+	width: 100%;
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	cursor: pointer;
+	z-index: 1;
+}
+
+.e-162fca34 > .holder > input::-webkit-slider-thumb
+{
+	-webkit-appearance: none;
+	appearance: none;
+	border: 2px solid var(--ot-bg-1);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: transform 0.15s ease;
+}
+
+.e-162fca34 > .holder > input::-webkit-slider-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-162fca34 > .holder > input::-moz-range-thumb
+{
+	border: 2px solid var(--ot-bg-1);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: transform 0.15s ease;
+}
+
+.e-162fca34 > .holder > input::-moz-range-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-162fca34 > .holder > input:disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Color variants */
+
+.e-162fca34 > .holder.brand > .track > .fill { background: var(--ot-brand); }
+.e-162fca34 > .holder.brand > input::-webkit-slider-thumb { background: var(--ot-brand); }
+.e-162fca34 > .holder.brand > input::-moz-range-thumb { background: var(--ot-brand); }
+
+.e-162fca34 > .holder.blue > .track > .fill { background: var(--ot-blue); }
+.e-162fca34 > .holder.blue > input::-webkit-slider-thumb { background: var(--ot-blue); }
+.e-162fca34 > .holder.blue > input::-moz-range-thumb { background: var(--ot-blue); }
+
+.e-162fca34 > .holder.red > .track > .fill { background: var(--ot-red); }
+.e-162fca34 > .holder.red > input::-webkit-slider-thumb { background: var(--ot-red); }
+.e-162fca34 > .holder.red > input::-moz-range-thumb { background: var(--ot-red); }
+
+.e-162fca34 > .holder.orange > .track > .fill { background: var(--ot-orange); }
+.e-162fca34 > .holder.orange > input::-webkit-slider-thumb { background: var(--ot-orange); }
+.e-162fca34 > .holder.orange > input::-moz-range-thumb { background: var(--ot-orange); }
+
+.e-162fca34 > .holder.green > .track > .fill { background: var(--ot-green); }
+.e-162fca34 > .holder.green > input::-webkit-slider-thumb { background: var(--ot-green); }
+.e-162fca34 > .holder.green > input::-moz-range-thumb { background: var(--ot-green); }
+
+/* Size variants */
+
+.e-162fca34 > .holder.size-s > .track { height: 4px; }
+.e-162fca34 > .holder.size-s > input { height: 16px; }
+.e-162fca34 > .holder.size-s > input::-webkit-slider-thumb { width: 14px; height: 14px; }
+.e-162fca34 > .holder.size-s > input::-moz-range-thumb { width: 14px; height: 14px; }
+
+.e-162fca34 > .holder.size-m > .track { height: 6px; }
+.e-162fca34 > .holder.size-m > input { height: 20px; }
+.e-162fca34 > .holder.size-m > input::-webkit-slider-thumb { width: 18px; height: 18px; }
+.e-162fca34 > .holder.size-m > input::-moz-range-thumb { width: 18px; height: 18px; }
+
+.e-162fca34 > .holder.size-l > .track { height: 8px; }
+.e-162fca34 > .holder.size-l > input { height: 24px; }
+.e-162fca34 > .holder.size-l > input::-webkit-slider-thumb { width: 22px; height: 22px; }
+.e-162fca34 > .holder.size-l > input::-moz-range-thumb { width: 22px; height: 22px; }

package/{lib/items/elements → addons/render/elements/front/items/self}/form/slider/slider.js

@@ -1,70 +1,89 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'form-slider',
-		icon: 'linear_scale',
-		name: 'Slider',
-		description: 'Range slider input for selecting numeric values.',
-		category: 'Form',
-		author: 'OneType',
-		config: {
-			value: {
-				type: 'number',
-				value: 50
-			},
-			min: {
-				type: 'number',
-				value: 0
-			},
-			max: {
-				type: 'number',
-				value: 100
-			},
-			step: {
-				type: 'number',
-				value: 10
-			},
-			variant: {
-				type: 'array',
-				value: ['brand', 'size-m'],
-				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
-			},
-			onChange: {
-				type: 'function'
-			}
-		},
-		render: function()
-		{
-			this.handleInput = (event) =>
-			{
-				this.value = parseFloat(event.target.value);
-				if (this.onChange)
-				{
-					this.onChange(this.value);
-				}
-			};
-
-			this.getPercentage = () =>
-			{
-				return ((this.value - this.min) / (this.max - this.min)) * 100;
-			};
-
-			return `
-				<div class="holder" :variant="variant.join(' ')">
-					<div class="track">
-						<div class="fill" :style="'width: ' + getPercentage() + '%'"></div>
-					</div>
-					<input
-						type="range"
-						class="input"
-						:value="value"
-						:min="min"
-						:max="max"
-						:step="step"
-						ot-input="handleInput"
-					/>
-				</div>
-			`;
-		}
-	});
-});
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-slider',
+		icon: 'linear_scale',
+		name: 'Slider',
+		description: 'Range slider for selecting numeric values.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'number',
+				value: 50
+			},
+			min: {
+				type: 'number',
+				value: 0
+			},
+			max: {
+				type: 'number',
+				value: 100
+			},
+			step: {
+				type: 'number',
+				value: 10
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['brand', 'size-m'],
+				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
+			},
+			_input: {
+				type: 'function'
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.handle = ({ event }) =>
+			{
+				this.value = parseFloat(event.target.value);
+
+				if (this._input)
+				{
+					this._input({ event, value: this.value });
+				}
+			};
+
+			this.commit = ({ event }) =>
+			{
+				this.value = parseFloat(event.target.value);
+
+				if (this._change)
+				{
+					this._change({ event, value: this.value });
+				}
+			};
+
+			this.percentage = () =>
+			{
+				return ((this.value - this.min) / (this.max - this.min)) * 100;
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<div class="track">
+						<div class="fill" :style="'width: ' + percentage() + '%'"></div>
+					</div>
+					<input
+						type="range"
+						:value="value"
+						:min="min"
+						:max="max"
+						:step="step"
+						:disabled="disabled"
+						ot-input="handle"
+						ot-change="commit"
+					/>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,152 @@
+/* Root */
+
+.e-283fbe2c
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-283fbe2c > .holder
+{
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+	background: transparent;
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+/* Tags */
+
+.e-283fbe2c > .holder > .tags
+{
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	min-height: var(--ot-height-m);
+}
+
+/* Tag */
+
+.e-283fbe2c > .holder > .tags > .tag
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+	padding: 2px var(--ot-spacing-s);
+	border-radius: var(--ot-radius-s);
+	background: var(--ot-bg-4);
+	border: 1px solid var(--ot-bg-4-border);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-1);
+	line-height: 1;
+}
+
+.e-283fbe2c > .holder > .tags > .tag > .remove
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	cursor: pointer;
+	transition: color 0.15s ease;
+}
+
+.e-283fbe2c > .holder > .tags > .tag > .remove:hover
+{
+	color: var(--ot-red);
+}
+
+/* Input */
+
+.e-283fbe2c > .holder > .tags > .input
+{
+	flex: 1;
+	min-width: 80px;
+	border: none;
+	outline: none;
+	background: transparent;
+	color: var(--ot-text-1);
+	font-size: var(--ot-size-m);
+	font-family: inherit;
+	padding: 0;
+}
+
+.e-283fbe2c > .holder > .tags > .input::placeholder
+{
+	color: var(--ot-text-2);
+}
+
+.e-283fbe2c > .holder > .tags > .input:disabled
+{
+	cursor: not-allowed;
+}
+
+/* Dropdown */
+
+.e-283fbe2c > .holder > .dropdown
+{
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	margin-top: var(--ot-spacing-x);
+	padding: var(--ot-spacing-x) 0;
+	background: var(--ot-bg-3);
+	border: 1px solid var(--ot-bg-3-border);
+	border-radius: var(--ot-radius-m);
+	z-index: 10;
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+.e-283fbe2c > .holder > .dropdown > .option
+{
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-1);
+	cursor: pointer;
+	transition: background 0.15s ease;
+}
+
+.e-283fbe2c > .holder > .dropdown > .option:hover
+{
+	background: var(--ot-bg-3-hover);
+}
+
+/* Background variants */
+
+.e-283fbe2c > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-283fbe2c > .holder.bg-1:focus-within { background: var(--ot-bg-1-hover); }
+.e-283fbe2c > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-283fbe2c > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-283fbe2c > .holder.bg-2:focus-within { background: var(--ot-bg-2-hover); }
+.e-283fbe2c > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-283fbe2c > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-283fbe2c > .holder.bg-3:focus-within { background: var(--ot-bg-3-hover); }
+.e-283fbe2c > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-283fbe2c > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-283fbe2c > .holder.bg-4:focus-within { background: var(--ot-bg-4-hover); }
+.e-283fbe2c > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* Transparent variant */
+
+.e-283fbe2c > .holder.transparent { background: transparent; }
+
+/* Border variant */
+
+.e-283fbe2c > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-283fbe2c > .holder.border:focus-within { border-color: var(--ot-brand); }
+
+/* Size variants */
+
+.e-283fbe2c > .holder.size-s > .tags { padding: var(--ot-spacing-x) var(--ot-spacing-s); min-height: var(--ot-height-s); gap: 2px; }
+.e-283fbe2c > .holder.size-s > .tags > .tag { font-size: 10px; }
+.e-283fbe2c > .holder.size-s > .tags > .input { font-size: var(--ot-size-s); }
+.e-283fbe2c > .holder.size-m > .tags { padding: var(--ot-spacing-s) var(--ot-spacing-m); min-height: var(--ot-height-m); }
+.e-283fbe2c > .holder.size-l > .tags { padding: var(--ot-spacing-m) var(--ot-spacing-l); min-height: var(--ot-height-l); }
+.e-283fbe2c > .holder.size-l > .tags > .input { font-size: var(--ot-size-m); }

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

@@ -0,0 +1,166 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-tags',
+		icon: 'label',
+		name: 'Tags',
+		description: 'Tag input with free-text entry or predefined options.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'string'
+				}
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			placeholder: {
+				type: 'string',
+				value: 'Add tag...'
+			},
+			options: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'string'
+				}
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			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']
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.query = '';
+			this.open = false;
+
+			this.filtered = () =>
+			{
+				if (!this.options.length)
+				{
+					return [];
+				}
+
+				return this.options.filter(option =>
+					!this.value.includes(option) &&
+					(!this.query || option.toLowerCase().includes(this.query.toLowerCase()))
+				);
+			};
+
+			this.add = (tag) =>
+			{
+				tag = tag.trim();
+
+				if (!tag || this.disabled || this.value.includes(tag))
+				{
+					return;
+				}
+
+				this.value.push(tag);
+				this.query = '';
+				this.open = false;
+				this.Update();
+
+				if (this._change)
+				{
+					this._change({ value: this.value });
+				}
+			};
+
+			this.remove = (index) =>
+			{
+				if (this.disabled)
+				{
+					return;
+				}
+
+				this.value.splice(index, 1);
+				this.Update();
+
+				if (this._change)
+				{
+					this._change({ value: this.value });
+				}
+			};
+
+			this.input = ({ value }) =>
+			{
+				this.query = value;
+				this.open = this.query.length > 0 && this.filtered().length > 0;
+				this.Update();
+			};
+
+			this.keydown = ({ event }) =>
+			{
+				if (event.key === 'Enter')
+				{
+					event.preventDefault();
+
+					if (this.open && this.filtered().length)
+					{
+						this.add(this.filtered()[0]);
+					}
+					else if (this.query.trim())
+					{
+						this.add(this.query);
+					}
+				}
+
+				if (event.key === 'Backspace' && !this.query && this.value.length)
+				{
+					this.remove(this.value.length - 1);
+				}
+			};
+
+			this.select = (option) =>
+			{
+				this.add(option);
+			};
+
+			this.close = () =>
+			{
+				this.open = false;
+				this.Update();
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ')" ot-click-outside="close">
+					<input type="hidden" :name="name" :value="value.join(',')" />
+					<div class="tags">
+						<span ot-for="tag, index in value" class="tag">
+							<span class="text">{{ tag }}</span>
+							<i ot-if="!disabled" class="remove" ot-click="() => remove(index)">close</i>
+						</span>
+						<input
+							class="input"
+							type="text"
+							:value="query"
+							:placeholder="value.length ? '' : placeholder"
+							:disabled="disabled"
+							autocomplete="off"
+							ot-input="input"
+							ot-keydown="keydown"
+						/>
+					</div>
+					<div ot-if="open" class="dropdown">
+						<div ot-for="option in filtered()" class="option" ot-click="() => select(option)">{{ option }}</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,80 @@
+/* Root */
+
+.e-5973ffcd
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-5973ffcd > .holder
+{
+	display: flex;
+	width: 100%;
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+	background: transparent;
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+/* Textarea */
+
+.e-5973ffcd > .holder > textarea
+{
+	width: 100%;
+	background: transparent;
+	border: none;
+	outline: none;
+	resize: none;
+	color: var(--ot-text-1);
+	font-size: var(--ot-size-m);
+	font-family: inherit;
+	line-height: 1.6;
+	padding: 0;
+}
+
+.e-5973ffcd > .holder > textarea::placeholder
+{
+	color: var(--ot-text-2);
+}
+
+.e-5973ffcd > .holder > textarea:disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* 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.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 */
+
+.e-5973ffcd > .holder.transparent { background: transparent; padding: 0; }
+
+/* Border variant */
+
+.e-5973ffcd > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-5973ffcd > .holder.border:focus-within { border-color: var(--ot-brand); }
+
+/* Size variants */
+
+.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); }