native-document 1.0.15 → 1.0.16-8.2

package/rollup.config.js

@@ -1,20 +1,34 @@
 import terser from '@rollup/plugin-terser';
+import replace from '@rollup/plugin-replace';
+import postcss from 'rollup-plugin-postcss';
+
+const PreventProd = replace({
+    'process.env.NODE_ENV': JSON.stringify('production'),
+    preventAssignment: true,
+});
 
 export default [
     {
         input: {
-            main: 'index.js'
+            main: 'cdn.js'
         },
         output: {
             dir: 'dist',
             entryFileNames: 'native-document.dev.js',
             format: 'iife',
-            name: 'NativeDocument'
+            name: 'NativeDocument',
+            sourcemap: true
         },
+        plugins: [
+            replace({
+                'process.env.NODE_ENV': JSON.stringify('development'),
+                preventAssignment: true,
+            })
+        ]
     },
     {
         input: {
-            main: 'index.js'
+            main: 'cdn.js'
         },
         output: {
             dir: 'dist',
@@ -23,7 +37,42 @@ export default [
             name: 'NativeDocument'
         },
         plugins: [
+            PreventProd,
             terser()
         ]
+    },
+    {
+        input: {
+            main: 'devtools/index.js'
+        },
+        output: {
+            dir: 'dist',
+            entryFileNames: 'native-document.devtools.min.js',
+            format: 'iife',
+            name: 'NativeDocumentDevTools',
+        },
+        plugins: [
+            terser()
+        ]
+    },
+    {
+        input: {
+            main: 'components.js'
+        },
+        output: {
+            dir: 'dist',
+            entryFileNames: 'native-document.components.min.js',
+            format: 'iife',
+            globals: 'NativeComponents',
+            name: 'NativeComponents',
+        },
+        plugins: [
+            PreventProd,
+            postcss({
+                extract: true,
+                minimize: true,
+            }),
+            // terser()
+        ]
     }
 ];

package/router.d.ts

@@ -0,0 +1,7 @@
+
+import {RouteParams, Router, Link} from "./types/router";
+
+export {
+    Router,
+    Link
+}

package/src/components/$traits/has-draggable/HasDraggable.d.ts

@@ -0,0 +1,4 @@
+export interface HasDraggable {
+    move(x: number, y: number): void;
+    makeDraggable(parent: HTMLElement, grip?: HTMLElement | null): () => void;
+}

package/src/components/$traits/has-draggable/HasDraggable.js

@@ -0,0 +1,82 @@
+
+import './has-draggable.css';
+
+/**
+ *  @class
+ *  */
+export default function HasDraggable() {}
+
+
+/**
+ * @param {number} x
+ * @param {number} y
+ */
+HasDraggable.prototype.move = function(x, y) {
+    if(!this.$movableElement) {
+        return;
+    }
+
+    this.$movableElement.style.left   = x + 'px';
+    this.$movableElement.style.top    = y + 'px';
+    this.$movableElement.style.margin = '0';
+};
+
+/**
+ * @param {HTMLElement} parent
+ * @param {HTMLElement|null} [grip=null]
+ * @returns {() => void}
+ */
+HasDraggable.prototype.makeDraggable = function(parent, grip = null) {
+    if(!this.emit) {
+        throw new Error('HasDraggable requires HasEventEmitter - add it via BaseComponent.use(Component, HasEventEmitter, HasDraggable).');
+    }
+    this.$movableElement = parent;
+
+    const gripElement = grip || parent;
+    gripElement.classList.add('is-draggable');
+
+    let isDragging = false;
+    let startX     = 0;
+    let startY     = 0;
+    let initialX   = 0;
+    let initialY   = 0;
+
+    const onMouseDown = (e) => {
+        isDragging = true;
+        startX     = e.clientX;
+        startY     = e.clientY;
+        initialX   = parent.offsetLeft;
+        initialY   = parent.offsetTop;
+        this.emit('onDragStart', [e, initialX, initialY]);
+
+        gripElement.classList.add('is-dragging');
+    };
+
+    const onMouseMove = (e) => {
+        if(!isDragging) {
+            return;
+        }
+
+        const x = initialX + (e.clientX - startX);
+        const y = initialY + (e.clientY - startY);
+
+        this.move(x, y);
+        this.emit('onDrag', [e, x, y]);
+    };
+
+    const onMouseUp = () => {
+        isDragging = false;
+        this.emit('onDragEnd');
+        gripElement.classList.remove('is-dragging');
+    };
+
+    gripElement.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+        gripElement.removeEventListener('mousedown', onMouseDown);
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+};

package/src/components/$traits/has-draggable/has-draggable.css

@@ -0,0 +1,8 @@
+.is-draggable {
+    cursor: grab;
+}
+
+.is-dragging {
+    cursor: grabbing;
+    user-select: none;
+}

package/src/components/$traits/has-items/HasItems.d.ts

@@ -0,0 +1,9 @@
+import type { ObservableItem } from '../../../types/observable';
+
+export interface HasItems {
+    dynamic(observableArray?: ObservableItem<unknown[]> | null): this;
+    bind(observableArray?: ObservableItem<unknown[]> | null): this;
+    items(items: unknown[]): this;
+    clear(): this;
+    removeItem(item: unknown): this;
+}

package/src/components/$traits/has-items/HasItems.js

@@ -0,0 +1,64 @@
+import {$} from '../../../core/data/Observable';
+
+/**
+ * Mixin for managing a collection of items with manipulation methods
+ * @class
+ */
+export default function HasItems() {}
+
+
+HasItems.prototype.trailing = () => {};
+
+/**
+ * Sets a dynamic observable array to store items
+ * @param {ObservableArray?} [observableArray=null] - Observable array to use, or creates a new one if null
+ * @returns {this}
+ */
+HasItems.prototype.dynamic = function(observableArray = null) {
+    this.$description.items = observableArray || $.array([]);
+    return this;
+};
+HasItems.prototype.bind = HasItems.prototype.dynamic;
+
+/**
+ * Replaces all existing items with a new array of items
+ * @param {Array} items - Array of new items
+ * @returns {this}
+ */
+HasItems.prototype.items = function(items) {
+    this.$description.items.splice(0, this.$description.items.length, ...items);
+    return this;
+};
+
+
+/**
+ * Clears all items from the collection
+ * @returns {this}
+ */
+HasItems.prototype.clear = function() {
+    const items = this.$description.items;
+    if(Array.isArray(items)) {
+        items.splice(0, items.length);
+        return this;
+    }
+    items.clear();
+    return this;
+};
+
+/**
+ * Removes a specific item from the collection
+ * @param {*} item - The item to remove
+ * @returns {this}
+ */
+HasItems.prototype.removeItem = function(item) {
+    const items = this.$description.items;
+    if(Array.isArray(items)) {
+        const index = items.indexOf(item);
+        if(index > -1) {
+            items.splice(index, 1);
+            return this;
+        }
+    }
+    items.removeItem(item);
+    return this;
+};

package/src/components/$traits/has-position/HasFullPosition.d.ts

@@ -0,0 +1,14 @@
+export interface HasFullPosition {
+    atTop(): this;
+    atBottom(): this;
+    atLeft(): this;
+    atRight(): this;
+    atTopLeading(): this;
+    atTopTrailing(): this;
+    atTopCenter(): this;
+    atBottomLeading(): this;
+    atBottomTrailing(): this;
+    atBottomCenter(): this;
+    atLeadingCenter(): this;
+    atTrailingCenter(): this;
+}

package/src/components/$traits/has-position/HasFullPosition.js

@@ -0,0 +1,95 @@
+
+export default function HasFullPosition() {}
+
+HasFullPosition.prototype.atTop = function() {
+    this.$description.position = 'top';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atBottom = function() {
+    this.$description.position = 'bottom';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atLeft = function() {
+    this.$description.position = 'left';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atRight = function() {
+    this.$description.position = 'right';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atTopLeading = function() {
+    this.$description.position = 'top-leading';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atTopTrailing = function() {
+    this.$description.position = 'top-trailing';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atTopCenter = function() {
+    this.$description.position = 'top-center';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atBottomLeading = function() {
+    this.$description.position = 'bottom-leading';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atBottomTrailing = function() {
+    this.$description.position = 'bottom-trailing';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atBottomCenter = function() {
+    this.$description.position = 'bottom-center';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atLeadingCenter = function() {
+    this.$description.position = 'leading-center';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasFullPosition.prototype.atTrailingCenter = function() {
+    this.$description.position = 'trailing-center';
+    return this;
+};

package/src/components/$traits/has-position/HasPosition.d.ts

@@ -0,0 +1,7 @@
+export interface HasPosition {
+    atTop(): this;
+    atBottom(): this;
+    atLeft(): this;
+    atRight(): this;
+    atCenter(): this;
+}

package/src/components/$traits/has-position/HasPosition.js

@@ -0,0 +1,45 @@
+/**
+ *
+ * @class
+ */
+export default function HasPosition() {}
+
+/**
+ * @returns {this}
+ */
+HasPosition.prototype.atTop = function() {
+    this.$description.position = 'top';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasPosition.prototype.atBottom = function() {
+    this.$description.position = 'bottom';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasPosition.prototype.atLeft = function() {
+    this.$description.position = 'left';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasPosition.prototype.atRight = function() {
+    this.$description.position = 'right';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasPosition.prototype.atCenter = function() {
+    this.$description.position = 'center';
+    return this;
+};

package/src/components/$traits/has-resizable/HasResizable.d.ts

@@ -0,0 +1,13 @@
+interface ResizableOptions {
+    directions?: string[];
+    size?: {
+        minWidth?: number;
+        maxWidth?: number;
+        minHeight?: number;
+        maxHeight?: number;
+    };
+}
+
+export interface HasResizable {
+    makeResizable(parent: HTMLElement, options?: ResizableOptions): () => void;
+}

package/src/components/$traits/has-resizable/HasResizable.js

@@ -0,0 +1,122 @@
+
+import './has-resizable.css';
+
+/**
+ *
+ * @constructor
+ */
+export default function HasResizable() {}
+
+/**
+ * @param {HTMLElement} parent
+ * @param {{ directions?: string[], size?: { minWidth?: number, maxWidth?: number, minHeight?: number, maxHeight?: number } }} [options={}]
+ * @returns {() => void}
+ */
+HasResizable.prototype.makeResizable = function(parent, options = {}) {
+    if(!this.emit) {
+        throw new Error('HasResizable requires HasEventEmitter — add it via BaseComponent.use(Component, HasEventEmitter).');
+    }
+
+    const directions = options.directions || ['right', 'bottom', 'bottom-right'];
+    const sizeConstraint = options.size || { minWidth: 200, minHeight: 200 };
+    sizeConstraint.minWidth = sizeConstraint.minWidth || 200;
+    sizeConstraint.minHeight = sizeConstraint.minHeight || 200;
+
+    parent.classList.add('is-resizable');
+
+    const handles = [];
+
+    directions.forEach((direction) => {
+        const handle = document.createElement('div');
+        handle.className = 'resize-handle is-' + direction;
+        parent.appendChild(handle);
+        handles.push(handle);
+
+        setupResizeHandle(handle, parent, direction, sizeConstraint, this);
+    });
+
+    return () => {
+        handles.forEach(h => h.remove());
+    };
+};
+
+const setupResizeHandle = (handle, parent, direction, sizeConstraint, instance) => {
+    let isResizing = false;
+    let startX     = 0;
+    let startY     = 0;
+    let startW     = 0;
+    let startH     = 0;
+    let startLeft  = 0;
+    let startTop   = 0;
+
+    const onMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        isResizing = true;
+        startX     = e.clientX;
+        startY     = e.clientY;
+        startW     = parent.offsetWidth;
+        startH     = parent.offsetHeight;
+        startLeft  = parent.offsetLeft;
+        startTop   = parent.offsetTop;
+
+        document.body.classList.add('is-resizing');
+        instance.emit?.('onResizeStart', [e, startW, startH]);
+    };
+
+    const onMouseMove = (e) => {
+        if(!isResizing) {
+            return;
+        }
+
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        if(direction === 'right' || direction === 'top-right' || direction === 'bottom-right') {
+            const newWidth = Math.max(sizeConstraint.minWidth, startW + dx);
+            if(newWidth > sizeConstraint.minWidth && (!sizeConstraint.maxWidth || newWidth <= sizeConstraint.maxWidth)) {
+                parent.style.width = newWidth + 'px';
+            }
+        }
+
+        if(direction === 'left' || direction === 'top-left' || direction === 'bottom-left') {
+            const newWidth = Math.max(sizeConstraint.minWidth, startW - dx);
+            if(newWidth > sizeConstraint.minWidth && (!sizeConstraint.maxWidth || newWidth <= sizeConstraint.maxWidth)) {
+                parent.style.width = newWidth + 'px';
+                parent.style.left  = (startLeft + dx) + 'px';
+            }
+        }
+
+        if(direction === 'bottom' || direction === 'bottom-right' || direction === 'bottom-left') {
+            const newHeight = Math.max(sizeConstraint.minHeight, startH + dy);
+            if(newHeight > sizeConstraint.minHeight && (!sizeConstraint.maxHeight || newHeight <= sizeConstraint.maxHeight)) {
+                parent.style.height = newHeight + 'px';
+            }
+        }
+
+        if(direction === 'top' || direction === 'top-right' || direction === 'top-left') {
+            const newHeight = Math.max(sizeConstraint.minHeight, startH - dy);
+            if(newHeight > sizeConstraint.minHeight && (!sizeConstraint.maxHeight || newHeight <= sizeConstraint.maxHeight)) {
+                parent.style.height = newHeight + 'px';
+                parent.style.top    = (startTop + dy) + 'px';
+            }
+        }
+
+        instance.emit?.('onResize', [e, parent.offsetWidth, parent.offsetHeight]);
+    };
+
+    const onMouseUp = () => {
+        if(!isResizing) {
+            return;
+        }
+
+        isResizing = false;
+        document.body.classList.remove('is-resizing');
+        instance.emit?.('onResizeEnd', [parent.offsetWidth, parent.offsetHeight]);
+    };
+
+    handle.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+};

package/src/components/$traits/has-resizable/has-resizable.css

@@ -0,0 +1,121 @@
+:root {
+    --resize-handle-size: 3px;
+    --resize-handle-color: var(--gray-lite-3);
+    --resize-handle-color-hover: var(--gray-lite-1);
+    --resize-notch-size: 6px;
+}
+
+.is-resizable {
+    box-sizing: border-box;
+}
+
+.resize-handle {
+    position: absolute;
+    z-index: 10;
+
+    &.is-right {
+        top: 0;
+        right: 0;
+        width: var(--resize-handle-size);
+        height: 100%;
+        cursor: ew-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-left {
+        top: 0;
+        left: 0;
+        width: var(--resize-handle-size);
+        height: 100%;
+        cursor: ew-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-top {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: var(--resize-handle-size);
+        cursor: ns-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-bottom {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: var(--resize-handle-size);
+        cursor: ns-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-top-left {
+        top: 0;
+        left: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nwse-resize;
+    }
+
+    &.is-top-right {
+        top: 0;
+        right: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nesw-resize;
+    }
+
+    &.is-bottom-left {
+        bottom: 0;
+        left: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nesw-resize;
+    }
+
+    &.is-bottom-right {
+        bottom: 0;
+        right: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nwse-resize;
+
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 3px;
+            right: 3px;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 0 var(--resize-notch-size) var(--resize-notch-size);
+            border-color: transparent transparent var(--resize-handle-color) transparent;
+            transition: border-color 0.15s ease;
+        }
+
+        &:hover::after {
+            border-color: transparent transparent var(--resize-handle-color-hover) transparent;
+        }
+    }
+}
+
+body.is-resizing {
+    cursor: nwse-resize;
+    user-select: none;
+}