@onetype/framework 2.0.53 → 2.0.54

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

@@ -10,48 +10,288 @@
 
 .e-2e3de5ec > .holder
 {
+	position: relative;
 	display: flex;
-	align-items: center;
-	gap: var(--ot-spacing-s);
+	align-items: flex-start;
+	gap: var(--ot-spacing-m);
 	width: 100%;
-	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	padding: var(--ot-spacing-m);
 	border-radius: var(--ot-radius-m);
-	font-size: var(--ot-size-s);
 	border: 1px solid transparent;
+	font-family: var(--ot-font-primary);
 }
 
 /* Icon */
 
 .e-2e3de5ec > .holder > .icon
 {
-	font-size: var(--ot-size-m);
+	font-size: 20px;
 	flex-shrink: 0;
+	line-height: 1.3;
+	font-variation-settings: 'FILL' 1;
+}
+
+/* Body */
+
+.e-2e3de5ec > .holder > .body
+{
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
 }
 
-/* Text */
+.e-2e3de5ec > .holder > .body > .title
+{
+	font-size: 13px;
+	font-weight: 600;
+	line-height: 1.3;
+}
+
+.e-2e3de5ec > .holder > .body > .text
+{
+	font-size: 12.5px;
+	line-height: 1.5;
+	opacity: 0.85;
+}
+
+/* Actions slot */
+
+.e-2e3de5ec > .holder > .actions
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	flex-shrink: 0;
+}
 
-.e-2e3de5ec > .holder > .text
+.e-2e3de5ec > .holder > .actions:empty
 {
-	line-height: 1.4;
+	display: none;
 }
 
-/* Color variants */
+/* Close button */
 
-.e-2e3de5ec > .holder.red { background: var(--ot-red-opacity); border-color: var(--ot-red-border); color: var(--ot-red); }
-.e-2e3de5ec > .holder.green { background: var(--ot-green-opacity); border-color: var(--ot-green-border); color: var(--ot-green); }
-.e-2e3de5ec > .holder.blue { background: var(--ot-blue-opacity); border-color: var(--ot-blue-border); color: var(--ot-blue); }
-.e-2e3de5ec > .holder.orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-border); color: var(--ot-orange); }
-.e-2e3de5ec > .holder.brand { background: var(--ot-brand-opacity); border-color: var(--ot-brand-border); color: var(--ot-brand); }
+.e-2e3de5ec > .holder > .close
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	color: currentColor;
+	cursor: pointer;
+	flex-shrink: 0;
+	opacity: 0.6;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
 
-/* Background variants */
+.e-2e3de5ec > .holder > .close:hover
+{
+	background: currentColor;
+	opacity: 0.15;
+}
+
+.e-2e3de5ec > .holder > .close > i
+{
+	font-size: 18px;
+}
 
-.e-2e3de5ec > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); color: var(--ot-text-2); }
-.e-2e3de5ec > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); color: var(--ot-text-2); }
-.e-2e3de5ec > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); color: var(--ot-text-2); }
-.e-2e3de5ec > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); color: var(--ot-text-2); }
+/* ===== COLOR VARIANTS (opacity backgrounds) ===== */
+
+.e-2e3de5ec > .holder.red
+{
+	background: var(--ot-red-opacity);
+	border-color: var(--ot-red-border);
+	color: var(--ot-red);
+}
+
+.e-2e3de5ec > .holder.green
+{
+	background: var(--ot-green-opacity);
+	border-color: var(--ot-green-border);
+	color: var(--ot-green);
+}
+
+.e-2e3de5ec > .holder.blue
+{
+	background: var(--ot-blue-opacity);
+	border-color: var(--ot-blue-border);
+	color: var(--ot-blue);
+}
+
+.e-2e3de5ec > .holder.orange
+{
+	background: var(--ot-orange-opacity);
+	border-color: var(--ot-orange-border);
+	color: var(--ot-orange);
+}
+
+.e-2e3de5ec > .holder.brand
+{
+	background: var(--ot-brand-opacity);
+	border-color: var(--ot-brand-border);
+	color: var(--ot-brand);
+}
+
+.e-2e3de5ec > .holder.red > .body > .title,
+.e-2e3de5ec > .holder.green > .body > .title,
+.e-2e3de5ec > .holder.blue > .body > .title,
+.e-2e3de5ec > .holder.orange > .body > .title,
+.e-2e3de5ec > .holder.brand > .body > .title
+{
+	color: inherit;
+}
+
+.e-2e3de5ec > .holder.red > .body > .text,
+.e-2e3de5ec > .holder.green > .body > .text,
+.e-2e3de5ec > .holder.blue > .body > .text,
+.e-2e3de5ec > .holder.orange > .body > .text,
+.e-2e3de5ec > .holder.brand > .body > .text
+{
+	color: var(--ot-text-1);
+	opacity: 0.85;
+}
+
+/* ===== FILLED VARIANT (solid color) ===== */
+
+.e-2e3de5ec > .holder.filled.red { background: var(--ot-red); border-color: var(--ot-red); color: white; }
+.e-2e3de5ec > .holder.filled.green { background: var(--ot-green); border-color: var(--ot-green); color: white; }
+.e-2e3de5ec > .holder.filled.blue { background: var(--ot-blue); border-color: var(--ot-blue); color: white; }
+.e-2e3de5ec > .holder.filled.orange { background: var(--ot-orange); border-color: var(--ot-orange); color: white; }
+.e-2e3de5ec > .holder.filled.brand { background: var(--ot-brand); border-color: var(--ot-brand); color: white; }
+
+.e-2e3de5ec > .holder.filled > .body > .title,
+.e-2e3de5ec > .holder.filled > .body > .text
+{
+	color: white;
+}
+
+.e-2e3de5ec > .holder.filled > .body > .text
+{
+	opacity: 0.9;
+}
 
-/* Size variants */
+/* ===== ACCENT VARIANT (left border accent bar) ===== */
 
-.e-2e3de5ec > .holder.size-s { padding: var(--ot-spacing-x) var(--ot-spacing-s); font-size: var(--ot-size-s); }
-.e-2e3de5ec > .holder.size-m { padding: var(--ot-spacing-s) var(--ot-spacing-m); font-size: var(--ot-size-m); }
-.e-2e3de5ec > .holder.size-l { padding: var(--ot-spacing-m) var(--ot-spacing-l); font-size: var(--ot-size-m); }
+.e-2e3de5ec > .holder.accent
+{
+	border-left-width: 3px;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.e-2e3de5ec > .holder.accent.red { border-left-color: var(--ot-red); }
+.e-2e3de5ec > .holder.accent.green { border-left-color: var(--ot-green); }
+.e-2e3de5ec > .holder.accent.blue { border-left-color: var(--ot-blue); }
+.e-2e3de5ec > .holder.accent.orange { border-left-color: var(--ot-orange); }
+.e-2e3de5ec > .holder.accent.brand { border-left-color: var(--ot-brand); }
+
+/* ===== BACKGROUND VARIANTS (neutral) ===== */
+
+.e-2e3de5ec > .holder.bg-1
+{
+	background: var(--ot-bg-1);
+	border-color: var(--ot-bg-1-border);
+	color: var(--ot-text-2);
+}
+
+.e-2e3de5ec > .holder.bg-2
+{
+	background: var(--ot-bg-2);
+	border-color: var(--ot-bg-2-border);
+	color: var(--ot-text-2);
+}
+
+.e-2e3de5ec > .holder.bg-3
+{
+	background: var(--ot-bg-3);
+	border-color: var(--ot-bg-3-border);
+	color: var(--ot-text-2);
+}
+
+.e-2e3de5ec > .holder.bg-4
+{
+	background: var(--ot-bg-4);
+	border-color: var(--ot-bg-4-border);
+	color: var(--ot-text-2);
+}
+
+.e-2e3de5ec > .holder.bg-1 > .body > .title,
+.e-2e3de5ec > .holder.bg-2 > .body > .title,
+.e-2e3de5ec > .holder.bg-3 > .body > .title,
+.e-2e3de5ec > .holder.bg-4 > .body > .title
+{
+	color: var(--ot-text-1);
+}
+
+/* ===== SIZES ===== */
+
+.e-2e3de5ec > .holder.size-s
+{
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	gap: var(--ot-spacing-s);
+}
+
+.e-2e3de5ec > .holder.size-s > .icon
+{
+	font-size: 17px;
+}
+
+.e-2e3de5ec > .holder.size-s > .body > .title
+{
+	font-size: 12px;
+}
+
+.e-2e3de5ec > .holder.size-s > .body > .text
+{
+	font-size: 11.5px;
+}
+
+.e-2e3de5ec > .holder.size-s > .close
+{
+	width: 24px;
+	height: 24px;
+}
+
+.e-2e3de5ec > .holder.size-s > .close > i
+{
+	font-size: 15px;
+}
+
+.e-2e3de5ec > .holder.size-l
+{
+	padding: var(--ot-spacing-l);
+	gap: var(--ot-spacing-m);
+}
+
+.e-2e3de5ec > .holder.size-l > .icon
+{
+	font-size: 24px;
+}
+
+.e-2e3de5ec > .holder.size-l > .body > .title
+{
+	font-size: 15px;
+}
+
+.e-2e3de5ec > .holder.size-l > .body > .text
+{
+	font-size: 13.5px;
+}
+
+.e-2e3de5ec > .holder.size-l > .close
+{
+	width: 32px;
+	height: 32px;
+}
+
+.e-2e3de5ec > .holder.size-l > .close > i
+{
+	font-size: 20px;
+}

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

@@ -1,33 +1,73 @@
 onetype.AddonReady('elements', (elements) =>
 {
+	const DEFAULT_ICONS = {
+		red: 'error',
+		orange: 'warning',
+		green: 'check_circle',
+		blue: 'info',
+		brand: 'bolt'
+	};
+
 	elements.ItemAdd({
 		id: 'global-notice',
 		icon: 'info',
 		name: 'Notice',
-		description: 'Notice banner with icon, text, and color variants.',
+		description: 'Notice banner with icon, title, text, actions slot and close button.',
 		category: 'Global',
 		author: 'OneType',
 		config: {
 			icon: {
-				type: 'string',
-				value: 'info'
+				type: 'string'
+			},
+			title: {
+				type: 'string'
 			},
 			text: {
-				type: 'string',
-				value: ''
+				type: 'string'
+			},
+			closable: {
+				type: 'boolean'
 			},
 			variant: {
 				type: 'array',
-				value: ['red'],
-				options: ['red', 'green', 'blue', 'orange', 'brand', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
+				value: ['blue', 'size-m'],
+				options: ['red', 'green', 'blue', 'orange', 'brand', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'filled', 'accent', 'size-s', 'size-m', 'size-l']
+			},
+			_close: {
+				type: 'function'
 			}
 		},
 		render: function()
 		{
-			return `
-				<div :class="'holder ' + variant.join(' ')">
-					<i ot-if="icon" class="icon">{{ icon }}</i>
-					<span class="text">{{ text }}</span>
+			this.hasActions = !!this.Slots.actions;
+			this.closed = false;
+
+			const color = this.variant.find(v => DEFAULT_ICONS[v]);
+			this.resolvedIcon = this.icon || (color ? DEFAULT_ICONS[color] : 'info');
+
+			this.close = (event) =>
+			{
+				this.closed = true;
+
+				if(this._close)
+				{
+					this._close({ event });
+				}
+			};
+
+			return /* html */ `
+				<div ot-if="!closed" :class="'holder ' + variant.join(' ')">
+					<i class="icon">{{ resolvedIcon }}</i>
+					<div class="body">
+						<div ot-if="title" class="title">{{ title }}</div>
+						<div ot-if="text" class="text">{{ text }}</div>
+					</div>
+					<div ot-if="hasActions" class="actions">
+						<slot name="actions"></slot>
+					</div>
+					<button ot-if="closable" type="button" class="close" ot-click="close">
+						<i>close</i>
+					</button>
 				</div>
 			`;
 		}