@onetype/framework 2.0.41 → 2.0.43

package/addons/render/elements/front/items/self/global/heading/heading.js

@@ -0,0 +1,46 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-heading',
+		icon: 'title',
+		name: 'Heading',
+		description: 'Page heading with title and description.',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			icon: {
+				type: 'string',
+				value: ''
+			},
+			title: {
+				type: 'string',
+				value: 'Title'
+			},
+			description: {
+				type: 'string',
+				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: ['left', 'size-m'],
+				options: ['left', 'center', 'right', 'page', 'clean', 'size-s', 'size-m', 'size-l']
+			}
+		},
+		render: function()
+		{
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<div class="text">
+						<i ot-if="icon" class="icon">{{ icon }}</i>
+						<h2 ot-if="!variant.includes('page')" class="title">{{ title }}</h2>
+						<h1 ot-if="variant.includes('page')" class="title">{{ title }}</h1>
+						<p ot-if="description" class="description">{{ description }}</p>
+					</div>
+					<div class="right">
+						<slot name="right"></slot>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -1,9 +1,13 @@
+/* Root */
+
 .e-4696d703
 {
 	display: flex;
 	width: 100%;
 }
 
+/* Holder */
+
 .e-4696d703 > .holder
 {
 	display: flex;
@@ -12,13 +16,16 @@
 	width: 100%;
 }
 
-.e-4696d703 > .holder[variant="bg-2"]
-{
-	background: var(--ot-bg-2);
-	border: 1px solid var(--ot-bg-2-border);
-	border-radius: var(--ot-radius-m);
-	padding: var(--ot-spacing-m);
-}
+/* Background variants */
+
+.e-4696d703 > .holder.bg-1 { background: var(--ot-bg-1); border: 1px solid var(--ot-bg-1-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-4696d703 > .holder.bg-2 { background: var(--ot-bg-2); border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-4696d703 > .holder.bg-3 { background: var(--ot-bg-3); border: 1px solid var(--ot-bg-3-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-4696d703 > .holder.bg-4 { background: var(--ot-bg-4); border: 1px solid var(--ot-bg-4-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+
+/* Border variant */
+
+.e-4696d703 > .holder.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
 
 /* Line wrapper */
 
@@ -119,7 +126,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--ot-spacing-x);
-	padding-left: 24px;
+	padding-left: var(--ot-spacing-l);
 	margin: 0;
 }
 
@@ -152,7 +159,7 @@
 	border-left: 3px solid var(--ot-brand);
 	padding: var(--ot-spacing-s) var(--ot-spacing-m);
 	background: var(--ot-bg-2);
-	border-radius: 0 8px 8px 0;
+	border-radius: 0 var(--ot-radius-m) var(--ot-radius-m) 0;
 	margin: 0;
 	font-size: var(--ot-size-m);
 	color: var(--ot-text-2);
@@ -164,8 +171,8 @@
 
 .e-4696d703 > .holder code.inline
 {
-	padding: 2px 7px;
-	border-radius: 4px;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border-radius: var(--ot-radius-s);
 	background: var(--ot-bg-2);
 	border: 1px solid var(--ot-bg-2-border);
 	font-family: 'JetBrains Mono', 'Fira Code', monospace;
@@ -180,7 +187,7 @@
 	position: relative;
 	background: var(--ot-bg-2);
 	border: 1px solid var(--ot-bg-2-border);
-	border-radius: 8px;
+	border-radius: var(--ot-radius-m);
 	padding: var(--ot-spacing-m);
 	overflow-x: auto;
 	margin: 0;
@@ -189,7 +196,7 @@
 .e-4696d703 > .holder .codeblock > code
 {
 	font-family: 'JetBrains Mono', 'Fira Code', monospace;
-	font-size: 13px;
+	font-size: var(--ot-size-m);
 	line-height: 1.7;
 	color: var(--ot-text-1);
 	tab-size: 4;
@@ -201,7 +208,7 @@
 {
 	width: 100%;
 	border-collapse: collapse;
-	border-radius: 8px;
+	border-radius: var(--ot-radius-m);
 	background-color: var(--ot-bg-2);
 	overflow: hidden;
 }
@@ -251,6 +258,6 @@
 {
 	max-width: 100%;
 	height: auto;
-	border-radius: 8px;
+	border-radius: var(--ot-radius-m);
 	border: 1px solid var(--ot-bg-2-border);
 }

package/addons/render/elements/front/items/self/global/markdown/markdown.js

@@ -0,0 +1,26 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-markdown',
+		icon: 'article',
+		name: 'Markdown',
+		description: 'Renders markdown content as styled HTML.',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			content: {
+				type: 'string',
+				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
+			}
+		},
+		render: function()
+		{
+			return `<div :class="'holder ' + variant.join(' ')">${onetype.Markdown(this.content)}</div>`;
+		}
+	});
+});

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

@@ -0,0 +1,173 @@
+/* Root */
+
+.e-4a1a1973
+{
+	display: flex;
+	width: 100%;
+}
+
+.e-4a1a1973 .e-4a1a1973
+{
+	flex-direction: column;
+	padding-left: var(--ot-spacing-m);
+}
+
+/* Holder */
+
+.e-4a1a1973 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: var(--ot-spacing-x) 0;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+}
+
+/* Entry */
+
+.e-4a1a1973 .entry
+{
+	display: flex;
+	flex-direction: column;
+}
+
+/* Content (clickable row) */
+
+.e-4a1a1973 .entry > .content
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	padding: 0 var(--ot-spacing-m);
+	padding-left: calc(var(--ot-spacing-m) + var(--ot-spacing-m) * var(--depth, 0));
+	height: var(--ot-height-m);
+	cursor: pointer;
+	user-select: none;
+	transition: background 0.1s ease;
+}
+
+.e-4a1a1973 .entry > .content:hover
+{
+	background: var(--ot-bg-1-hover);
+}
+
+.e-4a1a1973 .entry.disabled > .content
+{
+	opacity: 0.4;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+/* Icon */
+
+.e-4a1a1973 .entry > .content > .icon
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	width: 20px;
+	text-align: center;
+	flex-shrink: 0;
+}
+
+/* Label */
+
+.e-4a1a1973 .entry > .content > .label
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-1);
+	flex: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Shortcut */
+
+.e-4a1a1973 .entry > .content > .shortcut
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	opacity: 0.6;
+	flex-shrink: 0;
+	margin-left: var(--ot-spacing-l);
+	letter-spacing: 0.02em;
+}
+
+/* Arrow */
+
+.e-4a1a1973 .entry > .content > .arrow
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+	margin-left: auto;
+	transition: color 0.15s ease;
+}
+
+.e-4a1a1973 .entry.open > .content > .arrow
+{
+	color: var(--ot-text-1);
+}
+
+/* Separator */
+
+.e-4a1a1973 .entry > .separator
+{
+	height: 1px;
+	margin: var(--ot-spacing-x) var(--ot-spacing-m);
+	background: var(--ot-bg-2-border);
+}
+
+/* Header */
+
+.e-4a1a1973 .entry > .header
+{
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-text-2);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m) var(--ot-spacing-x);
+	user-select: none;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+/* Background variants */
+
+.e-4a1a1973 > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-4a1a1973 > .holder.bg-1 .entry > .content:hover { background: var(--ot-bg-1-hover); }
+.e-4a1a1973 > .holder.bg-1 .entry > .separator { background: var(--ot-bg-1-border); }
+
+.e-4a1a1973 > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-4a1a1973 > .holder.bg-2 .entry > .content:hover { background: var(--ot-bg-2-hover); }
+.e-4a1a1973 > .holder.bg-2 .entry > .separator { background: var(--ot-bg-2-border); }
+
+.e-4a1a1973 > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-4a1a1973 > .holder.bg-3 .entry > .content:hover { background: var(--ot-bg-3-hover); }
+.e-4a1a1973 > .holder.bg-3 .entry > .separator { background: var(--ot-bg-3-border); }
+
+.e-4a1a1973 > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+.e-4a1a1973 > .holder.bg-4 .entry > .content:hover { background: var(--ot-bg-4-hover); }
+.e-4a1a1973 > .holder.bg-4 .entry > .separator { background: var(--ot-bg-4-border); }
+
+/* Border variant */
+
+.e-4a1a1973 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+
+/* Size variants */
+
+.e-4a1a1973 > .holder.size-s .entry > .content { height: var(--ot-height-s); padding: 0 var(--ot-spacing-s); gap: var(--ot-spacing-x); }
+.e-4a1a1973 > .holder.size-s .entry > .content > .icon { font-size: var(--ot-size-s); width: 16px; }
+.e-4a1a1973 > .holder.size-s .entry > .content > .label { font-size: var(--ot-size-s); }
+.e-4a1a1973 > .holder.size-s .entry > .content > .shortcut { font-size: 10px; }
+.e-4a1a1973 > .holder.size-s .entry > .header { font-size: 10px; padding: var(--ot-spacing-x) var(--ot-spacing-s) 2px; }
+.e-4a1a1973 > .holder.size-s .entry > .separator { margin: 2px var(--ot-spacing-s); }
+
+.e-4a1a1973 > .holder.size-m .entry > .content { height: var(--ot-height-m); }
+
+.e-4a1a1973 > .holder.size-l .entry > .content { height: var(--ot-height-l); padding: 0 var(--ot-spacing-l); gap: var(--ot-spacing-m); }
+.e-4a1a1973 > .holder.size-l .entry > .content > .icon { font-size: var(--ot-size-l); width: 28px; }
+.e-4a1a1973 > .holder.size-l .entry > .content > .label { font-size: var(--ot-size-m); }
+.e-4a1a1973 > .holder.size-l .entry > .header { font-size: var(--ot-size-s); padding: var(--ot-spacing-m) var(--ot-spacing-l) var(--ot-spacing-x); }
+.e-4a1a1973 > .holder.size-l .entry > .separator { margin: var(--ot-spacing-x) var(--ot-spacing-l); }

package/addons/render/elements/front/items/self/global/menu/menu.js

@@ -0,0 +1,103 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'global-menu',
+		icon: 'menu',
+		name: 'Menu',
+		description: 'Multi-level menu with icons, shortcuts, headers and separators.',
+		category: 'Global',
+		author: 'OneType',
+		config: {
+			items: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						type: { type: 'string', value: 'action', options: ['action', 'separator', 'header'] },
+						icon: { type: 'string', value: '' },
+						label: { type: 'string', value: '' },
+						value: { type: 'string', value: '' },
+						shortcut: { type: 'string', value: '' },
+						disabled: { type: 'boolean', value: false },
+						items: { type: 'array', value: [] }
+					}
+				}
+			},
+			depth: {
+				type: 'number',
+				value: 0
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_select: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.opened = {};
+
+			this.toggle = (index) =>
+			{
+				this.opened[index] = !this.opened[index];
+				this.Update();
+			};
+
+			this.isOpen = (index) =>
+			{
+				return !!this.opened[index];
+			};
+
+			this.select = (item) =>
+			{
+				if (item.disabled)
+				{
+					return;
+				}
+
+				if (this._select)
+				{
+					this._select({ value: item.value || item.label });
+				}
+			};
+
+			this.hasChildren = (item) =>
+			{
+				return item.items && item.items.length > 0;
+			};
+
+			const items = `
+				<div ot-for="item, index in items" :class="'entry ' + item.type + (item.disabled ? ' disabled' : '') + (hasChildren(item) ? ' parent' : '') + (isOpen(index) ? ' open' : '')">
+					<div ot-if="item.type === 'separator'" class="separator"></div>
+					<div ot-if="item.type === 'header'" class="header">{{ item.label }}</div>
+					<div ot-if="item.type === 'action' && hasChildren(item)" class="content" ot-click="toggle(index)">
+						<i ot-if="item.icon" class="icon">{{ item.icon }}</i>
+						<span class="label">{{ item.label }}</span>
+						<i class="arrow">{{ isOpen(index) ? 'expand_less' : 'expand_more' }}</i>
+					</div>
+					<div ot-if="item.type === 'action' && !hasChildren(item)" class="content" ot-click="select(item)">
+						<i ot-if="item.icon" class="icon">{{ item.icon }}</i>
+						<span class="label">{{ item.label }}</span>
+						<span ot-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
+					</div>
+					<e-global-menu ot-if="hasChildren(item) && isOpen(index)" :items="item.items" :depth="depth + 1" :_select="_select" :style="'--depth: ' + (depth + 1)"></e-global-menu>
+				</div>
+			`;
+
+			if (this.depth > 0)
+			{
+				return items;
+			}
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					${items}
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,57 @@
+/* Root */
+
+.e-2e3de5ec
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-2e3de5ec > .holder
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	border-radius: var(--ot-radius-m);
+	font-size: var(--ot-size-s);
+	border: 1px solid transparent;
+}
+
+/* Icon */
+
+.e-2e3de5ec > .holder > .icon
+{
+	font-size: var(--ot-size-m);
+	flex-shrink: 0;
+}
+
+/* Text */
+
+.e-2e3de5ec > .holder > .text
+{
+	line-height: 1.4;
+}
+
+/* Color variants */
+
+.e-2e3de5ec > .holder.red { background: var(--ot-red-opacity); border-color: var(--ot-red-border); color: var(--ot-red); }
+.e-2e3de5ec > .holder.green { background: var(--ot-green-opacity); border-color: var(--ot-green-border); color: var(--ot-green); }
+.e-2e3de5ec > .holder.blue { background: var(--ot-blue-opacity); border-color: var(--ot-blue-border); color: var(--ot-blue); }
+.e-2e3de5ec > .holder.orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-border); color: var(--ot-orange); }
+.e-2e3de5ec > .holder.brand { background: var(--ot-brand-opacity); border-color: var(--ot-brand-border); color: var(--ot-brand); }
+
+/* Background variants */
+
+.e-2e3de5ec > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); color: var(--ot-text-2); }
+.e-2e3de5ec > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); color: var(--ot-text-2); }
+.e-2e3de5ec > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); color: var(--ot-text-2); }
+.e-2e3de5ec > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); color: var(--ot-text-2); }
+
+/* Size variants */
+
+.e-2e3de5ec > .holder.size-s { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-2e3de5ec > .holder.size-m { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-m); }
+.e-2e3de5ec > .holder.size-l { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }

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

@@ -17,15 +17,15 @@ onetype.AddonReady('elements', (elements) =>
 				value: ''
 			},
 			variant: {
-				type: 'string',
-				value: 'red',
-				options: ['red', 'green', 'blue', 'orange', 'brand', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
+				type: 'array',
+				value: ['red'],
+				options: ['red', 'green', 'blue', 'orange', 'brand', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant">
+				<div :class="'holder ' + variant.join(' ')">
 					<i ot-if="icon" class="icon">{{ icon }}</i>
 					<span class="text">{{ text }}</span>
 				</div>

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

@@ -0,0 +1,96 @@
+/* Root */
+
+.e-29179902
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-29179902 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+/* Param */
+
+.e-29179902 > .holder > .param
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-s) 0;
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.e-29179902 > .holder > .param:last-child
+{
+	border-bottom: none;
+}
+
+/* Left */
+
+.e-29179902 > .holder > .param > .left
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+/* Name */
+
+.e-29179902 > .holder > .param > .left > .name
+{
+	font-size: var(--ot-size-m);
+	font-weight: 600;
+	font-family: monospace;
+	color: var(--ot-text-1);
+}
+
+/* Type badge */
+
+.e-29179902 > .holder > .param > .left > .type
+{
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border-radius: var(--ot-radius-s);
+	background: var(--ot-blue-opacity);
+	color: var(--ot-blue);
+}
+
+/* Required badge */
+
+.e-29179902 > .holder > .param > .left > .required
+{
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border-radius: var(--ot-radius-s);
+	background: var(--ot-orange-opacity);
+	color: var(--ot-orange);
+}
+
+/* Description */
+
+.e-29179902 > .holder > .param > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	text-align: right;
+}
+
+/* Background variants */
+
+.e-29179902 > .holder.bg-1 { background: var(--ot-bg-1); border: 1px solid var(--ot-bg-1-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-29179902 > .holder.bg-2 { background: var(--ot-bg-2); border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-29179902 > .holder.bg-3 { background: var(--ot-bg-3); border: 1px solid var(--ot-bg-3-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+.e-29179902 > .holder.bg-4 { background: var(--ot-bg-4); border: 1px solid var(--ot-bg-4-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
+
+/* Border variant */
+
+.e-29179902 > .holder.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }

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

@@ -10,25 +10,34 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			items: {
 				type: 'array',
-				value: []
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						name: { type: 'string', value: '' },
+						type: { type: 'string', value: '' },
+						required: { type: 'boolean', value: false },
+						description: { type: 'string', value: '' }
+					}
+				}
 			},
 			variant: {
-				type: 'string',
-				value: '',
-				options: ['', 'bg-2']
+				type: 'array',
+				value: [],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
 			}
 		},
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant">
+				<div :class="'holder ' + variant.join(' ')">
 					<div ot-for="item in items" class="param">
 						<div class="left">
 							<span class="name">{{ item.name }}</span>
 							<span class="type">{{ item.type }}</span>
 							<span ot-if="item.required" class="required">required</span>
 						</div>
-						<span ot-if="item.description" class="desc">{{ item.description }}</span>
+						<span ot-if="item.description" class="description">{{ item.description }}</span>
 					</div>
 				</div>
 			`;