@onetype/framework 2.0.40 → 2.0.42

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

@@ -1,16 +1,20 @@
+/* Root */
+
 .e-e204b7e
 {
 	display: flex;
 	width: 100%;
 }
 
+/* Holder */
+
 .e-e204b7e > .holder
 {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-	border: 1px solid var(--ot-bg-2-border);
-	border-radius: 8px;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
 	overflow: hidden;
 }
 
@@ -21,7 +25,7 @@
 	display: flex;
 	flex-direction: column;
 	cursor: pointer;
-	border-bottom: 1px solid var(--ot-bg-2-border);
+	border-bottom: 1px solid transparent;
 	transition: background 0.15s ease;
 }
 
@@ -30,16 +34,6 @@
 	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
@@ -48,7 +42,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--ot-spacing-s);
-	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	padding: var(--ot-spacing-m);
 }
 
 .e-e204b7e > .holder > .item > .question > .text
@@ -60,7 +54,7 @@
 
 .e-e204b7e > .holder > .item > .question > .icon
 {
-	font-size: 20px;
+	font-size: var(--ot-size-l);
 	color: var(--ot-text-2);
 	flex-shrink: 0;
 }
@@ -69,8 +63,36 @@
 
 .e-e204b7e > .holder > .item > .answer
 {
-	padding: 0 var(--ot-spacing-m) var(--ot-spacing-s);
+	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/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,7 +41,7 @@ onetype.AddonReady('elements', (elements) =>
 			};
 
 			return `
-				<div class="holder">
+				<div :class="'holder ' + variant.join(' ')">
 					<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>

package/lib/items/elements/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;
-}
+}

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

@@ -41,10 +41,15 @@ onetype.AddonReady('elements', (elements) =>
 
 			return `
 				<div :class="classes">
-					<i ot-if="icon" class="icon">{{ icon }}</i>
-					<h2 ot-if="variant !== 'page'" class="title">{{ title }}</h2>
-					<h1 ot-if="variant === 'page'" class="title">{{ title }}</h1>
-					<p ot-if="description" class="description">{{ description }}</p>
+					<div class="text">
+						<i ot-if="icon" class="icon">{{ icon }}</i>
+						<h2 ot-if="variant !== 'page'" class="title">{{ title }}</h2>
+						<h1 ot-if="variant === '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/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/lib/items/elements/global/markdown/markdown.js

@@ -219,14 +219,14 @@ onetype.AddonReady('elements', (elements) =>
 				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">${parse(this.content)}</div>`;
+			return `<div :class="'holder ' + variant.join(' ')">${parse(this.content)}</div>`;
 		}
 	});
 });

package/lib/items/elements/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/lib/items/elements/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(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>
+			`;
+		}
+	});
+});