@onetype/framework 2.0.41 → 2.0.43

package/addons/services/cloudflare/images/front/items/elements/input/input.css

@@ -0,0 +1,154 @@
+/* Holder */
+
+.e-4b08d9cc > .holder
+{
+	display: flex;
+	width: 100%;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+	cursor: pointer;
+	transition: border-color 0.15s;
+}
+
+.e-4b08d9cc > .holder.border
+{
+	border: 1px solid var(--ot-bg-2-border);
+}
+
+.e-4b08d9cc > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-4b08d9cc > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-4b08d9cc > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-4b08d9cc > .holder.bg-4 { background: var(--ot-bg-4); }
+
+/* ─── Sizes ─── */
+
+.e-4b08d9cc > .holder.size-s { min-height: var(--ot-height-s); }
+.e-4b08d9cc > .holder.size-m { min-height: var(--ot-height-m); }
+.e-4b08d9cc > .holder.size-l { min-height: var(--ot-height-l); }
+
+.e-4b08d9cc > .holder.size-s .empty { padding: 4px 8px; gap: 6px; }
+.e-4b08d9cc > .holder.size-m .empty { padding: 6px 10px; gap: 8px; }
+.e-4b08d9cc > .holder.size-l .empty { padding: 8px 12px; gap: 8px; }
+
+/* ─── Empty ─── */
+
+.e-4b08d9cc .empty
+{
+	display: flex;
+	align-items: center;
+	width: 100%;
+	cursor: pointer;
+}
+
+.e-4b08d9cc .empty > .icon
+{
+	font-size: 16px;
+	color: var(--ot-text-3);
+}
+
+.e-4b08d9cc .empty > .text
+{
+	font-size: 12px;
+	color: var(--ot-text-3);
+}
+
+.e-4b08d9cc > .holder:hover .empty > .text,
+.e-4b08d9cc > .holder:hover .empty > .icon
+{
+	color: var(--ot-text-2);
+}
+
+/* ─── Preview ─── */
+
+.e-4b08d9cc .preview
+{
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	width: 100%;
+	padding: 4px;
+	flex-wrap: wrap;
+}
+
+/* ─── Thumb ─── */
+
+.e-4b08d9cc .thumb
+{
+	position: relative;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--ot-radius-s);
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.e-4b08d9cc > .holder.size-s .thumb { width: 22px; height: 22px; }
+.e-4b08d9cc > .holder.size-m .thumb { width: 28px; height: 28px; }
+.e-4b08d9cc > .holder.size-l .thumb { width: 36px; height: 36px; }
+
+.e-4b08d9cc .thumb > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* ─── Remove ─── */
+
+.e-4b08d9cc .remove
+{
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	border: none;
+	background: rgba(0, 0, 0, 0.6);
+	color: var(--ot-text-1);
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 0.12s;
+}
+
+.e-4b08d9cc .thumb:hover .remove
+{
+	opacity: 1;
+}
+
+.e-4b08d9cc .remove > i
+{
+	font-size: 13px;
+}
+
+/* ─── Clear ─── */
+
+.e-4b08d9cc .clear
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: none;
+	background: transparent;
+	color: var(--ot-text-3);
+	border-radius: var(--ot-radius-s);
+	cursor: pointer;
+	margin-left: auto;
+	flex-shrink: 0;
+	transition: color 0.12s, background 0.12s;
+}
+
+.e-4b08d9cc .clear:hover
+{
+	color: var(--ot-red);
+	background: var(--ot-red-opacity);
+}
+
+.e-4b08d9cc .clear > i
+{
+	font-size: 15px;
+}

package/addons/services/cloudflare/images/front/items/elements/input/input.js

@@ -0,0 +1,147 @@
+elements.ItemAdd({
+	id: 'cloudflare-input',
+	icon: 'image',
+	name: 'Image Input',
+	description: 'Image picker input that opens browse modal.',
+	category: 'Form',
+	author: 'OneType',
+	config: {
+		value: {
+			type: 'string',
+			value: ''
+		},
+		name: {
+			type: 'string',
+			value: ''
+		},
+		site: {
+			type: 'object',
+			value: null
+		},
+		multiple: {
+			type: 'boolean',
+			value: false
+		},
+		placeholder: {
+			type: 'string',
+			value: 'Select image...'
+		},
+		disabled: {
+			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']
+		},
+		_change: {
+			type: 'function'
+		}
+	},
+	render: function()
+	{
+		const self = this;
+
+		this.images = () =>
+		{
+			if(!this.value)
+			{
+				return [];
+			}
+
+			return this.multiple ? this.value.split(',').filter(Boolean) : [this.value];
+		};
+
+		this.browse = () =>
+		{
+			if(this.disabled)
+			{
+				return;
+			}
+
+			const site = self.site || $ot.get('site');
+
+			$ot.modal(function()
+			{
+				this.site = site;
+				this.pick = (item) =>
+				{
+					$ot.modal.close();
+					callback(item.url);
+				};
+
+				return `<e-cloudflare-images :site="site" :_pick="pick"></e-cloudflare-images>`;
+			});
+		};
+
+		const callback = (url) =>
+		{
+			if(this.multiple)
+			{
+				const current = this.value ? this.value.split(',').filter(Boolean) : [];
+
+				current.push(url);
+				this.value = current.join(',');
+			}
+			else
+			{
+				this.value = url;
+			}
+
+			if(this._change)
+			{
+				this._change({ value: this.value });
+			}
+		};
+
+		this.remove = (event, url) =>
+		{
+			event.stopPropagation();
+
+			if(this.multiple)
+			{
+				const current = this.value.split(',').filter(v => v !== url);
+
+				this.value = current.join(',');
+			}
+			else
+			{
+				this.value = '';
+			}
+
+			if(this._change)
+			{
+				this._change({ value: this.value });
+			}
+		};
+
+		this.clear = (event) =>
+		{
+			event.stopPropagation();
+			this.value = '';
+
+			if(this._change)
+			{
+				this._change({ value: this.value });
+			}
+		};
+
+		return `
+			<div :class="'holder ' + variant.join(' ')">
+				<input type="hidden" :name="name" :value="value" />
+				<div ot-if="!images().length" class="empty" ot-click="browse">
+					<i class="icon">image</i>
+					<span class="text">{{ placeholder }}</span>
+				</div>
+				<div ot-if="images().length" class="preview" ot-click="browse">
+					<div ot-for="url in images()" class="thumb">
+						<img :src="url" loading="lazy" />
+						<button class="remove" ot-click="(e) => remove(e, url)"><i>close</i></button>
+					</div>
+					<button ot-if="value" class="clear" ot-click="clear"><i>delete</i></button>
+				</div>
+			</div>
+		`;
+	}
+});

package/addons/services/cloudflare/images/sql.txt

@@ -0,0 +1,43 @@
+CREATE SEQUENCE IF NOT EXISTS cloudflare_images_id_seq;
+
+CREATE TABLE IF NOT EXISTS public.cloudflare_images
+(
+    id bigint NOT NULL DEFAULT nextval('cloudflare_images_id_seq'::regclass),
+    team_id bigint NOT NULL,
+    site_id bigint NOT NULL,
+    cloudflare_id character varying(255) COLLATE pg_catalog."default" NOT NULL,
+    filename character varying(255) COLLATE pg_catalog."default" NOT NULL,
+    url text COLLATE pg_catalog."default",
+    variants jsonb NOT NULL DEFAULT '{}'::jsonb,
+    alt character varying(255) COLLATE pg_catalog."default",
+    size integer,
+    type character varying(50) COLLATE pg_catalog."default",
+    width integer,
+    height integer,
+    updated_at timestamp with time zone NOT NULL DEFAULT now(),
+    created_at timestamp with time zone NOT NULL DEFAULT now(),
+    CONSTRAINT cloudflare_images_pkey PRIMARY KEY (id)
+)
+
+TABLESPACE pg_default;
+
+ALTER TABLE IF EXISTS public.cloudflare_images
+    OWNER to onetype;
+
+CREATE INDEX IF NOT EXISTS idx_cloudflare_images_team_id
+    ON public.cloudflare_images USING btree
+    (team_id ASC NULLS LAST)
+    WITH (fillfactor=100, deduplicate_items=True)
+    TABLESPACE pg_default;
+
+CREATE INDEX IF NOT EXISTS idx_cloudflare_images_site_id
+    ON public.cloudflare_images USING btree
+    (site_id ASC NULLS LAST)
+    WITH (fillfactor=100, deduplicate_items=True)
+    TABLESPACE pg_default;
+
+CREATE INDEX IF NOT EXISTS idx_cloudflare_images_cloudflare_id
+    ON public.cloudflare_images USING btree
+    (cloudflare_id ASC NULLS LAST)
+    WITH (fillfactor=100, deduplicate_items=True)
+    TABLESPACE pg_default;

package/lib/browser.js

@@ -1,25 +1,2 @@
 window.onetype = new OneType();
-window.$ot = onetype.$ot;
-
-if (document.readyState === 'loading')
-{
-    document.addEventListener('DOMContentLoaded', initBrowser);
-}
-else
-{
-    initBrowser();
-}
-
-function initBrowser()
-{
-    onetype.Addon('browser', function(addon)
-    {
-        addon.Render('body', () =>
-        {
-            return document.body.outerHTML;
-        });
-
-        const render = addon.Render('body', window);
-        document.body.replaceChildren(...render.Element.children);
-    });
-}
+window.$ot = onetype.$ot;

package/lib/events.js

@@ -1,16 +1,16 @@
 const handleReady = () =>
 {
-    window.onetype.Emit('document.ready');
+    window.onetype.Emit('@document.ready');
 };
 
 const handleLoad = () =>
 {
-    window.onetype.Emit('document.load');
+    window.onetype.Emit('@document.load');
 };
 
 const handleResize = () =>
 {
-    window.onetype.Emit('window.resize',
+    window.onetype.Emit('@window.resize',
     {
         width: window.innerWidth,
         height: window.innerHeight
@@ -19,7 +19,7 @@ const handleResize = () =>
 
 const handleScroll = () =>
 {
-    window.onetype.Emit('window.scroll',
+    window.onetype.Emit('@window.scroll',
     {
         x: window.scrollX,
         y: window.scrollY
@@ -28,7 +28,7 @@ const handleScroll = () =>
 
 const handleVisibility = () =>
 {
-    window.onetype.Emit('document.visibility',
+    window.onetype.Emit('@document.visibility',
     {
         hidden: document.hidden,
         state: document.visibilityState
@@ -37,22 +37,22 @@ const handleVisibility = () =>
 
 const handleBeforeUnload = () =>
 {
-    window.onetype.Emit('window.beforeunload');
+    window.onetype.Emit('@window.beforeunload');
 };
 
 const handleFocus = () =>
 {
-    window.onetype.Emit('window.focus');
+    window.onetype.Emit('@window.focus');
 };
 
 const handleBlur = () =>
 {
-    window.onetype.Emit('window.blur');
+    window.onetype.Emit('@window.blur');
 };
 
 const handleOrientation = () =>
 {
-    window.onetype.Emit('window.orientation',
+    window.onetype.Emit('@window.orientation',
     {
         angle: screen.orientation?.angle || window.orientation,
         type: screen.orientation?.type || 'unknown'
@@ -61,17 +61,17 @@ const handleOrientation = () =>
 
 const handleOnline = () =>
 {
-    window.onetype.Emit('navigator.online');
+    window.onetype.Emit('@navigator.online');
 };
 
 const handleOffline = () =>
 {
-    window.onetype.Emit('navigator.offline');
+    window.onetype.Emit('@navigator.offline');
 };
 
 const handlePopstate = (event) =>
 {
-    window.onetype.Emit('history.popstate',
+    window.onetype.Emit('@history.popstate',
     {
         state: event.state,
         pathname: window.location.pathname

package/lib/load.js

@@ -3,7 +3,7 @@ import OneType from './src/onetype.js';
 const onetype = new OneType();
 
 /* Framework */
-onetype.Assets('framework', import.meta.url, { js: { path: '.', exclude: ['load.js', 'items', 'styles'] } });
+onetype.Assets('framework', import.meta.url, { js: { path: '.', exclude: ['load.js', 'styles'] } });
 onetype.Assets('styles', import.meta.url, { css: 'styles' });
 
 /* Core */
@@ -20,52 +20,22 @@ onetype.Assets('shortcuts', import.meta.url, { js: '../addons/modules/shortcuts/
 onetype.Assets('sources', import.meta.url, { js: '../addons/modules/sources/front' });
 
 /* Render */
-onetype.Assets('directives', import.meta.url, { js: '../addons/render/directives/front' });
-onetype.Assets('directives/items', import.meta.url, { js: 'items/directives' });
-onetype.Assets('transforms', import.meta.url, { js: '../addons/render/transforms' });
+onetype.Assets('directives', import.meta.url, { js: { path: '../addons/render/directives/front', exclude: ['../addons/render/directives/front/items/self'] } });
+onetype.Assets('directives/items', import.meta.url, { js: '../addons/render/directives/front/items/self' });
+onetype.Assets('transforms', import.meta.url, { js: { path: '../addons/render/transforms/js', exclude: ['../addons/render/transforms/js/items/self'] }, css: '../addons/render/transforms/css' });
+onetype.Assets('transforms/items', import.meta.url, { js: '../addons/render/transforms/js/items/self' });
 onetype.Assets('pages', import.meta.url, { js: '../addons/render/pages', css: '../addons/render/pages/front' });
-onetype.Assets('elements', import.meta.url, { js: '../addons/render/elements/front', css: '../addons/render/elements/front' });
+onetype.Assets('elements', import.meta.url, { js: { path: '../addons/render/elements/front', exclude: ['../addons/render/elements/front/items/self'] }, css: { path: '../addons/render/elements/front', exclude: ['../addons/render/elements/front/items/self'] } });
+onetype.Assets('elements/items', import.meta.url, { js: '../addons/render/elements/front/items/self', css: '../addons/render/elements/front/items/self' });
 
 /* Float */
 onetype.Assets('float', import.meta.url, { js: '../addons/float', css: '../addons/float' });
 
-/* Elements — Form */
-onetype.Assets('elements/form/button', import.meta.url, { js: 'items/elements/form/button', css: 'items/elements/form/button' });
-onetype.Assets('elements/form/checkbox', import.meta.url, { js: 'items/elements/form/checkbox', css: 'items/elements/form/checkbox' });
-onetype.Assets('elements/form/field', import.meta.url, { js: 'items/elements/form/field', css: 'items/elements/form/field' });
-onetype.Assets('elements/form/input', import.meta.url, { js: 'items/elements/form/input', css: 'items/elements/form/input' });
-onetype.Assets('elements/form/radio', import.meta.url, { js: 'items/elements/form/radio', css: 'items/elements/form/radio' });
-onetype.Assets('elements/form/rating', import.meta.url, { js: 'items/elements/form/rating', css: 'items/elements/form/rating' });
-onetype.Assets('elements/form/section', import.meta.url, { js: 'items/elements/form/section', css: 'items/elements/form/section' });
-onetype.Assets('elements/form/slider', import.meta.url, { js: 'items/elements/form/slider', css: 'items/elements/form/slider' });
-onetype.Assets('elements/form/textarea', import.meta.url, { js: 'items/elements/form/textarea', css: 'items/elements/form/textarea' });
-
-/* Elements — Global */
-onetype.Assets('elements/global/card', import.meta.url, { js: 'items/elements/global/card', css: 'items/elements/global/card' });
-onetype.Assets('elements/global/code', import.meta.url, { js: 'items/elements/global/code', css: 'items/elements/global/code' });
-onetype.Assets('elements/global/faq', import.meta.url, { js: 'items/elements/global/faq', css: 'items/elements/global/faq' });
-onetype.Assets('elements/global/heading', import.meta.url, { js: 'items/elements/global/heading', css: 'items/elements/global/heading' });
-onetype.Assets('elements/global/markdown', import.meta.url, { js: 'items/elements/global/markdown', css: 'items/elements/global/markdown' });
-onetype.Assets('elements/global/notice', import.meta.url, { js: 'items/elements/global/notice', css: 'items/elements/global/notice' });
-onetype.Assets('elements/global/parameters', import.meta.url, { js: 'items/elements/global/parameters', css: 'items/elements/global/parameters' });
-onetype.Assets('elements/global/tags', import.meta.url, { js: 'items/elements/global/tags', css: 'items/elements/global/tags' });
-
-/* Elements — Sections */
-onetype.Assets('elements/sections/footer', import.meta.url, { js: 'items/elements/sections/footer', css: 'items/elements/sections/footer' });
-onetype.Assets('elements/sections/hero', import.meta.url, { js: 'items/elements/sections/hero', css: 'items/elements/sections/hero' });
-onetype.Assets('elements/sections/stats', import.meta.url, { js: 'items/elements/sections/stats', css: 'items/elements/sections/stats' });
-onetype.Assets('elements/sections/pricing', import.meta.url, { js: 'items/elements/sections/pricing', css: 'items/elements/sections/pricing' });
-
-/* Elements — Navigation */
-onetype.Assets('elements/navigation/navbar', import.meta.url, { js: 'items/elements/navigation/navbar', css: 'items/elements/navigation/navbar' });
-onetype.Assets('elements/navigation/sidebar', import.meta.url, { js: 'items/elements/navigation/sidebar', css: 'items/elements/navigation/sidebar' });
-onetype.Assets('elements/navigation/tabs', import.meta.url, { js: 'items/elements/navigation/tabs', css: 'items/elements/navigation/tabs' });
-
-/* Elements — Status */
-onetype.Assets('elements/status/loading', import.meta.url, { js: 'items/elements/status/loading', css: 'items/elements/status/loading' });
-onetype.Assets('elements/status/empty', import.meta.url, { js: 'items/elements/status/empty', css: 'items/elements/status/empty' });
-onetype.Assets('elements/status/error', import.meta.url, { js: 'items/elements/status/error', css: 'items/elements/status/error' });
-onetype.Assets('elements/status/code', import.meta.url, { js: 'items/elements/status/code', css: 'items/elements/status/code' });
+/* AI */
+onetype.Assets('ai', import.meta.url, { js: '../addons/ai', css: '../addons/ai' });
+
+/* Services */
+onetype.Assets('cloudflare/images', import.meta.url, { js: '../addons/services/cloudflare/images/front', css: '../addons/services/cloudflare/images/front' });
 
 global.$ot = onetype.$ot;
 

package/lib/src/classes/addon/class.js

@@ -64,8 +64,7 @@ class OneTypeAddon
                 removed: [],
                 modify: [],
                 modified: [],
-                get: [],
-                set: []
+                get: []
             }
         };
     }

package/lib/src/classes/addon/classes/item/mixins/get.js

@@ -48,13 +48,13 @@ const AddonItemGet =
         }
         catch(error)
         {
-            throw new Error('Error getting value on field ' + key + '. ' + error.message)
+            throw this.addon.onetype.Error(500, 'Error getting value on field :field:.', {field: key});
         }
 
         if(callback)
         {
             this.addon.items.callbacks.get.forEach(callback => callback(this, key, value));
-            this.addon.onetype.Emit('addon.item.get', this, key, value);
+            this.addon.onetype.Emit('@addon.item.get', this, key, value);
         }
 
         return value;
@@ -64,7 +64,7 @@ const AddonItemGet =
     {
         let data = {};
 
-        Object.entries(data).forEach(([key, value]) =>
+        Object.keys(this.data).forEach((key) =>
         {
             data[key] = this.Get(key, callback);
         })

package/lib/src/classes/addon/classes/item/mixins/set.js

@@ -35,15 +35,13 @@ const AddonItemSet =
         }
         catch(error)
         {
-            throw new Error('Error setting value on field ' + key + '. ' + error.message)
+            throw this.addon.onetype.Error(500, 'Error setting value on field :field:.', {field: key});
         }
 
         if(callback)
         {
             this.addon.items.callbacks.modify.forEach(callback => callback(this, key, value, prevValue));
-            this.addon.items.callbacks.set.forEach(callback => callback(this, key, value));
-            this.addon.onetype.Emit('addon.item.modify', this, key, value, prevValue);
-            this.addon.onetype.Emit('addon.item.set', this, key, value, prevValue);
+            this.addon.onetype.Emit('@addon.item.modify', this, key, value, prevValue);
         }
 
         this.data[key] = value;
@@ -51,7 +49,7 @@ const AddonItemSet =
         if(callback)
         {
             this.addon.items.callbacks.modified.forEach(callback => callback(this, key, value, prevValue));
-            this.addon.onetype.Emit('addon.item.modified', this, key, value, prevValue);
+            this.addon.onetype.Emit('@addon.item.modified', this, key, value, prevValue);
         }
     },
 

package/lib/src/classes/addon/classes/item/mixins/store.js

@@ -9,7 +9,7 @@ const AddonItemStore =
 
         if(value !== undefined)
         {
-            return onetype.DataDefineOne(this.store[key], [typeof value]);
+            return this.addon.onetype.DataDefineOne(this.store[key], [typeof value]);
         }
 
         return this.store[key];

package/lib/src/classes/addon/classes/render/class.js

@@ -14,7 +14,7 @@ class OneTypeAddonRender
         this.Name = name;
         this.Callback = callback;
 
-        this._updateTimeout = null;
+        this.UpdateFrame = null;
         this.Data = { state: addon.onetype.StateGet() };
         this.Attributes = {};
         this.Item = null;
@@ -35,8 +35,6 @@ class OneTypeAddonRender
             destroy: [],
             error: [],
             ready: [],
-            visible: [],
-            resize: [],
             compile: []
         };
 
@@ -49,10 +47,7 @@ class OneTypeAddonRender
             rendering: false
         };
 
-        this.Observer = {
-            visibility: undefined,
-            resize: undefined
-        };
+        this.Emitters = [];
 
         const proxy = new Proxy(this, {
             get(target, prop)
@@ -76,9 +71,13 @@ class OneTypeAddonRender
                     const changed = target.Data[prop] !== value;
                     target.Data[prop] = value;
 
-                    if(changed && target.State.ready && !target.State.rendering)
+                    if(changed && target.State.ready && !target.State.rendering && !target.UpdateFrame)
                     {
-                        target._scheduleUpdate();
+                        target.UpdateFrame = requestAnimationFrame(() =>
+                        {
+                            target.UpdateFrame = null;
+                            target.Update();
+                        });
                     }
                 }
 
@@ -89,19 +88,6 @@ class OneTypeAddonRender
         return proxy;
     }
 
-    _scheduleUpdate()
-    {
-        if(this._updateTimeout)
-        {
-            clearTimeout(this._updateTimeout);
-        }
-
-        this._updateTimeout = setTimeout(() =>
-        {
-            this._updateTimeout = null;
-            this.Update();
-        }, 16);
-    }
 }
 
 Object.assign(OneTypeAddonRender.prototype, RenderGet);