@onetype/framework 2.0.21 → 2.0.24

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

@@ -0,0 +1,121 @@
+/* Variants */
+.e-206433b8 > .holder[variant="transparent"] .radio-mark
+{
+    background: transparent;
+    border-color: transparent;
+}
+
+.e-206433b8 > .holder[variant="transparent"] .radio-mark::after
+{
+    background: var(--ot-text-1);
+}
+
+.e-206433b8 > .holder[variant="border"] .radio-mark
+{
+    background: transparent;
+    border-color: var(--ot-bg-1-border);
+}
+
+.e-206433b8 > .holder[variant="border"]:hover .radio-mark
+{
+    border-color: var(--ot-bg-2-border);
+}
+
+.e-206433b8 > .holder[variant="border"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-206433b8 > .holder[variant="border"] .radio-mark::after
+{
+    background: white;
+}
+
+.e-206433b8 > .holder[variant="bg-1"] .radio-mark
+{
+    background: var(--ot-bg-1);
+    border-color: var(--ot-bg-1-border);
+}
+
+.e-206433b8 > .holder[variant="bg-1"]:hover .radio-mark
+{
+    background: var(--ot-bg-1-hover);
+}
+
+.e-206433b8 > .holder[variant="bg-1"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-206433b8 > .holder[variant="bg-1"] .radio-mark::after
+{
+    background: white;
+}
+
+.e-206433b8 > .holder[variant="bg-2"] .radio-mark
+{
+    background: var(--ot-bg-2);
+    border-color: var(--ot-bg-2-border);
+}
+
+.e-206433b8 > .holder[variant="bg-2"]:hover .radio-mark
+{
+    background: var(--ot-bg-2-hover);
+}
+
+.e-206433b8 > .holder[variant="bg-2"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-206433b8 > .holder[variant="bg-2"] .radio-mark::after
+{
+    background: white;
+}
+
+.e-206433b8 > .holder[variant="bg-3"] .radio-mark
+{
+    background: var(--ot-bg-3);
+    border-color: var(--ot-bg-3-border);
+}
+
+.e-206433b8 > .holder[variant="bg-3"]:hover .radio-mark
+{
+    background: var(--ot-bg-3-hover);
+}
+
+.e-206433b8 > .holder[variant="bg-3"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-206433b8 > .holder[variant="bg-3"] .radio-mark::after
+{
+    background: white;
+}
+
+.e-206433b8 > .holder[variant="bg-4"] .radio-mark
+{
+    background: var(--ot-bg-4);
+    border-color: var(--ot-bg-4-border);
+}
+
+.e-206433b8 > .holder[variant="bg-4"]:hover .radio-mark
+{
+    background: var(--ot-bg-4-hover);
+}
+
+.e-206433b8 > .holder[variant="bg-4"] input[type="radio"]:checked ~ .radio-mark
+{
+    border-color: var(--ot-brand);
+    background: var(--ot-brand);
+}
+
+.e-206433b8 > .holder[variant="bg-4"] .radio-mark::after
+{
+    background: white;
+}

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

@@ -0,0 +1,95 @@
+/* Base */
+.e-13e502f0 > .holder
+{
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+}
+
+.e-13e502f0 > .holder > .star
+{
+	font-size: 24px;
+	color: var(--ot-bg-3);
+	cursor: pointer;
+	transition: color 0.2s ease, transform 0.2s 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
+{
+	cursor: default;
+	pointer-events: none;
+}
+
+.e-13e502f0 > .holder[variant*="readonly"] > .star:hover
+{
+	transform: none;
+}
+
+/* Variants - Colors */
+.e-13e502f0 > .holder[variant*="brand"] > .star.filled
+{
+	color: var(--ot-brand);
+}
+
+.e-13e502f0 > .holder[variant*="blue"] > .star.filled
+{
+	color: var(--ot-blue);
+}
+
+.e-13e502f0 > .holder[variant*="red"] > .star.filled
+{
+	color: var(--ot-red);
+}
+
+.e-13e502f0 > .holder[variant*="orange"] > .star.filled
+{
+	color: var(--ot-orange);
+}
+
+.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;
+}

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

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

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

@@ -0,0 +1,129 @@
+/* Base */
+.e-5c75a80e
+{
+	display: flex;
+	width: 100%;
+}
+
+.e-5c75a80e > .holder
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-m);
+	width: 100%;
+}
+
+.e-5c75a80e > .holder > .header
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-x);
+}
+
+.e-5c75a80e > .holder > .header > h3
+{
+	margin: 0;
+	font-size: 18px;
+	font-weight: 600;
+	color: var(--ot-text-1);
+	line-height: 1.3;
+}
+
+.e-5c75a80e > .holder > .header > p
+{
+	margin: 0;
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	line-height: 1.5;
+}
+
+.e-5c75a80e > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+}
+
+.e-5c75a80e > .holder > .content div
+{
+	width: 100%;
+}
+
+/* Variants - Background */
+.e-5c75a80e > .holder[variant*="bg-1"] > .content
+{
+	background: var(--ot-bg-1);
+}
+
+.e-5c75a80e > .holder[variant*="bg-2"] > .content
+{
+	background: var(--ot-bg-2);
+}
+
+.e-5c75a80e > .holder[variant*="bg-3"] > .content
+{
+	background: var(--ot-bg-3);
+}
+
+.e-5c75a80e > .holder[variant*="bg-4"] > .content
+{
+	background: var(--ot-bg-4);
+}
+
+/* Variants - Border */
+.e-5c75a80e > .holder[variant*="border"] > .content
+{
+	border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-1"][variant*="border"] > .content
+{
+	border-color: var(--ot-bg-1-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-2"][variant*="border"] > .content
+{
+	border-color: var(--ot-bg-2-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-3"][variant*="border"] > .content
+{
+	border-color: var(--ot-bg-3-border);
+}
+
+.e-5c75a80e > .holder[variant*="bg-4"][variant*="border"] > .content
+{
+	border-color: var(--ot-bg-4-border);
+}
+
+/* Actions */
+.e-5c75a80e .actions
+{
+	display: flex;
+	justify-content: flex-end;
+	padding: var(--ot-spacing-m);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+/* Sizes */
+.e-5c75a80e > .holder[variant*="size-s"] > .header > h3
+{
+	font-size: 16px;
+}
+
+.e-5c75a80e > .holder[variant*="size-s"] > .header > p
+{
+	font-size: var(--ot-size-s);
+}
+
+.e-5c75a80e > .holder[variant*="size-l"] > .header > h3
+{
+	font-size: 22px;
+}
+
+.e-5c75a80e > .holder[variant*="size-l"] > .header > p
+{
+	font-size: var(--ot-size-l);
+}

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

@@ -0,0 +1,40 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-section',
+		icon: 'view_agenda',
+		name: 'Form Section',
+		description: 'Form section with title and description, containing form fields.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			title: {
+				type: 'string',
+				value: 'Section Title'
+			},
+			description: {
+				type: 'string',
+				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'size-s', 'size-m', 'size-l']
+			}
+		},
+		render: function()
+		{
+			return `
+				<div class="holder" :variant="variant.join(' ')">
+					<div class="header">
+						<h3 ot-if="title">{{ title }}</h3>
+						<p ot-if="description">{{ description }}</p>
+					</div>
+					<div class="content">
+						<slot name="content"></slot>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,244 @@
+/* Base */
+.e-162fca34 > .holder
+{
+	position: relative;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+}
+
+.e-162fca34 > .holder > .track
+{
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 6px;
+	background: var(--ot-bg-3);
+	border-radius: var(--ot-radius-s);
+	pointer-events: none;
+}
+
+.e-162fca34 > .holder > .track > .fill
+{
+	height: 100%;
+	background: var(--ot-brand);
+	border-radius: var(--ot-radius-s);
+	transition: width 0.2s ease-out;
+}
+
+.e-162fca34 > .holder > .input
+{
+	position: relative;
+	width: 100%;
+	height: 20px;
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	cursor: pointer;
+	z-index: 1;
+}
+
+.e-162fca34 > .holder > .input::-webkit-slider-thumb
+{
+	-webkit-appearance: none;
+	appearance: none;
+	width: 18px;
+	height: 18px;
+	background: var(--ot-brand);
+	border: 2px solid var(--ot-bg-1);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: transform 0.2s ease;
+}
+
+.e-162fca34 > .holder > .input::-webkit-slider-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-162fca34 > .holder > .input::-moz-range-thumb
+{
+	width: 18px;
+	height: 18px;
+	background: var(--ot-brand);
+	border: 2px solid var(--ot-bg-1);
+	border-radius: 50%;
+	cursor: pointer;
+	transition: transform 0.2s ease;
+}
+
+.e-162fca34 > .holder > .input::-moz-range-thumb:hover
+{
+	transform: scale(1.1);
+}
+
+.e-162fca34 > .holder > .value
+{
+	min-width: 40px;
+	text-align: center;
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-text-1);
+}
+
+/* Variants - Colors */
+.e-162fca34 > .holder[variant*="brand"] > .track > .fill
+{
+	background: var(--ot-brand);
+}
+
+.e-162fca34 > .holder[variant*="brand"] > .input::-webkit-slider-thumb
+{
+	background: var(--ot-brand);
+}
+
+.e-162fca34 > .holder[variant*="brand"] > .input::-moz-range-thumb
+{
+	background: var(--ot-brand);
+}
+
+.e-162fca34 > .holder[variant*="blue"] > .track > .fill
+{
+	background: var(--ot-blue);
+}
+
+.e-162fca34 > .holder[variant*="blue"] > .input::-webkit-slider-thumb
+{
+	background: var(--ot-blue);
+}
+
+.e-162fca34 > .holder[variant*="blue"] > .input::-moz-range-thumb
+{
+	background: var(--ot-blue);
+}
+
+.e-162fca34 > .holder[variant*="red"] > .track > .fill
+{
+	background: var(--ot-red);
+}
+
+.e-162fca34 > .holder[variant*="red"] > .input::-webkit-slider-thumb
+{
+	background: var(--ot-red);
+}
+
+.e-162fca34 > .holder[variant*="red"] > .input::-moz-range-thumb
+{
+	background: var(--ot-red);
+}
+
+.e-162fca34 > .holder[variant*="orange"] > .track > .fill
+{
+	background: var(--ot-orange);
+}
+
+.e-162fca34 > .holder[variant*="orange"] > .input::-webkit-slider-thumb
+{
+	background: var(--ot-orange);
+}
+
+.e-162fca34 > .holder[variant*="orange"] > .input::-moz-range-thumb
+{
+	background: var(--ot-orange);
+}
+
+.e-162fca34 > .holder[variant*="green"] > .track > .fill
+{
+	background: var(--ot-green);
+}
+
+.e-162fca34 > .holder[variant*="green"] > .input::-webkit-slider-thumb
+{
+	background: var(--ot-green);
+}
+
+.e-162fca34 > .holder[variant*="green"] > .input::-moz-range-thumb
+{
+	background: var(--ot-green);
+}
+
+/* Variants - Sizes */
+.e-162fca34 > .holder[variant*="size-s"] > .track
+{
+	height: 4px;
+}
+
+.e-162fca34 > .holder[variant*="size-s"] > .input
+{
+	height: 16px;
+}
+
+.e-162fca34 > .holder[variant*="size-s"] > .input::-webkit-slider-thumb
+{
+	width: 14px;
+	height: 14px;
+}
+
+.e-162fca34 > .holder[variant*="size-s"] > .input::-moz-range-thumb
+{
+	width: 14px;
+	height: 14px;
+}
+
+.e-162fca34 > .holder[variant*="size-s"] > .value
+{
+	font-size: 11px;
+	min-width: 35px;
+}
+
+.e-162fca34 > .holder[variant*="size-m"] > .track
+{
+	height: 6px;
+}
+
+.e-162fca34 > .holder[variant*="size-m"] > .input
+{
+	height: 20px;
+}
+
+.e-162fca34 > .holder[variant*="size-m"] > .input::-webkit-slider-thumb
+{
+	width: 18px;
+	height: 18px;
+}
+
+.e-162fca34 > .holder[variant*="size-m"] > .input::-moz-range-thumb
+{
+	width: 18px;
+	height: 18px;
+}
+
+.e-162fca34 > .holder[variant*="size-m"] > .value
+{
+	font-size: var(--ot-size-s);
+	min-width: 40px;
+}
+
+.e-162fca34 > .holder[variant*="size-l"] > .track
+{
+	height: 8px;
+}
+
+.e-162fca34 > .holder[variant*="size-l"] > .input
+{
+	height: 24px;
+}
+
+.e-162fca34 > .holder[variant*="size-l"] > .input::-webkit-slider-thumb
+{
+	width: 22px;
+	height: 22px;
+}
+
+.e-162fca34 > .holder[variant*="size-l"] > .input::-moz-range-thumb
+{
+	width: 22px;
+	height: 22px;
+}
+
+.e-162fca34 > .holder[variant*="size-l"] > .value
+{
+	font-size: var(--ot-size-m);
+	min-width: 45px;
+}