@onetype/framework 2.0.53 → 2.0.54

package/addons/render/elements/front/items/self/cards/share/share.js

@@ -0,0 +1,316 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'cards-share',
+		icon: 'share',
+		name: 'Share Card',
+		description: 'Share toolbar card with copy, native share, bookmark, like and social platforms.',
+		category: 'Cards',
+		author: 'OneType',
+		config: {
+			title: {
+				type: 'string'
+			},
+			url: {
+				type: 'string'
+			},
+			text: {
+				type: 'string'
+			},
+			actions: {
+				type: 'array',
+				value: ['copy', 'share', 'bookmark', 'like'],
+				each: {
+					type: 'string',
+					options: ['copy', 'share', 'bookmark', 'like']
+				}
+			},
+			platforms: {
+				type: 'array',
+				value: [],
+				each: {
+					type: 'string',
+					options: ['twitter', 'facebook', 'linkedin', 'whatsapp', 'telegram', 'email']
+				}
+			},
+			liked: {
+				type: 'boolean'
+			},
+			saved: {
+				type: 'boolean'
+			},
+			likes: {
+				type: 'number'
+			},
+			comments: {
+				type: 'number'
+			},
+			shares: {
+				type: 'number'
+			},
+			orientation: {
+				type: 'string',
+				value: 'horizontal',
+				options: ['horizontal', 'vertical']
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'border', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l', 'compact', 'inline']
+			},
+			_copy: {
+				type: 'function'
+			},
+			_share: {
+				type: 'function'
+			},
+			_save: {
+				type: 'function'
+			},
+			_like: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.copied = false;
+
+			this.showAction = (action) =>
+			{
+				return this.actions.includes(action);
+			};
+
+			this.hasCopy = this.showAction('copy');
+			this.hasShare = this.showAction('share');
+			this.hasBookmark = this.showAction('bookmark');
+			this.hasLike = this.showAction('like');
+			this.hasPlatforms = this.platforms && this.platforms.length > 0;
+			this.hasCounts = this.likes != null || this.comments != null || this.shares != null;
+
+			this.platformMeta = {
+				twitter: {
+					label: 'Twitter',
+					svg: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>'
+				},
+				facebook: {
+					label: 'Facebook',
+					svg: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>'
+				},
+				linkedin: {
+					label: 'LinkedIn',
+					svg: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'
+				},
+				whatsapp: {
+					label: 'WhatsApp',
+					svg: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 018.413 3.488 11.824 11.824 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>'
+				},
+				telegram: {
+					label: 'Telegram',
+					svg: '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>'
+				},
+				email: {
+					label: 'Email',
+					icon: 'mail'
+				}
+			};
+
+			this.buildPlatformHref = (key) =>
+			{
+				const url = encodeURIComponent(this.url || '');
+				const text = encodeURIComponent(this.text || '');
+
+				if(key === 'twitter')
+				{
+					return 'https://twitter.com/intent/tweet?url=' + url + '&text=' + text;
+				}
+
+				if(key === 'facebook')
+				{
+					return 'https://www.facebook.com/sharer/sharer.php?u=' + url;
+				}
+
+				if(key === 'linkedin')
+				{
+					return 'https://www.linkedin.com/sharing/share-offsite/?url=' + url;
+				}
+
+				if(key === 'whatsapp')
+				{
+					return 'https://wa.me/?text=' + text + '%20' + url;
+				}
+
+				if(key === 'telegram')
+				{
+					return 'https://t.me/share/url?url=' + url + '&text=' + text;
+				}
+
+				if(key === 'email')
+				{
+					return 'mailto:?subject=' + text + '&body=' + url;
+				}
+
+				return '#';
+			};
+
+			this.platformList = this.platforms.map(key =>
+			{
+				const meta = this.platformMeta[key] || {};
+
+				return {
+					id: key,
+					label: meta.label || key,
+					svg: meta.svg || '',
+					icon: meta.icon || '',
+					href: this.buildPlatformHref(key)
+				};
+			});
+
+			this.copy = () =>
+			{
+				if(navigator.clipboard && this.url)
+				{
+					navigator.clipboard.writeText(this.url);
+				}
+
+				this.copied = true;
+
+				if(this._copy)
+				{
+					this._copy({ value: this.url });
+				}
+
+				setTimeout(() =>
+				{
+					this.copied = false;
+				}, 1800);
+			};
+
+			this.share = async () =>
+			{
+				if(navigator.share && this.url)
+				{
+					try
+					{
+						await navigator.share({ title: this.title, text: this.text, url: this.url });
+					}
+					catch(error)
+					{
+					}
+				}
+
+				if(this._share)
+				{
+					this._share({ value: this.url });
+				}
+			};
+
+			this.toggleSave = () =>
+			{
+				this.saved = !this.saved;
+
+				if(this._save)
+				{
+					this._save({ value: this.saved });
+				}
+			};
+
+			this.toggleLike = () =>
+			{
+				this.liked = !this.liked;
+
+				if(this._like)
+				{
+					this._like({ value: this.liked });
+				}
+			};
+
+			this.formatCount = (value) =>
+			{
+				if(value == null)
+				{
+					return '';
+				}
+
+				if(value >= 1000000)
+				{
+					return (value / 1000000).toFixed(1) + 'M';
+				}
+
+				if(value >= 1000)
+				{
+					return (value / 1000).toFixed(1) + 'K';
+				}
+
+				return String(value);
+			};
+
+			return /* html */ `
+				<div :class="'holder ' + orientation + ' ' + variant.join(' ')">
+					<div ot-if="title" class="title">{{ title }}</div>
+
+					<div class="actions">
+						<button
+							ot-if="hasCopy"
+							type="button"
+							:class="'action' + (copied ? ' copied' : '')"
+							:ot-tooltip="{ text: copied ? 'Copied!' : 'Copy link', position: { x: 'center', y: 'top' } }"
+							ot-click="copy"
+						>
+							<i ot-if="!copied">link</i>
+							<i ot-if="copied">check</i>
+						</button>
+
+						<button
+							ot-if="hasShare"
+							type="button"
+							class="action"
+							:ot-tooltip="{ text: 'Share', position: { x: 'center', y: 'top' } }"
+							ot-click="share"
+						>
+							<i>ios_share</i>
+							<span ot-if="shares != null" class="count">{{ formatCount(shares) }}</span>
+						</button>
+
+						<button
+							ot-if="hasBookmark"
+							type="button"
+							:class="'action' + (saved ? ' saved' : '')"
+							:ot-tooltip="{ text: saved ? 'Saved' : 'Save', position: { x: 'center', y: 'top' } }"
+							ot-click="toggleSave"
+						>
+							<i ot-if="!saved">bookmark_border</i>
+							<i ot-if="saved">bookmark</i>
+						</button>
+
+						<button
+							ot-if="hasLike"
+							type="button"
+							:class="'action' + (liked ? ' liked' : '')"
+							:ot-tooltip="{ text: liked ? 'Liked' : 'Like', position: { x: 'center', y: 'top' } }"
+							ot-click="toggleLike"
+						>
+							<i ot-if="!liked">favorite_border</i>
+							<i ot-if="liked">favorite</i>
+							<span ot-if="likes != null" class="count">{{ formatCount(likes) }}</span>
+						</button>
+					</div>
+
+					<div ot-if="hasPlatforms" class="platforms">
+						<a
+							ot-for="platform in platformList"
+							class="platform"
+							:href="platform.href"
+							target="_blank"
+							rel="noopener"
+							:data-platform="platform.id"
+							:ot-tooltip="{ text: platform.label, position: { x: 'center', y: 'top' } }"
+						>
+							<span ot-if="platform.svg" class="brand" ot-html="platform.svg"></span>
+							<i ot-if="!platform.svg && platform.icon">{{ platform.icon }}</i>
+						</a>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

package/addons/render/elements/front/items/self/cards/stat/stat.css

@@ -0,0 +1,356 @@
+/* Root */
+
+.e-7e98a114
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-7e98a114 > .holder
+{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-width: 0;
+	border-radius: var(--ot-radius-l);
+	border: 1px solid transparent;
+	background: transparent;
+	color: inherit;
+	text-decoration: none;
+	overflow: hidden;
+	transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-7e98a114 > .holder.horizontal
+{
+	flex-direction: row;
+	align-items: stretch;
+}
+
+.e-7e98a114 > .holder.clickable
+{
+	cursor: pointer;
+}
+
+.e-7e98a114 > .holder.disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.e-7e98a114 > .holder.active
+{
+	border-color: var(--ot-brand);
+	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
+}
+
+/* ===== BODY ===== */
+
+.e-7e98a114 > .holder > .body
+{
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+	gap: var(--ot-spacing-s);
+	padding: var(--ot-spacing-m);
+	z-index: 1;
+}
+
+/* ===== HEAD ===== */
+
+.e-7e98a114 > .holder > .body > .head
+{
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+}
+
+.e-7e98a114 > .holder > .body > .head > .head-text
+{
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+}
+
+.e-7e98a114 > .holder > .body > .head > .head-text > .label
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	line-height: 1.4;
+}
+
+/* Icon wrap */
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 36px;
+	height: 36px;
+	border-radius: var(--ot-radius-m);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	color: var(--ot-text-1);
+}
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap > i
+{
+	font-size: 18px;
+}
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.brand
+{
+	background: var(--ot-brand-opacity);
+	border-color: var(--ot-brand-border);
+	color: var(--ot-brand);
+}
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.blue
+{
+	background: var(--ot-blue-opacity);
+	border-color: var(--ot-blue-border);
+	color: var(--ot-blue);
+}
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.red
+{
+	background: var(--ot-red-opacity);
+	border-color: var(--ot-red-border);
+	color: var(--ot-red);
+}
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.orange
+{
+	background: var(--ot-orange-opacity);
+	border-color: var(--ot-orange-border);
+	color: var(--ot-orange);
+}
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.green
+{
+	background: var(--ot-green-opacity);
+	border-color: var(--ot-green-border);
+	color: var(--ot-green);
+}
+
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-7e98a114 > .holder > .body > .head > .icon-wrap.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+
+/* ===== VALUE ROW ===== */
+
+.e-7e98a114 > .holder > .body > .value-row
+{
+	display: flex;
+	align-items: baseline;
+	gap: var(--ot-spacing-s);
+	flex-wrap: wrap;
+}
+
+.e-7e98a114 > .holder > .body > .value-row > .value
+{
+	font-family: var(--ot-font-secondary);
+	font-size: 32px;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: -0.025em;
+	color: var(--ot-text-1);
+	font-variation-settings: 'opsz' 144;
+}
+
+.e-7e98a114 > .holder > .body > .value-row > .delta
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 3px;
+	padding: 3px 8px;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	line-height: 1;
+}
+
+.e-7e98a114 > .holder > .body > .value-row > .delta > i
+{
+	font-size: 14px;
+}
+
+.e-7e98a114 > .holder > .body > .value-row > .delta > .delta-label
+{
+	font-weight: 500;
+	opacity: 0.7;
+}
+
+.e-7e98a114 > .holder > .body > .value-row > .delta.delta-up
+{
+	background: var(--ot-green-opacity);
+	color: var(--ot-green);
+}
+
+.e-7e98a114 > .holder > .body > .value-row > .delta.delta-down
+{
+	background: var(--ot-red-opacity);
+	color: var(--ot-red);
+}
+
+.e-7e98a114 > .holder > .body > .value-row > .delta.delta-neutral
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-text-2);
+}
+
+/* ===== DESCRIPTION ===== */
+
+.e-7e98a114 > .holder > .body > .description
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	margin: 0;
+	line-height: 1.5;
+}
+
+/* ===== SPARKLINE ===== */
+
+.e-7e98a114 > .holder > .sparkline
+{
+	width: 100%;
+	margin-top: auto;
+	padding: 0 var(--ot-spacing-m) var(--ot-spacing-s);
+	pointer-events: none;
+}
+
+.e-7e98a114 > .holder.horizontal > .sparkline
+{
+	width: 40%;
+	align-self: center;
+	padding: var(--ot-spacing-m);
+	margin-top: 0;
+}
+
+/* ===== BACKGROUND VARIANTS ===== */
+
+.e-7e98a114 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-7e98a114 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-7e98a114 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-7e98a114 > .holder.bg-4 { background: var(--ot-bg-4); }
+
+.e-7e98a114 > .holder.border { border-color: var(--ot-bg-2-border); }
+.e-7e98a114 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-7e98a114 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-7e98a114 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-7e98a114 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* Hover lift */
+
+.e-7e98a114 > .holder.hover-lift.clickable:hover
+{
+	transform: translateY(-1px);
+	border-color: var(--ot-bg-3-border);
+	box-shadow: 0 4px 16px -8px rgba(20, 20, 30, 0.08);
+}
+
+/* Gradient */
+
+.e-7e98a114 > .holder.gradient
+{
+	background: var(--ot-bg-1);
+	border: 1px solid transparent;
+	background-clip: padding-box, border-box;
+	background-origin: padding-box, border-box;
+	background-image: linear-gradient(var(--ot-bg-1), var(--ot-bg-1)), linear-gradient(135deg, var(--ot-brand), var(--ot-blue));
+}
+
+/* Clickable non-lift hover */
+
+.e-7e98a114 > .holder.clickable:not(.hover-lift):hover
+{
+	border-color: var(--ot-bg-3-border);
+}
+
+/* ===== SIZE VARIANTS ===== */
+
+.e-7e98a114 > .holder.size-s > .body
+{
+	padding: var(--ot-spacing-s);
+	gap: var(--ot-spacing-x);
+}
+
+.e-7e98a114 > .holder.size-s > .body > .value-row > .value
+{
+	font-size: 22px;
+}
+
+.e-7e98a114 > .holder.size-s > .body > .head > .icon-wrap
+{
+	width: 28px;
+	height: 28px;
+}
+
+.e-7e98a114 > .holder.size-s > .body > .head > .icon-wrap > i
+{
+	font-size: 15px;
+}
+
+.e-7e98a114 > .holder.size-m > .body
+{
+	padding: var(--ot-spacing-m);
+}
+
+.e-7e98a114 > .holder.size-l > .body
+{
+	padding: var(--ot-spacing-l);
+	gap: var(--ot-spacing-m);
+}
+
+.e-7e98a114 > .holder.size-l > .body > .value-row > .value
+{
+	font-size: 42px;
+}
+
+.e-7e98a114 > .holder.size-l > .body > .head > .icon-wrap
+{
+	width: 44px;
+	height: 44px;
+	border-radius: var(--ot-radius-l);
+}
+
+.e-7e98a114 > .holder.size-l > .body > .head > .icon-wrap > i
+{
+	font-size: 22px;
+}
+
+/* ===== LOADING ===== */
+
+.e-7e98a114 > .holder.loading > .body > .head > .head-text > .label,
+.e-7e98a114 > .holder.loading > .body > .value-row > .value,
+.e-7e98a114 > .holder.loading > .body > .head > .icon-wrap
+{
+	background: linear-gradient(90deg, var(--ot-bg-2) 0%, var(--ot-bg-3) 50%, var(--ot-bg-2) 100%);
+	background-size: 200% 100%;
+	animation: e-7e98a114-shimmer 1.4s infinite linear;
+	color: transparent !important;
+	border-color: transparent !important;
+}
+
+@keyframes e-7e98a114-shimmer
+{
+	from { background-position: 200% 0; }
+	to { background-position: -200% 0; }
+}