@papu1337/builder 0.0.3 → 0.0.5

package/dist/elements/products/productsElement.svelte

@@ -1,283 +0,0 @@
-<script lang="ts">
-	import type { ProductsSettingsMap } from './settings';
-
-	let { settings }: { settings: ProductsSettingsMap } = $props();
-
-	interface Product {
-		_id: string;
-		title: string;
-		description: string;
-		thumbnail: string;
-		rating: number;
-		stock: number;
-		brand: string;
-		price: {
-			current: number;
-			currency: string;
-			beforeDiscount: number;
-			discountPercentage: number;
-		};
-		category: {
-			id: string;
-			name: string;
-			image: string;
-		};
-	}
-
-	let products = $state<Product[]>([]);
-	let loading = $state(false);
-	let error = $state('');
-
-	let lastUrl = $state('');
-
-	$effect(() => {
-		const url = settings.apiUrl;
-		if (!url || url === lastUrl) return;
-		lastUrl = url;
-		fetchProducts(url);
-	});
-
-	async function fetchProducts(url: string) {
-		loading = true;
-		error = '';
-		try {
-			const res = await fetch(url);
-			if (!res.ok) throw new Error(`HTTP ${res.status}`);
-			const data = await res.json();
-			products = data.products ?? data.data ?? (Array.isArray(data) ? data : []);
-		} catch (e) {
-			error = e instanceof Error ? e.message : 'Failed to fetch';
-			products = [];
-		} finally {
-			loading = false;
-		}
-	}
-
-	function formatCurrency(amount: number, currency: string) {
-		return `${currency === 'USD' ? '$' : currency} ${amount}`;
-	}
-
-	function renderStars(rating: number): string {
-		const full = Math.floor(rating);
-		const half = rating - full >= 0.5 ? 1 : 0;
-		const empty = 5 - full - half;
-		return '★'.repeat(full) + (half ? '½' : '') + '☆'.repeat(empty);
-	}
-</script>
-
-<div class="products-wrapper" style="margin-top: {settings.marginTop}px;">
-	{#if !settings.apiUrl}
-		<div class="placeholder">
-			<span class="placeholder-icon">&#128722;</span>
-			<span class="placeholder-text">Enter an API URL in settings to load products</span>
-		</div>
-	{:else if loading}
-		<div class="placeholder">
-			<span class="placeholder-text">Loading products...</span>
-		</div>
-	{:else if error}
-		<div class="placeholder error">
-			<span class="placeholder-text">Error: {error}</span>
-		</div>
-	{:else if products.length === 0}
-		<div class="placeholder">
-			<span class="placeholder-text">No products found</span>
-		</div>
-	{:else}
-		<div class="products-grid" style="grid-template-columns: repeat({settings.columns}, 1fr);">
-			{#each products as product (product._id)}
-				<div
-					class="product-card"
-					style="background: {settings.cardBackground}; border: 1px solid {settings.cardBorder};"
-				>
-					<div class="product-image-wrap">
-						<img src={product.thumbnail} alt={product.title} class="product-image" />
-						{#if product.price.discountPercentage > 0}
-							<span
-								class="discount-badge"
-								style="background: {settings.discountBadgeBackground}; color: {settings.discountBadgeColor};"
-							>
-								-{product.price.discountPercentage}%
-							</span>
-						{/if}
-					</div>
-
-					<div class="product-info">
-						<span class="product-brand">{product.brand}</span>
-						<h4 class="product-title" style="color: {settings.titleColor};">
-							{product.title}
-						</h4>
-						<p class="product-desc" style="color: {settings.descriptionColor};">
-							{product.description.length > 80
-								? product.description.slice(0, 80) + '...'
-								: product.description}
-						</p>
-
-						<div class="product-rating" style="color: {settings.ratingColor};">
-							{renderStars(product.rating)}
-							<span class="rating-num">{product.rating.toFixed(1)}</span>
-						</div>
-
-						<div class="product-price">
-							<span class="current-price" style="color: {settings.priceColor};">
-								{formatCurrency(product.price.current, product.price.currency)}
-							</span>
-							{#if product.price.beforeDiscount > product.price.current}
-								<span class="old-price" style="color: {settings.oldPriceColor};">
-									{formatCurrency(product.price.beforeDiscount, product.price.currency)}
-								</span>
-							{/if}
-						</div>
-					</div>
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.products-wrapper {
-		max-width: 750px;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.placeholder {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 10px;
-		padding: 48px 24px;
-		border: 1.5px dashed rgba(255, 255, 255, 0.12);
-		border-radius: 8px;
-		background: rgba(255, 255, 255, 0.03);
-	}
-
-	.placeholder.error {
-		border-color: rgba(239, 68, 68, 0.3);
-	}
-
-	.placeholder-icon {
-		font-size: 2rem;
-		opacity: 0.3;
-	}
-
-	.placeholder-text {
-		font-size: 0.8rem;
-		color: rgba(255, 255, 255, 0.3);
-		text-align: center;
-	}
-
-	.products-grid {
-		display: grid;
-		gap: 14px;
-	}
-
-	.product-card {
-		border-radius: 10px;
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.product-image-wrap {
-		position: relative;
-		width: 100%;
-		aspect-ratio: 4/3;
-		overflow: hidden;
-		background: rgba(0, 0, 0, 0.2);
-	}
-
-	.product-image {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.discount-badge {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-		padding: 3px 8px;
-		border-radius: 6px;
-		font-size: 0.7rem;
-		font-weight: 700;
-	}
-
-	.product-info {
-		padding: 14px;
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		flex: 1;
-	}
-
-	.product-brand {
-		font-size: 0.65rem;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: rgba(255, 255, 255, 0.35);
-		font-weight: 600;
-	}
-
-	.product-title {
-		margin: 0;
-		font-size: 0.85rem;
-		font-weight: 600;
-		line-height: 1.3;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
-
-	.product-desc {
-		margin: 0;
-		font-size: 0.75rem;
-		line-height: 1.4;
-	}
-
-	.product-rating {
-		font-size: 0.75rem;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	.rating-num {
-		font-size: 0.7rem;
-		opacity: 0.6;
-		color: rgba(255, 255, 255, 0.5);
-	}
-
-	.product-price {
-		display: flex;
-		align-items: baseline;
-		gap: 8px;
-		margin-top: auto;
-		padding-top: 6px;
-	}
-
-	.current-price {
-		font-size: 1rem;
-		font-weight: 700;
-	}
-
-	.old-price {
-		font-size: 0.8rem;
-		text-decoration: line-through;
-	}
-
-	@media (max-width: 640px) {
-		.products-grid {
-			grid-template-columns: repeat(2, 1fr) !important;
-		}
-	}
-
-	@media (max-width: 400px) {
-		.products-grid {
-			grid-template-columns: 1fr !important;
-		}
-	}
-</style>

package/dist/elements/products/productsElement.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { ProductsSettingsMap } from './settings';
-type $$ComponentProps = {
-    settings: ProductsSettingsMap;
-};
-declare const ProductsElement: import("svelte").Component<$$ComponentProps, {}, "">;
-type ProductsElement = ReturnType<typeof ProductsElement>;
-export default ProductsElement;

package/dist/elements/products/settings.d.ts

@@ -1,16 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
-export declare const productsSettings: Settings<{
-    marginTop: NumberSetting;
-    apiUrl: TextSetting;
-    columns: NumberSetting;
-    cardBackground: ColorSetting;
-    cardBorder: ColorSetting;
-    titleColor: ColorSetting;
-    descriptionColor: ColorSetting;
-    priceColor: ColorSetting;
-    oldPriceColor: ColorSetting;
-    discountBadgeBackground: ColorSetting;
-    discountBadgeColor: ColorSetting;
-    ratingColor: ColorSetting;
-}>;
-export type ProductsSettingsMap = InferSettingsMapType<typeof productsSettings>;

package/dist/elements/products/settings.js

@@ -1,56 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
-export const productsSettings = new Settings('Products', {
-    marginTop: new NumberSetting({
-        title: 'Margin Top',
-        defaultValue: 0
-    }),
-    apiUrl: new TextSetting({
-        title: 'API URL',
-        defaultValue: ''
-    }),
-    columns: new NumberSetting({
-        title: 'Columns',
-        defaultValue: 3,
-        extra: {
-            min: 1,
-            max: 4,
-            step: 1
-        }
-    }),
-    cardBackground: new ColorSetting({
-        title: 'Card Background',
-        defaultValue: '#162D3F'
-    }),
-    cardBorder: new ColorSetting({
-        title: 'Card Border',
-        defaultValue: 'rgba(177, 202, 223, 0.1)'
-    }),
-    titleColor: new ColorSetting({
-        title: 'Title Color',
-        defaultValue: '#ffffff'
-    }),
-    descriptionColor: new ColorSetting({
-        title: 'Description Color',
-        defaultValue: 'rgba(255, 255, 255, 0.6)'
-    }),
-    priceColor: new ColorSetting({
-        title: 'Price Color',
-        defaultValue: '#4ade80'
-    }),
-    oldPriceColor: new ColorSetting({
-        title: 'Old Price Color',
-        defaultValue: 'rgba(255, 255, 255, 0.35)'
-    }),
-    discountBadgeBackground: new ColorSetting({
-        title: 'Discount Badge Background',
-        defaultValue: '#ef4444'
-    }),
-    discountBadgeColor: new ColorSetting({
-        title: 'Discount Badge Text Color',
-        defaultValue: '#ffffff'
-    }),
-    ratingColor: new ColorSetting({
-        title: 'Rating Star Color',
-        defaultValue: '#f0c845'
-    })
-});

package/dist/elements/terms/settings.d.ts

@@ -1,11 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings, type InferSettingsMapType } from '../../settings';
-export declare const termsSettings: Settings<{
-    marginTop: NumberSetting;
-    title: TextSetting;
-    sections: ListSetting;
-    backgroundColor: ColorSetting;
-    borderColor: ColorSetting;
-    textColor: ColorSetting;
-    arrowBackground: ColorSetting;
-}>;
-export type TermsSettingsMap = InferSettingsMapType<typeof termsSettings>;

package/dist/elements/terms/settings.js

@@ -1,39 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings } from '../../settings';
-export const termsSettings = new Settings('Terms', {
-    marginTop: new NumberSetting({
-        title: 'Margin Top',
-        defaultValue: 0
-    }),
-    title: new TextSetting({
-        title: 'Title',
-        defaultValue: 'Terms & Conditions'
-    }),
-    sections: new ListSetting({
-        title: 'Sections',
-        defaultValue: [
-            { title: 'About the Promotion', content: 'Enter promotion details here.' },
-            { title: 'Bonus Game Rules and Prizes', content: 'Enter bonus game rules here.' }
-        ],
-        extra: {
-            addButtonText: '+ Add Section',
-            titlePlaceholder: 'Section title',
-            contentPlaceholder: 'Section content'
-        }
-    }),
-    backgroundColor: new ColorSetting({
-        title: 'Background Color',
-        defaultValue: '#162D3F'
-    }),
-    borderColor: new ColorSetting({
-        title: 'Border Color',
-        defaultValue: 'rgba(177,202,223,0.1)'
-    }),
-    textColor: new ColorSetting({
-        title: 'Text Color',
-        defaultValue: '#ffffff'
-    }),
-    arrowBackground: new ColorSetting({
-        title: 'Arrow Background',
-        defaultValue: '#33475b'
-    })
-});

package/dist/elements/terms/termsElement.svelte

@@ -1,124 +0,0 @@
-<script lang="ts">
-	import type { TermsSettingsMap } from './settings';
-
-	let { settings }: { settings: TermsSettingsMap } = $props();
-
-	let expandedSet = $state<Set<number>>(new Set());
-
-	function toggle(index: number) {
-		if (expandedSet.has(index)) {
-			expandedSet.delete(index);
-		} else {
-			expandedSet.add(index);
-		}
-		expandedSet = new Set(expandedSet);
-	}
-</script>
-
-<div class="terms-wrapper" style="margin-top: {settings.marginTop}px;">
-	<div
-		class="terms-container"
-		style="background-color: {settings.backgroundColor}; border: 1px solid {settings.borderColor};"
-	>
-		<div class="terms-main-header" style="color: {settings.textColor};">
-			<span class="terms-main-title">{settings.title}</span>
-		</div>
-
-		{#each settings.sections as section, i}
-			<div class="terms-section" style="border-color: {settings.borderColor};">
-				<button class="terms-header" onclick={() => toggle(i)} style="color: {settings.textColor};">
-					<span class="terms-title">{section.title}</span>
-					<div
-						class="terms-arrow"
-						class:rotated={expandedSet.has(i)}
-						style="background: {settings.arrowBackground};"
-					>
-						<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-							<path d="M8 11L3 5.5h10L8 11z" fill="currentColor" />
-						</svg>
-					</div>
-				</button>
-				{#if expandedSet.has(i)}
-					<div class="terms-content" style="color: {settings.textColor};">
-						<p>{section.content}</p>
-					</div>
-				{/if}
-			</div>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.terms-wrapper {
-		max-width: 750px;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.terms-container {
-		border-radius: 8px;
-		overflow: hidden;
-	}
-
-	.terms-main-header {
-		padding: 18px 20px;
-		border-bottom: 1px solid rgba(177, 202, 223, 0.1);
-	}
-
-	.terms-main-title {
-		font-size: 1.15rem;
-		font-weight: 600;
-	}
-
-	.terms-section {
-		border-top: 1px solid;
-	}
-
-	.terms-section:first-of-type {
-		border-top: none;
-	}
-
-	.terms-header {
-		display: flex;
-		width: 100%;
-		align-items: center;
-		justify-content: space-between;
-		padding: 16px 20px;
-		background: none;
-		border: none;
-		cursor: pointer;
-	}
-
-	.terms-title {
-		font-size: 1rem;
-		font-weight: 500;
-		text-align: start;
-	}
-
-	.terms-arrow {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		padding: 4px;
-		transition: transform 0.2s ease;
-		flex-shrink: 0;
-	}
-
-	.terms-arrow.rotated {
-		transform: rotate(180deg);
-	}
-
-	.terms-content {
-		padding: 0 20px 20px;
-		font-size: 0.875rem;
-		line-height: 1.6;
-		opacity: 0.8;
-	}
-
-	.terms-content p {
-		margin: 0;
-	}
-</style>

package/dist/elements/terms/termsElement.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { TermsSettingsMap } from './settings';
-type $$ComponentProps = {
-    settings: TermsSettingsMap;
-};
-declare const TermsElement: import("svelte").Component<$$ComponentProps, {}, "">;
-type TermsElement = ReturnType<typeof TermsElement>;
-export default TermsElement;