inviton-powerduck 0.0.39 → 0.0.41

package/components/container-with-breakpoints/index.tsx

@@ -0,0 +1,40 @@
+import { toNative, Prop } from "vue-facing-decorator";
+import TsxComponent, { Component } from "../../app/vuetsx";
+import { BreakpointHandler } from "./ts/breakpoint-handler";
+interface ContainerWithBreakpointsArgs {
+    cssClass?: string
+}
+
+
+
+@Component
+class ContainerWithBreakpointsComponent extends TsxComponent<ContainerWithBreakpointsArgs> implements ContainerWithBreakpointsArgs {
+    @Prop() cssClass: string
+    breakpointClass: string = null;
+    _handler: any;
+    
+
+    mounted() {
+        this._handler = () => {
+            const newClass = BreakpointHandler.getBreakpointsForElement(this.$el);
+            if (newClass != this.breakpointClass) {
+                this.breakpointClass = newClass;
+            }
+        }
+
+        BreakpointHandler.addResizeHandler(this._handler);
+        this._handler();
+    }
+
+    beforeUnmount() {
+        BreakpointHandler.removeResizeHandler(this._handler);
+        this._handler = null;
+    }
+
+    render(h) {
+        return <div class={`${this.cssClass != null ? this.cssClass + ' ' : ''}${this.breakpointClass}`}>{this.$slots.default?.()}</div>;
+    }
+}
+
+const ContainerWithBreakpoints = toNative(ContainerWithBreakpointsComponent)
+export default ContainerWithBreakpoints

package/components/container-with-breakpoints/ts/breakpoint-handler.ts

@@ -0,0 +1,68 @@
+import { arrayRemove } from "../../../common/utils/array-remove";
+import MemoryCache from "../../memory-cache";
+
+export class BreakpointHandler {
+    private static _handlers: any[] = [];
+
+    static addResizeHandler(handler: () => any) {
+        BreakpointHandler.bindResizeHandler();
+        BreakpointHandler._handlers.push(handler);
+    }
+
+    static removeResizeHandler(handler: () => any) {
+        arrayRemove(BreakpointHandler._handlers, handler);
+    }
+
+    static bindResizeHandler() {
+        if (MemoryCache.getItem<boolean>('breakpointsBound') == true) {
+            return;
+        }
+
+        MemoryCache.setItem<boolean>('breakpointsBound', true);
+        window.addEventListener('resize', BreakpointHandler.onWindowHasResized);
+        BreakpointHandler.onWindowHasResized();
+    }
+
+    static getBreakpointsForElement(elem: Element): string {
+        var clientWidth = elem.clientWidth;
+        var newClass = 'inv-brkmax-max ';
+
+        if (clientWidth < 1201) {
+            newClass += 'inv-brkmax-1200 ';
+        }
+   
+        //Ugly patch, but 992 should be included up..
+        if (clientWidth < 992) {
+            newClass += 'inv-brkmax-992 ';
+        }
+   
+        //Ugly patch, but 768 should be included up..
+        if (clientWidth < 768) {
+            newClass += 'inv-brkmax-768 ';
+        }
+   
+        if (clientWidth < 551) {
+            newClass += 'inv-brkmax-550 ';
+        }
+   
+        if (clientWidth < 451) {
+            newClass += 'inv-brkmax-450 ';
+        }
+   
+        if (clientWidth < 381) {
+            newClass += 'inv-brkmax-380 ';
+        }
+   
+        return newClass;
+    }
+
+    private static onWindowHasResized() {
+        for (const handler of BreakpointHandler._handlers) {
+            try {
+                handler();
+            } catch (error) {
+                console.error(error);
+            }
+        }
+    }
+}

package/components/datatable/datatable-static.tsx

@@ -123,5 +123,5 @@ export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs>
     }
 }
 
-const DataTableStatic = toNative(DataTableStaticComponent)
-export default DataTableStatic
+const DataTableStatic = toNative(DataTableStaticComponent)
+export default DataTableStatic

package/components/datatable/datatable.tsx

@@ -2257,4 +2257,4 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 
 const DataTable = toNative(DataTableComponent);
 export const DataTableType = typeof DataTable.prototype;
-export default DataTable;
+export default DataTable;

package/components/datatable/ts/reorder.ts

@@ -103,7 +103,9 @@ function raiseOnReorderedEvent() {
     }
 
     draggingItem.parentNode.childNodes.forEach((colHeader, i) => {
-        sortOrder.push(colHeader.getAttribute("data-col-id"));
+        if (colHeader.getAttribute) {
+			sortOrder.push(colHeader.getAttribute("data-col-id"));
+		}
     });
 
     var ord = onReorder;

package/components/memory-cache/index.ts

@@ -0,0 +1,27 @@
+export class MemoryCacheConfig {
+    static windowRootName: string = 'powerduck'
+    static cacheObjectKey: string = '_cache'; 
+}
+
+function getCacheRoot(): any {
+    if ((window as any)[MemoryCacheConfig.windowRootName] == null) {
+        (window as any)[MemoryCacheConfig.windowRootName] = {};
+    }
+
+    if ((window as any)[MemoryCacheConfig.windowRootName][MemoryCacheConfig.cacheObjectKey] == null) {
+        (window as any)[MemoryCacheConfig.windowRootName][MemoryCacheConfig.cacheObjectKey] = {};
+    }
+
+    return (window as any)[MemoryCacheConfig.windowRootName][MemoryCacheConfig.cacheObjectKey];
+
+}
+
+export default class MemoryCache {
+    static getItem<T>(key: string): T {
+        return getCacheRoot()[key];
+    }
+
+    static setItem<T>(key: string, value: T): void {
+        getCacheRoot()[key] = value;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inviton-powerduck",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "module",
   "scripts": {
     "build": " vite build && vue-tsc  --declaration --emitDeclarationOnly",