divhunt 2.0.5 → 2.0.6

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

@@ -1,231 +0,0 @@
-/* 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

@@ -1,104 +0,0 @@
-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

@@ -1,108 +0,0 @@
-.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

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