@onetype/framework 2.0.41 → 2.0.43

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

@@ -0,0 +1,113 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-textarea',
+		icon: 'notes',
+		name: 'Textarea',
+		description: 'Multi-line text input with variant support.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'string',
+				value: ''
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			placeholder: {
+				type: 'string',
+				value: ''
+			},
+			rows: {
+				type: 'number',
+				value: 4
+			},
+			maxlength: {
+				type: 'number'
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			readonly: {
+				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']
+			},
+			_input: {
+				type: 'function'
+			},
+			_change: {
+				type: 'function'
+			},
+			_focus: {
+				type: 'function'
+			},
+			_blur: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.input = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._input)
+				{
+					this._input({ event, value });
+				}
+			};
+
+			this.change = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._change)
+				{
+					this._change({ event, value });
+				}
+			};
+
+			this.focus = ({ event, value }) =>
+			{
+				if (this._focus)
+				{
+					this._focus({ event, value });
+				}
+			};
+
+			this.blur = ({ event, value }) =>
+			{
+				if (this._blur)
+				{
+					this._blur({ event, value });
+				}
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<textarea
+						:placeholder="placeholder"
+						:name="name"
+						:rows="rows"
+						:maxlength="maxlength"
+						:disabled="disabled"
+						:readonly="readonly"
+						autocomplete="off"
+						ot-input="input"
+						ot-change="change"
+						ot-focus="focus"
+						ot-blur="blur"
+					>{{ value }}</textarea>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,105 @@
+/* Root */
+
+.e-180e0ca7
+{
+	display: flex;
+}
+
+/* Holder */
+
+.e-180e0ca7 > .holder
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	cursor: pointer;
+	user-select: none;
+}
+
+.e-180e0ca7 > .holder.disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Input */
+
+.e-180e0ca7 > .holder > input
+{
+	position: absolute;
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+/* Track */
+
+.e-180e0ca7 > .holder > .track
+{
+	position: relative;
+	display: flex;
+	align-items: center;
+	border-radius: 100px;
+	transition: background 0.15s ease;
+}
+
+/* Thumb */
+
+.e-180e0ca7 > .holder > .track > .thumb
+{
+	position: absolute;
+	border-radius: 50%;
+	background: var(--ot-text-2);
+	transition: transform 0.15s ease, background 0.15s ease;
+}
+
+/* Active */
+
+.e-180e0ca7 > .holder.active > .track > .thumb
+{
+	background: var(--ot-brand);
+}
+
+/* Label */
+
+.e-180e0ca7 > .holder > .label
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-1);
+}
+
+/* Background variants */
+
+.e-180e0ca7 > .holder.bg-1 > .track { background: var(--ot-bg-1); }
+.e-180e0ca7 > .holder.bg-1.active > .track { background: var(--ot-brand-opacity); }
+.e-180e0ca7 > .holder.bg-2 > .track { background: var(--ot-bg-2); }
+.e-180e0ca7 > .holder.bg-2.active > .track { background: var(--ot-brand-opacity); }
+.e-180e0ca7 > .holder.bg-3 > .track { background: var(--ot-bg-3); }
+.e-180e0ca7 > .holder.bg-3.active > .track { background: var(--ot-brand-opacity); }
+.e-180e0ca7 > .holder.bg-4 > .track { background: var(--ot-bg-4); }
+.e-180e0ca7 > .holder.bg-4.active > .track { background: var(--ot-brand-opacity); }
+
+/* Border */
+
+.e-180e0ca7 > .holder.border > .track { border: 1px solid var(--ot-bg-2-border); }
+
+/* Size small */
+
+.e-180e0ca7 > .holder.size-s > .track { width: 28px; height: 16px; }
+.e-180e0ca7 > .holder.size-s > .track > .thumb { width: 12px; height: 12px; left: 2px; }
+.e-180e0ca7 > .holder.size-s.active > .track > .thumb { transform: translateX(12px); }
+.e-180e0ca7 > .holder.size-s > .label { font-size: var(--ot-size-s); }
+
+/* Size medium */
+
+.e-180e0ca7 > .holder.size-m > .track { width: 36px; height: 20px; }
+.e-180e0ca7 > .holder.size-m > .track > .thumb { width: 16px; height: 16px; left: 2px; }
+.e-180e0ca7 > .holder.size-m.active > .track > .thumb { transform: translateX(16px); }
+.e-180e0ca7 > .holder.size-m > .label { font-size: var(--ot-size-m); }
+
+/* Size large */
+
+.e-180e0ca7 > .holder.size-l > .track { width: 44px; height: 24px; }
+.e-180e0ca7 > .holder.size-l > .track > .thumb { width: 20px; height: 20px; left: 2px; }
+.e-180e0ca7 > .holder.size-l.active > .track > .thumb { transform: translateX(20px); }
+.e-180e0ca7 > .holder.size-l > .label { font-size: var(--ot-size-m); }

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

@@ -0,0 +1,66 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-toggle',
+		icon: 'toggle_on',
+		name: 'Toggle',
+		description: 'On/off switch toggle.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string',
+				value: ''
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			value: {
+				type: 'boolean',
+				value: false
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-3', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.handle = ({ event }) =>
+			{
+				event.preventDefault();
+
+				if (this.disabled)
+				{
+					return;
+				}
+
+				this.value = !this.value;
+
+				if (this._change)
+				{
+					this._change({ event, value: this.value });
+				}
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ') + (value ? ' active' : '') + (disabled ? ' disabled' : '')" ot-click="handle">
+					<input type="hidden" :name="name" :value="value ? 'on' : 'off'" />
+					<span class="track">
+						<span class="thumb"></span>
+					</span>
+					<span ot-if="label" class="label">{{ label }}</span>
+				</div>
+			`;
+		}
+	});
+});

package/addons/render/elements/front/items/self/global/code/code.css

@@ -0,0 +1,97 @@
+/* Root */
+
+.e-4a15b201
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-4a15b201 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+}
+
+/* Label */
+
+.e-4a15b201 > .holder > .label
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	font-family: monospace;
+	color: var(--ot-text-2);
+	border-bottom: 1px solid transparent;
+}
+
+/* Copy */
+
+.e-4a15b201 > .holder > .label > .copy
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	background: none;
+	border: none;
+	color: var(--ot-text-2);
+	cursor: pointer;
+	transition: color 0.15s ease;
+}
+
+.e-4a15b201 > .holder > .label > .copy:hover
+{
+	color: var(--ot-text-1);
+}
+
+.e-4a15b201 > .holder > .label > .copy > i
+{
+	font-size: var(--ot-size-m);
+}
+
+/* Content */
+
+.e-4a15b201 > .holder > .content
+{
+	padding: var(--ot-spacing-m);
+	margin: 0;
+	font-size: var(--ot-size-s);
+	font-family: monospace;
+	color: var(--ot-text-2);
+	line-height: 1.6;
+	overflow-x: auto;
+	white-space: break-spaces;
+	tab-size: 4;
+}
+
+/* Background variants */
+
+.e-4a15b201 > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-4a15b201 > .holder.bg-1 > .label { background: var(--ot-bg-2); border-bottom-color: var(--ot-bg-1-border); }
+.e-4a15b201 > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-4a15b201 > .holder.bg-2 > .label { background: var(--ot-bg-3); border-bottom-color: var(--ot-bg-2-border); }
+.e-4a15b201 > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-4a15b201 > .holder.bg-3 > .label { background: var(--ot-bg-4); border-bottom-color: var(--ot-bg-3-border); }
+.e-4a15b201 > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+.e-4a15b201 > .holder.bg-4 > .label { border-bottom-color: var(--ot-bg-4-border); }
+
+/* Size variants */
+
+.e-4a15b201 > .holder.size-s > .label { padding: var(--ot-spacing-x) var(--ot-spacing-s); }
+.e-4a15b201 > .holder.size-s > .content { padding: var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-4a15b201 > .holder.size-m > .content { padding: var(--ot-spacing-m); font-size: var(--ot-size-s); }
+.e-4a15b201 > .holder.size-l > .label { padding: var(--ot-spacing-s) var(--ot-spacing-l); }
+.e-4a15b201 > .holder.size-l > .content { padding: var(--ot-spacing-l); font-size: var(--ot-size-m); }
+
+/* Border variant */
+
+.e-4a15b201 > .holder.border { border: 1px solid var(--ot-bg-2-border); }

package/{lib/items/elements → addons/render/elements/front/items/self}/global/code/code.js

@@ -15,6 +15,11 @@ onetype.AddonReady('elements', (elements) =>
 			source: {
 				type: 'string',
 				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
@@ -22,20 +27,19 @@ onetype.AddonReady('elements', (elements) =>
 			this.copied = false;
 			this.escaped = this.source ? this.source.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
 
-			this.copy = (event, ctx) =>
+			this.copy = ({ event }) =>
 			{
-				const text = ctx.node.closest('.holder').querySelector('.content').textContent;
+				const text = event.target.closest('.holder').querySelector('.content').textContent;
 				navigator.clipboard.writeText(text);
 				this.copied = true;
-				this.Update();
-				setTimeout(() => { this.copied = false; this.Update(); }, 2000);
+				setTimeout(() => { this.copied = false; }, 2000);
 			};
 
 			return `
-				<div class="holder">
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="label">
 						<span ot-if="label">{{ label }}</span>
-						<button class="copy" ot-click="copy"><i ot-if="!copied">content_copy</i><i ot-if="copied">check</i></button>
+						<button class="copy" ot-click="copy"><i>{{ copied ? 'check' : 'content_copy' }}</i></button>
 					</div>
 					<pre ot-if="escaped" class="content"><div ot-html="escaped"></div></pre>
 					<pre ot-if="!escaped" class="content"><slot name="content"></slot></pre>

package/addons/render/elements/front/items/self/global/faq/faq.css

@@ -0,0 +1,98 @@
+/* Root */
+
+.e-e204b7e
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-e204b7e > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+}
+
+/* Item */
+
+.e-e204b7e > .holder > .item
+{
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+	border-bottom: 1px solid transparent;
+	transition: background 0.15s ease;
+}
+
+.e-e204b7e > .holder > .item:last-child
+{
+	border-bottom: none;
+}
+
+/* Question */
+
+.e-e204b7e > .holder > .item > .question
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-m);
+}
+
+.e-e204b7e > .holder > .item > .question > .text
+{
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-e204b7e > .holder > .item > .question > .icon
+{
+	font-size: var(--ot-size-l);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+/* Answer */
+
+.e-e204b7e > .holder > .item > .answer
+{
+	padding: 0 var(--ot-spacing-m) var(--ot-spacing-m);
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	line-height: 1.6;
+}
+
+/* Background variants */
+
+.e-e204b7e > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-e204b7e > .holder.bg-1 > .item { border-bottom-color: var(--ot-bg-1-border); }
+.e-e204b7e > .holder.bg-1 > .item:hover, .e-e204b7e > .holder.bg-1 > .item.active { background: var(--ot-bg-1-hover); }
+.e-e204b7e > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-e204b7e > .holder.bg-2 > .item { border-bottom-color: var(--ot-bg-2-border); }
+.e-e204b7e > .holder.bg-2 > .item:hover, .e-e204b7e > .holder.bg-2 > .item.active { background: var(--ot-bg-2-hover); }
+.e-e204b7e > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-e204b7e > .holder.bg-3 > .item { border-bottom-color: var(--ot-bg-3-border); }
+.e-e204b7e > .holder.bg-3 > .item:hover, .e-e204b7e > .holder.bg-3 > .item.active { background: var(--ot-bg-3-hover); }
+.e-e204b7e > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+.e-e204b7e > .holder.bg-4 > .item { border-bottom-color: var(--ot-bg-4-border); }
+.e-e204b7e > .holder.bg-4 > .item:hover, .e-e204b7e > .holder.bg-4 > .item.active { background: var(--ot-bg-4-hover); }
+
+/* Size variants */
+
+.e-e204b7e > .holder.size-s > .item > .question { padding: var(--ot-spacing-s); }
+.e-e204b7e > .holder.size-s > .item > .answer { padding: 0 var(--ot-spacing-s) var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-e204b7e > .holder.size-m > .item > .question { padding: var(--ot-spacing-m); }
+.e-e204b7e > .holder.size-m > .item > .answer { padding: 0 var(--ot-spacing-m) var(--ot-spacing-m); }
+.e-e204b7e > .holder.size-l > .item > .question { padding: var(--ot-spacing-l); }
+.e-e204b7e > .holder.size-l > .item > .answer { padding: 0 var(--ot-spacing-l) var(--ot-spacing-l); }
+
+/* Border variant */
+
+.e-e204b7e > .holder.border { border: 1px solid var(--ot-bg-2-border); }

package/{lib/items/elements → addons/render/elements/front/items/self}/global/faq/faq.js

@@ -10,7 +10,19 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			items: {
 				type: 'array',
-				value: []
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						question: { type: 'string', value: '' },
+						answer: { type: 'string', value: '' }
+					}
+				}
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
@@ -29,9 +41,9 @@ onetype.AddonReady('elements', (elements) =>
 			};
 
 			return `
-				<div class="holder">
-					<div ot-for="item, index in items" :class="'item' + (isOpen(index) ? ' active' : '')" ot-click="toggle(index)">
-						<div class="question">
+				<div :class="'holder ' + variant.join(' ')">
+					<div ot-for="item, index in items" :class="'item' + (isOpen(index) ? ' active' : '')">
+						<div class="question" ot-click="toggle(index)">
 							<span class="text">{{ item.question }}</span>
 							<i class="icon">{{ isOpen(index) ? 'remove' : 'add' }}</i>
 						</div>

package/{lib/items/elements → addons/render/elements/front/items/self}/global/heading/heading.css

@@ -8,40 +8,63 @@
 {
 	width: 100%;
 	display: flex;
-	flex-direction: column;
-	gap: var(--ot-spacing-x);
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ot-spacing-m);
 	border-bottom: 1px solid var(--ot-bg-2-border);
 	padding-bottom: var(--ot-spacing-m);
 }
 
-.e-49fb116e > .holder > .icon
+.e-49fb116e > .holder > .text
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-x);
+}
+
+.e-49fb116e > .holder > .text > .icon
 {
 	font-size: 36px;
 	color: var(--ot-text-2);
 }
 
-.e-49fb116e > .holder > .title
+.e-49fb116e > .holder > .text > .title
 {
 	font-size: 18px;
 	font-weight: 600;
 	color: var(--ot-text-1);
 }
 
-.e-49fb116e > .holder > .description
+.e-49fb116e > .holder > .text > .description
 {
 	font-size: var(--ot-size-m);
 	color: var(--ot-text-2);
 }
 
+.e-49fb116e > .holder > .right
+{
+	flex-shrink: 0;
+}
+
+.e-49fb116e > .holder > .right:empty
+{
+	display: none;
+}
+
 /* Alignment */
 
 .e-49fb116e > .holder.center
+{
+	justify-content: center;
+}
+
+.e-49fb116e > .holder.center > .text
 {
 	align-items: center;
 	text-align: center;
 }
 
-.e-49fb116e > .holder.right
+.e-49fb116e > .holder.right > .text
 {
 	align-items: flex-end;
 	text-align: right;
@@ -61,7 +84,7 @@
 	padding-bottom: 0;
 }
 
-.e-49fb116e > .holder.page > .title
+.e-49fb116e > .holder.page > .text > .title
 {
 	font-size: 36px;
 	font-weight: 800;
@@ -69,38 +92,38 @@
 
 /* Sizes */
 
-.e-49fb116e > .holder.size-s > .title
+.e-49fb116e > .holder.size-s > .text > .title
 {
 	font-size: 16px;
 }
 
-.e-49fb116e > .holder.size-s > .description
+.e-49fb116e > .holder.size-s > .text > .description
 {
 	font-size: var(--ot-size-s);
 }
 
-.e-49fb116e > .holder.size-m > .title
+.e-49fb116e > .holder.size-m > .text > .title
 {
 	font-size: 25px;
 	font-weight: 700;
 }
 
-.e-49fb116e > .holder.size-m > .description
+.e-49fb116e > .holder.size-m > .text > .description
 {
 	font-size: var(--ot-size-m);
 	line-height: 1.6;
 	max-width: 500px;
 }
 
-.e-49fb116e > .holder.size-l > .title
+.e-49fb116e > .holder.size-l > .text > .title
 {
 	font-size: 36px;
 	font-weight: 800;
 }
 
-.e-49fb116e > .holder.size-l > .description
+.e-49fb116e > .holder.size-l > .text > .description
 {
 	font-size: var(--ot-size-l);
 	line-height: 1.6;
 	max-width: 600px;
-}
+}