divhunt 2.0.4 → 2.0.6

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;
-}

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

@@ -1,69 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'slider',
-	icon: 'linear_scale',
-	name: 'Slider',
-	description: 'Range slider input for selecting numeric values.',
-	category: 'Form',
-	author: 'Divhunt',
-	config: {
-		value: {
-			type: 'number',
-			value: 50
-		},
-		min: {
-			type: 'number',
-			value: 0
-		},
-		max: {
-			type: 'number',
-			value: 100
-		},
-		step: {
-			type: 'number',
-			value: 10
-		},
-		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.handleInput = (event) =>
-		{
-			this.value = parseFloat(event.target.value);
-			if (this.onChange)
-			{
-				this.onChange(this.value);
-			}
-		};
-
-		this.getPercentage = () =>
-		{
-			return ((this.value - this.min) / (this.max - this.min)) * 100;
-		};
-
-		return `
-			<div class="holder" :variant="variant.join(' ')">
-				<div class="track">
-					<div class="fill" :style="'width: ' + getPercentage() + '%'"></div>
-				</div>
-				<input
-					type="range"
-					class="input"
-					:value="value"
-					:min="min"
-					:max="max"
-					:step="step"
-					dh-input="handleInput"
-				/>
-			</div>
-		`;
-	}
-});

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

@@ -1,117 +0,0 @@
-/* Base */
-.e-c6e9f50 > .holder
-{
-    position: relative;
-    width: 100%;
-    padding: var(--dh-spacing-s) var(--dh-spacing-m);
-    border-radius: var(--dh-radius-m);
-    border: none;
-    background: transparent;
-    transition: all 0.2s;
-}
-
-.e-c6e9f50 > .holder > textarea
-{
-    width: 100%;
-    background: transparent;
-    border: none;
-    outline: none;
-    min-height: 100px;
-    resize: none;
-    color: var(--dh-text-1);
-    padding: 0;
-}
-
-.e-c6e9f50 > .holder > textarea::placeholder
-{
-    color: var(--dh-text-2);
-}
-
-.e-c6e9f50 > .holder > textarea:disabled
-{
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-/* Variants - Background */
-.e-c6e9f50 > .holder[variant*="transparent"]
-{
-    background: transparent;
-    padding: 0;
-}
-
-.e-c6e9f50 > .holder[variant*="border"]
-{
-    background: transparent;
-}
-
-.e-c6e9f50 > .holder[variant*="bg-1"]
-{
-    background: var(--dh-bg-1);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-1"]:hover
-{
-    background: var(--dh-bg-1-hover);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-2"]
-{
-    background: var(--dh-bg-2);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-2"]:hover
-{
-    background: var(--dh-bg-2-hover);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-3"]
-{
-    background: var(--dh-bg-3);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-3"]:hover
-{
-    background: var(--dh-bg-3-hover);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-4"]
-{
-    background: var(--dh-bg-4);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-4"]:hover
-{
-    background: var(--dh-bg-4-hover);
-}
-
-/* Variants - Border */
-.e-c6e9f50 > .holder[variant*="border"]
-{
-    border: 1px solid var(--dh-bg-2-border);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-1"][variant*="border"]
-{
-    border: 1px solid var(--dh-bg-1-border);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-2"][variant*="border"]
-{
-    border: 1px solid var(--dh-bg-2-border);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-3"][variant*="border"]
-{
-    border: 1px solid var(--dh-bg-3-border);
-}
-
-.e-c6e9f50 > .holder[variant*="bg-4"][variant*="border"]
-{
-    border: 1px solid var(--dh-bg-4-border);
-}
-
-.e-c6e9f50 > .holder[variant*="border"]:focus-within
-{
-    border-color: var(--dh-brand);
-}

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

@@ -1,69 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-    id: 'textarea',
-    icon: 'notes',
-    name: 'Textarea',
-    description: 'Multi-line text input with auto-resize option, character counting, and variant support for different UI contexts.',
-    category: 'Form',
-    author: 'Divhunt',
-    config: {
-        value: {
-            type: 'string'
-        },
-        name: {
-            type: 'string'
-        },
-        placeholder: {
-            type: 'string'
-        },
-        rows: {
-            type: 'number',
-            value: 4
-        },
-        maxLength: {
-            type: 'number'
-        },
-        disabled: {
-            type: 'boolean'
-        },
-        readonly: {
-            type: 'boolean'
-        },
-        variant: {
-            type: 'array',
-            value: ['bg-2'],
-            options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
-        },
-        size: {
-            type: 'string',
-            value: 'm',
-            options: ['s', 'm', 'l']
-        },
-        onInput: {
-            type: 'function'
-        },
-        onChange: {
-            type: 'function'
-        }
-    },
-    render: function()
-    {
-        return `
-            <div class="holder" :variant="variant.join(' ')" :size="size">
-                <textarea
-                    :value="value"
-                    :placeholder="placeholder"
-                    :name="name"
-                    :rows="rows"
-                    :maxlength="maxLength"
-                    :disabled="disabled"
-                    :readonly="readonly"
-                    autocomplete="off"
-                    dh-input="onInput"
-                    dh-change="onChange"
-                ></textarea>
-            </div>
-        `;
-    }
-});

package/addons/render/elements/front/items/self/layout/empty/empty.css

@@ -1,154 +0,0 @@
-/* Base */
-.e-68a084f7 > .holder
-{
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--dh-spacing-l);
-	gap: var(--dh-spacing-m);
-	text-align: center;
-}
-
-.e-68a084f7 > .holder > .icon
-{
-	font-size: 48px;
-	color: var(--dh-text-2);
-	opacity: 0.5;
-}
-
-.e-68a084f7 > .holder > .content
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--dh-spacing-x);
-	max-width: 400px;
-}
-
-.e-68a084f7 > .holder > .content > .title
-{
-	font-size: var(--dh-size-l);
-	font-weight: 600;
-	color: var(--dh-text-1);
-}
-
-.e-68a084f7 > .holder > .content > .text
-{
-	font-size: var(--dh-size-m);
-	color: var(--dh-text-2);
-	line-height: 1.6;
-}
-
-/* Variants - Background */
-.e-68a084f7 > .holder[variant*="bg-1"]
-{
-	background: var(--dh-bg-1);
-	border: 1px solid var(--dh-bg-1-border);
-	border-radius: var(--dh-radius-l);
-}
-
-.e-68a084f7 > .holder[variant*="bg-2"]
-{
-	background: var(--dh-bg-2);
-	border: 1px solid var(--dh-bg-2-border);
-	border-radius: var(--dh-radius-l);
-}
-
-.e-68a084f7 > .holder[variant*="bg-3"]
-{
-	background: var(--dh-bg-3);
-	border: 1px solid var(--dh-bg-3-border);
-	border-radius: var(--dh-radius-l);
-}
-
-.e-68a084f7 > .holder[variant*="bg-4"]
-{
-	background: var(--dh-bg-4);
-	border: 1px solid var(--dh-bg-4-border);
-	border-radius: var(--dh-radius-l);
-}
-
-/* Variants - Border */
-.e-68a084f7 > .holder[variant*="border"]
-{
-	border-width: 2px;
-}
-
-/* Variants - Sizes */
-.e-68a084f7 > .holder[variant*="size-s"]
-{
-	padding: var(--dh-spacing-m);
-	gap: var(--dh-spacing-s);
-}
-
-.e-68a084f7 > .holder[variant*="size-s"] > .icon
-{
-	font-size: 36px;
-}
-
-.e-68a084f7 > .holder[variant*="size-s"] > .content
-{
-	max-width: 300px;
-}
-
-.e-68a084f7 > .holder[variant*="size-s"] > .content > .title
-{
-	font-size: var(--dh-size-m);
-}
-
-.e-68a084f7 > .holder[variant*="size-s"] > .content > .text
-{
-	font-size: var(--dh-size-s);
-}
-
-.e-68a084f7 > .holder[variant*="size-m"]
-{
-	padding: var(--dh-spacing-l);
-	gap: var(--dh-spacing-m);
-}
-
-.e-68a084f7 > .holder[variant*="size-m"] > .icon
-{
-	font-size: 48px;
-}
-
-.e-68a084f7 > .holder[variant*="size-m"] > .content
-{
-	max-width: 400px;
-}
-
-.e-68a084f7 > .holder[variant*="size-m"] > .content > .title
-{
-	font-size: var(--dh-size-l);
-}
-
-.e-68a084f7 > .holder[variant*="size-m"] > .content > .text
-{
-	font-size: var(--dh-size-m);
-}
-
-.e-68a084f7 > .holder[variant*="size-l"]
-{
-	padding: var(--dh-spacing-l);
-	gap: var(--dh-spacing-l);
-}
-
-.e-68a084f7 > .holder[variant*="size-l"] > .icon
-{
-	font-size: 64px;
-}
-
-.e-68a084f7 > .holder[variant*="size-l"] > .content
-{
-	max-width: 500px;
-}
-
-.e-68a084f7 > .holder[variant*="size-l"] > .content > .title
-{
-	font-size: 24px;
-}
-
-.e-68a084f7 > .holder[variant*="size-l"] > .content > .text
-{
-	font-size: var(--dh-size-l);
-}

package/addons/render/elements/front/items/self/layout/empty/empty.js

@@ -1,43 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'empty',
-	icon: 'inbox',
-	name: 'Empty',
-	description: 'Empty state placeholder with icon, title, and message.',
-	category: 'Layout',
-	author: 'Divhunt',
-	config: {
-		icon: {
-			type: 'string',
-			value: 'inbox'
-		},
-		title: {
-			type: 'string',
-			value: 'No items found'
-		},
-		text: {
-			type: 'string',
-			value: 'Get started by creating your first item.'
-		},
-		variant: {
-			type: 'array',
-			value: ['size-m', 'bg-1', 'border'],
-			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
-		}
-	},
-	render: function()
-	{
-		return `
-			<div class="holder" :variant="variant.join(' ')">
-				<i dh-if="icon" class="icon">{{ icon }}</i>
-
-				<div class="content">
-					<div dh-if="title" class="title">{{ title }}</div>
-					<div dh-if="text" class="text">{{ text }}</div>
-					<slot></slot>
-				</div>
-			</div>
-		`;
-	}
-});