@onetype/framework 2.0.53 → 2.0.54

package/addons/render/elements/front/items/self/global/tags/tags.css

@@ -14,64 +14,250 @@
 	align-items: center;
 	gap: var(--ot-spacing-s);
 	flex-wrap: wrap;
+	width: 100%;
 }
 
-/* Tag */
+/* Tag base */
 
-.e-4a1d382d > .holder > .tag
+.e-4a1d382d .tag
 {
-	display: flex;
+	position: relative;
+	display: inline-flex;
 	align-items: center;
-	padding: var(--ot-spacing-s) var(--ot-spacing-m);
-	font-size: var(--ot-size-s);
+	gap: var(--ot-spacing-x);
+	padding: 7px var(--ot-spacing-m);
+	font-family: var(--ot-font-primary);
+	font-size: 13px;
 	font-weight: 500;
 	color: var(--ot-text-2);
 	background: transparent;
-	border: 1px solid var(--ot-bg-2-border);
+	border: 1px solid transparent;
 	border-radius: 100px;
 	cursor: pointer;
 	outline: none;
 	white-space: nowrap;
-	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+	user-select: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.e-4a1d382d > .holder > .tag:hover
+.e-4a1d382d .tag:hover:not(.disabled):not(.active)
 {
 	color: var(--ot-text-1);
-	border-color: var(--ot-bg-3-border);
+	transform: translateY(-1px);
 }
 
-.e-4a1d382d > .holder > .tag.active
+.e-4a1d382d .tag:active:not(.disabled)
 {
-	color: white;
-	background: var(--ot-brand);
-	border-color: var(--ot-brand);
+	transform: translateY(0) scale(0.97);
+	transition-duration: 0.1s;
+}
+
+.e-4a1d382d .tag.disabled
+{
+	cursor: not-allowed;
+	opacity: 0.45;
+}
+
+/* Icon */
+
+.e-4a1d382d .tag > i
+{
+	font-size: 16px;
+	margin-left: -2px;
 }
 
-/* Dot */
+/* Color dot */
 
-.e-4a1d382d > .holder > .tag > .dot
+.e-4a1d382d .tag > .dot
 {
-	width: var(--ot-spacing-s);
-	height: var(--ot-spacing-s);
+	width: 8px;
+	height: 8px;
 	border-radius: 50%;
-	margin-right: var(--ot-spacing-s);
 	flex-shrink: 0;
+	background: var(--ot-text-3);
+}
+
+.e-4a1d382d .tag.color-brand > .dot { background: var(--ot-brand); }
+.e-4a1d382d .tag.color-blue > .dot { background: var(--ot-blue); }
+.e-4a1d382d .tag.color-red > .dot { background: var(--ot-red); }
+.e-4a1d382d .tag.color-orange > .dot { background: var(--ot-orange); }
+.e-4a1d382d .tag.color-green > .dot { background: var(--ot-green); }
+
+/* Count badge */
+
+.e-4a1d382d .tag > .count
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 18px;
+	padding: 0 6px;
+	background: var(--ot-bg-2);
+	border-radius: 100px;
+	font-size: 10.5px;
+	font-weight: 600;
+	color: var(--ot-text-3);
+	line-height: 18px;
+	margin-right: -4px;
+}
+
+.e-4a1d382d .tag.active > .count
+{
+	background: var(--ot-brand);
+	color: white;
+}
+
+/* Active state (all styles) */
+
+.e-4a1d382d .tag.active
+{
+	color: var(--ot-brand);
+}
+
+/* ===== PILLS STYLE (default) ===== */
+
+.e-4a1d382d > .holder.pills > .tag
+{
+	background: var(--ot-bg-2);
+	border-color: transparent;
+}
+
+.e-4a1d382d > .holder.pills > .tag:hover:not(.disabled):not(.active)
+{
+	background: var(--ot-bg-2-hover);
+}
+
+.e-4a1d382d > .holder.pills > .tag.active
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+}
+
+/* ===== OUTLINE STYLE ===== */
+
+.e-4a1d382d > .holder.outline > .tag
+{
+	background: transparent;
+	border-color: var(--ot-bg-2-border);
+}
+
+.e-4a1d382d > .holder.outline > .tag:hover:not(.disabled):not(.active)
+{
+	border-color: var(--ot-text-2);
 }
 
-.e-4a1d382d > .holder > .tag > .dot-brand { background: var(--ot-brand); }
-.e-4a1d382d > .holder > .tag > .dot-blue { background: var(--ot-blue); }
-.e-4a1d382d > .holder > .tag > .dot-red { background: var(--ot-red); }
-.e-4a1d382d > .holder > .tag > .dot-orange { background: var(--ot-orange); }
-.e-4a1d382d > .holder > .tag > .dot-green { background: var(--ot-green); }
+.e-4a1d382d > .holder.outline > .tag.active
+{
+	background: var(--ot-brand-opacity);
+	border-color: var(--ot-brand);
+	color: var(--ot-brand);
+}
+
+/* ===== MINIMAL STYLE (text only) ===== */
+
+.e-4a1d382d > .holder.minimal > .tag
+{
+	background: transparent;
+	border-color: transparent;
+	padding: 7px var(--ot-spacing-s);
+}
+
+.e-4a1d382d > .holder.minimal > .tag:hover:not(.disabled):not(.active)
+{
+	background: var(--ot-bg-2-opacity);
+}
+
+.e-4a1d382d > .holder.minimal > .tag.active
+{
+	color: var(--ot-brand);
+	background: var(--ot-brand-opacity);
+}
+
+/* ===== BACKGROUNDS ===== */
+
+.e-4a1d382d > .holder.bg-1.pills > .tag { background: var(--ot-bg-1); }
+.e-4a1d382d > .holder.bg-1.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-1-hover); }
+.e-4a1d382d > .holder.bg-1 .tag > .count { background: var(--ot-bg-2); }
+
+.e-4a1d382d > .holder.bg-2.pills > .tag { background: var(--ot-bg-2); }
+.e-4a1d382d > .holder.bg-2.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-2-hover); }
+.e-4a1d382d > .holder.bg-2 .tag > .count { background: var(--ot-bg-3); }
+
+.e-4a1d382d > .holder.bg-3.pills > .tag { background: var(--ot-bg-3); }
+.e-4a1d382d > .holder.bg-3.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-3-hover); }
+.e-4a1d382d > .holder.bg-3 .tag > .count { background: var(--ot-bg-4); }
+
+.e-4a1d382d > .holder.bg-4.pills > .tag { background: var(--ot-bg-4); }
+.e-4a1d382d > .holder.bg-4.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-4-hover); }
+.e-4a1d382d > .holder.bg-4 .tag > .count { background: var(--ot-bg-3); }
+
+/* Outline + bg — border prati bg */
+
+.e-4a1d382d > .holder.bg-1.outline > .tag { border-color: var(--ot-bg-1-border); }
+.e-4a1d382d > .holder.bg-2.outline > .tag { border-color: var(--ot-bg-2-border); }
+.e-4a1d382d > .holder.bg-3.outline > .tag { border-color: var(--ot-bg-3-border); }
+.e-4a1d382d > .holder.bg-4.outline > .tag { border-color: var(--ot-bg-4-border); }
+
+/* ===== BORDER MODIFIER (adds border to pills/minimal) ===== */
+
+.e-4a1d382d > .holder.border > .tag { border-color: var(--ot-bg-2-border); }
+.e-4a1d382d > .holder.bg-1.border > .tag { border-color: var(--ot-bg-1-border); }
+.e-4a1d382d > .holder.bg-2.border > .tag { border-color: var(--ot-bg-2-border); }
+.e-4a1d382d > .holder.bg-3.border > .tag { border-color: var(--ot-bg-3-border); }
+.e-4a1d382d > .holder.bg-4.border > .tag { border-color: var(--ot-bg-4-border); }
 
-.e-4a1d382d > .holder > .tag.active > .dot
+/* ===== SIZES ===== */
+
+.e-4a1d382d > .holder.size-s
+{
+	gap: var(--ot-spacing-x);
+}
+
+.e-4a1d382d > .holder.size-s .tag
+{
+	padding: 5px var(--ot-spacing-s);
+	font-size: 12px;
+}
+
+.e-4a1d382d > .holder.size-s .tag > i
+{
+	font-size: 14px;
+}
+
+.e-4a1d382d > .holder.size-s .tag > .count
 {
-	background: white;
+	min-width: 16px;
+	font-size: 10px;
+	line-height: 16px;
+	padding: 0 5px;
 }
 
-/* Size variants */
+.e-4a1d382d > .holder.size-s.minimal > .tag
+{
+	padding: 5px var(--ot-spacing-x);
+}
 
-.e-4a1d382d > .holder.size-s > .tag { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
-.e-4a1d382d > .holder.size-m > .tag { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-s); }
-.e-4a1d382d > .holder.size-l > .tag { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }
+.e-4a1d382d > .holder.size-m .tag
+{
+	padding: 7px var(--ot-spacing-m);
+	font-size: 13px;
+}
+
+.e-4a1d382d > .holder.size-l .tag
+{
+	padding: 10px var(--ot-spacing-l);
+	font-size: 14px;
+}
+
+.e-4a1d382d > .holder.size-l .tag > i
+{
+	font-size: 18px;
+}
+
+.e-4a1d382d > .holder.size-l .tag > .count
+{
+	min-width: 20px;
+	font-size: 11.5px;
+	line-height: 20px;
+	padding: 0 8px;
+}

package/addons/render/elements/front/items/self/global/tags/tags.js

@@ -4,25 +4,35 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'global-tags',
 		icon: 'label',
 		name: 'Tags',
-		description: 'Filter tags with active state.',
+		description: 'Filter tag group with single or multiple selection, icons, counts and color dots.',
 		category: 'Global',
 		author: 'OneType',
 		config: {
 			items: {
 				type: 'array',
-				value: ['All'],
+				value: [],
 				each: {
-					type: 'string'
+					type: 'string|object',
+					config: {
+						id: { type: 'string' },
+						label: { type: 'string' },
+						icon: { type: 'string' },
+						count: { type: 'string|number' },
+						color: { type: 'string', options: ['brand', 'blue', 'red', 'orange', 'green'] },
+						disabled: { type: 'boolean' }
+					}
 				}
 			},
 			active: {
-				type: 'string',
-				value: 'All'
+				type: 'string|array'
+			},
+			multiple: {
+				type: 'boolean'
 			},
 			variant: {
 				type: 'array',
-				value: [],
-				options: ['size-s', 'size-m', 'size-l']
+				value: ['pills', 'size-m'],
+				options: ['pills', 'outline', 'minimal', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			},
 			_change: {
 				type: 'function'
@@ -30,28 +40,92 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.normalized = () =>
+			this.normalized = this.items.map(item =>
 			{
-				return this.items.map(item => typeof item === 'string' ? { label: item } : item);
+				if(typeof item === 'string')
+				{
+					return { id: item, label: item };
+				}
+
+				return {
+					id: item.id || item.label,
+					label: item.label || item.id,
+					icon: item.icon,
+					count: item.count,
+					color: item.color,
+					disabled: item.disabled
+				};
+			});
+
+			const styles = ['pills', 'outline', 'minimal'];
+			const hasStyle = this.variant.some(v => styles.includes(v));
+
+			if(!hasStyle)
+			{
+				this.variant = ['pills', ...this.variant];
+			}
+
+			this.isActive = (item) =>
+			{
+				if(Array.isArray(this.active))
+				{
+					return this.active.includes(item.id);
+				}
+
+				return this.active === item.id;
 			};
 
-			this.select = (tag) =>
+			this.select = (item, event) =>
 			{
-				this.active = tag;
+				if(item.disabled)
+				{
+					return;
+				}
+
+				let next;
+
+				if(this.multiple)
+				{
+					const current = Array.isArray(this.active) ? [...this.active] : [];
+					const index = current.indexOf(item.id);
+
+					if(index === -1)
+					{
+						current.push(item.id);
+					}
+					else
+					{
+						current.splice(index, 1);
+					}
+
+					next = current;
+				}
+				else
+				{
+					next = item.id;
+				}
+
+				this.active = next;
 
 				if(this._change)
 				{
-					this._change({ value: tag });
+					this._change({ event, value: next });
 				}
 			};
 
-			return `
+			return /* html */ `
 				<div :class="'holder ' + variant.join(' ')">
 					<button
-						ot-for="tag in normalized()"
-						:class="'tag' + (tag.label === active ? ' active' : '')"
-						ot-click="select(tag.label)"
-					><span ot-if="tag.color" :class="'dot dot-' + tag.color"></span>{{ tag.label }}</button>
+						ot-for="tag in normalized"
+						type="button"
+						:class="'tag' + (isActive(tag) ? ' active' : '') + (tag.disabled ? ' disabled' : '') + (tag.color ? ' color-' + tag.color : '')"
+						ot-click="(event) => select(tag, event)"
+					>
+						<span ot-if="tag.color && !tag.icon" class="dot"></span>
+						<i ot-if="tag.icon">{{ tag.icon }}</i>
+						<span class="label">{{ tag.label }}</span>
+						<span ot-if="tag.count != null" class="count">{{ tag.count }}</span>
+					</button>
 				</div>
 			`;
 		}

package/addons/render/elements/front/items/self/navigation/dock/dock.css

@@ -0,0 +1,221 @@
+/* Root */
+
+.e-1a845976
+{
+	display: flex;
+	flex-shrink: 0;
+	height: 100%;
+}
+
+/* Holder */
+
+.e-1a845976 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 68px;
+	height: 100%;
+	padding: var(--ot-spacing-s) 0;
+	overflow: hidden;
+}
+
+/* Logo */
+
+.e-1a845976 > .holder > .logo
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 36px;
+	height: 36px;
+	margin-bottom: var(--ot-spacing-s);
+	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-1a845976 > .holder > .logo:hover
+{
+	transform: scale(1.06);
+}
+
+.e-1a845976 > .holder > .logo > img
+{
+	width: 22px;
+	height: 22px;
+	object-fit: contain;
+}
+
+/* Stack */
+
+.e-1a845976 > .holder > .stack
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	flex-shrink: 0;
+	width: 100%;
+}
+
+.e-1a845976 > .holder > .stack.bottom
+{
+	margin-top: auto;
+}
+
+/* Separator */
+
+.e-1a845976 .separator
+{
+	width: 32px;
+	height: 1px;
+	background: var(--ot-bg-2-border);
+	margin: var(--ot-spacing-s) auto;
+	flex-shrink: 0;
+}
+
+/* Group */
+
+.e-1a845976 .group
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+	flex-shrink: 0;
+}
+
+/* Item */
+
+.e-1a845976 .item
+{
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: var(--ot-radius-m);
+	color: var(--ot-text-2);
+	text-decoration: none;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-1a845976 .item:hover
+{
+	background: var(--ot-bg-3);
+	color: var(--ot-text-1);
+}
+
+.e-1a845976 .item:active
+{
+	transform: scale(0.94);
+}
+
+.e-1a845976 .item > i
+{
+	font-size: 20px;
+	font-variation-settings: 'wght' 400;
+}
+
+/* Active */
+
+.e-1a845976 .item.active
+{
+	background: var(--ot-brand-opacity);
+	color: var(--ot-brand);
+}
+
+.e-1a845976 .item.active > i
+{
+	font-variation-settings: 'wght' 500;
+}
+
+.e-1a845976 .item.active::before
+{
+	content: '';
+	position: absolute;
+	left: calc(var(--ot-spacing-s) * -1);
+	top: 50%;
+	width: 3px;
+	height: 50%;
+	border-radius: 0 3px 3px 0;
+	background: var(--ot-brand);
+	transform: translateY(-50%);
+}
+
+/* Badge */
+
+.e-1a845976 .item > .badge
+{
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	min-width: 16px;
+	height: 16px;
+	padding: 0 4px;
+	border-radius: 100px;
+	background: var(--ot-brand);
+	color: white;
+	font-size: 10px;
+	font-weight: 700;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2px solid var(--ot-bg-2);
+	font-family: var(--ot-font-primary);
+	line-height: 1;
+}
+
+/* Backgrounds */
+
+.e-1a845976 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-1a845976 > .holder.bg-1 .item:hover { background: var(--ot-bg-1-hover); }
+.e-1a845976 > .holder.bg-1 .separator { background: var(--ot-bg-1-border); }
+.e-1a845976 > .holder.bg-1 .item > .badge { border-color: var(--ot-bg-1); }
+
+.e-1a845976 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-1a845976 > .holder.bg-2 .item:hover { background: var(--ot-bg-2-hover); }
+.e-1a845976 > .holder.bg-2 .separator { background: var(--ot-bg-2-border); }
+.e-1a845976 > .holder.bg-2 .item > .badge { border-color: var(--ot-bg-2); }
+
+.e-1a845976 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-1a845976 > .holder.bg-3 .item:hover { background: var(--ot-bg-3-hover); }
+.e-1a845976 > .holder.bg-3 .separator { background: var(--ot-bg-3-border); }
+.e-1a845976 > .holder.bg-3 .item > .badge { border-color: var(--ot-bg-3); }
+
+.e-1a845976 > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-1a845976 > .holder.bg-4 .item:hover { background: var(--ot-bg-4-hover); }
+.e-1a845976 > .holder.bg-4 .separator { background: var(--ot-bg-4-border); }
+.e-1a845976 > .holder.bg-4 .item > .badge { border-color: var(--ot-bg-4); }
+
+/* Borders */
+
+.e-1a845976 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-1a845976 > .holder.border-top { border-top: 1px solid var(--ot-bg-2-border); }
+.e-1a845976 > .holder.border-right { border-right: 1px solid var(--ot-bg-2-border); }
+.e-1a845976 > .holder.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
+.e-1a845976 > .holder.border-left { border-left: 1px solid var(--ot-bg-2-border); }
+
+.e-1a845976 > .holder.bg-1.border,
+.e-1a845976 > .holder.bg-1.border-top,
+.e-1a845976 > .holder.bg-1.border-right,
+.e-1a845976 > .holder.bg-1.border-bottom,
+.e-1a845976 > .holder.bg-1.border-left { border-color: var(--ot-bg-1-border); }
+
+.e-1a845976 > .holder.bg-2.border,
+.e-1a845976 > .holder.bg-2.border-top,
+.e-1a845976 > .holder.bg-2.border-right,
+.e-1a845976 > .holder.bg-2.border-bottom,
+.e-1a845976 > .holder.bg-2.border-left { border-color: var(--ot-bg-2-border); }
+
+.e-1a845976 > .holder.bg-3.border,
+.e-1a845976 > .holder.bg-3.border-top,
+.e-1a845976 > .holder.bg-3.border-right,
+.e-1a845976 > .holder.bg-3.border-bottom,
+.e-1a845976 > .holder.bg-3.border-left { border-color: var(--ot-bg-3-border); }
+
+.e-1a845976 > .holder.bg-4.border,
+.e-1a845976 > .holder.bg-4.border-top,
+.e-1a845976 > .holder.bg-4.border-right,
+.e-1a845976 > .holder.bg-4.border-bottom,
+.e-1a845976 > .holder.bg-4.border-left { border-color: var(--ot-bg-4-border); }