divhunt 2.0.0

package/addons/render/elements/front/items/self/data/plans/plans.css

@@ -0,0 +1,231 @@
+/* Base */
+.e-693ada14 > .holder
+{
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: var(--dh-spacing-l);
+}
+
+.e-693ada14 > .holder > .plan
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-l);
+	padding: var(--dh-spacing-l);
+	background: var(--dh-bg-2);
+	border-radius: var(--dh-radius-l);
+	position: relative;
+	transition: all 0.2s ease;
+}
+
+.e-693ada14 > .holder > .plan:hover
+{
+	transform: translateY(-4px);
+}
+
+.e-693ada14 > .holder > .plan > .badge
+{
+	position: absolute;
+	top: var(--dh-spacing-m);
+	right: var(--dh-spacing-m);
+	padding: var(--dh-spacing-x) var(--dh-spacing-s);
+	background: var(--dh-brand);
+	color: white;
+	font-size: 11px;
+	font-weight: 600;
+	border-radius: var(--dh-radius-s);
+	text-transform: uppercase;
+}
+
+.e-693ada14 > .holder > .plan > .header
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+}
+
+.e-693ada14 > .holder > .plan > .header > .name
+{
+	font-size: var(--dh-size-l);
+	font-weight: 600;
+	color: var(--dh-text-1);
+	margin: 0;
+}
+
+.e-693ada14 > .holder > .plan > .header > .description
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-693ada14 > .holder > .plan > .pricing
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+}
+
+.e-693ada14 > .holder > .plan > .pricing > .price-wrapper
+{
+	display: flex;
+	align-items: baseline;
+	gap: var(--dh-spacing-s);
+}
+
+.e-693ada14 > .holder > .plan > .pricing > .price-wrapper > .old-price
+{
+	font-size: 24px;
+	font-weight: 600;
+	color: var(--dh-text-2);
+	text-decoration: line-through;
+	opacity: 0.6;
+}
+
+.e-693ada14 > .holder > .plan > .pricing > .price-wrapper > .price
+{
+	font-size: 48px;
+	font-weight: 700;
+	color: var(--dh-text-1);
+}
+
+.e-693ada14 > .holder > .plan > .pricing > .price-wrapper > .period
+{
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-2);
+}
+
+.e-693ada14 > .holder > .plan > .pricing > .discount
+{
+	font-size: var(--dh-size-s);
+	font-weight: 600;
+	color: var(--dh-green);
+	padding: var(--dh-spacing-x) var(--dh-spacing-s);
+	background: var(--dh-green);
+	background: rgba(76, 175, 80, 0.15);
+	border-radius: var(--dh-radius-s);
+	width: fit-content;
+}
+
+.e-693ada14 > .holder > .plan > .features
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-m);
+	flex: 1;
+}
+
+.e-693ada14 > .holder > .plan > .features > .feature
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-693ada14 > .holder > .plan > .features > .feature > .icon
+{
+	font-size: 20px;
+	flex-shrink: 0;
+}
+
+.e-693ada14 > .holder > .plan > .features > .feature[included="true"] > .icon
+{
+	color: var(--dh-green);
+}
+
+.e-693ada14 > .holder > .plan > .features > .feature[included="false"] > .icon
+{
+	color: var(--dh-text-2);
+	opacity: 0.5;
+}
+
+.e-693ada14 > .holder > .plan > .features > .feature > .text
+{
+	color: var(--dh-text-1);
+	font-size: var(--dh-size-m);
+}
+
+.e-693ada14 > .holder > .plan > .features > .feature[included="false"] > .text
+{
+	color: var(--dh-text-2);
+	opacity: 0.7;
+}
+
+.e-693ada14 > .holder > .plan[highlighted="true"]
+{
+	border: 2px solid var(--dh-brand);
+	box-shadow: 0 0 0 4px var(--dh-brand-opacity);
+}
+
+/* Variants - Border */
+.e-693ada14 > .holder[variant*="border"] > .plan
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+/* Variants - Background */
+.e-693ada14 > .holder[variant*="bg-1"] > .plan
+{
+	background: var(--dh-bg-1);
+	border: 1px solid var(--dh-bg-1-border);
+}
+
+.e-693ada14 > .holder[variant*="bg-2"] > .plan
+{
+	background: var(--dh-bg-2);
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-693ada14 > .holder[variant*="bg-3"] > .plan
+{
+	background: var(--dh-bg-3);
+	border: 1px solid var(--dh-bg-3-border);
+}
+
+/* Variants - Sizes */
+.e-693ada14 > .holder[variant*="size-s"] > .plan
+{
+	padding: var(--dh-spacing-m);
+	gap: var(--dh-spacing-m);
+}
+
+.e-693ada14 > .holder[variant*="size-s"] > .plan > .pricing > .price-wrapper > .old-price
+{
+	font-size: 18px;
+}
+
+.e-693ada14 > .holder[variant*="size-s"] > .plan > .pricing > .price-wrapper > .price
+{
+	font-size: 36px;
+}
+
+.e-693ada14 > .holder[variant*="size-m"] > .plan
+{
+	padding: var(--dh-spacing-l);
+	gap: var(--dh-spacing-l);
+}
+
+.e-693ada14 > .holder[variant*="size-m"] > .plan > .pricing > .price-wrapper > .old-price
+{
+	font-size: 24px;
+}
+
+.e-693ada14 > .holder[variant*="size-m"] > .plan > .pricing > .price-wrapper > .price
+{
+	font-size: 48px;
+}
+
+.e-693ada14 > .holder[variant*="size-l"] > .plan
+{
+	padding: calc(var(--dh-spacing-l) * 1.5);
+	gap: calc(var(--dh-spacing-l) * 1.5);
+}
+
+.e-693ada14 > .holder[variant*="size-l"] > .plan > .pricing > .price-wrapper > .old-price
+{
+	font-size: 32px;
+}
+
+.e-693ada14 > .holder[variant*="size-l"] > .plan > .pricing > .price-wrapper > .price
+{
+	font-size: 64px;
+}

package/addons/render/elements/front/items/self/data/plans/plans.js

@@ -0,0 +1,104 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'plans',
+	icon: 'credit_card',
+	name: 'Plans',
+	description: 'Pricing plan cards with features and call-to-action.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		plans: {
+			type: 'array',
+			value: [
+				{
+					name: 'Starter',
+					price: '$9',
+					oldPrice: '',
+					period: 'month',
+					description: 'Perfect for individuals',
+					discount: '',
+					features: [
+						{ text: '5 Projects', included: true },
+						{ text: '10GB Storage', included: true },
+						{ text: 'Basic Support', included: true },
+						{ text: 'Advanced Analytics', included: false },
+						{ text: 'Custom Domain', included: false }
+					],
+					button: 'Get Started',
+					highlighted: false
+				},
+				{
+					name: 'Pro',
+					price: '$29',
+					oldPrice: '$36',
+					period: 'month',
+					description: 'Best for professionals',
+					discount: 'Save 20%',
+					features: [
+						{ text: 'Unlimited Projects', included: true },
+						{ text: '100GB Storage', included: true },
+						{ text: 'Priority Support', included: true },
+						{ text: 'Advanced Analytics', included: true },
+						{ text: 'Custom Domain', included: false }
+					],
+					button: 'Get Started',
+					highlighted: true
+				},
+				{
+					name: 'Enterprise',
+					price: '$99',
+					oldPrice: '',
+					period: 'month',
+					description: 'For large teams',
+					discount: '',
+					features: [
+						{ text: 'Unlimited Projects', included: true },
+						{ text: 'Unlimited Storage', included: true },
+						{ text: '24/7 Support', included: true },
+						{ text: 'Advanced Analytics', included: true },
+						{ text: 'Custom Domain', included: true }
+					],
+					button: 'Contact Sales',
+					highlighted: false
+				}
+			]
+		},
+		variant: {
+			type: 'array',
+			value: ['border'],
+			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'size-s', 'size-m', 'size-l']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-for="plan in plans" class="plan" :highlighted="plan.highlighted">
+					<div dh-if="plan.highlighted" class="badge">Popular</div>
+					<div class="header">
+						<h3 class="name">{{ plan.name }}</h3>
+						<div class="description">{{ plan.description }}</div>
+					</div>
+					<div class="pricing">
+						<div class="price-wrapper">
+							<span dh-if="plan.oldPrice" class="old-price">{{ plan.oldPrice }}</span>
+							<span class="price">{{ plan.price }}</span>
+							<span class="period">/{{ plan.period }}</span>
+						</div>
+						<div dh-if="plan.discount" class="discount">{{ plan.discount }}</div>
+					</div>
+					<div class="features">
+						<div dh-for="feature in plan.features" class="feature" :included="feature.included">
+							<i class="icon">{{ feature.included ? 'check_circle' : 'cancel' }}</i>
+							<span class="text">{{ feature.text }}</span>
+						</div>
+					</div>
+					<e-button :variant="plan.highlighted ? ['brand', 'block'] : ['outline', 'block']">
+						{{ plan.button }}
+					</e-button>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/data/properties/properties.css

@@ -0,0 +1,108 @@
+.e-12113837 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--dh-bg-1);
+	border-radius: var(--dh-radius-l);
+	overflow: hidden;
+	font-size: var(--dh-size-s);
+}
+
+.e-12113837 > .holder > .item
+{
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	border-bottom: 1px solid var(--dh-bg-2-border);
+}
+
+.e-12113837 > .holder > .item:last-child
+{
+	border-bottom: none;
+}
+
+.e-12113837 > .holder > .item > .head
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-12113837 > .holder > .item > .head > .name
+{
+	font-weight: 600;
+	color: var(--dh-brand);
+}
+
+.e-12113837 > .holder > .item > .head > .type
+{
+	color: var(--dh-blue);
+}
+
+.e-12113837 > .holder > .item > .head > .required
+{
+	color: var(--dh-red);
+}
+
+.e-12113837 > .holder > .item > .head > .default
+{
+	color: var(--dh-text-2);
+	margin-left: auto;
+}
+
+.e-12113837 > .holder > .item > .description
+{
+	color: var(--dh-text-2);
+	line-height: 1.4;
+}
+
+.e-12113837 > .holder > .item > .options
+{
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--dh-spacing-x);
+	font-size: 10px;
+}
+
+.e-12113837 > .holder > .item > .options > .option
+{
+	color: var(--dh-text-2);
+	background: var(--dh-bg-3);
+	padding: 2px 6px;
+	border-radius: var(--dh-radius-s);
+	cursor: pointer;
+	transition: background 0.15s ease, color 0.15s ease;
+}
+
+.e-12113837 > .holder > .item > .options > .option:hover
+{
+	background: var(--dh-bg-4);
+}
+
+.e-12113837 > .holder > .item > .options > .option[active="true"]
+{
+	background: var(--dh-brand);
+	color: white;
+}
+
+/* Variants */
+.e-12113837 > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-12113837 > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-12113837 > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-12113837 > .holder[variant*="size-s"] > .item
+{
+	padding: var(--dh-spacing-x) var(--dh-spacing-s);
+}

package/addons/render/elements/front/items/self/data/properties/properties.js

@@ -0,0 +1,156 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'properties',
+	icon: 'list_alt',
+	name: 'Properties',
+	description: 'Displays a list of properties with name, type, default value, and options.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		config: {
+			type: 'object',
+			value: {}
+		},
+		variant: {
+			type: 'array',
+			value: ['bg-1', 'border'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'border', 'size-s', 'size-m']
+		},
+		_change: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		if(!this.initialized)
+		{
+			this.initialized = true;
+			this.config = divhunt.DataConfig(this.config);
+			this.state = divhunt.DataDefine({}, this.config);
+		}
+
+		this.items = Object.entries(this.config).map(([name, definition]) =>
+		{
+			return {name, ...definition};
+		});
+
+		this.isMultiple = (item) =>
+		{
+			return Array.isArray(item.value);
+		};
+
+		this.formatValue = (value) =>
+		{
+			if(value === undefined || value === null)
+			{
+				return '—';
+			}
+
+			if(typeof value === 'boolean')
+			{
+				return value ? 'true' : 'false';
+			}
+
+			if(Array.isArray(value))
+			{
+				return JSON.stringify(value);
+			}
+
+			if(typeof value === 'object')
+			{
+				return JSON.stringify(value);
+			}
+
+			return String(value);
+		};
+
+		this.isActive = (item, option) =>
+		{
+			const value = this.state[item.name];
+
+			if(Array.isArray(value))
+			{
+				return value.includes(option);
+			}
+
+			return value === option;
+		};
+
+		this.isEditable = (item) =>
+		{
+			return (item.type === 'string' || item.type === 'number') && !item.options;
+		};
+
+		this.getValue = (item) =>
+		{
+			const value = this.state[item.name];
+			return value !== undefined && value !== null ? String(value) : '';
+		};
+
+		this.onInput = (item, e) =>
+		{
+			let value = e.target.innerText;
+
+			if(item.type === 'number')
+			{
+				value = value === '' ? undefined : Number(value);
+			}
+
+			this.config[item.name].value = value || undefined;
+			this.state = divhunt.DataDefine({}, this.config);
+
+			if(this._change)
+			{
+				this._change({ ...this.state });
+			}
+		};
+
+		this.toggle = (item, option) =>
+		{
+			if(this.isMultiple(item))
+			{
+				const current = this.state[item.name] || [];
+
+				if(current.includes(option))
+				{
+					this.config[item.name].value = current.filter(v => v !== option);
+				}
+				else
+				{
+					this.config[item.name].value = [...current, option];
+				}
+			}
+			else
+			{
+				const current = this.state[item.name];
+				this.config[item.name].value = current === option ? undefined : option;
+			}
+
+			this.state = divhunt.DataDefine({}, this.config);
+
+			if(this._change)
+			{
+				this._change({ ...this.state });
+			}
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-for="item in items" class="item">
+					<div class="head">
+						<span class="name">{{ item.name }}</span>
+						<span class="type">{{ item.type }}</span>
+						<span dh-if="item.required" class="required">required</span>
+						<span dh-if="!isEditable(item) && item.value !== undefined" class="default">{{ formatValue(item.value) }}</span>
+						<span dh-if="isEditable(item)" class="default editable" contenteditable="true" dh-change="(e) => onInput(item, e)">{{ getValue(item) }}</span>
+					</div>
+					<div dh-if="item.description" class="description">{{ item.description }}</div>
+					<div dh-if="item.options && item.options.length" class="options">
+						<span dh-for="option in item.options" class="option" :active="isActive(item, option)" dh-click="() => toggle(item, option)">{{ option }}</span>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+});