@onetype/framework 2.0.40 → 2.0.42

package/lib/items/elements/form/button/button.css

@@ -0,0 +1,250 @@
+/* Root */
+
+.e-64e877b
+{
+	display: flex;
+}
+
+/* Holder */
+
+.e-64e877b > .holder
+{
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--ot-spacing-s);
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	padding: 0 var(--ot-spacing-m);
+	cursor: pointer;
+	outline: none;
+	background: transparent;
+	color: var(--ot-text-1);
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	text-decoration: none;
+	white-space: nowrap;
+	overflow: hidden;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+/* Content */
+
+.e-64e877b > .holder > .content
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--ot-spacing-s);
+}
+
+.e-64e877b > .holder > .content > .text
+{
+	line-height: 1;
+}
+
+/* Icons */
+
+.e-64e877b > .holder > .content > i
+{
+	font-size: 18px;
+	color: inherit;
+	transition: transform 0.15s ease;
+}
+
+.e-64e877b > .holder > .content > .left
+{
+	margin-right: -2px;
+}
+
+.e-64e877b > .holder > .content > .right
+{
+	margin-left: -2px;
+}
+
+/* Hover */
+
+.e-64e877b > .holder:hover
+{
+	transform: translateY(-1px);
+}
+
+.e-64e877b > .holder:hover > .content > .right
+{
+	transform: translateX(2px);
+}
+
+/* Active */
+
+.e-64e877b > .holder:active
+{
+	transform: translateY(0) scale(0.98);
+	transition-duration: 0.1s;
+}
+
+/* Focus */
+
+.e-64e877b > .holder:focus-visible
+{
+	outline: none;
+	box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-brand);
+}
+
+/* Disabled */
+
+.e-64e877b > .holder.disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+	pointer-events: none;
+	transform: none;
+}
+
+/* Loading */
+
+.e-64e877b > .holder.loading
+{
+	cursor: wait;
+	pointer-events: none;
+}
+
+/* Spinner */
+
+.e-64e877b > .holder > .spinner
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.e-64e877b > .holder > .spinner > i
+{
+	font-size: 18px;
+	animation: e-64e877b-spin 0.8s linear infinite;
+}
+
+@keyframes e-64e877b-spin
+{
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+/* Full width */
+
+.e-64e877b > .holder.full { width: 100%; }
+
+/* Rounded */
+
+.e-64e877b > .holder.rounded { border-radius: 100px; }
+
+/* Icon only */
+
+.e-64e877b > .holder.icon-only { padding: 0; aspect-ratio: 1; }
+.e-64e877b > .holder.icon-only > .content > i { margin: 0; }
+
+/* ---- Solid color variants ---- */
+
+.e-64e877b > .holder.brand { background: var(--ot-brand); border-color: var(--ot-brand); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px var(--ot-brand-opacity); }
+.e-64e877b > .holder.brand:hover { background: var(--ot-brand-hover); border-color: var(--ot-brand-hover); box-shadow: 0 4px 12px var(--ot-brand-opacity), 0 2px 4px rgba(0, 0, 0, 0.1); }
+.e-64e877b > .holder.brand:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-brand); }
+
+.e-64e877b > .holder.blue { background: var(--ot-blue); border-color: var(--ot-blue); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px var(--ot-blue-opacity); }
+.e-64e877b > .holder.blue:hover { background: var(--ot-blue-hover); border-color: var(--ot-blue-hover); box-shadow: 0 4px 12px var(--ot-blue-opacity), 0 2px 4px rgba(0, 0, 0, 0.1); }
+.e-64e877b > .holder.blue:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-blue); }
+
+.e-64e877b > .holder.red { background: var(--ot-red); border-color: var(--ot-red); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px var(--ot-red-opacity); }
+.e-64e877b > .holder.red:hover { background: var(--ot-red-hover); border-color: var(--ot-red-hover); box-shadow: 0 4px 12px var(--ot-red-opacity), 0 2px 4px rgba(0, 0, 0, 0.1); }
+.e-64e877b > .holder.red:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-red); }
+
+.e-64e877b > .holder.orange { background: var(--ot-orange); border-color: var(--ot-orange); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px var(--ot-orange-opacity); }
+.e-64e877b > .holder.orange:hover { background: var(--ot-orange-hover); border-color: var(--ot-orange-hover); box-shadow: 0 4px 12px var(--ot-orange-opacity), 0 2px 4px rgba(0, 0, 0, 0.1); }
+.e-64e877b > .holder.orange:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-orange); }
+
+.e-64e877b > .holder.green { background: var(--ot-green); border-color: var(--ot-green); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px var(--ot-green-opacity); }
+.e-64e877b > .holder.green:hover { background: var(--ot-green-hover); border-color: var(--ot-green-hover); box-shadow: 0 4px 12px var(--ot-green-opacity), 0 2px 4px rgba(0, 0, 0, 0.1); }
+.e-64e877b > .holder.green:focus-visible { box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-green); }
+
+/* ---- Soft variants ---- */
+
+.e-64e877b > .holder.soft-brand { background: var(--ot-brand-opacity); border-color: transparent; color: var(--ot-brand); }
+.e-64e877b > .holder.soft-brand:hover { background: var(--ot-brand); color: white; }
+
+.e-64e877b > .holder.soft-blue { background: var(--ot-blue-opacity); border-color: transparent; color: var(--ot-blue); }
+.e-64e877b > .holder.soft-blue:hover { background: var(--ot-blue); color: white; }
+
+.e-64e877b > .holder.soft-red { background: var(--ot-red-opacity); border-color: transparent; color: var(--ot-red); }
+.e-64e877b > .holder.soft-red:hover { background: var(--ot-red); color: white; }
+
+.e-64e877b > .holder.soft-orange { background: var(--ot-orange-opacity); border-color: transparent; color: var(--ot-orange); }
+.e-64e877b > .holder.soft-orange:hover { background: var(--ot-orange); color: white; }
+
+.e-64e877b > .holder.soft-green { background: var(--ot-green-opacity); border-color: transparent; color: var(--ot-green); }
+.e-64e877b > .holder.soft-green:hover { background: var(--ot-green); color: white; }
+
+/* ---- Outline variants ---- */
+
+.e-64e877b > .holder.outline-brand { background: transparent; border-color: var(--ot-brand); color: var(--ot-brand); }
+.e-64e877b > .holder.outline-brand:hover { background: var(--ot-brand-opacity); }
+
+.e-64e877b > .holder.outline-blue { background: transparent; border-color: var(--ot-blue); color: var(--ot-blue); }
+.e-64e877b > .holder.outline-blue:hover { background: var(--ot-blue-opacity); }
+
+.e-64e877b > .holder.outline-red { background: transparent; border-color: var(--ot-red); color: var(--ot-red); }
+.e-64e877b > .holder.outline-red:hover { background: var(--ot-red-opacity); }
+
+.e-64e877b > .holder.outline-orange { background: transparent; border-color: var(--ot-orange); color: var(--ot-orange); }
+.e-64e877b > .holder.outline-orange:hover { background: var(--ot-orange-opacity); }
+
+.e-64e877b > .holder.outline-green { background: transparent; border-color: var(--ot-green); color: var(--ot-green); }
+.e-64e877b > .holder.outline-green:hover { background: var(--ot-green-opacity); }
+
+/* ---- Background variants ---- */
+
+.e-64e877b > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); color: var(--ot-text-1); }
+.e-64e877b > .holder.bg-1:hover { background: var(--ot-bg-1-hover); border-color: var(--ot-bg-2-border); }
+
+.e-64e877b > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); color: var(--ot-text-1); }
+.e-64e877b > .holder.bg-2:hover { background: var(--ot-bg-2-hover); border-color: var(--ot-bg-3-border); }
+
+.e-64e877b > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); color: var(--ot-text-1); }
+.e-64e877b > .holder.bg-3:hover { background: var(--ot-bg-3-hover); border-color: var(--ot-bg-4-border); }
+
+.e-64e877b > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); color: var(--ot-text-1); }
+.e-64e877b > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
+
+/* ---- Special variants ---- */
+
+.e-64e877b > .holder.ghost { background: transparent; border-color: transparent; color: var(--ot-text-2); }
+.e-64e877b > .holder.ghost:hover { background: var(--ot-bg-2); color: var(--ot-text-1); }
+
+.e-64e877b > .holder.border { background: transparent; border-color: var(--ot-bg-1-border); color: var(--ot-text-1); }
+.e-64e877b > .holder.border:hover { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }
+
+.e-64e877b > .holder.transparent { background: transparent; border-color: transparent; color: var(--ot-text-1); }
+.e-64e877b > .holder.transparent:hover { background: var(--ot-bg-2-opacity); }
+
+.e-64e877b > .holder.glass { background: var(--ot-bg-1-opacity); border-color: var(--ot-bg-2-border); color: var(--ot-text-1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
+.e-64e877b > .holder.glass:hover { background: var(--ot-bg-2-opacity); border-color: var(--ot-bg-3-border); }
+
+/* ---- Size variants ---- */
+
+.e-64e877b > .holder.size-s { height: var(--ot-height-s); padding: 0 var(--ot-spacing-s); font-size: var(--ot-size-s); gap: var(--ot-spacing-x); }
+.e-64e877b > .holder.size-s > .content { gap: var(--ot-spacing-x); }
+.e-64e877b > .holder.size-s > .content > i, .e-64e877b > .holder.size-s > .spinner > i { font-size: 14px; }
+
+.e-64e877b > .holder.size-m { height: var(--ot-height-m); padding: 0 var(--ot-spacing-m); font-size: var(--ot-size-m); gap: var(--ot-spacing-s); }
+.e-64e877b > .holder.size-m > .content { gap: var(--ot-spacing-s); }
+.e-64e877b > .holder.size-m > .content > i, .e-64e877b > .holder.size-m > .spinner > i { font-size: 18px; }
+
+.e-64e877b > .holder.size-l { height: var(--ot-height-l); padding: 0 var(--ot-spacing-l); font-size: var(--ot-size-l); gap: var(--ot-spacing-m); }
+.e-64e877b > .holder.size-l > .content { gap: var(--ot-spacing-m); }
+.e-64e877b > .holder.size-l > .content > i, .e-64e877b > .holder.size-l > .spinner > i { font-size: 22px; }
+
+/* Icon-only size */
+
+.e-64e877b > .holder.icon-only.size-s { width: var(--ot-height-s); padding: 0; }
+.e-64e877b > .holder.icon-only.size-m { width: var(--ot-height-m); padding: 0; }
+.e-64e877b > .holder.icon-only.size-l { width: var(--ot-height-l); padding: 0; }

package/lib/items/elements/form/button/button.js

@@ -4,23 +4,17 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'form-button',
 		icon: 'smart_button',
 		name: 'Button',
-		description: 'Premium button with icons, variants, animations, and ripple effects.',
+		description: 'Button with icons, loading state, and variant support.',
 		category: 'Form',
 		author: 'OneType',
-		example: [
-			{ title: 'Solid', code: '<e-button text="Brand" icon="add"></e-button>' },
-			{ title: 'Soft', code: '<e-button text="Soft" icon="cloud" :variant="[\'soft-brand\']"></e-button>' },
-			{ title: 'Outline', code: '<e-button text="Outline" icon="edit" :variant="[\'outline-brand\']"></e-button>' },
-			{ title: 'Border', code: '<e-button text="Border" :variant="[\'border\']"></e-button>' },
-			{ title: 'Ghost', code: '<e-button text="Ghost" :variant="[\'ghost\']"></e-button>' },
-			{ title: 'Icon Only', code: '<e-button icon="add" :variant="[\'icon-only\']"></e-button>' }
-		],
 		config: {
 			icon: {
 				type: 'string',
+				value: ''
 			},
 			iconRight: {
 				type: 'string',
+				value: ''
 			},
 			text: {
 				type: 'string',
@@ -28,9 +22,11 @@ onetype.AddonReady('elements', (elements) =>
 			},
 			href: {
 				type: 'string',
+				value: ''
 			},
 			target: {
 				type: 'string',
+				value: null,
 				options: ['_blank', '_self', '_parent', '_top']
 			},
 			type: {
@@ -65,39 +61,38 @@ onetype.AddonReady('elements', (elements) =>
 		},
 		render: function()
 		{
-			this.handleClick = (e) =>
+			this.handle = (e) =>
 			{
-				if(this.disabled || this.loading)
-				{
-					return;
-				}
+				if (this.disabled || this.loading) return;
 
-				if(this._click)
+				if (this._click)
 				{
 					this._click(e);
 				}
 			};
 
+			const classes = "'holder ' + variant.join(' ') + (disabled ? ' disabled' : '') + (loading ? ' loading' : '')";
+
 			const content = `
 				<span ot-if="loading" class="spinner"><i>progress_activity</i></span>
 				<span ot-if="!loading" class="content">
-					<i ot-if="icon" class="icon-left">{{ icon }}</i>
+					<i ot-if="icon" class="left">{{ icon }}</i>
 					<span ot-if="text && !variant.includes('icon-only')" class="text">{{ text }}</span>
-					<i ot-if="iconRight" class="icon-right">{{ iconRight }}</i>
+					<i ot-if="iconRight" class="right">{{ iconRight }}</i>
 				</span>
 			`;
 
-			if(this.href)
+			if (this.href)
 			{
 				return `
-					<a class="holder" :href="href" :target="target" :variant="variant.join(' ')" :disabled="disabled" :loading="loading" ot-click="handleClick">
+					<a :class="${classes}" :href="href" :target="target" ot-click="handle">
 						${content}
 					</a>
 				`;
 			}
 
 			return `
-				<button class="holder" :type="type" :variant="variant.join(' ')" :disabled="disabled" :loading="loading" ot-click="handleClick">
+				<button :class="${classes}" :type="type" :disabled="disabled" ot-click="handle">
 					${content}
 				</button>
 			`;

package/lib/items/elements/form/checkbox/checkbox.css

@@ -0,0 +1,109 @@
+/* Root */
+
+.e-f249baa
+{
+	display: inline-flex;
+}
+
+/* Holder */
+
+.e-f249baa > .holder
+{
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	cursor: pointer;
+}
+
+/* Input */
+
+.e-f249baa > .holder > input
+{
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	width: 0;
+	height: 0;
+	margin: 0;
+}
+
+/* Label */
+
+.e-f249baa > .holder > .label
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-1);
+	user-select: none;
+}
+
+/* Mark */
+
+.e-f249baa > .holder > .mark
+{
+	display: block;
+	border-radius: var(--ot-radius-s);
+	border: 1px solid transparent;
+	position: relative;
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.e-f249baa > .holder > .mark::after
+{
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	border: solid white;
+	transform: translate(-50%, -60%) rotate(45deg) scale(0);
+	transition: transform 0.15s ease;
+}
+
+.e-f249baa > .holder > input:checked ~ .mark::after
+{
+	transform: translate(-50%, -60%) rotate(45deg) scale(1);
+}
+
+.e-f249baa > .holder > input:disabled ~ .mark
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Size variants */
+
+.e-f249baa > .holder.size-s > .mark { width: 16px; height: 16px; }
+.e-f249baa > .holder.size-s > .mark::after { width: 3px; height: 6px; border-width: 0 1.5px 1.5px 0; }
+.e-f249baa > .holder.size-s > .label { font-size: var(--ot-size-s); }
+.e-f249baa > .holder.size-m > .mark { width: 20px; height: 20px; }
+.e-f249baa > .holder.size-m > .mark::after { width: 4px; height: 8px; border-width: 0 2px 2px 0; }
+.e-f249baa > .holder.size-m > .label { font-size: var(--ot-size-m); }
+.e-f249baa > .holder.size-l > .mark { width: 24px; height: 24px; }
+.e-f249baa > .holder.size-l > .mark::after { width: 5px; height: 10px; border-width: 0 2.5px 2.5px 0; }
+.e-f249baa > .holder.size-l > .label { font-size: var(--ot-size-m); }
+
+/* Transparent variant */
+
+.e-f249baa > .holder.transparent > .mark { background: transparent; border-color: transparent; }
+.e-f249baa > .holder.transparent > .mark::after { border-color: var(--ot-text-1); }
+
+/* Border variant */
+
+.e-f249baa > .holder.border > .mark { background: transparent; border-color: var(--ot-bg-1-border); }
+.e-f249baa > .holder.border:hover > .mark { border-color: var(--ot-bg-2-border); }
+.e-f249baa > .holder.border > input:checked ~ .mark { border-color: var(--ot-brand); background: var(--ot-brand); }
+
+/* Background variants */
+
+.e-f249baa > .holder.bg-1 > .mark { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
+.e-f249baa > .holder.bg-1:hover > .mark { background: var(--ot-bg-1-hover); }
+.e-f249baa > .holder.bg-1 > input:checked ~ .mark { border-color: var(--ot-brand); background: var(--ot-brand); }
+.e-f249baa > .holder.bg-2 > .mark { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
+.e-f249baa > .holder.bg-2:hover > .mark { background: var(--ot-bg-2-hover); }
+.e-f249baa > .holder.bg-2 > input:checked ~ .mark { border-color: var(--ot-brand); background: var(--ot-brand); }
+.e-f249baa > .holder.bg-3 > .mark { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
+.e-f249baa > .holder.bg-3:hover > .mark { background: var(--ot-bg-3-hover); }
+.e-f249baa > .holder.bg-3 > input:checked ~ .mark { border-color: var(--ot-brand); background: var(--ot-brand); }
+.e-f249baa > .holder.bg-4 > .mark { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
+.e-f249baa > .holder.bg-4:hover > .mark { background: var(--ot-bg-4-hover); }
+.e-f249baa > .holder.bg-4 > input:checked ~ .mark { border-color: var(--ot-brand); background: var(--ot-brand); }

package/lib/items/elements/form/checkbox/checkbox.js

@@ -1,58 +1,62 @@
 onetype.AddonReady('elements', (elements) =>
 {
-    elements.ItemAdd({
-        id: 'form-checkbox',
-        icon: 'check_box',
-        name: 'Checkbox',
-        description: 'Checkbox input with custom styling, indeterminate state support, and variant options for different UI themes.',
-        category: 'Form',
-        author: 'OneType',
-        config: {
-            name: {
-                type: 'string'
-            },
-            value: {
-                type: 'string'
-            },
-            checked: {
-                type: 'boolean'
-            },
-            disabled: {
-                type: 'boolean'
-            },
-            variant: {
-                type: 'array',
-                value: ['bg-1'],
-                options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
-            },
-            size: {
-                type: 'string',
-                value: 'm',
-                options: ['s', 'm', 'l']
-            },
-            onChange: {
-                type: 'function'
-            },
-            onClick: {
-                type: 'function'
-            }
-        },
-        render: function()
-        {
-            return `
-                <div class="holder" :variant="variant.join(' ')" :size="size">
-                    <input
-                        type="checkbox"
-                        :name="name"
-                        :value="value"
-                        :checked="checked"
-                        :disabled="disabled"
-                        ot-change="onChange"
-                        ot-click="onClick"
-                    />
-                    <span class="checkbox-mark"></span>
-                </div>
-            `;
-        }
+	elements.ItemAdd({
+		id: 'form-checkbox',
+		icon: 'check_box',
+		name: 'Checkbox',
+		description: 'Checkbox input with custom styling.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string',
+				value: ''
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			value: {
+				type: 'string',
+				value: ''
+			},
+			checked: {
+				type: 'boolean',
+				value: false
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-1', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'transparent', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			},
+			_click: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			return `
+				<label :class="'holder ' + variant.join(' ')">
+					<input
+						type="checkbox"
+						:name="name"
+						:value="value"
+						:checked="checked"
+						:disabled="disabled"
+						ot-change="_change"
+						ot-click="_click"
+					/>
+					<span class="mark"></span>
+					<span ot-if="label" class="label">{{ label }}</span>
+				</label>
+			`;
+		}
 	});
 });