@onetype/framework 2.0.41 → 2.0.42

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

@@ -1,79 +1,88 @@
 onetype.AddonReady('elements', (elements) =>
 {
-    elements.ItemAdd({
-        id: 'form-input',
-        icon: 'input',
-        name: 'Input',
-        description: 'Text input field with variant support, placeholder, validation, and built-in error states. Supports all standard input types.',
-        category: 'Form',
-        author: 'OneType',
-        config: {
-            value: {
-                type: 'string'
-            },
-            name: {
-                type: 'string'
-            },
-            type: {
-                type: 'string',
-                value: 'text'
-            },
-            placeholder: {
-                type: 'string'
-            },
-            maxLength: {
-                type: 'number'
-            },
-            disabled: {
-                type: 'boolean'
-            },
-            readonly: {
-                type: 'boolean'
-            },
-            variant: {
-                type: 'array',
-                value: ['bg-2', 'border-full'],
-                options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border-full']
-            },
-            size: {
-                type: 'string',
-                value: 'm',
-                options: ['s', 'm', 'l']
-            },
-            _input: {
-                type: 'function'
-            },
-            _change: {
-                type: 'function'
-            },
-            _focus: {
-                type: 'function'
-            },
-            _blur: {
-                type: 'function'
-            }
-        },
-        render: function()
-        {
-            return `
-                <input
-                    class="holder"
-                    :variant="variant.join(' ')"
-                    :size="size"
-                    :value="value"
-                    :type="type"
-                    :placeholder="placeholder"
-                    :name="name"
-                    :maxlength="maxLength"
-                    :disabled="disabled"
-                    :readonly="readonly"
-                    autocomplete="off"
-                    ot-input="_input"
-                    ot-change="_change"
-                    ot-focus="_focus"
-                    ot-blur="_blur"
-                />
-            `;
-        }
+	elements.ItemAdd({
+		id: 'form-input',
+		icon: 'input',
+		name: 'Input',
+		description: 'Text input field with icon support and variant options.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'string',
+				value: ''
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			type: {
+				type: 'string',
+				value: 'text'
+			},
+			placeholder: {
+				type: 'string',
+				value: ''
+			},
+			icon: {
+				type: 'string',
+				value: ''
+			},
+			iconRight: {
+				type: 'string',
+				value: ''
+			},
+			maxlength: {
+				type: 'number'
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			readonly: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2', 'border', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_input: {
+				type: 'function'
+			},
+			_change: {
+				type: 'function'
+			},
+			_focus: {
+				type: 'function'
+			},
+			_blur: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<i ot-if="icon" class="icon">{{ icon }}</i>
+					<input
+						:value="value"
+						:type="type"
+						:placeholder="placeholder"
+						:name="name"
+						:maxlength="maxlength"
+						:disabled="disabled"
+						:readonly="readonly"
+						autocomplete="off"
+						ot-input="_input"
+						ot-change="_change"
+						ot-focus="_focus"
+						ot-blur="_blur"
+					/>
+					<i ot-if="iconRight" class="icon">{{ iconRight }}</i>
+				</div>
+			`;
+		}
 	});
 });

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

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

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

@@ -1,58 +1,62 @@
 onetype.AddonReady('elements', (elements) =>
 {
-    elements.ItemAdd({
-        id: 'form-radio',
-        icon: 'radio_button_checked',
-        name: 'Radio',
-        description: 'Radio button input with custom styling, group support, and multiple size options for different form contexts.',
-        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="radio"
-                        :name="name"
-                        :value="value"
-                        :checked="checked"
-                        :disabled="disabled"
-                        ot-change="onChange"
-                        ot-click="onClick"
-                    />
-                    <span class="radio-mark"></span>
-                </div>
-            `;
-        }
+	elements.ItemAdd({
+		id: 'form-radio',
+		icon: 'radio_button_checked',
+		name: 'Radio',
+		description: 'Radio button with custom styling and group support.',
+		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="radio"
+						: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>
+			`;
+		}
 	});
 });

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

@@ -1,4 +1,12 @@
-/* Base */
+/* Root */
+
+.e-13e502f0
+{
+	display: flex;
+}
+
+/* Holder */
+
 .e-13e502f0 > .holder
 {
 	display: inline-flex;
@@ -6,90 +14,44 @@
 	gap: var(--ot-spacing-x);
 }
 
+/* Star */
+
 .e-13e502f0 > .holder > .star
 {
-	font-size: 24px;
 	color: var(--ot-bg-3);
 	cursor: pointer;
-	transition: color 0.2s ease, transform 0.2s ease;
+	transition: color 0.15s ease, transform 0.15s ease;
 	user-select: none;
 }
 
-.e-13e502f0 > .holder > .star.filled
-{
-	color: var(--ot-brand);
-}
-
 .e-13e502f0 > .holder > .star:hover
 {
 	transform: scale(1.1);
 }
 
-/* Variants - Readonly */
-.e-13e502f0 > .holder[variant*="readonly"] > .star
+/* Readonly */
+
+.e-13e502f0 > .holder.readonly > .star
 {
 	cursor: default;
 	pointer-events: none;
 }
 
-.e-13e502f0 > .holder[variant*="readonly"] > .star:hover
-{
-	transform: none;
-}
+/* Color variants */
 
-/* Variants - Colors */
-.e-13e502f0 > .holder[variant*="brand"] > .star.filled
-{
-	color: var(--ot-brand);
-}
+.e-13e502f0 > .holder.brand > .star.filled { color: var(--ot-brand); }
+.e-13e502f0 > .holder.blue > .star.filled { color: var(--ot-blue); }
+.e-13e502f0 > .holder.red > .star.filled { color: var(--ot-red); }
+.e-13e502f0 > .holder.orange > .star.filled { color: var(--ot-orange); }
+.e-13e502f0 > .holder.green > .star.filled { color: var(--ot-green); }
 
-.e-13e502f0 > .holder[variant*="blue"] > .star.filled
-{
-	color: var(--ot-blue);
-}
+/* Size variants */
 
-.e-13e502f0 > .holder[variant*="red"] > .star.filled
-{
-	color: var(--ot-red);
-}
+.e-13e502f0 > .holder.size-s { gap: 2px; }
+.e-13e502f0 > .holder.size-s > .star { font-size: 16px; }
 
-.e-13e502f0 > .holder[variant*="orange"] > .star.filled
-{
-	color: var(--ot-orange);
-}
+.e-13e502f0 > .holder.size-m { gap: var(--ot-spacing-x); }
+.e-13e502f0 > .holder.size-m > .star { font-size: 24px; }
 
-.e-13e502f0 > .holder[variant*="green"] > .star.filled
-{
-	color: var(--ot-green);
-}
-
-/* Variants - Sizes */
-.e-13e502f0 > .holder[variant*="size-s"]
-{
-	gap: 2px;
-}
-
-.e-13e502f0 > .holder[variant*="size-s"] > .star
-{
-	font-size: 16px;
-}
-
-.e-13e502f0 > .holder[variant*="size-m"]
-{
-	gap: var(--ot-spacing-x);
-}
-
-.e-13e502f0 > .holder[variant*="size-m"] > .star
-{
-	font-size: 24px;
-}
-
-.e-13e502f0 > .holder[variant*="size-l"]
-{
-	gap: var(--ot-spacing-s);
-}
-
-.e-13e502f0 > .holder[variant*="size-l"] > .star
-{
-	font-size: 32px;
-}
+.e-13e502f0 > .holder.size-l { gap: var(--ot-spacing-s); }
+.e-13e502f0 > .holder.size-l > .star { font-size: 32px; }

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

@@ -4,7 +4,7 @@ onetype.AddonReady('elements', (elements) =>
 		id: 'form-rating',
 		icon: 'star',
 		name: 'Rating',
-		description: 'Star rating input with interactive and readonly modes.',
+		description: 'Star rating with interactive and readonly modes.',
 		category: 'Form',
 		author: 'OneType',
 		config: {
@@ -25,7 +25,7 @@ onetype.AddonReady('elements', (elements) =>
 				value: ['brand', 'size-m'],
 				options: ['brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
 			},
-			onChange: {
+			_change: {
 				type: 'function'
 			}
 		},
@@ -33,54 +33,50 @@ onetype.AddonReady('elements', (elements) =>
 		{
 			this.hover = null;
 
-			this.getStars = () =>
+			this.stars = () =>
 			{
-				const stars = [];
+				const result = [];
 				for (let i = 0; i < this.max; i++)
 				{
-					stars.push(i);
+					result.push(i);
 				}
-				return stars;
+				return result;
 			};
 
-			this.isFilled = (index) =>
+			this.filled = (index) =>
 			{
 				return this.hover !== null ? index <= this.hover : index < this.value;
 			};
 
-			this.handleClick = (index) =>
+			this.select = (index) =>
 			{
 				if (this.readonly) return;
 				this.value = index + 1;
-				if (this.onChange)
+				if (this._change)
 				{
-					this.onChange(this.value);
+					this._change(this.value);
 				}
 			};
 
-			this.handleMouseEnter = (index) =>
+			this.enter = (index) =>
 			{
 				if (this.readonly) return;
 				this.hover = index;
 			};
 
-			this.handleMouseLeave = () =>
+			this.leave = () =>
 			{
 				if (this.readonly) return;
 				this.hover = null;
 			};
 
 			return `
-				<div
-					class="holder"
-					:variant="variant.join(' ') + (readonly ? ' readonly' : '')"
-					ot-mouse-leave="handleMouseLeave"
-				>
+				<div :class="'holder ' + variant.join(' ') + (readonly ? ' readonly' : '')" ot-mouse-leave="leave">
 					<i
-						ot-for="index in getStars()"
-						:class="'star' + (isFilled(index) ? ' filled' : '')"
-						ot-click="() => handleClick(index)"
-						ot-mouse-enter="() => handleMouseEnter(index)"
+						ot-for="index in stars()"
+						:class="'star' + (filled(index) ? ' filled' : '')"
+						ot-click="() => select(index)"
+						ot-mouse-enter="() => enter(index)"
 					>star</i>
 				</div>
 			`;