@onetype/framework 2.0.41 → 2.0.43

package/addons/render/directives/front/items/self/node.js

@@ -0,0 +1,43 @@
+onetype.AddonReady('directives', function()
+{
+	directives.ItemAdd({
+		id: 'ot-node',
+		icon: 'code',
+		name: 'Node Mount',
+		description: 'Mount a DOM node into the element.',
+		trigger: 'node',
+		order: 50,
+		strict: false,
+		attributes: {
+			'ot-node': ['string', null, true]
+		},
+		code: function(data, item, compile, node, identifier)
+		{
+			const value = data['ot-node'].value;
+
+			if(!value)
+			{
+				return;
+			}
+
+			const result = onetype.Function(value, compile.data, false);
+
+			if(result instanceof Node)
+			{
+				let key = node.getAttribute('ot-key');
+
+				if(!key && node.hasAttribute(':ot-key'))
+				{
+					key = onetype.Function(node.getAttribute(':ot-key'), compile.data, false);
+				}
+
+				result.__otExternal = { name: 'node', key: key || value };
+				node.replaceWith(result);
+			}
+
+			node.removeAttribute('ot-node');
+			node.removeAttribute('ot-key');
+			node.removeAttribute(':ot-key');
+		}
+	});
+});

package/addons/render/elements/front/functions/runtime.js

@@ -0,0 +1,25 @@
+elements.Fn('runtime', function()
+{
+	this.methods.render = () =>
+	{
+		elements.Render('body', () =>
+		{
+			return document.body.outerHTML;
+		});
+
+		const render = elements.Render('body', window);
+		document.body.replaceChildren(...render.Element.children);
+	};
+
+	if(document.readyState === 'loading')
+	{
+		document.addEventListener('DOMContentLoaded', () =>
+		{
+			this.methods.render();
+		});
+	}
+	else
+	{
+		this.methods.render();
+	}
+});

package/addons/render/elements/front/items/self/cards/pricing/pricing.css

@@ -0,0 +1,174 @@
+/* Root */
+
+.e-7e10f2fa
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-7e10f2fa > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: var(--ot-spacing-l) var(--ot-spacing-m);
+	gap: var(--ot-spacing-l);
+	border: 1px solid transparent;
+}
+
+/* Highlighted */
+
+.e-7e10f2fa > .holder.highlighted
+{
+	border-top: 2px solid var(--ot-brand);
+}
+
+/* Header */
+
+.e-7e10f2fa > .holder > .header
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+}
+
+.e-7e10f2fa > .holder > .header > .badge
+{
+	display: inline-flex;
+	align-self: flex-start;
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+	border-radius: 100px;
+	background: var(--ot-brand-opacity);
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-brand);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.e-7e10f2fa > .holder > .header > .name
+{
+	font-size: var(--ot-size-l);
+	font-weight: 700;
+	color: var(--ot-text-1);
+	margin: 0;
+}
+
+.e-7e10f2fa > .holder > .header > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.5;
+	margin: 0;
+}
+
+.e-7e10f2fa > .holder > .header > .price
+{
+	display: flex;
+	align-items: baseline;
+	gap: var(--ot-spacing-x);
+	margin-top: var(--ot-spacing-x);
+}
+
+.e-7e10f2fa > .holder > .header > .price > .currency
+{
+	font-size: var(--ot-size-l);
+	font-weight: 700;
+	color: var(--ot-text-1);
+}
+
+.e-7e10f2fa > .holder > .header > .price > .amount
+{
+	font-size: 40px;
+	font-weight: 800;
+	color: var(--ot-text-1);
+	line-height: 1;
+}
+
+.e-7e10f2fa > .holder > .header > .price > .period
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+}
+
+.e-7e10f2fa > .holder > .header > .yearly
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}
+
+/* Features */
+
+.e-7e10f2fa > .holder > .features
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	flex: 1;
+	padding-top: var(--ot-spacing-l);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-7e10f2fa > .holder > .features > .feature
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+.e-7e10f2fa > .holder > .features > .feature > .icon
+{
+	font-size: var(--ot-size-l);
+	flex-shrink: 0;
+	color: var(--ot-green);
+}
+
+.e-7e10f2fa > .holder > .features > .feature > .text
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+}
+
+/* Disabled feature */
+
+.e-7e10f2fa > .holder > .features > .feature.disabled > .icon
+{
+	color: var(--ot-text-2);
+	opacity: 0.4;
+}
+
+.e-7e10f2fa > .holder > .features > .feature.disabled > .text
+{
+	color: var(--ot-text-2);
+	opacity: 0.4;
+}
+
+/* Action */
+
+.e-7e10f2fa > .holder > .action
+{
+	display: flex;
+	margin-top: auto;
+}
+
+/* Background variants */
+
+.e-7e10f2fa > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-7e10f2fa > .holder.bg-1 > .features { border-top-color: var(--ot-bg-1-border); }
+.e-7e10f2fa > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-7e10f2fa > .holder.bg-2 > .features { border-top-color: var(--ot-bg-2-border); }
+.e-7e10f2fa > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-7e10f2fa > .holder.bg-3 > .features { border-top-color: var(--ot-bg-3-border); }
+.e-7e10f2fa > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-7e10f2fa > .holder.bg-4 > .features { border-top-color: var(--ot-bg-4-border); }
+
+/* Border variant */
+
+.e-7e10f2fa > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-7e10f2fa > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-7e10f2fa > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-7e10f2fa > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-7e10f2fa > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+.e-7e10f2fa > .holder.highlighted.border { border-top: 2px solid var(--ot-brand); }

package/{lib/items/elements/sections → addons/render/elements/front/items/self/cards}/pricing/pricing.js

@@ -1,16 +1,16 @@
 onetype.AddonReady('elements', (elements) =>
 {
 	elements.ItemAdd({
-		id: 'sections-pricing',
+		id: 'cards-pricing',
 		icon: 'payments',
 		name: 'Pricing Card',
 		description: 'Pricing plan card with name, price, features list, and CTA button.',
-		category: 'Section',
+		category: 'Cards',
 		author: 'OneType',
 		config: {
 			name: {
 				type: 'string',
-				value: 'Plan'
+				value: ''
 			},
 			price: {
 				type: 'number',
@@ -34,21 +34,40 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			features: {
 				type: 'array',
-				value: []
-			},
-			highlighted: {
-				type: 'boolean',
-				value: false
+				value: [],
+				each: {
+					type: 'object',
+					config: {
+						text: { type: 'string', value: '' },
+						included: { type: 'boolean', value: true }
+					}
+				}
 			},
 			href: {
 				type: 'string',
 				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'highlighted']
+			},
+			_click: {
+				type: 'function'
 			}
 		},
 		render: function()
 		{
+			this.handle = ({ event }) =>
+			{
+				if (this._click)
+				{
+					this._click({ event });
+				}
+			};
+
 			return `
-				<div :class="'holder' + (highlighted ? ' highlighted' : '')">
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="header">
 						<span ot-if="badge" class="badge">{{ badge }}</span>
 						<h3 class="name">{{ name }}</h3>
@@ -56,7 +75,7 @@ onetype.AddonReady('elements', (elements) =>
 						<div class="price">
 							<span class="currency">$</span>
 							<span class="amount">{{ price }}</span>
-							<span class="period">{{ period }}</span>
+							<span ot-if="period" class="period">{{ period }}</span>
 						</div>
 						<span ot-if="yearly" class="yearly">{{ yearly }}</span>
 					</div>
@@ -67,7 +86,7 @@ onetype.AddonReady('elements', (elements) =>
 						</div>
 					</div>
 					<div ot-if="href" class="action">
-						<e-form-button text="Get Started" icon="arrow_forward" :href="href" :variant="highlighted ? ['brand', 'size-m', 'full'] : ['bg-2', 'border', 'size-m', 'full']"></e-form-button>
+						<e-form-button text="Get Started" icon="arrow_forward" :href="href" :variant="variant.includes('highlighted') ? ['brand', 'size-m', 'full'] : ['bg-2', 'border', 'size-m', 'full']" ot-click="handle"></e-form-button>
 					</div>
 				</div>
 			`;

package/addons/render/elements/front/items/self/core/builder/builder.css

@@ -0,0 +1,180 @@
+/* Root */
+
+.e-7d599f7d
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-7d599f7d > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+}
+
+/* Section */
+
+.e-7d599f7d > .holder > .section
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-m) 0;
+}
+
+.e-7d599f7d > .holder > .section + .section
+{
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-7d599f7d > .holder > .section:first-child
+{
+	padding-top: 0 !important;
+}
+
+.e-7d599f7d > .holder > .section:last-child
+{
+	padding-bottom: 0 !important;
+}
+
+/* Header */
+
+.e-7d599f7d > .holder > .section > .header
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+	user-select: none;
+}
+
+.e-7d599f7d > .holder > .section > .header > .title
+{
+	font-size: var(--ot-size-s);
+	font-weight: 700;
+	color: var(--ot-text-2);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.e-7d599f7d > .holder > .section > .header > .chevron
+{
+	font-size: 18px;
+	color: var(--ot-text-2);
+	opacity: 0.5;
+	transition: transform 0.2s ease;
+}
+
+.e-7d599f7d > .holder > .section > .header > .chevron.collapsed
+{
+	transform: rotate(-90deg);
+}
+
+/* Fields */
+
+.e-7d599f7d > .holder > .section > .fields
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-m);
+}
+
+/* Field — top */
+
+.e-7d599f7d > .holder > .section > .fields > .field.top
+{
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.e-7d599f7d > .holder > .section > .fields > .field.top > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+/* Field — left */
+
+.e-7d599f7d > .holder > .section > .fields > .field.left
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+}
+
+.e-7d599f7d > .holder > .section > .fields > .field.left > .info
+{
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	gap: 2px;
+	min-width: 0;
+}
+
+.e-7d599f7d > .holder > .section > .fields > .field.left > .control
+{
+	flex: 2;
+	min-width: 0;
+}
+
+/* Label */
+
+.e-7d599f7d > .holder .field > .label,
+.e-7d599f7d > .holder .field > .info > .label
+{
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+/* Description */
+
+.e-7d599f7d > .holder .field > .description,
+.e-7d599f7d > .holder .field > .info > .description
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.4;
+}
+
+/* Footer */
+
+.e-7d599f7d > .holder > .footer
+{
+	display: flex;
+	justify-content: flex-end;
+	padding-top: var(--ot-spacing-m);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+/* Background variants */
+
+.e-7d599f7d > .holder.bg-1 { background: var(--ot-bg-1); padding: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.bg-2 { background: var(--ot-bg-2); padding: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.bg-3 { background: var(--ot-bg-3); padding: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.bg-4 { background: var(--ot-bg-4); padding: var(--ot-spacing-m); }
+
+/* Border variant */
+
+.e-7d599f7d > .holder.border { border: 1px solid var(--ot-bg-2-border); padding: var(--ot-spacing-m); }
+
+/* Size variants */
+
+.e-7d599f7d > .holder.size-s > .section { gap: var(--ot-spacing-s); padding: var(--ot-spacing-s) 0; }
+.e-7d599f7d > .holder.size-s > .section > .fields { gap: var(--ot-spacing-s); }
+.e-7d599f7d > .holder.size-s > .footer { padding-top: var(--ot-spacing-s); }
+
+.e-7d599f7d > .holder.size-m > .section { gap: var(--ot-spacing-m); padding: var(--ot-spacing-m) 0; }
+.e-7d599f7d > .holder.size-m > .section > .fields { gap: var(--ot-spacing-m); }
+.e-7d599f7d > .holder.size-m > .footer { padding-top: var(--ot-spacing-m); }
+
+.e-7d599f7d > .holder.size-l > .section { gap: var(--ot-spacing-l); padding: var(--ot-spacing-l) 0; }
+.e-7d599f7d > .holder.size-l > .section > .fields { gap: var(--ot-spacing-l); }
+.e-7d599f7d > .holder.size-l > .footer { padding-top: var(--ot-spacing-l); }