@onetype/framework 2.0.41 → 2.0.43

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

@@ -1,58 +0,0 @@
-onetype.AddonReady('elements', (elements) =>
-{
-    elements.ItemAdd({
-        id: 'form-checkbox',
-        icon: 'check_box',
-        name: 'Checkbox',
-        description: 'Checkbox input with custom styling, indeterminate state support, and variant options for different UI themes.',
-        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="checkbox"
-                        :name="name"
-                        :value="value"
-                        :checked="checked"
-                        :disabled="disabled"
-                        ot-change="onChange"
-                        ot-click="onClick"
-                    />
-                    <span class="checkbox-mark"></span>
-                </div>
-            `;
-        }
-	});
-});

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

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

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

@@ -1,39 +0,0 @@
-/* Sizes */
-.e-f249baa > .holder[size="s"] .checkbox-mark
-{
-    width: 16px;
-    height: 16px;
-}
-
-.e-f249baa > .holder[size="s"] .checkbox-mark::after
-{
-    width: 3px;
-    height: 6px;
-    border-width: 0 1.5px 1.5px 0;
-}
-
-.e-f249baa > .holder[size="m"] .checkbox-mark
-{
-    width: 20px;
-    height: 20px;
-}
-
-.e-f249baa > .holder[size="m"] .checkbox-mark::after
-{
-    width: 4px;
-    height: 8px;
-    border-width: 0 2px 2px 0;
-}
-
-.e-f249baa > .holder[size="l"] .checkbox-mark
-{
-    width: 24px;
-    height: 24px;
-}
-
-.e-f249baa > .holder[size="l"] .checkbox-mark::after
-{
-    width: 5px;
-    height: 10px;
-    border-width: 0 2.5px 2.5px 0;
-}

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

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

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

@@ -1,96 +0,0 @@
-/* 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/input/input.css

@@ -1,111 +0,0 @@
-/* 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

@@ -1,79 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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

@@ -1,15 +0,0 @@
-/* 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

@@ -1,98 +0,0 @@
-/* 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);
-}