@onetype/framework 2.0.22 → 2.0.25

package/lib/items/elements/form/slider/slider.js

@@ -0,0 +1,70 @@
+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>
+			`;
+		}
+	});
+});

package/lib/items/elements/form/textarea/textarea.css

@@ -0,0 +1,117 @@
+/* Base */
+.e-5973ffcd > .holder
+{
+    position: relative;
+    width: 100%;
+    padding: var(--ot-spacing-s) var(--ot-spacing-m);
+    border-radius: var(--ot-radius-m);
+    border: none;
+    background: transparent;
+    transition: all 0.2s;
+}
+
+.e-5973ffcd > .holder > textarea
+{
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    min-height: 100px;
+    resize: none;
+    color: var(--ot-text-1);
+    padding: 0;
+}
+
+.e-5973ffcd > .holder > textarea::placeholder
+{
+    color: var(--ot-text-2);
+}
+
+.e-5973ffcd > .holder > textarea:disabled
+{
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Variants - Background */
+.e-5973ffcd > .holder[variant*="transparent"]
+{
+    background: transparent;
+    padding: 0;
+}
+
+.e-5973ffcd > .holder[variant*="border"]
+{
+    background: transparent;
+}
+
+.e-5973ffcd > .holder[variant*="bg-1"]
+{
+    background: var(--ot-bg-1);
+}
+
+.e-5973ffcd > .holder[variant*="bg-1"]:hover
+{
+    background: var(--ot-bg-1-hover);
+}
+
+.e-5973ffcd > .holder[variant*="bg-2"]
+{
+    background: var(--ot-bg-2);
+}
+
+.e-5973ffcd > .holder[variant*="bg-2"]:hover
+{
+    background: var(--ot-bg-2-hover);
+}
+
+.e-5973ffcd > .holder[variant*="bg-3"]
+{
+    background: var(--ot-bg-3);
+}
+
+.e-5973ffcd > .holder[variant*="bg-3"]:hover
+{
+    background: var(--ot-bg-3-hover);
+}
+
+.e-5973ffcd > .holder[variant*="bg-4"]
+{
+    background: var(--ot-bg-4);
+}
+
+.e-5973ffcd > .holder[variant*="bg-4"]:hover
+{
+    background: var(--ot-bg-4-hover);
+}
+
+/* Variants - Border */
+.e-5973ffcd > .holder[variant*="border"]
+{
+    border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-5973ffcd > .holder[variant*="bg-1"][variant*="border"]
+{
+    border: 1px solid var(--ot-bg-1-border);
+}
+
+.e-5973ffcd > .holder[variant*="bg-2"][variant*="border"]
+{
+    border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-5973ffcd > .holder[variant*="bg-3"][variant*="border"]
+{
+    border: 1px solid var(--ot-bg-3-border);
+}
+
+.e-5973ffcd > .holder[variant*="bg-4"][variant*="border"]
+{
+    border: 1px solid var(--ot-bg-4-border);
+}
+
+.e-5973ffcd > .holder[variant*="border"]:focus-within
+{
+    border-color: var(--ot-brand);
+}

package/lib/items/elements/form/textarea/textarea.js

@@ -0,0 +1,70 @@
+onetype.AddonReady('elements', (elements) =>
+{
+    elements.ItemAdd({
+        id: 'form-textarea',
+        icon: 'notes',
+        name: 'Textarea',
+        description: 'Multi-line text input with auto-resize option, character counting, and variant support for different UI contexts.',
+        category: 'Form',
+        author: 'OneType',
+        config: {
+            value: {
+                type: 'string'
+            },
+            name: {
+                type: 'string'
+            },
+            placeholder: {
+                type: 'string'
+            },
+            rows: {
+                type: 'number',
+                value: 4
+            },
+            maxLength: {
+                type: 'number'
+            },
+            disabled: {
+                type: 'boolean'
+            },
+            readonly: {
+                type: 'boolean'
+            },
+            variant: {
+                type: 'array',
+                value: ['bg-2'],
+                options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
+            },
+            size: {
+                type: 'string',
+                value: 'm',
+                options: ['s', 'm', 'l']
+            },
+            onInput: {
+                type: 'function'
+            },
+            onChange: {
+                type: 'function'
+            }
+        },
+        render: function()
+        {
+            return `
+                <div class="holder" :variant="variant.join(' ')" :size="size">
+                    <textarea
+                        :value="value"
+                        :placeholder="placeholder"
+                        :name="name"
+                        :rows="rows"
+                        :maxlength="maxLength"
+                        :disabled="disabled"
+                        :readonly="readonly"
+                        autocomplete="off"
+                        ot-input="onInput"
+                        ot-change="onChange"
+                    ></textarea>
+                </div>
+            `;
+        }
+	});
+});

package/lib/items/elements/global/card/card.css

@@ -0,0 +1,57 @@
+.e-4a157f24
+{
+	display: flex;
+}
+
+.e-4a157f24 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-m);
+	border-radius: 8px;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	width: 100%;
+}
+
+.e-4a157f24 > .holder.link
+{
+	text-decoration: none;
+	transition: border-color 0.15s ease, background 0.15s ease;
+	cursor: pointer;
+}
+
+.e-4a157f24 > .holder.link:hover
+{
+	border-color: var(--ot-brand);
+	background: var(--ot-bg-3);
+}
+
+/* Icon */
+
+.e-4a157f24 > .holder > .icon
+{
+	font-size: 24px;
+	color: var(--ot-brand);
+}
+
+/* Title */
+
+.e-4a157f24 > .holder > .title
+{
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	color: var(--ot-text-1);
+	margin: 0;
+}
+
+/* Description */
+
+.e-4a157f24 > .holder > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.5;
+	margin: 0;
+}

package/lib/items/elements/global/card/card.js

@@ -0,0 +1,48 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-card',
+		icon: 'crop_square',
+		name: 'Card',
+		description: 'Reusable card with icon, title, description, and optional link.',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			icon: {
+				type: 'string',
+				value: ''
+			},
+			title: {
+				type: 'string',
+				value: ''
+			},
+			description: {
+				type: 'string',
+				value: ''
+			},
+			href: {
+				type: 'string',
+				value: ''
+			},
+			target: {
+				type: 'string',
+				value: ''
+			}
+		},
+		render: function()
+		{
+			const content = `
+				<i ot-if="icon" class="icon">{{ icon }}</i>
+				<h3 class="title">{{ title }}</h3>
+				<p ot-if="description" class="description">{{ description }}</p>
+			`;
+
+			if(this.href)
+			{
+				return `<a class="holder link" :href="href" :target="target">${content}</a>`;
+			}
+
+			return `<div class="holder">${content}</div>`;
+		}
+	});
+});

package/lib/items/elements/global/code/code.css

@@ -0,0 +1,66 @@
+.e-4a15b201
+{
+	display: flex;
+	width: 100%;
+}
+
+.e-4a15b201 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.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);
+	background: var(--ot-bg-3);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.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.2s ease;
+}
+
+.e-4a15b201 > .holder > .label > .copy:hover
+{
+	color: var(--ot-text-1);
+}
+
+.e-4a15b201 > .holder > .label > .copy > i
+{
+	font-size: 16px;
+}
+
+.e-4a15b201 > .holder > .content
+{
+	padding: var(--ot-spacing-m);
+	margin: 0;
+	font-size: 12px;
+	font-family: monospace;
+	color: var(--ot-text-2);
+	line-height: 1.6;
+	background: var(--ot-bg-2);
+	overflow-x: auto;
+	white-space: pre;
+	tab-size: 4;
+}

package/lib/items/elements/global/code/code.js

@@ -0,0 +1,40 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-code',
+		icon: 'code',
+		name: 'Code',
+		description: 'Code block with label header and preformatted content.',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string',
+				value: ''
+			}
+		},
+		render: function()
+		{
+			this.copied = false;
+
+			this.copy = (event, ctx) =>
+			{
+				const text = ctx.node.closest('.holder').querySelector('.content').textContent;
+				navigator.clipboard.writeText(text);
+				this.copied = true;
+				this.Update();
+				setTimeout(() => { this.copied = false; this.Update(); }, 2000);
+			};
+
+			return `
+				<div class="holder">
+					<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>
+					</div>
+					<pre class="content"><slot name="content"></slot></pre>
+				</div>
+			`;
+		}
+	});
+});

package/lib/items/elements/global/faq/faq.css

@@ -0,0 +1,76 @@
+.e-e204b7e
+{
+	display: flex;
+	width: 100%;
+}
+
+.e-e204b7e > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border: 1px solid var(--ot-bg-2-border);
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+/* Item */
+
+.e-e204b7e > .holder > .item
+{
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+	border-bottom: 1px solid var(--ot-bg-2-border);
+	transition: background 0.15s ease;
+}
+
+.e-e204b7e > .holder > .item:last-child
+{
+	border-bottom: none;
+}
+
+.e-e204b7e > .holder > .item:hover
+{
+	background: var(--ot-bg-2);
+}
+
+.e-e204b7e > .holder > .item.active
+{
+	background: var(--ot-bg-2);
+}
+
+/* Question */
+
+.e-e204b7e > .holder > .item > .question
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-s) 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: 20px;
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+/* Answer */
+
+.e-e204b7e > .holder > .item > .answer
+{
+	padding: 0 var(--ot-spacing-m) var(--ot-spacing-s);
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	line-height: 1.6;
+}

package/lib/items/elements/global/faq/faq.js

@@ -0,0 +1,44 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-faq',
+		icon: 'help',
+		name: 'FAQ',
+		description: 'Expandable FAQ accordion.',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			items: {
+				type: 'array',
+				value: []
+			}
+		},
+		render: function()
+		{
+			this.open = -1;
+
+			this.toggle = (index) =>
+			{
+				this.open = this.open === index ? -1 : index;
+				this.Update();
+			};
+
+			this.isOpen = (index) =>
+			{
+				return this.open === index;
+			};
+
+			return `
+				<div class="holder">
+					<div ot-for="item, index in items" :class="'item' + (isOpen(index) ? ' active' : '')" ot-click="toggle(index)">
+						<div class="question">
+							<span class="text">{{ item.question }}</span>
+							<i class="icon">{{ isOpen(index) ? 'remove' : 'add' }}</i>
+						</div>
+						<div ot-if="isOpen(index)" class="answer">{{ item.answer }}</div>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

package/lib/items/elements/global/heading/heading.css

@@ -0,0 +1,106 @@
+.e-49fb116e
+{
+	display: flex;
+	width: 100%;
+}
+
+.e-49fb116e > .holder
+{
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-x);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+	padding-bottom: var(--ot-spacing-m);
+}
+
+.e-49fb116e > .holder > .icon
+{
+	font-size: 36px;
+	color: var(--ot-text-2);
+}
+
+.e-49fb116e > .holder > .title
+{
+	font-size: 18px;
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+.e-49fb116e > .holder > .description
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+}
+
+/* Alignment */
+
+.e-49fb116e > .holder.center
+{
+	align-items: center;
+	text-align: center;
+}
+
+.e-49fb116e > .holder.right
+{
+	align-items: flex-end;
+	text-align: right;
+}
+
+/* Variants */
+
+.e-49fb116e > .holder.clean
+{
+	border-bottom: none;
+	padding-bottom: 0;
+}
+
+.e-49fb116e > .holder.page
+{
+	border-bottom: none;
+	padding-bottom: 0;
+}
+
+.e-49fb116e > .holder.page > .title
+{
+	font-size: 36px;
+	font-weight: 800;
+}
+
+/* Sizes */
+
+.e-49fb116e > .holder.size-s > .title
+{
+	font-size: 16px;
+}
+
+.e-49fb116e > .holder.size-s > .description
+{
+	font-size: var(--ot-size-s);
+}
+
+.e-49fb116e > .holder.size-m > .title
+{
+	font-size: 28px;
+	font-weight: 700;
+}
+
+.e-49fb116e > .holder.size-m > .description
+{
+	font-size: var(--ot-size-m);
+	line-height: 1.6;
+	max-width: 500px;
+}
+
+.e-49fb116e > .holder.size-l > .title
+{
+	font-size: 36px;
+	font-weight: 800;
+}
+
+.e-49fb116e > .holder.size-l > .description
+{
+	font-size: var(--ot-size-l);
+	line-height: 1.6;
+	max-width: 600px;
+}