@onetype/framework 2.0.41 → 2.0.42

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

@@ -0,0 +1,128 @@
+/* Root */
+
+.e-21311850
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-21311850 > .holder
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	width: 100%;
+	padding: var(--ot-spacing-x);
+	border-radius: var(--ot-radius-m);
+	border: 1px solid transparent;
+	background: transparent;
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+/* Swatch */
+
+.e-21311850 > .holder > .swatch
+{
+	position: relative;
+	flex-shrink: 0;
+	border-radius: var(--ot-radius-s);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	cursor: pointer;
+	overflow: hidden;
+	transition: border-color 0.15s ease, transform 0.15s ease;
+	padding: 0;
+	outline: none;
+}
+
+.e-21311850 > .holder > .swatch:hover
+{
+	border-color: rgba(255, 255, 255, 0.25);
+	transform: scale(1.05);
+}
+
+.e-21311850 > .holder > .swatch:disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+	transform: none;
+}
+
+/* Native color input — hidden inside swatch */
+
+.e-21311850 > .holder > .swatch > .native
+{
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+	border: none;
+	padding: 0;
+}
+
+/* Hex input */
+
+.e-21311850 > .holder > .input
+{
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: var(--ot-text-1);
+	font-family: monospace;
+	letter-spacing: 0.5px;
+	padding: 0;
+}
+
+.e-21311850 > .holder > .input::placeholder
+{
+	color: var(--ot-text-2);
+}
+
+.e-21311850 > .holder > .input:disabled
+{
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Background variants */
+
+.e-21311850 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-21311850 > .holder.bg-1:hover { background: var(--ot-bg-1-hover); }
+.e-21311850 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-21311850 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-21311850 > .holder.bg-2:hover { background: var(--ot-bg-2-hover); }
+.e-21311850 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-21311850 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-21311850 > .holder.bg-3:hover { background: var(--ot-bg-3-hover); }
+.e-21311850 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-21311850 > .holder.bg-4 { background: var(--ot-bg-4); }
+.e-21311850 > .holder.bg-4:hover { background: var(--ot-bg-4-hover); }
+.e-21311850 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* Transparent variant */
+
+.e-21311850 > .holder.transparent { background: transparent; padding: 0; }
+
+/* Border variant */
+
+.e-21311850 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-21311850 > .holder.border:focus-within { border-color: var(--ot-brand); }
+
+/* Size variants */
+
+.e-21311850 > .holder.size-s { height: var(--ot-height-s); padding: 0 var(--ot-spacing-s); }
+.e-21311850 > .holder.size-s > .swatch { width: 18px; height: 18px; }
+.e-21311850 > .holder.size-s > .input { font-size: var(--ot-size-s); }
+
+.e-21311850 > .holder.size-m { height: var(--ot-height-m); padding: 0 var(--ot-spacing-s); }
+.e-21311850 > .holder.size-m > .swatch { width: 22px; height: 22px; }
+.e-21311850 > .holder.size-m > .input { font-size: var(--ot-size-m); }
+
+.e-21311850 > .holder.size-l { height: var(--ot-height-l); padding: 0 var(--ot-spacing-m); }
+.e-21311850 > .holder.size-l > .swatch { width: 28px; height: 28px; }
+.e-21311850 > .holder.size-l > .input { font-size: var(--ot-size-m); }

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

@@ -0,0 +1,100 @@
+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: '#000000'
+			},
+			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.pick = (event, ctx) =>
+			{
+				const hex = ctx.value;
+
+				this.value = hex;
+				this.Update();
+
+				if (this._change)
+				{
+					this._change(hex);
+				}
+			};
+
+			this.input = (event, ctx) =>
+			{
+				let hex = ctx.value.trim();
+
+				if (hex && hex.charAt(0) !== '#')
+				{
+					hex = '#' + hex;
+				}
+
+				this.value = hex;
+				this.Update();
+
+				if (this._change)
+				{
+					this._change(hex);
+				}
+			};
+
+			this.open = (event) =>
+			{
+				if (this.disabled)
+				{
+					return;
+				}
+
+				event.target.closest('.holder').querySelector('.native').click();
+			};
+
+			return `
+				<div :class="'holder ' + variant.join(' ')">
+					<input type="hidden" :name="name" :value="value" />
+					<button class="swatch" :style="'background: ' + value" ot-click="open" :disabled="disabled">
+						<input class="native" type="color" :value="value" ot-input="pick" tabindex="-1" />
+					</button>
+					<input
+						class="input"
+						type="text"
+						:value="value"
+						:placeholder="placeholder"
+						:disabled="disabled"
+						maxlength="7"
+						autocomplete="off"
+						spellcheck="false"
+						ot-change="input"
+					/>
+				</div>
+			`;
+		}
+	});
+});

package/lib/items/elements/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/lib/items/elements/form/date/date.js

@@ -0,0 +1,69 @@
+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, ctx) =>
+			{
+				this.value = ctx.value;
+				this.Update();
+
+				if (this._change)
+				{
+					this._change(ctx.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/lib/items/elements/form/field/field.css

@@ -1,23 +1,34 @@
-/* Base */
+/* Root */
+
+.e-2109a6b9
+{
+	display: flex;
+	width: 100%;
+}
+
+/* Holder */
+
 .e-2109a6b9 > .holder
 {
 	display: flex;
 	align-items: flex-start;
-	justify-content: space-between;
 	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);
-	flex: 1;
 	min-width: 0;
+	flex: 1;
 }
 
-.e-2109a6b9 > .holder > .info > label
+.e-2109a6b9 > .holder > .info > .label
 {
 	font-size: var(--ot-size-m);
 	font-weight: 500;
@@ -25,72 +36,37 @@
 	line-height: 1.3;
 }
 
-.e-2109a6b9 > .holder > .info > p
+.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-shrink: 0;
+	flex: 1;
 	min-width: 200px;
-	max-width: 280px;
-	width: 100%;
+	max-width: 420px;
 }
 
-/* Variants - Border */
-.e-2109a6b9 > .holder[variant*="border-bottom"]
-{
-	border-bottom: 1px solid var(--ot-bg-2-border);
-}
+/* Border variant */
 
-.e-2109a6b9 > .holder[variant*="border-bottom"]:last-child
-{
-	border-bottom: none;
-}
+.e-2109a6b9 > .holder.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
+.e-2109a6b9:last-child > .holder.border-bottom { border-bottom: none; }
 
-/* Sizes */
-.e-2109a6b9 > .holder[variant*="size-s"]
-{
-	padding: var(--ot-spacing-s);
-}
+/* Size variants */
 
-.e-2109a6b9 > .holder[variant*="size-s"] > .info > label
-{
-	font-size: var(--ot-size-s);
-}
-
-.e-2109a6b9 > .holder[variant*="size-s"] > .info > p
-{
-	font-size: var(--ot-size-x);
-}
-
-.e-2109a6b9 > .holder[variant*="size-s"] > .input
-{
-	min-width: 160px;
-	max-width: 220px;
-}
-
-.e-2109a6b9 > .holder[variant*="size-l"]
-{
-	padding: var(--ot-spacing-l);
-}
+.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[variant*="size-l"] > .info > label
-{
-	font-size: var(--ot-size-l);
-}
-
-.e-2109a6b9 > .holder[variant*="size-l"] > .info > p
-{
-	font-size: var(--ot-size-m);
-}
-
-.e-2109a6b9 > .holder[variant*="size-l"] > .input
-{
-	min-width: 240px;
-	max-width: 320px;
-}
+.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/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/lib/items/elements/form/input/input.css

@@ -1,111 +1,86 @@
-/* Base */
-.e-20dcefe9 > .holder
-{
-    width: 100%;
-    padding: 0 var(--ot-spacing-m);
-    border-radius: var(--ot-radius-m);
-    border: none;
-    background: transparent;
-    transition: all 0.2s;
-    outline: none;
-    color: var(--ot-text-1);
-}
-
-.e-20dcefe9 > .holder::placeholder
-{
-    color: var(--ot-text-2);
-}
-
-.e-20dcefe9 > .holder:disabled
-{
-    opacity: 0.5;
-    cursor: not-allowed;
-}
+/* Root */
 
-/* Variants - Background */
-.e-20dcefe9 > .holder[variant*="bg-1"]
+.e-20dcefe9
 {
-    background: var(--ot-bg-1);
+	display: flex;
+	width: 100%;
 }
 
-.e-20dcefe9 > .holder[variant*="bg-1"]:hover
-{
-    background: var(--ot-bg-1-hover);
-}
-
-.e-20dcefe9 > .holder[variant*="bg-2"]
-{
-    background: var(--ot-bg-2);
-}
-
-.e-20dcefe9 > .holder[variant*="bg-2"]:hover
-{
-    background: var(--ot-bg-2-hover);
-}
+/* Holder */
 
-.e-20dcefe9 > .holder[variant*="bg-3"]
+.e-20dcefe9 > .holder
 {
-    background: var(--ot-bg-3);
+	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;
 }
 
-.e-20dcefe9 > .holder[variant*="bg-3"]:hover
-{
-    background: var(--ot-bg-3-hover);
-}
+/* Input */
 
-.e-20dcefe9 > .holder[variant*="bg-4"]
+.e-20dcefe9 > .holder > input
 {
-    background: var(--ot-bg-4);
+	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[variant*="bg-4"]:hover
+.e-20dcefe9 > .holder > input::placeholder
 {
-    background: var(--ot-bg-4-hover);
+	color: var(--ot-text-2);
 }
 
-/* Variants - Border */
-.e-20dcefe9 > .holder[variant*="border-full"]
+.e-20dcefe9 > .holder > input:disabled
 {
-    border: 1px solid var(--ot-bg-2-border);
+	opacity: 0.5;
+	cursor: not-allowed;
 }
 
-.e-20dcefe9 > .holder[variant*="bg-1"][variant*="border-full"]
-{
-    border: 1px solid var(--ot-bg-1-border);
-}
+/* Icon */
 
-.e-20dcefe9 > .holder[variant*="bg-2"][variant*="border-full"]
+.e-20dcefe9 > .holder > .icon
 {
-    border: 1px solid var(--ot-bg-2-border);
+	font-size: inherit;
+	color: var(--ot-text-2);
+	flex-shrink: 0;
 }
 
-.e-20dcefe9 > .holder[variant*="bg-3"][variant*="border-full"]
-{
-    border: 1px solid var(--ot-bg-3-border);
-}
+/* Background variants */
 
-.e-20dcefe9 > .holder[variant*="bg-4"][variant*="border-full"]
-{
-    border: 1px solid var(--ot-bg-4-border);
-}
+.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); }
 
-.e-20dcefe9 > .holder[variant*="border-full"]:focus
-{
-    border-color: var(--ot-brand);
-}
+/* Border variant */
 
-/* Sizes */
-.e-20dcefe9 > .holder[size="s"]
-{
-    height: var(--ot-height-s);
-}
+.e-20dcefe9 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+.e-20dcefe9 > .holder.border:focus-within { border-color: var(--ot-brand); }
 
-.e-20dcefe9 > .holder[size="m"]
-{
-    height: var(--ot-height-m);
-}
+/* Size variants */
 
-.e-20dcefe9 > .holder[size="l"]
-{
-    height: var(--ot-height-l);
-}
+.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); }