@onetype/framework 2.0.41 → 2.0.43

package/docs/database.md

@@ -1,171 +0,0 @@
-# Database
-
-Custom ORM built on Knex with a fluent query interface. Supports PostgreSQL with 17+ operators including JSONB.
-
-## Connection
-
-```js
-import database from '#database/load.js';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-database.Item({
-    id: 'primary',
-    port: 5432,
-    hostname: process.env.DB_HOSTNAME,
-    username: process.env.DB_USERNAME,
-    database: process.env.DB_DATABASE,
-    password: process.env.DB_PASSWORD
-});
-```
-
-Every addon with a `Table()` definition now persists to this database automatically. You can define multiple database connections by using different IDs.
-
-## How it works
-
-The database addon intercepts CRUD middleware channels:
-- `item.crud.create` — `item.Create()`
-- `item.crud.update` — `item.Update()`
-- `item.crud.delete` — `item.Delete()`
-- `addon.items.find` — `addon.Find()`
-
-Without the database addon loaded, the same item API works entirely in-memory. Swap storage without touching business logic.
-
-## Query builder
-
-```js
-// Find one
-const user = await users.Find().filter('id', id).one();
-
-// Find many
-const items = await offers.Find()
-    .filter('deleted', false)
-    .filter('status', 'Aktivna')
-    .sort('score', 'desc')
-    .many();
-
-// Find with specific database connection
-const items = await offers.Find('primary')
-    .filter('organization_id', 9)
-    .many();
-```
-
-## Pagination
-
-```js
-const items = await offers.Find()
-    .page(2)
-    .limit(20)
-    .many();
-
-// Plain result — raw objects with pagination metadata
-const { items, total, pages } = await offers.Find()
-    .page(page)
-    .limit(limit)
-    .plain();
-
-// Count
-const total = await offers.Find()
-    .filter('status', 'Aktivna')
-    .count();
-```
-
-## Filtering
-
-```js
-// Equals (default)
-.filter('status', 'Aktivna')
-
-// Not equals
-.filter('id', excludeId, 'NOT EQUALS')
-
-// IN
-.filter('organization_id', [1, 2, 9], 'IN')
-
-// LIKE / ILIKE (case-insensitive)
-.filter('name', '%beach%', 'ILIKE')
-
-// Comparison
-.filter('age', 18, '>=')
-.filter('age', 65, '<=')
-
-// BETWEEN
-.filter('price', [100, 500], 'BETWEEN')
-
-// NULL / NOT NULL
-.filter('deleted_at', null, 'NULL')
-.filter('email', null, 'NOT NULL')
-
-// PostgreSQL JSONB
-.filter('tags', 'featured', 'CONTAINS')
-.filter('metadata', '{"active": true}', 'CONTAINED')
-.filter('tags', 'premium', 'HAS')
-```
-
-**All operators:** `EQUALS`, `NOT EQUALS`, `IN`, `LIKE`, `ILIKE`, `CONTAINS`, `CONTAINED`, `HAS`, `BETWEEN`, `NULL`, `NOT NULL`, `>`, `>=`, `<`, `<=`, and more.
-
-## Sorting
-
-```js
-.sort('created_at', 'desc')
-.sort('name', 'asc')
-```
-
-## Select
-
-Return only specific fields:
-
-```js
-.select(['id', 'name', 'slug', 'type', 'stars'])
-```
-
-## Joins
-
-```js
-// Join addon by field
-.join('files', 'cover_id', 'cover')
-// → Resolves cover_id into the full file object as 'cover'
-
-// Join addon by array field
-.join('countries', 'countries', 'countries')
-// → Resolves array of country IDs into full country objects
-
-// Join with field selection
-.join('files', 'cover_id', 'cover', ['id', 'hash', 'extension'])
-// → Only include specific fields from the joined items
-
-// Multiple joins
-.join('files', 'cover_id', 'cover')
-.join('files', 'images')
-.join('countries', 'countries', 'countries')
-.join('cities', 'cities', 'cities')
-.join('areas', 'areas', 'areas')
-```
-
-## Offset
-
-```js
-.offset(50)
-```
-
-## Full example
-
-```js
-const offerItems = await offers.Find('primary')
-    .filter('deleted', false)
-    .filter('status', 'Aktivna')
-    .filter('organization_id', [...orgIds, 9], 'IN')
-    .join('countries', 'countries', 'countries')
-    .join('cities', 'cities', 'cities')
-    .join('areas', 'areas', 'areas')
-    .sort('score', 'desc')
-    .select(['id', 'name', 'slug', 'type', 'stars', 'pricing'])
-    .page(1)
-    .limit(12)
-    .many();
-
-offerItems.forEach(offer => {
-    console.log(offer.Get('name'), offer.Get('stars'));
-});
-```

package/docs/frontend.md

@@ -1,396 +0,0 @@
-# Frontend
-
-Proxy-based reactivity with DOM diffing, Vue-like directives, SPA page routing, and convention-based asset bundling.
-
-## Pages
-
-Pages define routes with async data loading, CSS Grid layouts, and template areas.
-
-```js
-pages.ItemAdd({
-    id: 'home',
-    route: '/',
-    title: 'Home',
-    grid: {
-        template: '"content"',
-        columns: '1fr',
-        rows: '1fr'
-    },
-    areas: {
-        content: function() {
-            return `
-                <div class="page-home">
-                    <c-navbar></c-navbar>
-                    <c-hero title="Welcome"></c-hero>
-                    <c-footer></c-footer>
-                </div>
-            `;
-        }
-    }
-});
-```
-
-### Route params
-
-```js
-pages.ItemAdd({
-    id: 'offer',
-    route: '/ponuda/:id/:type/:location/:name',
-    // ...
-});
-```
-
-Params are available in `this.parameters`:
-
-```js
-areas: {
-    content: function() {
-        const id = this.parameters.id;
-        // ...
-    }
-}
-```
-
-### Multiple routes
-
-```js
-route: ['/offers', '/offers/:type/:value']
-```
-
-### Async data loading
-
-The `data` function runs before render:
-
-```js
-pages.ItemAdd({
-    id: 'offer',
-    route: '/ponuda/:id/:type/:location/:name',
-
-    title: function(parameters, data) {
-        return data?.offer?.name || 'Offer';
-    },
-
-    data: async function(parameters) {
-        const offer = await offers.Find()
-            .filter('id', parameters.id)
-            .join('files', 'cover_id', 'cover')
-            .join('countries', 'countries', 'countries')
-            .join('cities', 'cities', 'cities')
-            .one();
-
-        return { offer: offer ? offer.data : null };
-    },
-
-    areas: {
-        content: function() {
-            this.offer = this.data.offer || {};
-
-            return `
-                <div>
-                    <h1>{{ offer.name }}</h1>
-                    <span ot-if="offer.stars">{{ offer.stars }} stars</span>
-                </div>
-            `;
-        }
-    }
-});
-```
-
-### Interactive pages
-
-Pages can have local state and methods:
-
-```js
-areas: {
-    content: function() {
-        this.items = [];
-        this.page = 1;
-        this.total = 0;
-
-        this.fetch = async () => {
-            const result = await offers.Find()
-                .filter('status', 'Aktivna')
-                .sort('score', 'desc')
-                .page(this.page)
-                .limit(12)
-                .plain();
-
-            this.items = result.items;
-            this.total = result.total;
-        };
-
-        this.handlePageChange = (newPage) => {
-            this.page = newPage;
-            this.fetch();
-        };
-
-        this.fetch();
-
-        return `
-            <div>
-                <span>{{ total }} results</span>
-
-                <div ot-if="items.length > 0" class="grid">
-                    <a ot-for="offer in items" :href="'/offer/' + offer.id">
-                        <c-offer-card :offer="offer"></c-offer-card>
-                    </a>
-                </div>
-
-                <c-pagination
-                    :page="page"
-                    :pages="Math.ceil(total / 12)"
-                    :_change="handlePageChange"
-                ></c-pagination>
-            </div>
-        `;
-    }
-}
-```
-
-Setting `this.items`, `this.page`, or `this.total` triggers a 16ms debounced re-render with DOM diffing.
-
-## Components
-
-Reusable UI elements with typed config and template rendering.
-
-```js
-components.ItemAdd({
-    id: 'hero',
-    config: {
-        title: { type: 'string', value: 'Page Title' },
-        subtitle: { type: 'string', value: '' },
-        image: { type: 'string', value: '' },
-        variant: { type: 'array', value: [], options: ['compact', 'tall'] }
-    },
-    render: function() {
-        return `
-            <section class="holder" :style="'background-image: url(' + image + ')'">
-                <div class="overlay"></div>
-                <div class="content">
-                    <slot name="top"></slot>
-                    <h1>{{ title }}</h1>
-                    <p ot-if="subtitle">{{ subtitle }}</p>
-                </div>
-            </section>
-        `;
-    }
-});
-```
-
-### Using components
-
-Components become custom elements prefixed with `c-`:
-
-```html
-<c-hero title="Our Offers" subtitle="Find your trip" image="/hero.jpg">
-    <div slot="top">
-        <c-breadcrumb :items="[{label: 'Home', href: '/'}, {label: 'Offers'}]"></c-breadcrumb>
-    </div>
-</c-hero>
-```
-
-### Config types
-
-```js
-config: {
-    title: { type: 'string', value: 'Default' },
-    count: { type: 'number', value: 0 },
-    active: { type: 'boolean', value: true },
-    items: { type: 'array', value: [] },
-    data: { type: 'object', value: {} },
-    variant: { type: 'array', value: [], options: ['size-s', 'size-m', 'size-l'] },
-    _click: { type: 'function' },        // callback (prefixed with _)
-    _change: { type: 'function' }
-}
-```
-
-### Component with logic
-
-```js
-components.ItemAdd({
-    id: 'pagination',
-    config: {
-        page: { type: 'number', value: 1 },
-        pages: { type: 'number', value: 1 },
-        _change: { type: 'function' }
-    },
-    render: function() {
-        this.goToPage = (num) => {
-            if (num >= 1 && num <= this.pages) {
-                this.page = num;
-                if (this._change) this._change(num);
-            }
-        };
-
-        return `
-            <div class="pagination">
-                <button ot-click="() => goToPage(page - 1)" :disabled="page === 1">Prev</button>
-                <span>{{ page }} / {{ pages }}</span>
-                <button ot-click="() => goToPage(page + 1)" :disabled="page === pages">Next</button>
-            </div>
-        `;
-    }
-});
-```
-
-## Directives
-
-Vue-like syntax, processed during compile with priority ordering.
-
-### Conditional rendering
-
-```html
-<div ot-if="items.length > 0">Has items</div>
-<div ot-if="!loading">Content loaded</div>
-```
-
-### List rendering
-
-```html
-<a ot-for="offer in items" :href="'/offer/' + offer.id">
-    {{ offer.name }}
-</a>
-
-<!-- With index -->
-<div ot-for="item, index in items">
-    {{ index }}: {{ item.name }}
-</div>
-```
-
-### Event handlers
-
-```html
-<button ot-click="submit">Send</button>
-<button ot-click="() => goToPage(3)">Page 3</button>
-<input :_input="(e) => form.name = e.target.value">
-```
-
-### Dynamic attributes
-
-```html
-<img :src="getImage()" :alt="name" loading="lazy">
-<div :class="'card ' + (active ? 'active' : '')">
-<div :style="'background-image: url(' + image + ')'">
-<button :disabled="page === 1">
-<article :variant="variant.join(' ')">
-```
-
-### Text interpolation
-
-```html
-<span>{{ total }} results</span>
-<h1>{{ offer.name }}</h1>
-<span>{{ getStars() }}</span>
-```
-
-### All directives
-
-`ot-if`, `ot-show`, `ot-for`, `ot-click`, `ot-text`, `ot-html`, `ot-fetch`, `ot-render`, `ot-form`, and all DOM event handlers.
-
-## Reactivity
-
-Setting any property on a render context triggers a re-render:
-
-```js
-this.count = 0;
-this.increment = () => this.count++;  // triggers DOM update
-```
-
-Updates are batched with a 16ms debounce. The framework diffs the new DOM against the current DOM and patches only what changed. No virtual DOM — direct DOM diffing.
-
-Lifecycle: `init → render → compile → ready → mount → update → unmount → destroy`.
-
-## Slots
-
-Components can define named slots:
-
-```js
-render: function() {
-    return `
-        <div>
-            <slot name="top"></slot>
-            <div class="content">
-                <slot></slot>
-            </div>
-        </div>
-    `;
-}
-```
-
-Usage:
-
-```html
-<c-layout>
-    <div slot="top">Header content</div>
-    <p>Default slot content</p>
-</c-layout>
-```
-
-## Asset bundling
-
-Convention-based bundler that scans directories, strips ES module syntax, concatenates, and minifies.
-
-### Asset registry
-
-All asset paths are registered centrally in `lib/load.js` via `onetype.Assets()`. The import function resolves IDs to paths from this registry.
-
-```js
-// In application back/index.js — import by ID
-assets.Fn('import', ['framework', 'styles', 'commands', 'elements/input', 'transforms/swiper']);
-```
-
-Available asset IDs:
-
-| ID | Type | Description |
-|---|---|---|
-| `framework` | js | Core framework library |
-| `styles` | css | Shared CSS (variables, reset, queries, utilities) |
-| `commands` | js | Command system (front-end) |
-| `database` | js | Database (front-end) |
-| `directives` | js | Directives addon |
-| `transforms` | js | Transforms addon |
-| `pages` | js+css | Page router addon |
-| `elements` | js+css | Elements addon |
-| `float` | js+css | Float system (modals, toasts, tooltips, popups, overlays) |
-| `elements/form/input` | js+css | Granular element import |
-| `transforms/swiper` | js | Granular transform import |
-
-Granular imports use `elements/<group>/<name>` and `transforms/<name>` format. Element groups: `form`, `global`, `sections`, `status`.
-
-### Manual asset items
-
-```js
-// Scan a custom directory
-assets.Item({ type: 'js', order: 2, path: resolve(root, 'front') });
-assets.Item({ type: 'css', order: 2, path: resolve(root, 'front') });
-```
-
-### Dynamic content injection
-
-Inject server-side data into the frontend bundle:
-
-```js
-assets.Item({
-    type: 'js',
-    order: 4,
-    content: function() {
-        const items = Object.values(settings.Items())
-            .filter(item => item.Get('organization_id') === 9)
-            .map(item => item.data);
-
-        return `settings.ItemsAdd(${JSON.stringify(items)}, null, false);`;
-    }
-});
-```
-
-This runs at bundle time — server-side data becomes available client-side without an API call.
-
-### How it works
-
-1. Scans directories recursively for `.js` or `.css` files
-2. Prioritizes `addon.js` files (loaded first)
-3. Strips `import`/`export` statements
-4. Concatenates by `order` value
-5. Minifies via terser
-
-No webpack, no build step, no configuration files.