inviton-powerduck 0.0.82 → 0.0.84

package/components/datatable/upper-buttons-wrapper.tsx

@@ -1,46 +1,43 @@
-import { Prop } from "vue-facing-decorator";
+import { Prop, toNative } from "vue-facing-decorator";
 import TsxComponent, { Component } from "../../app/vuetsx";
-import { Teleport } from "vue";
 import { PortalUtils } from "../../common/utils/utils";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
+
 interface DataTableUpperButtonsWrapperArgs {
-    hasCheckbox?: boolean;
-    cssClass?: string;
+	hasCheckbox?: boolean;
+	cssClass?: string;
 }
 
-@Component({
-    components: {
-        teleport: Teleport,
-    },
-})
-export default class DataTableUpperButtonsWrapper extends TsxComponent<DataTableUpperButtonsWrapperArgs> implements DataTableUpperButtonsWrapperArgs {
-    @Prop() hasCheckbox?: boolean;
-    @Prop() cssClass?: string;
+@Component
+class DataTableUpperButtonsWrapperComponent extends TsxComponent<DataTableUpperButtonsWrapperArgs> implements DataTableUpperButtonsWrapperArgs {
+	@Prop() hasCheckbox?: boolean;
+	@Prop() cssClass?: string;
 
-    private getCssClass(): string {
-        let builder = "table-upper-buttons-wrap";
-        if (this.hasCheckbox) {
-            builder += " wrap-has-checkbox";
-        }
+	private getCssClass (): string {
+		let builder = "table-upper-buttons-wrap";
+		if (this.hasCheckbox) {
+			builder += " wrap-has-checkbox";
+		}
 
-        if (!isNullOrEmpty(this.cssClass)) {
-            builder += " " + this.cssClass;
-        }
+		if (!isNullOrEmpty(this.cssClass)) {
+			builder += " " + this.cssClass;
+		}
 
-        return builder;
-    }
+		return builder;
+	}
 
-    private render(h) {
-        if (PortalUtils.isIOS()) {
-            return (
-                <div class={"ios-table-upper-buttons-wrap" + (this.hasCheckbox ? " wrap-has-checkbox" : "")}>
-                    <teleport to="#bs-dtbtn-container">
-                        <div class={this.getCssClass()}>{this.$slots.default?.()}</div>
-                    </teleport>
-                </div>
-            );
-        } else {
-            return <div class={this.getCssClass()}>{this.$slots.default?.()}</div>;
-        }
-    }
+	private render (h) {
+		if (PortalUtils.isIOS()) {
+			return (
+				<div class={"ios-table-upper-buttons-wrap" + (this.hasCheckbox ? " wrap-has-checkbox" : "")}>
+					<div class={this.getCssClass()}>{this.$slots.default?.()}</div>
+				</div>
+			);
+		} else {
+			return <div class={this.getCssClass()}>{this.$slots.default?.()}</div>;
+		}
+	}
 }
+
+const DataTableUpperButtonsWrapper = toNative(DataTableUpperButtonsWrapperComponent)
+export default DataTableUpperButtonsWrapper

package/components/table-wrapper/css/table-wrapper.css

@@ -1,7 +1,9 @@
 .dwh-table-wrapper {
     background: white;
+    padding: 20px;
+    border: 1px solid rgba(0, 0, 0, 0.025);
     border-radius: 8px;
-    min-height: 80px;
+    min-height: 200px;
     position: relative;
     height: 100%;
 }
@@ -12,6 +14,26 @@
     width: 30px;
     text-align: center;
     margin: 0 1px;
+    border: 0;
+}
+
+.dwh-table-wrapper .dwh-table-actions-wrapper {
+    position: static;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: start;
+}
+
+.dwh-table-wrapper .dwh-table-actions-wrapper > .btn {
+    position: static;
+    /* flex: 0 1 24%; */
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.dwh-table-wrapper .table-upper-buttons-wrap .btn {
+    margin: 3px;
 }
 
 .table-upper-buttons-wrap {
@@ -19,3 +41,34 @@
     top: 20px;
     z-index: 1;
 }
+
+@media (max-width: 575px) {
+    .dwh-table-wrapper {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .dwh-table-wrapper > .table-upper-buttons-wrap {
+        position: fixed;
+        z-index: 99;
+        bottom: 0;
+        top: auto;
+        left: 0;
+        background: rgb(251 250 250);
+        padding: 3px;
+        border: 1px solid #e9e9e9;
+        justify-content: center;
+        gap: 5px;
+    }
+
+    .dwh-table-wrapper > .table-upper-buttons-wrap + .dt-root {
+        margin-top: 0;
+        padding-bottom: 30px;
+        --datatable-fullheight-container-buttons-offset: 85px;
+    }
+
+    .dwh-table-wrapper .dt-mobile-row::after {
+        content: '';
+        height: 100px;
+    }
+}

package/package.json

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