@onetype/framework 2.0.41 → 2.0.43

package/addons/render/elements/front/items/self/form/color/color.js

@@ -0,0 +1,122 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-color',
+		icon: 'palette',
+		name: 'Color',
+		description: 'Color picker with swatch preview and hex input.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'string',
+				value: '#E27055'
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			placeholder: {
+				type: 'string',
+				value: 'transparent'
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2', 'border', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'transparent', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_input: {
+				type: 'function'
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.pick = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._input)
+				{
+					this._input({ event, value });
+				}
+			};
+
+			this.commit = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._change)
+				{
+					this._change({ event, value });
+				}
+			};
+
+			this.input = ({ event, value }) =>
+			{
+				let hex = value.trim();
+
+				if (hex && hex.charAt(0) !== '#')
+				{
+					hex = '#' + hex;
+				}
+
+				this.value = hex;
+
+				if (this._change)
+				{
+					this._change({ event, value: hex });
+				}
+			};
+
+			this.open = ({ event }) =>
+			{
+				if (this.disabled)
+				{
+					return;
+				}
+
+				event.target.closest('.holder').querySelector('.native').click();
+			};
+
+			this.clear = () =>
+			{
+				this.value = '';
+
+				if (this._change)
+				{
+					this._change({ event: null, value: '' });
+				}
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<input type="hidden" :name="name" :value="value" />
+					<button class="swatch" :style="'background: ' + (value || 'transparent')" ot-click="open" :disabled="disabled">
+						<input class="native" type="color" :value="value" ot-input="pick" ot-change="commit" tabindex="-1" />
+					</button>
+					<input
+						class="input"
+						type="text"
+						:value="value"
+						:placeholder="placeholder"
+						:disabled="disabled"
+						maxlength="7"
+						autocomplete="off"
+						spellcheck="false"
+						ot-change="input"
+					/>
+					<button ot-if="value && !disabled" class="clear" ot-click.stop="clear">
+						<i>close</i>
+					</button>
+				</div>
+			`;
+		}
+	});
+});

package/addons/render/elements/front/items/self/form/date/date.css

@@ -0,0 +1,84 @@
+/* Root */
+
+.e-283879c1
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-283879c1 > .holder
+{
+	display: flex;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+	background: transparent;
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+/* Input */
+
+.e-283879c1 > .holder > .input
+{
+	width: 100%;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: var(--ot-text-1);
+	font-family: inherit;
+	padding: 0 var(--ot-spacing-m);
+	color-scheme: dark;
+}
+
+.e-283879c1 > .holder > .input:disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.e-283879c1 > .holder > .input::-webkit-calendar-picker-indicator
+{
+	cursor: pointer;
+	opacity: 0.5;
+	transition: opacity 0.15s ease;
+}
+
+.e-283879c1 > .holder > .input::-webkit-calendar-picker-indicator:hover
+{
+	opacity: 1;
+}
+
+/* Background variants */
+
+.e-283879c1 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-283879c1 > .holder.bg-1:hover { background: var(--ot-bg-1-hover); }
+.e-283879c1 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-283879c1 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-283879c1 > .holder.bg-2:hover { background: var(--ot-bg-2-hover); }
+.e-283879c1 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-283879c1 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-283879c1 > .holder.bg-3:hover { background: var(--ot-bg-3-hover); }
+.e-283879c1 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-283879c1 > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-283879c1 > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
+.e-283879c1 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* Transparent variant */
+
+.e-283879c1 > .holder.transparent { background: transparent; }
+
+/* Border variant */
+
+.e-283879c1 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-283879c1 > .holder.border:focus-within { border-color: var(--ot-brand); }
+
+/* Size variants */
+
+.e-283879c1 > .holder.size-s { height: var(--ot-height-s); }
+.e-283879c1 > .holder.size-s > .input { font-size: var(--ot-size-s); padding: 0 var(--ot-spacing-s); }
+.e-283879c1 > .holder.size-m { height: var(--ot-height-m); }
+.e-283879c1 > .holder.size-m > .input { font-size: var(--ot-size-m); }
+.e-283879c1 > .holder.size-l { height: var(--ot-height-l); }
+.e-283879c1 > .holder.size-l > .input { font-size: var(--ot-size-m); padding: 0 var(--ot-spacing-l); }

package/addons/render/elements/front/items/self/form/date/date.js

@@ -0,0 +1,68 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-date',
+		icon: 'calendar_today',
+		name: 'Date',
+		description: 'Date picker input with native calendar.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			value: {
+				type: 'string',
+				value: ''
+			},
+			name: {
+				type: 'string',
+				value: ''
+			},
+			min: {
+				type: 'string',
+				value: ''
+			},
+			max: {
+				type: 'string',
+				value: ''
+			},
+			disabled: {
+				type: 'boolean',
+				value: false
+			},
+			variant: {
+				type: 'array',
+				value: ['bg-2', 'border', 'size-m'],
+				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'transparent', 'border', 'size-s', 'size-m', 'size-l']
+			},
+			_change: {
+				type: 'function'
+			}
+		},
+		render: function()
+		{
+			this.handle = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._change)
+				{
+					this._change({ event, value });
+				}
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<input
+						class="input"
+						type="date"
+						:value="value"
+						:name="name"
+						:min="min"
+						:max="max"
+						:disabled="disabled"
+						ot-change="handle"
+					/>
+				</div>
+			`;
+		}
+	});
+});

package/addons/render/elements/front/items/self/form/field/field.css

@@ -0,0 +1,72 @@
+/* Root */
+
+.e-2109a6b9
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-2109a6b9 > .holder
+{
+	display: flex;
+	align-items: flex-start;
+	gap: var(--ot-spacing-l);
+	padding: var(--ot-spacing-m);
+	width: 100%;
+}
+
+/* Info */
+
+.e-2109a6b9 > .holder > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-x);
+	min-width: 0;
+	flex: 1;
+}
+
+.e-2109a6b9 > .holder > .info > .label
+{
+	font-size: var(--ot-size-m);
+	font-weight: 500;
+	color: var(--ot-text-1);
+	line-height: 1.3;
+}
+
+.e-2109a6b9 > .holder > .info > .description
+{
+	margin: 0;
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.4;
+	max-width: 320px;
+}
+
+/* Input */
+
+.e-2109a6b9 > .holder > .input
+{
+	flex: 1;
+	min-width: 200px;
+	max-width: 420px;
+}
+
+/* Border variant */
+
+.e-2109a6b9 > .holder.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
+.e-2109a6b9:last-child > .holder.border-bottom { border-bottom: none; }
+
+/* Size variants */
+
+.e-2109a6b9 > .holder.size-s { padding: var(--ot-spacing-s); }
+.e-2109a6b9 > .holder.size-s > .info > .label { font-size: var(--ot-size-s); }
+.e-2109a6b9 > .holder.size-s > .info > .description { font-size: var(--ot-size-s); }
+.e-2109a6b9 > .holder.size-s > .input { min-width: 160px; max-width: 220px; }
+
+.e-2109a6b9 > .holder.size-l { padding: var(--ot-spacing-l); }
+.e-2109a6b9 > .holder.size-l > .info > .label { font-size: var(--ot-size-l); }
+.e-2109a6b9 > .holder.size-l > .info > .description { font-size: var(--ot-size-m); }
+.e-2109a6b9 > .holder.size-l > .input { min-width: 240px; max-width: 320px; }

package/{lib/items/elements → addons/render/elements/front/items/self}/form/field/field.js

@@ -10,7 +10,7 @@ onetype.AddonReady('elements', (elements) =>
 		config: {
 			label: {
 				type: 'string',
-				value: 'Field Label'
+				value: ''
 			},
 			description: {
 				type: 'string',
@@ -25,10 +25,10 @@ onetype.AddonReady('elements', (elements) =>
 		render: function()
 		{
 			return `
-				<div class="holder" :variant="variant.join(' ')">
+				<div :class="'holder ' + variant.join(' ')">
 					<div class="info">
-						<label ot-if="label">{{ label }}</label>
-						<p ot-if="description">{{ description }}</p>
+						<label ot-if="label" class="label">{{ label }}</label>
+						<p ot-if="description" class="description">{{ description }}</p>
 					</div>
 					<div class="input">
 						<slot name="input"></slot>

package/addons/render/elements/front/items/self/form/input/input.css

@@ -0,0 +1,86 @@
+/* Root */
+
+.e-20dcefe9
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-20dcefe9 > .holder
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+	height: var(--ot-height-m);
+	padding: 0 var(--ot-spacing-m);
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+	background: transparent;
+	font-size: var(--ot-size-m);
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+/* Input */
+
+.e-20dcefe9 > .holder > input
+{
+	flex: 1;
+	width: 100%;
+	height: 100%;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: var(--ot-text-1);
+	font-size: inherit;
+	font-family: inherit;
+	padding: 0;
+}
+
+.e-20dcefe9 > .holder > input::placeholder
+{
+	color: var(--ot-text-2);
+}
+
+.e-20dcefe9 > .holder > input:disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Icon */
+
+.e-20dcefe9 > .holder > .icon
+{
+	font-size: inherit;
+	color: var(--ot-text-2);
+	flex-shrink: 0;
+}
+
+/* Background variants */
+
+.e-20dcefe9 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-20dcefe9 > .holder.bg-1:hover { background: var(--ot-bg-1-hover); }
+.e-20dcefe9 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-20dcefe9 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-20dcefe9 > .holder.bg-2:hover { background: var(--ot-bg-2-hover); }
+.e-20dcefe9 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-20dcefe9 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-20dcefe9 > .holder.bg-3:hover { background: var(--ot-bg-3-hover); }
+.e-20dcefe9 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-20dcefe9 > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-20dcefe9 > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
+.e-20dcefe9 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* Border variant */
+
+.e-20dcefe9 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-20dcefe9 > .holder.border:focus-within { border-color: var(--ot-brand); }
+
+/* Size variants */
+
+.e-20dcefe9 > .holder.size-s { height: var(--ot-height-s); padding: 0 var(--ot-spacing-s); font-size: var(--ot-size-s); }
+.e-20dcefe9 > .holder.size-m { height: var(--ot-height-m); padding: 0 var(--ot-spacing-m); font-size: var(--ot-size-m); }
+.e-20dcefe9 > .holder.size-l { height: var(--ot-height-l); padding: 0 var(--ot-spacing-m); font-size: var(--ot-size-m); }

package/addons/render/elements/front/items/self/form/input/input.js

@@ -0,0 +1,124 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	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()
+		{
+			this.input = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._input)
+				{
+					this._input({ event, value });
+				}
+			};
+
+			this.change = ({ event, value }) =>
+			{
+				this.value = value;
+
+				if (this._change)
+				{
+					this._change({ event, value });
+				}
+			};
+
+			this.focus = ({ event, value }) =>
+			{
+				if (this._focus)
+				{
+					this._focus({ event, value });
+				}
+			};
+
+			this.blur = ({ event, value }) =>
+			{
+				if (this._blur)
+				{
+					this._blur({ event, value });
+				}
+			};
+
+			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/addons/render/elements/front/items/self/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); }