divhunt 2.0.5 → 2.0.6

package/addons/render/elements/front/items/self/form/radio/styles/variants.css

@@ -1,121 +0,0 @@
-/* Variants */
-.r53095678 > .holder[variant="transparent"] .radio-mark
-{
-    background: transparent;
-    border-color: transparent;
-}
-
-.r53095678 > .holder[variant="transparent"] .radio-mark::after
-{
-    background: var(--dh-text-1);
-}
-
-.r53095678 > .holder[variant="border"] .radio-mark
-{
-    background: transparent;
-    border-color: var(--dh-bg-1-border);
-}
-
-.r53095678 > .holder[variant="border"]:hover .radio-mark
-{
-    border-color: var(--dh-bg-2-border);
-}
-
-.r53095678 > .holder[variant="border"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r53095678 > .holder[variant="border"] .radio-mark::after
-{
-    background: white;
-}
-
-.r53095678 > .holder[variant="bg-1"] .radio-mark
-{
-    background: var(--dh-bg-1);
-    border-color: var(--dh-bg-1-border);
-}
-
-.r53095678 > .holder[variant="bg-1"]:hover .radio-mark
-{
-    background: var(--dh-bg-1-hover);
-}
-
-.r53095678 > .holder[variant="bg-1"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r53095678 > .holder[variant="bg-1"] .radio-mark::after
-{
-    background: white;
-}
-
-.r53095678 > .holder[variant="bg-2"] .radio-mark
-{
-    background: var(--dh-bg-2);
-    border-color: var(--dh-bg-2-border);
-}
-
-.r53095678 > .holder[variant="bg-2"]:hover .radio-mark
-{
-    background: var(--dh-bg-2-hover);
-}
-
-.r53095678 > .holder[variant="bg-2"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r53095678 > .holder[variant="bg-2"] .radio-mark::after
-{
-    background: white;
-}
-
-.r53095678 > .holder[variant="bg-3"] .radio-mark
-{
-    background: var(--dh-bg-3);
-    border-color: var(--dh-bg-3-border);
-}
-
-.r53095678 > .holder[variant="bg-3"]:hover .radio-mark
-{
-    background: var(--dh-bg-3-hover);
-}
-
-.r53095678 > .holder[variant="bg-3"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r53095678 > .holder[variant="bg-3"] .radio-mark::after
-{
-    background: white;
-}
-
-.r53095678 > .holder[variant="bg-4"] .radio-mark
-{
-    background: var(--dh-bg-4);
-    border-color: var(--dh-bg-4-border);
-}
-
-.r53095678 > .holder[variant="bg-4"]:hover .radio-mark
-{
-    background: var(--dh-bg-4-hover);
-}
-
-.r53095678 > .holder[variant="bg-4"] input[type="radio"]:checked ~ .radio-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r53095678 > .holder[variant="bg-4"] .radio-mark::after
-{
-    background: white;
-}

package/addons/render/elements/front/items/self/form/rating/rating.css

@@ -1,95 +0,0 @@
-/* Base */
-.e-3f0858cd > .holder
-{
-	display: inline-flex;
-	align-items: center;
-	gap: var(--dh-spacing-x);
-}
-
-.e-3f0858cd > .holder > .star
-{
-	font-size: 24px;
-	color: var(--dh-bg-3);
-	cursor: pointer;
-	transition: color 0.2s ease, transform 0.2s ease;
-	user-select: none;
-}
-
-.e-3f0858cd > .holder > .star.filled
-{
-	color: var(--dh-brand);
-}
-
-.e-3f0858cd > .holder > .star:hover
-{
-	transform: scale(1.1);
-}
-
-/* Variants - Readonly */
-.e-3f0858cd > .holder[variant*="readonly"] > .star
-{
-	cursor: default;
-	pointer-events: none;
-}
-
-.e-3f0858cd > .holder[variant*="readonly"] > .star:hover
-{
-	transform: none;
-}
-
-/* Variants - Colors */
-.e-3f0858cd > .holder[variant*="brand"] > .star.filled
-{
-	color: var(--dh-brand);
-}
-
-.e-3f0858cd > .holder[variant*="blue"] > .star.filled
-{
-	color: var(--dh-blue);
-}
-
-.e-3f0858cd > .holder[variant*="red"] > .star.filled
-{
-	color: var(--dh-red);
-}
-
-.e-3f0858cd > .holder[variant*="orange"] > .star.filled
-{
-	color: var(--dh-orange);
-}
-
-.e-3f0858cd > .holder[variant*="green"] > .star.filled
-{
-	color: var(--dh-green);
-}
-
-/* Variants - Sizes */
-.e-3f0858cd > .holder[variant*="size-s"]
-{
-	gap: 2px;
-}
-
-.e-3f0858cd > .holder[variant*="size-s"] > .star
-{
-	font-size: 16px;
-}
-
-.e-3f0858cd > .holder[variant*="size-m"]
-{
-	gap: var(--dh-spacing-x);
-}
-
-.e-3f0858cd > .holder[variant*="size-m"] > .star
-{
-	font-size: 24px;
-}
-
-.e-3f0858cd > .holder[variant*="size-l"]
-{
-	gap: var(--dh-spacing-s);
-}
-
-.e-3f0858cd > .holder[variant*="size-l"] > .star
-{
-	font-size: 32px;
-}

package/addons/render/elements/front/items/self/form/rating/rating.js

@@ -1,88 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'rating',
-	icon: 'star',
-	name: 'Rating',
-	description: 'Star rating input with interactive and readonly modes.',
-	category: 'Form',
-	author: 'Divhunt',
-	config: {
-		value: {
-			type: 'number',
-			value: 3
-		},
-		max: {
-			type: 'number',
-			value: 5
-		},
-		readonly: {
-			type: 'boolean',
-			value: false
-		},
-		variant: {
-			type: 'array',
-			value: ['brand', 'size-m'],
-			options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
-		},
-		onChange: {
-			type: 'function'
-		}
-	},
-	render: function()
-	{
-		this.hover = null;
-
-		this.getStars = () =>
-		{
-			const stars = [];
-			for (let i = 0; i < this.max; i++)
-			{
-				stars.push(i);
-			}
-			return stars;
-		};
-
-		this.isFilled = (index) =>
-		{
-			return this.hover !== null ? index <= this.hover : index < this.value;
-		};
-
-		this.handleClick = (index) =>
-		{
-			if (this.readonly) return;
-			this.value = index + 1;
-			if (this.onChange)
-			{
-				this.onChange(this.value);
-			}
-		};
-
-		this.handleMouseEnter = (index) =>
-		{
-			if (this.readonly) return;
-			this.hover = index;
-		};
-
-		this.handleMouseLeave = () =>
-		{
-			if (this.readonly) return;
-			this.hover = null;
-		};
-
-		return `
-			<div
-				class="holder"
-				:variant="variant.join(' ') + (readonly ? ' readonly' : '')"
-				dh-mouse-leave="handleMouseLeave"
-			>
-				<i
-					dh-for="index in getStars()"
-					:class="'star' + (isFilled(index) ? ' filled' : '')"
-					dh-click="() => handleClick(index)"
-					dh-mouse-enter="() => handleMouseEnter(index)"
-				>star</i>
-			</div>
-		`;
-	}
-});

package/addons/render/elements/front/items/self/form/section/section.css

@@ -1,107 +0,0 @@
-/* Base */
-.e-5c75a80e > .holder
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--dh-spacing-l);
-}
-
-.e-5c75a80e > .holder > .header
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--dh-spacing-x);
-}
-
-.e-5c75a80e > .holder > .header > h3
-{
-	margin: 0;
-	font-size: 18px;
-	font-weight: 600;
-	color: var(--dh-text-1);
-	line-height: 1.3;
-}
-
-.e-5c75a80e > .holder > .header > p
-{
-	margin: 0;
-	font-size: var(--dh-size-m);
-	color: var(--dh-text-2);
-	line-height: 1.5;
-}
-
-.e-5c75a80e > .holder > .content
-{
-	display: flex;
-	flex-direction: column;
-	border-radius: var(--dh-radius-m);
-	overflow: hidden;
-}
-
-/* Variants - Background */
-.e-5c75a80e > .holder[variant*="bg-1"] > .content
-{
-	background: var(--dh-bg-1);
-}
-
-.e-5c75a80e > .holder[variant*="bg-2"] > .content
-{
-	background: var(--dh-bg-2);
-}
-
-.e-5c75a80e > .holder[variant*="bg-3"] > .content
-{
-	background: var(--dh-bg-3);
-}
-
-.e-5c75a80e > .holder[variant*="bg-4"] > .content
-{
-	background: var(--dh-bg-4);
-}
-
-/* Variants - Border */
-.e-5c75a80e > .holder[variant*="border"] > .content
-{
-	border: 1px solid var(--dh-bg-2-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-1"][variant*="border"] > .content
-{
-	border-color: var(--dh-bg-1-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-2"][variant*="border"] > .content
-{
-	border-color: var(--dh-bg-2-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-3"][variant*="border"] > .content
-{
-	border-color: var(--dh-bg-3-border);
-}
-
-.e-5c75a80e > .holder[variant*="bg-4"][variant*="border"] > .content
-{
-	border-color: var(--dh-bg-4-border);
-}
-
-/* Sizes */
-.e-5c75a80e > .holder[variant*="size-s"] > .header > h3
-{
-	font-size: 16px;
-}
-
-.e-5c75a80e > .holder[variant*="size-s"] > .header > p
-{
-	font-size: var(--dh-size-s);
-}
-
-.e-5c75a80e > .holder[variant*="size-l"] > .header > h3
-{
-	font-size: 22px;
-}
-
-.e-5c75a80e > .holder[variant*="size-l"] > .header > p
-{
-	font-size: var(--dh-size-l);
-}

package/addons/render/elements/front/items/self/form/section/section.js

@@ -1,39 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'form-section',
-	icon: 'view_agenda',
-	name: 'Form Section',
-	description: 'Form section with title and description, containing form fields.',
-	category: 'Form',
-	author: 'Divhunt',
-	config: {
-		title: {
-			type: 'string',
-			value: 'Section Title'
-		},
-		description: {
-			type: 'string',
-			value: ''
-		},
-		variant: {
-			type: 'array',
-			value: [],
-			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
-		}
-	},
-	render: function()
-	{
-		return `
-			<div class="holder" :variant="variant.join(' ')">
-				<div class="header">
-					<h3 dh-if="title">{{ title }}</h3>
-					<p dh-if="description">{{ description }}</p>
-				</div>
-				<div class="content">
-					<slot name="content"></slot>
-				</div>
-			</div>
-		`;
-	}
-});

package/addons/render/elements/front/items/self/form/slider/slider.css

@@ -1,244 +0,0 @@
-/* Base */
-.e-3cbd9189 > .holder
-{
-	position: relative;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-m);
-}
-
-.e-3cbd9189 > .holder > .track
-{
-	position: absolute;
-	left: 0;
-	right: 0;
-	height: 6px;
-	background: var(--dh-bg-3);
-	border-radius: var(--dh-radius-s);
-	pointer-events: none;
-}
-
-.e-3cbd9189 > .holder > .track > .fill
-{
-	height: 100%;
-	background: var(--dh-brand);
-	border-radius: var(--dh-radius-s);
-	transition: width 0.2s ease-out;
-}
-
-.e-3cbd9189 > .holder > .input
-{
-	position: relative;
-	width: 100%;
-	height: 20px;
-	-webkit-appearance: none;
-	appearance: none;
-	background: transparent;
-	cursor: pointer;
-	z-index: 1;
-}
-
-.e-3cbd9189 > .holder > .input::-webkit-slider-thumb
-{
-	-webkit-appearance: none;
-	appearance: none;
-	width: 18px;
-	height: 18px;
-	background: var(--dh-brand);
-	border: 2px solid var(--dh-bg-1);
-	border-radius: 50%;
-	cursor: pointer;
-	transition: transform 0.2s ease;
-}
-
-.e-3cbd9189 > .holder > .input::-webkit-slider-thumb:hover
-{
-	transform: scale(1.1);
-}
-
-.e-3cbd9189 > .holder > .input::-moz-range-thumb
-{
-	width: 18px;
-	height: 18px;
-	background: var(--dh-brand);
-	border: 2px solid var(--dh-bg-1);
-	border-radius: 50%;
-	cursor: pointer;
-	transition: transform 0.2s ease;
-}
-
-.e-3cbd9189 > .holder > .input::-moz-range-thumb:hover
-{
-	transform: scale(1.1);
-}
-
-.e-3cbd9189 > .holder > .value
-{
-	min-width: 40px;
-	text-align: center;
-	font-size: var(--dh-size-s);
-	font-weight: 600;
-	color: var(--dh-text-1);
-}
-
-/* Variants - Colors */
-.e-3cbd9189 > .holder[variant*="brand"] > .track > .fill
-{
-	background: var(--dh-brand);
-}
-
-.e-3cbd9189 > .holder[variant*="brand"] > .input::-webkit-slider-thumb
-{
-	background: var(--dh-brand);
-}
-
-.e-3cbd9189 > .holder[variant*="brand"] > .input::-moz-range-thumb
-{
-	background: var(--dh-brand);
-}
-
-.e-3cbd9189 > .holder[variant*="blue"] > .track > .fill
-{
-	background: var(--dh-blue);
-}
-
-.e-3cbd9189 > .holder[variant*="blue"] > .input::-webkit-slider-thumb
-{
-	background: var(--dh-blue);
-}
-
-.e-3cbd9189 > .holder[variant*="blue"] > .input::-moz-range-thumb
-{
-	background: var(--dh-blue);
-}
-
-.e-3cbd9189 > .holder[variant*="red"] > .track > .fill
-{
-	background: var(--dh-red);
-}
-
-.e-3cbd9189 > .holder[variant*="red"] > .input::-webkit-slider-thumb
-{
-	background: var(--dh-red);
-}
-
-.e-3cbd9189 > .holder[variant*="red"] > .input::-moz-range-thumb
-{
-	background: var(--dh-red);
-}
-
-.e-3cbd9189 > .holder[variant*="orange"] > .track > .fill
-{
-	background: var(--dh-orange);
-}
-
-.e-3cbd9189 > .holder[variant*="orange"] > .input::-webkit-slider-thumb
-{
-	background: var(--dh-orange);
-}
-
-.e-3cbd9189 > .holder[variant*="orange"] > .input::-moz-range-thumb
-{
-	background: var(--dh-orange);
-}
-
-.e-3cbd9189 > .holder[variant*="green"] > .track > .fill
-{
-	background: var(--dh-green);
-}
-
-.e-3cbd9189 > .holder[variant*="green"] > .input::-webkit-slider-thumb
-{
-	background: var(--dh-green);
-}
-
-.e-3cbd9189 > .holder[variant*="green"] > .input::-moz-range-thumb
-{
-	background: var(--dh-green);
-}
-
-/* Variants - Sizes */
-.e-3cbd9189 > .holder[variant*="size-s"] > .track
-{
-	height: 4px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-s"] > .input
-{
-	height: 16px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-s"] > .input::-webkit-slider-thumb
-{
-	width: 14px;
-	height: 14px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-s"] > .input::-moz-range-thumb
-{
-	width: 14px;
-	height: 14px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-s"] > .value
-{
-	font-size: 11px;
-	min-width: 35px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-m"] > .track
-{
-	height: 6px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-m"] > .input
-{
-	height: 20px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-m"] > .input::-webkit-slider-thumb
-{
-	width: 18px;
-	height: 18px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-m"] > .input::-moz-range-thumb
-{
-	width: 18px;
-	height: 18px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-m"] > .value
-{
-	font-size: var(--dh-size-s);
-	min-width: 40px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-l"] > .track
-{
-	height: 8px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-l"] > .input
-{
-	height: 24px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-l"] > .input::-webkit-slider-thumb
-{
-	width: 22px;
-	height: 22px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-l"] > .input::-moz-range-thumb
-{
-	width: 22px;
-	height: 22px;
-}
-
-.e-3cbd9189 > .holder[variant*="size-l"] > .value
-{
-	font-size: var(--dh-size-m);
-	min-width: 45px;
-}