@onetype/framework 2.0.21 → 2.0.24

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

@@ -0,0 +1,96 @@
+/* Base */
+.e-2109a6b9 > .holder
+{
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--ot-spacing-l);
+	padding: var(--ot-spacing-m);
+}
+
+.e-2109a6b9 > .holder > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-x);
+	flex: 1;
+	min-width: 0;
+}
+
+.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 > p
+{
+	margin: 0;
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	line-height: 1.4;
+}
+
+.e-2109a6b9 > .holder > .input
+{
+	flex-shrink: 0;
+	min-width: 200px;
+	max-width: 280px;
+	width: 100%;
+}
+
+/* Variants - Border */
+.e-2109a6b9 > .holder[variant*="border-bottom"]
+{
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.e-2109a6b9 > .holder[variant*="border-bottom"]:last-child
+{
+	border-bottom: none;
+}
+
+/* Sizes */
+.e-2109a6b9 > .holder[variant*="size-s"]
+{
+	padding: var(--ot-spacing-s);
+}
+
+.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[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;
+}

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

@@ -0,0 +1,40 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'form-field',
+		icon: 'space_dashboard',
+		name: 'Form Field',
+		description: 'Form field row with label and description on left, input slot on right.',
+		category: 'Form',
+		author: 'OneType',
+		config: {
+			label: {
+				type: 'string',
+				value: 'Field Label'
+			},
+			description: {
+				type: 'string',
+				value: ''
+			},
+			variant: {
+				type: 'array',
+				value: [],
+				options: ['border-bottom', 'size-s', 'size-m', 'size-l']
+			}
+		},
+		render: function()
+		{
+			return `
+				<div class="holder" :variant="variant.join(' ')">
+					<div class="info">
+						<label ot-if="label">{{ label }}</label>
+						<p ot-if="description">{{ description }}</p>
+					</div>
+					<div class="input">
+						<slot name="input"></slot>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

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

@@ -0,0 +1,111 @@
+/* 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;
+}
+
+/* Variants - Background */
+.e-20dcefe9 > .holder[variant*="bg-1"]
+{
+    background: var(--ot-bg-1);
+}
+
+.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);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-3"]
+{
+    background: var(--ot-bg-3);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-3"]:hover
+{
+    background: var(--ot-bg-3-hover);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-4"]
+{
+    background: var(--ot-bg-4);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-4"]:hover
+{
+    background: var(--ot-bg-4-hover);
+}
+
+/* Variants - Border */
+.e-20dcefe9 > .holder[variant*="border-full"]
+{
+    border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-1"][variant*="border-full"]
+{
+    border: 1px solid var(--ot-bg-1-border);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-2"][variant*="border-full"]
+{
+    border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-3"][variant*="border-full"]
+{
+    border: 1px solid var(--ot-bg-3-border);
+}
+
+.e-20dcefe9 > .holder[variant*="bg-4"][variant*="border-full"]
+{
+    border: 1px solid var(--ot-bg-4-border);
+}
+
+.e-20dcefe9 > .holder[variant*="border-full"]:focus
+{
+    border-color: var(--ot-brand);
+}
+
+/* Sizes */
+.e-20dcefe9 > .holder[size="s"]
+{
+    height: var(--ot-height-s);
+}
+
+.e-20dcefe9 > .holder[size="m"]
+{
+    height: var(--ot-height-m);
+}
+
+.e-20dcefe9 > .holder[size="l"]
+{
+    height: var(--ot-height-l);
+}

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

@@ -0,0 +1,79 @@
+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"
+                />
+            `;
+        }
+	});
+});

package/lib/items/elements/form/input/styles/base.css

@@ -0,0 +1,26 @@
+.e-20dcefe9 > .holder
+{
+    position: relative;
+}
+
+.e-20dcefe9 input
+{
+    width: 100%;
+    padding: 0 var(--ot-spacing-m);
+    border-radius: var(--ot-radius-m);
+    border: 1px solid;
+    background: transparent;
+    transition: all 0.2s ease;
+    outline: none;
+}
+
+.e-20dcefe9 input::placeholder
+{
+    color: var(--ot-text-2);
+}
+
+.e-20dcefe9 input:disabled
+{
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/lib/items/elements/form/input/styles/sizes.css

@@ -0,0 +1,15 @@
+/* Sizes */
+.e-20dcefe9 > .holder[size="s"] input
+{
+    height: var(--ot-height-s);
+}
+
+.e-20dcefe9 > .holder[size="m"] input
+{
+    height: var(--ot-height-m);
+}
+
+.e-20dcefe9 > .holder[size="l"] input
+{
+    height: var(--ot-height-l);
+}

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

@@ -0,0 +1,98 @@
+/* Variants */
+.e-20dcefe9 > .holder[variant="transparent"] input
+{
+    background: transparent;
+    border-color: transparent;
+    padding: 0;
+}
+
+.e-20dcefe9 > .holder[variant="transparent"] input:hover
+{
+    background: transparent;
+}
+
+.e-20dcefe9 > .holder[variant="transparent"] input:focus
+{
+    border-color: transparent;
+}
+
+.e-20dcefe9 > .holder[variant="border"] input
+{
+    background: transparent;
+    border-color: var(--ot-bg-1-border);
+}
+
+.e-20dcefe9 > .holder[variant="border"] input:hover
+{
+    background: transparent;
+    border-color: var(--ot-bg-2-border);
+}
+
+.e-20dcefe9 > .holder[variant="border"] input:focus
+{
+    border-color: var(--ot-brand);
+}
+
+.e-20dcefe9 > .holder[variant="bg-1"] input
+{
+    background: var(--ot-bg-1);
+    border-color: var(--ot-bg-1-border);
+}
+
+.e-20dcefe9 > .holder[variant="bg-1"] input:hover
+{
+    background: var(--ot-bg-1-hover);
+}
+
+.e-20dcefe9 > .holder[variant="bg-1"] input:focus
+{
+    border-color: var(--ot-brand);
+}
+
+.e-20dcefe9 > .holder[variant="bg-2"] input
+{
+    background: var(--ot-bg-2);
+    border-color: var(--ot-bg-2-border);
+}
+
+.e-20dcefe9 > .holder[variant="bg-2"] input:hover
+{
+    background: var(--ot-bg-2-hover);
+}
+
+.e-20dcefe9 > .holder[variant="bg-2"] input:focus
+{
+    border-color: var(--ot-brand);
+}
+
+.e-20dcefe9 > .holder[variant="bg-3"] input
+{
+    background: var(--ot-bg-3);
+    border-color: var(--ot-bg-3-border);
+}
+
+.e-20dcefe9 > .holder[variant="bg-3"] input:hover
+{
+    background: var(--ot-bg-3-hover);
+}
+
+.e-20dcefe9 > .holder[variant="bg-3"] input:focus
+{
+    border-color: var(--ot-brand);
+}
+
+.e-20dcefe9 > .holder[variant="bg-4"] input
+{
+    background: var(--ot-bg-4);
+    border-color: var(--ot-bg-4-border);
+}
+
+.e-20dcefe9 > .holder[variant="bg-4"] input:hover
+{
+    background: var(--ot-bg-4-hover);
+}
+
+.e-20dcefe9 > .holder[variant="bg-4"] input:focus
+{
+    border-color: var(--ot-brand);
+}

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

@@ -0,0 +1,58 @@
+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>
+            `;
+        }
+	});
+});

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

@@ -0,0 +1,48 @@
+.e-206433b8 > .holder
+{
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.e-206433b8 input[type="radio"]
+{
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.e-206433b8 .radio-mark
+{
+    display: block;
+    border-radius: 50%;
+    border: 1px solid;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.e-206433b8 .radio-mark::after
+{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    border-radius: 50%;
+    transition: all 0.2s ease;
+}
+
+.e-206433b8 input[type="radio"]:checked ~ .radio-mark::after
+{
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.e-206433b8 input[type="radio"]:disabled ~ .radio-mark
+{
+    opacity: 0.5;
+    cursor: not-allowed;
+}

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

@@ -0,0 +1,36 @@
+/* Sizes */
+.e-206433b8 > .holder[size="s"] .radio-mark
+{
+    width: 16px;
+    height: 16px;
+}
+
+.e-206433b8 > .holder[size="s"] .radio-mark::after
+{
+    width: 6px;
+    height: 6px;
+}
+
+.e-206433b8 > .holder[size="m"] .radio-mark
+{
+    width: 20px;
+    height: 20px;
+}
+
+.e-206433b8 > .holder[size="m"] .radio-mark::after
+{
+    width: 8px;
+    height: 8px;
+}
+
+.e-206433b8 > .holder[size="l"] .radio-mark
+{
+    width: 24px;
+    height: 24px;
+}
+
+.e-206433b8 > .holder[size="l"] .radio-mark::after
+{
+    width: 10px;
+    height: 10px;
+}